/* ══════════════════════════════════════════════════════════════════════════ Tezgâh — Ensar Yufka. Eén stylesheet, geen framework, geen CDN. Het idee: je kijkt van boven op een werkblad. Er zijn geen secties met randen maar plekken op de tafel, en op die plekken liggen dingen. Elk ding ligt plat (rotateX 52deg) en komt overeind zodra het in beeld schuift. Drie regels die dit bestand overal volgt: 1. er wordt uitsluitend transform en opacity geanimeerd, dus CLS blijft nul 2. niets is verborgen zonder .js op ; valt het script weg, dan staat de pagina compleet in beeld 3. .rm zet alle beweging uit, en die klasse staat er al vóór de eerste weergave omdat het hoofdscript in de hem zet ══════════════════════════════════════════════════════════════════════════ */ /* ── lettertypen ─────────────────────────────────────────────────────────── Zelf gehost, latin en latin-ext in één bestand. Geen Google Fonts CDN: dat is een verzoek naar een derde partij bij elke paginaweergave. */ @font-face { font-family: 'Petrona'; src: url('/assets/fonts/petrona.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Work Sans'; src: url('/assets/fonts/worksans.woff2') format('woff2'); font-weight: 350 600; font-style: normal; font-display: swap; } /* ── tokens ─────────────────────────────────────────────────────────────── De contrastwaarden staan erbij en zijn nagerekend in _contrast.py, niet overgetypt uit het ontwerpdocument. */ :root { --grond: #251B12; /* walnoot */ --vlak: #33261A; /* 1,15:1 op de grond, scheidt alleen */ --vlak-op: #3F2F20; /* hetzelfde vlak, opgetild */ --tekst: #F0E6D6; /* 13,66:1 op grond, 11,86:1 op vlak */ --gedempt: #B6A48A; /* 6,97:1 op grond, 6,05:1 op vlak */ --goud: #D8B23F; /* 8,33:1 op grond. Merkgoud een stap lichter: #C9A227 haalt op walnoot met 6,98:1 wel de norm maar gaat visueel op in de ondergrond. */ --accent: #E0C98F; /* 10,39:1 op grond */ --knop-vlak: #D8B23F; --knop-tekst: #251B12; /* 8,33:1 op de knop */ --focus: #E0C98F; /* 10,39:1 op grond */ --papier: #EFE4D2; /* het kaartje en het briefje */ --papier-tekst: #241A11; /* 14,3:1 op papier */ --rvs: #B9BFC2; /* het tweede tafelblad */ --fout: #F0A79E; /* 7,4:1 op grond */ --lijn: rgba(240, 230, 214, .13); /* decoratief, draagt geen betekenis */ --lijn-op: rgba(240, 230, 214, .26); --kop: 'Petrona', Georgia, 'Times New Roman', serif; --tekst-font: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --kop-gewicht: 600; --radius: 4px; --veer: cubic-bezier(.16, 1, .3, 1); --duur: 1.1s; --perspectief: 1100px; --perspectief-punt: 50% 20%; --lig: 52deg; /* de hoek waarin een ding plat ligt */ --muis-kantel: 3deg; --nav-ruimte: 22ch; /* gemeten: "Toptan sipariş verin" is 20 */ --breed: 1180px; --rand: 1.25rem; --kop-hoogte: 64px; --plaats: clamp(3.5rem, 7vw, 6.5rem); /* ruimte tussen twee plekken */ } @media (min-width: 700px) { :root { --rand: 2rem; } } /* ── grondbeginselen ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } .rm html, html.rm { scroll-behavior: auto; } body { margin: 0; background-color: var(--grond); /* Het werkblad. Drie lagen: een fijne nerf, een grovere nerf en het strijklicht van linksboven. Alles in CSS, dus nul bytes aan beeld. */ background-image: radial-gradient(120% 62% at 16% -10%, rgba(224, 201, 143, .085), rgba(224, 201, 143, 0) 62%), repeating-linear-gradient(93deg, rgba(255, 255, 255, .016) 0 2px, rgba(255, 255, 255, 0) 2px 9px), repeating-linear-gradient(93deg, rgba(0, 0, 0, .13) 0 1px, rgba(0, 0, 0, 0) 1px 27px); background-attachment: scroll; color: var(--tekst); font-family: var(--tekst-font); font-weight: 350; font-size: clamp(1rem, .96rem + .2vw, 1.075rem); line-height: 1.65; font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, picture, video, svg { max-width: 100%; } img, video { display: block; height: auto; } h1, h2, h3, h4 { font-family: var(--kop); font-weight: var(--kop-gewicht); line-height: 1.08; letter-spacing: -.012em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.35rem, 1.35rem + 4.4vw, 4.5rem); } h2 { font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.85rem); } h3 { font-size: clamp(1.18rem, 1.05rem + .55vw, 1.45rem); } h4 { font-size: 1rem; font-family: var(--tekst-font); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gedempt); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } a { color: inherit; } /* Afbreken werkt alleen met het juiste lang op het element. Zonder dat breekt de browser op de verkeerde plek of helemaal niet. Getoetst met "conserveringsmiddelen" en "Konservierungsstoffe". */ p, li, dd, dt, figcaption { hyphens: auto; overflow-wrap: break-word; } h1, h2, h3 { hyphens: manual; } ::selection { background: var(--goud); color: var(--knop-tekst); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } .vw { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .overslaan { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: .7rem 1.1rem; background: var(--knop-vlak); color: var(--knop-tekst); font-weight: 600; border-radius: var(--radius); text-decoration: none; transition: top .2s var(--veer); } .overslaan:focus { top: 1rem; } .omhulsel { width: min(100% - var(--rand) * 2, var(--breed)); margin-inline: auto; } /* Elk ankerdoel houdt rekening met de plakkende kopbalk. Zonder dit verdwijnt elke ankerlink eronder. */ [id] { scroll-margin-top: calc(var(--kop-hoogte) + 1.25rem); } /* ── de tafel en de dingen erop ──────────────────────────────────────────── Dit is de handtekening van deze richting. .tafel geeft het perspectief, .tafel-vlak is het blad dat licht meebeweegt met de muis, en elk .ding ligt daarop plat totdat het in beeld komt. */ .tafel { perspective: var(--perspectief); perspective-origin: var(--perspectief-punt); } .tafel-vlak { transform-style: preserve-3d; transform: rotateY(calc(var(--mx, 0) * var(--muis-kantel))) rotateX(calc(var(--my, 0) * -2deg)); transition: transform .6s var(--veer); } .rm .tafel-vlak { transform: none !important; } .ding { position: relative; } .ding-blad { position: relative; z-index: 1; transform: rotate(var(--hoek, 0deg)); transform-origin: 50% 100%; } /* De schaduw ligt op tafel en draait dus niet mee. Hij krimpt met transform, niet met box-shadow: box-shadow animeren rekent op de hoofddraad en dat is precies wat een richting met veel objecten niet kan hebben. */ .ding-schaduw { position: absolute; left: 6%; right: 6%; bottom: -18px; height: 40px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 72%); opacity: .55; transform-origin: 50% 0; pointer-events: none; } /* Verbergen gebeurt alleen als er JavaScript is én de waarnemer het ding werkelijk heeft aangemerkt. data-rv wordt door het script gezet, nooit in de HTML: valt het script weg, dan staat er niets verborgen. */ .js .ding[data-rv] > .ding-blad { opacity: 0; transform: rotate(var(--hoek, 0deg)) rotateX(var(--lig)) translateZ(-40px); } .js .ding[data-rv] > .ding-schaduw { opacity: .85; transform: scale(1.28, 2.5) translateY(-12px); } .js .ding[data-rv].in > .ding-blad { opacity: 1; transform: rotate(var(--hoek, 0deg)); transition: transform var(--duur) var(--veer) calc(var(--i, 0) * 90ms), opacity .7s var(--veer) calc(var(--i, 0) * 90ms); } .js .ding[data-rv].in > .ding-schaduw { opacity: .5; transform: none; transition: transform var(--duur) var(--veer) calc(var(--i, 0) * 90ms), opacity .7s var(--veer) calc(var(--i, 0) * 90ms); } .rm .ding[data-rv] > .ding-blad, .rm .ding[data-rv].in > .ding-blad { opacity: 1; transform: rotate(var(--hoek, 0deg)); transition: none; } .rm .ding[data-rv] > .ding-schaduw, .rm .ding[data-rv].in > .ding-schaduw { opacity: .5; transform: none; transition: none; } /* Blokken die als geheel onthuld worden (tekst naast beeld, een formulier). Alleen opacity en een kleine verschuiving; geen kanteling, want dan zou de lopende tekst onder een hoek staan en dat leest niet. */ .js [data-onthul][data-rv]:not(.ding) { opacity: 0; transform: translate3d(0, 22px, 0); } .js [data-onthul][data-rv].in:not(.ding) { opacity: 1; transform: none; transition: transform .9s var(--veer), opacity .6s var(--veer); } .rm [data-onthul][data-rv]:not(.ding) { opacity: 1; transform: none; transition: none; } /* ── mededeling over het ontwerpvoorstel ─────────────────────────────────── Staat in de gewone stroom, bovenaan, en dus nooit over een knop heen. In demo 1 lag zo'n balk zwevend over de twee heroknoppen en waren die niet meer aan te klikken. Het verbergen bij een tweede bezoek gebeurt in de , vóór de eerste weergave, zodat er ook niets verspringt. */ .melding { background: var(--vlak); border-bottom: 1px solid var(--lijn); } .melding-weg .melding { display: none; } .melding-binnen { width: min(100% - var(--rand) * 2, var(--breed)); margin-inline: auto; display: flex; align-items: center; gap: 1rem; padding: .55rem 0; } .melding-binnen p { margin: 0; font-size: .84rem; color: var(--gedempt); line-height: 1.45; } .melding-binnen button { flex: none; width: 44px; height: 44px; margin: -.3rem -.6rem -.3rem auto; display: grid; place-items: center; background: none; border: 0; color: var(--gedempt); cursor: pointer; border-radius: var(--radius); } .melding-binnen button:hover { color: var(--tekst); background: rgba(240, 230, 214, .07); } /* ── kopbalk ─────────────────────────────────────────────────────────────── Vaste hoogte van 64 px. Bij het scrollen verandert alleen de achtergrond, nooit de hoogte: elke hoogtewijziging in een plakkende balk duwt de hele pagina en dat telt mee als verschuiving. */ .kopbalk-houder { position: sticky; top: 0; z-index: 60; } .kopbalk-houder::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--grond) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; opacity: 0; transition: opacity .3s var(--veer), border-color .3s var(--veer); pointer-events: none; } .kopbalk-houder.gescrold::before { opacity: 1; border-bottom-color: var(--lijn); } @supports not (backdrop-filter: blur(1px)) { .kopbalk-houder::before { background: var(--grond); } } .kopbalk { position: relative; z-index: 1; width: min(100% - var(--rand) * 2, var(--breed)); margin-inline: auto; min-height: var(--kop-hoogte); display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); } /* Het logo is 480x203 in de bron en er is geen SVG. Nooit breder tonen dan 240 CSS-pixels, anders wordt het zichtbaar zacht op een scherm met dubbele pixeldichtheid. Hier staat het op 150. */ .merk { display: block; flex: none; line-height: 0; border-radius: 2px; } .merk img { width: 150px; height: 63px; object-fit: contain; } @media (max-width: 420px) { .merk img { width: 124px; height: 52px; } } .hoofdnav { margin-inline-start: auto; } .hoofdnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.5rem, 1.6vw, 1.5rem); } .hoofdnav a { display: block; padding: .55rem .25rem; min-width: 0; max-width: var(--nav-ruimte); font-size: .95rem; font-weight: 400; color: var(--tekst); text-decoration: none; position: relative; } .hoofdnav a::after { content: ""; position: absolute; left: .25rem; right: .25rem; bottom: .28rem; height: 1px; background: var(--goud); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--veer); } .hoofdnav a:hover::after, .hoofdnav a:focus-visible::after { transform: scaleX(1); } .hoofdnav a[aria-current="page"] { color: var(--goud); } .hoofdnav a[aria-current="page"]::after { transform: scaleX(1); } .zakelijk-knop { flex: none; display: inline-block; padding: .5rem 1rem; min-width: min(var(--nav-ruimte), 100%); text-align: center; font-size: .92rem; font-weight: 500; color: var(--tekst); text-decoration: none; border: 1px solid var(--lijn-op); border-radius: var(--radius); transition: border-color .3s var(--veer), color .3s var(--veer), background-color .3s var(--veer); } .zakelijk-knop:hover { border-color: var(--goud); color: var(--goud); } .zakelijk-knop[aria-current="page"] { border-color: var(--goud); color: var(--goud); } /* ── de taalwissel: vijf kaartjes, uitgewaaierd als bierviltjes ──────────── Vijf echte links, elk naar dezelfde pagina in die taal, met hreflang en lang. Geen vlaggen: een vlag is een land en Turks wordt in Duitsland, Frankrijk en Nederland gesproken. De volle taalnaam staat er voor schermlezers altijd bij. */ .talen { flex: none; } .talen ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; } .talen a { display: grid; place-items: center; width: 38px; min-height: 44px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--gedempt); text-decoration: none; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); transform: rotate(calc(var(--k) * 2.2deg)) translateY(calc(abs(var(--k)) * 1px)); transition: transform .4s var(--veer), color .3s var(--veer), border-color .3s var(--veer), background-color .3s var(--veer); } .talen ul:hover a, .talen ul:focus-within a { transform: rotate(calc(var(--k) * 4deg)) translateY(calc(abs(var(--k)) * 2px - 2px)); } .talen a:hover { color: var(--tekst); border-color: var(--lijn-op); background: var(--vlak-op); } .talen a[aria-current="true"] { color: var(--goud); border-color: var(--goud); background: var(--vlak-op); } /* Ook zonder kleur herkenbaar: de actieve taal krijgt een onderlijn. */ .talen a[aria-current="true"] span[aria-hidden] { border-bottom: 2px solid currentColor; padding-bottom: 1px; } .rm .talen a { transform: none !important; } .menuknop { display: none; flex: none; width: 44px; height: 44px; margin-inline-start: auto; place-items: center; background: none; border: 1px solid var(--lijn-op); border-radius: var(--radius); color: var(--tekst); cursor: pointer; } .menuknop .ico-kruis { display: none; } .kopbalk-houder.menu-open .menuknop .ico-kruis { display: block; } .kopbalk-houder.menu-open .menuknop .ico-menu { display: none; } .menu-onder { display: none; } /* Het menu op smalle schermen. Het dichtklappen staat in de stylesheet en gebeurt niet pas door het script: op een eerdere demo stond het menu open in de server-HTML en klapte het pas na het laden dicht, met CLS 0,34 bij het tweede bezoek als gevolg. */ @media (max-width: 1099px) { .menuknop { display: grid; } .kopbalk > .zakelijk-knop, .kopbalk > .talen { display: none; } .menu-onder { display: block; } .js .hoofdnav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: .5rem var(--rand) 1.5rem; background: var(--vlak); border-block: 1px solid var(--lijn); display: none; } .js .kopbalk-houder.menu-open .hoofdnav { display: block; } .hoofdnav ul { flex-direction: column; gap: 0; } .hoofdnav a { padding: .85rem .25rem; max-width: none; font-size: 1.05rem; } .hoofdnav a::after { display: none; } .menu-onder { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lijn); display: grid; gap: 1rem; } /* Op mobiel is de waaier te fijn: vijf kaartjes onder elkaar, elk 52 px hoog, met de taalnaam voluit in de eigen taal. */ .menu-onder .talen ul { flex-direction: column; gap: 4px; } .menu-onder .talen a { width: auto; min-height: 52px; grid-template-columns: 2.5rem 1fr; place-items: center start; padding: 0 .9rem; transform: none; font-size: .95rem; } .menu-onder .talen a .vw { position: static !important; width: auto; height: auto; margin: 0; clip-path: none; font-weight: 400; letter-spacing: 0; } .menu-onder .talen ul:hover a, .menu-onder .talen ul:focus-within a { transform: none; } } @media (max-width: 1099px) { /* Zonder script blijft het menu gewoon zichtbaar onder de balk staan. */ html:not(.js) .hoofdnav { order: 9; flex-basis: 100%; margin-inline-start: 0; padding-bottom: 1rem; } html:not(.js) .kopbalk { flex-wrap: wrap; } html:not(.js) .menuknop { display: none; } } /* ── knoppen ─────────────────────────────────────────────────────────────── */ .knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } .knop { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .7rem 1.35rem; border-radius: var(--radius); font-family: var(--tekst-font); font-size: .98rem; font-weight: 500; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .35s var(--veer), background-color .3s var(--veer), border-color .3s var(--veer), color .3s var(--veer); } .knop .ico { width: 1.05em; height: 1.05em; flex: none; transition: transform .35s var(--veer); } .knop:hover .ico { transform: translateX(4px); } .rm .knop:hover .ico { transform: none; } .knop-vol { background: var(--knop-vlak); color: var(--knop-tekst); font-weight: 600; } .knop-vol:hover { background: var(--accent); transform: translateY(-2px); } .knop-lijn { color: var(--tekst); border-color: var(--lijn-op); } .knop-lijn:hover { border-color: var(--goud); color: var(--goud); transform: translateY(-2px); } .rm .knop:hover { transform: none; } .tekstlink { display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem; color: var(--goud); font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent; } .tekstlink:hover { border-bottom-color: currentColor; } .tekstlink .ico { width: 1.05em; height: 1.05em; transition: transform .35s var(--veer); } .tekstlink:hover .ico { transform: translateX(4px); } .rm .tekstlink:hover .ico { transform: none; } /* ── kopgroep, tags en losse tekstdelen ──────────────────────────────────── */ .kopgroep { max-width: 46rem; } .tag { margin: 0 0 .9rem; font-size: .8rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--goud); } .lead { margin-top: 1.1rem; font-size: clamp(1.05rem, 1rem + .4vw, 1.24rem); line-height: 1.55; color: var(--gedempt); max-width: 44rem; } /* hulpklasse voor kleine lopende tekst. Niet gebruiken als toestand: de kopbalk deed dat en erfde margin-top, wat layout shift gaf. */ .klein { font-size: .88rem; color: var(--gedempt); margin-top: 1rem; max-width: 34rem; } .noot { margin: 2rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--goud); color: var(--gedempt); font-size: .95rem; max-width: 44rem; } .noot--dealer { margin: 0; } .noot b { display: block; color: var(--tekst); font-family: var(--kop); font-size: 1.15rem; } /* ── plekken op de tafel ────────────────────────────────────────────────── Geen randen, geen kaders: alleen ruimte. Dat is het layoutprincipe van deze richting. */ .plaats { padding-block: var(--plaats); } .plaats + .plaats { padding-top: 0; } main > .plaats:first-child { padding-top: calc(var(--plaats) * .7); } /* Een veeg meel als scheiding, in plaats van een lijn. */ .meel { height: 3px; margin-top: 2.25rem; max-width: 22rem; border-radius: 3px; background: radial-gradient(1.6px 1.6px at 12% 50%, rgba(240, 230, 214, .55), transparent), radial-gradient(1.2px 1.2px at 28% 20%, rgba(240, 230, 214, .4), transparent), radial-gradient(2px 2px at 44% 70%, rgba(240, 230, 214, .5), transparent), radial-gradient(1.4px 1.4px at 61% 30%, rgba(240, 230, 214, .38), transparent), radial-gradient(1.1px 1.1px at 78% 60%, rgba(240, 230, 214, .3), transparent), linear-gradient(90deg, var(--goud), rgba(216, 178, 63, 0) 92%); opacity: .8; } /* ── hero ───────────────────────────────────────────────────────────────── De kop staat op de kale walnoot, niet op een foto. Dat is een bewuste keuze: de echte productfoto's hebben het onderwerp centraal en een onrustige ondergrond, en op demo 3 liep het tekstgebied van luminantie 16 tot 234 terwijl elke geautomatiseerde controle groen bleef. Hier is de ondergrond één vlak van 13,66:1 en valt er niets te meten dat mis kan gaan. */ .hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--plaats); } .hero-binnen { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; } @media (min-width: 900px) { .hero-binnen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); min-height: min(78svh, 720px); } } .hero h1 { margin-bottom: 0; } .hero h1 em { font-style: normal; color: var(--goud); } .hero .tag { color: var(--gedempt); letter-spacing: .1em; } .feiten { list-style: none; margin: 2.5rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--lijn); display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.75rem); } .feiten li { display: grid; gap: .1rem; } .feiten b { font-family: var(--kop); font-weight: var(--kop-gewicht); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); line-height: 1; color: var(--goud); font-variant-numeric: tabular-nums; } .feiten span { font-size: .84rem; color: var(--gedempt); } /* Het toneel in de hero: drie dingen die plat op tafel liggen en overeind komen. Dit gaat met een CSS-animatie en niet met de waarnemer, want de hero krijgt nooit data-rv: een hero die op opacity nul begint is een lege pagina zodra er iets misgaat met het script. */ .hero-tafel { position: relative; aspect-ratio: 4 / 3.5; } .hero-tafel .tafel-vlak { position: absolute; inset: 0; } .hero-tafel .ding { position: absolute; } .hero-foto { top: 0; left: 0; width: 79%; z-index: 2; } .hero-vel { top: 26%; right: 0; width: 34%; z-index: 1; } .hero-kaartje { bottom: 0; right: 3%; width: 46%; z-index: 3; } @media (max-width: 899px) { .hero-tafel { aspect-ratio: 4 / 3.3; max-width: 34rem; } .hero-kaartje { width: 52%; } } @keyframes oprichten { from { opacity: 0; transform: rotate(var(--hoek, 0deg)) rotateX(var(--lig)) translateZ(-40px); } to { opacity: 1; transform: rotate(var(--hoek, 0deg)); } } @keyframes schaduw-krimpen { from { opacity: .85; transform: scale(1.28, 2.5) translateY(-12px); } to { opacity: .5; transform: none; } } .hero-ding > .ding-blad { animation: oprichten var(--duur) var(--veer) var(--vt, 0s) both; } .hero-ding > .ding-schaduw { animation: schaduw-krimpen var(--duur) var(--veer) var(--vt, 0s) both; } .rm .hero-ding > .ding-blad, .rm .hero-ding > .ding-schaduw { animation: none; } .prijs-regel { margin: 1.5rem 0 0; font-family: var(--kop); font-weight: var(--kop-gewicht); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); line-height: 1; color: var(--goud); } .prijs-regel span { font-family: var(--tekst-font); font-size: .9rem; font-weight: 400; color: var(--gedempt); } /* ── het prijskaartje ───────────────────────────────────────────────────── Papier op walnoot: het enige lichte vlak boven de vouw, en daarmee het punt waar het oog naartoe gaat. */ .kaartje { position: relative; background: var(--papier); color: var(--papier-tekst); border-radius: var(--radius); padding: 1.15rem 1.3rem 1.15rem 2.5rem; box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .8); display: grid; gap: .1rem; } .kaartje::before { content: ""; position: absolute; left: 1.05rem; top: 50%; width: 3px; height: 62%; transform: translateY(-50%); border-radius: 3px; background: repeating-linear-gradient(180deg, rgba(36, 26, 17, .28) 0 4px, rgba(36, 26, 17, 0) 4px 9px); } .kaartje-gat { position: absolute; left: .62rem; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--grond); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); } .kaartje-veld { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(36, 26, 17, .68); } .kaartje-prijs { font-family: var(--kop); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); line-height: 1.05; } .kaartje-onder { font-size: .82rem; color: rgba(36, 26, 17, .72); } /* ── de afdruk: een foto die op tafel ligt ────────────────────────────────── */ .print { margin: 0; background: var(--vlak); border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 42px -22px rgba(0, 0, 0, .85); display: block; color: inherit; text-decoration: none; height: 100%; transition: transform .45s var(--veer), box-shadow .45s var(--veer); } .print-raam { display: block; position: relative; overflow: hidden; background: var(--grond); } .print-raam img { width: 100%; transition: transform .7s var(--veer); } .print-onder { display: grid; gap: .35rem; padding: 1.15rem 1.25rem 1.35rem; } .print-onder b { font-family: var(--kop); font-weight: var(--kop-gewicht); font-size: 1.2rem; line-height: 1.2; } .print-onder > span:not([class]) { color: var(--gedempt); font-size: .9rem; line-height: 1.5; } .print-tag { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--goud); } .print-naam { font-family: var(--kop); font-weight: var(--kop-gewicht); font-size: 1.35rem; line-height: 1.15; } .print-kort { color: var(--gedempt); font-size: .92rem; line-height: 1.55; } .print-voet { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .55rem; padding-top: .85rem; border-top: 1px solid var(--lijn); } .print-voet b { font-family: var(--kop); font-size: 1.3rem; color: var(--goud); font-variant-numeric: tabular-nums; } .print-meer { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; color: var(--gedempt); } .print-meer .ico { width: 1em; height: 1em; transition: transform .35s var(--veer); } .print--klik:hover { transform: translateY(-7px); box-shadow: 0 34px 56px -24px rgba(0, 0, 0, .9); } .print--klik:hover .print-raam img { transform: scale(1.045); } .print--klik:hover .print-meer { color: var(--goud); } .print--klik:hover .print-meer .ico { transform: translateX(4px); } .print--klik:focus-visible { outline-offset: 4px; } .rm .print--klik:hover { transform: none; } .rm .print--klik:hover .print-raam img { transform: none; } .rm .print--klik:hover .print-meer .ico { transform: none; } /* ── de wachtplek: geen foto, wel de vorm ───────────────────────────────── Ensar heeft geen eigen opname van de sac. Er staat hier dus niets, en dat wordt zichtbaar gezegd in plaats van opgevuld met een sfeerbeeld van iemand anders. */ .wacht { margin: 0; background: var(--vlak); border: 1px dashed var(--lijn-op); border-radius: var(--radius); overflow: hidden; } .wacht-vlak { aspect-ratio: 4 / 3; display: grid; place-content: center; justify-items: center; gap: .75rem; color: var(--gedempt); background: repeating-linear-gradient(135deg, rgba(240, 230, 214, .035) 0 10px, rgba(240, 230, 214, 0) 10px 20px); } .ico-groot { width: 40px; height: 40px; } .wacht-label { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--goud); } .wacht figcaption { display: grid; gap: .35rem; padding: 1.15rem 1.25rem 1.35rem; font-size: .9rem; color: var(--gedempt); line-height: 1.55; } .wacht figcaption b { font-family: var(--kop); font-weight: var(--kop-gewicht); font-size: 1.2rem; color: var(--tekst); } /* ── rasters op de tafel ─────────────────────────────────────────────────── */ .prints { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); margin-top: clamp(2.25rem, 4vw, 3.25rem); } @media (min-width: 640px) { .prints { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 940px) { .prints { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cijfers { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 860px) { .cijfers { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .cijfer { background: var(--vlak); border-radius: var(--radius); padding: 1.35rem 1.4rem 1.5rem; box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .8); height: 100%; display: grid; gap: .45rem; align-content: start; } .cijfer b { font-family: var(--kop); font-weight: var(--kop-gewicht); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.7rem); line-height: 1; color: var(--goud); font-variant-numeric: tabular-nums; } .cijfer span { color: var(--gedempt); font-size: .92rem; line-height: 1.5; } .briefjes { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: clamp(2rem, 4vw, 3rem); } @media (min-width: 780px) { .briefjes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .briefje { background: var(--papier); color: var(--papier-tekst); border-radius: var(--radius); padding: 1.4rem 1.5rem 1.55rem; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); height: 100%; } .briefje h3 { margin-bottom: .6rem; } .briefje p { font-size: .93rem; line-height: 1.6; color: rgba(36, 26, 17, .82); } .briefje--adres { max-width: 30rem; } .briefje--adres p { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; } .briefje--adres a { display: flex; align-items: flex-start; gap: .75rem; color: var(--papier-tekst); text-decoration: none; border-bottom: 1px solid transparent; } .briefje--adres a:hover { border-bottom-color: currentColor; } .briefje--adres .ico { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .28rem; color: rgba(36, 26, 17, .6); } .namen { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); } .namen .ding { flex: 1 1 15rem; max-width: 20rem; } .naamkaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.15rem 1.3rem; display: grid; gap: .15rem; box-shadow: 0 16px 32px -20px rgba(0, 0, 0, .8); } .naamkaart b { font-family: var(--kop); font-weight: var(--kop-gewicht); font-size: 1.35rem; } .naamkaart span { color: var(--gedempt); font-size: .88rem; } /* ── tekst naast een ding ─────────────────────────────────────────────────── */ .duo { display: grid; gap: clamp(2rem, 4.5vw, 4rem); align-items: center; } @media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); } .duo--links .duo-tekst { order: 2; } .duo--links .duo-beeld { order: 1; } } .duo-tekst > .kopgroep { margin-bottom: 1.5rem; } .duo-tekst p { color: var(--gedempt); max-width: 38rem; } .duo-beeld { min-width: 0; } .print--staand .print-raam img { max-height: 34rem; object-fit: cover; } /* ── de opname ───────────────────────────────────────────────────────────── 4:5, want dat is het echte formaat van de bestanden. website-juni en website-mix forceren 9/16 op precies deze opnames en snijden er circa 28 procent af. Vaste breedte en hoogte plus aspect-ratio, preload none en een posterframe: geen verschuiving en geen 2,7 MB bij het eerste bezoek. */ .print--film .print-raam { aspect-ratio: 4 / 5; } .film { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; } .filmknop { position: absolute; left: 1rem; bottom: 1rem; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(240, 230, 214, .35); border-radius: 50%; background: rgba(37, 27, 18, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--tekst); cursor: pointer; transition: background-color .3s var(--veer), border-color .3s var(--veer); } .filmknop:hover { background: var(--grond); border-color: var(--goud); color: var(--goud); } .filmknop .ico { width: 22px; height: 22px; } .filmknop .ico-pauze { display: none; } .filmknop[aria-pressed="true"] .ico-pauze { display: block; } .filmknop[aria-pressed="true"] .ico-speel { display: none; } /* ── het tafelblad met de schakelaar Thuis / Zaak ────────────────────────── Twee keuzerondjes in plaats van twee knoppen met script: zo werkt de schakelaar zonder JavaScript en is hij vanzelf met het toetsenbord te bedienen. De twee panelen liggen in dezelfde rastercel, dus de hoogte is de hoogste van de twee en er verspringt niets bij het wisselen. */ .blad { position: relative; } .blad-radio { position: absolute; } .blad-schakelaar { border: 0; margin: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2rem); padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem; } .blad-label { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gedempt); } .blad-knoppen { display: inline-flex; padding: 4px; gap: 4px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: calc(var(--radius) + 4px); } .blad-knoppen label { display: grid; place-items: center; min-height: 44px; min-width: min(var(--nav-ruimte), 9rem); padding: .4rem 1.15rem; border-radius: var(--radius); font-size: .95rem; font-weight: 500; color: var(--gedempt); cursor: pointer; transition: background-color .35s var(--veer), color .35s var(--veer); } .blad-knoppen label:hover { color: var(--tekst); } #blad-thuis:checked ~ .blad-schakelaar label[for="blad-thuis"], #blad-zaak:checked ~ .blad-schakelaar label[for="blad-zaak"] { background: var(--knop-vlak); color: var(--knop-tekst); font-weight: 600; } .blad-radio:focus-visible ~ .blad-schakelaar label[for="blad-thuis"], .blad-radio:focus-visible ~ .blad-schakelaar label[for="blad-zaak"] { outline: 2px solid var(--focus); outline-offset: 2px; } #blad-thuis:focus-visible ~ .blad-schakelaar label[for="blad-zaak"], #blad-zaak:focus-visible ~ .blad-schakelaar label[for="blad-thuis"] { outline: 0; } .blad-vlak { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--vlak); border: 1px solid var(--lijn); box-shadow: 0 26px 52px -26px rgba(0, 0, 0, .85); } /* Het tweede tafelblad. Roestvrij staal schuift eroverheen wanneer de bezoeker "Zaak" kiest. Dit is een achtergrondlaag; er staat nooit tekst op, want dan zou de tekstkleur mee moeten wisselen en dat is precies waar contrast stilletjes omvalt. */ .blad-rvs { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(185, 191, 194, .13), rgba(185, 191, 194, .05)), repeating-linear-gradient(90deg, rgba(185, 191, 194, .07) 0 2px, rgba(185, 191, 194, 0) 2px 6px); transition: opacity .7s var(--veer); pointer-events: none; } #blad-zaak:checked ~ .blad-tafel .blad-rvs { opacity: 1; } #blad-zaak:checked ~ .blad-tafel .blad-vlak { border-color: rgba(185, 191, 194, .3); } .blad-panelen { display: grid; } .blad-paneel { grid-area: 1 / 1; padding: clamp(1.5rem, 3.5vw, 2.5rem); visibility: hidden; opacity: 0; transition: opacity .45s var(--veer); } #blad-thuis:checked ~ .blad-tafel .blad-paneel[data-blad="thuis"], #blad-zaak:checked ~ .blad-tafel .blad-paneel[data-blad="zaak"] { visibility: visible; opacity: 1; } .blad-paneel h3 { margin-bottom: 1.25rem; } .blad-paneel .knoppen { margin-top: 1.75rem; } /* ── specificatielijst ────────────────────────────────────────────────────── */ .spec { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; display: grid; } .spec--breed { max-width: 60rem; } .spec-rij { display: grid; gap: .2rem; padding: .95rem 0; border-top: 1px solid var(--lijn); } .spec-rij:last-child { border-bottom: 1px solid var(--lijn); } @media (min-width: 620px) { .spec-rij { grid-template-columns: minmax(11rem, 32%) minmax(0, 1fr); gap: 1.5rem; align-items: baseline; } } .spec dt { color: var(--gedempt); font-size: .93rem; } .spec dd { margin: 0; } .open { display: inline-flex; align-items: baseline; gap: .5rem; color: var(--goud); font-size: .93rem; } .open-stip { width: 7px; height: 7px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; transform: translateY(-1px); } .open-noot { display: block; margin-top: .45rem; color: var(--gedempt); font-size: .87rem; line-height: 1.55; max-width: 40rem; } .vast { display: inline-flex; align-items: baseline; gap: .5rem; } .vast .ico { width: .95em; height: .95em; color: var(--goud); transform: translateY(1px); flex: none; } .spec-uitleg { margin-top: 1.25rem; font-size: .87rem; color: var(--gedempt); max-width: 46rem; line-height: 1.6; } /* ── eerlijk-blok en platte tekst ─────────────────────────────────────────── */ .eerlijk, .plat { max-width: 44rem; } .eerlijk h2 { margin-bottom: 1.35rem; } .eerlijk p, .plat p { color: var(--gedempt); } .plat h2 { margin: 2.5rem 0 .9rem; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); } .plat h2:first-child { margin-top: 0; } /* ── recepten ─────────────────────────────────────────────────────────────── */ .recepten { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); margin-top: clamp(2rem, 4vw, 3rem); } @media (min-width: 820px) { .recepten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .recept { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius); padding: clamp(1.35rem, 3vw, 2rem); height: 100%; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8); } .recept h3 { margin-bottom: .35rem; } .recept-meta { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--goud); margin-bottom: .9rem; } .recept > p { color: var(--gedempt); font-size: .95rem; } .recept-twee { display: grid; gap: 1.5rem; margin-top: 1.5rem; } @media (min-width: 520px) { .recept-twee { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } } .recept-twee h4 { margin-bottom: .65rem; } .recept-ing, .recept-st { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; } .recept-ing { list-style: none; padding-left: 0; } .recept-ing li { position: relative; padding-left: 1.15rem; font-size: .92rem; color: var(--gedempt); } .recept-ing li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--goud); } .recept-st li { font-size: .92rem; color: var(--gedempt); } .recept-st li::marker { color: var(--goud); font-weight: 600; } .geglijst { list-style: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 0; max-width: 44rem; } .geglijst li { border-top: 1px solid var(--lijn); } .geglijst li:last-child { border-bottom: 1px solid var(--lijn); } .geglijst a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem .25rem; text-decoration: none; transition: padding-left .35s var(--veer); } .geglijst a > span { display: grid; gap: .15rem; } .geglijst b { font-family: var(--kop); font-weight: var(--kop-gewicht); font-size: 1.15rem; } .geglijst span span { color: var(--gedempt); font-size: .86rem; } .geglijst .ico { flex: none; color: var(--goud); transition: transform .35s var(--veer); } .geglijst a:hover { padding-left: .75rem; } .geglijst a:hover .ico { transform: translateX(4px); } .rm .geglijst a:hover { padding-left: .25rem; } .rm .geglijst a:hover .ico { transform: none; } /* ── kruimelpad ───────────────────────────────────────────────────────────── */ .kruimels { padding-top: 1.5rem; } .kruimels ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; } .kruimels li + li::before { content: "/"; margin-right: .5rem; color: var(--gedempt); opacity: .6; } .kruimels a { color: var(--gedempt); text-decoration: none; } .kruimels a:hover { color: var(--goud); } .kruimels [aria-current] { color: var(--tekst); } /* ── de grote oproep ──────────────────────────────────────────────────────── */ .plaats--cta { padding-block: calc(var(--plaats) * .8) var(--plaats); } .cta-vlak { position: relative; overflow: hidden; border-radius: calc(var(--radius) * 2); border: 1px solid var(--lijn); background: var(--vlak); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); } .cta-gloed { position: absolute; left: 50%; top: -40%; width: min(46rem, 120%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(216, 178, 63, .16), rgba(216, 178, 63, 0) 70%); pointer-events: none; } .cta-vlak > * { position: relative; } .cta-vlak .lead { margin-inline: auto; } .cta-vlak .knoppen { justify-content: center; } /* ── formulier ────────────────────────────────────────────────────────────── */ .formulier { margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 52rem; } .velden { display: grid; gap: 1.25rem; } @media (min-width: 640px) { .velden { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .veld { margin: 0; display: grid; gap: .45rem; } .veld--breed { grid-column: 1 / -1; } .veld label { font-size: .9rem; font-weight: 500; } .hint { color: var(--gedempt); font-weight: 400; } .veld input, .veld select, .veld textarea { width: 100%; min-height: 48px; padding: .7rem .85rem; font: inherit; font-size: 1rem; color: var(--tekst); background: var(--vlak); border: 1px solid var(--lijn-op); border-radius: var(--radius); transition: border-color .3s var(--veer); } .veld textarea { min-height: 8rem; resize: vertical; } .veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gedempt) 50%), linear-gradient(135deg, var(--gedempt) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - .8rem) 1.35rem; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; } .veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--goud); } .veld [aria-invalid="true"] { border-color: var(--fout); } .veldfout { display: block; font-size: .85rem; color: var(--fout); } .akkoord { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .75rem; margin: 1.5rem 0 0; align-items: start; } .akkoord input { width: 22px; height: 22px; margin: .28rem 0 0; accent-color: var(--goud); flex: none; } .akkoord label { font-size: .92rem; color: var(--gedempt); line-height: 1.55; } .akkoord label a { color: var(--goud); } .akkoord .veldfout { grid-column: 2; } .verstuur { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; } .verstuur .knoppen { margin: 0; } .status { margin: 0; font-size: .9rem; color: var(--gedempt); max-width: 30rem; } .status[data-toestand="demo"] { color: var(--goud); } /* ── voettekst ────────────────────────────────────────────────────────────── */ .voet { margin-top: var(--plaats); padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 2.5rem; border-top: 1px solid var(--lijn); background: linear-gradient(180deg, rgba(51, 38, 26, .55), rgba(51, 38, 26, 0) 60%); } .voet-binnen { display: grid; gap: 2.5rem; } @media (min-width: 760px) { .voet-binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .voet-binnen { grid-template-columns: 1.35fr 1fr 1fr 1.25fr; } } .voet-merk img { width: 148px; height: 62px; object-fit: contain; } .spreuk { margin: .9rem 0 1.25rem; font-family: var(--kop); font-size: 1.05rem; color: var(--goud); } .voet-sociaal { display: flex; gap: .5rem; } .voet-sociaal a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--lijn); border-radius: var(--radius); color: var(--gedempt); transition: color .3s var(--veer), border-color .3s var(--veer); } .voet-sociaal a:hover { color: var(--goud); border-color: var(--goud); } .voet-kolom h2 { font-family: var(--tekst-font); font-size: .78rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--goud); margin-bottom: 1rem; } .voet-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; } .voet-kolom a { display: inline-block; padding: .35rem 0; color: var(--gedempt); font-size: .93rem; text-decoration: none; } .voet-kolom a:hover { color: var(--tekst); } .voet-kolom [aria-current="true"] { color: var(--goud); text-decoration: underline; text-underline-offset: 3px; } .voet-adres p { margin: 0 0 .5rem; } .voet-adres a { display: flex; align-items: center; gap: .6rem; } .voet-adres .ico { width: 1.05rem; height: 1.05rem; flex: none; color: var(--goud); } .rustknop { margin-top: 1rem; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem .9rem; background: none; border: 1px solid var(--lijn); border-radius: var(--radius); color: var(--gedempt); font: inherit; font-size: .88rem; cursor: pointer; } .rustknop:hover { color: var(--tekst); border-color: var(--lijn-op); } .rustknop[aria-pressed="true"] { color: var(--goud); border-color: var(--goud); } .rustknop .ico { width: 1.05rem; height: 1.05rem; } .voet-regel { margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--lijn); font-size: .82rem; color: var(--gedempt); } .voet-regel a { color: var(--goud); } /* ── de wortelpagina, alleen een taalkeuze ────────────────────────────────── */ .wortel main { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 2rem 0; } .wortel-talen { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; } .wortel-talen a { display: inline-block; padding: .75rem 1.25rem; border: 1px solid var(--lijn-op); border-radius: var(--radius); text-decoration: none; } /* ── beperkte beweging ───────────────────────────────────────────────────── Met script is de klasse .rm leidend, want dan kan de bezoeker het zelf nog aanzetten met de knop in de voettekst. Zonder script neemt de mediaquery het over, zodat de voorkeur van het systeem hoe dan ook wordt gevolgd. */ @media (prefers-reduced-motion: reduce) { html:not(.js) { scroll-behavior: auto; } html:not(.js) .hero-ding > .ding-blad, html:not(.js) .hero-ding > .ding-schaduw { animation: none; } html:not(.js) .tafel-vlak { transform: none; } html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } @media (prefers-contrast: more) { :root { --lijn: rgba(240, 230, 214, .3); --lijn-op: rgba(240, 230, 214, .5); } } @media print { .kopbalk-houder, .melding, .voet-sociaal, .rustknop, .filmknop { display: none; } body { background: #fff; color: #000; } }