/* =========================================================================== Nieuwe opmaak voor de landingspagina's. Ná pagina.css en landing.css laden, of de blokken hieronder daarin opnemen. Alle kleuren komen uit de tokens; de glaswaarden staan in glas.css uit de vorige overdracht. =========================================================================== */ /* --- ritme ------------------------------------------------------------- */ .lp-hero ~ .section { --section-pad-y: clamp(88px, 10vw, 152px); } .lp-hero ~ .section > .section__inner { gap: calc(var(--stack) * 1.6); } /* VASTE WITRUIMTEREGEL: NA EEN KAARTENRIJ MEER LUCHT DAN NA EEN ALINEA. De sectie zet de afstand tussen al haar blokken op --stack x 1,6 (zie landing.css). Dat klopt tussen twee stukken tekst, en niet onder een kaartenrij: een kaart is een eigen vlak met een rand en een schaduw, en een kop die daar op leesafstand onder staat leest als een bijschrift bij de kaarten in plaats van als een nieuw blok. DIT HING AAN EEN KLASSE die de bouw moest meegeven (.lp-rij--na-kaarten, via na_kaarten=True), en dus aan onthouden. "Voor wie dit niet is" kreeg hem wel; de kop "NIS2: levert u aan een groter bedrijf?" niet, en die plakte tegen de kaarten erboven. Sinds 16 september 2026 hangt de regel aan de buur: elk blok dat onder een kaartenrij komt te staan krijgt de lucht, ook een soort blok dat nog niet bestaat. Er valt niets te vergeten, want er is niets meer om te onthouden. Marges op een rasterkind tellen bij de gap op, dus dit komt bovenop de 57,6 van de sectie: 122 op een breed scherm, 92 op een telefoon. */ .lp-kaarten + * { margin-top: 64px; } @media (max-width: 900px) { .lp-kaarten + * { margin-top: 34px; } } /* DE BLOKGRENS, ÉÉN MAAT. De sectie zet 58 pixels tussen al haar kinderen (--stack x 1,6 in landing.css). Dat is het ritme bínnen een blok: tussen een aanloop en haar kaartenrij, tussen een opsomming en haar slotwoord. Tussen twee blokken is het te weinig — de kop van het volgende blok las als een tussenkopje van het vorige, en dat was het meest zichtbaar waar een blok op een rij zonder kop eindigt: dan staat er niets tussen het slotwoord en de volgende kop. 64 erbovenop maakt elke blokgrens 122 pixels, precies dezelfde maat die .lp-kaarten + * hierboven al gaf. Eén getal voor één soort overgang, dus ook waar een blok ná een kaartenrij begint verandert er niets en stapelen de twee regels niet: ze zetten allebei margin-top op dezelfde waarde. De klasse komt van de bouw en niet van een selector, want het css kan een blokgrens niet zien; zie blokgrens() in bouwscripts/maak_landingspaginas.py. De hiërarchie die hieruit volgt: binnen een blok 58 aanloop naar kaarten 82 tussen twee blokken 122 tussen twee secties 176 (de padding van .section) */ .lp-blok { margin-top: 64px; } @media (max-width: 900px) { .lp-blok { margin-top: 34px; } } /* --- kaartenrij: flex, zodat een laatste rij gecentreerd staat --------- */ /* LUCHT BOVEN DE KAARTENRIJ, minder dan eronder. De sectie gaf 58 pixels en dat is te krap: de kaarten begonnen vlak onder de aanloop en de rij las als een vervolg van die alinea in plaats van als een eigen blok. Met 24 erbij staat de rij op 82. MINDER DAN DE 122 ERONDER (.lp-kaarten + * hierboven), en die asymmetrie is het punt. Boven de rij staat de aanloop die de kaarten aankondigt en er dus bij hoort; eronder begint een nieuwe gedachte. Gelijke afstanden maken van de kaartenrij iets dat tussen twee blokken zweeft. DE MARGE STAAT HIER EN NIET IN EEN EIGEN REGEL BOVENAAN. Daar stond hij even, en hij deed niets: deze regel zet `margin` en staat later in hetzelfde bestand, dus bij gelijke specificiteit won de nul. Eén plek die de marge van de kaartenrij zet, en dit is ze. */ .lp-kaarten { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--stack-tight); margin: 24px 0 0; padding: 0; list-style: none; } @media (max-width: 900px) { .lp-kaarten { margin-top: 14px; } } /* Een kaartenrij die als eerste in haar sectie staat heeft geen aanloop boven zich; daar zet de sectiepadding de maat al. */ .section__inner > .lp-kaarten:first-child { margin-top: 0; } .lp-kaart { flex: 1 1 calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); /* GEEN min-height MEER. Die stond hier op 300 pixels, en dit bestand laadt ná landing.css — waar de maat op 14 september 2026 al geschrapt is, met de reden erbij: de lege bovenhelft was gereserveerd voor een foto per kaart, die foto's zijn er niet, en dan staat er een kaart van 300 hoog met negentig pixels tekst erin. Die schrapping greep dus nooit, want deze regel overschreef hem stil. De kaart is nu zo hoog als haar inhoud; de rij houdt gelijke hoogtes van de flexrij hierboven, dus ze blijft recht. Komt er ooit een beeld per kaart (.lp-kaart__beeld in landing.css), dan groeit de kaart mee. */ padding: 28px 26px; border-radius: 28px; } .lp-kaarten--vier .lp-kaart { flex-basis: calc((100% - 54px) / 4); max-width: calc((100% - 54px) / 4); } @media (max-width: 1099px) { .lp-kaart, .lp-kaarten--vier .lp-kaart { flex-basis: calc((100% - 18px) / 2); max-width: calc((100% - 18px) / 2); } } @media (max-width: 759px) { .lp-kaart, .lp-kaarten--vier .lp-kaart { flex-basis: 100%; max-width: 100%; } } /* --- dekt / niet dekt, twee panelen ------------------------------------ */ /* minmax(0, 1fr) EN NIET DE IMPLICIETE KOLOM, 17 september 2026. Hier stond geen grid-template-columns voor één kolom, en dan sizet de browser die kolom op `auto`: zo breed als de inhoud minstens nodig heeft. Nagemeten op /bestuurdersaansprakelijkheid/ bij een venster van 375: de kaart werd 478 breed. Eén woord deed dat — "bestuurdersaansprakelijkheid" is bij 28px kopmaat 376 pixels en breekt niet, en een auto-kolom groeit mee tot dat woord past. Wat je daarvan ziet is niet de kaart maar de hele pagina: body wordt 502 breed in een venster van 375, en dan mag er horizontaal gescrold en dus uitgezoomd worden. De lichte strook rechts naast het hero op een telefoon was dit. De tweekolomsstand hiernaast had het al goed. Nu beide, en dan kan geen enkel woord de kolom nog breder maken dan de sectie waar ze in staat — het breken gebeurt in de kop zelf, zie .lp-paneel__kop h2 hieronder. */ .lp-dekking { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; } @media (min-width: 900px) { .lp-dekking { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lp-paneel { padding: 30px 32px; border-radius: 28px; } .lp-paneel--wel { box-shadow: inset 0 3px 0 var(--shu), var(--glas-glans), var(--glas-schaduw); } .lp-paneel--niet { box-shadow: inset 0 3px 0 color-mix(in srgb, var(--sumi-light) 60%, transparent), var(--glas-glans), var(--glas-schaduw); } .lp-paneel__kop { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } /* EN HET WOORD MAG BREKEN. De kolom kan niet meer groeien (zie hierboven), dus zonder dit loopt "bestuurdersaansprakelijkheid" gewoon over de rand van de kaart. hyphens eerst: Nederlands heeft een woordafbreekwwoordenboek in Safari en Chrome, en "bestuurders-aansprakelijkheid" leest als taal. break-word is de terugval waar dat woordenboek er niet is: dan breekt het zonder streepje, en dat is nog altijd beter dan buiten de kaart. */ .lp-paneel__kop h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; hyphens: auto; overflow-wrap: break-word; } .lp-paneel__chip { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; font-size: 17px; font-weight: 700; line-height: 1; } .lp-paneel--wel .lp-paneel__chip { background: var(--shu); color: var(--washi); } .lp-paneel--niet .lp-paneel__chip { background: color-mix(in srgb, var(--sumi-light) 18%, transparent); color: var(--sumi); } .lp-paneel__lead { margin: 0 0 20px; font-size: 19px; line-height: 1.6; } .lp-item { padding: 13px 0; border-top: 1px solid var(--rule); } .lp-item summary { display: flex; gap: 10px; align-items: baseline; cursor: pointer; list-style: none; } .lp-item summary::-webkit-details-marker { display: none; } .lp-item__teken { flex: none; font-weight: 700; } .lp-paneel--wel .lp-item__teken { color: var(--shu-deep); } .lp-paneel--niet .lp-item__teken { color: var(--sumi-light); } .lp-item__naam { display: block; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--text-primary); } .lp-item__kort { display: block; margin-top: 3px; font-size: 18px; line-height: 1.5; color: var(--sumi-light); } .lp-item__rest { margin: 8px 0 0 24px; font-size: 18px; line-height: 1.6; color: var(--sumi-light); } .lp-item__chev { flex: none; margin-top: 4px; transition: transform 0.2s var(--ease); } .lp-item[open] .lp-item__chev { transform: rotate(180deg); } /* --- prijsfactoren, gecentreerd ---------------------------------------- */ .lp-prijs__kop { max-width: 56ch; margin: 0 auto; text-align: center; } /* DE 52 PIXELS BOVEN DE TEGELS ZIJN WEG. Ze zijn van vóór de gap op de sectie en kwamen daar bovenop: de kop stond 110 pixels van haar eigen tegelrij, terwijl een blokgrens 122 is. Een afstand binnen een blok die bijna gelijk is aan de afstand tussen twee blokken maakt dat onderscheid onleesbaar, en dat onderscheid is precies waar de hiërarchie op rust (zie .lp-blok hierboven). Nu 58, de gewone maat binnen een blok. */ .lp-prijs { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 899px) { .lp-prijs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 559px) { .lp-prijs { grid-template-columns: 1fr; } } .lp-prijs__icoon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent2) 16%, transparent); color: var(--accent2); } /* --- chatbalk ----------------------------------------------------------- */ .lp-balkrij { display: flex; align-items: stretch; gap: 10px; width: 100%; max-width: 820px; } @media (max-width: 899px) { .lp-balkrij { max-width: 640px; } } .lp-veld__doos { flex: 1; min-width: 0; gap: 10px; padding: 10px; border-radius: 22px; } /* DOORZICHTIG, NIET DE 0,50 VAN .glas--donker, 15 september 2026. De doos draagt in de bron `class="lp-veld__doos glas glas--donker"`, en glas.css laadt ná landing.css: zonder deze regel wint de dekking van 0,50 uit dat bestand van de doorzichtige balk die landing.css zet, en dan is deze balk een vlak terwijl die op de hoofdpagina een ruit is. Op de hoofdpagina speelt dat niet, want daar laadt carrousel.css er weer na. */ .lp-veld__doos { background: var(--balk-vlak); } .lp-veld__klem { width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--text-invert) 12%, transparent); } .lp-veld__klem:hover { background: color-mix(in srgb, var(--text-invert) 20%, transparent); } /* Het invoerveld doorzichtig, zoals elke chatbalk sinds 15 september 2026. De ruit eromheen (.lp-veld__doos) houdt zijn lichte tint van 10 procent: die staat hier op een donkere band en niet op het motief, en zonder haar is er niets meer dat het bedieningselement begrenst — de rand alleen haalt 0,14 dekking, ver onder de 3:1 die WCAG daarvoor vraagt. */ .lp-veld textarea { border-radius: 14px; background: var(--balk-vlak); padding: 13px 16px; } .lp-veld__stuur { width: 46px; height: 46px; } .lp-kanalen { display: flex; flex-direction: column; gap: 8px; flex: none; width: 56px; } .lp-kanaal { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--washi) 30%, transparent); background: color-mix(in srgb, var(--washi) 8%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-invert); text-decoration: none; } .lp-veld__vraag { border-radius: 14px; border: 1px solid color-mix(in srgb, var(--washi) 30%, transparent); background: color-mix(in srgb, var(--washi) 8%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 8px 15px; font-size: 16px; } /* --- carrousel ---------------------------------------------------------- */ .lp-carrousel { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-text); padding: clamp(64px, 7.5vw, 108px) var(--gutter) clamp(48px, 5vw, 72px); } .lp-carrousel__veld { position: relative; margin: 0 auto; width: 100%; max-width: var(--max-shell); min-height: 520px; text-align: center; } @media (max-width: 899px) { .lp-carrousel__veld { min-height: 460px; } } .lp-carrousel__pagina { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; transition: opacity 380ms var(--ease), transform 520ms var(--ease), visibility 0s linear 0.38s; } /* Alle pagina's blijven in de bron staan; alleen de zichtbaarheid wisselt. Zie de toelichting bij .lp-gesprek en terugval() in landing.css. */ /* DE EERSTE PAGINA STAAT IN DE STROOM, DE ANDERE LIGGEN EROVER. De hoogte van de band moet van de inhoud komen en niet van een getal. Pagina één draagt sinds 16 september 2026 de kop én het gespreksbeeld, en hoe hoog dat uitkomt hangt af van het aantal berichten in het gesprek — dat verschilt per product — en van de taal, want een Franse zin loopt over meer regels. Eén vaste min-height klopt dan op één pagina en knelt op de achttien andere. Vandaar: pagina één houdt haar plek in de stroom en zet daarmee de hoogte, ook wanneer ze verborgen is — het is visibility en niet display, dus de ruimte blijft staan en de band springt niet bij het vegen. De rest ligt er absoluut over en rekt mee. De min-height hierboven blijft de ondergrens voor een kort gesprek. */ .lp-carrousel__pagina:first-child { position: relative; } .lp-carrousel__pagina[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; } .lp-carrousel__pagina[aria-hidden="true"].is-voor { transform: translateX(-4%); } .lp-carrousel__pagina[aria-hidden="true"].is-na { transform: translateX(4%); } .lp-carrousel__pagina[aria-hidden="false"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .lp-carrousel__pijl { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--washi) 24%, transparent); background: color-mix(in srgb, var(--washi) 8%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--text-invert); cursor: pointer; } .lp-carrousel__pijl--vorige { left: 28px; } .lp-carrousel__pijl--volgende { right: 28px; } /* DE TIKZONE IS GROTER DAN DE SCHIJF. Achtenveertig pixels is de ondergrens voor een vinger en niet meer dan dat; wie ernaast tikt, ziet niets gebeuren. De zone groeit daarom 28 naar boven, 28 naar onderen en 28 naar de schermrand toe — allemaal leegte waar toch niets anders staat. NAAR BINNEN NIET. Daar begint op de laatste pagina van de band het chatveld (.lp-balkrij, max 820 breed en gecentreerd), en rond de negenhonderd pixels raakt dat bijna aan de pijl. Een tik die in het veld hoort te landen mag geen pagina omslaan. Een ::after en geen padding: de schijf zelf blijft 48 bij 48. GEVOLG OP EEN MUISPAGINA: :hover vuurt ook vanaf de halo, want die is een kind van de knop. De schijf licht dus op zodra de muis in de buurt komt. Dat is hier de bedoeling — het wijst de zone aan die je kunt raken. Moet het alleen op een vinger gelden, dan hoort dit blok in @media (hover: none). */ .lp-carrousel__pijl::after { content: ''; position: absolute; inset: -28px 0; } .lp-carrousel__pijl--vorige::after { left: -28px; } .lp-carrousel__pijl--volgende::after { right: -28px; } @media (max-width: 899px) { .lp-carrousel__pijl--vorige { left: 10px; } .lp-carrousel__pijl--volgende { right: 10px; } } /* EN OP EEN TELEFOON GROEIT DE ZONE NIET NAAR BOVEN EN ONDEREN, 17 september 2026. "Allemaal leegte waar toch niets anders staat" hierboven gold voor een breed scherm en klopte niet meer op een smal. Nagemeten op /bestuurdersaansprakelijkheid/ bij 375 breed, met elementFromPoint op de hoeken van elke chip: de bovenkant van "Welk verzekerd bedrag heb ik nodig?" gaf .lp-carrousel__pijl terug en niet de chip. Die chip is daar 282 breed en de startvragen staan in drie rijen onder het veld; de pijlen staan op halve hoogte van de band en hun halo van 28 reikt tot in de eerste twee rijen. Wie de vraag aantikte, sloeg een pagina om. Zes en niet nul: de schijf blijft 48 bij 48 en dat is de ondergrens voor een vinger, dus de zone hoeft niet te groeien — zes pixels dekken alleen het onnauwkeurige van een tik op de rand af. Zijwaarts blijft de 28 staan: daar staat wél niets, en de pijl staat op een telefoon op 10 van de rand. Dit blok staat in carrousel.css én in landing-glas.css, byte voor byte hetzelfde: de productpagina's laden het tweede bestand en niet het eerste. Wijzig je hier iets, wijzig het daar mee. */ @media (max-width: 720px) { .lp-carrousel__pijl::after { inset: -6px 0; } /* EN OP EEN TELEFOON STAAN DE PIJLEN ONDERAAN, 18 september 2026. Op halve hoogte van de band vielen ze midden in het chatveld: op /fr/cyberverzekering/ bij 390 breed staat het veld van 511 tot 625 en stond de pijl van 605 tot 653 — de schijf lag dus over de onderrand van het veld en over de startvragen eronder. Op een breed scherm is daar ruimte tussen en hoort de pijl naast de band; hier is er niets tussen. Onderaan is die ruimte er wel: de band heeft 48 pixels padding onder de stippen, op elke pagina en in elke taal nagemeten. Daarin passen de twee schijven van 48 precies, links en rechts van de stippenrij — één rij bediening in plaats van twee dingen die elkaar in de weg zitten. 28 is die padding van 48, plus de helft van de stip (4), min de helft van de schijf (24): dan staat de pijl op dezelfde hoogte als de stippen. De stippen zelf staan gecentreerd en zijn samen een goede veertig pixels breed, dus ze raken de schijven niet. Dit blok staat in carrousel.css én in landing-glas.css, byte voor byte hetzelfde: de productpagina's laden het tweede bestand en niet het eerste. Wijzig je hier iets, wijzig het daar mee. */ .lp-carrousel__pijl { top: auto; bottom: 28px; transform: none; } } .lp-carrousel__stippen { position: relative; z-index: 2; display: flex; justify-content: center; gap: 10px; margin-top: 36px; } .lp-carrousel__stip { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--washi) 32%, transparent); cursor: pointer; transition: width 200ms var(--ease), background-color 200ms var(--ease); } .lp-carrousel__stip[aria-selected="true"] { width: 28px; background: var(--accent2); } /* HET TIKOPPERVLAK IS GROTER DAN DE STIP, sinds 18 september 2026. De stip is met opzet 8 bij 8: dat is de vormgeving, en die blijft. Maar 8 bij 8 is als tikdoel te klein — WCAG 2.2 SC 2.5.8 vraagt 24 bij 24, en site/pagina.css:2200 doet dezelfde component wél op 32. Vandaar een ::after dat het doel oprekt zonder één pixel van de stip te verplaatsen. DE MATEN, en waarom precies deze. Verticaal staat er niets naast, dus daar kan het vol 24 worden (-8 boven en onder bij een stip van 8). Horizontaal is de ruimte per stip haar eigen breedte plus de gap van 10, dus `calc(100% + 10px)`: de doelen van twee buren raken elkaar dan en overlappen niet. Dat geldt ook voor de geselecteerde stip, die 28 breed is — een vaste breedte zou daar overlappen. WAT DIT NIET HAALT, en dat hoort er eerlijk bij: 18 bij 24 is geen 24 bij 24, en de uitzondering voor kleine doelen in 2.5.8 vraagt dat een cirkel van 24 rond het doel geen andere raakt — met 18 pixels tussen de middelpunten lukt dat niet. Vol conform worden vraagt een grotere gap, en dat is een zichtbare wijziging aan de rij. Dit is de onzichtbare helft. */ .lp-carrousel__stip { position: relative; } .lp-carrousel__stip::after { content: ''; position: absolute; top: -8px; bottom: -8px; left: -5px; width: calc(100% + 10px); } /* STOND HIER NIET, en in site/carrousel.css:436 wél: de stippen op de landingspagina's waren met een toetsenbord niet te zien zodra ze focus kregen. Letterlijk dezelfde regel als de tweeling. */ .lp-carrousel__stip:focus-visible { outline: 2px solid var(--washi); outline-offset: 3px; } .lp-gesprek { max-width: 640px; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--washi) 12%, transparent); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42); } /* --- het vloervlak ------------------------------------------------------ */ .lp-vloer { position: absolute; left: 0; top: 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.92) 34%, rgba(0,0,0,0.62) 58%, rgba(0,0,0,0.18) 74%, rgba(0,0,0,0) 86%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.92) 34%, rgba(0,0,0,0.62) 58%, rgba(0,0,0,0.18) 74%, rgba(0,0,0,0) 86%); } [data-vloer] { overflow: hidden; } [data-vloer] > .section__inner, [data-vloer] > .lp-carrousel__veld { position: relative; } /* =========================================================================== HET CHATKADER IN DE CARROUSEL BLIJFT OP EEN TELEFOON EEN VLAK, 17 september 2026, op verzoek. Wat er gebeurde. De twee pagina's van de band ("Zo ziet een gesprek met Ōmata eruit" en "Probeer het zelf") liggen met inset: 0 op elkaar en wisselen met een overvloeier van 380ms; halverwege staan ze dus beide op ongeveer een halve dekking. Het chatkader daarbinnen is een ruit zonder vulling — alleen een rand en een blur eronder (zie --balk-vlak in pagina.css) — en de helft van een rand is bijna niets. Op dat kruispunt was het kader weg. Op een breed scherm gaat dat op: daar duurt dezelfde overvloeier evenveel maar is het kader groter, en een muisklik op een pijl is één gebeurtenis waar je niet in blijft hangen. Een veeg op een telefoon is dat wel — de vinger bepaalt het tempo, en die kan midden in de overgang stilstaan. De vulling hier is niet nieuw bedacht: het is dezelfde waarde die dit bestand al voorschrijft voor een browser zonder backdrop-filter (zie het @supports-blok), met dezelfde reden erbij — zonder blur is een doorzichtige ruit geen ruit maar een gat, en dan liever dekking dan niets. Ze mengt met --hero-bg en volgt dus de tint van de pagina waar ze op staat. Alleen in de carrousel en niet op --balk-vlak zelf: dat token draagt ook de balk in het hero en de reizende balk, en die staan niet in een overvloeier. Wat daar niet stuk is, hoeft hier niet mee te veranderen. ========================================================================= */ @media (max-width: 720px) { .lp-carrousel .lp-veld__doos { background: color-mix(in srgb, var(--washi) 18%, var(--hero-bg)); } }