@charset "utf-8"; /* Ensar Yufka - richting 7, Vier. Diepgroen, aftellend van vier naar een. Plantaardig is hier een feit en geen claim, dus het groen hoeft nergens over gezondheid te beweren. Wat hier bewust anders is dan in de andere richtingen: - de taalwissel is een verticale strook langs de linkerrand, omdat de pagina zelf verticaal aftelt; - de enige herhaalde beweging is een staafje dat met scaleY vanaf de basislijn omhoog schaalt. Geen hoogte-animatie, dus CLS blijft nul; - er is precies een 3D-moment: het pak dat om de y-as draait. Alle contrastwaarden in het commentaar zijn nagerekend door _contrast.py, tegen de combinaties die dit bestand werkelijk maakt. */ /* ── lettertypen ─────────────────────────────────────────────────────────── */ @font-face { font-family: 'Faustina'; src: url('/assets/fonts/faustina.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Epilogue'; src: url('/assets/fonts/epilogue.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ── tokens ──────────────────────────────────────────────────────────────── */ :root { --grond: #1E2A18; --vlak: #27351F; --tekst: #EDF1E3; /* 13,07:1 op grond, 11,32:1 op vlak */ --gedempt: #A9B992; /* 7,17:1 op grond, 6,22:1 op vlak */ --goud: #D2AC33; /* 6,92:1 op grond, 6,00:1 op vlak */ --goud-lijn: #D2AC33; --goud-tekst: #D2AC33; --accent: #C3D6A1; /* 9,61:1 op grond, 8,33:1 op vlak */ --knop-vlak: #D2AC33; --knop-tekst: #1E2A18; /* 6,92:1 op de knop */ --focus: #C3D6A1; --fout: #F0A9A0; /* 7,86:1 op grond, alleen voor formuliermeldingen */ --lijn: #3A4A2E; /* decoratief, draagt geen betekenis */ --kop: 'Faustina', Georgia, 'Times New Roman', serif; --tekst-font: 'Epilogue', system-ui, -apple-system, sans-serif; --kop-gewicht: 700; --radius: 6px; --trede: 100svh; /* svh, anders springt het op iOS */ --cijfer: clamp(6rem, 22vw, 15rem); --staaf-breed: clamp(10px, 2vw, 22px); --veer: cubic-bezier(.16, 1, .3, 1); --duur: 1.4s; --perspectief: 1000px; --duim-knop: 56px; --nav-ruimte: 22ch; /* "Toptan siparis verin" is 20 tekens */ --breed: 72rem; --lucht: clamp(3.5rem, 8vw, 7rem); --strook: 0px; /* breedte van de taalstrook */ } /* ── grondslag ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--grond); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .rm html, html.rm { scroll-behavior: auto; } /* De vier vellen waaieren uit met een 3D-rotatie en steken daarbij tot 12 px buiten het scherm op 375 px breed. Dat hoort bij de beweging, maar mag geen horizontale schuifbalk geven. 'clip' en niet 'hidden', want hidden maakt hier een scroll-container van en breekt position: sticky verderop. */ html, body { overflow-x: clip; } body { margin: 0; padding-left: var(--strook); background: var(--grond); color: var(--tekst); font-family: var(--tekst-font); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.62; font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--kop); font-weight: var(--kop-gewicht); line-height: 1.08; margin: 0; letter-spacing: -.012em; text-wrap: balance; /* "Geschaeftsbedingungen" en "Datenschutzerklaerung" zijn allebei 20 tekens en passen op 320 pixels niet in een kop. Zonder dit duwden ze de pagina 25 pixels breder dan het scherm. De afbreekregels komen uit het lang-attribuut op ; hyphenate-limit-chars houdt korte woorden heel. Firefox kent hyphenate-limit-chars nog niet en valt terug op hyphens: auto. */ hyphens: auto; hyphenate-limit-chars: 12 6 4; overflow-wrap: break-word; } h1 { font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4.4rem); } h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.7rem); } h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: inherit; } img, picture, svg, video { max-width: 100%; } img { height: auto; display: block; } /* Een tekstkolom nooit smaller dan 24 tekens: "conserveringsmiddelen" is er 21 en "Konservierungsstoffe" 20. Zonder een juist lang-attribuut breekt de browser bovendien op de verkeerde plek, dus dat staat op . */ /* Minstens tien tekens voordat er iets wordt afgebroken. Zonder die grens brak de browser 'sevgi' en 'Ensar' af met Nederlandse regels, en dat is voor een Turks woord en een eigennaam allebei fout. */ .loop, .vlak-onder, .lead, .trede-zin { hyphens: auto; hyphenate-limit-chars: 10 5 4; } .cijfer { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .vw { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; } .overslaan { position: absolute; left: .5rem; top: -4rem; z-index: 60; background: var(--goud); color: var(--knop-tekst); padding: .7rem 1.1rem; border-radius: var(--radius); font-weight: 600; transition: top .18s var(--veer); } .overslaan:focus { top: .5rem; } /* ── knoppen ─────────────────────────────────────────────────────────────── */ .knop { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .75rem 1.35rem; border-radius: var(--radius); border: 1px solid transparent; /* background moet hier expliciet staan. Een