/* ============================================================================ SVS-merklaag — het HRM in de huisstijl van het werkbonnenportaal ============================================================================ ## Waarom deze laag bestaat Er draaien twee systemen naast elkaar bij hetzelfde bedrijf: het werkbonnenportaal (dagelijks, door monteurs én kantoor) en dit HRM. Ze deelden tot nu toe alleen een logo — en zelfs dat niet echt, want het HRM sneed er met een background-position een vlammetje van 28×45 pixels uit en zette daar met de hand "Personeel / SVS Warmteservice" naast. Wie 's ochtends van het ene naar het andere systeem gaat, ziet twee verschillende bedrijven. Dit bestand laadt ná `tokens.css` en zet de sémantische tokens om naar het palet van het werkbonnenportaal. Geen enkel scherm hoeft ervoor te veranderen: alles in dit systeem verwijst naar `--accent`, `--grond`, `--border` en zo verder, dus het hele HRM neemt de huisstijl in één keer over. ## Wat er precies verandert | | HRM tot nu toe | Werkbonnen (leidend) | |---|---|---| | Accent | `#2E6B18` — donker, bijna olijf | `#5FB133` — het groen uit het logo | | Donker | `#102A33` — bijna zwart, koel | `#243746` — leesbaar marineblauw | | Grond | `#F4F7F4` — groen getint | `#F4F6F9` — koel getint | | Rand | `#D8DEDA` | `#E3E8EE` | | Focus | 2px ring | 3px zachte gloed rond het veld | | Ronding | 8 / 12 / 16 | 10 / 12 / 16 | ## De knop is wit op groen — precies zoals in het werkbonnenportaal Twee groenen, twee rollen, allebei letterlijk overgenomen uit `Werkbonnen/frontend/src/index.css`: | Token hier | Werkbonnen | Rol | |---|---|---| | `--accent` | `--groen` `#5FB133` | gevuld vlak: knop, actief lampje, statusvlak | | `--accent-tekst` | `--groen-donker` `#4D9329` | groene tekst, links, actieve navigatie | ⚠ Wit op `#5FB133` haalt **2,68:1** en blijft daarmee onder WCAG AA (4,5:1). Dat is een uitdrukkelijke keuze van de opdrachtgever (5 september 2026): de twee systemen staan bij hetzelfde bedrijf open en horen niet van elkaar te verschillen. Wie dit ooit wil rechttrekken doet dat in **béide** systemen tegelijk — `--op-primair` daar en `--tekst-op-accent` hier — anders lopen ze weer uiteen. ⚠ Hier stond eerder de redenering dat `--op-primair` in het werkbonnenportaal "uit het contrast wordt berekend" en voor deze kleur dus donker zou uitvallen. Die berekening bestaat niet. Er is geen `merk.ts`; `--op-primair` staat hard op `#ffffff` en wordt in de hele repo nergens overschreven. Het portaal rendert wit op groen, en dit systeem nu ook. ========================================================================= */ :root { /* ---- Het merkpalet, letterlijk uit `frontend/src/index.css` ---------- */ --svs-primair: #5FB133; --svs-primair-donker: #4D9329; --svs-primair-tekst: #4D9329; /* = --groen-donker: groene tekst en links */ --svs-primair-zacht: #EEF6E8; /* actieve navigatie, zachte vlakken */ --svs-primair-rand: #CFE7BF; /* zacht randje rond een groen vlak */ --svs-primair-vorm: #4D9329; /* rand, focus, betekenisdragende vorm */ --svs-secundair: #243746; --svs-secundair-licht:#34506A; /* ---- Inkt ------------------------------------------------------------ Het werkbonnenportaal zet `color: var(--blauw)` op de body: alle lopende tekst is marineblauw, niet zwart. Dat is het meest herkenbare kenmerk van die interface en het scheelt hier de hardheid van #14232B. */ --svs-ink-950: #1B2B37; --svs-ink-900: #243746; --svs-ink-700: #34506A; --text-primary: #243746; /* Beide zijn `--grijs` uit het werkbonnenportaal. Het HRM zette ze eerder een stap donkerder (#55606D / #656F7C) omdat #6b7785 op de grond naar 4,21:1 zakt. Dat is teruggedraaid: gelijk aan werkbonnen weegt hier zwaarder. */ --text-secondary: #6B7785; --text-muted: #6B7785; --text-on-dark: #FFFFFF; --text-on-dark-muted: #B9C6D2; /* ---- Vlakken --------------------------------------------------------- */ --grond: #F4F6F9; --vlak: #FFFFFF; --vlak-zacht: #FAFBFD; --vlak-diep: #EEF1F5; --surface: #FFFFFF; --surface-subtle: #FAFBFD; --surface-sunken: #F1F4F8; /* ---- Randen ---------------------------------------------------------- */ --border: #E3E8EE; --border-strong: #D7DDE6; --border-interactive: #C3CCD8; /* ---- Accent ---------------------------------------------------------- */ --accent: var(--svs-primair); --accent-hover: var(--svs-primair-donker); --accent-tekst: var(--svs-primair-tekst); --accent-zacht: var(--svs-primair-zacht); --accent-rand: var(--svs-primair-rand); --accent-vorm: var(--svs-primair-vorm); /* Wit op het merkgroen, gelijk aan `--op-primair` in het werkbonnenportaal. 2,68:1 — zie de ⚠ in de kop van dit bestand. */ --tekst-op-accent: #FFFFFF; --svs-green-500: var(--svs-primair); --svs-green-600: var(--svs-primair-donker); --svs-green-700: var(--svs-primair-donker); --svs-green-800: var(--svs-primair-tekst); --svs-green-100: var(--svs-primair-zacht); --svs-green-50: #F6FBF2; /* Het werkbonnenportaal splitst zijn groen in twee rollen en dit systeem volgt dat: `--groen` vult vlakken, `--groen-donker` draagt tekst. Vandaar `color: var(--accent-tekst)` voor links, groene labels en actieve navigatie, en `var(--accent)` alleen als achtergrond. Zes plekken stonden nog op `color: var(--accent)` uit de oude tokenset (`componenten.css` 67, 1814, 1817, 1910 en `paneel.css` 762, 797) en zijn omgezet — waaronder het actieve navigatielabel op de werkbank. Houd die splitsing aan, dan blijven de twee systemen gelijk. */ /* ---- Status ---------------------------------------------------------- Rood en oranje staan op de waarden van het werkbonnenportaal: `--rood` #d64545 en `--oranje` #e08a1e, zowel als vlak als als tekst. Het HRM zette ze eerder donkerder (#B93330 / #8A5200) om de 4,5:1 te halen; dat is teruggedraaid, om dezelfde reden als bij de knop. */ --danger: #D64545; --danger-vlak: #D64545; --danger-lijn: #D64545; --danger-bg: #FDECEC; --danger-border: #F5CFCF; /* Hoverstand van de gevaarknop. Stond als rauwe #A9302A in componenten.css — het enige gat in de Tokenregel; nu een token, één stap donkerder dan --danger. */ --danger-hover: #B93330; --warning: #E08A1E; --warning-vlak: #E08A1E; --warning-bg: #FDF3E3; --warning-border: #F2DFBC; --information: #2C6B8C; --information-vlak: #34506A; --information-bg: #EAF3F8; --information-border: #C8DEEB; --success: var(--svs-primair-tekst); --success-vlak: var(--svs-primair); --success-bg: var(--svs-primair-zacht); --success-border: var(--svs-primair-rand); --neutral: #5C6874; --neutral-bg: #EEF1F5; --neutral-border: #DDE3EA; /* Statuskleuren op een donker vlak (toast, donkere balk). Deze drie stonden nog op de oude tinten uit `tokens.css` en waren de enige kleurtokens die deze merklaag niet overschreef — ze lekten dus het oude palet door. Nu afgeleid van `--groen` / `--rood` / `--oranje`, gemeten op `#243746`. */ --succes-op-donker: #A7D48F; /* 7,29:1 */ --gevaar-op-donker: #E89999; /* 5,53:1 */ --letop-op-donker: #EEBF83; /* 7,26:1 */ /* De sluier achter een dialoog. Stond op drie plekken als rauwe `rgba(16, 42, 51, …)` — het oude petrol. Het werkbonnenportaal gebruikt `rgba(36,55,70,0.45)`, dus het marineblauw; die waarde staat hier nu. */ --sluier: rgba(36, 55, 70, .45); --sluier-zacht: rgba(36, 55, 70, .38); /* De inlogkaart zweeft in het werkbonnenportaal boven een donker verloop en heeft daar een zwaardere schaduw dan de kaarten in de applicatie zelf. */ --schaduw-inlog: 0 12px 40px rgba(0, 0, 0, .25); /* ---- Vorm ------------------------------------------------------------ Werkbonnen: 10 / 12 / 16. Eén stap ronder dan het HRM had. */ --radius-1: 6px; --radius-2: 10px; --radius-3: 12px; --radius-4: 16px; /* ---- Diepte ---------------------------------------------------------- De schaduw van het werkbonnenportaal is marineblauw getint, niet grijs. Dat is subtiel en precies waarom die interface warm aanvoelt. */ --schaduw-1: 0 1px 3px rgba(36, 55, 70, .08), 0 1px 2px rgba(36, 55, 70, .06); --schaduw-2: 0 4px 14px rgba(36, 55, 70, .10), 0 2px 4px rgba(36, 55, 70, .06); --schaduw-3: 0 18px 48px rgba(36, 55, 70, .20); /* ---- Focus ----------------------------------------------------------- Geen harde ring maar een zachte gloed van 3px in de merkkleur — het kenmerk van elk invoerveld in het werkbonnenportaal. */ --focusring: 3px; /* Exact `--focus-ring` uit het werkbonnenportaal: de merkkleur op 18%. De rand die de gloed omsluit draagt het contrast en staat op --accent-vorm. */ --focus-gloed: 0 0 0 3px rgba(95, 177, 51, .18); } /* --- Het merkteken ----------------------------------------------------------- Het logo stond hier als uitsnede: `background-size: 316.3%` op een vak van 28×45px, wat betekent dat je alleen de vlam zag en het woordmerk buiten beeld viel. Daarnaast stond met de hand getypte tekst. Het werkbonnenportaal toont gewoon het hele logo op 128px breed, en dat is ook wat er op de bus staat. */ .zij-merk { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 var(--ruimte-1) var(--ruimte-4); } .zij-merk .merk { /* 128px — de breedte van `.sb-logo img` in het werkbonnenportaal. */ width: 128px; height: 42px; background: url("/static/svs-logo.png") no-repeat center / contain; } .zij-merk .tekst { display: none; } /* Ingeklapte zijbalk: alleen de vlam, en dan wél scherp uitgesneden. */ .schil.smal .zij-merk { align-items: center; padding-inline: 0; } .schil.smal .zij-merk .merk { width: 30px; height: 44px; background-size: 322% auto; background-position: left center; } /* --- Zijbalk, chips en knoppen in de werkbon-vorm --------------------------- */ /* De actieve navigatie is een zacht groen vlak met donkergroene tekst — niet een gevuld accentvlak. Zo blijft de merkkleur beschikbaar voor de handeling. */ .nav a[aria-current="page"], .navgroep a[aria-current="page"] { background: var(--accent-zacht); color: var(--accent-tekst); } /* De primaire knop is het merkgroen, met het donkere groen als hoverstand. */ .knop { --knop-vlak: var(--accent); --knop-tekst: var(--tekst-op-accent); } .knop:hover { --knop-vlak: var(--accent-hover); } .knop.groen { --knop-vlak: var(--accent); } .knop.groen:hover { --knop-vlak: var(--accent-hover); } .knop.gevaar { --knop-vlak: var(--danger-vlak); } .knop.gevaar:hover { --knop-vlak: var(--danger); } /* Een gekozen filter is marineblauw gevuld — het tweede merkkenmerk van het werkbonnenportaal, en het houdt groen vrij voor "dit doet iets". */ .segment button[aria-pressed="true"] { background: var(--svs-secundair); color: #fff; border-color: var(--svs-secundair); } /* Invoervelden: de zachte gloed in plaats van een harde ring. */ .veld input:not([type="radio"]):not([type="checkbox"]):focus-visible, .veld select:focus-visible, .veld textarea:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent-vorm); box-shadow: var(--focus-gloed); } /* Links en groene tekst nemen het leesbare groen, nooit de merkkleur zelf. */ a { color: var(--accent-tekst); } .lamp.aan { color: var(--accent-tekst); } /* --- Het inlogscherm -------------------------------------------------------- Dit is het eerste wat iemand van het systeem ziet, en het was hier een witte kaart op een grijs vlak terwijl het werkbonnenportaal opent met een marineblauw verloop en het volledige logo op 200px. Wie de twee systemen naast elkaar opent zag daar meteen twee bedrijven. Overgenomen uit `.login-scherm` / `.login-kaart` / `.login-logo`. */ .inlog { background: linear-gradient(160deg, var(--svs-secundair), var(--svs-secundair-licht)); padding: var(--ruimte-4); } .inlog-kaart { inline-size: min(100%, 380px); border: 0; border-radius: var(--radius-4); box-shadow: var(--schaduw-inlog); padding: var(--ruimte-6) var(--ruimte-5); text-align: center; } /* Het hele logo, niet de uitsnede van de vlam — net als op het inlogscherm daar. */ .inlog-merk { margin-bottom: var(--ruimte-3); } .inlog-merk img, .inlog-merk svg { inline-size: 200px; max-inline-size: 70%; block-size: auto; } /* Daar draagt de ondertitel het grijs en staat er geen scheidingslijn onder. */ .inlog-titel { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--ruimte-5); } .inlog-onder { color: var(--text-muted); } /* De velden staan links uitgelijnd in een verder gecentreerde kaart. */ .inlog-kaart .veld, .inlog-kaart label { text-align: left; } /* --- De kopbalk ------------------------------------------------------------ Het werkbonnenportaal heeft bovenaan een balk over de volle breedte van het werkvlak: zoeken links, de gebruiker rechts. Het HRM had die twee allebei in de zijbalk staan, waardoor de zijbalk een gereedschapskist werd en het zoeken naast de navigatie stond alsof het een menu-item was. Nu staan ze waar ze in het andere systeem ook staan. De zijbalk houdt alleen het merk en de navigatie over. */ .hoofd { display: flex; flex-direction: column; min-inline-size: 0; min-block-size: 100dvh; } .topbalk { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-3) var(--ruimte-6); background: var(--vlak); border-bottom: 1px solid var(--border); } /* Zoeken is hier geen knop die eruitziet als een knop maar een veld dat eruitziet als een veld — het opent het opdrachtpalet, maar dat hoef je niet te weten om te snappen dat je er kunt zoeken. */ .zoekbalk { flex: 1; min-inline-size: 0; display: flex; align-items: center; gap: var(--ruimte-2); min-block-size: var(--raakvlak); padding: 0 var(--ruimte-3); background: var(--vlak); border: 1px solid var(--border); border-radius: var(--radius-2); cursor: text; color: var(--text-muted); font-size: var(--tekst-l); text-align: left; transition: border-color var(--duur-snel), box-shadow var(--duur-snel); } .zoekbalk:hover { border-color: var(--border-interactive); } .zoekbalk:focus-visible { outline: none; border-color: var(--accent-vorm); box-shadow: var(--focus-gloed); } .zoekbalk svg { width: 17px; height: 17px; flex: none; } .zoekbalk .zoektekst { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zoekbalk kbd { flex: none; font-family: var(--letter); font-size: var(--tekst-xs); font-weight: 600; padding: 2px 7px; border-radius: var(--radius-1); background: var(--vlak-diep); border: 1px solid var(--border); color: var(--text-muted); } .gebruiker { flex: none; display: flex; align-items: center; gap: var(--ruimte-2); min-block-size: var(--raakvlak); padding: 4px var(--ruimte-2) 4px 4px; background: none; border: 1px solid transparent; border-radius: var(--radius-2); cursor: pointer; color: var(--text-primary); transition: background var(--duur-snel), border-color var(--duur-snel); } .gebruiker:hover { background: var(--vlak-diep); } .gebruiker[aria-expanded="true"] { background: var(--vlak-diep); border-color: var(--border); } .gebruiker:focus-visible { outline: none; border-color: var(--accent-vorm); box-shadow: var(--focus-gloed); } .gebruiker-tekst { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; } .gebruiker-tekst .naam { font-size: var(--tekst-l); font-weight: 620; } .gebruiker-tekst .label { font-size: var(--tekst-xs); color: var(--text-muted); } /* Het werkblad zit nu onder de kopbalk in plaats van naast de zijbalk, dus de bovenlucht komt van de balk en niet meer van het blad zelf. */ .hoofd .werkblad { flex: 1; padding-top: var(--ruimte-5); } @media (max-width: 1023px) { .topbalk { padding: var(--ruimte-2) var(--ruimte-4); } .gebruiker-tekst { display: none; } .zoekbalk kbd { display: none; } /* Zonder zijbalk valt er niets in te klappen. */ .topbalk .klapper { display: none; } /* De onderbalk staat vast onderaan; het werkblad houdt zijn eigen ondermarge. */ .hoofd .werkblad { padding-top: var(--ruimte-4); } } /* De ingeklapte zijbalk heeft geen tekst meer om te verbergen; alleen het merk en de iconen blijven over. */ .schil.smal .zij-merk { align-items: center; } /* --- Keuzelijsten ---------------------------------------------------------- Een `