/* ===================================================================== VindUwHuisKoper.nl — landingspagina Alle kleur, maat, radius en motion komen uit tokens.css (design-system). Hieronder staan alleen samenstellingen daarvan, geen rauwe hex. Thema : licht is de basis (data-theme="light" op ), donker volgt de systeemvoorkeur via het scriptje in . Radius : één schaal, overal hetzelfde. vlak/paneel/kaart --r-lg (24px) bediening/chip/veld --r-sm (10px) Geen derde maat, geen uitzonderingen. Accent : één accent op de hele pagina — het merkgroen. Groene TEKST nooit als rauwe kleur: --accent-text wisselt mee met het thema (licht --brand-text 6,82:1 / donker --mint 12,03:1). Diepte : nooit met één schaduw. --elev-1/2/3 uit tokens.css zijn drielaags (contact, vorm, omgeving) en --edge legt de rand erop: op donker een lichtrandje boven, op licht een donker randje onder. BREEKPUNTEN — vier, en niet meer. Eerder waren het er tien en dat is de reden dat de pagina op een tablet uit elkaar viel: elk blok klapte op zijn eigen maat om. Wie er een toevoegt, haalt er eerst een weg. 520 velden onder elkaar 560 telefoon: tabel wordt kaartjes, biedregel stapelt, balk krimpt niet 860 tweeluiken en de tafel stapelen, voordelen naar 2 kolommen, nav 960 hero van twee kolommen naar één De plakkende tabelkolom en de veeghint hangen NIET aan een breekpunt maar aan een meting: schuift de tabel echt, dan pas verschijnen ze. Zie .tabel-schuift. ===================================================================== */ /* ---------- lokale semantische tokens ---------- */ :root { --accent-text: var(--mint); /* donker */ --radius-card: var(--r-lg); --radius-control: var(--r-sm); /* LEESREGEL — nagemeten, niet aangenomen. `ch` is de breedte van het cijfer 0 en dat cijfer is in Schibsted Grotesk breed: gemeten is 1 teken gemiddeld 8,46px en een `0` 11,61px. `62ch` leverde dus ~85 tekens per regel op, ver boven de norm van 45-75. Onderstaande waarden zijn teruggerekend naar echte tekens: 50ch ≈ 68 tekens (lopende tekst) 44ch ≈ 60 tekens (lead onder een kop: korter, want groter gezet) 52ch ≈ 71 tekens (kleine tekst mag langer, de letter is kleiner) */ --measure: 50ch; --measure-lead: 44ch; --measure-small: 52ch; --nav-h: 72px; /* Verticaal ritme en rasterafstanden. Twee maten, geen vier: binnen een kaartenraster staat alles dicht op elkaar, tussen tekstkolommen ruim. */ --gap-section: clamp(4.5rem, 8vw, 8.5rem); --gap-cards: clamp(1rem, 2vw, 1.5rem); /* 16 → 24px, kaartrasters */ --gap-kolom: clamp(1.75rem, 3.2vw, 3rem); /* 28 → 48px, tekstkolommen */ /* Icoonmaten: drie. Eerder waren het er zeven (13/15/16/18/20/26/28) en dat is precies het soort onafgestemdheid dat een pagina goedkoop maakt. */ --ico-sm: 16px; --ico-md: 20px; --ico-lg: 28px; /* Een vlak dat OP een getint vlak ligt. Op licht gaat dat omhoog naar wit, op donker omhoog naar lichter. Eén token, zodat de hoogtelogica in beide thema's dezelfde kant op werkt. */ --surface-on-tint: var(--bg-elev-2); } [data-theme="light"] { --accent-text: var(--brand-text); --surface-on-tint: var(--n-0); } /* ---------- basis ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--track-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; } /* KORREL — 12-09-2026. Een egaal wit vlak over 4000 pixels hoogte leest als een leeg document, niet als een oppervlak. Eén laag fijne ruis geeft het vlak materiaal, zoals papier dat heeft. Hij ligt VAST (position: fixed) en is pointer-events: none, zodat hij niet meescrollt en de GPU niet elke frame opnieuw laat tekenen. Sterkte 3,5% met soft-light: de gemiddelde helderheid verandert daarmee verwaarloosbaar (uitslag ±3 van 255), dus alle contrastmetingen blijven staan. Bewust géén extra verloop: tokens.css heeft een hard plafond voor decoratieve lagen en dat plafond is in de hero al bijna bereikt. */ body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; /* geen weduwe op de laatste regel van een kop */ } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } /* Focus — altijd zichtbaar, kleur uit de tokens (wisselt per thema/merk). Overal dezelfde dikte en dezelfde afstand: 2px, offset 3px. */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; } /* Ankers niet onder de plakkende balk laten vallen. */ [id] { scroll-margin-top: calc(var(--nav-h) + 16px); } .skip { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--bg); color: var(--text); border: 1px solid var(--border-input); padding: 12px 16px; border-radius: var(--radius-control); font-weight: 600; box-shadow: var(--elev-2); } .skip:focus { top: 12px; } .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--gap-section); } /* Getinte secties geven de pagina hoofdstukken. Ze wisselen elkaar af met gewone secties; twee getinte blokken naast elkaar lopen in elkaar over en dan is de rust juist wég. De hairline erboven en eronder maakt de overgang zichtbaar: zonder die lijn stonden er twee keer 128px leegte zonder dat er iets zei dat er een nieuw hoofdstuk begon. */ .section--tint { background: var(--bg-elev-1); border-block: 1px solid var(--hairline); } /* Alles wat óp een getinte sectie ligt, gaat een trap omhoog. Anders valt een kaart weg in zijn eigen achtergrond. */ .section--tint .tafel, .section--tint .formcard, .section--tint .cmp, .section--tint .cmp tbody th { background: var(--surface-on-tint); } .sechead { max-width: var(--measure); margin-bottom: clamp(2rem, 3.6vw, 3.5rem); } .sechead > * + * { margin-top: var(--s-5); } /* ---------- typografie ---------- */ /* Elke graad heeft zijn eigen letterafstand en regelhoogte: hoe groter de letter, hoe strakker beide. Dat is de optische correctie die het verschil maakt tussen "groot gezet" en "goed gezet". */ .h-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: var(--track-hero); } .h-sec { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); max-width: 20ch; } /* Voor een kop die bewust uit twee zinnen bestaat; 20ch maakt daar een toren van. */ .h-sec--wide { max-width: 28ch; } .h-card { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); font-weight: 650; } .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-secondary); max-width: var(--measure-lead); } .body { color: var(--text-secondary); max-width: var(--measure); } .small { font-size: var(--fs-small); letter-spacing: var(--track-small); color: var(--text-tertiary); max-width: var(--measure-small); } /* WEGWIJZER, GEEN VERSIERING — teruggebracht van zes naar drie. Boven elke sectiekop een klein kapitaaltje zetten is het patroon waaraan je een sjabloon herkent; dan zegt het niets meer. Er staan er nu nog drie, en die drie zijn precies de drie labels uit het menu bovenaan (waarom meerdere opkopers · eerlijk vergelijken · veelgestelde vragen). Ze vertellen dus waar u bent, in plaats van dat ze een kop aankondigen die het zelf al zegt. */ .eyebrow { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-weight: 650; color: var(--accent-text); margin: 0 0 var(--s-4); } .accent { color: var(--accent-text); } /* Cijfers die onder elkaar staan moeten dezelfde breedte hebben, anders "dansen" ze. Geldt voor de stapnummers en voor de vergelijkingstabel. */ .tnum, .tijdstap__n, .cmp { font-variant-numeric: tabular-nums; } /* ---------- iconen (Phosphor Icons, MIT) ---------- */ .ico { width: var(--ico-sm); height: var(--ico-sm); flex: none; fill: currentColor; } .ico--md { width: var(--ico-md); height: var(--ico-md); } .ico--lg { width: var(--ico-lg); height: var(--ico-lg); } /* ---------- knoppen ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 52px; padding: 14px 24px; border: 1px solid transparent; border-radius: var(--radius-control); font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.2; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .18s var(--ease-soft), box-shadow .18s var(--ease-soft), transform .12s var(--ease-soft), border-color .18s var(--ease-soft), color .18s var(--ease-soft); } .btn .ico { transition: transform .22s var(--ease-out-expo); } .btn:hover .ico--arrow { transform: translateX(3px); } /* De vulling loopt van --brand-btn naar donkerder, nooit naar lichter. Daardoor is het lichtste punt van de knop precies --brand-btn en houdt het witte label overal minstens 5,48:1. Een verloop naar boven toe lichter zou die eis stilletjes breken op de bovenrand. Nagemeten: lichtste 5,48 / donkerste 6,47; in hover 6,82 / 7,84. */ .btn--primary { background-color: var(--brand-btn); background-image: linear-gradient(180deg, var(--brand-btn), color-mix(in srgb, var(--brand-btn) 86%, var(--n-900))); color: var(--n-0); box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.14); } .btn--primary:hover { background-color: var(--brand-text); background-image: linear-gradient(180deg, var(--brand-text), color-mix(in srgb, var(--brand-text) 86%, var(--n-900))); box-shadow: var(--elev-2), inset 0 1px 0 rgba(255,255,255,.14); transform: translateY(-1px); } /* Indrukken moet gewicht hebben: de knop zakt in de pagina, de slagschaduw verdwijnt en er komt een schaduw ván boven ín de knop. */ .btn--primary:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.28); } /* Écht uitgeschakeld. --n-500 met --n-100 haalde 3,93:1 — onder de norm, en dat viel in een gewone meting niet op omdat de overgang nog de oude kleur liet zien. Nu --n-600 met wit: 6,49:1 op licht, 6,49 op donker (zelfde paar). */ .btn--primary[disabled] { background-color: var(--n-600); background-image: none; color: var(--n-0); cursor: not-allowed; transform: none; box-shadow: none; } .btn--quiet { background: transparent; color: var(--text); border-color: var(--border-input); } .btn--quiet:hover { border-color: var(--brand); background: var(--mint-12); } .btn--quiet:active { transform: translateY(1px); background: var(--mint-24); } .btn--sm { min-height: 44px; padding: 10px 16px; font-size: .95rem; } .btn--block { width: 100%; } /* WACHTSTAND ≠ UITGESCHAKELD. Een knop die aan het werk is, is niet onbeschikbaar — hij houdt dus zijn kleur en zijn 5,48:1. Grijs maken zou betekenen: "dit kan niet", terwijl er staat "bezig met versturen". */ .btn--primary.is-busy[disabled] { background-color: var(--brand-btn); background-image: linear-gradient(180deg, var(--brand-btn), color-mix(in srgb, var(--brand-btn) 86%, var(--n-900))); color: var(--n-0); cursor: progress; box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.14); } @media (prefers-reduced-motion: no-preference) { .btn.is-busy::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--mint-24); animation: puls 1.4s var(--ease-soft) infinite; } } @keyframes puls { 0%,100% { opacity: .25 } 50% { opacity: .9 } } /* ---------- navigatie ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--hairline); } @supports (backdrop-filter: blur(4px)) { .nav { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); } } /* De schaduw onder de balk is geen versiering maar systeemstatus: hij komt op zodra u de bovenkant van de pagina verlaat, en verdwijnt weer als u terug bent. Los laagje zodat er alleen opacity beweegt. */ .nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: var(--elev-1); } .nav__inner { min-height: var(--nav-h); display: flex; align-items: center; gap: var(--s-6); } .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.022em; text-decoration: none; margin-right: auto; } .logo span { color: var(--accent-text); } .nav__links { display: flex; align-items: center; gap: var(--s-6); } .nav__links a { position: relative; text-decoration: none; font-size: .97rem; font-weight: 500; color: var(--text-secondary); padding: 10px 2px; display: inline-block; transition: color .18s var(--ease-soft); } /* Het streepje groeit uit het midden in plaats van er ineens te staan. Eigen laagje, dus er beweegt alleen een transform. */ .nav__links a::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .22s var(--ease-out-expo); } .nav__links a:hover { color: var(--text); } .nav__links a:hover::after { transform: scaleX(1); } @media (max-width: 860px) { .nav__links { display: none; } } /* 72px vaste balk is op een telefoon 8,5% van het scherm, permanent. */ @media (max-width: 560px) { :root { --nav-h: 60px; } } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 4.5vw, 5rem) clamp(3.5rem, 7vw, 6.5rem); } /* Eén decoratieve laag, ruim binnen --bg-aurora-limit (niet stapelen). */ .hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none; inset: -18% -12% auto -22%; height: 78%; background: radial-gradient(58% 68% at 26% 32%, var(--mint-12), transparent 72%); } .hero .wrap { position: relative; z-index: 1; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); column-gap: var(--gap-kolom); row-gap: clamp(1.25rem, 2.4vw, 2rem); align-items: start; } /* De kop loopt over beide kolommen. Zo staat hij niet in een keurslijf van 582px en kan hij op de zin breken in plaats van op de kolomrand. */ .hero__grid > .h-hero { grid-column: 1 / -1; } .br-breed { display: none; } @media (min-width: 961px) { .br-breed { display: inline; } } .hero__copy > * + * { margin-top: var(--s-6); } .hero__copy .lead { max-width: var(--measure-lead); } .hero__copy .formcard { margin-top: var(--s-8); } .hero__media { position: relative; } .hero__media img { width: 100%; border-radius: var(--radius-card); aspect-ratio: 4 / 5; object-fit: cover; /* Een foto zonder rand zweeft; een rand zonder schaduw plakt. Allebei dus. */ box-shadow: var(--elev-3), inset 0 0 0 1px var(--hairline); } @media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s-10); } /* Het formulier is de hoofdactie: op mobiel blijft die boven de foto. */ .hero__media { order: 3; } .hero__media img { aspect-ratio: 16 / 11; } /* Een kaart van 520px in een kolom van 676px laat 156px dood gebied achter. */ .hero__copy .formcard { max-width: none; } } /* ---------- formulier ---------- */ .formcard { background: var(--bg-elev-1); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: clamp(1.25rem, 2.6vw, 1.875rem); box-shadow: var(--elev-3), var(--edge); max-width: 520px; } .formcard--wide { max-width: 620px; margin-inline: auto; } /* Postcode + huisnummer is NIET uniek (1017EP 604 = drie objecten), dus de toevoeging staat hier gewoon zichtbaar naast — niet weggestopt achter een "meer opties"-link. Leeg laten mag; dan vangt de keuzestap het op. */ .fields { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-4); } @media (max-width: 520px) { .fields { grid-template-columns: 1fr 1fr; } .field--pc { grid-column: 1 / -1; } } /* Subgrid houdt label, veld en foutregel van de drie velden op dezelfde as, ook als "Toevoeging (optioneel)" over twee regels valt. Zonder subgrid staat alles er gewoon onder elkaar per veld — alleen de uitlijning mist. */ @supports (grid-template-rows: subgrid) { .fields { grid-template-rows: auto auto auto; align-items: start; } .fields > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; } .fields > .field > label { align-self: end; } } .field label { display: block; font-size: var(--fs-small); font-weight: 650; letter-spacing: var(--track-small); margin-bottom: var(--s-2); transition: color .18s var(--ease-soft); } .field:focus-within label { color: var(--accent-text); } /* "(optioneel)" bleef eerder weg onder 640px — precies op de maat waar er nergens anders staat welk veld verplicht is. Hij blijft nu gewoon staan. */ .field__opt { font-weight: 400; color: var(--text-tertiary); } .field input { width: 100%; min-height: 52px; padding: 12px 16px; font: inherit; font-size: 1.0625rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-input); border-radius: var(--radius-control); /* Een invoerveld hoort iets in te liggen, niet op de kaart te liggen. */ box-shadow: inset 0 1px 2px color-mix(in srgb, var(--n-900) 6%, transparent); transition: border-color .18s var(--ease-soft), box-shadow .18s var(--ease-soft), background-color .18s var(--ease-soft); } .field input::placeholder { color: var(--text-tertiary); } .field input:hover { border-color: var(--brand); } /* Bij focus komt het veld naar voren: de holte verdwijnt en er komt een zachte ring omheen. De harde focusring blijft daarbovenop staan voor toetsenbord. */ .field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--mint-24); } .field input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .field.is-invalid input { border-color: var(--danger-text); } .field.is-invalid input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-text) 22%, transparent); } .field__err { display: none; align-items: center; gap: var(--s-2); margin-top: var(--s-2); font-size: var(--fs-small); color: var(--danger-text); } .field.is-invalid .field__err { display: flex; } @media (prefers-reduced-motion: no-preference) { .field.is-invalid .field__err { animation: fout-in .22s var(--ease-soft) both; } } @keyframes fout-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .form__hint { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--text-tertiary); } /* De eerlijke kanttekening hoort bij de knop, niet halverwege de pagina: hier neemt iemand het besluit. Daarom een eigen regel met icoon in plaats van kleine letters onderaan. */ .form__eerlijk { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--text-secondary); } .form__eerlijk .ico { margin-top: 3px; color: var(--accent-text); } .form__eerlijk a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; } .form__eerlijk a:hover { text-decoration-thickness: 2px; } .form__submit { margin-top: var(--s-5); } .trustrow { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); } .trustrow li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--text-secondary); } .trustrow .ico { color: var(--accent-text); } /* ---------- keuzestap: welke woning op dit adres? ---------- */ /* Meestal overgeslagen. Als hij verschijnt is het de hoofdtaak, dus komt hij op de plek van het formulier te staan in plaats van eronder. */ .is-keuze .formcard__form { display: none; } .keuze__kop { margin-bottom: var(--s-3); } .keuze__intro { margin-bottom: var(--s-5); color: var(--text-secondary); } .keuze__set { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); } .optie { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding: 16px; min-height: 56px; cursor: pointer; background: var(--bg); border: 1px solid var(--border-input); border-radius: var(--radius-control); transition: border-color .18s var(--ease-soft), background-color .18s var(--ease-soft), box-shadow .18s var(--ease-soft); } .optie:hover { border-color: var(--brand); background: var(--mint-12); } .optie:active { box-shadow: inset 0 1px 3px color-mix(in srgb, var(--n-900) 10%, transparent); } .optie__radio { width: var(--ico-md); height: var(--ico-md); margin: 0; accent-color: var(--brand-btn); flex: none; } /* De hele regel krijgt de focusring; twee ringen over elkaar is rommelig. */ .optie__radio:focus-visible { outline: none; } .optie__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .optie__adres { font-weight: 650; } .optie__meta { font-size: var(--fs-small); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .optie__vink { color: var(--accent-text); opacity: 0; transform: scale(.7); transition: opacity .18s var(--ease-soft), transform .22s var(--ease-out-expo); } .optie:has(.optie__radio:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); background: var(--mint-12); } .optie:has(.optie__radio:checked) .optie__vink { opacity: 1; transform: none; } /* Zonder :has() blijft de radio zelf de aanwijzing — niets kapot. */ .optie:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; } /* Wachtstand van de adres-opzoeking. De balkjes hebben exact de maat van de regels die erna komen (56px hoog, dezelfde afstand), dus er springt niets op het moment dat de echte lijst binnenkomt. Verschijnt alleen als het opzoeken langer dan 400ms duurt; daaronder is een skelet alleen geflikker. */ .skelet { display: grid; gap: var(--s-3); } .skelet__regel { min-height: 56px; border-radius: var(--radius-control); border: 1px solid var(--hairline); background: var(--bg-elev-2); } @media (prefers-reduced-motion: no-preference) { .skelet__regel { animation: skelet 1.5s var(--ease-soft) infinite; animation-delay: var(--d, 0ms); } } @keyframes skelet { 0%,100% { opacity: .55 } 50% { opacity: 1 } } /* Tijdens het opzoeken is er nog niets te kiezen, dus staan de knoppen er ook niet. Een knop die er wel staat maar niets doet, is erger dan geen knop. */ .keuze.is-laden .keuze__acties, .keuze.is-laden .form__hint { display: none; } .keuze__err { margin-top: var(--s-4); } .keuze__err.is-visible { display: flex; } .keuze__acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); } /* Bevestiging en mislukking. Zelfde vorm, andere familie — en allebei ín de kaart. Een browserdialoog (window.alert) was de enige plek waar het merk wegviel, en juist daar wil iemand van 55+ weten wat hij nu moet doen. */ .done, .mislukt { display: none; gap: var(--s-4); align-items: flex-start; padding: var(--s-6); border-radius: var(--radius-control); } .done { background: var(--mint-12); border: 1px solid var(--mint-24); } .done .ico--lg { color: var(--accent-text); margin-top: 2px; } .mislukt { background: var(--danger-soft); border: 1px solid var(--danger); } .mislukt .ico--lg { color: var(--danger-text); margin-top: 2px; } .mislukt a { color: var(--accent-text); text-underline-offset: 3px; } /* .small staat standaard op --text-tertiary. Dat klopt op de pagina, maar niet op deze twee vlakken: ze liggen een trap hoger (mint-12 / danger-soft) en in donker zakt tertiair daar naar 4,19:1 (bevestiging) en 4,72:1 (mislukking). Zelfde correctie als eerder op de verzonken helft van de tafel: secundair. Nagemeten na de wijziging: 6,73 en 7,33 in donker, ruim boven de norm. */ .done .small, .mislukt .small { color: var(--text-secondary); } .done.is-visible, .mislukt.is-visible { display: flex; } .is-sent .formcard__form { display: none; } @media (prefers-reduced-motion: no-preference) { .done.is-visible, .mislukt.is-visible { animation: rise .3s var(--ease-out-expo) both; } } /* ===================================================================== DE TAFEL — het hart van de pagina Eén bod tegenover alle biedingen, als één voorwerp in plaats van twee losse panelen. Dat is een bewuste keuze en niet alleen vormgeving: - de twee helften delen dezelfde rijen (subgrid), dus kop, biedingen en conclusie staan links en rechts op exact dezelfde lijn. Het oog kan de helften daardoor vergelijken zonder te zoeken; - de linkerhelft heeft één bod en daaronder LEEGTE. Die leegte is het argument. Hij bestaat alleen doordat de rechterhelft de hoogte bepaalt; twee losse panelen zouden allebei netjes om hun eigen inhoud sluiten en dan valt precies het punt weg dat we willen maken; - de linkerhelft ligt VERZONKEN in de kaart en de rechterhelft ligt op het kaartoppervlak met een merkrand ernaast. Eerder waren het twee bijna-witte vlakken op wit (1,05:1 onderling) en dan moet het oog het verschil uit de tekst halen. Nu is er figuur en achtergrond; - de balken groeien terwijl u scrolt, van links naar rechts en van boven naar beneden: de biedingen komen binnen. Dat is informatie, geen effect. ⛔ Er staan bewust geen bedragen op. Een balk toont een verhouding; een bedrag van ons zou het anker worden waar elk echt bod tegen afgaat. En de drie regels rechts zijn géén belofte over het aantal — de onderschriftregel staat daarom direct onder dit blok en niet drie blokken verderop. ===================================================================== */ .tafel { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface-on-tint); box-shadow: var(--elev-2), var(--edge); overflow: hidden; } .tafel__col { grid-row: 1 / -1; display: grid; grid-template-rows: auto 1fr auto; /* terugval zonder subgrid */ padding: clamp(1.25rem, 2.6vw, 2rem); gap: var(--s-6); } @supports (grid-template-rows: subgrid) { .tafel__col { grid-template-rows: subgrid; } } /* Verzonken: dit is de helft waar iets ontbreekt. */ .tafel__col--een { background: color-mix(in srgb, var(--text) 4%, transparent); box-shadow: inset -1px 0 0 var(--hairline); } /* Het antwoord. Een echte groene wassing plus een merkrand aan de zijkant. --mint-24 alleen bracht de twee helften op 1,14:1 en dat is te weinig om "hier tegenover daar" te zien zonder te lezen. 22% merkgroen over het kaartoppervlak brengt het op 1,30:1 en houdt alle tekst ruim boven de norm (nagemeten). Bewust geen donker vlak: dat zou dit blok laten schreeuwen op een pagina die het juist van rust moet hebben. */ .tafel__col--alle { background: color-mix(in srgb, var(--brand) 22%, var(--surface-on-tint)); box-shadow: inset 3px 0 0 var(--brand); } [data-theme="dark"] .tafel__col--alle { background: color-mix(in srgb, var(--mint) 14%, var(--bg-elev-2)); } .tafel__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .tafel__head .ico--lg { color: var(--accent-text); } /* Stond op 16,8px terwijl de lopende tekst 17,3px was: omgekeerde hiërarchie, op precies het blok dat het belangrijkst is. Nu gelijk aan .h-card. */ .tafel__head h3 { font-size: var(--fs-h3); font-weight: 650; letter-spacing: var(--track-h3); line-height: var(--lh-h3); flex: 1 1 12ch; } .tafel__count { /* tertiair haalde op het mint-vlak in donker 4,33:1 (norm 4,5) — dus secundair */ font-size: var(--fs-small); font-weight: 650; color: var(--text-secondary); margin-left: auto; } @media (max-width: 560px) { .tafel__count { margin-left: 0; flex-basis: 100%; } } /* De biedingen zelf. space-between duwt de "verder niets"-regel naar de onderkant van de linkerhelft, zodat de leegte ertussen valt. */ .tafel__body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); } .bids { display: grid; gap: var(--s-3); align-content: start; } /* Drie kolommen: wie — hoeveel (schematisch) — wat het is. ⚠️ De derde kolom heeft een VASTE ondergrens en dat is geen detail. Stond hij op `auto`, dan werd hij per regel zo breed als zijn eigen inhoud: bij "bod" 26px en bij de chip "hoogste bod" 115px. De 1fr-balk ernaast kromp daardoor precies op de rij die het hoogste bod toont — gemeten: 184px tegen 235px voor de regel eronder. Het beeld zei dus het omgekeerde van de tekst. Om dezelfde reden is de eerste kolom vast: alleen dan is 72% links even lang als 72% rechts, en pas dan mag je de helften met elkaar vergelijken. */ .bid { display: grid; grid-template-columns: 6rem minmax(48px, 1fr) 7.25rem; align-items: center; gap: var(--s-3); padding: 12px 16px; min-height: 56px; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius-control); box-shadow: var(--elev-1); } .bid > strong { font-weight: 650; font-size: .98rem; letter-spacing: -.008em; } .bid__bar { height: 10px; border-radius: var(--r-full); background: var(--mint-24); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--n-900) 8%, transparent); } .bid__bar > i { display: block; height: 100%; width: var(--w, 60%); border-radius: inherit; transform-origin: left center; /* Twee tinten van hetzelfde groen: de balk krijgt daardoor een vorm in plaats van een kleur. Beide tinten zijn vlak-gebruik, geen tekst. */ background: linear-gradient(90deg, var(--brand-btn), var(--brand)); } .bid__note { font-size: var(--fs-small); color: var(--text-secondary); justify-self: end; } /* De gemarkeerde regel mag NIET hoger worden dan de andere: een rij die 2px uit de pas loopt zie je niet bewust, maar je voelt het. Daarom een ring via box-shadow (neemt geen ruimte) en geen dikkere rand. */ .bid--pick { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--elev-2); } .chip { justify-self: end; display: inline-flex; align-items: center; gap: var(--s-1); background: var(--brand-btn); color: var(--n-0); font-size: .78rem; font-weight: 650; letter-spacing: .01em; padding: 4px 8px; border-radius: var(--radius-control); box-shadow: var(--elev-1); white-space: nowrap; } .chip .ico { width: 14px; height: 14px; } /* Drie puntjes onder de laatste biedregel: de lijst is langer dan wat hier past. Bewust géén rijvorm — geen vlak, geen rand, geen balk — zodat hij onmogelijk als een vierde bod te lezen is. Hij versterkt "alle aangesloten opkopers" zonder de harde grens te raken dat wij nooit een aantal beloven. */ .bid--meer { display: block; background: transparent; border: 0; box-shadow: none; min-height: 0; padding: var(--s-1) 16px 0; text-align: center; color: var(--text-secondary); letter-spacing: .18em; line-height: 1; } /* Op een telefoon is er geen ruimte voor drie kolommen naast elkaar zonder de balk onleesbaar te maken; dan krijgt de balk een eigen regel. */ @media (max-width: 560px) { .bid { grid-template-columns: 1fr auto; } .bid__bar { grid-column: 1 / -1; order: 3; } /* De chip is 28px hoog en het woordje "bod" 24px; zonder deze regel is de gemarkeerde rij 3px hoger dan de andere. Dat zie je niet bewust, je voelt het — en juist in dit blok mag niets uit de pas lopen. */ .bid > strong, .bid__note { display: flex; align-items: center; min-height: 28px; } } /* De leegte onder het ene bod. Geen nepregels, geen kruisjes: een enkele stille regel op de onderrand van de helft, met niets ertussen. */ .tafel__leeg { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px dashed var(--border-input); /* Tertiair haalde op de verzonken helft in donker 4,34:1 (norm 4,5). Zelfde valkuil als eerder bij het telwoord: een tint die op de PAGINA klopt, klopt niet meer op een vlak dat een trap verder ligt. */ font-size: var(--fs-small); color: var(--text-secondary); } .tafel__out { font-size: .98rem; color: var(--text-secondary); max-width: 34ch; } .tafel__col--alle .tafel__out { color: var(--text); font-weight: 600; } /* De onderschriftregel hoort direct onder het blok waar hij over gaat. */ .tafel__bijschrift { margin-top: var(--s-5); color: var(--text-secondary); } @media (max-width: 860px) { .tafel { grid-template-columns: 1fr; grid-template-rows: auto; } .tafel__col { grid-row: auto; grid-template-rows: auto; } .tafel__col--een { box-shadow: inset 0 -1px 0 var(--hairline); } .tafel__col--alle { box-shadow: inset 0 3px 0 var(--brand); } /* Gestapeld is er geen tweede helft die de hoogte bepaalt, dus de leegte moet zelf ruimte vragen. Anders valt het argument weg. */ .tafel__col--een .tafel__leeg { margin-top: var(--s-8); } } /* ---------- uitgelicht blok ---------- */ /* Een tweede punt dat te belangrijk is voor een kaartje tussen de rest. Zelfde mint-vlak als de rechterhelft van de tafel, zodat het één gedachte blijft. */ .notice { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: start; margin-top: clamp(1.75rem, 3.2vw, 2.75rem); padding: clamp(1.375rem, 2.8vw, 2.125rem); background: var(--mint-12); border: 1px solid var(--mint-24); border-radius: var(--radius-card); box-shadow: var(--edge); } .notice .ico--lg { color: var(--accent-text); margin-top: 2px; } .notice h3 { margin-bottom: var(--s-3); } .notice p { max-width: var(--measure); color: var(--text-secondary); } @media (max-width: 560px) { .notice { grid-template-columns: 1fr; gap: var(--s-4); } } .statement { margin-top: clamp(2rem, 4vw, 3.5rem); max-width: 26ch; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-statement); line-height: 1.18; letter-spacing: var(--track-h2); text-wrap: balance; } /* ---------- tweeluik: smalle kop links, inhoud rechts ---------- Het ritme-systeem van deze pagina kent drie maten en die wisselen elkaar af, zodat er nergens twee blokken achter elkaar dezelfde verhouding hebben: VOL kop over de volle breedte, inhoud eronder (hero, het verschil, de tabel) TWEELUIK 38/62 met een blijvende kop links (hoe het werkt, de vragen) ONGELIJK 55/45 beeld tegenover tekst (waarom verkopers kiezen) De kop blijft in het tweeluik staan terwijl u leest. Dat is geen truc: bij een tijdlijn en bij vijftien vragen wilt u weten waar u bent. */ .tweeluik { display: grid; grid-template-columns: .38fr .62fr; gap: var(--gap-kolom); align-items: start; } /* ⚠️ Deze kop krijgt GEEN scroll-reveal, en dat is geen slordigheid. Een `view()`-tijdlijn meet hoe ver een element door het beeld beweegt. Een plakkend element beweegt niet meer zodra het vastzit, dus de voortgang bevriest op het beginpunt — gemeten: opacity 0 en translateY(18px) op élke scrollstand, dus de kop kwam nooit tevoorschijn. Wie hier ooit `.reveal` bijzet, breekt de kop stil. */ .tweeluik__kop { position: sticky; top: calc(var(--nav-h) + var(--s-6)); margin-bottom: 0; } @media (max-width: 860px) { .tweeluik { grid-template-columns: 1fr; gap: var(--s-10); } .tweeluik__kop { position: static; } } /* ---------- tijdlijn (hoe het werkt) ---------- Drie stappen zijn een volgorde. Drie kolommen naast elkaar zeggen "drie gelijkwaardige dingen"; een verticale lijn zegt "eerst dit, dan dat". DE MERKRAND. Deze lijn is exact dezelfde behandeling als op de antwoordhelft van de tafel: 3px, vol --brand, op de voorste kant van het blok. Hij stond hier eerst op 2px en 35% dekking, en dan is het een ander ding op een andere plek — een signatuur die één keer voorkomt is geen signatuur. Nu komt hij twee keer terug met dezelfde maat, dezelfde kleur en dezelfde betekenis: *waar groen ligt, ligt de route die wij aanbieden.* Nergens anders op de pagina staat merkgroen als vlak. */ .tijdlijn { display: grid; } .tijdstap { position: relative; display: grid; grid-template-columns: 3.25rem 1fr; column-gap: var(--s-5); padding-bottom: var(--s-12); } .tijdstap:last-child { padding-bottom: 0; } .tijdstap::before { content: ""; position: absolute; left: calc(1.625rem - 1.5px); top: 2.6rem; bottom: 0; width: 3px; border-radius: 3px; background: var(--brand); } .tijdstap:last-child::before { display: none; } .tijdstap__n { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -.035em; color: var(--accent-text); font-variant-numeric: tabular-nums; text-align: center; } .tijdstap h3 { margin-bottom: var(--s-3); } @media (max-width: 560px) { .tijdstap { grid-template-columns: 2.5rem 1fr; column-gap: var(--s-4); } .tijdstap::before { left: calc(1.25rem - 1.5px); } .tijdstap__n { font-size: 1.5rem; } } /* ---------- voordelen: beeld tegenover een kale lijst ---------- Hier stonden vijf kaarten. Vier daarvan groepeerden niets — ze zetten een randje om een alinea en herhaalden dat vier keer. Een kaart hoort iets te groeperen, hij is geen decoratie. Wat overblijft groepeert door nabijheid en door het icoon: precies genoeg, en het scheelt vier vakjes. Verhouding 60/40 (1,2fr tegen 0,8fr), bewust ongelijk. Geen enkel blok op deze pagina heeft dezelfde verdeling als het blok ervoor. */ .voordelen { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--gap-kolom); align-items: start; } .voordelen__beeld { margin: 0; } .voordelen__beeld img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--elev-2), inset 0 0 0 1px var(--hairline); } .voordelen__beeld figcaption { margin-top: var(--s-6); display: grid; gap: var(--s-3); max-width: var(--measure); } .voordelen__lijst { display: grid; gap: var(--s-10); } .voordeel { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; } .voordeel .ico--lg { color: var(--accent-text); margin-top: 2px; } .voordeel h3 { margin-bottom: var(--s-2); } @media (max-width: 860px) { .voordelen { grid-template-columns: 1fr; gap: var(--s-12); } /* Op tablet naast elkaar in plaats van een toren van losse regels. */ .voordelen__lijst { grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--gap-kolom); } } @media (max-width: 560px) { .voordelen__lijst { grid-template-columns: 1fr; gap: var(--s-8); } } /* ---------- vergelijkingstabel ---------- */ .tablewrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--hairline); box-shadow: var(--elev-1), var(--edge); } .tablewrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .cmp { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--bg-elev-1); } .cmp th, .cmp td { padding: 16px; text-align: left; vertical-align: top; font-size: .97rem; } .cmp thead th { font-size: var(--fs-small); font-weight: 700; color: var(--text); white-space: nowrap; letter-spacing: var(--track-small); } .cmp thead th:first-child { width: 22%; } .cmp tbody th { font-weight: 650; color: var(--text); width: 22%; } .cmp tbody td { color: var(--text-secondary); } .cmp tbody tr > * { border-top: 1px solid var(--hairline); } .cmp .ours { background: var(--mint-24); } [data-theme="light"] .cmp .ours { background: var(--mint-12); } .cmp .ours td, .cmp thead .ours { color: var(--text); } /* De rij die u aanwijst licht op: dat maakt een brede tabel leesbaar zonder dat er lijnen bij hoeven. */ .cmp tbody tr:hover > *:not(.ours) { background: color-mix(in srgb, var(--text) 4%, transparent); } .mark { display: inline-flex; align-items: flex-start; gap: var(--s-2); } .mark .ico { margin-top: 3px; } .mark--yes .ico { color: var(--accent-text); } .mark--neutral .ico { color: var(--text-tertiary); } /* De veeghint en de plakkende kolom horen bij "de tabel schuift", niet bij een losse pixelbreedte. Dat was eerder wél zo (max-width: 760px) en precies op 768px — een staande tablet — schoof de tabel 98px zonder hint en zonder plakkende kolom. Een klein scriptje meet nu of hij écht schuift en zet .tabel-schuift op de container; de bron van waarheid is daarmee de tabel zelf en niet een getal dat iemand moet onthouden. */ .swipehint { display: none; margin-bottom: var(--s-3); } .tabel-schuift .swipehint { display: block; } /* Zijwaarts scrollen zonder te weten wélke regel je leest, is geen tabel meer. De eerste kolom blijft daarom staan — mét een rand en een schaduw, anders schuift de inhoud er zichtbaar onderdoor met niets ertussen. */ .tabel-schuift .cmp thead th:first-child, .tabel-schuift .cmp tbody th { position: sticky; left: 0; z-index: 1; width: 132px; background: var(--bg-elev-1); border-right: 1px solid var(--hairline); box-shadow: 6px 0 8px -6px rgba(0,0,0,.18); } .section--tint .tabel-schuift .cmp thead th:first-child, .tabel-schuift .cmp thead th:first-child { background: var(--bg-elev-1); } /* Koppen mogen afbreken zodra de ruimte krap wordt; dat scheelt zo'n 90px natuurlijke tabelbreedte en dus een stuk minder vegen. */ @media (max-width: 860px) { .cmp thead th { white-space: normal; } } /* Een tabel van 820px op een scherm van 350px is geen tabel meer: dan sleep je 472px heen en weer om zeven rijen te lezen. Onder 560px wordt elke rij dus een eigen kaartje met het onderwerp als kop en de drie routes eronder. ⚠️ display:block haalt de tabelsemantiek weg; daarom staan de ARIA-rollen expliciet in de HTML, zodat een schermlezer het nog steeds als tabel leest. */ @media (max-width: 560px) { .tablewrap { overflow: visible; border: 0; box-shadow: none; } .cmp, .cmp thead, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; } .cmp { min-width: 0; background: transparent; } .cmp thead { display: none; } .cmp tbody tr { border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-elev-1); box-shadow: var(--elev-1), var(--edge); overflow: hidden; margin-bottom: var(--s-4); } .section--tint .cmp tbody tr { background: var(--surface-on-tint); } .cmp tbody th { width: auto; padding: var(--s-4) var(--s-4) var(--s-2); font-size: var(--fs-h3); letter-spacing: var(--track-h3); border-top: 0; } .cmp tbody td { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--hairline); } .cmp tbody td::before { content: attr(data-kop); display: block; font-size: var(--fs-small); color: var(--text-tertiary); margin-bottom: 2px; } } /* ---------- vertrouwen ---------- */ .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-kolom); } .trio + .notice { margin-top: clamp(2.25rem, 4vw, 3.5rem); } @media (max-width: 860px) { .trio { grid-template-columns: 1fr; gap: var(--s-8); } } @supports (grid-template-rows: subgrid) { @media (min-width: 861px) { .trio { grid-template-rows: auto auto auto; } .trust { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: var(--s-4); } } } .trust { display: flex; flex-direction: column; gap: var(--s-4); } .trust .ico--lg { color: var(--accent-text); } .trust p { color: var(--text-secondary); } .trust p + p { margin-top: var(--s-4); } /* ---------- veelgestelde vragen ---------- */ .faq details { border-top: 1px solid var(--hairline); } .faq details:last-of-type { border-bottom: 1px solid var(--hairline); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: 20px 0; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 650; font-size: 1.08rem; letter-spacing: -.012em; transition: color .18s var(--ease-soft); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent-text); } .faq summary .ico { color: var(--accent-text); transition: transform .24s var(--ease-out-expo); } .faq details[open] summary .ico { transform: rotate(180deg); } .faq__a { padding: 0 0 20px; color: var(--text-secondary); max-width: var(--measure); } .faq__a p + p { margin-top: var(--s-4); } /* Een vraag die openklapt hoort open te GAAN, niet ineens open te staan. Native
kan dat sinds ::details-content; interpolate-size maakt de overgang naar "auto" mogelijk. Ontbreekt een van beide, dan valt dit blok weg en blijft de eenvoudige verschijn-animatie hieronder over. */ @supports selector(::details-content) and (interpolate-size: allow-keywords) { @media (prefers-reduced-motion: no-preference) { :root { interpolate-size: allow-keywords; } .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease-out-expo), content-visibility .3s allow-discrete; } .faq details[open]::details-content { block-size: auto; } } } /* ---------- slot ---------- */ .closing { text-align: center; } .closing .h-sec { max-width: 22ch; margin-inline: auto; } .closing .lead { max-width: var(--measure-lead); margin-inline: auto; } .closing .formcard { text-align: left; margin-top: clamp(2rem, 4vw, 3rem); } .closing .trustrow { justify-content: center; } /* Dezelfde lichtval als de hero, als boekensteun om de pagina heen. Eén laag, niet gestapeld — zie de plafondregel in tokens.css. */ .closing-sec { position: relative; overflow: hidden; } .closing-sec::before { content: ""; position: absolute; z-index: 0; pointer-events: none; inset: auto -14% -24% -18%; height: 76%; background: radial-gradient(56% 66% at 42% 74%, var(--mint-12), transparent 72%); } .closing-sec > .wrap { position: relative; z-index: 1; } /* ---------- voettekst ---------- */ .foot { background: var(--bg-footer); border-top: 1px solid var(--hairline); padding-block: var(--s-16) var(--s-10); } .foot__grid { display: flex; flex-wrap: wrap; gap: var(--s-8); justify-content: space-between; align-items: flex-start; } .foot__links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); } .foot a { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-small); padding-block: var(--s-1); /* 22px was krap; nu 30px aanraakhoogte */ } .foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .foot__legal { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--hairline); } /* Zonder JavaScript doet de knop niets. Dan hoort er te staan wat wél kan. */ .geenjs { display: block; margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--mint-24); border-radius: var(--radius-control); background: var(--mint-12); font-size: var(--fs-small); color: var(--text); } /* ===================================================================== MOTION — kalm en sturend. Alleen transform en opacity, 180-400ms. Alles hieronder staat achter prefers-reduced-motion; zonder beweging toont de pagina gewoon de eindstaat (geen verborgen inhoud). Regel: elke animatie draagt informatie. Beweging zonder boodschap staat er niet in — en dat is in deze ronde de helft geworden. Wat eruit is: de uitgelichte blokken, de uitspraak, de tabel, het onderschrift, de vertrouwensdrieslag en het slotblok. Die kwamen alleen omhoog omdat het kon. Wat erin blijft, met de reden erbij: .lift hero, leesvolgorde — kop, belofte, formulier, beeld .reveal alleen op sectiekoppen en op de tafel: "hier begint een nieuw hoofdstuk". Vijf plekken op de hele pagina: vier sectiekoppen en de tafel. De twee plakkende koppen krijgen hem NIET, zie de waarschuwing bij .tweeluik__kop .reveal--na tijdlijn: de stappen verschijnen op volgorde, want ze zijn een volgorde .bid__bar de biedingen komen binnen terwijl u leest. Oorzaak/gevolg .nav::before u heeft de bovenkant van de pagina verlaten. Navigatie ⚠️ De hero beweegt alleen, hij faadt NIET. De reden is niet esthetisch: een element op opacity 0 telt niet mee voor LCP, dus een hero die zijn zichtbaarheid aan een animatie ophangt verschuift zijn eigen LCP-tijd — en als de animatie wordt getemporiseerd (achtergrondtab, prerender, trage machine) staat de belangrijkste schermvulling leeg. Onder de vouw mag .reveal wél faden; daar staat niets essentieels. ===================================================================== */ /* Ook de OVERGANGEN vallen stil bij "minder beweging". Geen botte `transition: none` over alles heen: kleur, achtergrond, rand, schaduw en focusring mogen blijven bewegen, want dat is terugkoppeling en geen beweging. Wat eruit gaat is alles wat verplaatst of schaalt — de knop die 1px zakt, het pijltje dat opzij schuift, het vinkje dat opzwelt, de caret die draait. Dat is AAA en dus geen verplichting; het kost hier één regel. ⚠️ `!important` is hier geen luiheid maar noodzaak, en dat is nagemeten. Een `*`-selector heeft specificiteit 0 en verliest van élke klasseregel; een mediaquery verandert daar niets aan. Zonder `!important` bleef `transform` gewoon in de lijst van `.btn` staan — gecontroleerd in de browser: zonder background-color, box-shadow, transform, border-color, color mét color, background-color, border-color, box-shadow, opacity, outline-color Dit is precies het geval waarvoor `!important` bedoeld is: een regel die élke component moet overrulen, ongeacht wie hem later schrijft. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-property: color, background-color, border-color, box-shadow, opacity, outline-color !important; } } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes rise-klein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes schuif { from { transform: translateY(14px); } to { transform: none; } } @keyframes groei { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes kom-op { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { /* Eén georkestreerd laadmoment in de hero, in leesvolgorde: kop → belofte → formulier → foto. De kop start zonder vertraging zodat het LCP-element niet op een animatie wacht. 380ms, binnen de huisregel. */ .lift { animation: schuif .38s var(--ease-out-expo) both; animation-delay: var(--d, 0ms); } /* Scroll-reveal zonder JS. Ontbreekt de ondersteuning, dan valt dit blok weg en staat alles gewoon zichtbaar. */ @supports (animation-timeline: view()) { .reveal { animation: rise linear both; animation-timeline: view(); /* Aan de ENTRY-fase gekoppeld, niet aan cover: die laatste schaalt mee met de hoogte van het blok, waardoor een lang blok pas honderden pixels later volledig zichtbaar is. Entry is begrensd door de viewport en dus voorspelbaar — ook voor de lange panelen op mobiel. */ animation-range: entry 5% entry 45%; } /* Een rij kaarten hoort niet als blok te verschijnen maar op volgorde, van links naar rechts. --i is de plaats in de rij; elk volgend element begint 6% later in dezelfde scrollafstand. */ .reveal--na { animation: rise-klein linear both; animation-timeline: view(); animation-range: entry calc(6% + var(--i, 0) * 6%) entry calc(44% + var(--i, 0) * 6%); } /* De schaduw onder de navigatiebalk komt op zodra u de bovenkant verlaat. Systeemstatus, geen versiering. */ .nav::before { animation: kom-op linear both; animation-timeline: scroll(root); animation-range: 0 140px; } /* DE TAFEL. De balken groeien terwijl u door het blok scrolt: eerst het ene bod links, daarna de biedingen rechts op volgorde, en als laatste het merkje bij het hoogste bod. Wie snel doorscrolt ziet het eindbeeld; wie rustig leest ziet de biedingen binnenkomen. */ .tafel .bid__bar > i { animation: groei linear both; animation-timeline: view(); animation-range: entry calc(14% + var(--i, 0) * 7%) entry calc(46% + var(--i, 0) * 7%); } .tafel .chip, .tafel__leeg { animation: kom-op linear both; animation-timeline: view(); animation-range: entry 46% entry 62%; } } /* Terugval voor browsers zonder scroll-tijdlijn: de FAQ-tekst verschijnt rustig bij het openklappen. Waar ::details-content wél werkt, neemt die het over (hierboven). */ .faq details[open] .faq__a { animation: rise-klein .24s var(--ease-soft) both; } }