/* ===================================================================== VindUw* — Design System Tokens (single source of truth) Bron: VindUwAI/website/css/styles.css ("Stille Showroom"), uitgebreid met neutrale schaal, state-kleuren, light-mode en een tekst-veilig brand-token. Gebruik ALTIJD deze variabelen i.p.v. rauwe hex in componenten. Merk-accent wisselt via [data-brand]; thema via [data-theme]. ===================================================================== */ /* Eén variabel font voor alles: koppen én lopende tekst. font-display: swap voorkomt onzichtbare tekst tijdens het laden. ⚠️ `size-adjust: 100%` hieronder doet niets — het is de standaardwaarde. Het stond hier met een toelichting die beloofde dat het de regelval gelijkhield aan de systeemletter; dat deed het niet. De regelval wordt echt gelijkgehouden door de terugvalletter 'Schibsted Fallback' hieronder, met uitgerekende size-adjust en ascent/descent-override. De 100% blijft staan als expliciete nulwaarde zodat niemand hem per ongeluk als correctie leest. Pad aanpassen naar waar het bestand op de site staat. ⚠️ Het bereik hieronder is uit het bestand zelf gelezen (fvar-tabel), niet overgenomen uit documentatie: één as, wght 400-900. Zet je hier 100-900, dan denkt de browser dat er lichte gewichten bestaan en verzint hij ze. */ @font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/SchibstedGrotesk-VF.ttf') format('truetype-variations'); font-weight: 400 900; font-style: normal; font-display: swap; size-adjust: 100%; } /* TERUGVALLETTER MET DEZELFDE MATEN — toegevoegd 12-09-2026. font-display: swap laat de systeemletter eerst zien en wisselt daarna om. Dat is goed voor de eerste indruk, maar alleen als beide letters even breed en even hoog zetten. Gemeten in de browser op de echte pagina: Schibsted Grotesk ascent 0,98em descent 0,26em Segoe UI / system ascent 1,08em descent 0,25em ⚠️ De breedte is NIET met een proefregel bepaald, en dat is het hele punt. Een canvas-meting van losse tekst zei dat Schibsted 3,17% breder zet dan de systeemletter. In de echte pagina klopt dat niet: daar staat negatieve letterafstand op alle koppen, kerning en ligaturen staan aan, en het netto effect is precies omgekeerd. Gemeten op de pagina zelf, in regels tekst: huisletter 471 regels 10 021px paginahoogte systeemletter, onbewerkt 479 regels 10 164px (+143px sprong) systeemletter op 103,17% 486 regels 10 250px (+229px, erger) systeemletter op 93% 472 regels 10 026px (+5px) 93% is dus geen theoretische waarde maar de uitkomst van een zoektocht langs 92 t/m 103. Bijkomend voordeel: Segoe UI heeft een grotere x-hoogte dan Schibsted, dus op 93% lijken ze ook optisch meer op elkaar. ⚠️ Verander je de tekst op de pagina flink, meet dan opnieuw — dit getal hoort bij déze verhouding tussen koppen en lopende tekst. size-adjust 93% (gemeten, zie hierboven) ascent-override 105,38% = 0,98 / 0,93 (percentage ná de size-adjust) descent-override 27,96% = 0,26 / 0,93 Hij staat in de stapel vóór system-ui, dus de gewone systeemletter blijft de laatste terugval als er geen Segoe/Helvetica/Arial is. */ @font-face { font-family: 'Schibsted Fallback'; src: local('Segoe UI'), local('Helvetica Neue'), local('Arial'); font-weight: 400 900; font-style: normal; size-adjust: 93%; ascent-override: 105.38%; descent-override: 27.96%; line-gap-override: 0%; } :root { /* ---------- MERK (default = VindUwAutoKoper) ---------- */ /* CONTRAST — nagerekend op 25-08-2026 (WCAG 2.x relatieve luminantie). Het merkgroen haalt 4,24:1 op wit. Dat is te laag voor tekst (4,5:1) EN te laag voor een wit label óp dat groen — precies dezelfde 4,24:1, want contrast is symmetrisch. Die tweede kant stond nergens beschreven, waardoor elke groene knop met wit label door de norm zakte. Gebruik daarom nooit --brand achter witte tekst; kies --brand-btn. Vuistregel: --brand is een VLAK, geen tekstkleur en geen knopvulling. */ --brand: #008c67; /* 4,24:1 op wit — vlakken, randen, iconen, grote tekst (≥24px of ≥18,7px vet). NOOIT kleine tekst, NOOIT achter wit label */ --brand-strong: #00a87a; /* hover/levendiger — nog lichter, dus ook geen tekstkleur. ⛔ nooit als knop-hover onder een wit label: wit erop = 3,05:1 */ --brand-btn: #00785a; /* 5,48:1 — vulling van knoppen met WIT label. Dichtst bij het merkgroen dat AA haalt */ --brand-text: #00684a; /* 6,82:1 op wit — groene TEKST op licht, ÉN de hover-vulling van een knop met wit label (zie blok hieronder). Op --n-900 slechts 2,51:1, gebruik daar --mint */ /* HOVER VAN EEN KNOP MET WIT LABEL — rechtgezet 12-09-2026. tokens.md adviseerde "rust --brand-btn, hover --brand". Die hover is 4,24:1 onder een wit label; de eis is 4,5. De knop haalde de norm in rust en verloor hem precies op het moment dat je hem aanwijst. --brand-strong is nog erger (3,05). Van de drie groenen houdt alleen --brand-text het label boven de lat: rust --brand-btn #00785a wit erop 5,48 (Snapframe #3f63e0 = 5,16) hover --brand-text #00684a wit erop 6,82 (Snapframe #2f4fd4 = 6,58) De hover is dus DONKERDER, niet lichter. Gecontroleerd of dat visueel klopt: luminantie 0,1417 -> 0,1040. Op licht is dat de gewone indruk-beweging en het label wordt leesbaarder (5,48 -> 6,82). Op donker zakt het knopvlak tegenover de pagina van 3,12 naar 2,51 — nog altijd duidelijk een eigen vlak, maar "dieper" leest daar makkelijk als "uit". Laat op donker daarom --glow-btn aanzwellen (en/of de bestaande lift) zodat de hover aangroeit in plaats van dooft. Een vierde, iets lichter groen zou hier óók werken (ruimte tot L=0,1833), maar dat kruist de harde regel "drie tinten groen" — niet gedaan, keuze van Leroy. */ --mint: #98e8cf; /* highlight op donker — 12,03:1 op #0d1f1a */ --mint-12: rgba(152, 232, 207, .12); --mint-24: rgba(152, 232, 207, .24); /* FOCUSRING — hersteld 12-09-2026. Stond hier als losse hex #98e8cf en werd door [data-theme="light"] nergens overschreven. Op elk licht scherm (portaal, dashboard, factuur, e-mailsjabloon) was de focusring dus mint op wit = 1,42:1, terwijl WCAG 1.4.11 minimaal 3,0 vraagt voor een focus-indicator (2.4.13 legt dezelfde lat op de ring zelf). Op donker klopte hij wél: 12,03 op --bg. Diezelfde losse hex maakte de ring ook merk-blind: Snapframe kreeg VUAK-mint, terwijl dat merk juist géén VUAK-groen voert. var(--mint) lost beide op. Gemeten donker — VUAK/VindUwAI 12,03 op --bg · 10,93 elev-1 · 9,57 elev-2 · 12,81 footer · 7,24 op --bg-aurora-limit. Snapframe 8,13 / 7,38 / 6,46 / 8,65 / 4,89. De lichte waarde staat in het [data-theme="light"]-blok. */ --focus: var(--mint); /* ---------- NEUTRALE SCHAAL (groen-getint) ---------- */ /* Voor lichte UI: dashboards, facturen, e-mail, tabellen. */ --n-0: #ffffff; --n-50: #f4faf7; --n-100: #e7f1ec; --n-200: #cfe0d8; --n-300: #aec5bb; --n-400: #84a294; --n-500: #5d7d6f; --n-600: #436053; --n-700: #2c4639; --n-800: #16332c; --n-900: #0d1f1a; /* ---------- STATE-KLEUREN (groene familie) ---------- */ --success: #00a87a; --success-soft: rgba(0, 168, 122, .14); --warning: #e0a82e; --warning-soft: rgba(224, 168, 46, .14); --danger: #e5484d; --danger-soft: rgba(229, 72, 77, .14); /* 3,91:1 op wit — VLAK/rand/icoon (UI-norm 3,0). NOOIT tekst, NOOIT achter wit label: daarvoor --danger-text (per thema, hieronder) */ --info: #4aa3c4; --info-soft: rgba(74, 163, 196, .14); /* ---------- THEMA: DONKER (default — "Stille Showroom") ---------- */ --bg: #0d1f1a; --bg-elev-1: #112823; --bg-elev-2: #16332c; --bg-footer: #0a1814; --text: #f4faf7; --text-secondary: rgba(244, 250, 247, .74); --text-tertiary: rgba(244, 250, 247, .52); --hairline: rgba(244, 250, 247, .08); /* kaartranden/scheidslijnen — decoratief, hoeft geen 3:1 */ --border-input: var(--n-400); /* rand van invoervelden/chips/knoppen-zonder-vulling (WCAG 1.4.11 ≥3:1): 6,17 op --bg · 5,61 op --bg-elev-1 · 4,91 op --bg-elev-2. --n-500 zakt op elev-2 nét onder de lat (2,998) */ --danger-text: #ff9b9b; /* foutTEKST op donker: 8,48 op --bg · 7,70 op elev-1 · 6,74 op elev-2. --danger zelf haalt hier 4,37 op --bg maar 3,48 op elev-2 */ --aurora-a: rgba(0, 140, 103, .22); /* .14 -> .13 op 12-09-2026. Niet om de look te veranderen maar om het plafond hieronder haalbaar te maken: de drie lagen op piek-ademopacity kwamen samen uit op L=0,0523 tegen een plafond van L=0,0521 — 0,4% eroverheen, dus permanent rood en dus een regel die niemand groen krijgt. Met .13 is het L=0,0509: 2,3% marge. Het verschil is één stap in één kanaal (#14493b -> #13483b), onzichtbaar. */ --aurora-b: rgba(152, 232, 207, .13); /* PLAFOND VOOR DECORATIEVE VERLOPEN — nieuw 12-09-2026. Alle tokens hierboven zijn nagerekend tegen een VLAKKE --bg / --bg-elev-*. Ligt er een verloop overheen, dan sta je op een achtergrond die nergens is nagemeten — en dat verloop had geen bovengrens. Gemeten op een echte pagina: op het lichtste punt (#235e4e) zakt de veldrand --border-input naar 2,72 (norm 3,0) en --text-tertiary zelfs naar 3,19 (norm 4,5). Stil, want de controle keek alleen naar vlakke achtergronden. Daarom één harde grens in plaats van een uitzonderingstoken: een decoratief verloop mag NERGENS lichter uitkomen dan deze waarde. Blijf je eronder, dan blijft élk token geldig zonder dat je per component hoeft na te denken. Waarom --n-700 (#2c4639) en geen nieuwe kleur: het is de lichtste stap uit de bestaande schaal waar de 3,0-lat nog staat. Gemeten op dit plafond — --border-input (--n-400) 3,71 · --text 9,73 · --text-secondary 6,17 · --focus/--mint 7,24 (Snapframe 4,89) · --danger-text 5,10 · --brand-strong 3,37. ⚠️ Twee dingen halen het hier NIET, en dat is bewust een regel, geen token: --text-tertiary 3,94 -> tertiaire tekst hoort op een ondoorzichtig vlak --brand 2,42 -> rand-hover op een verloop gaat naar --brand-strong ⚠️ Budget: de drie aurora-lagen op piek-ademopacity (.68/.62/.58) komen samen al uit op #14493b (L=0,0523) tegen een plafond van L=0,0521. Er is dus GEEN ruimte voor een vierde laag, een extra sectie-verloop of een lichtere grain erbovenop — precies wat er gebeurd was toen #235e4e gemeten werd (70% over). Wil je het toch lichter? Verlaag dan eerst --aurora-a/-b (a .20 / b .12 past nog) of de laag-opacity; niet stapelen. Zie tokens.md, kopje "Verlopen". */ --bg-aurora-limit: var(--n-700); /* ---------- TYPOGRAFIE ---------- */ /* TYPOGRAFIE — displayfont gewijzigd 27-08-2026 (keuze Leroy). Was Archivo op breedte 125 (Expanded); die uitgerekte koppen bevielen niet. Dáárvoor stond hier Space Grotesk, die samen met Inter, Geist en Satoshi de herkenbare AI-standaardletter is geworden — precies wat de anti-slop- regel wil vermijden. Schibsted Grotesk is een Noorse krantgrotesk: rustig en zakelijk, met genoeg eigen vorm om niet als standaardletter te lezen. OFL-1.1, self-hosted in design-system/fonts/SchibstedGrotesk-VF.ttf. 🔑 GEEN BREEDTE-AS MEER. De tokens --wdth-display/--wdth-body zijn weg en `font-variation-settings` hoort nergens meer te staan: het karakter zit in de letter zelf, niet in een instelling die je kunt vergeten mee te nemen. Een display-regel is nu simpelweg: font-family: var(--font-display); font-weight: 700; */ --font-sans: 'Schibsted Grotesk', 'Schibsted Fallback', system-ui, 'Segoe UI', sans-serif; --font-display: 'Schibsted Grotesk', 'Schibsted Fallback', system-ui, 'Segoe UI', sans-serif; /* ---------- TYPE-SCHAAL — herzien 12-09-2026 ---------- Was: acht losse clamp()-waarden zonder onderlinge verhouding, met een hero die op een groot scherm 7,5rem werd (120px). Dat is een schaal die per regel is verzonnen; je ziet het terug doordat twee stappen bijna even groot zijn en de sprong daarna ineens verdubbelt. Nu één vloeiende schaal met een vaste verhouding, uitgerekend tussen 390px en 1440px (viewport-onder- en bovengrens van dit merk): small 14,5→15,5 · body 17→19 · lead 18,5→21,5 · h3 19→22 · statement 22→29 · h2 29→44 · hero 36→68 · stapnummer 34→52 Verhouding onderaan ≈1,20 en bovenaan ≈1,25: op een klein scherm staan de stappen dichter bij elkaar (anders breekt de kop), op een groot scherm verder. ⚠️ Elke waarde houdt een rem-component. Daardoor blijft 200%-browserzoom werken; een pure vw-schaal bevriest op zoom en dat is een WCAG-fout (1.4.4). */ --fs-eyebrow: clamp(0.7812rem, 0.7696rem + 0.048vw, 0.8125rem); --fs-small: clamp(0.9062rem, 0.8830rem + 0.095vw, 0.9688rem); --fs-body: clamp(1.0620rem, 1.0161rem + 0.190vw, 1.1880rem); --fs-lead: clamp(1.1560rem, 1.0866rem + 0.286vw, 1.3440rem); --fs-h3: clamp(1.1880rem, 1.1179rem + 0.286vw, 1.3750rem); --fs-statement: clamp(1.3750rem, 1.2125rem + 0.667vw, 1.8120rem); --fs-h2: clamp(1.8120rem, 1.4643rem + 1.429vw, 2.7500rem); --fs-hero: clamp(2.2500rem, 1.6000rem + 2.667vw, 4.0000rem); /* 36 → 64px */ --fs-stepnum: clamp(2.1250rem, 1.7071rem + 1.714vw, 3.2500rem); /* OPTISCHE LETTERAFSTAND — tracking hoort mee te bewegen met de graad. Een grotere letter heeft relatief te veel lucht tussen de tekens, een kleinere te weinig. Vandaar: hoe groter, hoe strakker; kleine tekst juist iets ruimer. Deze getallen zijn per stap nagekeken op het scherm, niet afgeleid uit een formule. */ --track-hero: -0.028em; --track-h2: -0.021em; --track-h3: -0.013em; --track-body: 0em; --track-small: 0.004em; /* kleine tekst wint bij iets meer lucht */ --track-eyebrow: 0.115em; /* kapitalen hebben altijd extra lucht nodig */ /* Regelhoogte volgt dezelfde logica: een kop staat strakker dan lopende tekst. */ --lh-hero: 1.02; --lh-h2: 1.08; --lh-h3: 1.24; --lh-body: 1.6; --lh-lead: 1.5; /* ---------- SPACING (8px-ritme, 4px half-step) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-40: 160px; --section-pad: clamp(96px, 12vh, 160px); --container: 1200px; --container-narrow: 760px; --gutter: clamp(20px, 5vw, 48px); /* ---------- RADII ---------- */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 999px; /* ---------- SCHADUW (zacht, groen-getint) ---------- */ --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 40px rgba(0,0,0,.35); --shadow-card-hover: 0 1px 0 rgba(152,232,207,.06) inset, 0 20px 60px rgba(0,0,0,.45); --glow-btn: 0 8px 30px rgba(0, 140, 103, .35); /* ---------- HOOGTETRAP — toegevoegd 12-09-2026 ---------- Eén schaduw met één grote vervaging leest als een sticker op een vel papier: hij mist de korte, harde contactschaduw die een echt voorwerp direct onder zijn rand werpt. Vandaar drie lagen per stap — contact, vorm, omgeving — die samen één zachte schaduw vormen zonder dat er één laag opvalt. Ze zijn getint in de merk-donkerkleur (13,31,26) en niet in zwart; zwart op een groen-getinte pagina wordt grijs en dat is precies hoe goedkoop eruitziet. --edge legt daar de rand overheen: op donker een lichtrandje bovenaan (licht valt van boven), op licht een donker randje onderaan (het vlak drukt in de pagina). Dat is de reden dat je op een donkere pagina géén slagschaduw nodig hebt om diepte te maken en op een lichte wél. Gebruik: rustende kaart --elev-1 · aangewezen/zwevend --elev-2 · los boven de pagina (formulier, popover) --elev-3. */ --elev-1: 0 1px 2px rgba(0,0,0,.26), 0 2px 6px rgba(0,0,0,.20); --elev-2: 0 1px 2px rgba(0,0,0,.30), 0 6px 14px rgba(0,0,0,.24), 0 18px 44px rgba(0,0,0,.28); --elev-3: 0 1px 2px rgba(0,0,0,.32), 0 10px 24px rgba(0,0,0,.28), 0 32px 72px rgba(0,0,0,.38); --edge: inset 0 1px 0 rgba(244,250,247,.07); /* ---------- EASINGS ---------- */ --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-showroom: cubic-bezier(.22, 1, .36, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); } /* ---------- THEMA: LICHT (zelfde semantische namen) ---------- */ [data-theme="light"] { --bg: var(--n-0); --bg-elev-1: var(--n-50); --bg-elev-2: var(--n-100); --bg-footer: var(--n-100); --text: var(--n-900); --text-secondary: var(--n-700); --text-tertiary: var(--n-600); /* was --n-500: 4,54 op wit maar 4,29 op --n-50 (kaartvlak). --n-600 = 6,92 / 6,54 / 5,99 op n-0 / n-50 / n-100; blijft een schaalstap lichter dan --text-secondary (--n-700) */ --hairline: rgba(13, 31, 26, .10); --border-input: var(--n-500); /* inputrand ≥3:1 (WCAG 1.4.11): 4,54 op wit · 4,29 op --n-50 · 3,93 op --n-100. --hairline haalt hier maar 1,29 — nooit als veldrand */ --danger-text: #b91c1c; /* foutTEKST op licht: 6,47 op wit · 6,12 op --n-50 · 5,60 op --n-100. Zelfde familie als --danger (oklch-hue 27° vs 23°). Symmetrisch: mag óók als knopvulling onder wit label */ --focus: var(--brand-text); /* toegevoegd 12-09-2026 — dit ontbrak. De donkere ring (mint) haalde op wit maar 1,42:1; norm voor een focus-indicator is 3,0 (WCAG 1.4.11 / 2.4.13). Nu 6,82 op --n-0 · 6,45 op --n-50 · 5,91 op --n-100 · 4,97 op --n-200. Volgt het merk mee: Snapframe 6,58 / 6,23 / 5,70 / 4,80 */ --bg-aurora-limit: var(--n-200); /* zelfde regel als op donker, maar gespiegeld: op licht mag een decoratief verloop nergens DONKERDER uitkomen dan #cfe0d8. Daar staat --border-input (--n-500) op 3,31 · --brand-text 4,97 · --text-tertiary (--n-600) 5,04 · --text 12,46 · Snapframe --brand-text/--focus 4,80. Het huidige verloop over wit komt uit op #c0e6dc (n-500 = 3,37) — het past, maar zonder marge om nog een laag te stapelen */ /* Op licht: gebruik --brand-text voor tekst-op-wit, --brand voor vlakken. */ --mint-12: rgba(0, 140, 103, .08); --mint-24: rgba(0, 140, 103, .16); --shadow-card: 0 1px 2px rgba(13,31,26,.06), 0 8px 24px rgba(13,31,26,.08); --shadow-card-hover: 0 2px 4px rgba(13,31,26,.08), 0 16px 40px rgba(13,31,26,.12); /* Hoogtetrap op licht: dezelfde drie lagen, maar veel zwakker. Op een wit vlak is 8% al duidelijk zichtbaar, op een donker vlak zie je 28% nauwelijks. */ --elev-1: 0 1px 1px rgba(13,31,26,.04), 0 2px 4px rgba(13,31,26,.04); --elev-2: 0 1px 1px rgba(13,31,26,.04), 0 4px 8px rgba(13,31,26,.05), 0 12px 24px rgba(13,31,26,.06); --elev-3: 0 1px 2px rgba(13,31,26,.05), 0 8px 16px rgba(13,31,26,.06), 0 24px 48px rgba(13,31,26,.08); --edge: inset 0 -1px 0 rgba(13,31,26,.05); } /* ---------- MERK-ACCENT per merk (accent wisselt, structuur blijft) ---------- */ /* Snapframe — eigen cyan→indigo, GEEN VUAK-groen. */ [data-brand="snapframe"] { --brand: #4f7cff; /* wit erop = 3,71:1 — vlak/accent, NOOIT achter een wit label */ --brand-strong: #6a90ff; --brand-btn: #3f63e0; /* 5,16:1 — knopvulling met wit label */ --brand-text: #2f4fd4; /* 6,58:1 op wit — óók de hover-vulling van een knop met wit label (--brand geeft daar 3,71) */ --mint: #8fb2ff; /* --focus volgt hier vanzelf mee: donker 8,13 op --bg, licht 6,58 via --brand-text. Vóór 12-09-2026 kreeg Snapframe VUAK-mint als focusring */ } /* VindUwAI — bosgroen "Stille Showroom" (= de default-set, expliciet benoembaar). */ [data-brand="vinduwai"] { --brand: #008c67; --brand-strong: #00a87a; --brand-btn: #00785a; /* 5,48:1 — knopvulling met wit label */ --brand-text: #00684a; --mint: #98e8cf; }