/* configurator.css - de publieke woningconfigurator (Rottumhuys). * Premium redesign 18-8-2026: "Atelier". Dezelfde warme, minerale identiteit (tokens.css), * maar als high-end digitale ervaring: een editoriale, beeldgedragen landing (hero met * echte renders uit de catalogus, ticker, donkere "zo werkt het"-sectie, galerij, slot-CTA), * grote Fraunces-typografie met lijn-onthullingen, en een wizard met meer lucht, diepte en * beeld (plattegronden op papier, cinematische beeldstage, ink-prijsblok). * Erft de showcase-mechaniek van 15-7-2026: ambient decor dat meekleurt met het woningtype * (--wt-h), View Transitions tussen stappen, odometer-prijs met veer-easing, 3D-tilt. * * Regels: bouwt UITSLUITEND op tokens uit tokens.css; hergebruikt style.css (.btn, .field, * .toast). Mobile-first (375px), tap targets >= 44px. De publieke configurator is ALTIJD * licht (thema-licht op ; de showroom-look, bevestigd 15-7-2026). * Alle beweging op transform/opacity/clip-path; prefers-reduced-motion schakelt ALLES uit; * moderne features (scroll-timeline, view transitions, linear(), oklch, color-mix) zijn * progressive enhancement met nette fallbacks. */ /* ---------- Basis ---------- */ .cfg-body { min-height: 100svh; display: flex; flex-direction: column; background-image: none; } /* main vult de ruimte tussen topbar en footer. De landing (#cfg-landing) is gewone flow: hero (min. viewport-hoog) + secties; de wizard (.cfg-app) houdt zijn eigen hoogte. */ .cfg-body main { flex: 1; display: flex; flex-direction: column; } /* Landing en wizard zijn flex-items van main; width:100% houdt ze op de kolombreedte (een auto-marge in de dwarsrichting schakelt align-self:stretch uit en liet .cfg-app naar zijn max-content groeien -> horizontale overflow op mobiel). */ #cfg-landing, .cfg-app { width: 100%; } /* Geen scroll-behavior:smooth op : de stapwissel scrolt bewust INSTANT naar boven (js window.scrollTo(0,0)); de ankerlink in de hero scrolt via JS zacht. */ /* Het hidden-attribuut moet ALTIJD winnen, ook van componenten met een eigen display (.cfg-hero is grid, .cfg-mobilebar is flex). Zonder deze guard overschrijft de auteur-display de UA-regel en blijft "verborgen" zichtbaar. */ .cfg-body [hidden] { display: none !important; } /* Selectiekleur in de merktint: klein detail, groot gevoel. */ .cfg-body ::selection { background: color-mix(in srgb, var(--accent-soft-border) 70%, transparent); color: var(--brand-strong); } /* Alleen voor schermlezers (aria-live prijs-mirror). */ .cfg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Gedeelde maat: inhoud gecentreerd op --content-wide met dezelfde zijmarge als de wizard. */ .cfg-sectie-inner { width: 100%; max-width: var(--content-wide); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } /* ---------- Ambient decor (vast, achter alles) ---------- Drie zacht driftende mesh-lagen in de woningtype-tint + een statische korrel. Alleen transform-animaties; de lagen zijn groot genoeg om nooit randen te tonen. */ .cfg-ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .cfg-ambient .laag { position: absolute; inset: -22%; } .cfg-ambient .laag-a { background: radial-gradient(46% 38% at 22% 18%, var(--ambient-a) 0%, transparent 70%), radial-gradient(34% 30% at 78% 72%, var(--ambient-a) 0%, transparent 70%); } .cfg-ambient .laag-b { background: radial-gradient(40% 34% at 76% 16%, var(--ambient-b) 0%, transparent 70%), radial-gradient(30% 26% at 18% 82%, var(--ambient-b) 0%, transparent 70%); } .cfg-ambient .laag-c { background: radial-gradient(36% 44% at 52% 96%, var(--ambient-c) 0%, transparent 70%), radial-gradient(26% 22% at 8% 42%, var(--ambient-c) 0%, transparent 72%); } .cfg-ambient .korrel { position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay; 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: no-preference) { .cfg-ambient .laag-a { animation: cfg-drift-a 70s ease-in-out infinite alternate; will-change: transform; } .cfg-ambient .laag-b { animation: cfg-drift-b 90s ease-in-out infinite alternate; will-change: transform; } .cfg-ambient .laag-c { animation: cfg-drift-c 110s ease-in-out infinite alternate; } } @keyframes cfg-drift-a { to { transform: translate3d(4%, -3%, 0) rotate(4deg) scale(1.06); } } @keyframes cfg-drift-b { to { transform: translate3d(-4%, 3%, 0) rotate(-5deg) scale(1.08); } } @keyframes cfg-drift-c { to { transform: translate3d(2%, 4%, 0) rotate(3deg) scale(1.05); } } /* ---------- Scroll-voortgang (haarlijn bovenlangs; scroll-driven, puur decoratief) ---------- */ .cfg-scrollbalk { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--gold)); pointer-events: none; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .cfg-scrollbalk { animation: cfg-groei linear both; animation-timeline: scroll(root); } } } @keyframes cfg-groei { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- Merkbalk (glas) ---------- Bovenaan de landing transparant (het hero-beeld loopt er "onder"), na scrollen glas met haarlijn (js zet .is-gescrold). In de wizard altijd glas (body.cfg-in-app). */ .cfg-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: stretch; height: var(--topbar-h); background: color-mix(in srgb, var(--bg) 0%, transparent); border-bottom: 1px solid transparent; transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .cfg-topbar.is-gescrold, body.cfg-in-app .cfg-topbar { background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(1.2) blur(16px); -webkit-backdrop-filter: saturate(1.2) blur(16px); border-bottom-color: var(--hairline); } /* De balk zelf loopt over de volle breedte (glas + rand), maar de INHOUD wordt net als .cfg-app en .cfg-footer gecentreerd op --content-wide met dezelfde padding. */ .cfg-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; max-width: var(--content-wide); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } .cfg-brand { display: flex; flex-direction: row; align-items: center; gap: 12px; text-decoration: none; } .cfg-brand:hover { text-decoration: none; } .cfg-brand-text { display: flex; flex-direction: column; gap: 2px; } .cfg-logo { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--hairline); } .cfg-wordmark { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: 0.26em; color: var(--brand); line-height: 1; } .cfg-subbrand { font-size: 10px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); line-height: 1; } .cfg-contact { color: var(--text); font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 55%, transparent); transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .cfg-contact svg { color: var(--gold-deep); flex: none; } .cfg-contact:hover { color: var(--text); text-decoration: none; border-color: var(--border-strong); background: var(--surface); } /* Taalwissel (NL/EN) rechts in de topbar, naast het contact */ .cfg-topbar-rechts { display: flex; align-items: center; gap: var(--sp-3); } .cfg-taal { display: inline-flex; align-items: center; gap: 2px; } .cfg-taal a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--text-subtle); text-decoration: none; } .cfg-taal a:hover { color: var(--text); background: color-mix(in srgb, var(--surface-hover) 80%, transparent); text-decoration: none; } .cfg-taal a.actief { color: var(--accent); background: var(--accent-soft); } /* ---------- Choreografie: gestaggerde entrances ---------- .entree (hero, met inline --i) en .cfg-cascade > * (wizard-stappen) rijzen na elkaar op; .entree-lijn (hero-koptekst) schuift uit een masker omhoog; .entree-beeld (hero-beeld) onthult zich met een clip-path. Basis is ZICHTBAAR; alleen met bewegingsvoorkeur wordt geanimeerd. */ @media (prefers-reduced-motion: no-preference) { .entree { animation: cfg-entree 0.9s var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 110ms); } .entree-lijn { animation: cfg-lijn-op 1s var(--ease) both; animation-delay: calc(80ms + var(--i, 0) * 120ms); } .entree-beeld { animation: cfg-beeld-op 1.1s var(--ease) both; animation-delay: calc(160ms + var(--i, 0) * 110ms); } .cfg-cascade > * { animation: cfg-entree 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); } .geen-entree > *, .geen-entree .cfg-cascade > * { animation: none; } } @keyframes cfg-entree { from { opacity: 0; transform: translateY(26px); } } @keyframes cfg-lijn-op { from { transform: translateY(112%); } to { transform: translateY(0); } } @keyframes cfg-beeld-op { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } } /* Onthulling bij scrollen (landing-secties): js zet cfg-onthul-actief op en is-zichtbaar per element. Zonder JS/rustig: gewoon zichtbaar. */ html.cfg-onthul-actief .cfg-onthul { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); } html.cfg-onthul-actief .cfg-onthul.is-zichtbaar { opacity: 1; transform: none; } /* ---------- Eyebrow (gedeeld: hero, secties) ---------- */ .cfg-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-4); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); } .cfg-eyebrow-lijn { display: inline-block; width: 28px; height: 1px; background: currentColor; opacity: 0.7; } .cfg-eyebrow-licht { color: var(--gold-strong); } /* ---------- Hero ---------- Editoriale tweedeling: links de kop (lijnen die uit een masker opkomen), rechts het beeld (render uit de catalogus, clip-onthulling, zwevende materiaal-chip en een tweede render). Op smal scherm stapelt het: kop, dan beeld. Onderaan de ticker. */ .cfg-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: calc(100svh - var(--topbar-h)); padding: clamp(28px, 6vh, 72px) 0 0; } .cfg-hero-leeg { justify-content: center; text-align: center; } .cfg-hero-leeg .cfg-hero-inner { grid-template-columns: 1fr; } .cfg-hero-leeg .cfg-hero-tekst { margin: 0 auto; } .cfg-hero-leeg .cfg-hero-acties, .cfg-hero-leeg .cfg-usps { justify-content: center; } .cfg-hero-decor { position: absolute; inset: 0; pointer-events: none; } .cfg-hero-decor::before { content: ""; position: absolute; right: -14vw; top: 42%; transform: translateY(-50%); width: min(720px, 76vw); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--border); } .cfg-hero-decor::after { content: ""; position: absolute; right: -6vw; top: 42%; width: min(520px, 56vw); aspect-ratio: 1; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); transform: translateY(-50%); } @media (prefers-reduced-motion: no-preference) { .cfg-hero-decor::after { animation: cfg-kompas 140s linear infinite; } } @keyframes cfg-kompas { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } .cfg-hero-inner { position: relative; flex: 1; width: 100%; max-width: var(--content-wide); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) clamp(40px, 6vh, 72px); display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; } .cfg-hero-tekst { position: relative; max-width: 640px; } .cfg-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(46px, 7.8vw, 98px); line-height: 0.98; letter-spacing: -0.025em; color: var(--brand); margin: 0 0 var(--sp-5); text-wrap: balance; } .cfg-title .regel-mask { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; } .cfg-title .regel { display: block; } .cfg-title em { font-style: italic; font-weight: 340; color: var(--accent); position: relative; letter-spacing: -0.02em; } .cfg-title em::after { content: ""; position: absolute; left: 1%; right: 3%; bottom: 0.03em; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: scaleX(0); transform-origin: 50% 50%; } @media (prefers-reduced-motion: no-preference) { .cfg-title em::after { animation: cfg-hairline 1s var(--ease) 1.2s both; } } @keyframes cfg-hairline { to { transform: scaleX(1); } } .cfg-lead { font-size: clamp(16px, 2.2vw, 19px); color: var(--text-muted); line-height: 1.65; max-width: 520px; margin: 0 0 var(--sp-6); text-wrap: pretty; } .cfg-hero-acties { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; } .cfg-start { min-height: 58px; padding: 0 12px 0 30px; font-size: var(--fs-base); gap: 14px; border-radius: var(--r-pill); letter-spacing: 0.005em; position: relative; overflow: hidden; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow-1); transition: background-color .2s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease); } .cfg-start .pijl { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); transition: transform 0.35s var(--ease-spring-zacht), background-color .2s var(--ease); } .cfg-start:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -12px color-mix(in srgb, var(--accent) 65%, transparent), var(--shadow-2); } .cfg-start:hover .pijl { transform: translateX(3px); background: rgba(255, 255, 255, 0.24); } .cfg-start::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%); transform: translateX(-130%); } @media (prefers-reduced-motion: no-preference) { .cfg-start:hover::after { animation: cfg-sheen 0.9s var(--ease); } } @keyframes cfg-sheen { to { transform: translateX(130%); } } .cfg-hero-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease); } .cfg-hero-link svg { transition: transform 0.3s var(--ease); } .cfg-hero-link:hover { color: var(--accent); text-decoration: none; } .cfg-hero-link:hover svg { transform: translateY(3px); } .cfg-usps { display: flex; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; align-items: center; margin: var(--sp-6) 0 0; padding: var(--sp-4) 0 0; list-style: none; border-top: 1px solid var(--hairline); } .cfg-usps li { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); } .cfg-usps li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; } .cfg-noscript { margin: var(--sp-5) 0 0; max-width: 480px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-1); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-sm); } /* Hero-beeld: hoofdrender in een groot afgerond kader, een tweede render dat over de hoek valt, de plattegrond als architectonische tekening erachter, en de materiaal-chip. */ .cfg-hero-beeld { position: relative; width: 100%; aspect-ratio: 5 / 4; } .cfg-hero-foto { position: absolute; margin: 0; overflow: hidden; border-radius: var(--r-3); background: var(--surface-alt); box-shadow: var(--shadow-foto); } .cfg-hero-foto picture, .cfg-hero-foto img { display: block; width: 100%; height: 100%; } .cfg-hero-foto img { object-fit: cover; object-position: 50% 62%; } .cfg-hero-foto-1 { inset: 0 8% 6% 0; z-index: 1; border-radius: var(--r-4); } /* Zachte muis-parallax (js zet --px/--py in -0.5..0.5 op hover-fijne pointers): de lagen verschuiven verschillend diep. Via de losse translate-property, zodat de entree-animaties op transform er niet mee botsen. */ .cfg-hero-foto-1 { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -8px); } .cfg-hero-foto-2 { translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 16px); } .cfg-hero-chip { translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 12px); } .cfg-hero-plan { translate: calc(var(--px, 0) * -26px) calc(var(--py, 0) * -20px); } @media (prefers-reduced-motion: no-preference) { .cfg-hero-foto-1, .cfg-hero-foto-2, .cfg-hero-chip, .cfg-hero-plan { transition: translate 0.6s var(--ease); } } .cfg-hero-foto-1 img { transform: scale(1.06); transform-origin: 50% 70%; } @media (prefers-reduced-motion: no-preference) { .cfg-hero-foto-1 { clip-path: inset(0 0 100% 0 round var(--r-4)); animation: cfg-clip-op 1.25s var(--ease) 0.25s both; } } @keyframes cfg-clip-op { to { clip-path: inset(0 0 0 0 round var(--r-4)); } } @keyframes cfg-foto-zoom { from { transform: scale(1.16); } to { transform: scale(1.06); } } /* Na de entree ademt het beeld heel traag door (Ken Burns): leeft, zonder af te leiden. */ @media (prefers-reduced-motion: no-preference) { .cfg-hero-foto-1 img { animation: cfg-foto-zoom 1.8s var(--ease) 0.25s both, cfg-foto-adem 24s ease-in-out 2.1s infinite alternate; } } @keyframes cfg-foto-adem { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.11) translate(-1.5%, -1%); } } .cfg-hero-foto-2 { right: -2%; bottom: -4%; width: 44%; aspect-ratio: 4 / 3; z-index: 2; border: 5px solid var(--bg); box-shadow: var(--shadow-3); } .cfg-hero-foto-2 img { object-position: 50% 55%; } @media (prefers-reduced-motion: no-preference) { .cfg-hero-foto-2 { animation: cfg-beeld-op 1s var(--ease) 0.9s both; } } /* De plattegrond "papier" achter het beeld: multiply laat de tekening in de ivoren achtergrond opgaan; alleen de lijnen blijven. */ .cfg-hero-plan { position: absolute; left: -16%; top: -10%; width: 66%; height: auto; z-index: 0; mix-blend-mode: multiply; opacity: 0.7; pointer-events: none; filter: saturate(0.5) contrast(1.05); /* Randen (en het projectkader in de tekening) verdwijnen in de achtergrond. */ -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 92%); mask-image: radial-gradient(closest-side, #000 30%, transparent 92%); } .cfg-hero-chip { position: absolute; left: -4%; bottom: 10%; z-index: 3; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 12px; border-radius: var(--r-2); background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--surface) 90%, var(--border)); box-shadow: var(--shadow-2); } @media (prefers-reduced-motion: no-preference) { .cfg-hero-chip { animation: cfg-beeld-op 0.9s var(--ease) 1.15s both, cfg-zweef 7s ease-in-out 2.2s infinite; } } @keyframes cfg-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .cfg-hero-chip-kop { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); } .cfg-hero-chip-swatches { display: flex; gap: 6px; } .cfg-hero-chip-swatch { width: 26px; height: 26px; border-radius: 8px; background: var(--kl, var(--border)); box-shadow: inset 0 0 0 1px rgba(37, 37, 34, 0.12), inset 0 8px 12px -6px rgba(255, 255, 255, 0.5); } .cfg-hero-chip-sub { font-size: var(--fs-xs); font-weight: 600; color: var(--text); } /* Fallback zonder renders: de plattegrond zelf in een papieren kader. */ .cfg-hero-foto-plan { background: var(--paper); } .cfg-hero-foto-plan img { object-fit: contain; padding: 6%; transform: none; } .cfg-hero-beeld-plan { aspect-ratio: 1; } /* Ticker onderaan de hero: de hoofdvragen + merkwoorden, oneindig en langzaam. */ .cfg-marquee { position: relative; margin-top: auto; overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .cfg-marquee-baan { display: flex; align-items: center; width: max-content; } .cfg-marquee-item { padding: 0 22px; font-family: var(--font-display); font-size: clamp(17px, 2vw, 22px); font-weight: 400; letter-spacing: 0.01em; color: var(--text-muted); white-space: nowrap; } .cfg-marquee-punt { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; opacity: 0.8; } @media (prefers-reduced-motion: no-preference) { .cfg-marquee-baan { animation: cfg-marquee 60s linear infinite; } .cfg-marquee:hover .cfg-marquee-baan { animation-play-state: paused; } } /* De baan bevat 6 identieke reeksen: een zesde opschuiven = exact een reeks = naadloos. */ @keyframes cfg-marquee { to { transform: translateX(calc(-100% / 6)); } } /* Hero wijkt terug terwijl je scrolt (scroll-driven; puur enhancement). */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .cfg-hero-tekst { animation: cfg-hero-weg linear both; animation-timeline: scroll(root); animation-range: 0 90vh; } .cfg-hero-beeld { animation: cfg-beeld-weg linear both; animation-timeline: scroll(root); animation-range: 0 90vh; } .cfg-hero-decor { animation: cfg-decor-weg linear both; animation-timeline: scroll(root); animation-range: 0 90vh; } } } @keyframes cfg-hero-weg { to { opacity: 0.1; transform: translateY(-56px); } } @keyframes cfg-beeld-weg { to { opacity: 0.35; transform: translateY(70px) scale(0.97); } } @keyframes cfg-decor-weg { to { opacity: 0.2; transform: translateY(48px); } } /* ---------- Secties (landing) ---------- */ .cfg-sectie-kop { display: grid; gap: var(--sp-4); margin-bottom: clamp(36px, 6vw, 64px); align-items: end; } .cfg-sectie-titel { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.02em; color: var(--brand); margin: 0; text-wrap: balance; } .cfg-sectie-titel em { font-style: italic; font-weight: 340; color: var(--accent); } .cfg-sectie-intro { color: var(--text-muted); font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.65; margin: 0; max-width: 520px; text-wrap: pretty; } /* Zo werkt het: donkere sectie (ink) met een gouden gloed en drie grote nummers. */ .cfg-hoe { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--ink-surface); padding: clamp(64px, 10vw, 128px) 0; } .cfg-hoe::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 92% 0%, color-mix(in srgb, var(--gold-strong) 14%, transparent), transparent 70%), radial-gradient(40% 40% at 4% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); } .cfg-hoe .cfg-sectie-inner { position: relative; } .cfg-hoe .cfg-sectie-titel { color: var(--ink-surface); } .cfg-hoe .cfg-sectie-titel em { color: var(--gold-strong); } .cfg-hoe .cfg-sectie-intro { color: var(--ink-text); } .cfg-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); counter-reset: stap; } .cfg-stappen li { position: relative; padding-top: var(--sp-5); border-top: 1px solid var(--ink-hairline); } .cfg-stappen .nr { display: block; font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: clamp(52px, 7vw, 92px); line-height: 0.9; letter-spacing: -0.03em; color: var(--gold-strong); margin: 0 0 var(--sp-4); } .cfg-stappen h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-surface); margin: 0 0 var(--sp-2); } .cfg-stappen p { margin: 0; color: var(--ink-text); font-size: var(--fs-sm); line-height: 1.65; max-width: 360px; } /* Galerij: horizontale strip met snap, randloos over de viewport, met caption-chips. */ .cfg-galerij { padding: clamp(64px, 10vw, 128px) 0 clamp(40px, 6vw, 72px); overflow: hidden; } .cfg-galerij-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: clamp(24px, 4vw, 40px); } .cfg-galerij-kop .cfg-sectie-intro { margin-top: var(--sp-3); } .cfg-galerij-knoppen { display: none; gap: var(--sp-2); flex: none; } .cfg-galerij-knop { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .cfg-galerij-knop:hover { background: var(--brand); color: var(--ink-surface); border-color: var(--brand); transform: translateY(-1px); } .cfg-galerij-baan { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px clamp(16px, 4vw, 40px) 28px; scrollbar-width: none; scroll-padding-inline: clamp(16px, 4vw, 40px); } .cfg-galerij-baan::-webkit-scrollbar { display: none; } .cfg-galerij-item { position: relative; flex: 0 0 min(80vw, 560px); aspect-ratio: 16 / 10; margin: 0; border-radius: var(--r-3); overflow: hidden; scroll-snap-align: start; background: var(--surface-alt); box-shadow: var(--shadow-2); } .cfg-galerij-item picture, .cfg-galerij-item img { display: block; width: 100%; height: 100%; } .cfg-galerij-item img { object-fit: cover; object-position: 50% 58%; transition: transform 1.2s var(--ease); } .cfg-galerij-item:hover img { transform: scale(1.04); } .cfg-galerij-item figcaption { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: baseline; gap: 10px; padding: 9px 14px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 72%, transparent); color: var(--ink-surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: var(--fs-xs); font-weight: 600; } .cfg-galerij-hoek { color: var(--ink-text-muted); font-weight: 500; } /* Slot: tellers + laatste CTA op een lichte kaart met een zachte gloed. */ .cfg-slot { padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 40px) clamp(64px, 10vw, 120px); } .cfg-slot-kaart { position: relative; overflow: hidden; text-align: center; max-width: 980px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) clamp(20px, 5vw, 72px); border-radius: var(--r-4); border: 1px solid var(--border); background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 86%, var(--accent-soft)) 100%); box-shadow: var(--shadow-3); } .cfg-slot-decor { position: absolute; inset: 0; pointer-events: none; } .cfg-slot-decor::before { content: ""; position: absolute; left: 50%; top: -42%; transform: translateX(-50%); width: 120%; aspect-ratio: 2 / 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-soft) 85%, transparent), transparent); } .cfg-slot-decor::after { content: ""; position: absolute; left: 50%; bottom: -55%; transform: translateX(-50%); width: 70%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--gold) 40%, transparent); } .cfg-slot-kaart > * { position: relative; } .cfg-slot .cfg-eyebrow { justify-content: center; } .cfg-slot-titel { margin-bottom: var(--sp-4); } .cfg-slot-tekst { margin: 0 auto var(--sp-6); } .cfg-stats { display: flex; justify-content: center; gap: var(--sp-5) clamp(24px, 5vw, 64px); flex-wrap: wrap; margin: 0 0 clamp(28px, 5vw, 48px); padding: 0 0 clamp(24px, 4vw, 40px); border-bottom: 1px solid var(--hairline); } .cfg-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; } .cfg-stats dt { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 5vw, 56px); line-height: 1; letter-spacing: -0.02em; color: var(--brand); font-variant-numeric: lining-nums; } .cfg-stats dd { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); } /* ---------- View Transitions tussen stappen ---------- De stage schuift richting-bewust (vooruit = van rechts, terug = van links); het prijstotaal morft tussen samenstelling en offerte (view-transition-name cfg-prijs). Zonder support valt alles terug op de cascade-entrance. */ .cfg-stage { view-transition-name: cfg-stage; } .cfg-prijs-morf { view-transition-name: cfg-prijs; } @media (prefers-reduced-motion: no-preference) { /* De rest van de pagina (topbar, voortgang, samenstelling, footer) verandert nauwelijks tussen stappen; die laten cross-faden legde oud en nieuw even over elkaar heen -> een dubbelbeeld-flits over de hele pagina ("2x opgebouwd"). Laat 'root' direct wisselen; alleen de stage schuift, de prijs morft. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } /* Uitzondering: de start (landing -> wizard) mag WEL als geheel cross-faden. */ html[data-vt-start]::view-transition-old(root) { animation: cfg-vt-fade-uit 0.45s var(--ease) both; } html[data-vt-start]::view-transition-new(root) { animation: cfg-vt-fade-in 0.55s var(--ease) both; } ::view-transition-old(cfg-stage), ::view-transition-new(cfg-stage) { animation-duration: 0.4s; animation-timing-function: var(--ease); } html[data-vt-richting="vooruit"]::view-transition-old(cfg-stage) { animation-name: cfg-vt-uit-links; } html[data-vt-richting="vooruit"]::view-transition-new(cfg-stage) { animation-name: cfg-vt-in-rechts; } html[data-vt-richting="terug"]::view-transition-old(cfg-stage) { animation-name: cfg-vt-uit-rechts; } html[data-vt-richting="terug"]::view-transition-new(cfg-stage) { animation-name: cfg-vt-in-links; } ::view-transition-group(cfg-prijs) { animation-duration: 0.55s; animation-timing-function: var(--ease-spring-zacht); } } @keyframes cfg-vt-fade-uit { to { opacity: 0; transform: translateY(-16px); } } @keyframes cfg-vt-fade-in { from { opacity: 0; transform: translateY(16px); } } @keyframes cfg-vt-in-rechts { from { opacity: 0; transform: translateX(52px); } } @keyframes cfg-vt-uit-links { to { opacity: 0; transform: translateX(-52px); } } @keyframes cfg-vt-in-links { from { opacity: 0; transform: translateX(-52px); } } @keyframes cfg-vt-uit-rechts { to { opacity: 0; transform: translateX(52px); } } /* ---------- Wizard-schil ---------- */ .cfg-app { --progress-h: 69px; /* hoogte van de voortgangsrail (44px knop + 2x 12px + haarlijn); de sticky samenstelling rekent ermee */ max-width: var(--content-wide); margin: 0 auto; padding: var(--sp-4) clamp(16px, 4vw, 40px) var(--sp-9); } /* Voortgang: sticky rail met serif-nummers en verbindingslijnen die zich vullen */ .cfg-progress { position: sticky; top: var(--topbar-h); z-index: 20; display: flex; align-items: center; gap: 2px; padding: var(--sp-3) 0; margin: 0 0 clamp(28px, 4vw, 44px); overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); border-bottom: 1px solid var(--hairline); } .cfg-progress::-webkit-scrollbar { display: none; } .cfg-progress-step { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 44px; padding: 0 12px 0 4px; border: 0; border-radius: var(--r-pill); background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-subtle); cursor: pointer; white-space: nowrap; transition: color var(--t-fast) var(--ease); } .cfg-progress-step:disabled { cursor: default; } .cfg-progress-step:not(:disabled):hover { color: var(--text); } .cfg-progress-step .dot { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--border-strong); font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--gold-deep); background: var(--surface); position: relative; transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease-spring); } .cfg-progress-step.active { color: var(--text); } .cfg-progress-step.active .dot { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); transform: scale(1.08); } .cfg-progress-step.active .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); } @media (prefers-reduced-motion: no-preference) { .cfg-progress-step.active .dot::after { animation: cfg-halo 2.6s var(--ease) infinite; } } @keyframes cfg-halo { 0% { opacity: 0; transform: scale(0.8); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } } .cfg-progress-step.done { color: var(--text-muted); } .cfg-progress-step.done .dot { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-family: var(--font); } .cfg-progress-sep { flex: none; width: 24px; height: 1px; border-radius: 1px; background: var(--border-strong); position: relative; overflow: hidden; } .cfg-progress-sep::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease); } .cfg-progress-sep.done::after { transform: scaleX(1); } /* Twee kolommen: keuzes + sticky samenstelling */ .cfg-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; } /* ---------- Stap / stage ---------- */ .cfg-stage { min-width: 0; } .cfg-step { animation: cfg-in var(--t-med) var(--ease) both; } /* Tijdens een view transition schuift de stage al; dan geen extra fade eroverheen. js/configurator.js markeert een VT-stap bovendien als .geen-entree, zodat ook NA de transition de fade + inval-cascade er niet alsnog los overheen speelt (dat gaf het "pagina wordt 2x opgebouwd"-gevoel). Zonder VT blijft de cascade de entree. */ html[data-vt-richting] .cfg-step, .cfg-step.geen-entree { animation: none; } @keyframes cfg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .cfg-step-kicker { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 var(--sp-3); } .cfg-step-kicker::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.7; } .cfg-step-kicker .cfg-step-icoon { display: inline-flex; color: var(--accent); } .cfg-step-titel { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.022em; color: var(--brand); margin: 0 0 var(--sp-3); text-wrap: balance; } /* De titel krijgt programmatisch focus bij een stapwissel (schermlezers); geen ring bij muisklik. */ .cfg-step-titel:focus:not(:focus-visible) { outline: none; } .cfg-step-lead { color: var(--text-muted); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.65; max-width: 640px; margin: 0 0 clamp(28px, 4vw, 40px); text-wrap: pretty; } /* Navigatie onder de stap */ .cfg-nav { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: clamp(40px, 5vw, 56px); padding-top: var(--sp-5); border-top: 1px solid var(--border); } .cfg-nav .spacer { flex: 1; } .cfg-cta { min-height: 54px; padding: 0 var(--sp-6); font-size: var(--fs-sm); gap: 10px; border-radius: var(--r-pill); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-1); } .cfg-cta .pijl { display: inline-flex; transition: transform var(--t-fast) var(--ease); } .cfg-cta:hover:not(:disabled) .pijl { transform: translateX(4px); } .cfg-nav .btn-ghost { min-height: 54px; border-radius: var(--r-pill); padding: 0 var(--sp-5); } /* ---------- Tastbare kaarten: 3D-tilt + glans ---------- js/configurator.js zet --rx/--ry/--mx/--my alleen op hover-fijne pointers; zonder JS of op touch blijft alles netjes plat. --druk geeft de fysieke klik: indrukken naar 0.97, loslaten veert terug met --ease-spring. */ .tilt { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--til, 0px)) scale(var(--druk, 1)); transition: transform 0.22s var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .tilt.tilt-los { transition: transform 0.6s var(--ease-spring), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .tilt:active { --druk: 0.97; } .tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.2), transparent 62%); opacity: 0; transition: opacity 0.35s var(--ease); } .tilt:hover::after { opacity: 1; } /* ---------- Woningtype-kaarten: plattegrond op papier ---------- */ .cfg-woningen { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--sp-4); } .cfg-woning { position: relative; text-align: left; cursor: pointer; padding: var(--sp-5); min-height: 200px; border: 1px solid var(--border); border-radius: var(--r-3); background: linear-gradient(180deg, var(--ink-surface) 0%, var(--surface) 100%); font: inherit; color: inherit; box-shadow: var(--shadow-1); overflow: hidden; } .cfg-woning:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); --til: -4px; } .cfg-woning.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); box-shadow: 0 0 0 1px var(--accent), 0 16px 36px color-mix(in srgb, var(--accent) 18%, transparent); } .cfg-woning .wsub { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 var(--sp-2); } .cfg-woning.selected .wsub { color: var(--accent); } .cfg-woning .wnaam { display: block; font-family: var(--font-display); font-weight: 450; font-size: 27px; line-height: 1.12; letter-spacing: -0.01em; color: var(--brand); margin: 0 0 var(--sp-2); } .cfg-woning .wbeschrijving { display: block; font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); margin: 0; max-width: calc(100% - 96px); } /* De plattegrond tekent zichzelf: elke lijn heeft pathLength=1 en een gestaggerde transitie op stroke-dashoffset (JS zet .in op de kaart zodra de stap staat). */ .cfg-woning .wplan { position: absolute; right: 2px; bottom: 0; width: 128px; height: 106px; color: var(--text-subtle); opacity: 0.55; pointer-events: none; } .cfg-woning.selected .wplan { color: var(--accent); opacity: 0.9; } .cfg-woning .wplan .lijn { stroke-dasharray: 1; stroke-dashoffset: 1; } /* Echte plattegrond-afbeelding bovenaan de kaart (residenties): op "papier", de tekening gaat via multiply in het papier op (geen witte doos), zoomt zacht bij hover. */ .cfg-woning .wplan-img { display: block; width: 100%; height: 176px; object-fit: contain; object-position: center; margin: 0 0 var(--sp-4); padding: 10px; border-radius: var(--r-2); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); mix-blend-mode: multiply; transition: transform 0.7s var(--ease); } .cfg-woning:hover .wplan-img { transform: scale(1.03); } .cfg-woning.has-plan { min-height: 0; } .cfg-woning.has-plan .wbeschrijving { max-width: 100%; } .cfg-woning.in .wplan .lijn { stroke-dashoffset: 0; } @media (prefers-reduced-motion: no-preference) { .cfg-woning .wplan .lijn { transition: stroke-dashoffset 0.9s var(--ease); transition-delay: calc(0.25s + var(--l, 0) * 0.12s); } } /* ---------- Vinkje dat zichzelf tekent ---------- */ .cfg-check { position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); opacity: 0; transform: scale(0.4); transition: opacity var(--t-fast) var(--ease), transform 0.5s var(--ease-spring), background-color var(--t-fast) var(--ease); } .cfg-check svg polyline { stroke-dasharray: 1; stroke-dashoffset: 1; } .selected > .cfg-check { opacity: 1; transform: scale(1); } .selected > .cfg-check svg polyline { stroke-dashoffset: 0; } @media (prefers-reduced-motion: no-preference) { .selected > .cfg-check svg polyline { transition: stroke-dashoffset 0.32s var(--ease) 0.1s; } } /* ---------- Peek: zwevend voorbeeld van het huidige beeld ---------- */ .cfg-peek { /* Desktop: linksonder, aan de kant van de keuzes (rechts staat het zijpaneel met de CTA). */ position: fixed; left: clamp(16px, 4vw, 40px); bottom: var(--sp-5); z-index: 35; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--shadow-2); font: inherit; color: var(--text); cursor: zoom-in; text-align: left; transition: transform 0.35s var(--ease-spring-zacht), box-shadow var(--t-fast) var(--ease); } .cfg-peek:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); } @media (prefers-reduced-motion: no-preference) { .cfg-peek:not([hidden]) { animation: cfg-peek-in 0.45s var(--ease-spring-zacht) both; } } @keyframes cfg-peek-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } } .cfg-peek-beeld { display: block; width: 104px; aspect-ratio: 16 / 10; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-alt); flex: none; } .cfg-peek-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; display: block; } .cfg-peek-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 240px; } .cfg-peek-kop { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); } .cfg-peek-naam { font-size: var(--fs-sm); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Boven de mobiele balk; nooit over de sheet/lightbox (lagere z-index). */ body.cfg-heeft-mobilebar .cfg-peek { bottom: calc(100px + env(safe-area-inset-bottom)); left: auto; right: var(--sp-4); padding-right: 12px; } body.cfg-heeft-mobilebar .cfg-peek-beeld { width: 64px; } body.cfg-heeft-mobilebar .cfg-peek-tekst { max-width: 120px; } /* ---------- Ja/nee: ruime selectable cards ---------- */ .cfg-janee { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); max-width: 760px; } .cfg-janee-knop { position: relative; cursor: pointer; text-align: left; padding: var(--sp-5); min-height: 124px; display: flex; flex-direction: column; gap: var(--sp-1); justify-content: flex-start; border: 1px solid var(--border); border-radius: var(--r-3); background: linear-gradient(180deg, var(--ink-surface) 0%, var(--surface) 100%); font: inherit; color: inherit; box-shadow: var(--shadow-1); overflow: hidden; } .cfg-janee-knop:hover { border-color: var(--border-strong); --til: -2px; box-shadow: var(--shadow-2); } .cfg-janee-knop.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); box-shadow: 0 0 0 1px var(--accent), var(--shadow-1); } .cfg-janee-knop .jn-label { display: block; font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.005em; color: var(--text); padding-right: var(--sp-6); } /* Beeld-teaser in de ja-kaart: tot drie renders uit de vervolgvragen (wat zit erachter?). */ .cfg-janee-knop .jn-beelden { display: flex; gap: 6px; margin: 0 0 var(--sp-3); } .cfg-janee-knop .jn-beelden img { width: 76px; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 58%; border-radius: var(--r-1); background: var(--surface-alt); box-shadow: var(--shadow-1); transition: transform 0.4s var(--ease); } .cfg-janee-knop .jn-beelden img:nth-child(2) { transition-delay: 40ms; } .cfg-janee-knop .jn-beelden img:nth-child(3) { transition-delay: 80ms; } .cfg-janee-knop:hover .jn-beelden img { transform: translateY(-2px); } /* De nee-kaart is een volwaardige keuze, maar visueel ingetogen (geen schaduw, gedempt vlak). */ .cfg-janee-knop.is-nee { background: color-mix(in srgb, var(--surface) 55%, transparent); box-shadow: none; } .cfg-janee-knop.is-nee .jn-label { color: var(--text-muted); } .cfg-janee-knop.is-nee.selected .jn-label { color: var(--text); } .cfg-janee-knop .jn-beschrijving { display: block; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; } .cfg-janee-knop .jn-prijs { display: block; margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-sm); color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; } .cfg-janee-knop .cfg-check { top: var(--sp-4); right: var(--sp-4); width: 26px; height: 26px; } /* ---------- Optiegroepen / keuzes ---------- */ .cfg-groep { margin-top: clamp(36px, 5vw, 52px); } /* Vaste vervolg-slot (js zet 'm neer per groep): zonder vervolgvragen geen ruimte. */ .cfg-subgroepen:empty { display: none; } @media (prefers-reduced-motion: no-preference) { .cfg-subgroepen .cfg-groep { animation: cfg-in var(--t-med) var(--ease) both; } } /* Sectie-ankers (klik op een regel in "Uw samenstelling" springt hierheen): ruimte voor de sticky topbar + rail, en een korte oplichting zodat je ziet waar je bent geland. */ [data-groep-anker] { scroll-margin-top: calc(var(--topbar-h) + var(--progress-h, 69px) + var(--sp-4)); } .cfg-groep-kop h3:focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: no-preference) { .cfg-groep.cfg-groep-licht { animation: cfg-groep-licht 1.6s var(--ease) both; border-radius: var(--r-3); } } @keyframes cfg-groep-licht { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 25% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent); } } .cfg-groep-kop { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); } .cfg-groep-kop h3 { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 27px); font-weight: 450; letter-spacing: -0.01em; color: var(--brand); margin: 0; } .cfg-groep-uitleg { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-4); } /* Keuzekaarten (pakketten) */ .cfg-keuzes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-4); align-items: stretch; } .cfg-keuze { position: relative; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5) var(--sp-4); min-height: 132px; border: 1px solid var(--border); border-radius: var(--r-3); background: linear-gradient(180deg, var(--ink-surface) 0%, var(--surface) 100%); font: inherit; color: inherit; box-shadow: var(--shadow-1); overflow: hidden; } .cfg-keuze:hover { border-color: var(--border-strong); --til: -2px; box-shadow: var(--shadow-2); } .cfg-keuze.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); box-shadow: 0 0 0 1px var(--accent), var(--shadow-1); } .cfg-keuze .knaam { display: block; font-weight: 650; font-size: var(--fs-base); color: var(--text); padding-right: var(--sp-6); } .cfg-keuze .kbeschrijving { display: block; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; } .cfg-keuze .kprijs { display: block; margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; } .cfg-keuze .kprijs.inbegrepen { color: var(--text-subtle); font-weight: 550; } .cfg-keuze .cfg-check { top: var(--sp-3); right: var(--sp-3); width: 24px; height: 24px; } /* Materialen en kleuren: tastbare tegels */ .cfg-keuzes.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--sp-4); } .cfg-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-2); cursor: pointer; text-align: center; background: none; border: 0; font: inherit; color: inherit; border-radius: var(--r-2); } .cfg-swatch .cfg-check { top: var(--sp-3); right: var(--sp-3); width: 24px; height: 24px; } .cfg-swatch .bol { width: 100%; max-width: 116px; aspect-ratio: 1; border-radius: 22px; background-color: var(--border); /* zonder catalogus-kleur: neutraal vlak (JS zet de kleur inline) */ border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); /* Materiaalgevoel: zachte lichtval + subtiele korrel over de catalogus-kleur. */ background-image: linear-gradient(148deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.06) 38%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.08) 100%), repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 2px, rgba(0,0,0,0.02) 2px 5px); box-shadow: var(--shadow-1); transition: transform 0.45s var(--ease-spring), box-shadow var(--t-fast) var(--ease); } .cfg-swatch:hover .bol { transform: translateY(-3px) scale(1.045); box-shadow: var(--shadow-2); } .cfg-swatch:active .bol { transform: scale(0.96); } .cfg-swatch.selected .bol { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent), var(--shadow-1); } .cfg-swatch .knaam { font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); line-height: 1.35; } .cfg-swatch.selected .knaam { color: var(--text); } .cfg-swatch .kprijs { font-size: var(--fs-sm); font-weight: 650; color: var(--accent); } /* ---------- Beeldstage: de gekozen variant groot in beeld ---------- Twee absoluut gestapelde lagen in een container met vaste aspect-ratio: de wissel is puur opacity (CLS 0), js/configurator.js wacht op img.decode() voor de fade. */ .cfg-beeldstage { margin: 0 0 var(--sp-6); } .cfg-beeldstage-beeld { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; /* mobiel: hogere crop zodat het aanrecht in beeld blijft */ padding: 0; cursor: zoom-in; border: 0; border-radius: var(--r-4); background: var(--surface-alt); overflow: hidden; box-shadow: var(--shadow-foto); font: inherit; color: inherit; transition: box-shadow 0.35s var(--ease); } .cfg-beeldstage-beeld:hover { box-shadow: var(--shadow-3), var(--shadow-foto); } /* Zachte vignet onderaan: het bijschrift-chip en de zoomknop blijven leesbaar. */ .cfg-beeldstage-beeld::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(35, 34, 30, 0.28)); } .cfg-beeldstage-laag { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s var(--ease); } .cfg-beeldstage-laag.aan { opacity: 1; } .cfg-beeldstage-laag img { width: 100%; height: 100%; object-fit: cover; display: block; /* Iets onder het midden: daar leeft de keuken (aanrecht/eiland), niet het plafond. */ object-position: 50% 58%; } .cfg-beeldstage-zoom { position: absolute; right: var(--sp-4); bottom: var(--sp-4); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text); box-shadow: var(--shadow-1); transition: transform 0.3s var(--ease-spring-zacht); } .cfg-beeldstage-beeld:hover .cfg-beeldstage-zoom { transform: scale(1.06); } .cfg-beeldstage-voet { margin: var(--sp-3) 0 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .cfg-beeldstage-bijschrift { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--text-subtle); } .cfg-filmstrip { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 3px; max-width: 100%; scrollbar-width: none; } .cfg-filmstrip::-webkit-scrollbar { display: none; } .cfg-filmstrip-knop { flex: none; width: 104px; min-height: 44px; aspect-ratio: 16 / 10; padding: 0; cursor: pointer; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface-alt); opacity: 0.8; transition: opacity var(--t-fast) var(--ease), transform 0.3s var(--ease-spring-zacht), box-shadow var(--t-fast) var(--ease); } .cfg-filmstrip-knop:hover { opacity: 1; transform: translateY(-2px); } .cfg-filmstrip-knop img { width: 100%; height: 100%; object-fit: cover; display: block; } .cfg-filmstrip-knop[aria-pressed="true"] { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); } /* Fotokaart: de vertrouwde keuzekaart met het eerste render randloos bovenin. */ .cfg-fotokaart { padding-top: 0; } .cfg-fotokaart .kfoto { display: block; width: auto; aspect-ratio: 16 / 10; margin: 0 calc(-1 * var(--sp-4)) var(--sp-3); background: var(--surface-alt); overflow: hidden; } .cfg-fotokaart .kfoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); } .cfg-fotokaart:hover .kfoto img { transform: scale(1.04); } /* Textuur in de swatch-bol: echt materiaal in plaats van een kleurvlak. Het beeld tekent over de bol-achtergrond heen; de lichtval komt via ::after als glans erop. */ .cfg-swatch .bol.bol-textuur { position: relative; overflow: hidden; } .cfg-swatch .bol.bol-textuur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .cfg-swatch .bol.bol-textuur::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(148deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 38%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.07) 100%), repeating-linear-gradient(115deg, rgba(255,255,255,0.045) 0 2px, rgba(0,0,0,0.02) 2px 5px); } /* ---------- Lightbox: galerij op vol scherm (native dialog) ---------- */ html:has(dialog[open]:modal) { overflow: hidden; } dialog.cfg-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--ink) 96%, transparent); color: var(--ink-surface); } dialog.cfg-lightbox:not([open]) { display: none; } dialog.cfg-lightbox::backdrop { background: var(--overlay); } .cfg-lightbox-kop { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); flex: none; } .cfg-lightbox-titel { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 450; color: var(--ink-surface); } .cfg-lightbox-acties { display: flex; gap: var(--sp-2); } .cfg-lightbox-acties .btn { border-radius: var(--r-pill); background: rgba(253, 251, 247, 0.1); color: var(--ink-surface); } .cfg-lightbox-acties .btn:hover { background: rgba(253, 251, 247, 0.18); } /* De strip vult de rest van de dialoog (flex: 1) i.p.v. een geraden vaste kop-hoogte. */ .cfg-lightbox-strip { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; flex: 1; min-height: 0; padding: 0 var(--sp-4) var(--sp-4); align-items: stretch; } .cfg-lightbox-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; touch-action: pan-x pinch-zoom; } .cfg-lightbox-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-2); } /* Zoomstand: snap los, pannen via native scroll binnen de slide. */ .cfg-lightbox-strip.zoom { scroll-snap-type: none; } .cfg-lightbox-strip.zoom .cfg-lightbox-slide { overflow: auto; display: block; } .cfg-lightbox-strip.zoom .cfg-lightbox-slide img { max-width: none; max-height: none; width: 180%; } /* ---------- Odometer (het kloppend hart) ---------- Elke cijferpositie is een verticale rol van 0-9 die met veer-easing naar zijn waarde glijdt (alleen transform). Tekens (valuta, punten) staan er los tussen. */ .odo { display: inline-flex; align-items: flex-start; overflow: hidden; height: 1.06em; line-height: 1.06; font-variant-numeric: tabular-nums lining-nums; } .odo-rol { display: inline-flex; flex-direction: column; align-items: center; transform: translateY(calc(var(--n, 0) * -1.06em)); } @media (prefers-reduced-motion: no-preference) { .odo-rol { transition: transform 0.8s var(--ease-spring-zacht); } } .odo-rol > span { display: block; height: 1.06em; line-height: 1.06; } .odo-teken { display: inline-block; height: 1.06em; line-height: 1.06; white-space: pre; } @media (prefers-reduced-motion: no-preference) { .odo-teken.odo-nieuw { animation: cfg-odo-in 0.4s var(--ease) both; } /* Een nieuwe ROL vervaagt alleen in: een transform-animatie zou de rol-transitie (transform via --n) tijdelijk overrulen en het rollen verbergen. */ .odo-rol.odo-nieuw { animation: cfg-odo-fade 0.4s var(--ease) both; } } @keyframes cfg-odo-in { from { opacity: 0; transform: translateY(-0.35em); } } @keyframes cfg-odo-fade { from { opacity: 0; } } /* ---------- Samenstellingspaneel (desktop, sticky) ---------- */ .cfg-summary { display: none; } .cfg-summary-card { /* Onder topbar + rail, met lucht ertussen zodat de kaart nooit tegen de rail aan plakt. */ position: sticky; top: calc(var(--topbar-h) + var(--progress-h, 69px) + var(--sp-4)); /* Nooit hoger dan het scherm: de regels scrollen binnen de kaart (body), het totaal plakt onderaan dat scrollvlak en de knoppen blijven altijd in beeld. */ display: flex; flex-direction: column; max-height: calc(100dvh - var(--topbar-h) - var(--progress-h, 69px) - 2 * var(--sp-4)); border: 1px solid var(--border); border-radius: var(--r-4); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-2); overflow: hidden; } .cfg-summary-kop, .cfg-summary-acties { flex: none; } .cfg-summary-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* Alleen de regels scrollen (dun schuifbalkje); totaal + noot blijven eronder staan. */ #cfg-summary-lijst { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; } /* Vervaging onderaan zolang er meer regels onder de vouw van de kaart zitten (js zet .scrolt/.onderaan). */ #cfg-summary-lijst.scrolt:not(.onderaan) { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 36px), transparent); } .cfg-summary-totaal, .cfg-summary-note { flex: none; } .cfg-summary-kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--hairline); } .cfg-summary-kop h2 { font-family: var(--font-display); font-weight: 450; font-size: 25px; letter-spacing: -0.01em; color: var(--brand); margin: 0; white-space: nowrap; } .cfg-summary-body { padding: var(--sp-3) var(--sp-5) var(--sp-4); } .cfg-summary-groep { padding: var(--sp-2) 0; } .cfg-summary-groep + .cfg-summary-groep { border-top: 1px solid var(--hairline); } .cfg-summary-regel { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); text-align: left; border-radius: var(--r-1); } button.cfg-summary-regel { cursor: pointer; } button.cfg-summary-regel:hover .label { color: var(--accent); } .cfg-summary-regel .label { color: var(--text-subtle); flex: none; transition: color var(--t-fast) var(--ease); } .cfg-summary-regel .waarde { color: var(--text); font-weight: 550; text-align: right; } .cfg-summary-regel .waarde .prijs { color: var(--accent); font-weight: 650; white-space: nowrap; margin-left: 6px; font-variant-numeric: tabular-nums; } .cfg-summary-regel.sub { padding-left: var(--sp-3); } .cfg-summary-leeg { color: var(--text-subtle); font-size: var(--fs-sm); padding: var(--sp-2) 0; } /* Het totaal als ink-blok (zoals het offerte-totaal): het kloppend hart van het paneel. */ .cfg-summary-totaal { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin: var(--sp-4) calc(-1 * var(--sp-2)) 0; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-3); background: var(--ink); color: var(--ink-text); overflow: hidden; } .cfg-summary-totaal::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 130% at 85% 20%, color-mix(in srgb, var(--gold-strong) 16%, transparent), transparent 60%); } .cfg-summary-totaal .tlabel { position: relative; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-text); } .cfg-summary-totaal .tbedrag { position: relative; font-family: var(--font-display); font-size: 34px; font-weight: 400; color: var(--gold-strong); letter-spacing: -0.01em; } /* Zachte gloed-puls wanneer de prijs verandert (opacity/transform op een pseudo). */ .cfg-summary-totaal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 90% at 80% 55%, color-mix(in srgb, var(--gold-strong) 30%, transparent), transparent 70%); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .cfg-summary-totaal.puls::after { animation: cfg-puls 0.9s var(--ease); } } @keyframes cfg-puls { 0% { opacity: 0; transform: scale(0.9); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.08); } } .cfg-summary-note { font-size: var(--fs-xs); color: var(--text-subtle); margin: var(--sp-3) 0 0; line-height: 1.5; } .cfg-summary-acties { padding: var(--sp-2) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); } .cfg-summary-acties .btn-ghost { border-radius: var(--r-pill); } /* Delen: deellink-knoppen (zijpaneel, overzicht, mobiel sheet) */ .cfg-summary-acties .cfg-deel { margin-top: 0; } .cfg-deel-rij { margin: var(--sp-3) 0 0; text-align: center; } .cfg-deel-rij .btn { border-radius: var(--r-pill); } .deel-icoon { display: inline-flex; margin-right: 7px; vertical-align: -2px; } /* ---------- Gegevens-formulier ---------- */ .cfg-form { max-width: 720px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--border); border-radius: var(--r-3); background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: var(--shadow-1); } .cfg-form input, .cfg-form textarea { border-radius: var(--r-2); background: var(--surface); scroll-margin-top: calc(var(--topbar-h) + var(--progress-h, 69px) + var(--sp-5)); } .cfg-privacy { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--sp-2) 0 0; line-height: 1.55; } .cfg-privacy a { color: var(--accent); } .cfg-veldfout { border-color: var(--danger) !important; } /* ---------- Overzicht: de offerte onthult zich ---------- */ .cfg-offerte { position: relative; max-width: 860px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r-4); background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 88%, var(--surface-alt)) 100%); box-shadow: var(--shadow-3); padding: clamp(22px, 5vw, 56px); overflow: hidden; } .cfg-offerte::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } /* Lichtbundel die een keer over het document veegt als de opbouw compleet is. */ .cfg-offerte .of-schittering { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%); transform: translateX(-130%); } @media (prefers-reduced-motion: no-preference) { .cfg-offerte.schitter .of-schittering { animation: cfg-schitter 1.2s var(--ease) both; } } @keyframes cfg-schitter { to { transform: translateX(130%); } } .of-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border-strong); } .of-kop .of-merk { display: flex; flex-direction: column; gap: 3px; } .of-kop .of-merk .m1 { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.24em; color: var(--brand); } .of-kop .of-merk .m2 { font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); } .of-kop .of-meta { text-align: right; font-size: var(--fs-sm); color: var(--text-subtle); line-height: 1.7; } .of-kop .of-meta strong { color: var(--text-muted); font-weight: 650; letter-spacing: 0.06em; } .of-sectie { padding: var(--sp-3) 0; } .of-sectie + .of-sectie { border-top: 1px solid var(--border); } .of-sectie-kop { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-1); } .of-sectie-kop h3 { flex: 1; margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); } .of-sectie-kop .btn { border-radius: var(--r-pill); } .of-regel { display: flex; align-items: baseline; gap: var(--sp-2); padding: 5px 0; font-size: var(--fs-sm); } .of-regel .rlabel { color: var(--text-subtle); flex: none; } .of-regel .rstippel { flex: 1; border-bottom: 1px dotted var(--border-strong); transform: translateY(-4px); min-width: 24px; } .of-regel .rwaarde { color: var(--text); font-weight: 550; text-align: right; } .of-regel .rprijs { color: var(--gold-deep); font-weight: 650; white-space: nowrap; margin-left: var(--sp-2); font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: no-preference) { .cfg-offerte .of-regel, .cfg-offerte .of-sectie-kop { opacity: 0; transform: translateY(14px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .cfg-offerte .of-regel.telt, .cfg-offerte .of-sectie-kop.telt { opacity: 1; transform: none; } } .of-totaal { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-5); border-radius: var(--r-3); background: var(--ink); box-shadow: var(--shadow-2); overflow: hidden; } .of-totaal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 130% at 85% 20%, color-mix(in srgb, var(--gold-strong) 16%, transparent), transparent 60%); } .of-totaal .tlabel { color: var(--ink-text); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .of-totaal .tlabel small { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: none; color: var(--ink-text-muted); font-weight: 550; } .of-totaal .tbedrag { font-family: var(--font-display); font-size: clamp(32px, 6vw, 46px); font-weight: 400; color: var(--gold-strong); letter-spacing: -0.01em; } /* De stempel leeft in de flow (rechts uitgelijnd) en valt met een negatieve ondermarge over de hoek van het totaalblok; nooit over de kop-metadata heen. */ .of-stempelrij { display: flex; justify-content: flex-end; margin: var(--sp-4) var(--sp-2) calc(-1 * var(--sp-3)); position: relative; z-index: 1; pointer-events: none; } .of-stempel { padding: 7px 14px; border: 2px solid var(--gold-deep); border-radius: 8px; color: var(--gold-deep); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; background: color-mix(in srgb, var(--surface) 72%, transparent); transform: rotate(-6deg) scale(0); opacity: 0.92; } .of-stempel.zichtbaar { transform: rotate(-6deg) scale(1); } @media (prefers-reduced-motion: no-preference) { .of-stempel { transition: transform 0.55s var(--ease-spring); } } @media (prefers-reduced-motion: reduce) { .of-stempel { transform: rotate(-6deg) scale(1); } } /* ---------- Bevestiging ---------- */ .cfg-klaar { text-align: center; padding: var(--sp-7) var(--sp-4) var(--sp-8); max-width: 680px; margin: 0 auto; position: relative; } .cfg-klaar .cfg-step-lead { margin-left: auto; margin-right: auto; margin-bottom: var(--sp-6); } .cfg-klaar-kicker { justify-content: center; } .cfg-klaar-kicker::before { display: none; } .cfg-klaar-check { width: 104px; height: 104px; margin: 0 auto var(--sp-5); color: var(--accent); display: block; border-radius: 50%; box-shadow: 0 0 0 14px color-mix(in srgb, var(--accent-soft) 70%, transparent), 0 0 0 28px color-mix(in srgb, var(--accent-soft) 35%, transparent); } .cfg-referentie-kaart { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto var(--sp-6); padding: var(--sp-4) var(--sp-6); border-radius: var(--r-3); background: var(--paper); border: 1px solid var(--border); box-shadow: var(--shadow-1); } .cfg-referentie-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); } .cfg-klaar-stappen { list-style: none; margin: 0 auto var(--sp-6); padding: 0; max-width: 560px; text-align: left; display: grid; gap: 0; border-top: 1px solid var(--hairline); } .cfg-klaar-stappen li { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); } .cfg-klaar-stappen .nr { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); font-family: var(--font-display); font-size: 15px; color: var(--gold-deep); background: var(--surface); } .cfg-klaar-stappen .tekst { display: flex; flex-direction: column; gap: 2px; } .cfg-klaar-stappen strong { font-weight: 650; color: var(--text); } .cfg-klaar-stappen span span { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; } .cfg-klaar-acties { display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; } .cfg-klaar-bel { min-height: 54px; border-radius: var(--r-pill); padding: 0 var(--sp-5); } .cfg-klaar-check circle { stroke-dasharray: 260; stroke-dashoffset: 260; animation: cfg-draw 0.7s var(--ease) forwards; } .cfg-klaar-check path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: cfg-draw 0.45s var(--ease) 0.5s forwards; } @keyframes cfg-draw { to { stroke-dashoffset: 0; } } .cfg-referentie { display: inline-block; font-family: var(--font-display); font-size: 28px; letter-spacing: 0.06em; color: var(--brand); font-variant-numeric: lining-nums tabular-nums; } /* Vonkenregen: kleine deeltjes die vanuit het vinkje uitwaaieren (transform/opacity). */ .cfg-vonken { position: absolute; left: 50%; top: 92px; width: 0; height: 0; pointer-events: none; } .cfg-vonk { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: 0; } .cfg-vonk:nth-child(odd) { background: var(--accent); } @media (prefers-reduced-motion: no-preference) { .cfg-vonk { animation: cfg-vonk 1s var(--ease) var(--wacht, 0.45s) both; } } @keyframes cfg-vonk { 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -60px)) scale(1); } } /* ---------- Mobiele actiebalk + samenstellings-sheet ---------- */ .cfg-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border-top: 1px solid var(--hairline); box-shadow: 0 -12px 32px color-mix(in srgb, var(--text) 8%, transparent); } @media (prefers-reduced-motion: no-preference) { .cfg-mobilebar:not([hidden]) { animation: cfg-balk-op 0.5s var(--ease-spring-zacht) both; } } @keyframes cfg-balk-op { from { transform: translateY(100%); } } .cfg-mobilebar .btn { flex: none; max-width: 55%; min-height: 50px; } /* Lange stapnamen in de mobiele knop afkappen i.p.v. de prijs weg te drukken. */ .cfg-mobilebar .btn > :first-child { overflow: hidden; text-overflow: ellipsis; } .cfg-mobilebar-total { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; min-height: 44px; justify-content: center; } .cfg-mobilebar-label { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .cfg-mobilebar-label svg { color: var(--gold-deep); } .cfg-mobilebar-amount { font-family: var(--font-display); font-size: 25px; color: var(--brand); letter-spacing: -0.01em; } /* Ruimte onder de pagina voor de vaste balk, INCLUSIEF de safe-area (home-indicator). */ body.cfg-heeft-mobilebar { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } .cfg-sheet { position: fixed; inset: 0; z-index: 50; background: var(--overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .cfg-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 80svh; overflow-y: auto; background: var(--surface); border-radius: var(--r-4) var(--r-4) 0 0; box-shadow: var(--shadow-3); padding: var(--sp-3) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom)); } @media (prefers-reduced-motion: no-preference) { .cfg-sheet-panel { animation: cfg-sheet-in 0.45s var(--ease-spring-zacht) both; } } @keyframes cfg-sheet-in { from { transform: translateY(56px); opacity: 0.4; } to { transform: none; opacity: 1; } } .cfg-sheet-greep { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 0 auto var(--sp-3); } .cfg-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); } .cfg-sheet-head h2 { margin: 0; font-family: var(--font-display); font-weight: 450; font-size: var(--fs-xl); color: var(--brand); } .cfg-sheet-head .btn { border-radius: var(--r-pill); } .cfg-sheet-body .cfg-summary-totaal { margin-left: 0; margin-right: 0; } /* ---------- Footer (ink) ---------- Op de landing een rijke, donkere afsluiting: een serif-statement met CTA, drie kolommen (merk, configurator-links, contact) en de onderste regel. In de wizard en op de tekst- pagina's (.cfg-footer-kort) blijft alleen de onderste regel over, in dezelfde ink-taal. */ .cfg-footer { position: relative; width: 100%; margin-top: auto; overflow: hidden; background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--ink-text); font-size: var(--fs-xs); } .cfg-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 60% at 100% 0%, color-mix(in srgb, var(--gold-strong) 12%, transparent), transparent 70%); } .cfg-footer-inner { position: relative; display: flex; flex-direction: column; gap: 0; max-width: var(--content-wide); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); } .cfg-footer-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--ink-hairline); } .cfg-footer-statement { margin: 0; max-width: 620px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink-surface); text-wrap: balance; } .cfg-footer-statement em { font-style: italic; font-weight: 340; color: var(--gold-strong); } .cfg-footer-top-acties { flex: none; } .cfg-footer-start { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); } .cfg-footer-kolommen { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); padding: clamp(32px, 5vw, 56px) 0; border-bottom: 1px solid var(--ink-hairline); } .cfg-footer-merk { display: flex; flex-direction: column; gap: var(--sp-3); } .cfg-footer-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; } .cfg-footer-brand:hover { text-decoration: none; } .cfg-footer-brand img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ink-hairline); } .cfg-footer-brand > span { display: flex; flex-direction: column; gap: 3px; } .cfg-footer-merk .cfg-wordmark { font-size: 17px; color: var(--ink-surface); } .cfg-footer-merk .cfg-subbrand { color: var(--gold-strong); } .cfg-footer-tagline { margin: 0; max-width: 380px; line-height: 1.65; color: var(--ink-text); font-size: var(--fs-sm); } .cfg-footer-kolom { display: flex; flex-direction: column; gap: 2px; } .cfg-footer-kop { display: block; margin-bottom: var(--sp-2); font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-strong); } .cfg-footer-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; background: none; border: 0; font: inherit; font-size: var(--fs-sm); font-weight: 550; text-align: left; color: var(--ink-surface); cursor: pointer; text-decoration: none; opacity: 0.88; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .cfg-footer-link:hover { opacity: 1; color: var(--gold-strong); text-decoration: none; transform: translateX(3px); } .cfg-footer-note { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-text-muted); } .cfg-footer-onder { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) 0 calc(var(--sp-4) + env(safe-area-inset-bottom)); color: var(--ink-text-muted); } .cfg-footer-links { display: flex; gap: var(--sp-4); align-items: center; } .cfg-footer-onder a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-text-muted); text-decoration: none; } .cfg-footer-onder a:hover { color: var(--gold-strong); text-decoration: none; } .cfg-footer-boven svg { transition: transform var(--t-fast) var(--ease); } .cfg-footer-boven:hover svg { transform: translateY(-2px); } /* Compact: tekstpagina's (.cfg-footer-kort) en de wizard tonen alleen de onderste regel. */ .cfg-footer-kort .cfg-footer-onder { padding-top: var(--sp-5); } body.cfg-in-app .cfg-footer-top, body.cfg-in-app .cfg-footer-kolommen { display: none; } body.cfg-in-app .cfg-footer-onder { padding-top: var(--sp-5); } /* ---------- Gedeelde pagina-klassen (privacy.php, offerte.php) ---------- */ .cfg-smal { max-width: 760px; } .cfg-pagina-titel { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.5vw, 46px); letter-spacing: -0.02em; margin-top: var(--sp-6); } .cfg-pagina-kaart { margin-top: var(--sp-4); border-radius: var(--r-3); } .cfg-pagina-kaart h2 { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; } .cfg-pagina-terug { margin: var(--sp-5) 0 var(--sp-7); } .cfg-pagina-terug .btn { border-radius: var(--r-pill); } /* Op de tekstpagina's is er geen hero: de topbar is daar meteen glas. */ body.cfg-body:not(:has(#cfg-landing)) .cfg-topbar { background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: saturate(1.2) blur(16px); -webkit-backdrop-filter: saturate(1.2) blur(16px); border-bottom-color: var(--hairline); } /* ---------- Toast op de publieke kant: licht (op de ink-footer was donker onzichtbaar), pill, boven de mobiele balk ---------- */ .cfg-body .toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-pill); box-shadow: var(--shadow-3); padding: 12px 20px; } .cfg-body .toast.toast-error { background: var(--danger); color: #fff; border-color: transparent; } body.cfg-heeft-mobilebar .toast-host { bottom: calc(104px + env(safe-area-inset-bottom)); } /* ---------- Voorbeeldmodus (beheerder-preview in de iframe) ---------- */ .cfg-voorbeeld-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 70; padding: 6px 12px; text-align: center; font: 600 var(--fs-xs)/1.4 var(--font); letter-spacing: .04em; color: var(--ink); background: var(--gold-strong); } /* De banner is 30px hoog: de pagina begint eronder en de sticky balken schuiven mee. */ body.cfg-is-voorbeeld { padding-top: 30px; } body.cfg-is-voorbeeld .cfg-topbar { top: 30px; } body.cfg-is-voorbeeld .cfg-progress { top: calc(var(--topbar-h) + 30px); } /* ---------- Tablet en breder ---------- */ @media (min-width: 720px) { .cfg-keuzes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* Breedbeeld-renders (1.88:1) op hun eigen verhouding; mobiel houdt de 4:3-crop. */ .cfg-beeldstage-beeld { aspect-ratio: 1600 / 851; } .cfg-stappen { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .cfg-stappen li { border-top: 1px solid var(--ink-hairline); } .cfg-footer-kolommen { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--sp-7); } .cfg-galerij-knoppen { display: flex; } } /* Tablet (staand): het beeld breed i.p.v. hoog, anders duwt het de ticker ver weg. */ @media (min-width: 621px) and (max-width: 899px) { .cfg-hero-beeld { aspect-ratio: 16 / 10; max-height: 60vh; } .cfg-hero-foto-1 { inset: 0 6% 0 0; } .cfg-hero-chip { left: 2%; bottom: 8%; } } /* ---------- Hero naast elkaar ---------- */ @media (min-width: 900px) { .cfg-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); } .cfg-hero-tekst { padding-right: var(--sp-4); } .cfg-hero-beeld { aspect-ratio: 4 / 4.2; max-height: min(74vh, 720px); justify-self: end; width: 100%; } .cfg-hero-chip { left: -9%; bottom: 14%; } .cfg-hero-foto-2 { right: -4%; bottom: -3%; } .cfg-sectie-kop { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--sp-7); } .cfg-sectie-kop .cfg-sectie-intro { justify-self: end; } } /* Lage desktop-viewports (laptops, 720p): de hero compacter zodat kop, CTA en beeld in een scherm passen; de ticker mag net onder de vouw. */ @media (min-width: 900px) and (max-height: 780px) { .cfg-hero { padding-top: var(--sp-5); } .cfg-hero-inner { padding-bottom: var(--sp-6); } .cfg-title { font-size: min(clamp(46px, 7.8vw, 98px), 11.5vh); margin-bottom: var(--sp-4); } .cfg-lead { margin-bottom: var(--sp-5); font-size: 16px; } .cfg-usps { margin-top: var(--sp-5); } .cfg-hero-beeld { max-height: 68vh; } } /* ---------- Desktop: keuzes + sticky samenstelling ---------- */ @media (min-width: 1020px) { .cfg-layout { grid-template-columns: minmax(0, 1fr) 392px; gap: clamp(32px, 4vw, 64px); } .cfg-layout.enkel { grid-template-columns: 1fr; } /* align-self overrulet het start-uitlijnen van .cfg-layout: de kolom strekt mee tot de hoogte van de stage, zodat de sticky kaart erin ruimte heeft om mee te scrollen. */ .cfg-summary { display: block; align-self: stretch; } .cfg-mobilebar { display: none !important; } body.cfg-heeft-mobilebar { padding-bottom: 0; } } /* Tot 1019px staat de mobiele balk in beeld: dan geen tweede "Volgende" in de stap-navigatie (voorheen alleen <= 620px, waardoor tablets twee CTA's toonden). */ @media (max-width: 1019px) { body.cfg-heeft-mobilebar .cfg-nav .cfg-cta { display: none; } } /* ---------- Klein scherm ---------- */ @media (max-width: 620px) { .cfg-wordmark { font-size: 16px; letter-spacing: 0.22em; } .cfg-logo { width: 38px; height: 38px; } .cfg-hero { padding-top: var(--sp-6); } .cfg-hero-inner { gap: var(--sp-6); } .cfg-title { font-size: clamp(42px, 12.5vw, 60px); } .cfg-lead { margin-bottom: var(--sp-5); } .cfg-hero-acties { gap: var(--sp-4); } .cfg-start { width: 100%; justify-content: space-between; } .cfg-usps { gap: var(--sp-2) var(--sp-3); } .cfg-hero-beeld { aspect-ratio: 4 / 3; margin-top: var(--sp-2); } .cfg-hero-foto-1 { inset: 0 6% 0 0; } .cfg-hero-foto-2 { width: 40%; right: -3%; bottom: -8%; border-width: 4px; } .cfg-hero-chip { left: 3%; bottom: 8%; padding: 10px 12px 9px; } .cfg-hero-chip-swatch { width: 22px; height: 22px; } .cfg-hero-plan { left: -20%; top: -8%; width: 70%; } .cfg-marquee { padding: 12px 0; } .cfg-janee { grid-template-columns: 1fr; } .cfg-woningen { grid-template-columns: 1fr; } .cfg-woning { min-height: 0; } .cfg-woning .wplan-img { height: 156px; } /* Niet-actieve staplabels alleen VISUEEL verbergen (aria-label op de knop draagt de naam). */ .cfg-progress-step:not(.active) .plabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .cfg-progress-step { padding-right: 8px; } .cfg-keuzes.swatches { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .of-kop .of-meta { text-align: left; } .of-totaal { padding: var(--sp-4) var(--sp-5); } .cfg-filmstrip-knop { width: 88px; } .cfg-slot-kaart { border-radius: var(--r-3); } .cfg-stats { gap: var(--sp-4) var(--sp-5); } .cfg-stats > div { min-width: 80px; } .cfg-galerij-item { flex-basis: 84vw; } } /* ---------- Rustige beweging: ALLES uit ---------- */ @media (prefers-reduced-motion: reduce) { .cfg-ambient .laag, .cfg-hero-decor::after, .cfg-start::after, .cfg-title em::after, .cfg-step, .cfg-subgroepen .cfg-groep, .cfg-sheet-panel, .cfg-mobilebar:not([hidden]), .cfg-marquee-baan, .cfg-hero-chip, .cfg-hero-foto-1, .cfg-hero-foto-1 img, .cfg-hero-foto-2, .cfg-peek:not([hidden]) { animation: none; } .cfg-title em::after { transform: scaleX(1); } .cfg-hero-foto-1 { clip-path: none; } .cfg-klaar-check circle, .cfg-klaar-check path { animation: none; stroke-dashoffset: 0; } .cfg-woning .wplan .lijn { stroke-dashoffset: 0; transition: none; } .cfg-vonk { animation: none; opacity: 0; } .tilt, .cfg-check, .cfg-cta .pijl, .cfg-progress-sep::after, .cfg-progress-step .dot, .cfg-swatch .bol, .odo-rol, .cfg-topbar, .cfg-galerij-item img, .cfg-fotokaart .kfoto img, .cfg-woning .wplan-img, .cfg-start, .cfg-start .pijl, .cfg-hero-link svg { transition: none; } /* Beeldstage: directe swap in plaats van crossfade (na decode, dus zonder flits). */ .cfg-beeldstage-laag { transition: none; } .cfg-woning:hover, .cfg-keuze:hover, .cfg-janee-knop:hover { --til: 0px; } .cfg-swatch:hover .bol { transform: none; } .cfg-galerij-item:hover img, .cfg-fotokaart:hover .kfoto img, .cfg-woning:hover .wplan-img { transform: none; } .selected > .cfg-check svg polyline { transition: none; } }