/* =========================================================================== Ōmata landingspagina's, de opmaak die pagina.css niet al heeft. Hoort altijd ná pagina.css geladen te worden: alle kleuren, maten en afstanden hieronder komen uit de tokens die daar in :root staan. Er staat hier bewust geen enkele hexcode en geen enkel eigen palet. Wijzigt salie, dan wijzigt deze pagina mee. WAAROM DIT EEN APART BESTAND IS EN GEEN BLOK IN PAGINA.CSS pagina.css is de hoofdpagina: hero op canvas, scrollmotor, carrousel, stappenkaarten, het informatiescherm achter de dekkingen. Een landingspagina gebruikt daar niets van. Andersom gebruikt de hoofdpagina niets van wat hieronder staat. Twee bestanden die elkaar niet raken is goedkoper dan één bestand waarin je moet weten welke helft voor welke pagina is — en de landingspagina's zijn er straks achttien, dus die helft groeit. WAT HIER NIET STAAT, EN WAAROM Geen animaties op scroll. De reveal-vensters van de hoofdpagina zijn daar op hun plaats: dat is een merkpagina die je doorloopt. Een landingspagina wordt aangeklikt vanuit een zoekresultaat met één vraag in het hoofd, en dan is tekst die er nog niet staat een obstakel, geen effect. =========================================================================== */ /* --- 1. De hero ------------------------------------------------------- Een volledig scherm, net als de hoofdpagina. HIER STOND EEN DERDE SCHERMHOOGTE, met als reden: een volledig scherm zou het antwoord op de zoekvraag onder de vouw duwen, en daarvoor komt iemand hier. Die reden gold toen het antwoord ónder de band stond. Het staat nu in de band zelf — .lp-hero__antwoord, tussen de kop en het gespreksveld — dus het blijft boven de vouw hoe hoog de band ook is. Wat er onder de vouw komt, is de sectie daarná. 100svh en niet 100vh, zoals .hero-sticky op de hoofdpagina: svh is de schermhoogte mét de adresbalk van een telefoon erbij gerekend. Met vh valt op iOS het onderste stuk weg zodra de adresbalk uitklapt, en dat onderste stuk is hier het chatveld. min-height en niet height: de Franse koppen zijn structureel langer dan de Nederlandse en de drie startvragen breken op een telefoon over twee regels. Een vaste hoogte zou daar afkappen. */ .lp-hero { position: relative; overflow: hidden; /* --hero-bg en niet --sumi-deep: de gradient uit drawArcs is op die kleur berekend, en een paar tinten ernaast geeft een zichtbare rand rond het motief. */ background: var(--hero-bg); color: var(--hero-text); /* Ruimer dan eerst (36/44). De band droeg drie dingen — kop, antwoord en het chatveld met drie knoppen — op de krapste padding van de pagina, en dat maakte er een volle rechthoek van in plaats van een banner. */ padding: calc(var(--nav-h) + 68px) var(--gutter) 72px; min-height: 100svh; display: flex; align-items: center; } /* De ruimte tussen de secties. Stond hier eerst krapper dan op de hoofdpagina (44 tot 72), met als redenering dat negen secties achter elkaar anders te ver uit elkaar staan. Dat was de verkeerde knop: de pagina voelde daardoor vol, niet compact. De drukte zat in de tekst, niet in de witruimte, en die is nu ingekort. De padding gaat daarom weer omhoog, iets onder die van de hoofdpagina. Via de custom property en niet via een eigen padding: .section blijft zo één regel in pagina.css, en wie die daar wijzigt hoeft hier niets te weten. Geankerd op .lp-hero, dus dit kan niet buiten een landingspagina terechtkomen. */ .lp-hero ~ .section { --section-pad-y: clamp(68px, 8vw, 112px); } /* Een kop heeft lucht nodig vóór wat eronder komt, en die stond alleen op de blokken die er zelf om vroegen. Nu overal gelijk. */ .lp-hero ~ .section h2 { margin: 0 0 var(--stack); } .lp-hero ~ .section .body { line-height: 1.7; } /* Scheiding tussen twee pagina-eigen blokken binnen dezelfde sectie. */ .lp-scheiding { margin: var(--stack) 0; border: 0; border-top: 1px solid var(--rule); } /* position en z-index: de inhoud staat boven het motief, dat als svg over de hele band ligt. */ .lp-hero__inner { position: relative; z-index: 2; margin: 0 auto; width: 100%; max-width: var(--max-shell); /* Eén kolom, gecentreerd — dezelfde opbouw als .hero-col in pagina.css. De gap doet het verticale ritme, dus de blokken eronder hebben geen eigen ondermarge meer. */ display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--stack); } /* De h1 is de zoekterm, letterlijk. Geen clamp naar boven die hem groter maakt dan de h2's verderop: dit is een antwoord, geen aankondiging. */ /* De kleur expliciet, en niet geërfd van .lp-hero. pagina.css zet op h1 een eigen color (--text-primary, de inkt), en die wint van de overerving — met als resultaat inkt op inkt, en een kop die er wel staat maar niet te zien is. Eén keer echt gebeurd; vandaar deze regel én deze uitleg. */ .lp-hero h1 { color: var(--text-invert); /* Geen afbreekstreepje. pagina.css zet `hyphens: auto` op elke h1, met reden — er staan samengestelde woorden in deze koppen — maar op tachtig pixels werd "Cyberverzekering" daardoor "Cyberverze-kering", en een zoekterm met een streepje er middenin leest als een fout. Over de volle schil is er ruimte zat; overflow-wrap blijft aan als vangnet. */ hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; margin: 0; max-width: 17ch; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -0.025em; } /* Een enkel woord van meer dan 17ch (bv. "Beroepsaansprakelijkheid") past niet in de max-width hierboven en heeft geen spatie om op af te breken — overflow-wrap breekt hem dan middenin, zonder streepje: "Beroepsaansprakelijkhei" / "d". Ruimte zat in de schil (getest tot 29 tekens); alleen de 17ch hield hem daarvan af. Kleinere letter erbij zodat zo'n kop niet zwaarder oogt dan de kortere. */ .lp-hero h1.h1--lang { max-width: 30ch; font-size: clamp(26px, 4vw, 42px); } /* EN EEN KOP DIE EEN ZIN IS. h1--lang hierboven is voor één lang wóórd; dit is voor een lange kop. Ze vragen het omgekeerde van de kolom: een lang woord wil een bredere kolom om niet af te breken, een lange kop wil er een die breed genoeg is om niet in vier regels uiteen te vallen. Vandaar twee klassen en geen gedeelde. "U focust op uw klanten. Wij zorgen dat één ongeluk uw zaak niet onderuit haalt." stond op tachtig pixels in vier regels van driehonderdvijftien pixels hoog — de kop was de hele band, en het antwoord en de balk eronder werden een voetnoot. Een maat kleiner en een kolom breder maakt er drie regels van die nog altijd als kop lezen. De generator zet deze klasse boven de achtenveertig tekens; zie de toelichting bij h1_klasse in bouwscripts/maak_landingspaginas.py. */ .lp-hero h1.h1--zin { max-width: 34ch; font-size: clamp(24px, 3.2vw, 38px); } .lp-hero__antwoord { margin: 0; /* DEZELFDE MAAT ALS DE BALK ERONDER, en dat is de hele reden dat dit een token is. De band droeg drie breedtes: de kop op 17ch, het antwoord op 46ch (552 pixels) en de balkrij op 820. Drie linkerranden en drie rechterranden vlak onder elkaar, en dat is wat de balk los liet aanvoelen van de tekst erboven — op een venster van duizend liep de balk bijna van rand tot rand terwijl de tekst in het midden stond. Nu delen het antwoord en de balk één rand. Op 24 pixels is 820 zo'n achtenzestig tekens per regel, midden in de vijftig tot vijfenzeventig die als comfortabel geldt — de leesbaarheid levert er dus niets voor in. De kop houdt zijn eigen regelval; die breekt op woorden en niet op een maat. */ max-width: var(--lp-balkmaat); font-size: var(--size-lead); line-height: 1.65; /* Niet de volle --text-invert: twee zinnen op volle sterkte naast een kop van 50px laten de kop niet als kop lezen. Nagemeten op --sumi-deep: 12,1:1, ruim boven AA. color-mix en geen rgba(): een doorschijnende kleur uit een token schrijf je zonder de kanalen over te typen, anders volgt hij het palet niet. De kanaalwaarden uit design.md hoofdstuk 2.2 staan nog niet in pagina.css; zodra ze er staan mag dit ook rgba(var(--washi-rgb), 0.86) worden. */ color: color-mix(in srgb, var(--text-invert) 86%, transparent); } .lp-hero__antwoord p { margin: 0 0 0.8em; } .lp-hero__antwoord p:last-child { margin-bottom: 0; } /* --- 2. Het chatveld -------------------------------------------------- Drie keer op de pagina, met telkens een andere placeholder en andere startvragen. In de hero staat hij op de donkere band, daarna op papier; één set regels, de kleuren komen van de band eronder via currentColor en twee modifiers. */ .lp-veld { max-width: var(--max-read); } /* DE BALK IS OVERAL DONKER, OOK OP HET LICHTE PAPIER. Hij stond eerst op --page-bg met een randje van --rule. Op een sectie van --washi is dat dezelfde kleur als de achtergrond en op --surface-tint scheelt het één tint: het enige wat het invoerveld van de pagina onderscheidde was een rand op 0,14 dekking, ver onder de 3:1 die WCAG vraagt voor de begrenzing van een bedieningselement. Het was nauwelijks te zien dát er een veld stond. Nu is het overal hetzelfde donkere vlak. Dat is ook wat de homepage doet: .heroballk houdt --chat-surface wanneer de balk uit het hero naar het lichte deel van de pagina schuift. Eén component, één uiterlijk, en op licht papier het hoogst mogelijke contrast. */ .lp-veld__doos { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 8px; border: 1px solid var(--glas-rand-donker); /* 22 en niet 999: dezelfde hoek als de balk in het hero van de hoofdpagina. Zie .heroballk__vlak--balk. */ border-radius: 22px; /* Doorzichtig, met de blur die de vulling vervangt. Zie --balk-vlak in pagina.css. */ background: var(--balk-vlak); box-shadow: var(--glas-glans-donker), var(--glas-schaduw-donker); backdrop-filter: blur(var(--glas-blur, 18px)) saturate(140%); -webkit-backdrop-filter: blur(var(--glas-blur, 18px)) saturate(140%); } /* De focusring staat op het veld zelf en niet op de hele doos; zie daar. */ .lp-veld textarea { flex: 1; min-height: 46px; max-height: 96px; padding: 11px 16px; /* De 1px blijft staan en wordt doorzichtig: anders springt de maat op het moment dat de focusring erbij komt. */ border: 1px solid transparent; border-radius: 14px; background: var(--balk-vlak); color: var(--text-invert); resize: none; /* Erven, niet zetten: een textarea neemt anders de systeemletter, en dan staat het enige invoerveld van de pagina in een andere letter dan de rest. */ font: inherit; font-size: var(--size-body); line-height: 1.5; overflow-y: auto; } .lp-veld textarea:focus { outline: none; } .lp-veld textarea:focus-visible { outline: 2px solid var(--shu-ink); outline-offset: 1px; } /* 0,80 en niet 0,60: het veld is doorzichtig, dus de plaatshouder staat op de band zelf. Zelfde meting als in het hero van de hoofdpagina. */ .lp-veld textarea::placeholder { color: color-mix(in srgb, var(--text-invert) 80%, transparent); opacity: 1; } /* Ruimte voor twee regels op een smal scherm. Een textarea met rows="1" is één regel hoog, en de placeholder van deze pagina's is met opzet een hele zin ("Ik run een boekhoudkantoor met vijf medewerkers"). Op een telefoon breekt die over twee regels en viel de tweede weg achter de rand: het voorbeeld dat de bezoeker op weg moet helpen was juist daar half onleesbaar. Het script laat het veld daarna meegroeien met wat er getypt wordt; dit gaat alleen over de begintoestand. */ /* GEEN VASTE HOOGTE VOOR EEN SMAL SCHERM MEER. Hier stond twee keer een uitgerekend getal (3em, daarna 70px) om de placeholder van twee regels te laten passen. Allebei fout gegaan, en de tweede keer om een reden die de eerste al voorspelde: hoeveel regels die zin nodig heeft hangt af van de schermbreedte, van de taal (de Franse placeholder is een kwart langer) en van de padding van het veld. Elk getal dat je hier zet, klopt voor één van de combinaties. site/landing.js meet nu bij het opstarten hoe hoog de placeholder in dít veld op dít scherm werkelijk is, en zet de hoogte daarop — en opnieuw bij een maatwijziging. Zie hoogteNaarPlaceholder() daar. */ /* HIER STOND EEN AFWIJKENDE HOEK VOOR EEN SMAL SCHERM (26px). Die hoorde bij de pilvorm van hiervoor: een pil die hoger dan breed-rond wordt, moet zijn hoeken laten meelopen. Met 22px is er niets meer om te laten meelopen. */ .lp-veld__stuur { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); /* Het lichte vlak van .heroballk__send op de hoofdpagina, sinds 15 september 2026. Die knop was groen (--shu) en is washi met donkere inkt geworden; dit is dezelfde knop op een andere plek, dus hij volgt. --sumi-deep op --washi haalt 12,9:1. */ background: var(--washi); color: var(--sumi-deep); cursor: pointer; transition: background-color 200ms var(--ease); } .lp-veld__stuur:hover:not(:disabled) { background: var(--washi-dim); } .lp-veld__stuur:disabled { opacity: 0.4; cursor: default; } /* --washi EN NIET --shu-deep, sinds 18 september 2026. Deze knop staat op de donkere band (--hero-bg #182019 bij data-hero="donker"), en de ring ligt met outline-offset 2px net buiten de knop, dus op die band. Nagerekend: --shu-deep haalt daar 2,33:1 in salie en 2,49:1 in het oorspronkelijke palet, en WCAG 1.4.11 vraagt 3:1 voor een focusindicator. --washi haalt 12,65:1. De byte-identieke tweeling in site/carrousel.css:436 deed dit al goed; productpagina's laden carrousel.css niet, dus de fout stond alleen hier — op 57 pagina's. Wijzig je er één, wijzig dan beide. */ .lp-veld__stuur:focus-visible { outline: 3px solid var(--washi); outline-offset: 2px; } /* De drie startvragen. Knoppen en geen links: ze vullen het veld hierboven in, ze navigeren niet. Wie dat als link opmaakt, belooft een pagina. */ .lp-veld__vragen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 0; list-style: none; } .lp-veld__vraag { border: 1px solid var(--rule); border-radius: var(--radius-pill); background: none; padding: 7px 14px; font: inherit; font-size: 0.94em; color: inherit; cursor: pointer; } .lp-veld__vraag:hover { background: var(--washi-dim); } .lp-veld__vraag:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; } /* De chips op de donkere band. --rule is een donkere lijn en verdwijnt daar, dus hier een lichte rand van dezelfde sterkte. */ .lp-veld--hero .lp-veld__vraag { border-color: color-mix(in srgb, var(--text-invert) 34%, transparent); } .lp-veld--hero .lp-veld__vraag:hover { background: color-mix(in srgb, var(--text-invert) 14%, transparent); } .lp-veld--hero .lp-veld__vraag:focus-visible { outline-color: var(--washi); } /* Alle drie de velden staan gecentreerd — in de band bovenaan, in de chatband en op de derde pagina van de carrousel — dus de startvragen ook. */ .lp-veld__vragen { justify-content: center; } /* Zonder javascript doen de chips niets en is het veld niet te versturen. Dan horen ze er ook niet te staan; de tekst van de pagina blijft heel. landing.js haalt dit attribuut weg zodra het draait. */ .lp-veld[hidden] { display: none; } /* --- 3. Het raster ----------------------------------------------------- Hier stond .lp-duo, twee kolommen naast elkaar voor "wat het dekt" en "wat het niet dekt". Die kolommen werden 320 pixels breed, en op tekst van twintig pixels is dat zesentwintig tekens per regel — te smal om te lezen. Ze staan nu als twee rijen in het raster hieronder; de twee koppen staan daardoor links onder elkaar, wat ze net zo goed tegenover elkaar zet. DIT RASTER DRAAGT DE HELE PAGINA. Elke sectie bestaat uit rijen van de vorm "kop links, inhoud rechts". Daardoor loopt er één verticale lijn over de volledige pagina waar alle tekst, alle kaarten, alle lijsten en alle chatvelden beginnen. Hiervoor stond elke kop bóven zijn tekst, en die tekst op --max-read (660) in een schil van 1024: een smal lint langs de linkerrand met driehonderd pixels dode ruimte ernaast, sectie na sectie. Alles onder elkaar, niets naast elkaar. Onder 1100 pixels is er geen ruimte voor twee kolommen en valt het raster terug op één: de kop weer boven zijn tekst, zoals overal elders op de site. */ .lp-rij { display: grid; gap: var(--stack-tight); } .lp-rij__kop h2 { margin: 0; } /* DE TUSSENRUIMTE KOMT VAN DE SECTIE EN NIET VAN DE RIJEN. Hier stond `.lp-rij + .lp-rij { margin-top: ... }`. Dat werkt zolang twee rijen elkaars directe buur zijn, en dat hield op te kloppen zodra er een kaartenrij tussen kwam te staan: die staat buiten het raster, dus de twee rijen zijn geen buren meer en de regel greep niet. Gevolg: de kop "NIS2: levert u aan een groter bedrijf?" plakte tegen de kaarten erboven. Een gap op de sectie zet de afstand tussen álle directe kinderen, wat voor soort dan ook. Zo kan er van alles tussen komen zonder dat de afstand ergens wegvalt — en er valt niets meer te vergeten wanneer er een nieuw soort blok bijkomt. */ .lp-hero ~ .section > .section__inner, .lp-chatband > .section__inner { display: grid; gap: calc(var(--stack) * 1.6); } @media (min-width: 1100px) { .lp-rij { grid-template-columns: minmax(0, 7fr) minmax(0, 11fr); column-gap: var(--stack); align-items: start; } /* De kop hoeft niet over de volle kolom te lopen; hij mag er los in hangen. Rechts wat lucht zodat hij nooit tegen de inhoud aan komt. */ .lp-rij__kop { padding-right: var(--stack); } /* Kleiner dan een kop over de volle breedte. Op 42 pixels in een kolom van 273 breekt "Wat een verzekeraar van u verwacht" over drie regels en weegt de kop zwaarder dan de inhoud ernaast. In deze vorm is de kop een label bij een blok, niet de aankondiging van een scherm. De kolom groeit mee met de letter: van 5 naar 6 naar 7 delen. Op 44 pixels heeft "Wat een cyberverzekering dekt" ongeveer vierhonderd pixels nodig om zonder afbreekstreepje te passen. Met 7 om 11 is de kopkolom 445 en de leeskolom 700, en dat laatste is bij een lopende tekst van 21 nog altijd drieënzestig tekens per regel — midden in de vijftig tot vijfenzeventig die als comfortabel geldt. */ .lp-rij__kop h2 { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.08; /* GEEN AFBREEKSTREEPJE IN EEN KOP. pagina.css zet `hyphens: auto` op elke h2, en met reden: er staan woorden als "bestuurdersaansprakelijkheid" in deze kopjes en die moeten ergens kunnen breken. Maar in deze kolom werd daardoor "Wat een cyberverzekering dekt" afgebroken tot "cyberverze-kering", en een kop met een streepje erin leest als een fout. De kolom is breed genoeg voor het langste samengestelde woord dat we hebben; overflow-wrap blijft aan als vangnet voor het geval dat ooit niet zo is. Dan breekt het woord zonder streepje, wat lelijker maar eerlijker is dan een kop die iets anders lijkt te zeggen. */ hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; } /* Een rij zonder kop — de chatvelden — houdt de rechterkolom. */ .lp-rij__kop:empty { display: none; } .lp-rij__kop:empty + .lp-rij__inhoud { grid-column: 2; } } /* --- 4. De lijsten ---------------------------------------------------- Volledige zinnen, want die worden geciteerd en losse woorden niet. Het teken ervoor staat in ::before en niet in de tekst: een schermlezer moet "brand" horen en niet "vinkje brand". */ /* DE RUIMTE ONDER EEN LIJST. Hier stond `margin: 0`, en dat klopte zolang een lijst het laatste blok van zijn kolom was — wat ze op elke pagina is behalve één. Op de cyberpagina volgt er een alinea op ("Wij kennen deze verschillen…"), en die stond op nul pixels van het laatste punt: de afstand tussen de punten was 24 pixels, de afstand ná de lijst nul, dus die alinea las als een vierde punt waarvan het streepje vergeten was. 36 en niet 24 (de maat tussen twee alinea's, zie deel 11): boven de lijst staat de aanloop die op een dubbele punt eindigt en er dus bij hoort, eronder begint een nieuwe gedachte. Die asymmetrie is het verschil tussen "hier komt de lijst" en "de lijst is klaar". :last-child houdt elke andere pagina precies zoals ze was — daar is de lijst het laatste kind van de kolom en zet de sectie de afstand. */ .lp-lijst { margin: 0 0 var(--stack); padding: 0; list-style: none; } .lp-lijst:last-child { margin-bottom: 0; } .lp-lijst li { position: relative; padding-left: 28px; /* 1,15em en niet 0,8: zeven punten onder elkaar met te weinig lucht ertussen lezen als één blok, ook met een vette aanloop. */ margin-bottom: 1.15em; font-size: var(--size-body); line-height: 1.7; } .lp-lijst li:last-child { margin-bottom: 0; } .lp-lijst li::before { position: absolute; left: 0; top: 0; font-weight: 700; } .lp-lijst--wel li::before { content: "+"; color: var(--shu-deep); } .lp-lijst--niet li::before { content: "−"; color: var(--sumi-light); } /* Een lijst die niets over dekking zegt. De + en de − hierboven zijn een uitspraak ("dit is gedekt", "dit is het niet"); op een rij voorbeelden van waar polissen van elkaar verschillen is dat een claim die we niet kunnen maken. Vandaar een streepje: het maakt er een lijst van en beweert niets. */ .lp-lijst--los li::before { content: "–"; color: var(--sumi-light); } /* Deze drie zijn één regel lang en hebben geen vette aanloop, dus de 1,15em van hierboven — gemaakt voor zeven dekkingspunten met een vet begin — zette ze op een steek van 60 pixels en liet ze als drie losse regels lezen in plaats van als één reeks van drie. Op een halve regel afstand staan ze als groep onder de aanloop. WAAROM 0,9em EN NIET KRAPPER. De afstand tussen twee punten moet groter zijn dan de afstand tussen twee regels bínnen een punt, anders lopen ze in elkaar over. Die regelafstand is hier 0,55em (1,55 min de letterhoogte zelf), en op een telefoon lopen deze drie zinnen wel over twee regels. 0,5em zag er op een breed scherm goed uit en liet ze op een telefoon aan elkaar plakken; 0,9em is in beide gevallen ruim het dubbele van de regelafstand. De regelafstand zelf van 1,7 naar 1,55: bij zinnen van één regel is 1,7 lucht die de drie punten juist verder uit elkaar zet. Binnen een punt dat wél over twee regels loopt blijft 1,55 ruim leesbaar. En een smallere kantlijn: 28 pixels is de maat voor de + en de − van de dekkingslijsten; een streepje is smaller en liet daar een gat van een halve centimeter tussen teken en tekst. */ .lp-lijst--los li { padding-left: 22px; margin-bottom: 0.9em; line-height: 1.55; } .lp-lijst--los li:last-child { margin-bottom: 0; } /* DE OPSOMMING ALS EIGEN BLOK. Een haarlijn links en de reeks ingesprongen, in plaats van drie regels met een streepje in de lopende tekst. De aanloop erboven eindigt op een dubbele punt en de alinea eronder begint een nieuwe gedachte; dan hoort wat ertussen staat er ook als een apart blok uit te zien, en niet als drie zinnen die toevallig een teken dragen. DIT VERVANGT HET STREEPJE EN DE KANTLIJN VAN 22 PIXELS uit het blok hierboven — een rail én een streepje is twee keer dezelfde aanwijzing. Wat daar staat over de + en de − blijft wél gelden: die twee zijn een uitspraak over dekking, en deze drie zeggen juist dat het per polis verschilt. De rail beweert niets. De haarlijn is die van .steps in pagina.css (--rule). Daarmee is dit dezelfde soort reeks en niet een nieuwe vorm erbij. EN MEER LUCHT ERONDER, 56 in plaats van de 36 hierboven: met de rail is de lijst een object geworden in plaats van een stuk tekst, en een object dat tegen de volgende alinea staat leest als een bijschrift erbij. */ .lp-lijst--los { border-left: 1px solid var(--rule); padding-left: clamp(20px, 2.2vw, 30px); margin-bottom: clamp(40px, 4.6vw, 56px); } /* Nodig naast .lp-lijst:last-child hierboven: de regel erboven is specifieker en zou die anders overrulen op elke pagina waar de lijst het laatste blok van haar kolom is. */ .lp-lijst--los:last-child { margin-bottom: 0; } .lp-lijst--los li { padding-left: 0; } .lp-lijst--los li::before { content: none; } /* --- 5. De twee dekkingstabellen -------------------------------------- "Wat een cyberverzekering dekt" en "... niet dekt" zijn de enige twee blokken op de pagina waarvan de inhoud echt twee kolommen heeft: een onderdeel, en wat ermee gebeurt. Zie tabel() in bouwscripts/maak_landingspaginas.py voor waarom dat een is. De
staat er wél, maar niet in beeld: de kop van de rij zegt hem al, en twee keer dezelfde kop boven elkaar leest als een fout. Een extractielaag en een schermlezer lezen de caption als de titel van de tabel, en dat is precies waarvoor hij er is. */ /* De aanloop boven een tabel. Zie H-9 in producten.py: de kop ging rechtstreeks over in de tabel, en dan staat er geen citeerbaar antwoord op de pagina. Zelfde maat als de lijsttekst en niet groter — het is een gewone alinea en geen tweede kop, en de

ernaast is al de opvallende regel. De marge eronder is die van een alinea voor een blok, niet de ruimere tussen twee secties. */ .lp-lead { margin: 0 0 24px; font-size: var(--size-body); line-height: 1.7; max-width: 62ch; } .lp-tabel-doos { overflow-x: auto; } .lp-tabel { width: 100%; border-collapse: collapse; font-size: var(--size-body); line-height: 1.7; text-align: left; } .lp-tabel caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lp-tabel th, .lp-tabel td { padding: 12px 16px 12px 0; vertical-align: top; border-bottom: 1px solid var(--rule); } .lp-tabel td:last-child, .lp-tabel th:last-child { padding-right: 0; } /* De kolomkoppen: klein en rustig. Ze zijn er voor de structuur, niet om gelezen te worden — de rijen dragen de tekst. */ .lp-tabel thead th { padding-top: 0; font-size: var(--size-note); font-weight: 600; color: var(--sumi-light); border-bottom: 1px solid var(--sumi-light); } /* De eerste kolom is een

: het onderdeel. Vet, en niet breder dan nodig, zodat de zin ernaast de leeskolom houdt. */ .lp-tabel tbody th { position: relative; font-weight: 700; padding-right: 24px; /* Ruimte voor het teken, dat er links buiten hangt. */ padding-left: 1.4em; white-space: normal; width: 34%; min-width: 11em; } .lp-tabel tbody tr:last-child th, .lp-tabel tbody tr:last-child td { border-bottom: 0; } /* Het teken voor het onderdeel, zoals bij .lp-lijst: + voor wat gedekt is, − voor wat niet gedekt is. In ::before, zodat een schermlezer "herstel" hoort en niet "plus herstel". */ /* Het teken hangt links buiten de tekst en loopt niet meer mee in de regel. Als inline-block deed het dat wel, en dan telt het mee voor de breedte van de eerste regel: "Aansprakelijkheid" paste daardoor net niet meer en kwam onder zijn eigen plusje te staan. Zo kan dat niet meer gebeuren, hoe lang het woord ook is. */ .lp-tabel tbody th::before { position: absolute; left: 0; font-weight: 700; } .lp-tabel--wel tbody th::before { content: "+"; color: var(--shu-deep); } .lp-tabel--niet tbody th::before { content: "−"; color: var(--sumi-light); } /* Op een telefoon is twee kolommen naast elkaar te smal om te lezen: de zin krijgt daar zo'n twintig tekens per regel. Onder elkaar, met het onderdeel als kopregel boven zijn eigen zin. */ @media (max-width: 640px) { .lp-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .lp-tabel tbody th, .lp-tabel tbody td { display: block; width: auto; padding-right: 0; border-bottom: 0; } .lp-tabel tbody th { padding-bottom: 2px; } .lp-tabel tbody td { padding-top: 0; padding-bottom: 1.15em; } .lp-tabel tbody tr:last-child td { padding-bottom: 0; } } /* --- 6. De FAQ -------------------------------------------------------- Staat hier niet meer. De vragen gebruiken sinds 11 september 2026 .vragen en .disclose uit pagina.css: precies de stapel van de homepage, met de vraag in een

en een chevron rechts. Deze sectie draagt id="veelgesteld", dus de regel `#veelgesteld .disclose` daar zet de kaart ook hier op --washi zonder rand. Twee FAQ's op één site die er anders uitzien is hoe een huisstijl uiteenvalt; dat was hier het geval en het is weggehaald in plaats van nagemaakt. */ /* --- 7. De drie interne links ----------------------------------------- */ .lp-links { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; grid-template-columns: 1fr; } @media (min-width: 720px) { .lp-links { grid-template-columns: repeat(3, 1fr); } } .lp-links a { display: block; height: 100%; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; text-decoration: none; color: inherit; } .lp-links a:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; } /* Een link in lopende tekst. Er is er vandaag precies één: de FSMA- inschrijving in het blok Over Ōmata (zie over_alineas in bouwscripts/maak_landingspaginas.py). Zonder deze regel kreeg hij de standaardopmaak van de browser — blauw en onderlijnd, midden in een alinea over een verzekeringsmakelaar. Zelfde behandeling als .studiolink op de hoofdpagina: onderlijnd in het accent en geen knop, want het is een verwijzing en geen actie. */ .lp-rij__inhoud .body a { color: var(--text-accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .lp-rij__inhoud .body a:hover { color: var(--text-primary); } .lp-rij__inhoud .body a:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 3px; border-radius: 4px; } /* Vet in lopende tekst. Komt uit **twee sterretjes** in productteksten; zie nadruk() in bouwscripts/maak_landingspaginas.py. 700 EN NIET DE BROWSERSTANDAARD. Instrument Sans loopt hier van 400 tot 700 (zie site/lettertypes/instrument-sans.css), en `bolder` op een leestekst van 400 landt dus op 700: een sprong van driehonderd eenheden midden in een zin, die de rest van de alinea grijs laat lijken. De site zet nadruk overal op 600 — de kaartkoppen, de namen in de kanalenrij — en de kleur erbij op de koptekleur, zodat het woord opvalt door gewicht en niet door een tweede kleur. */ .lp-rij__inhoud .body strong { font-weight: 600; color: var(--text-primary); } .lp-links strong { display: block; margin-bottom: 4px; color: var(--text-accent); } .lp-links span { font-size: 0.94em; line-height: 1.5; color: var(--sumi-light); } /* --- 8. De kaartenrij -------------------------------------------------- .channels / .channel komen uit pagina.css: dat zijn letterlijk de vier kaarten van "Altijd bereikbaar" op de homepage, met hetzelfde pictogram in --accent2, dezelfde vette naam en dezelfde ene regel eronder. Hier staat alleen wat dat raster nodig heeft wanneer het er vijf of zes zijn in plaats van vier. */ .channels--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .channels--drie { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .channels--drie { grid-template-columns: 1fr; } } /* De vette aanloop voor een punt in een lijst. De zin erachter blijft een volledige zin, want dat is wat geciteerd wordt; de aanloop is er zodat zeven van die zinnen onder elkaar niet als één lap tekst lezen. */ .lp-lijst li b { color: var(--text-primary); font-weight: 600; } /* --- 9. De slotsectie -------------------------------------------------- Zelfde vorm als de slotsectie van de homepage: het ringenmotief, een lichtzone die het midden vrijmaakt voor de tekst, en de pil eronder. Het motief is hier svg en geen canvas. Zie de toelichting bij slotmotief() in bouwscripts/maak_landingspaginas.py: de tekenfunctie van de homepage zit midden in zeventig kilobyte hero-machinerie, en die meeladen voor één figuur is de verkeerde ruil. Wil je hem ooit toch laten meebewegen met de scroll, dan is de weg: drawArcs uit motief.js in een eigen bestand zetten en dat hier laden. */ .lp-slot { position: relative; overflow: hidden; /* Krapper dan --closing-pad-y (72 tot 144) van de hoofdpagina. Daar is de slotsectie het einde van een merkverhaal en mag hij ademen; hier komt hij na drie schermen tekst, en dan leest 144 pixels boven en onder als een gat in plaats van als rust. */ padding: clamp(72px, 9vw, 116px) var(--gutter); text-align: center; } /* Het ringenmotief, in de hero en in de slotsectie. Eén regel voor beide: het verschil zit in de svg zelf (middelpunt en maskering), niet hier. Zie motief() in bouwscripts/maak_landingspaginas.py. */ .lp-motief { position: absolute; inset: 0; width: 100%; height: 100%; /* cover en niet contain: de svg draagt preserveAspectRatio="slice", en een negeert dat — de verhouding komt hier van object-fit. Zonder dit wordt het motief in de band gepast in plaats van hem te vullen. */ object-fit: cover; object-position: center bottom; pointer-events: none; /* Een decoratief beeld hoort niet mee te tellen in de leesvolgorde, en een gebroken alt-tekst hoort er ook niet te staan. */ user-select: none; } /* Dezelfde ellips als de maskering in de svg (80% 72% op 50% 46%), zodat de twee samenvallen in plaats van scheef over elkaar te liggen. */ .lp-slot__licht { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 72% at 50% 46%, color-mix(in srgb, var(--page-bg) 82%, transparent) 0%, color-mix(in srgb, var(--page-bg) 70%, transparent) 45%, color-mix(in srgb, var(--page-bg) 26%, transparent) 72%, transparent 100%); } .lp-slot__inner { position: relative; z-index: 2; margin: 0 auto; max-width: var(--max-shell); } .lp-slot h2 { margin: 0 0 20px; } .lp-slot .body { margin-left: auto; margin-right: auto; max-width: 52ch; line-height: 1.7; } .lp-slot .pill { margin-top: 36px; border: 0; cursor: pointer; font-family: inherit; } /* De overgang van de sectie erboven naar deze. Zonder dit begint de band met een harde lijn dwars over het motief; het is dezelfde papierkleur aan beide kanten, dus die lijn hoort er niet te zijn. */ .lp-slot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; pointer-events: none; background: linear-gradient(to bottom, var(--page-bg), transparent); } /* --- 10. Het gespreksbeeld -------------------------------------------- HERSCHREVEN: dit was een lichte kaart met washi-bellen, en dat leek op niets. Nu is het het échte chatvenster: dezelfde donkere kop met titel, statusbolletje en de verplichte AI-mededeling, en dezelfde twee soorten bel. Wie deze afbeelding naast het venster legt dat opengaat als hij op de knop klikt, hoort hetzelfde ding te zien. WAAROM DE KLEUREN HIER STAAN EN NIET UIT CHAT.CSS KOMEN. chat.css wordt met media="print" geladen en pas door veilig.js aangezet; zonder javascript blijft hij uit. Dit blok moet er juist óók zonder javascript staan — het is de enige plek op de pagina waar een crawler het gesprek leest. De waarden hieronder komen daarom uit het palet van de pagina zelf, met color-mix, en niet uit de tokens van chat.css. */ .lp-gesprek { max-width: 540px; margin-top: var(--stack); border-radius: 18px; overflow: hidden; background: var(--sumi-deep); color: var(--text-invert); } .lp-gesprek__kop { padding: 16px 20px 13px; border-bottom: 1px solid color-mix(in srgb, var(--text-invert) 14%, transparent); } .lp-gesprek__titel { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } /* Gedempt, zoals in het venster: dit is bijzaak naast de titel en de verplichte mededeling eronder. Het bolletje draagt de status niet alleen via kleur, de tekst zegt het ook. */ .lp-gesprek__status { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12.5px; line-height: 1.3; color: color-mix(in srgb, var(--text-invert) 66%, transparent); } .lp-gesprek__stip { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--shu-ink); } /* Op volle kleur en niet gedempt: dit is een verplichte mededeling. */ .lp-gesprek__ai { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; } .lp-gesprek__spoor { margin: 0; padding: 16px 18px; list-style: none; display: flex; flex-direction: column; gap: 10px; } .lp-gesprek__spoor li { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; } /* De afzender staat er uitgeschreven maar alleen voor een schermlezer, net als .omata-msg__who in chat.css: kant, kleur en hoekvorm zijn voor het oog, de naam is voor wie die niet ziet. */ .lp-gesprek__spoor li b { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .lp-gesprek__spoor .van-omata { align-self: flex-start; background: color-mix(in srgb, var(--text-invert) 8%, var(--sumi-deep)); border: 1px solid color-mix(in srgb, var(--text-invert) 14%, transparent); border-bottom-left-radius: 6px; } .lp-gesprek__spoor .van-klant { align-self: flex-end; background: var(--washi); color: var(--sumi-deep); border-bottom-right-radius: 6px; } /* De knop rechtsonder stond hier. Die bestaat niet meer op een landingspagina: de balk in de band réíst ernaartoe en wordt hem onderweg. Zie blok 15 en deel 3 van site/landing.js. */ /* --- 11. Wat tegen elkaar aan stond ----------------------------------- Nagemeten met een script dat elk paar opeenvolgende blokken in een sectie opmeet en alles onder de 28 pixels meldt. Drie plekken stonden letterlijk op nul; dit zijn ze. */ /* Het chatveld stond zonder één pixel tussenruimte tegen de lijst erboven. Het is een apart aanknopingspunt en geen laatste regel van het blok erboven, dus het hoort ook zo te staan. */ /* De startvragen onder het veld: 12 was te krap voor knoppen die zelf al een rand dragen. */ .lp-veld__vragen { margin-top: 16px; } /* Twee alinea's onder elkaar stonden op 18 pixels. Dat is de maat tussen regels van dezelfde alinea plus een beetje, en dus te weinig om als twee alinea's te lezen. */ .lp-hero ~ .section .body { margin-bottom: 24px; } .lp-hero ~ .section .body:last-child { margin-bottom: 0; } /* --- 12. De sluier over het motief ------------------------------------- Zelfde opzet en dezelfde waarden als .hero-light op de homepage: een ellips in de kleur van de band die het midden oplicht, zodat de kop niet op de felste bogen komt te staan. Eén verschil, en daarom een eigen klasse in plaats van .hero-light: daar staat de tekst gecentreerd in een volledig scherm, hier staat er inhoud in twee kolommen over de volle breedte van een band van een derde scherm. De ellips is daarom veel breder en dekt beide kolommen; met die van de homepage zou het gesprek rechts buiten de opgelichte zone vallen. */ .lp-hero__licht { position: absolute; inset: 0; pointer-events: none; background: /* De ellips over de tekst. Hoger en sterker dan eerst (62% 52% op 36% 46%, met 0,78 in het hart): die reikte verticaal van 20 tot 72 procent van de band, en de kop staat op ongeveer 18 procent — dus net bóven de zone die hem moest beschermen. Daar liepen de felle kernen dwars door de letters. Nagerekend op het ergste geval: de kern van een boog is --hero-arc- core (#93b39c) op 0,95 dekking, en --hero-text daarop haalt 1,9:1. Met de twee sluiers ervoor haalt de tekst daar 12,5:1. De vlakke sluier eronder staat op 0,40 en niet op 0,34: op 0,34 haalt tekst buiten de ellips 4,32:1, net onder de 4,5 die WCAG voor gewone tekst vraagt. Er staat daar vandaag niets, maar een marge die van de plaats van een alinea afhangt is geen marge. Op 0,40 is het 4,88:1 over de hele band. Nagerekend op de felste stop in de svg zelf, niet geschat. */ radial-gradient(ellipse 92% 92% at 46% 44%, rgba(var(--hero-veil-rgb), 0.88) 0%, rgba(var(--hero-veil-rgb), 0.80) 42%, rgba(var(--hero-veil-rgb), 0.44) 72%, rgba(var(--hero-veil-rgb), 0) 100%), /* En een vlakke sluier over de hele band. De bogen blijven zichtbaar, maar het hoogste licht gaat eraf: dit is achtergrond en het mag nergens feller zijn dan de tekst erboven. */ linear-gradient(rgba(var(--hero-veil-rgb), 0.40), rgba(var(--hero-veil-rgb), 0.40)); } /* --- 13. De klem ------------------------------------------------------ Alleen in de balk in de hero: daar is het veld de balk van de homepage en hoort hij erbij. In de twee velden verderop zou hij een derde knop zijn naast het veld en de startvragen. 44 bij 44, het minimum voor iets dat je met een vinger raakt. Zelfde maat en zelfde gedrag als de klem in het chatvenster. */ .lp-veld__klem { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: color-mix(in srgb, var(--text-invert) 72%, transparent); cursor: pointer; transition: color 200ms var(--ease), background-color 200ms var(--ease); } .lp-veld__klem:hover { color: var(--text-invert); background: color-mix(in srgb, var(--text-invert) 8%, transparent); } .lp-veld__klem:focus-visible { outline: 2px solid var(--shu-ink); outline-offset: 2px; } /* De maat van de balk staat sinds 14 september 2026 op .lp-balkrij (820, en 640 onder 900 pixels; zie landing-glas.css). Die rij draagt de balk én de twee kanaaltegels ernaast, dus een maat op het veld zelf zou de tegels meetellen of afsnijden. Het veld is nog alleen de kolom waarin de rij en de startvragen onder elkaar staan, gecentreerd. */ .lp-veld { display: flex; flex-direction: column; align-items: center; max-width: none; } /* --- 14. Meer contrast op de kaarten van "Verder lezen" ---------------- Ze stonden zonder vulling op --washi, met alleen een rand van --rule (0,14 dekking). Daarmee was er visueel geen kaart, alleen een vaag lijntje. Nu dezelfde twee lagen als de FAQ hierboven, maar omgekeerd: daar staat een --washi-kaart op een --surface-tint-sectie, hier een --surface-tint-kaart op --washi. Beide bestaan in elk palet en --washi is er steeds de iets diepere van de twee. */ .lp-links a { /* Geen eigen vulling meer: die komt van .glas (site/glas.css). Stond hier --surface-tint; dat is (0,1,1) en zou de ruit overschrijven. 55 procent, en dat getal is nagerekend en niet gekozen. De rand van een kaart die je kan aanklikken is de begrenzing van een bedieningselement, en WCAG vraagt daar 3:1 voor. Op --washi haalt de oude waarde (--rule, 14 procent) 1,1:1 en 40 procent nog maar 2,2; 55 procent haalt 3,42:1. Dezelfde 0,55 die .navbar__login en de taalknop in pagina.css gebruiken, om precies dezelfde reden. */ border-color: color-mix(in srgb, var(--sumi-deep) 55%, transparent); } .lp-links a:hover { background: var(--washi-dim); border-color: var(--sumi-deep); } /* --- 15. De balk die naar de knop reist --------------------------------- Zelfde mechaniek als .heroballk op de homepage (deel 7 van site/motief.js): één vast gepositioneerd element dat per frame op zijn rechthoek gezet wordt. In de band ligt die rechthoek op de plaatshouder daar, rechtsonder op de maat van de knop, en ertussen wordt geïnterpoleerd. Twee vullingen en twee soorten inhoud vloeien over elkaar heen, elk in hun eigen venster van de reis. WAAROM ÉÉN ELEMENT EN NIET TWEE DIE ELKAAR AFLOSSEN. Dat was de vorige versie: het veld scrollde weg en de knop in de hoek vervaagde erbij. Dan zijn het twee dingen die hetzelfde doen, en moet je met een waarnemer bewaken dat ze nooit samen in beeld staan. Nu is het één ding dat van vorm verandert, en is die regel geen bewaking meer maar een gevolg. De plaats komt uit het script; hier staat alleen hoe het eruitziet. */ /* position: fixed is de stand tijdens de reis. In rust zet landing.js hem op `absolute` met een plaats in het document, zodat de browser hem meescrolt met de tekst in plaats van dat het script hem per frame opnieuw neerzet — zie de toelichting bij `rust` in teken() daar. */ .lp-balk { position: fixed; left: 0; top: -200px; width: 320px; height: 64px; /* 44 en niet 60, sinds 14 september 2026. De balk stond boven de vaste kop (z-index 50) en dus ook boven het uitklapmenu "Verzekeringen" dat eronder hangt: je las de productenlijst met een chatbalk er dwars doorheen. Een balk die over de navigatie valt is op geen enkele pagina goed, dus hij gaat eronder. Boven de pagina-inhoud blijft hij staan (die zit op 10 en lager), en de schermen die er wél overheen horen — het chatvenster (70), het informatie- en inlogscherm (80) — stonden al hoger. Zelfde waarde bij zijn tegenhanger: .heroballk in chat.css doet hetzelfde op de hoofdpagina. */ z-index: 44; /* Het element zelf vangt niets: de vullingen en de inhoud eronder zetten hun eigen pointer-events aan zodra ze aan de beurt zijn. */ pointer-events: none; opacity: 0; /* Geen transition op opacity of op de maten: die waarden komen per frame uit het script en moeten exact volgen. */ } .lp-balk[hidden] { display: none; } /* De doos erin, apart van .lp-balk. Twee soorten verdwijnen die elkaar niet in de weg mogen zitten: de scroll zet opacity op .lp-balk zonder transition, het opengaan van het chatvenster zet .is-weg op deze doos mét transition, want dat is een gebeurtenis en geen scrollpositie. */ .lp-balk__doos { position: absolute; inset: 0; transition: opacity 180ms var(--ease), transform 180ms var(--ease); } .lp-balk__doos.is-weg { opacity: 0; transform: scale(0.96); } /* De twee vullingen. Beide dekken de hele doos en wisselen over elkaar. */ .lp-balk__vlak { position: absolute; inset: 0; border-radius: 999px; pointer-events: none; } /* De balk: hetzelfde oppervlak als het chatvenster, met opzet — het is hetzelfde gesprek en dus hetzelfde materiaal. */ .lp-balk__vlak--balk { background: var(--sumi-deep); border: 1px solid color-mix(in srgb, var(--text-invert) 14%, transparent); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38); } /* De knop. Dezelfde waarden als .pill in pagina.css. */ .lp-balk__vlak--pil { background: var(--btn-bg); box-shadow: 0 6px 24px rgba(27, 25, 24, 0.18); } /* De inhoud van de balk: klem, veld, verstuurknop. */ .lp-balk__vorm { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 8px; /* Zodat de ronde hoeken van het veld en de knop binnen de pil blijven bij de smalste maten die tijdens de reis voorbijkomen. */ overflow: hidden; } .lp-balk__vorm textarea { flex: 1 1 auto; min-width: 0; min-height: 46px; max-height: 96px; padding: 11px 16px; border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--text-invert) 7%, var(--sumi-deep)); color: var(--text-invert); font: inherit; font-size: 16px; line-height: 1.4; resize: none; overflow-y: auto; } .lp-balk__vorm textarea:focus { outline: none; } .lp-balk__vorm textarea:focus-visible { outline: 2px solid var(--shu-ink); outline-offset: 1px; } .lp-balk__vorm textarea::placeholder { color: color-mix(in srgb, var(--text-invert) 80%, transparent); opacity: 1; } /* De knop. Exact de maatvoering van .pill uit pagina.css, maar absoluut over de doos in plaats van in de tekststroom. center en niet space-between: op het eindpunt maakt het geen verschil, want dan staat de doos op de maat van de knop. Onderweg wél — met space-between zouden het label en de schijf aan weerszijden van een doos van 600 pixels staan en naar elkaar toe kruipen. Met center blijven ze als één groepje bij elkaar en krimpt alleen de vorm eromheen. */ .lp-balk__pil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 8px 8px 24px; border: 0; border-radius: 999px; background: transparent; color: var(--text-invert); font-family: inherit; font-size: var(--size-btn); font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; } .lp-balk__pil .knob { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--btn-accent); color: var(--sumi-deep); } .lp-balk__pil:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 3px; } /* De plaatshouder in de band. Houdt de ruimte bezet en is wat er gemeten wordt; te zien is hij niet. */ .lp-veld__slot { height: 66px; } /* --- 16. Geen schuifbalk in het invoerveld ------------------------------ Het veld groeit mee met wat er getypt wordt, tot 120 pixels. Tot dan valt er niets te schuiven; daarboven wel, maar dan gaat het om tekst die de bezoeker zelf net getypt heeft en die hij met het wiel, met een veeg of met de pijltjes bereikt. Hier stond eerst `scrollbar-width: thin` met een eigen kleur, om de lichte systeembalk te vermijden. Dat maakte het erger: op macOS zijn schuifbalken standaard zwevend en nemen ze geen ruimte in, maar `thin` schakelt terug naar de klassieke soort — en die houdt permanent een strook van elf pixels vrij, óók als er niets te schuiven valt. Vandaar stond er een licht staafje tegen de rand van het veld terwijl scrollHeight gelijk was aan clientHeight. Weg dus, in beide schrijfwijzen: Firefox kent ::-webkit-scrollbar niet en WebKit kende scrollbar-width lang niet. */ .lp-veld textarea, .lp-balk__vorm textarea { scrollbar-width: none; } .lp-veld textarea::-webkit-scrollbar, .lp-balk__vorm textarea::-webkit-scrollbar { width: 0; height: 0; } /* --- 17. Eén kolom in de band ------------------------------------------- Kop, antwoord en balk onder elkaar, gecentreerd — dezelfde opbouw als .hero-col op de hoofdpagina. Het heeft er twee kolommen gestaan, met het gesprek rechts van het antwoord, om de balk op ooghoogte te krijgen in plaats van onderaan een stapel. Dat werkte, maar het maakte van de band een andere pagina dan de hoofdpagina. Die herkenning weegt zwaarder: wie van de homepage komt ziet hier dezelfde bogen, dezelfde kop in het midden en dezelfde balk eronder. En de balk staat gecentreerd ook niet lager dan hij daar staat. Het gesprek op de breedte van de balk (620, blok 13) en niet breder: dat is de maat die er op de hoofdpagina een balk van maakt in plaats van een invoervak. */ .lp-hero__gesprek { display: flex; flex-direction: column; align-items: center; width: 100%; } /* De balk blijft 620, de chips eronder niet: op die breedte passen er twee op een regel en valt de derde eronder. Samen zijn ze ongeveer 750 breed, en dat past in de schil. Dus begrenst .lp-veld--hero zelf niets meer en staat de maat op de doos. */ .lp-veld--hero { width: 100%; } /* De plaatshouder waar de reizende balk op ligt, staat naast de kanaaltegels in de rij en neemt de rest van de breedte. min-width: 0, anders weigert een flexkind smaller te worden dan zijn inhoud. */ .lp-veld--hero .lp-veld__slot { flex: 1; min-width: 0; } /* De zichtbare terugval onder het gesprek: het mailadres, en WhatsApp zodra dat nummer in config.js staat. WAAROM DIE REGEL ER IS. De drie chatvelden staan `hidden` in de bron, dus zonder javascript had deze pagina geen enkele contactweg — en dat is precies wat een AI-crawler ziet. Zie terugval() in bouwscripts/maak_landingspaginas.py. Op de donkere band, dus --hero-text en niet --ink: de rest van de hero rekent op dezelfde twee tokens. */ .lp-terugval { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--hero-text); opacity: .74; } .lp-terugval a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .lp-terugval a + a { margin-left: .5em; } .lp-terugval a:hover, .lp-terugval a:focus-visible { opacity: 1; } /* --- 18. Een maat groter op een breed scherm --------------------------- De tekst stond op 18 (lopende tekst), 21 (inleiding) en 15 (het regeltje onder een kaart). Op een scherm van 1440 leest dat klein: de leeskolom is 660 pixels breed en de koppen staan op 42. Lokaal op de landingspagina's en niet in de tokens van pagina.css: die gelden ook voor de hoofdpagina, en die is niet gevraagd. Als custom property en niet per selector, zodat elk onderdeel dat --size-body al leest vanzelf meegroeit. */ @media (min-width: 1100px) { .lp-hero, .lp-hero ~ .section, .lp-chatband, .lp-slot { --size-body: 21px; --size-lead: 27px; --size-small: 18px; /* Ook de vragen in de FAQ en de tussenkoppen: die lezen --size-h3 en bleven anders op 21 staan naast een lopende tekst van 21. */ --size-h3: 26px; } /* De kop van de band mag mee omhoog: hij draagt de zoekterm en is het eerste wat er gelezen wordt. */ .lp-hero h1 { font-size: clamp(34px, 5.8vw, 80px); } .lp-hero h1.h1--lang { font-size: clamp(28px, 4.6vw, 58px); } .lp-hero h1.h1--zin { font-size: clamp(26px, 3.4vw, 46px); } /* Een maat onder --size-lead (27). De kop staat hier op tachtig; het antwoord hoefde niet mee omhoog om gelezen te worden, en kleiner laat de kop kop zijn. */ .lp-hero__antwoord { font-size: 24px; } /* En het veld in de balk, zodat die geen klein widget wordt op een pagina die verder een maat groter staat. Het veld groeit in hoogte vanzelf mee: landing.js meet de placeholder op. */ .lp-balk__vorm textarea { font-size: 19px; } } /* DE SCHIL GAAT MEE OMHOOG MET DE LETTER, en dat is niet los te zien. --max-shell staat op 1024. Op een venster van 1440 laat dat 208 pixels marge aan elke kant, en met een lopende tekst van 21 in een kolom van 679 wordt dat vijfenvijftig tekens per regel — kort, en de pagina oogt leeg terwijl de tekst juist groter is geworden. Een letter vergroten zonder de regel te verlengen maakt een pagina niet voller maar smaller. Op 1180 wordt de leeskolom 780 en zit de regel op ongeveer vijfenzestig tekens: midden in de vijftig tot vijfenzeventig die als comfortabel geldt, en de band en de rijen vullen het scherm. Alleen op de landingspagina's. De hoofdpagina heeft een eigen ritme met een carrousel en stappenkaarten die op 1024 zijn uitgemeten. */ @media (min-width: 1300px) { /* .lp-chatband staat er uitdrukkelijk bij. Hij is geen .section, dus `.lp-hero ~ .section` raakt hem niet — en zonder deze regel viel hij terug op de 1024 van pagina.css. De band liep dan wel over de volle breedte, maar het veld erin begon zeventien pixels naast de lijn waar alles erboven begint. Precies het soort verschil dat je niet benoemt maar wel ziet. */ .lp-hero, .lp-hero ~ .section, .lp-chatband, .lp-slot { --max-shell: 1180px; } } /* --- 19. De kaartenrij in het raster ----------------------------------- De rechterkolom is ongeveer 680 pixels breed. Vier kaarten naast elkaar worden daar 155 pixels, en dan breekt "Tweestapsverificatie." over drie regels. Twee op een rij is de maat die past. */ @media (min-width: 1100px) { .lp-rij__inhoud .channels, .lp-rij__inhoud .channels--drie { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } /* De drie kaarten van "Verder lezen" passen wél naast elkaar: daar is de kop kort en de regel eronder één zin. */ .lp-rij__inhoud .lp-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lp-rij__inhoud .channels:first-child { margin-top: 0; } /* --- 20. De donkere band om een chatveld ------------------------------- Het veld stond tussen de rijen in, op hetzelfde papier als de tekst eromheen: een donkere pil op een lichte sectie, die je pas zag als je erlangs scrolde. Het is het enige op die schermen waar de bezoeker iets mee kán, en dan hoort het de leesstroom even te onderbreken in plaats van erin mee te lopen. Over de volle breedte, maar vanbinnen op dezelfde lijn als alles erboven: dezelfde schil, dezelfde twee kolommen, het veld in de rechter. Een band die vanbinnen zijn eigen uitlijning verzint, is een tweede pagina in plaats van een onderbreking. */ .lp-chatband { position: relative; background: var(--sumi-deep); color: var(--text-invert); padding: clamp(44px, 5vw, 72px) var(--gutter); } /* Gecentreerd en smal: de band draagt één kop en één veld en niets anders, en die twee horen boven elkaar in het midden van de band. Op de volle schil zou het veld van 820 in een kolom van 1180 staan, met de kop ernaast links — dat is het raster van de leestekst, en die onderbreekt de band juist. */ .lp-chatband > .section__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; margin: 0 auto; width: 100%; max-width: 720px; text-align: center; } .lp-chatband .lp-veld { max-width: none; width: 100%; } /* De kop expliciet licht. pagina.css zet op h2 een eigen color (--text-primary, de inkt) en die wint van de overerving van de band — inkt op inkt, dus een kop die er wel staat maar niet te zien is. Dezelfde val als bij de h1 in de band bovenaan; vandaar deze regel én deze uitleg. */ .lp-chatband h2 { margin: 0; color: var(--text-invert); font-size: 32px; line-height: 1.12; letter-spacing: -0.02em; } /* Het veld zelf staat op de band en niet erop als losse pil: een donkere pil op een donkere band is geen veld meer. Dezelfde behandeling als de balk in de band bovenaan — de doos iets lichter dan wat eronder ligt. */ /* HIER STOND EEN EIGEN TINT van 10 procent washi, met als reden: op de band ligt geen bogenmotief onder de ruit maar de vloertekening, en een donkere ruit op een donkere band is geen ruit meer. Weg op 15 september 2026, op verzoek: één chatbalk op de hele site, en die in het hero van de hoofdpagina is de maat. Wat het vlak begrenst is nu de rand op 0,20 en de glansregel erboven — dezelfde twee die het in het hero ook doen. */ /* De startvragen: --rule is een donkere lijn en verdwijnt hier, dus een lichte rand van dezelfde sterkte. Zelfde regels als in de band bovenaan. */ .lp-chatband .lp-veld__vraag, .lp-carrousel .lp-veld__vraag { color: var(--text-invert); } .lp-chatband .lp-veld__vraag:hover, .lp-carrousel .lp-veld__vraag:hover { background: color-mix(in srgb, var(--text-invert) 18%, transparent); } .lp-chatband .lp-veld__vraag:focus-visible, .lp-carrousel .lp-veld__vraag:focus-visible { outline-color: var(--washi); } /* --- 21. Hoge kaarten over de volle breedte ----------------------------- Een andere vorm dan .channels, en voor een ander soort blok. Die rij is plat en bedoeld om overgeslagen te worden door wie er niet in staat; dit zijn kaarten met een eigen vlak, en die vragen om stuk voor stuk gelezen te worden. De ruimte tussen het pictogram en de kop is met opzet leeg. Dat is waar een pagina lucht krijgt zonder er woorden bij te zetten — en het is de plek waar later een foto of een figuur in kan, per kaart. Zie .lp-kaart__beeld hieronder. Twee lagen van hetzelfde papier, zoals de FAQ: op een ongetinte sectie staat de kaart op --surface-tint, en andersom. Geen slagschaduw: de hoofdpagina gebruikt die nergens en een kaart die zweeft leest als een ander merk. */ .lp-kaarten { display: grid; gap: var(--stack-tight); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; } @media (min-width: 760px) { .lp-kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .lp-kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Vijf profielen passen niet op vier; dan liever drie brede dan vier plus een wees. */ @media (min-width: 1100px) { .lp-kaarten:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-kaarten:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .lp-kaart { display: flex; flex-direction: column; /* De kop en de zin staan onder het pictogram, en de kaart is zo hoog als haar inhoud. Het raster rekt de kaarten van een rij alsnog gelijk, dus de rij blijft recht. 14 september 2026: hier stond `min-height: 300px` met de tekst onderaan (`justify-content: space-between`). Die lege bovenhelft was gereserveerd voor een foto per kaart — maar die foto's zijn er niet, en zolang dat zo is staat er een kaart van 300 hoog met 90 pixels tekst erin. Op verzoek dus kleiner in plaats van halfleeg. Komt er ooit een beeld (zie .lp-kaart__beeld hieronder), dan vult dat de ruimte die het nodig heeft en groeit de kaart vanzelf mee. */ gap: var(--stack-tight); padding: 28px 26px; border-radius: 18px; background: var(--surface-tint); border: 1px solid color-mix(in srgb, var(--sumi-deep) 10%, transparent); } .lp-kaart__icoon { display: block; color: var(--accent2); } .lp-kaart__kop { margin: 0 0 10px; /* Kleiner dan --size-h3 (26), en dat is gemeten en niet gevoeld. Een kaart is bij vier op een rij 281 breed, binnen de padding 229. Op 26 pixels vet is "Tweestapsverificatie" ongeveer 270 breed: dat past niet, en pagina.css zet `hyphens: auto` op elke h3 — dus werd het "Tweestapsverifi-catie". Op 20 past het langste samengestelde woord dat deze pagina's kennen er wél in. */ font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--text-primary); /* En geen streepje meer, ook niet als er ooit toch een langer woord komt: dan breekt het zonder, wat lelijker maar eerlijker is. */ hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; } .lp-kaart__zin { margin: 0; font-size: var(--size-small); line-height: 1.6; color: var(--sumi-light); } /* De plek voor een beeld in een kaart. Er staat er vandaag geen; de regel staat er zodat er een in kán zonder dat de vorm verandert. Vul in producten.py het vierde veld van een kaart met een bestandsnaam onder site/afbeelding/ en de generator zet hem hier neer. */ .lp-kaart__beeld { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: 12px; } /* --- 22. Een beeld naast de tekst -------------------------------------- De tweede vorm uit de referentie: kop en tekst links, een beeld rechts. Het raster doet het werk — dit zegt alleen hoe het beeld eruitziet. Er staat vandaag geen foto op deze pagina's, en dat is met opzet: een zichtbare plaatshouder zet de pagina op noindex (hoofdstuk 6), en een stockfoto zegt niets over Ōmata. De vorm staat er zodat een echte foto erin kan zonder dat er iets aan de opbouw verandert: zet `beeld` in producten.py op (bestandsnaam, alt-tekst) en de generator doet de rest. Zelfde hoeken en dezelfde verhouding als het gespreksbeeld ernaast, want dat is het andere beeld op deze pagina en die twee horen familie te zijn. */ .lp-beeld { margin: var(--stack) 0 0; } .lp-beeld img { display: block; width: 100%; height: auto; border-radius: 18px; } /* --- 23. Wat de overdracht van 14 september 2026 hier nog nodig had ----- site/glas.css en site/landing-glas.css komen uit die overdracht en zijn ongewijzigd overgenomen. Dit blok is wat daar niet in staat: de dingen die alleen bestaan omdat deze pagina gegenereerd wordt uit het skelet hierboven. Geen enkele waarde hier is verzonnen; ze komen uit de tokens of uit README.md van de overdracht. --------------------------------------------------------------------- */ /* Het vloervlak ligt absoluut in zijn sectie, dus die sectie moet het ankerpunt zijn. landing-glas.css zet er overflow: hidden op maar geen position — zonder deze regel valt de svg terug op de dichtstbijzijnde voorouder die wél gepositioneerd is, en dat is . */ /* DE BAND KLIKT VAST, ZODAT DE BALK ER NIET HALF UIT HANGT. pagina.css zet al `scroll-snap-type: y proximity` op html, en zegt erbij dat die regel niets doet zolang er nergens een vastklikpunt staat. Dit is dat punt, en het staat er om één reden: scroll je terug naar boven, dan komt de pagina niet halverwege de band tot stilstand maar netjes aan het begin ervan. De balk staat daarmee altijd óf op zijn plek in de band, óf als knop in de hoek — nooit ergens halverwege zijn reis. Proximity en niet mandatory: mandatory zou elke scrollbeweging in de buurt naar dit punt trekken, ook wanneer iemand juist verder omlaag wil. Eén punt op de hele pagina, aan het begin; de rest scrolt gewoon. */ .lp-hero { scroll-snap-align: start; } [data-vloer] { position: relative; } /* DE MAAT VAN DE BALK, ÉÉN KEER. Dezelfde twee getallen die landing-glas.css op .lp-balkrij zet (820, en 640 onder 900 pixels), maar als token, zodat het antwoord in de band er dezelfde rand aan kan ontlenen. Twee plekken die hetzelfde getal los van elkaar opschrijven, lopen uiteen; één token kan dat niet. De regel hieronder overschrijft die van landing-glas.css met twee klassen, want dat bestand laadt later. */ :root { --lp-balkmaat: 820px; } @media (max-width: 899px) { :root { --lp-balkmaat: 640px; } } .lp-veld .lp-balkrij { max-width: var(--lp-balkmaat); } /* De carrousel. De twee tekstpagina's. De maten staan in de overdracht: de kop van de aankondiging op 34 tot 54, de kop boven het veld op 34. Ze staan hier en niet in landing-glas.css omdat pagina.css op elke h2 een eigen color en een eigen font-size zet, en die winnen van de overerving van de band — inkt op inkt, een kop die er wel staat maar niet te zien is. Dezelfde val als bij de h1 in de band bovenaan; vandaar deze regel én deze uitleg. */ .lp-carrousel h2 { margin: 0; color: var(--hero-text); line-height: 1.1; letter-spacing: -0.025em; hyphens: none; -webkit-hyphens: none; } /* 26ch van de kop en niet van de lopende tekst. `ch` rekent met de lettergrootte van het element zelf: op de 21 van de body is 26ch tweehonderdzeventig pixels en breekt "Zo ziet een gesprek met Ōmata eruit" over twee regels. De font-size hier zet de maat waarin dat getal bedoeld is; de kop en de regel eronder zetten daarna hun eigen grootte. */ .lp-carrousel__aankondiging { max-width: 26ch; font-size: clamp(34px, 3.8vw, 54px); } .lp-carrousel__aankondiging h2 { font-size: clamp(34px, 3.8vw, 54px); } .lp-carrousel__aankondiging p { margin: 18px 0 0; font-size: 19px; line-height: 1.6; color: color-mix(in srgb, var(--hero-text) 78%, transparent); } .lp-carrousel__proef { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; } .lp-carrousel__proef h2 { font-size: 34px; letter-spacing: -0.02em; } .lp-carrousel .lp-veld { width: 100%; } /* Het gespreksvenster staat op de tweede pagina en vult daar zijn maat; landing-glas.css zet er de rand, de hoeken en de schaduw op. */ /* Links uitgelijnd: het venster staat in de carrousel, en die centreert alles. Een gesprek met gecentreerde ballonnen is geen gesprek meer. */ .lp-gesprek { width: 100%; text-align: left; } /* De twee panelen. landing-glas.css draagt de vorm; dit is wat een lijst in html zelf meebrengt en wat een standaard doet. */ .lp-paneel__lijst { margin: 0; padding: 0; list-style: none; } .lp-item__tekst { flex: 1; min-width: 0; } .lp-item > details > summary::marker { content: ""; } .lp-paneel h2 { hyphens: none; -webkit-hyphens: none; } /* Wat de prijs bepaalt: per punt het pictogram, de naam en één regel. */ .lp-prijs li { display: flex; flex-direction: column; gap: 8px; } .lp-prijs__naam { font-size: 19px; font-weight: 600; color: var(--text-primary); } .lp-prijs__note { margin: 0; font-size: var(--size-small); line-height: 1.5; color: var(--sumi-light); } .lp-prijs__kop h2 { margin: 0 0 14px; } /* Verder lezen, over de volle schil en niet in de rechterkolom. */ .lp-verder h2 { margin: 0 0 28px; } .lp-links a { border-radius: 28px; padding: 28px 30px; } @media (min-width: 720px) { .lp-links { gap: 18px; } } /* OP EEN TELEFOON GAAN DE KANAALTEGELS ONDER DE BALK. Naast de balk kosten ze zesenvijftig pixels plus de tussenruimte, en op een scherm van 375 blijft er dan zo weinig over dat de placeholder over drie regels breekt. Onder de balk als rij: beide wegen blijven staan en het veld houdt zijn breedte. De overdracht zegt hier niets over; dit is de enige maat waarop de vorm uit §8 niet past. */ @media (max-width: 560px) { .lp-balkrij { flex-wrap: wrap; } /* flex-basis 100% en niet alleen flex-wrap: de balk heeft flex: 1 met min-width: 0 en krimpt dus liever dan dat hij een regel opschuift. */ .lp-balkrij > .lp-veld__doos, .lp-balkrij > .lp-veld__slot { flex: 1 1 100%; } /* Twee selectorklassen, want landing-glas.css zet hier flex-direction: column en width: 56px met één klasse, en dat bestand laadt later. */ .lp-balkrij .lp-kanalen { flex-direction: row; width: 100%; } .lp-balkrij .lp-kanaal { min-height: 44px; } } /* OP EEN BAND IS DE BALK EEN MAAT KLEINER DAN IN DE HERO. In de band bovenaan is de balk het enige waar de bezoeker iets mee kan en deelt hij zijn breedte met het antwoord erboven; daar hoort hij groot. In de chatband en op de derde carrouselpagina is hij een herhaling — een tweede en een derde kans, geen aankondiging — en dan mag hij rustiger. Dezelfde regels voor allebei: twee maten van hetzelfde onderdeel op één pagina is een keuze, drie is een ongeluk. */ .lp-chatband .lp-balkrij, .lp-carrousel .lp-balkrij { max-width: 620px; } .lp-chatband .lp-veld__klem, .lp-chatband .lp-veld__stuur, .lp-carrousel .lp-veld__klem, .lp-carrousel .lp-veld__stuur { width: 40px; height: 40px; } .lp-chatband .lp-veld__doos, .lp-carrousel .lp-veld__doos { gap: 8px; padding: 8px; border-radius: 20px; } .lp-chatband .lp-veld textarea, .lp-carrousel .lp-veld textarea { min-height: 40px; padding: 10px 14px; font-size: 17px; } .lp-chatband .lp-kanalen, .lp-carrousel .lp-kanalen { width: 48px; } /* De startvragen mee omlaag. Niet verder: vijftien pixels is de ondergrens waarop een label nog als knoptekst leest, en de knoppen blijven ruim boven de vierentwintig pixels die WCAG 2.2 voor een doelgebied vraagt — de tegels 40 bij 40, de chips 31 hoog bij deze padding. */ .lp-chatband .lp-veld__vraag, .lp-carrousel .lp-veld__vraag { font-size: 15px; padding: 7px 13px; } /* De reizende balk krijgt dezelfde ruit als het veld waar hij uit vertrekt, en dezelfde hoeken. Zonder dit vertrekt hij als een dekkende pil uit een matglazen balk, en dat is te zien op het moment dat hij loskomt. */ .lp-balk__vlak--balk { border-radius: 22px; /* Stond op --glas-donker (dekking 0,50). Nu doorzichtig, zoals elke chatbalk op de site; zie --balk-vlak in pagina.css. */ 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 KNOP RECHTSONDER IS OOK EEN RUIT. Uitdrukkelijk gevraagd op 14 september 2026, en dat wijkt af van §2 van de overdracht ("de pil zelf blijft dekkend"). De reden die daar stond, blijft waar: een bedieningselement op glas laat zijn leesbaarheid afhangen van wat er toevallig achter ligt. Dus is de dekking berekend en niet gekozen. De letter in de knop is --text-invert (220,232,207) en de ruit is de hero-sluier (24,32,25). Gemeten over de drie lichtste ondergronden die deze knop op zijn reis passeert — het papier, een getinte sectie, en een matglazen kaart daarop: dekking 0,52 3,24 3,00 2,95 te weinig dekking 0,60 4,06 3,80 3,74 te weinig dekking 0,65 4,70 4,43 4,37 net te weinig dekking 0,68 5,15 4,87 4,81 haalt overal 4,5:1 dekking 0,72 5,82 5,54 5,48 0,68 is dus de laagste waarde waarop de tekst op élke ondergrond van deze pagina de 4,5:1 van WCAG AA haalt. Lager mag niet zonder de letter te wijzigen; hoger mag, maar dan is er minder glas te zien. De blur en de verzadiging zijn die van de rest van de pagina, en de rand en de glansregel komen van .glas--donker — dus dezelfde ruit als de chatbalk, alleen dichter. */ .lp-balk__vlak--pil { background: rgba(var(--hero-veil-rgb), 0.68); border: 1px solid var(--glas-rand-donker); box-shadow: var(--glas-glans-donker), 0 6px 24px rgba(27, 25, 24, 0.18); backdrop-filter: blur(var(--glas-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(140%); } /* Zonder backdrop-filter is een halfdoorschijnend vlak onrustig; dan de dekking omhoog in plaats van de blur missen. Zelfde keuze als onderaan glas.css. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lp-balk__vlak--pil { background: rgba(var(--hero-veil-rgb), 0.92); } } .lp-balk__vorm { gap: 8px; padding: 10px 10px 10px 8px; } .lp-balk__vorm textarea { border-radius: 14px; background: var(--balk-vlak); } /* --- 24. Het huisje in de balk ------------------------------------------ Alleen op een landingspagina. Het woordmerk ging tot 14 september 2026 naar de hoofdpagina; het gaat nu naar de bovenkant van de pagina waar je op staat, en dit is de weg terug. Vorm, padding en focusring van .navbar__burger in pagina.css — het staat ernaast en het is hetzelfde soort knop — maar dan altijd zichtbaar, en op een donkere band in de kleur van de hero, net als de andere onderdelen van de balk daar. */ .navbar__thuis { display: inline-flex; align-items: center; justify-content: center; padding: 8px; color: var(--text-primary); text-decoration: none; } .navbar__thuis:hover { color: var(--shu-deep); } .navbar__thuis:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; } html[data-hero="donker"] .navbar[data-over-hero="true"] .navbar__thuis { color: var(--hero-text); }