/* =========================================================================== GLAS EN DRAADVLAK, HET DEEL DAT ALLEEN OP DE HOOFDPAGINA STAAT. glas.css draagt sinds 14 september 2026 de gedeelde basis: de --glas-tokens, .glas en .glas--donker, en de ruiten die op elke pagina hetzelfde zijn (de balk, de kanaalkaarten, de FAQ-blokken, het slotpaneel). /cyberverzekering/ laadt diezelfde basis en zet er landing-glas.css bovenop. Dit bestand is de tegenhanger daarvan voor site/index.html. DE VOLGORDE IS DUS NIET VRIJ: pagina.css, dan chat.css, dan glas.css, dan dit. Een paar regels hieronder overschrijven een waarde uit pagina.css of chat.css op gelijke specificiteit, en dan beslist de volgorde. WAT HIER IN HOORT: alles wat de hoofdpagina eigen is — het uitklapmenu, de chatbalk in het hero, de twee kanaalknoppen eronder, het tekstblok in "Het werk ligt bij ons" en de plaatsing van het draadvlak. Wat óók op een andere pagina zou moeten gelden, hoort in glas.css en niet hier. DE REGEL DIE VOOROPSTAAT, UIT DE OVERDRACHT De ruit draagt vorm, geen inhoud. Tekst en bedieningselementen staan op een dekkend vlak bóvenop het glas, niet op het glas zelf. De meting staat in bekijken/chatknop-glas.html: boven het bogenmotief wisselt de ondergrond binnen één balkbreedte van een felle boog naar bijna zwart, en dan is contrast op glas niet te garanderen. =========================================================================== */ /* --- Het uitklapmenu op smalle schermen -------------------------------- Donkere ruit op 0,72, zoals de overdracht vraagt. Het paneel hing op een lichte achtergrond, en in pagina.css staat waarom: het hangt ónder de balk over de pagina heen, en de pagina eronder is licht. Die reden vervalt niet, hij keert om — een donkere ruit over licht papier is net zo leesbaar als andersom, mits de inkt meedraait. Vandaar dat hier niet alleen de achtergrond staat maar ook de links, de scheidingslijn, de randen van de twee knoppen en de focusrand. Nagerekend: 0,72 van #182019 over --washi geeft ongeveer #4f584c, en --hero-text #e8eee1 haalt daarop 5,8:1. De randen van de taal- en loginknop staan op 0,65 en halen daarmee de 3:1 die WCAG voor de begrenzing van een bedieningselement vraagt — dezelfde waarde en dezelfde reden als in de balk. De focusrand gaat van --shu-deep naar --washi: donkergroen op een donker paneel is geen zichtbare focus. ----------------------------------------------------------------------- */ .navmenu { background: rgba(var(--hero-veil-rgb), 0.72); border-bottom: 1px solid rgba(232, 238, 225, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 40px rgba(20, 26, 21, 0.28); backdrop-filter: blur(var(--glas-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%); } .navmenu a, .navmenu__foot .navbar__login, .navmenu__foot .taalkiezer__knop { color: var(--hero-text); } /* MAAR NIET DE TALEN IN HET UITKLAPPANEEL, 18 september 2026. `.navmenu a` hierboven pakte ook de drie links in .taalkiezer__paneel, en dat paneel is licht (rgba(240, 246, 232, 0.95), zie pagina.css) — ook hier, want het is dezelfde ruit op elke pagina. Lichte inkt op licht papier: nagemeten 1,03:1, dus "Nederlands", "Français" en "English" stonden er wel maar waren niet te lezen. Alleen de taalcode en het vinkje hadden een eigen kleur en bleven zichtbaar; precies wat er op de foto te zien was. --text-body is de inkt die pagina.css het paneel zelf geeft, en op dit papier haalt die 13,3:1. */ .navmenu .taalkiezer__paneel a { color: var(--text-body); } /* HET UITKLAPMENU "ONZE PRODUCTEN" IN DIT PANEEL, 16 september 2026. Onder 1100px verhuist `[data-producten]` uit de balk naar dit menu (productenmenu.js). Het is dus hetzelfde element dat op een breed scherm in een licht paneel hangt, en daar hoort de inkt van het papier op. Hier hangt het in een donker paneel, en daar stond het dus donker op donker: de knop "Onze producten" op --text-primary, de kolomkoppen op --text-muted en de zes doelgroepknoppen op --text-primary. Alleen de links erin waren goed, want die vallen onder .navmenu a hierboven. De kolomkoppen op 0,86 en niet op 1: ze blijven een kopje boven een lijst en geen regel in die lijst. Nagerekend tegen de lichtste ondergrond die dit paneel kan hebben (0,72 van #182019 over --washi, ongeveer #4f584c, zie de toelichting boven .navmenu): 0,86 van #e8eee1 wordt daarop #d3d9cc en haalt 5,1:1, ruim de 4,5 die WCAG voor kleine tekst vraagt — en 11,5px is kleine tekst. Op 0,72 was het 4,0 en dus te weinig; dat is precies de melding die eraan voorafging. De namen en de knoppen erboven halen 6,3:1. De zes doelgroepknoppen staan ook op 16px in plaats van 14: ze staan in dezelfde lijst als de namen erboven, en twee lettergroottes in één lijst lezen als twee soorten dingen. */ .navmenu .navbar__uitklapknop { color: var(--hero-text); } .navmenu .productenpaneel button { color: var(--hero-text); font-size: 16px; } .navmenu .productenpaneel__kop { color: color-mix(in srgb, var(--hero-text) 86%, transparent); } /* En de lijn langs de lijst: --rule is de lijn van het papier en is hier niet te zien. */ .navmenu .productenpaneel { border-left-color: rgba(232, 238, 225, 0.22); } .navmenu__foot { border-top-color: rgba(232, 238, 225, 0.20); } .navmenu__foot .navbar__login, .navmenu__foot .taalkiezer__knop { border-color: rgba(232, 238, 225, 0.65); } .navmenu__foot .taalkiezer__knop:hover { background: rgba(232, 238, 225, 0.10); } .navmenu a:focus-visible, .navmenu__foot .navbar__login:focus-visible, .navmenu__foot .taalkiezer__knop:focus-visible { outline: 3px solid var(--washi); } /* --- De chatbalk in de hero en de knop rechtsonder --------------------- Eén element in twee standen: .heroballk is de balk onder de hero-kop, en terwijl je scrolt krimpt hij tot de pil rechtsonder. De twee vullingen liggen op elkaar en motief.js wisselt hun dekking per frame; ze krijgen allebei een ruit, anders springt het materiaal halverwege de beweging. TWEE DINGEN OM TE WETEN ALS JE HIERAAN DRAAIT. 1. De blur valt weg zodra motief.js de dekking van .heroballk onder de 1 zet, halverwege de reveal en halverwege de morf: een voorouder met opacity kleiner dan 1 is een backdrop root, en dan is er voor de ruit niets meer om te vervagen. In de eindstanden staat de dekking op precies 1 en is de blur er wel. Zichtbaar is dat niet, want in de tussenfase beweegt het element toch. 2. De pil staat over de hele pagina, ook over het lichte papier, en daar kost de ruit contrast: 0,52 van #182019 over --washi geeft ongeveer #7f8f7c, en het opschrift --washi haalt daarop 2,4:1 waar 4,5:1 nodig is. Op de donkere slotsectie klopt het wel. Bewuste keuze van de opdrachtgever (14 september 2026); meld het in elke toegankelijkheidsbeoordeling. Wil je de norm terug zonder de ruit te verliezen, dan is 0,80 de dekking waarbij het opschrift op élke ondergrond boven de 4,5 blijft. ----------------------------------------------------------------------- */ .heroballk__vlak--balk { /* DOORZICHTIG SINDS 15 SEPTEMBER 2026, op verzoek: elke chatbalk op de site een ruit en geen vlak. Zie --balk-vlak in pagina.css; daar staat de knop voor alle vier de vormen. Hier stond 0,68, en die was zelf ook al op verzoek gezet (14 september 2026, tegen de 0,50 uit de overdracht in) met als reden: "op 0,50 kwam het motief zo ver door de ruit dat de balk als een lichtvlek las in plaats van als een vlak." Die waarneming is niet ongeldig geworden — het is dezelfde balk op hetzelfde motief — maar de vraag is nu de andere kant op. Wil je terug, dan is dit de enige waarde om aan te draaien. */ background: var(--balk-vlak); border: 1px solid var(--glas-rand-donker); box-shadow: var(--glas-glans-donker), var(--glas-schaduw-donker); backdrop-filter: blur(var(--glas-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%); /* De 22 uit de overdracht, en niet de 999 die chat.css hier zet. Dat mag omdat de twee standen APARTE elementen zijn die over elkaar heen vervagen: de balk blijft een afgeronde rechthoek, de pil blijft een pil, en de morf tussen die twee vormen is de vervaging zelf. (De opmerking in chat.css dat er "geen hoekvorm om te animeren" is, gold toen beide vlakken 999 waren.) */ border-radius: 22px; } .heroballk__vlak--pil { background: rgba(var(--hero-veil-rgb), 0.52); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 30px rgba(20, 26, 21, 0.18); backdrop-filter: blur(var(--glas-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%); /* DE HOEKEN VAN DE ONDERLAAG VOLGEN DE BALK, 15 september 2026. Waarom dit er is. De twee vlakken liggen op dezelfde doos: de pil onderop, de balk erover. Toen de balk nog een dekkend vlak was (0,68) dekte hij de pil volledig af en deed de vorm van die onderlaag niet mee. Sinds de balk doorzichtig is — 15 september 2026, hierboven — schijnt de pil er doorheen, en de pil is 999 waar de balk 22 is. Op een balk van 64 hoog is 999 een halve cirkel van 32, dus aan beide uiteinden liep de rand van de onderlaag als een boog dwars door de hoek van de balk. Dat zijn de lijntjes in de hoeken: niet één rand die te zien is, maar twee die niet samenvallen, met een lichte sikkel ertussen waar de donkere tint van 0,52 en de tweede blur ontbreken. De onderlaag draagt hier dus dezelfde hoek als de balk, en pas in de knopstand is ze weer een pil. De overgang staat op dezelfde 180ms als de rest van de wissel; scrollen zelf gaat per frame en zonder transition, maar dit ene sprongetje staat helemaal aan het eind van de reis, waar de balk al onzichtbaar is en het element nog 56 hoog is — 22 tegen 28 is daar het hele verschil. Niet gedaan, en waarom: de pil dezelfde 22 geven in álle standen maakt van de knop rechtsonder een afgeronde rechthoek, en dat is de knop niet. De onderlaag laten uitfaden in de balkstand haalt de tint van 0,52 weg die de balk vandaag zijn donkere vulling geeft, en dat is een andere wijziging dan deze. */ border-radius: 22px; transition: border-radius 180ms var(--ease); } .heroballk[data-stand="pil"] .heroballk__vlak--pil { border-radius: 999px; } /* De inhoud van de balk: een klem op een eigen vlakje en een lichte verstuurknop. HET TEKSTVELD STOND HIER OP --sumi-deep, dekkend, "want de ruit draagt vorm en de inhoud staat op een dekkend vlak erbovenop". Sinds 15 september 2026 is ook dat veld doorzichtig — anders zie je door de balk heen een dekkend blok zitten, en dan is de balk niet doorzichtig maar dubbel. Wat daarmee vervalt is de meting bij de plaatshouder hieronder: die haalde 5,5:1 op --sumi-deep. Nagemeten op het motief zelf, in de felste stand die het onder de balk ooit aanneemt, staat ze op 4,6:1 — nog boven de 4,5 van WCAG AA, maar met een tiende marge in plaats van een hele punt. Twee maten uit chat.css blijven met opzet staan. De 16px in het veld, want alles daaronder laat Safari op iOS inzoomen zodra je het veld aanraakt. En de hoogte van 44/46: motief.js rekent de hoogte van de balk uit op BALK_MIN_INVOER = 46, dus daar hangt de morf aan. */ .heroballk__invoer { background: var(--balk-vlak); border-color: transparent; /* de 1px blijft staan: anders springt de maat */ border-radius: 14px; color: var(--hero-text); } /* De plaatshouder van chat.css is een warme grijstint (#9d968e), afgestemd op het warme veld daar. Het veld is hier doorzichtig en het motief erachter is groen, en dan valt die warme tint op. Dezelfde inkt als de rest van het hero, gedimd. Zie de meting hierboven voor wat 0,58 nu haalt. */ /* 0,80 en niet de 0,58 van hiervoor. Op --sumi-deep haalde 0,58 ruim 5:1. Met een doorzichtig veld staat de plaatshouder op het motief zelf, en daar is de felste stand onder de balk (67,88,73) — buiten de ellips van de sluier, dus alleen de vlakke 0,40 beschermt daar. Nagemeten over vierentwintig standen van het motief: 0,58 3,37:1 te weinig 0,70 4,09:1 te weinig 0,80 4,84:1 haalt AA met marge Nagerekend op de pixels van de tekenfunctie, niet geschat. Wijzigt de sluier of de dekking van de balk, dan hoort dit getal opnieuw gemeten. */ .heroballk__invoer::placeholder { color: rgba(232, 238, 225, 0.80); } .heroballk__klem { border-radius: 14px; background: rgba(232, 238, 225, 0.12); color: rgba(232, 238, 225, 0.75); } .heroballk__klem:hover { background: rgba(232, 238, 225, 0.20); } /* De verstuurknop houdt zijn pijl en wordt het lichte vlak uit de referentie: --washi met donkere inkt. Nagerekend haalt --sumi-deep op --washi 12,9:1, dus de pijl is het best afleesbare van de hele balk — en dat hoort ook, het is de enige knop die iets verstuurt. */ .heroballk__send { background: var(--washi); color: var(--sumi-deep); } .heroballk__send:hover { background: var(--washi-dim); } .heroballk__send:focus-visible { outline: 3px solid var(--washi); outline-offset: 3px; } /* --- De twee kanaalknoppen onder de balk ------------------------------- Ze stonden als omlijnde knop op het motief en waren daarmee te doorzichtig: de bogen liepen er dwars doorheen en de knop las niet als een vlak. Nu dezelfde ruit als de balk erboven, op dezelfde dekking, zodat de drie elementen in het hero één materiaal zijn. Vorm en maat staan in pagina.css. Dit is ook de plek waar de ruit contrast OPLEVERT in plaats van kost. Zonder vulling stond het opschrift boven de felste boog op 4,5:1 — de ondergrens. Met deze vulling is de ondergrond overal ongeveer #222b23 en haalt --washi 11,4:1, ook daar. ----------------------------------------------------------------------- */ .hero-kanalen .proef__knop { /* 0,88: dekkender dan de balk erboven, op verzoek. Het is nog glas — de boog schemert er net doorheen en de blur maakt de ondergrond egaal — maar het leest als een knop en niet als een raampje. */ background: rgba(var(--hero-veil-rgb), 0.88); border-color: var(--glas-rand-donker); box-shadow: var(--glas-glans-donker); backdrop-filter: blur(var(--glas-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%); } .hero-kanalen .proef__knop:hover, .hero-kanalen .proef__knop:focus-visible { background: rgba(var(--hero-veil-rgb), 0.95); border-color: rgba(232, 238, 225, 0.55); } /* --- Het tekstblok in "Het werk ligt bij ons" -------------------------- .glas zet de ruit; dit zet alleen de binnenruimte. */ .glas--tekst { padding: 26px 28px; border-radius: 22px; } /* Op een telefoon is de sectiemarge 24 pixels; 44 daarbinnen maakt de leeskolom te smal. */ @media (max-width: 560px) { .closing__paneel { padding: 28px 22px; } .glas--tekst { padding: 20px 20px; } } /* Zonder backdrop-filter is een halfdoorschijnend vlak onrustig in plaats van mat: de dekking gaat omhoog en de ruit wordt gewoon een vlak. glas.css doet dit al voor de gedeelde ruiten; dit zijn de vier die hier bij komen. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .navmenu, .heroballk__vlak--balk, .heroballk__vlak--pil, .hero-kanalen .proef__knop { background: rgba(var(--hero-veil-rgb), 0.88); } } /* =========================================================================== HET DRAADVLAK Het veld zelf wordt door draadvlak.js getekend; hier staat alleen waar het hangt. Twee secties hebben het, en niet meer: #na-het-afsluiten en #veelgesteld bleven er bewust van af, want glas plus lopende tekst plus lijnen werd te druk. De mask is geen sier. De horizon is het dichtste deel van het veld, en zonder uitdoving loopt dat achter de sectiekop. Zo staat elke kop op effen papier. =========================================================================== */ [data-draadvlak] { overflow: hidden; } [data-draadvlak] > .section__inner { position: relative; } .draadvlak { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 60%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 60%); } [data-draadvlak="bereikbaar"] .draadvlak { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 58%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 58%); } /* =========================================================================== WAT HIER BEWUST NIET STAAT De chatbalk onderaan de hero uit de overdracht is geen nieuw element geworden: deze site heeft die balk al (.heroballk, zie chat.css), en die krijgt hierboven de ruit. Er is dus niets bijgebouwd. =========================================================================== */