/* src/ui/tokens.css — DE identiteitslaag van PULSE. Eén plek voor kleur, typografie, ruimte en de shell-opmaak. Alles hangt aan CSS-variabelen; een thema is niets meer dan een andere set waarden. Daarom is de licht/donker- toggle later bijna gratis: zet `data-theme="dark"` op en alle views volgen, mits ze deze variabelen gebruiken (via `var(--…)`) i.p.v. losse hex. Richting: "light Cockpit" — cockpit-indeling (zijbalk), licht jasje. Basis- accent is het merk-blauw #2C8BBF. In donker wordt dat iets feller zodat het tegen het donker blijft poppen. Fonts: Inter (tekst) + IBM Plex Mono (techniek), self-hosted via @fontsource (zie main.jsx). Vallen terug op systeemfonts tot ze geladen zijn. Fonts wisselen later = ander @fontsource-pakket importeren + hieronder --font-sans/--font-mono aanpassen. Eén plek. */ :root { /* Merk & accent */ --brand: #2C8BBF; --brand-strong: #1F6E99; --brand-weak: rgba(44, 139, 191, 0.12); /* Tekst / inkt */ --ink: #12303F; --ink-soft: #5C6B75; --ink-faint: #8A9BA6; /* Vlakken & lijnen */ --bg: #F3F7FA; --surface: #FFFFFF; --surface-2: #FAFCFD; --line: #E3ECF2; --line-soft: #F0F4F7; --row-hover: #F7FBFD; /* Status / ernst */ --ok: #1F9D6B; --sev-5: #CC2E2E; /* ramp */ --sev-4: #E4632B; /* hoog */ --sev-3: #D9822B; /* gemiddeld */ --sev-2: #B98F00; /* waarschuwing */ --sev-1: #6C7A83; /* informatie */ --sev-0: #9AAAB4; /* niet geclassificeerd */ /* Alarm-accent (KPI) */ --alert: #B26A00; --alert-bg: #FFF7EC; --alert-border: #F0D9B8; /* Netwerktekening: lichte tint per device-type (los van status-kleuren) */ --node-fw-bg: rgba(44, 139, 191, 0.22); --node-fw-line: var(--brand); --node-sw-bg: rgba(42, 157, 143, 0.14); --node-sw-line: #2A9D8F; --node-ap-bg: rgba(124, 92, 196, 0.14); --node-ap-line: #7C5CC4; /* Fout */ --danger: #D9534F; --danger-bg: #FDF2F2; --danger-ink: #A33; /* Logo-inkt (mask-recolor). Merk-blauw op licht, wit op donker. */ --logo-ink: var(--brand); --logo-word: var(--ink); /* Typografie */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Vorm */ --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(20, 48, 63, 0.05); /* Maatvoering shell */ --sidebar-w: 184px; } [data-theme="dark"] { --brand: #3AA6DD; --brand-strong: #2C8BBF; --brand-weak: rgba(58, 166, 221, 0.16); --ink: #E6EEF3; --ink-soft: #A9BCC7; --ink-faint: #7F97A3; --bg: #0D1A23; --surface: #12232E; --surface-2: #0F1E27; --line: #1F3E4C; --line-soft: #1A323E; --row-hover: #16303E; --ok: #34D399; --sev-5: #FF5C5C; --sev-4: #FF7A45; --sev-3: #F2B33D; --sev-2: #E7C15A; --sev-1: #9FB2BD; --sev-0: #6E828D; --alert: #F2B33D; --alert-bg: #241A14; --alert-border: #6E3A1E; --node-fw-bg: rgba(58, 166, 221, 0.28); --node-fw-line: var(--brand); --node-sw-bg: rgba(45, 212, 191, 0.16); --node-sw-line: #2DD4BF; --node-ap-bg: rgba(167, 139, 250, 0.16); --node-ap-line: #A78BFA; --danger: #FF6B6B; --danger-bg: #2A1517; --danger-ink: #FF9B9B; --logo-ink: var(--brand); --logo-word: #FFFFFF; } /* ---------- basis ---------- */ * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--brand); } /* ---------- logo (mask-recolor van de eenkleurige SVG's) ---------- */ .pulse-logo-mark { -webkit-mask: url(/logo-only.svg) center / contain no-repeat; mask: url(/logo-only.svg) center / contain no-repeat; background-color: var(--logo-ink); } .pulse-logo-full { -webkit-mask: url(/logo-full.svg) center / contain no-repeat; mask: url(/logo-full.svg) center / contain no-repeat; background-color: var(--logo-word); } /* ================= SHELL (light Cockpit) ================= */ .pulse-app { display: flex; min-height: 100vh; } .pulse-sidebar { width: var(--sidebar-w); flex: none; background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .pulse-brand { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 2px 6px 16px; text-decoration: none; } /* Groter logo, verticaal gecentreerd tegen het woord+hartslag-blok (≈42px hoog). */ .pulse-brand .pulse-logo-mark { width: 42px; height: 42px; flex: none; } /* Het blok krimpt naar de woordbreedte, zodat de ECG-lijn eronder exact even breed is als P·U·L·S·E (links én rechts uitgelijnd, niet uitstekend). */ .pulse-brand .wm { display: flex; flex-direction: column; align-items: stretch; width: fit-content; line-height: 1; gap: 4px; } /* Wordmark = de blauwe, gepunte variant (staat nu op de plek van de oude zwarte tekst). */ .pulse-brand .wm-word { font-family: var(--font-mono); font-weight: 800; font-size: 15px; letter-spacing: 0.22em; color: var(--brand); } /* Hartslag-/ECG-lijn onder de letters — mask-recolor naar merk-blauw (zoals de logo's). Breedte = 100% van het (woordbrede) blok; 100% 100% laat de lijn de volle breedte spannen zodat hij met de letters uitlijnt. */ .pulse-brand .pulse-heartbeat { display: block; width: 100%; height: 20px; -webkit-mask: url(/pulse-heartbeat.svg) center / 100% 100% no-repeat; mask: url(/pulse-heartbeat.svg) center / 100% 100% no-repeat; background-color: var(--brand); } .pulse-context { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); padding: 4px 8px 6px; } .pulse-back { display: inline-block; font-size: 12px; color: var(--ink-soft); text-decoration: none; padding: 2px 8px 12px; } .pulse-back:hover { color: var(--brand); } .pulse-nav { display: flex; flex-direction: column; gap: 2px; } .pulse-nav a { padding: 9px 12px; border-radius: var(--radius-sm); color: var(--brand-strong); font-size: 12.5px; text-decoration: none; } .pulse-nav a:hover { background: var(--line-soft); } /* Losse link op HOOFDMENU-niveau (Atlas): zelfde typografie als een groepskop, zodat hij tussen Monitor/Tools/Rapportage niet lichter oogt. Alleen de dikte wijkt af van een gewone link; grootte, kleur, padding en actief-markering blijven gelijk. */ .pulse-nav a.pulse-nav-top { font-weight: 600; } .pulse-nav a.active { background: var(--brand-weak); color: var(--brand-strong); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand); } /* Uitklapbaar hoofdmenu (hoofdknop + submenu). */ .pulse-navgroup { display: flex; flex-direction: column; } .pulse-group-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 9px 12px; border: none; background: transparent; color: var(--brand-strong); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; border-radius: var(--radius-sm); text-align: left; } .pulse-group-btn:hover { background: var(--line-soft); } .pulse-group-btn.active { color: var(--brand-strong); } .pulse-caret { font-size: 10px; color: var(--ink-faint); flex: none; } .pulse-subnav { margin: 2px 0 4px 12px; padding-left: 8px; border-left: 1px solid var(--line); } .pulse-subnav a { font-size: 11px; } /* Groepskop die zowel linkt (naar de landing) als in-/uitklapt: link + losse caret. De link krijgt exact de groep-knop-opmaak (grijs, geen onderstreping), zodat alle hoofditems identiek ogen; de caret lijnt rechts uit met die van de andere groepen. */ .pulse-group-row { display: flex; align-items: center; } .pulse-group-row .pulse-group-link { flex: 1; width: auto; text-decoration: none; } .pulse-caret-btn { flex: none; background: transparent; border: none; cursor: pointer; color: var(--ink-faint); padding: 9px 12px; line-height: 1; font-family: inherit; } .pulse-caret-btn:hover { color: var(--ink-soft); } /* Onderblok in de zijbalk: los van de navigatie, onderaan geduwd. Bevat (admin) Instellingen, het versienummer en de hub-status. */ .pulse-side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 10px; } .pulse-version { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); padding: 0 8px; letter-spacing: 0.02em; } .pulse-side-foot { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-soft); padding: 2px 8px; } .pulse-side-foot .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; } /* Leaflet brengt een EIGEN z-index-schaal mee (panes 400-700, controls 800) die ver boven die van Pulse ligt (zijbalk 50, drawer 60, modal 1000). Zonder isolatie concurreren die globaal en valt alles wat over een kaart heen moet -- de klantselector in de topbar, de locatiekiezer -- ACHTER de kaart (melding Mathijs 2026-08-06). `isolation` maakt van elke kaart een eigen stapelcontext, zodat Leaflets getallen BINNEN de kaart blijven en de Pulse-schaal weer klopt. Dit is de bron; per view z-indexen ophogen is symptoombestrijding (en zou de drawer op 60 onder die view begraven). */ .leaflet-container { isolation: isolate; } .pulse-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pulse-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--line); } .pulse-crumbs { font-size: 12px; color: var(--ink-soft); } .pulse-topbar-company { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 12.5px; font-family: inherit; max-width: 240px; } .pulse-topbar-right { display: flex; align-items: center; gap: 16px; } .pulse-user { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); } .pulse-uinit { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .pulse-logout { background: transparent; color: var(--brand); border: 1px solid var(--brand); padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.82rem; font-family: inherit; } .pulse-logout:hover { background: var(--brand-weak); } /* Dynamische breedte: de inhoud groeit mee met de beschikbare ruimte (window/ resolutie/zoom) i.p.v. een vast plafond van 1120px — op een breed/hoog-resolutie- scherm bleef rechts anders ruimte leeg (wens Mathijs). Leesbaarheid van lange tekst blijft per view geregeld (notities/kaarten hebben hun eigen max-breedte). */ .pulse-content { padding: 24px; max-width: none; width: 100%; } /* ================= LOGIN ================= */ .pulse-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; /* Abstracte, merk-blauwe achtergrond (pulse-bg.svg in public/, root-absoluut geladen net als de logo's). Twee witte lagen erover temperen 'm zodat de content (logo/PULSE/knop) er rustig op leest: een egale wash (overal iets minder overheersend) + een zachte centrale opklaring waar de tekst staat. Wash-kleur = --bg (#F3F7FA). Alfa's zijn de tuning-knoppen: hoger = rustiger. */ background: radial-gradient(ellipse 48% 54% at 50% 47%, rgba(243, 247, 250, 0.85) 0%, rgba(243, 247, 250, 0.45) 42%, rgba(243, 247, 250, 0) 72%), linear-gradient(rgba(243, 247, 250, 0.32), rgba(243, 247, 250, 0.32)), var(--bg) url(/pulse-bg.svg) center / cover no-repeat; } .pulse-login .pulse-logo-full { width: 380px; /* volledige logo, fors groter */ height: 115px; /* 380 × 2500/8300 ≈ verhouding logo */ background-color: var(--brand); /* in merk-blauw i.p.v. inkt */ margin-bottom: 30px; } /* PULSE spant exact de breedte van de tagline eronder: de tagline (nowrap) bepaalt de breedte van het blok; PULSE ("P U L S E") vult die met text-align: justify. Werkt ongeacht font/afmeting. */ .pulse-login .brandblock { width: max-content; max-width: 92vw; margin: 0 auto; } .pulse-login .plabel { width: 100%; text-align: justify; text-align-last: justify; font-weight: 800; font-size: 2.1rem; color: var(--ink); margin: 0 0 6px; } .pulse-login .tagline { white-space: nowrap; color: var(--ink-soft); font-size: 0.8rem; margin: 0 0 30px; } .pulse-login .loginbtn { background: var(--brand); color: #fff; border: none; padding: 12px 22px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1rem; font-family: inherit; } .pulse-login .loginbtn:hover { background: var(--brand-strong); } /* Toegankelijkheid: zichtbare focus + reduced motion. */ a:focus-visible, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ================= MOBIEL: inklapbare zijbalk (hamburger) ================= DECISIONS 2026-07-11 — kale "niet-stuk-op-mobiel"-basis. Op smal scherm wordt de vaste zijbalk een off-canvas lade die via de hamburger in de topbar open/ dicht schuift, met een backdrop. GEEN app-look (bottom-nav/PWA/kaart-first) — dat hoort bij het klantportaal en is een aparte beslissing. Additief bedoeld: dit blok onderaan tokens.css plakken. Het overschrijft de basisregels van .pulse-sidebar alleen binnen de media query (cascade), zodat het desktopgedrag ongewijzigd blijft. */ /* Topbar-linkercluster: hamburger + kruimelpad naast elkaar. */ .pulse-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } /* Hamburger: standaard verborgen (desktop); alleen zichtbaar op smal scherm. */ .pulse-hamburger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; flex: none; } .pulse-hamburger:hover { background: var(--line-soft); } .pulse-hamburger svg { display: block; } /* Backdrop: standaard weg; komt alleen op smal scherm + open in beeld. */ .pulse-backdrop { display: none; } @media (max-width: 768px) { .pulse-hamburger { display: inline-flex; } /* Zijbalk wordt een vaste off-canvas lade (uit de flow → hoofdkolom vult de volle breedte). Standaard links buiten beeld; schuift in bij .nav-open. */ .pulse-sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: min(78vw, 260px); z-index: 50; transform: translateX(-100%); transition: transform 0.2s ease; } .pulse-app.nav-open .pulse-sidebar { transform: translateX(0); } .pulse-app.nav-open .pulse-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(18, 48, 63, 0.45); } /* Iets rustiger randen op klein scherm. */ .pulse-content { padding: 16px; } .pulse-topbar { padding: 10px 14px; } } /* ================= HOST-TELEMETRIEPANEEL: drawer / sheet ================= DECISIONS 2026-07-11 — het paneel opent OVER de Hosts-lijst (geen aparte pagina). Desktop: drawer die van rechts inschuift, GEEN backdrop zodat de lijst klikbaar blijft (andere host kiezen = paneel ververst). Mobiel (≤768px): sheet die van onderen inschuift, mét backdrop (modaal). Eén component, twee schillen. Additief bedoeld: dit blok onderaan tokens.css plakken. */ .pulse-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(440px, 92vw); background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(18, 48, 63, 0.08); z-index: 60; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.2s ease; } .pulse-drawer.open { transform: translateX(0); } /* Brede variant (bv. VPN-tunneldrawer): meer ruimte zodat de verkeersgrafiek leesbaar is. Alleen op desktop; op mobiel valt de drawer via de media-query hieronder terug op 100%. */ @media (min-width: 769px) { .pulse-drawer--wide { width: min(760px, 96vw); } } .pulse-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); flex: none; } .pulse-drawer-body { padding: 16px; overflow-y: auto; flex: 1; } .pulse-drawer-close { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); width: 32px; height: 32px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; } .pulse-drawer-close:hover { background: var(--line-soft); color: var(--ink); } /* Desktop: geen backdrop (lijst blijft bruikbaar). */ .pulse-drawer-backdrop { display: none; } @media (max-width: 768px) { .pulse-drawer { width: 100%; top: auto; bottom: 0; height: 88vh; border-left: none; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(18, 48, 63, 0.12); transform: translateY(100%); } .pulse-drawer.open { transform: translateY(0); } .pulse-drawer-backdrop.open { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(18, 48, 63, 0.45); } } /* ================= PERFORMANCE-RAPPORT: A4-vlakken + print ================= DECISIONS 2026-07-24 (PULSE-rapportage v1). Het rapport toont op scherm een reeks A4-vlakken; bij printen valt de shell (zijbalk/topbar) weg en breekt elk vlak op een eigen pagina. De POC gebruikte browser-print; wij nemen die aanpak over, maar gescopet op onze eigen klassen. `.no-print` verbergt bedien-UI in de afdruk. Additief bedoeld: dit blok onderaan tokens.css. */ .pulse-report { max-width: 210mm; /* A4-breedte */ margin: 0 auto; } /* Op scherm tonen de secties zich als losse A4-vellen (210×297mm), gestapeld met ruimte ertussen — zo lijkt de preview al op de latere PDF/afdruk. */ .pulse-report .a4-page { width: 100%; min-height: 297mm; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 2px 10px rgba(18, 48, 63, 0.12); padding: 18mm 16mm; margin: 0 auto 18px; } @media print { /* Shell + bedien-UI weg. */ .pulse-sidebar, .pulse-topbar, .pulse-backdrop, .no-print { display: none !important; } /* Layout plat: hoofdkolom vult de pagina, geen kaders. */ .pulse-app, .pulse-main { display: block !important; } .pulse-content { padding: 0 !important; max-width: none !important; } body { background: #fff; } /* Elk A4-vlak een eigen pagina; op de afdruk geen kader/schaduw. */ .pulse-report { max-width: none; } .pulse-report .a4-page { width: auto; min-height: auto; border: none; border-radius: 0; box-shadow: none; margin: 0; padding: 0 0 24px; break-inside: avoid; page-break-after: always; break-after: page; } .pulse-report .a4-page:last-child { page-break-after: auto; break-after: auto; } @page { size: A4; margin: 16mm; } }