/* chassis.css - de gedeelde ondergrens voor alle negen Flash-homepages (ronde augustus 2026). Dit bestand regelt BEWEGING, SCHADUW, FOCUS en RUST. Het bepaalt bewust geen kleur, geen lettertype en geen opmaak: dat is per versie. Bouw hier bovenop, vecht er niet tegen. Wat hier vaststaat: - scroll-onthulling met fade plus verschuiving, gefaseerd - schaduw op elke afbeelding en elke knop - een zichtbare focus-rand voor toetsenbordgebruikers - een indrukeffect op knoppen - een zichtbare ruststaat bij prefers-reduced-motion Per versie stel je de tokens hieronder bij (licht/donker, harde of zachte schaduw). Je vervangt het systeem niet. */ :root { /* beweging: duur en curve. 180ms voor micro-interactie, 400ms voor een onthulling. */ --duur-micro: 180ms; --duur-onthul: 400ms; --curve: cubic-bezier(0.22, 1, 0.36, 1); --curve-uit: cubic-bezier(0.4, 0, 0.2, 1); --onthul-verschuiving: 28px; --onthul-trap: 70ms; /* schaduw: één lichtrichting. Overschrijf de waarden per versie, niet de namen. */ --schaduw-beeld: 0 18px 40px -18px rgb(11 27 51 / 0.45); --schaduw-knop: 0 6px 16px -6px rgb(11 27 51 / 0.4); --schaduw-knop-hover: 0 12px 26px -8px rgb(11 27 51 / 0.5); --focus-kleur: currentColor; --focus-dikte: 3px; --focus-afstand: 3px; } /* ---------- scroll-onthulling ---------- Zonder JS blijft alles gewoon zichtbaar. Met JS starten de blokken verborgen en komen ze binnen zodra ze in beeld schuiven. Een groep kaarten komt gefaseerd binnen. */ html.js [data-onthul] { opacity: 0; transform: translate3d(0, var(--onthul-verschuiving), 0); transition: opacity var(--duur-onthul) var(--curve), transform var(--duur-onthul) var(--curve); will-change: opacity, transform; } html.js [data-onthul].is-zichtbaar { opacity: 1; transform: translate3d(0, 0, 0); } html.js [data-onthul-groep] > * { opacity: 0; transform: translate3d(0, var(--onthul-verschuiving), 0); transition: opacity var(--duur-onthul) var(--curve), transform var(--duur-onthul) var(--curve); transition-delay: calc(var(--trap, 0) * var(--onthul-trap)); } html.js [data-onthul-groep].is-zichtbaar > * { opacity: 1; transform: translate3d(0, 0, 0); } /* ---------- schaduw op elke afbeelding en elke knop ---------- Een volvlaks achtergrondbeeld kan geen zichtbare schaduw hebben; dat is de enige uitzondering en die vraag je expliciet aan met data-vol. */ img, video { box-shadow: var(--schaduw-beeld); } img[data-vol], video[data-vol], .vol img, .vol video { box-shadow: none; } button, .knop, a.knop, input[type="submit"] { box-shadow: var(--schaduw-knop); transition: transform var(--duur-micro) var(--curve-uit), box-shadow var(--duur-micro) var(--curve-uit), background-color var(--duur-micro) var(--curve-uit), color var(--duur-micro) var(--curve-uit), border-color var(--duur-micro) var(--curve-uit); } button:hover, .knop:hover, a.knop:hover, input[type="submit"]:hover { transform: translate3d(0, -2px, 0); box-shadow: var(--schaduw-knop-hover); } button:active, .knop:active, a.knop:active, input[type="submit"]:active { transform: translate3d(0, 1px, 0) scale(0.99); box-shadow: var(--schaduw-knop); } /* een pijl in een knop schuift mee op hover */ .knop [data-pijl], button [data-pijl] { display: inline-block; transition: transform var(--duur-micro) var(--curve-uit); } .knop:hover [data-pijl], button:hover [data-pijl] { transform: translate3d(4px, 0, 0); } /* ---------- focus ---------- */ :focus-visible { outline: var(--focus-dikte) solid var(--focus-kleur); outline-offset: var(--focus-afstand); border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* ---------- scrollvergrendeling onder een open menupaneel ---------- Het chassis zet `overflow: hidden` op zodra het paneel opengaat, maar Chrome laat de viewport dan alsnog scrollen: je scrolt door de pagina heen terwijl het menu eroverheen ligt. Deze regel zet het slot op beide elementen zonder JS, en `overscroll-behavior: contain` zorgt dat het scrollen binnen het paneel niet doorslaat naar de pagina eronder. Browsers zonder `:has()` vallen terug op het bestaande gedrag. */ html:has([data-menu-paneel][data-open]), html:has([data-menu-paneel][data-open]) body { overflow: hidden; } [data-menu-paneel] { overscroll-behavior: contain; } /* toetsenbord-ingang naar de inhoud */ .sla-over { position: absolute; left: 16px; top: -100px; z-index: 999; padding: 12px 16px; transition: top var(--duur-micro) var(--curve-uit); } .sla-over:focus { top: 16px; } /* ---------- rust ---------- Bij prefers-reduced-motion staat alles zichtbaar in zijn eindstaat. Geen lege pagina, geen halve fade: de ruststaat is de complete pagina. */ @media (prefers-reduced-motion: reduce) { html.js [data-onthul], html.js [data-onthul-groep] > * { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- basis die elke versie nodig heeft ---------- */ img, video { max-width: 100%; height: auto; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }