/** Veelgestelde vragen. Gekoppeld via block.json. */ /* ⚠️ TWEE KLASSEN, en dat is hier het werkende deel. Met alleen `.dle-faq` stond deze lijst op de volle 1148px in plaats van 840: WordPress zet `.is-layout-constrained > :where(…){max-width:var(--content-size)}` en dat is óók (0,1,0), maar het staat later in de bronvolgorde. Gemeten: computed max-width was 1148px, niet 820px. Dit is HANDOVER landmine #15, hier voor de vijfde keer. 840px komt uit het prototype (`.faq{max-width:840px}`). Een vraag-en-antwoord lees je regel voor regel; op 1148px wordt een antwoord een regel van ruim 140 tekens en verlies je de volgende regel bij het terugspringen. */ .wp-block-dle-faq.dle-faq { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); max-width: 840px; } /* ⚠️ 24-08-2026 (HANDOVER #111, P2 uit de externe audit): had hier `backdrop-filter` (17-08-2026, op Amins verzoek voor dezelfde glastaal als de rest van de site) — maar deze rijen rusten plat op de sectie- achtergrond (`zand-100`), geen foto of ander vlak erachter om te blurren. Vereenvoudigd: `backdrop-filter` weg, de doorschijnende tint + rand + gelaagde schaduw blijven (iets dekkender: .6 → .82, zodat het paneel zonder de saturate-boost van de blur nog steeds duidelijk als een eigen, licht vlak leest). Zelfde afweging als #109 (mobiele actiebalk, DAAR bleef de blur — echte scrollende inhoud erachter) en #110 (Waarom-paneel). */ .dle-faq__item { position: relative; background: rgba( 255, 255, 255, .82 ); border: 1px solid rgba( 255, 255, 255, .7 ); border-radius: var(--wp--custom--radius--lg); overflow: hidden; box-shadow: 0 16px 32px -22px rgba( 28, 27, 24, .22 ), 0 2px 8px rgba( 28, 27, 24, .05 ), inset 0 1px 0 rgba( 255, 255, 255, .7 ); translate: 0 0; scale: 1; /* 240ms = exact de sluit-duur van de hoogte-animatie in view.js (DICHT_HOOGTE_DUUR). Deze transitie is degene die speelt bij het WEGHALEN van `.is-open`, dus bij het dichtklappen — zie het blok hieronder. */ transition: translate .24s var(--wp--custom--ease), scale .24s var(--wp--custom--ease), box-shadow .24s var(--wp--custom--ease), border-color .24s var(--wp--custom--ease), background-color .24s var(--wp--custom--ease); } /* ⚠️ `scale:` en `translate:` als LOSSE properties, nooit samen in één `transform:` — HANDOVER landmine #1. Twee `transform`-schrijvers op één element vechten om dezelfde regel en overschrijven elkaar stil. "Zoals de Dock in macOS" — Amins vraag: hover geeft een lichte zoom, en bij openen groeit hij verder én blíjft groot. Vandaar twee trappen: hover 1.008, open 1.016 (open wint, want die selector staat later én is specifieker). Klein houden is hier het hele punt: een FAQ-rij is 840px breed, dus zelfs 1,6% is aan de randen ruim 13px beweging — meer zou de lijst zichtbaar uit de rooilijn duwen in plaats van "naar voren komen". De schaal-oorsprong blijft het midden (standaard), zodat de rij symmetrisch groeit en niet naar één kant uitloopt. */ @media ( hover: hover ) and ( pointer: fine ) { .dle-faq__item:hover { translate: 0 -3px; scale: 1.02; /* Hover mag sneller reageren dan open/dicht — de Dock voelt direct aan. */ transition-duration: .2s; box-shadow: 0 24px 44px -22px rgba( 28, 27, 24, .3 ), 0 4px 12px rgba( 28, 27, 24, .08 ), inset 0 1px 0 rgba( 255, 255, 255, .85 ); } } /* ══════════════════════════════════════════════════════════════════════════ DE OPEN-STAAT HANGT AAN `.is-open`, NIET AAN `[open]` — EN DAT IS DE FIX VOOR "HET SLUIT IN TWEE STAPPEN" (17-08-2026, HANDOVER #83). `
` moet blíjven staan zolang de hoogte nog animeert, anders verdwijnt de inhoud in één frame en valt er niets meer te animeren. Gevolg: `[open]` gaat pas wég ná die animatie. Hing de kaartopmaak (scale, lift, schaduw, gloed) aan `[open]`, dan begon die dus pas te veranderen op het moment dat het inklappen al klaar was: 240ms inklappen, dán 300ms terugveren — twee etappes achter elkaar, precies wat Amin zag. `view.js` zet daarom een eigen `.is-open`-klasse, en haalt die weg aan het BEGIN van het sluiten. Zo lopen de kaart en de hoogte gelijk op. ⚠️ `[open]` blijft de terugval zonder JavaScript (dan is er geen animatie en klopt het gewoon). Om te voorkomen dat die terugval mét JS meepraat tijdens het dichtklappen, zet `view.js` `.dle-faq--js` op de lijst; de reset-regel hieronder is dan specifieker (0,3,0) dan `[open]` (0,2,0) en wint zonder van bronvolgorde af te hangen — bewust géén gelijkspel, zie landmine #15 voor waarom dat hier een terugkerende val is. */ .dle-faq__item[open], .dle-faq__item.is-open { translate: 0 -6px; scale: 1.04; background: rgba( 255, 255, 255, .78 ); border-color: rgba( 28, 165, 148, .38 ); box-shadow: 0 34px 60px -24px rgba( 28, 27, 24, .34 ), 0 14px 34px -8px rgba( 15, 132, 122, .3 ), inset 0 1px 0 rgba( 255, 255, 255, .9 ); /* 340ms = OPEN_HOOGTE_DUUR uit view.js. Deze transitie speelt bij het TOEVOEGEN van `.is-open`, dus bij het openen; de kortere 240ms in de basisregel speelt bij het weghalen ervan. Asymmetrisch, net als de hoogte-animatie zelf. */ transition-duration: .34s; } /* Mét JS: `[open]` zonder `.is-open` betekent "aan het dichtklappen" — dan hoort de kaart al terug te zijn op zijn gesloten opmaak. */ .dle-faq.dle-faq--js .dle-faq__item[open]:not( .is-open ) { translate: 0 0; scale: 1; background: rgba( 255, 255, 255, .6 ); border-color: rgba( 255, 255, 255, .7 ); box-shadow: 0 16px 32px -22px rgba( 28, 27, 24, .22 ), 0 2px 8px rgba( 28, 27, 24, .05 ), inset 0 1px 0 rgba( 255, 255, 255, .7 ); transition-duration: .24s; } @media ( prefers-reduced-motion: reduce ) { .dle-faq__item { transition: border-color .3s var(--wp--custom--ease), background-color .3s var(--wp--custom--ease); } .dle-faq__item:hover, .dle-faq__item[open], .dle-faq__item.is-open { translate: 0 0; scale: 1; } } .dle-faq__vraag { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); cursor: pointer; list-style: none; } /* Safari toont anders zijn eigen driehoekje naast het onze. */ .dle-faq__vraag::-webkit-details-marker { display: none; } .dle-faq__vraag::after { content: ""; margin-inline-start: auto; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .25s var(--wp--custom--ease); flex: none; } /* Zelfde `.is-open`-verhaal als bij de kaart hierboven: draaide dit pijltje mee met `[open]`, dan draaide het pas terug NÁ het inklappen. */ .dle-faq__item[open] .dle-faq__vraag::after, .dle-faq__item.is-open .dle-faq__vraag::after { rotate: -135deg; translate: 0 2px; } .dle-faq.dle-faq--js .dle-faq__item[open]:not( .is-open ) .dle-faq__vraag::after { rotate: 45deg; translate: 0 -2px; } .dle-faq__vraag:focus-visible { outline: 3px solid var(--wp--custom--teal--200); outline-offset: -3px; } /* Drukfeedback — 17-08-2026, apple-design-skill-audit. ⚠️ 17-08-2026, na live test: er stond hier ook een `scale:.995`-krimpje bij `:active`. Amin zag daardoor bij het SLUITEN van een vraag een "tepsj" (klein duwtje/hapering) — logisch, want die krimp-en-terugveer (2×80ms) speelt boven-op de veel tragere hoogte-animatie (320ms) die tegelijk op hetzelfde item start. Twee animaties met een andere snelheid op hetzelfde element, gestart door dezelfde klik, lezen als één onrustige beweging in plaats van twee nette. De rij was hier al voorzichtig over ("dit is een brede rij, geen knop") — dat voorbehoud bleek terecht. Drukfeedback blijft over via de achtergrondkleur alleen; geen scale meer op deze specifieke rij. */ .dle-faq__vraag { transition: background-color .2s var(--wp--custom--ease); } @media ( hover: hover ) and ( pointer: fine ) { .dle-faq__vraag:hover { background: rgba( 28, 165, 148, .07 ); } } .dle-faq__kop { margin: 0; font-size: var(--wp--preset--font-size--text-lg); font-weight: 700; line-height: 1.35; } /* ⚠️ DE PADDING-BOTTOM HIER IS EEN VLOER DIE `height` NIET KAN PASSEREN, EN DAT IS GEEN THEORIE — het kostte drie rondes feedback (HANDOVER #84). `box-sizing: border-box` staat hieronder en helpt, maar lost dit NIET op: ook met border-box kan de browser de doos niet kleiner maken dan zijn eigen padding + rand, want de contentbox zou dan negatief worden. `height: 0px` levert hier dus een doos van 16px op (precies deze padding-bottom), niet 0. Gemeten tijdens het sluiten: de hoogte liep in ~120ms van 68px naar 16px en bleef daar de resterende 120ms hangen, om dan in één frame naar 0 te springen zodra `[open]` wegging — zichtbaar als "hij sluit in twee stukken". ⚠️ Daarom animeert `view.js` `padding-bottom` MEE naar 0. Verander je deze padding, dan hoeft daar niets aangepast: het script leest de natuurlijke waarde zelf uit. Maar haal die tweede geanimeerde eigenschap niet weg, en voeg hier geen `padding-top`/`border-block` toe zonder die ook mee te animeren — elk van die drie is een nieuwe vloer. */ .dle-faq__antwoord { box-sizing: border-box; padding: 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); color: var(--wp--preset--color--zand-700); } .dle-faq__antwoord > :first-child { margin-block-start: 0; } .dle-faq__antwoord > :last-child { margin-block-end: 0; } .dle-faq__leeg { padding: var(--wp--preset--spacing--40); border: 1px dashed var(--wp--preset--color--rood-500); border-radius: var(--wp--custom--radius--md); color: var(--wp--preset--color--rood-500); } @media (prefers-reduced-motion: reduce) { .dle-faq__vraag::after { transition: none; } }