/* Sennasearch V2 — design tokens Bron: Kleurensysteem.dc.html + Vormsysteem.dc.html (Claude Design, 2026-07) + blauw als 4e oppervlak (Timo-besluit 2026-07-10). Gebruik in componenten ALTIJD de semantische laag, nooit losse hexes. */ /* METRIEK-GELIJKE TERUGVALFONTS (Timo, 23 augustus 2026) --------------------------------------------------------------------------- WAAROM. SEO-audit 23 augustus 2026, findings/prestaties.md: "CLS FAALT OP MOBIEL OP MINSTENS VIER PAGINATYPEN, EN DE FONTSWAP IS DE OORZAAK", plus de bevinding "CLS 0,068 op /rpo-calculator desktop door de fontswap van Anton". WAT ER GEBEURT. font-display: swap laat de bezoeker eerst de terugval zien en daarna het echte font, en die twee wikkelen niet in evenveel regels. Gemeten op 412x823 met de woff2 1500 ms vertraagd: de tekst in de cookiebanner staat eerst op 7 regels (hoogte 156,73) en gaat op t=1869 ms naar 6 (134,34). Die banner staat fixed op bottom:0 en groeit dus naar BOVEN: previousRect y=332,0 hoogte 490,98 -> currentRect y=354,0 hoogte 468,98. Eén regel, en omdat de banner ~30% van het scherm beslaat kost dat CLS 0,16. WAT DIT DOET. Twee terugvalfamilies op een font dat al op het apparaat staat, met ascent-override, descent-override en size-adjust zodat regeldoos en wikkeling gelijk blijven. Laadt niets: local() only. Heeft het apparaat geen Arial (Android vaak niet), dan is de @font-face zonder bron, slaat de browser hem over en valt de stack door naar system-ui, precies als vandaag. Kan dus niet slechter uitpakken dan de huidige situatie. DE WAARDEN ZIJN GEIJKT, NIET ALLEEN UITGEREKEND. De breedteverhouding op canvas (100px, drie proefteksten) loopt per tekst uiteen: Public Sans 400 / Arial 400 = 1,0348 tot 1,0462; Anton / Arial Narrow = 1,0546 tot 1,1046; ascent/descent op een em van 100: Public Sans 95/23, Arial 91/21, Anton 118/33, Arial Narrow 94/21. Daarom geijkt op de som van de CLS over negen pagina's, mobiel, fonts 1500 ms vertraagd: body-size-adjust, som CLS over 9 NL-pagina's, mobiel huidige stack (system-ui) 1,4833 103,48% (de rekensom) 1,0540 101,50% 0,1511 100,00% 0,1511 101,00% 0,0637 <- gekozen Anton-size-adjust, op de pagina's waar hij het verschil maakt /cases mob /over-ons mob /en/rpo-cost-calculator desktop 100,00% 0,1112 0,0008 0,0025 102,50% 0,0908 0,0108 0,0002 105,41% 0,0902 0,0122 0,4588 110,46% - 0,0422 - LET OP, DEZE TABEL IS NIET MEER LEIDEND. Er ontbreekt de kolom die de keuze uiteindelijk beslist: de Engelse calculator op MOBIEL. 102,50% zet die pagina op 0,1354 en dus BOVEN de grens. De Anton-waarde is daarom op 23 augustus 2026 in de controleronde verzet naar 101,00%; de volledige meetreeks staat bij het Anton-blok verderop in dit bestand. De kolom "/cases mob" hierboven suggereert bovendien meer nauwkeurigheid dan er is: die pagina blijkt bistabiel tussen 0,0908 en 0,1112 bij elke geprobeerde waarde, zie dezelfde plek. De rekensom uit de breedteverhouding is voor allebei de verkeerde waarde. Bij de body wikkelt de bannertekst op 103,48% juist WEL een regel extra (nagemeten met Range.getClientRects). Bij Anton is 105,41% op de Nederlandse pagina's het beste maar sloopt het de ENGELSE calculator: de H1 van .calc-hero wikkelt daar een regel extra in de terugval, en zodra Anton binnenkomt schuift alles eronder 80,78px omhoog, CLS 0,4588. LES VOOR WIE HIER LATER AAN ZIT: meet altijd BEIDE talen en ook desktop. De Engelse koppen zijn langer en zitten op een andere afbreekgrens. EINDSTAND, opnieuw gemeten in de controleronde van 23 augustus 2026 met de uiteindelijke waarden (body 101,00%, Anton 101,00%), zelfde harnas, verse context per pagina: NL mobiel, 9 pagina's som 1,5050 -> 0,1395 (7 pagina's boven 0,100 -> 1, en die ene is /cases op 0,1112, dat is de bistabiele ch-pagina hieronder) EN mobiel, 9 pagina's som 0,2277 -> 0,0833 (0 boven -> 0 boven) desktop 1350x940, 4 pagina's som 0,1158 -> 0,0562 (0 boven -> 0 boven) /rpo-calculator desktop 0,0246 -> 0,0006 /en/rpo-cost-calculator dsk 0,0310 -> 0,0003 De basiswaarden hierboven zijn zelf ook opnieuw gemeten en niet overgenomen; ze wijken iets af van de 1,4833 uit de eerste ronde omdat de shells intussen een andere fontaanvraag dragen. Het beeld is hetzelfde. DIT IS DE GORDEL, NIET DE ECHTE FIX. De echte fix is Anton en Public Sans zelf hosten en preloaden; dat raakt de 37 shells in _qa/ en valt buiten deze ronde. Blijft daarna staan zonder iets te doen, want dan is er geen swap. */ @font-face { font-family: 'Public Sans terugval'; src: local('Arial'), local('Liberation Sans'), local('Helvetica'); font-weight: 1 500; font-style: normal; size-adjust: 101.00%; ascent-override: 94.1%; descent-override: 22.8%; line-gap-override: 0%; } /* Aparte vette snit, want anders synthetiseert de browser vet uit Arial regular en dat is een andere breedte dan Arial Bold. De metingen zetten Public Sans 600, 700 en 800 alle drie binnen 1,5 procent van Arial Bold, dus deze face draagt dezelfde 101,00% als de regular; hij bestaat om het SYNTHETISCH vet te vermijden, niet om een andere schaal te zetten. */ @font-face { font-family: 'Public Sans terugval'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 501 1000; font-style: normal; size-adjust: 101.00%; ascent-override: 94.1%; descent-override: 22.8%; line-gap-override: 0%; } /* Anton is een enkel gewicht (400) en staat veel hoger in de em dan Arial Narrow: ascent 118 tegen 94 op een em van 100. Zonder ascent-override krijgt een H1 in de terugval een lagere regel en verspringt hij bij de swap alsnog. Dat is precies wat PSI mat op /rpo-calculator desktop: CLS 0,068 op één element, 'main > section.calc-hero > div.container > h1'. ascent-override en descent-override zijn hier door size-adjust gedeeld, want size-adjust schaalt de em-doos mee. Bij de twee bodyfaces hierboven op dezelfde manier: 95/1,01 = 94,1 en 23/1,01 = 22,8. BIJGESTELD 23 augustus 2026 (Timo, controleronde), van 102,50% naar 101,00%. WAAROM. De eerste ijking is op de negen Nederlandse pagina's gedaan en daarna op de Engelse tak alleen op DESKTOP nagekeken. Op de Engelse calculator MOBIEL breekt 102,50% de pagina: de lead onder de H1 van .calc-hero wikkelt in de terugval een regel extra, en zodra Anton binnenkomt schuift SECTION.calc-tool omhoog. Dat is geen randgeval maar een REGRESSIE, want zonder terugvalfamilie haalde die pagina de grens wel. Harnas: Chrome via Playwright, 412x823 dpr 1,75, de woff2 van fonts.gstatic.com 1500 ms vertraagd met route-interceptie, PerformanceObserver op layout-shift, verse browsercontext per pagina, lokale http.server. /en/rpo-cost-calculator MOBIEL, per Anton-size-adjust (5 herhalingen) geen terugvalfamilie 0,0384 0,0384 0,0384 100,00% 0,0037 0,0206 101,00% 0,0037 0,0037 <- gekozen 101,50% 0,1333 BOVEN de grens 102,00% 0,1333 BOVEN de grens 102,50% 0,1354 0,1333 BOVEN de grens (de oude waarde) 103,50% 0,1354 BOVEN de grens 104,00% 0,0037 De veilige band ligt dus op 100,00 tot 101,00 procent en weer vanaf 104,00. 101,00% is gekozen omdat het de bovenkant van de eerste veilige band is en daarmee het verst van de rand aan de onderkant, en omdat het gelijk loopt met de twee bodyfaces hierboven, wat het bestand leesbaar houdt. De overrides zijn meegerekend: bij size-adjust 101,00% is 118/1,01 = 116,8 en 33/1,01 = 32,7. EERLIJK OVER WAT DIT NIET OPLOST: /cases op mobiel. Die pagina is BISTABIEL en springt tussen 0,0908 en 0,1112, bij ELKE waarde die hier is geprobeerd en ook bij elke bodywaarde tussen 99 en 103 procent. Twee identieke herhalingen op dezelfde waarde geven soms het ene en soms het andere getal, dus dit is een race en geen fontmetriek. De bron is DL.oa-cijfers-index; de onderliggende oorzaak is de eenheid ch in .oa-cijfers-toelichting (max-width: 56ch), die aan de breedte van het cijfer 0 van het ACTIEVE font hangt en dus bij de swap zelf verandert. Dat is een sitebrede typografische conventie (91 max-width-regels in css/ gebruiken ch) en geen fontinstelling. Niet aan deze knop proberen op te lossen; het hoort bij de post over ch in het eindrapport. Basiswaarde ter vergelijking: /cases mobiel stond zonder enige terugvalfamilie op 0,3441. LES: dit is een wikkelgrens en geen vloeiende functie. Wie hier een waarde verzet, meet BEIDE talen op MOBIEL EN desktop opnieuw, en herhaalt elke meting minstens twee keer. Oude waarden verbatim: size-adjust: 102.50%; ascent-override: 115.1%; descent-override: 32.2%; */ @font-face { font-family: 'Anton terugval'; src: local('Arial Narrow'), local('ArialNarrow'), local('Liberation Sans Narrow'); font-weight: 1 1000; font-style: normal; size-adjust: 101.00%; ascent-override: 116.8%; descent-override: 32.7%; line-gap-override: 0%; } /* TWEEDE ANTON-TERUGVAL, OP ARIAL (Timo, 23 augustus 2026, controleronde) --------------------------------------------------------------------------- WAAROM DIT ERBIJ MOET. De familie hierboven hangt aan local('Arial Narrow'). Die font bestaat op macOS en Windows, maar NIET op Android en NIET op de Linux-machine waarop PageSpeed Insights meet. Daar levert de @font-face geen bron, slaat de browser hem over en zakt de stapel door naar het kale sans-serif. De gordel hierboven doet dus precies niets op de twee plekken die voor de score het zwaarst wegen. Deze meting komt van de collega die aan de shells werkte en is hier nagemeten; hij hoort in dit bestand thuis omdat het beeldpolitiek noch markup is maar een token. NAGEMETEN, en dat is het punt: niet uitgerekend maar gemeten. De situatie op zo'n toestel is nagebootst door de src van de familie hierboven te vervangen door een naam die met zekerheid niet bestaat, waardoor de stapel precies hetzelfde doorzakt als op Android. Harnas als de rest: 412x823 dpr 1,75, woff2 1500 ms vertraagd, verse browsercontext per pagina. zonder Arial Narrow, vijf pagina's mobiel som CLS alleen de stapel van vandaag (naar sans-serif) 0,2877 /cases 0,1626 BOVEN met deze Arial-familie erachter 0,0460 niets boven per pagina, met en zonder: / 0,0041 -> 0,0000 /rpo-calculator 0,0252 -> 0,0000 /en/rpo-cost-calculator 0,0562 -> 0,0036 /over-ons 0,0396 -> 0,0000 /cases 0,1626 -> 0,0424 DE WAARDEN. Anton is 70,74% van Arial gemeten op de echte koppen van deze site in kapitaal, vandaar size-adjust 70%. De overrides zijn de rauwe Anton-metriek gedeeld door de size-adjust, net als bij de families hierboven: 118/0,70 = 168,6 en 33/0,70 = 47,1. WAAROM DIT NIET GEVAARLIJK IS. Deze familie staat ACHTER 'Anton terugval' in --font-display. Heeft het toestel Arial Narrow, dan wordt deze familie nooit bereikt en verandert er niets; nagemeten op deze machine, die Arial Narrow wel heeft: alle cijfers gelijk. Heeft het toestel hem niet, dan is dit een verbetering ten opzichte van het kale sans-serif waar de stapel vandaag naar doorzakt. Slechter dan vandaag kan het dus niet uitpakken. WAT HIERMEE NOG NIET GEDEKT IS: Android zelf. Daar bestaat Arial ook niet; daar is Roboto de systeemfont. Een derde familie op local('Roboto') zou dat dichten, maar Roboto staat niet op deze machine, dus die verhouding kan hier niet gemeten worden en zou gokwerk zijn. Zie het eindrapport; de collega die aan _qa/shell-*.html werkte heeft er wel een meting voor liggen. */ @font-face { font-family: 'Anton terugval Arial'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); font-weight: 1 1000; font-style: normal; size-adjust: 70.00%; ascent-override: 168.6%; descent-override: 47.1%; line-gap-override: 0%; } :root { /* — Basiskleuren — */ --navy-950: #020E2C; --navy-900: #0A1631; --navy-800: #0F1936; --navy-700: #1C2A4E; --navy-500: #3A4666; /* Slate — bodytekst op licht */ --navy-300: #6E7793; /* gedempt op licht */ --paper: #FDFAF6; --sand-50: #FDF8F7; --sand-100: #EFE6D6; --sand-200: #E5DBC8; --paper-line: #ECE7DD; --orange-500: #F6740C; --orange-600: #DD6A14; --orange-100: #FCE6D0; /* Blauw — 4e oppervlak, spaarzaam (S9-formulier, S6-chips/badge/quote, 1 kopregel S5) */ --blue-100: #D4E2F5; --blue-200: #B9CFEE; --blue-500: #305CC0; /* — Oppervlakken — */ --surface-deep: var(--navy-950); --surface-card-dark: var(--navy-800); --surface-cream: var(--sand-50); --surface-card: var(--paper); --surface-blue: var(--blue-100); /* — Tekst op licht — */ --text-strong: var(--navy-950); --text-body: var(--navy-500); --text-muted: var(--navy-300); --line: var(--sand-200); --line-paper: var(--paper-line); /* — Tekst op donker — */ --text-strong-inv: #FFFFFF; --text-body-inv: #C7CEDE; --text-muted-inv: #8B93AC; --line-inv: var(--navy-700); /* — Actie — */ --accent: var(--orange-500); --accent-hover: var(--orange-600); --accent-soft: var(--orange-100); /* — Typografie — */ /* 23 augustus 2026, SEO-audit: de metriek-gelijke terugvalfamilies uit het @font-face-blok bovenaan dit bestand zijn TUSSEN het webfont en de oude terugval gezet. Ze laden niets; ze zorgen alleen dat de tekst tijdens het swapvenster even breed en even hoog staat, zodat er niets verspringt. 'Arial Narrow' en system-ui blijven er als laatste redmiddel achter staan voor het geval het apparaat geen enkele local() kan leveren. Oude waarden verbatim: --font-display: 'Anton', 'Arial Narrow', sans-serif; --font-body: 'Public Sans', system-ui, sans-serif; 23 augustus 2026, controleronde: 'Anton terugval Arial' is er als DERDE naam bijgezet, voor toestellen zonder Arial Narrow (Android, en de Linux-machine van PageSpeed Insights). Zie het @font-face-blok hierboven voor de meting. Waarde daarvoor: --font-display: 'Anton', 'Anton terugval', 'Arial Narrow', sans-serif; */ --font-display: 'Anton', 'Anton terugval', 'Anton terugval Arial', 'Arial Narrow', sans-serif; --font-body: 'Public Sans', 'Public Sans terugval', system-ui, sans-serif; /* --font-hand VERWIJDERD 23 augustus 2026 (SEO-audit, prestaties-bevinding "Het lettertype Caveat wordt op alle 35 pagina's opgehaald terwijl geen enkele pagina het gebruikt"). De variabele werd nog maar door twee selectors gebruikt, .hero-video-note (css/sections/s1.css) en .svc-hero-video-note (css/sections/svc-hero.css), en die twee klassen zijn bij de bouwronde van 20 augustus met de video-placeholders uit de markup verdwenen: grep over alle 46 gebouwde .html, over sections/, sections-en/ en cms/templates/ geeft 0 treffers, terwijl dezelfde grep op de wél bestaande klasse hero-video-thumb 2 gebouwde pagina's vindt. Beide selectors zijn in dezelfde ronde weggehaald. Oude waarde verbatim: --font-hand: 'Caveat', cursive; LET OP, DIT IS MAAR DE HELFT. &family=Caveat:wght@600 staat nog in de Google Fonts-URL in alle 37 _qa/shell-*.html en wordt dus nog steeds opgehaald op alle 35 pagina's. Dat bestand valt buiten deze ronde; zie het eindrapport. */ --text-h1: clamp(3.6rem, 6.8vw, 5.9rem); /* Gedeelde hero-H1 (Timo 2026-07-21): ELKE hero-H1 draagt de homepage-schaal, zodat "de juiste mensen echt impact" (s1), "Over ons.", "Contact.", "Werving & Selectie" etc. sitebreed exact even groot zijn. Homepage-recept. */ --text-hero: clamp(3.4rem, 6.3vw, 5.5rem); --text-hero-s: clamp(2.15rem, 10.4vw, 2.7rem); /* ≤560 */ --text-h2: clamp(2.5rem, 4.6vw, 3.9rem); --text-h3: clamp(1.35rem, 1.8vw, 1.65rem); --text-lead: clamp(1.0625rem, 1.35vw, 1.25rem); --text-body-size: 1rem; --text-small: .875rem; /* — Radius — */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-band: 40px; /* scan-band S2 + CTA-balk S5, per design-PNG */ --r-pill: 999px; /* — Lijnen — */ --border: 1px solid var(--line); --border-inv: 1px solid var(--line-inv); --kicker: 3px solid var(--orange-500); /* — Ritme & layout — */ --container: 1380px; --gutter: clamp(1.5rem, 4vw, 3rem); --space-section: clamp(4.5rem, 11vh, 7rem); --space-section-s: clamp(2.25rem, 5vh, 3.25rem); /* strak ritme lichte middensecties */ --gap-sm: 24px; --gap-md: 40px; --gap-lg: 64px; /* — Elevatie (navy-getint, nooit zwart) — */ --shadow-card: 0 1px 2px rgba(2, 14, 44, .04), 0 8px 24px rgba(2, 14, 44, .06); --shadow-lift: 0 2px 4px rgba(2, 14, 44, .06), 0 16px 40px rgba(2, 14, 44, .12); --shadow-panel: 0 30px 70px rgba(2, 14, 44, .45); /* — Merk-watermark — */ --watermark-dark: .075; /* opacity op donker */ --watermark-light: .05; /* opacity op licht */ } /* ---------- Ademruimte op desktop (Timo 2026-08-18, feedback Thijs) ---------- Thijs vindt de homepage te druk. Gemeten waar dat vandaan komt: de naden tussen secties zijn NIET gelijk. Op 1440px is de afstand tussen twee secties de onderpadding van de een plus de bovenpadding van de ander, en dat gaf: hero -> s2 54px s2 -> s3 198px s3 -> s4 90px <- lichte middenrif s4 -> s5 90px <- s5 -> s6 90px <- s6 -> s7 90px <- s7 -> s8 198px s8 -> s9 198px Vijf secties op rij op 90px, en juist daar zit de zwaarste inhoud (proces, testimonials, logo's, FAQ). Dat is de dichtheid die je voelt. De naden van 198px zijn niet het probleem en worden daarom bijna niet aangeraakt: die verder oprekken maakt de pagina alleen langer en het ritme ONgelijker. Daarom: het strakke ritme flink omhoog, het volle ritme een tikje. Nagemeten op 1440x900: de padding gaat van 45 naar 61 en van 99 naar 108, dus de krappe naden lopen van 90 naar 122px (+36%) en de ruime van 198 naar 216 (+9%). De pagina groeit van 7104 naar 7289px, 2,6 procent. Dat is de prijs van vijf naden die ruim een derde ruimer staan, en dat is hem waard. Op 390x844 nagemeten: geen enkele naad verandert (84 en 186, precies als ervoor). De pagina werd daar 16px KORTER, en dat komt niet hiervandaan maar van de nieuwe onderrij in s5. ALLEEN OP DESKTOP, EN DAT IS HET HELE PUNT. Op mobiel staat alles al onder elkaar; daar ruimte bij zetten betekent alleen langer scrollen, precies wat Timo op de call van 18 augustus tegen Lise zei. Onder 1025px verandert er dus geen pixel. Dat is ook waarom dit een media query is en niet een andere waarde in de clamp hierboven. */ @media (min-width: 1025px) { :root { --space-section: clamp(5.25rem, 12vh, 7.75rem); --space-section-s: clamp(3rem, 6.75vh, 4.5rem); } }