/* ============================================================================ ReviewMerci — marketingsite (reviewmerci.com) Huisstijl volgens het merkpakket in /brand (merkregels.md en tokens.css). De kleurwaarden hieronder zijn overgenomen uit brand/tokens.css (licht thema): wijzig ze daar eerst, nooit enkel hier. De marketingsite heeft geen donkere modus; enkel de footer is donker en gebruikt de petrolkleuren van het merk. ============================================================================ */ /* Lettertypes: zelf aangeboden (geen verzoek naar Google = geen IP-adres naar Google) */ @font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-cursief.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Work Sans'; src: url('/fonts/work-sans.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { color-scheme: light; /* altijd licht, ook als de gsm in donkere modus staat */ /* Kleuren (brand/tokens.css, licht thema) */ --papier: #F3F1EC; /* paginagrond */ --papier-diep: #E8E3D8; /* afwisselende sectieband */ --kaart: #FFFDF8; /* kaarten en formulieren */ --lijn: #DCD6C9; /* haarlijnen */ --lijn-sterk: #848A86; /* randen van velden */ --inkt: #163A45; /* petrol: alle tekst */ --inkt-zacht: #4F656D; /* ondertitels en hulpteksten */ --oker: #B07A1F; /* luifel, sterren, iconen, titelaccent vanaf 24px */ --oker-diep: #845815; /* kleine okertekst, hover van de knop */ --oker-zacht: #F4E8D0; /* labels, uitgelichte kaart */ --knop: #163A45; /* primaire knop: petrol */ --op-knop: #FFFFFF; --link: #163A45; --focus: #845815; --positief: #2F6A4C; --positief-zacht: #E1EEE6; --negatief: #962F3B; /* wijnrood: enkel foutmeldingen */ --negatief-zacht: #F5E1E3; --schaduw-kaart: 0 1px 2px #163A450D, 0 10px 30px -12px #163A4529; --focusring: 0 0 0 2px #F3F1EC, 0 0 0 4px #845815; /* Donkere blokken (waarden uit het donkere thema van het merk) */ --petrol-donker: #0F2B33; --op-donker: #F3F1EC; --op-donker-zacht: #B9C8CB; --oker-licht: #D9A441; /* Effect-tokens (docs/DESIGN.md §2): enkel mengsels van merktokens */ --glas-balk-rust: color-mix(in srgb, var(--papier) 60%, transparent); /* menubalk bovenaan de pagina */ --glas-balk: color-mix(in srgb, var(--papier) 78%, transparent); /* menubalk na scrollen, gsm-balk */ --glas-balk-open: color-mix(in srgb, var(--papier) 94%, transparent); /* menubalk met open gsm-menu */ --glas-blur-balk: blur(16px) saturate(150%); --glas-kaart: color-mix(in srgb, var(--kaart) 58%, transparent); /* zwevende kaart in de hero */ --glas-rand: color-mix(in srgb, var(--kaart) 80%, transparent); --glas-licht: inset 0 1px 0 var(--kaart); --glas-blur-kaart: blur(22px) saturate(160%); --glas-schaduw: 0 2px 4px color-mix(in srgb, var(--inkt) 6%, transparent), 0 24px 48px -16px color-mix(in srgb, var(--inkt) 30%, transparent); --glas-venster: color-mix(in srgb, var(--kaart) 82%, transparent); /* vensters die openklappen */ --glas-blur-venster: blur(28px) saturate(160%); --scrim: color-mix(in srgb, var(--inkt) 28%, transparent); /* achter een open venster */ --duur-druk: 100ms; --duur-kort: 150ms; --duur: 300ms; --duur-in-beeld: 400ms; --curve-uit: cubic-bezier(.2, .8, .2, 1); --curve-in-uit: cubic-bezier(.65, 0, .35, 1); /* Lettertypes */ --font-titel: "Fraunces", Georgia, serif; --font-tekst: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Maten (basis 4px) */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pil: 9999px; --breedte: 1120px; --rand: 16px; --menu-hoogte: 72px; } @media (min-width: 700px) { :root { --rand: 32px; } } @media (min-width: 1100px) { :root { --rand: 48px; } } /* ---------- Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--menu-hoogte) + 12px); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--font-tekst); font-size: 16px; line-height: 1.625; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } [hidden] { display: none !important; } a { transition: color var(--duur-kort) ease, background-color var(--duur-kort) ease, text-decoration-color var(--duur-kort) ease; } a { color: var(--link); text-decoration-color: var(--oker); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } a:not(.knop):hover { color: var(--oker-diep); } /* knoppen regelen hun eigen hoverkleur (anders oker-diep op petrol na een tik op gsm) */ h1, h2, h3 { font-family: var(--font-titel); font-weight: 600; font-variation-settings: "SOFT" 100; line-height: 1.15; margin: 0; letter-spacing: -0.01em; } h1 { font-size: clamp(2.375rem, 1.55rem + 3.4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; } h2 { font-size: clamp(2rem, 1.6rem + 1.7vw, 2.5rem); letter-spacing: -0.015em; } h1, h2 { text-wrap: balance; } h3 { font-size: 1.3125rem; line-height: 1.33; letter-spacing: 0; } p { margin: 0 0 1em; } /* Merkaccent: één cursief woord in oker per sectie, als echo van "Merci" */ h1 em, h2 em { font-style: italic; color: var(--oker); } /* op papier-diep haalt oker geen 3:1; daar het accentwoord in oker-diep (4,8:1) */ .blok--vlak h2 em, .proberen h2 em { color: var(--oker-diep); } :focus-visible { outline: 2px solid transparent; box-shadow: var(--focusring); border-radius: var(--radius-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .naar-inhoud { position: absolute; left: 12px; top: -60px; background: var(--inkt); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 100; } .naar-inhoud:focus { top: 12px; color: #fff; } .wrap { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 var(--rand); } .blok { padding: clamp(64px, 9vw, 96px) 0; position: relative; } /* Ritme: afwisselende band in papier-diep, met zachte overgangen in plaats van een harde lijn */ .blok--vlak { background: linear-gradient(180deg, transparent 0, var(--papier-diep) 140px, var(--papier-diep) calc(100% - 140px), transparent 100%); } .blok--papier-diep { background: var(--papier-diep); } .blok-kop { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); } .blok-kop--midden { margin-left: auto; margin-right: auto; text-align: center; } .blok-kop p { text-wrap: pretty; color: var(--inkt-zacht); font-size: 1.1875rem; line-height: 1.58; margin-top: 16px; margin-bottom: 0; } .bovenregel { display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oker-diep); margin-bottom: 14px; } /* ---------- Knoppen ---------- */ .knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border-radius: var(--radius-pil); border: 1.5px solid transparent; font: 500 1rem/1.25 var(--font-tekst); text-decoration: none; cursor: pointer; transition: background-color var(--duur-kort) ease, color var(--duur-kort) ease, border-color var(--duur-kort) ease, transform var(--duur-druk) var(--curve-uit); } /* Indrukken: meteen een fractie kleiner, zodat je voelt dat de knop reageert */ .knop:active, .menu-knop:active { transform: scale(.97); } /* Op gsm geen grijze tikflits over wat zelf al reageert bij indrukken (site.js zet :active aan op iPhone) */ .knop, .menu-knop, .winst-open, .venster-sluit, .keuze input { -webkit-tap-highlight-color: transparent; } /* Grote knop: enkel in de hero en in het blok "Gratis proberen" */ .hero .knoppen .knop, .formulier .knop--hoofd, .tekstpagina-knoppen .knop--hoofd { min-height: 52px; padding: 14px 28px; font-size: 1.0625rem; } .knop--hoofd { background: var(--knop); color: var(--op-knop); } @media (hover: hover) and (pointer: fine) { .knop--hoofd:hover { background: var(--oker-diep); color: #FFFFFF; } } .knop--rand { background: transparent; color: var(--inkt); border-color: var(--inkt); } @media (hover: hover) and (pointer: fine) { .knop--rand:hover { background: var(--inkt); border-color: var(--inkt); color: var(--papier); } } .knop--klein { min-height: 44px; padding: 8px 18px; font-size: 0.9375rem; } .knop--breed { width: 100%; } .knop[disabled] { opacity: .6; cursor: wait; } /* ---------- Menubalk ---------- */ /* Glas zoals op craft.do: bovenaan licht en luchtig, na scrollen iets steviger met een haarlijn, met open gsm-menu bijna effen (leesbaarheid). Enkel kleur en rand gaan over; de blur blijft gelijk. */ .menubalk { position: sticky; top: 0; z-index: 50; background: var(--glas-balk-rust); -webkit-backdrop-filter: var(--glas-blur-balk); backdrop-filter: var(--glas-blur-balk); border-bottom: 1px solid transparent; transition: background-color 250ms ease, border-color 250ms ease; } .menubalk.is-gescrold { background: var(--glas-balk); border-bottom-color: var(--lijn); } .menubalk.is-menu-open { background: var(--glas-balk-open); border-bottom-color: var(--lijn); } /* Terugval: geen glas mogelijk of gevraagd → effen papier */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .menubalk, .gsm-balk { background: var(--papier); } } @media (prefers-reduced-transparency: reduce) { .menubalk, .gsm-balk { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { .menubalk, .gsm-balk { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; } .menubalk { border-bottom-color: var(--lijn-sterk); } } .menubalk .wrap { display: flex; align-items: center; gap: 16px; height: var(--menu-hoogte); } .logo { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; flex: none; } /* Horizontaal logo uit brand/logo: nooit lager dan 28px, niet uitrekken of hertekenen */ .logo-beeld { height: 40px; width: auto; } .taalkeuze { display: flex; align-items: center; gap: 2px; font-size: 0.88rem; font-weight: 600; } .taalkeuze a, .taalkeuze span { padding: 6px 7px; border-radius: 8px; text-decoration: none; color: var(--inkt-zacht); } .taalkeuze [aria-current="page"] { color: var(--inkt); background: rgba(22, 58, 69, 0.07); } .taalkeuze .taal-later { opacity: .45; cursor: default; } /* tikvlak van minstens 44px (gsm-menu en footer) */ .gsm-menu .taalkeuze a, .footer .taalkeuze a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } @media (hover: hover) and (pointer: fine) { .taalkeuze a:not([aria-current]):hover { color: var(--inkt); } .footer .taalkeuze a:not([aria-current]):hover { color: #fff; } } .taalkeuze .punt { padding: 0; color: var(--lijn); } .menu-link { color: var(--inkt); text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 8px 6px; } .menu-link:hover { color: var(--oker-diep); } .hoofdmenu { display: flex; align-items: center; gap: 4px; margin-right: 8px; } .knop-inloggen { white-space: nowrap; } /* nooit over twee regels in de menubalk (Franse en Engelse woorden zijn langer) */ .menu-link, .menubalk .knop { white-space: nowrap; } html:not([lang="nl"]) .menubalk .wrap { gap: 10px; } html:not([lang="nl"]) .hoofdmenu { gap: 0; margin-right: 4px; } @media (max-width: 1100px) { .menubalk > .wrap > .taalkeuze { display: none; } } @media (max-width: 980px) { .hoofdmenu { display: none; } .menubalk .menu-knop { display: inline-flex; } } @media (max-width: 640px) { .menubalk .knop-inloggen { display: none; } .menubalk .knop { min-height: 44px; padding: 8px 14px; font-size: 0.9rem; white-space: nowrap; } } .menu-knop { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; border: 0; background: transparent; color: var(--inkt); border-radius: 10px; cursor: pointer; transition: transform var(--duur-druk) var(--curve-uit); } .menu-knop svg { width: 24px; height: 24px; } .gsm-menu { display: none; border-top: 1px solid var(--lijn); padding: 8px 0 16px; } .gsm-menu.is-open { display: block; transition: opacity 200ms var(--curve-uit), transform 200ms var(--curve-uit); } /* Openen: zacht vanuit de menubalk naar beneden. Sluiten gebeurt meteen. */ @starting-style { .gsm-menu.is-open { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { @starting-style { .gsm-menu.is-open { transform: none; } } } .gsm-menu .wrap { height: auto; flex-direction: column; align-items: stretch; gap: 4px; } .gsm-menu .menu-link { display: block; padding: 12px 4px; font-size: 1.05rem; } .gsm-menu .taalkeuze { padding: 8px 0 0; font-size: 1rem; } @media (max-width: 420px) { .menubalk .wrap { gap: 8px; } .menubalk .knop { padding: 8px 12px; font-size: 0.86rem; } .menubalk .logo-beeld { height: 34px; } } @media (max-width: 345px) { .menubalk .logo-beeld { height: 30px; } .menubalk .wrap { gap: 6px; } .menubalk .knop { padding: 8px 11px; font-size: .84rem; } } @media (min-width: 981px) { .gsm-menu, .gsm-menu.is-open { display: none; } } .gsm-menu .knop { margin-top: 8px; } /* ---------- Kaart (heette vroeger glaskaart; nu effen) ---------- */ .glas { background: var(--kaart); border: 0; box-shadow: var(--schaduw-kaart); border-radius: var(--radius-lg); } /* zachte kleurvlekken achter de kaarten */ .gloed { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); } .gloed::before, .gloed::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; } .gloed::before { width: 420px; height: 420px; background: var(--oker-zacht); top: -80px; right: -60px; } .gloed::after { width: 360px; height: 360px; background: color-mix(in srgb, var(--inkt) 12%, var(--kaart)); bottom: -60px; left: -80px; } .blok > .wrap { position: relative; z-index: 1; } /* ---------- Kleurverloop (docs/DESIGN.md §3, variant "uitgesproken") ---------- Herbruikbaar: zet in een blok met position: relative De inhoud van het blok staat erboven (z-index 1). site.js pauzeert de beweging buiten beeld. */ .verloop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--papier-diep); /* schuine onderrand die zacht uitloopt in plaats van hard afgesneden (zelfde helling als vroeger: rechts 84%, links 100%) */ -webkit-mask-image: linear-gradient(174deg, #000 66%, transparent 96%); mask-image: linear-gradient(174deg, #000 66%, transparent 96%); } .verloop-vlek { position: absolute; border-radius: 50%; will-change: transform; } .verloop-vlek--1 { width: 56vmax; height: 56vmax; top: -28vmax; right: 18%; background: radial-gradient(closest-side, color-mix(in srgb, var(--oker) 42%, transparent), transparent); animation: verloop-a 26s var(--curve-in-uit) infinite alternate; } .verloop-vlek--2 { width: 56vmax; height: 56vmax; bottom: -30vmax; left: -10vmax; background: radial-gradient(closest-side, var(--oker-zacht), transparent); animation: verloop-b 46s var(--curve-in-uit) infinite alternate; } .verloop-vlek--3 { width: 60vmax; height: 60vmax; bottom: -22vmax; right: -20vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--inkt) 62%, transparent), transparent); animation: verloop-c 22s var(--curve-in-uit) infinite alternate; } .verloop-vlek--4 { width: 40vmax; height: 40vmax; top: -16vmax; right: -12vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--inkt) 40%, transparent), transparent); animation: verloop-d 53s var(--curve-in-uit) infinite alternate; } /* Sluier: houdt de kant van de tekst licht */ .verloop-sluier { position: absolute; inset: 0; background: linear-gradient(100deg, var(--papier) 0%, color-mix(in srgb, var(--papier) 82%, transparent) 38%, transparent 62%); } @media (max-width: 880px) { .verloop-sluier { background: linear-gradient(180deg, color-mix(in srgb, var(--papier) 90%, transparent) 0%, color-mix(in srgb, var(--papier) 70%, transparent) 45%, transparent 75%); } } @keyframes verloop-a { to { transform: translate3d(-9vmax, 6vmax, 0) scale(1.12); } } @keyframes verloop-b { to { transform: translate3d(10vmax, -5vmax, 0) scale(.92); } } @keyframes verloop-c { to { transform: translate3d(-7vmax, -8vmax, 0) scale(1.18); } } @keyframes verloop-d { to { transform: translate3d(8vmax, 7vmax, 0) scale(1.08); } } .verloop.is-gepauzeerd .verloop-vlek { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .verloop-vlek { animation: none; } } /* Hero met verloop: schuift onder de menubalk, zodat het glas van de balk kleur heeft om door te schijnen */ .hero.met-verloop { overflow: hidden; isolation: isolate; margin-top: calc(-1 * var(--menu-hoogte)); padding-top: calc(var(--menu-hoogte) + clamp(40px, 7vw, 88px)); } /* ---------- 1. Hero ---------- */ .hero { padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 9vw, 104px); } .hero-raster { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; } /* "Al aan de toonbank": effen kaartje met dezelfde opbouw als de glazen kaart (icoon + tekst), geen glas */ .al-bij { position: relative; display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: clamp(40px, 6vw, 64px) auto 0; padding: 8px 20px 8px 8px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--radius-pil); box-shadow: var(--schaduw-kaart); color: var(--inkt); font-weight: 600; line-height: 1.35; } .al-bij-logo { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--oker-zacht); color: var(--oker-diep); } .al-bij-logo svg { width: 20px; height: 20px; } @media (max-width: 880px) { .al-bij { width: 100%; max-width: 480px; border-radius: var(--radius-lg); padding: 12px 16px 12px 12px; } } .hero-tekst > p { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--inkt-zacht); margin: 22px 0 30px; max-width: 34em; } .knoppen { display: flex; flex-wrap: wrap; gap: 12px; } /* Bovenregel in de hero: gewone schrijfwijze (DESIGN.md §1.7) */ .hero .bovenregel { text-transform: none; letter-spacing: 0; font-size: 0.875rem; } .voordelen-rij { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.92rem; color: var(--inkt-zacht); } .voordelen-rij li { display: inline-flex; align-items: center; gap: 7px; } .voordelen-rij svg { width: 16px; height: 16px; color: var(--oker-diep); flex: none; } @media (max-width: 880px) { .hero-raster { grid-template-columns: 1fr; } .hero-beeld { order: 2; } } @media (max-width: 480px) { .hero .knoppen .knop { width: 100%; } } /* Hero-beeld (docs/DESIGN.md §7). Met .hero-beeld--foto: foto van het bordje met een zwevende glazen kaart (voorlopig een AI-afbeelding in img/voorlopig/, vóór live een echte foto). Zonder: het getekende bordje met gsm, als terugval zolang er geen foto is. */ .hero-beeld { position: relative; aspect-ratio: 1 / 0.92; max-width: 540px; width: 100%; justify-self: center; } .hero-beeld--foto { aspect-ratio: 1 / 0.98; } .hero-beeld--foto .hero-getekend, .hero-beeld:not(.hero-beeld--foto) .hero-foto, .hero-beeld:not(.hero-beeld--foto) .binnen { display: none; } /* Getekend bordje met gsm (enkel merkkleuren) */ .hero-getekend { position: absolute; inset: 0; } .toonbank { position: absolute; inset: 8% 0 0 0; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--inkt) 5%, transparent) 62.2%, color-mix(in srgb, var(--inkt) 3%, transparent) 100%), radial-gradient(120% 90% at 30% 10%, var(--oker-zacht) 0%, color-mix(in srgb, var(--papier) 60%, var(--papier-diep)) 55%, var(--papier-diep) 100%); } .toonbank::after { content: ""; position: absolute; left: -10%; right: -10%; top: 62%; height: 2px; background: color-mix(in srgb, var(--kaart) 70%, transparent); } .bordje { position: absolute; left: 9%; top: 15%; width: 47%; aspect-ratio: 0.72; border-radius: 16px; padding: 7% 6%; background: linear-gradient(150deg, color-mix(in srgb, var(--kaart) 78%, transparent), color-mix(in srgb, var(--kaart) 38%, transparent)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--kaart) 95%, transparent); box-shadow: 0 24px 40px color-mix(in srgb, var(--inkt) 14%, transparent), var(--glas-licht); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6%; } .bordje-logo { font-family: var(--font-titel); font-size: clamp(0.8rem, 2.4vw, 1.1rem); font-weight: 600; color: var(--inkt); border: 1.5px dashed color-mix(in srgb, var(--inkt) 30%, transparent); border-radius: 8px; padding: 4px 10px; } .bordje-vraag { font-family: var(--font-titel); font-size: clamp(0.72rem, 2vw, 0.98rem); line-height: 1.25; } .bordje-qr { width: 46%; aspect-ratio: 1; } .bordje-tik { display: flex; align-items: center; gap: 6px; font-size: clamp(0.58rem, 1.5vw, 0.74rem); font-weight: 600; color: var(--inkt-zacht); } .bordje-tik svg { width: 1.4em; height: 1.4em; color: var(--oker-diep); } .bordje-voet { position: absolute; left: 14%; right: 14%; bottom: -5%; height: 6%; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--inkt) 18%, transparent), color-mix(in srgb, var(--inkt) 5%, transparent)); } .hero-getekend .telefoon { position: absolute; right: 5%; bottom: 3%; width: 39%; transform: rotate(4deg); } /* Foto met zwevende glazen kaart */ .hero-foto { position: absolute; inset: 0 14% 18% 0; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--schaduw-kaart); background: var(--papier-diep); } .hero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; } /* Zwevende glazen kaart: hier komt feedback binnen */ .binnen { position: absolute; right: 0; bottom: 0; width: min(60%, 320px); padding: 16px 18px 18px; border-radius: var(--radius-lg); color: var(--inkt); background: var(--glas-kaart); -webkit-backdrop-filter: var(--glas-blur-kaart); backdrop-filter: var(--glas-blur-kaart); border: 1px solid var(--glas-rand); box-shadow: var(--glas-licht), var(--glas-schaduw); } .binnen-kop { display: flex; align-items: center; gap: 10px; } .binnen-icoon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--kaart); display: grid; place-items: center; box-shadow: 0 1px 2px color-mix(in srgb, var(--inkt) 10%, transparent); } .binnen-icoon img { width: 24px; height: auto; } .binnen-naam { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .binnen-zaak { font-family: var(--font-titel); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.0625rem; line-height: 1.2; } /* "Zonet" en het label op één regel; is de kaart te smal, dan springt het label naar de volgende regel */ .binnen-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .binnen-wanneer { font-size: 0.8125rem; font-weight: 500; color: var(--inkt); line-height: 1.3; } .binnen-label { white-space: nowrap; font-size: 0.75rem; font-weight: 600; line-height: 1.4; color: var(--oker-diep); background: var(--oker-zacht); border-radius: var(--radius-pil); padding: 2px 9px; } .binnen-sterren { display: flex; gap: 3px; margin: 14px 0 8px; color: var(--ster, var(--oker)); } .binnen-sterren svg { width: 20px; height: 20px; } .binnen-tekst { margin: 0; font-size: 0.9375rem; line-height: 1.45; font-weight: 500; } @media (max-width: 880px) { .hero-beeld--foto { max-width: 480px; aspect-ratio: 1 / 1.12; } /* foto over de volle breedte, kaart half eronder, zodat het bordje zichtbaar blijft */ .hero-foto { inset: 0 0 26% 0; } .hero-foto img { object-position: 50% 45%; } } @media (max-width: 420px) { .binnen { width: 78%; padding: 14px 14px 16px; } .binnen-tekst { font-size: 0.875rem; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .binnen { background: var(--kaart); } } @media (prefers-reduced-transparency: reduce) { .binnen { background: var(--kaart); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { .binnen { background: var(--kaart); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--lijn-sterk); } } /* Feedback komt binnen (DESIGN.md §5): één keer per bezoek. Enkel met JavaScript (html.met-beweging), zodat zonder JavaScript alles meteen zichtbaar is. */ @keyframes kaart-aan { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes ster-aan { from { color: var(--lijn); transform: scale(.7); } to { color: var(--ster, var(--oker)); transform: none; } } @keyframes tekst-aan { from { opacity: 0; } to { opacity: 1; } } .met-beweging .binnen { animation: kaart-aan 700ms var(--curve-uit) 600ms both; } .met-beweging .binnen-sterren svg { animation: ster-aan 350ms var(--curve-uit) both; } .met-beweging .binnen-sterren svg:nth-child(1) { animation-delay: 1150ms; } .met-beweging .binnen-sterren svg:nth-child(2) { animation-delay: 1230ms; } .met-beweging .binnen-sterren svg:nth-child(3) { animation-delay: 1310ms; } .met-beweging .binnen-sterren svg:nth-child(4) { animation-delay: 1390ms; } .met-beweging .binnen-sterren svg:nth-child(5) { animation-delay: 1470ms; } .met-beweging .binnen-tekst { animation: tekst-aan 500ms ease-out 1600ms both; } @media (prefers-reduced-motion: reduce) { .met-beweging .binnen, .met-beweging .binnen-sterren svg, .met-beweging .binnen-tekst { animation: none; } } .beeld-label { position: absolute; left: 12px; bottom: 12px; font-size: 0.72rem; color: var(--inkt-zacht); background: rgba(255,255,255,.7); padding: 3px 8px; border-radius: 999px; } /* ---------- Telefoon (nagebootste schermen van de feedbackpagina) ---------- */ .telefoon { aspect-ratio: 9 / 18.5; border-radius: 26px; padding: 7px; background: var(--petrol-donker); box-shadow: 0 22px 44px rgba(22,58,69,.24); } .scherm { height: 100%; border-radius: 20px; overflow: hidden; background: var(--kaart); color: var(--inkt); display: flex; flex-direction: column; padding: 3.2em 1.1em 1.1em; gap: 0.9em; font-size: 10px; line-height: 1.3; position: relative; } .scherm::before { content: ""; position: absolute; top: 1em; left: 50%; width: 30%; height: 0.9em; transform: translateX(-50%); background: var(--petrol-donker); border-radius: 999px; } .s-zaak { font-family: var(--font-titel); font-weight: 600; font-size: 1.15em; text-align: center; } .s-titel { font-family: var(--font-titel); font-size: 1.35em; line-height: 1.2; text-align: center; } .s-sterren { display: flex; justify-content: center; gap: 0.3em; color: var(--oker); } .s-sterren svg { width: 1.9em; height: 1.9em; } .s-sterren .leeg { color: var(--lijn); } .s-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .s-chip { border: 1px solid var(--lijn); border-radius: 999px; padding: 3px 7px; background: #fff; font-size: .9em; } .s-chip.aan { background: var(--inkt); color: #fff; border-color: var(--inkt); } .s-veld { background: #fff; border: 1px solid var(--lijn); border-radius: 6px; padding: 6px 7px; color: var(--inkt-zacht); font-size: .95em; } .s-knop { margin-top: auto; background: var(--inkt); color: #fff; text-align: center; border-radius: 999px; padding: 8px; font-weight: 600; font-size: .95em; } .s-knop.licht { background: #fff; color: var(--inkt); border: 1px solid var(--lijn); margin-top: 0; } .s-tekst { text-align: center; color: var(--inkt-zacht); font-size: .95em; } .s-vraag { display: flex; gap: 6px; } .s-vraag span { flex: 1; text-align: center; border: 1px solid var(--lijn); background: #fff; border-radius: 8px; padding: 6px 0; font-weight: 600; } .s-vraag span.aan { background: var(--inkt); color: #fff; border-color: var(--inkt); } .s-vink { flex: none; width: 4.4em; height: 4.4em; margin: 0.4em auto; border-radius: 50%; background: var(--oker-zacht); color: var(--oker-diep); display: grid; place-items: center; } .s-vink svg { width: 50%; height: 50%; } /* dashboard-scherm */ .scherm--dash { background: #fff; gap: 0.6em; } .s-dashkop { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; } .s-dashkop small { font-weight: 500; color: var(--inkt-zacht); font-size: .85em; } .s-label { font-size: .85em; font-weight: 600; color: var(--negatief); text-transform: uppercase; letter-spacing: .04em; } .s-reactie { border: 1px solid var(--lijn); border-radius: 8px; padding: 6px 7px; display: grid; gap: 2px; } .s-reactie.aandacht { border-left: 3px solid var(--negatief); } .s-reactie b { font-weight: 600; } .s-reactie i { font-style: normal; color: var(--inkt-zacht); font-size: .9em; } .s-mini-sterren { color: var(--oker); letter-spacing: 1px; font-size: .95em; } /* ---------- 2. Cijfers (gemaakt uit website/data/cijfers.json door scripts/bouw_cijfers.py) ---------- Eén kaart, blokken in een raster van 2 × 2, gescheiden door haarlijnen. Elk blok: groot cijfer, label, context, een klein beeld en de bron. js/beweging.js laat cijfer en beeld samen optellen. */ .cijfers-kaart { background: var(--kaart); border-radius: var(--radius-lg); box-shadow: var(--schaduw-kaart); overflow: hidden; } .cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--lijn); } .cijfer-kaart { background: var(--kaart); padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; } .cijfer-kaart--breed { grid-column: 1 / -1; } .cijfer-kaart--uitgelicht { background: color-mix(in srgb, var(--oker-zacht) 55%, var(--kaart)); } .cijfer-kaart p { margin: 0; } .cijfer-kaart .groot-cijfer { font-family: var(--font-titel); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: clamp(3rem, 2.2rem + 3.4vw, 4.75rem); line-height: 1; letter-spacing: -0.02em; color: var(--oker); margin-bottom: 14px; white-space: nowrap; } .cijfer-kaart--tekst .groot-cijfer { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem); line-height: 1.1; white-space: normal; text-wrap: balance; } .cijfer-kaart .cijfer-klein { font-size: .85rem; font-weight: 600; color: var(--inkt); margin-bottom: 8px; } .cijfer-label { color: var(--inkt); font-weight: 500; font-size: 1.125rem; line-height: 1.4; max-width: 30ch; } .cijfer-context { color: var(--inkt-zacht); font-size: .95rem; line-height: 1.5; margin-top: 8px !important; max-width: 38ch; } .cijfer-bron { margin-top: 18px !important; font-size: .8125rem; } .cijfer-bron a { color: var(--inkt-zacht); text-decoration-color: var(--lijn-sterk); text-decoration-thickness: 1px; } @media (hover: hover) and (pointer: fine) { .cijfer-bron a:hover { color: var(--oker-diep); text-decoration-color: var(--oker); } } /* beelden onder het cijfer (aria-hidden, enkel voor het oog) */ .viz { margin-top: auto; padding-top: 24px; max-width: 360px; } .viz-lijnen { display: block; width: 100%; overflow: visible; } .viz-lijnen line { vector-effect: non-scaling-stroke; stroke-linecap: round; } /* 5–9%: band op een schaal van 0 tot 10% */ .viz--bereik .viz-lijnen { height: 14px; } .viz--bereik .viz-spoor { stroke: var(--lijn); stroke-width: 10px; } .viz--bereik .viz-band { stroke: var(--oker); stroke-width: 10px; } .viz-as { display: flex; justify-content: space-between; margin-top: 8px; font-size: .75rem; color: var(--inkt-zacht); font-variant-numeric: tabular-nums; } /* 27%: het tweede balkje is 27% langer */ .viz--balk .viz-lijnen { height: 34px; } .viz--balk line { stroke-width: 10px; } .viz-balk-basis { stroke: var(--lijn); } .viz-balk-meer { stroke: var(--oker); } /* 4 op 5: vijf figuurtjes */ .viz--figuren { display: flex; gap: 6px; } .viz-figuur { width: 44px; height: 44px; color: var(--lijn); transition: color 300ms var(--curve-uit); } .viz-figuur.aan { color: var(--oker); } /* Google: een lijstje waarin "Jouw zaak" een plaats stijgt */ .viz--google { list-style: none; margin: 0; padding: 24px 0 0; display: grid; gap: 6px; } .viz-plek { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: var(--radius-md); background: var(--papier); } .viz-lijn { flex: 1; height: 8px; border-radius: var(--radius-pil); background: var(--lijn); max-width: 120px; } .viz-plek .viz-sterren { margin-left: auto; display: flex; gap: 2px; color: var(--lijn); } .viz-plek .viz-sterren svg { width: 13px; height: 13px; } .viz-plek--jij { background: var(--kaart); box-shadow: 0 0 0 1.5px var(--oker), var(--schaduw-kaart); position: relative; z-index: 1; } .viz-plek--jij .viz-sterren { color: var(--oker); } .viz-plek--jij .viz-sterren svg.leeg { color: var(--lijn); } .viz-pin { width: 18px; height: 18px; flex: none; color: var(--oker-diep); } .viz-naam { font-size: .875rem; font-weight: 600; color: var(--inkt); white-space: nowrap; } @media (max-width: 820px) { .cijfers { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 380px) { .viz-figuur { width: 30px; height: 30px; } } /* de sterkste zin van het blok: groot, met een fijne okerlijn */ .afsluiter { font-family: var(--font-titel); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; max-width: 28ch; margin: clamp(48px, 7vw, 80px) 0 0; padding-left: clamp(18px, 2.5vw, 28px); border-left: 2px solid var(--oker); } /* Google-check: een zoekbalk zoals mensen die kennen */ .zoekkaart { margin-top: clamp(40px, 6vw, 64px); padding: clamp(22px, 4vw, 34px); display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px 32px; align-items: center; } .zoekkaart h3 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 8px; } .zoekkaart p { margin: 0; color: var(--inkt-zacht); } .zoekrij { display: flex; align-items: center; gap: 6px; padding: 5px; background: var(--kaart); border: 1.5px solid var(--lijn-sterk); border-radius: var(--radius-pil); transition: border-color var(--duur-kort) ease, box-shadow var(--duur-kort) ease; } .zoekrij:has(input:focus-visible) { border-color: var(--focus); box-shadow: var(--focusring); } .zoekveld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding-left: 14px; } .zoekveld-icoon { width: 20px; height: 20px; flex: none; color: var(--inkt-zacht); } .zoekveld input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--inkt); background: transparent; border: 0; padding: 10px 0; min-height: 44px; } .zoekveld input:focus-visible { outline: none; box-shadow: none; } .zoekveld input::-webkit-search-cancel-button { display: none; } .zoekrij .knop { flex: none; } .knop-pijl { width: 18px; height: 18px; flex: none; } @media (max-width: 820px) { .zoekkaart { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* gsm: het veld als pil, de knop eronder over de volle breedte */ .zoekrij { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border: 0; background: none; } .zoekrij:has(input:focus-visible) { box-shadow: none; } .zoekveld { background: var(--kaart); border: 1.5px solid var(--lijn-sterk); border-radius: var(--radius-pil); padding: 2px 18px; } .zoekveld:has(input:focus-visible) { border-color: var(--focus); box-shadow: var(--focusring); } } /* ---------- 3. Hoe het werkt ---------- */ .werkt { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 72px); align-items: center; } .werkt-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: stap; } .werkt-stappen li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; } .werkt-stappen li::before { counter-increment: stap; content: counter(stap); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--inkt); color: var(--papier); font-family: var(--font-titel); font-weight: 600; font-size: 1.1rem; } .werkt-stappen h3 { margin: 6px 0 4px; } .werkt-stappen p { margin: 0; color: var(--inkt-zacht); } .werkt-video { margin: 0; aspect-ratio: 4 / 5; max-width: 440px; width: 100%; justify-self: center; border-radius: var(--radius-lg); overflow: hidden; background: var(--papier-diep); } .werkt-video video, .werkt-video img { width: 100%; height: 100%; object-fit: cover; } .video-plaatshouder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px; text-align: center; color: var(--inkt-zacht); } .video-icoon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--kaart); color: var(--oker-diep); box-shadow: var(--schaduw-kaart); } .video-icoon svg { width: 26px; height: 26px; margin-left: 3px; } .video-plaatshouder small { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .drie-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(40px, 6vw, 64px); } @media (max-width: 880px) { .werkt { grid-template-columns: 1fr; } .drie-kaarten { grid-template-columns: 1fr; gap: 12px; } } /* ---------- 4. Wat je ermee wint ---------- */ .winst-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .winst { padding: 26px 24px; } .winst-icoon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--oker-zacht); color: var(--oker-diep); margin-bottom: 18px; } .winst-icoon svg { width: 22px; height: 22px; } .winst h3 { margin-bottom: 8px; } .winst p { margin: 0; color: var(--inkt-zacht); font-size: .97rem; } .label-binnenkort { display: inline-block; vertical-align: middle; margin-left: 6px; font-family: var(--font-tekst); font-size: .8125rem; line-height: 1.23; font-weight: 500; letter-spacing: .02em; color: var(--inkt); background: var(--lijn); border-radius: var(--radius-pil); padding: 4px 12px; transform: translateY(-2px); } @media (max-width: 600px) { .winst-raster { grid-template-columns: 1fr; gap: 12px; } .winst-raster .winst, .drie-kaarten .winst { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 20px; } .winst .winst-icoon { grid-row: span 2; margin-bottom: 0; } } /* Kaartje → venster (DESIGN.md §6). De plusknop verschijnt enkel met JavaScript (html.met-beweging); ze ligt over het hele kaartje, zodat een klik op het kaartje het venster opent. */ .winst { position: relative; } .winst-open { display: none; } .met-beweging .winst-open { display: grid; place-items: center; position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--lijn); border-radius: 50%; background: var(--kaart); color: var(--inkt); cursor: pointer; transition: background-color var(--duur-kort) ease, color var(--duur-kort) ease, border-color var(--duur-kort) ease, transform var(--duur-druk) var(--curve-uit); } .met-beweging .winst { overflow: hidden; } .met-beweging .winst:has(.winst-open) { cursor: pointer; } /* enkel kaartjes die echt een venster openen */ .met-beweging .winst-open::after { content: ""; position: absolute; top: -999px; right: -999px; bottom: -999px; left: -999px; } .winst-open svg { width: 18px; height: 18px; } .met-beweging .winst h3 { padding-right: 48px; } @media (hover: hover) and (pointer: fine) { .winst:hover .winst-open { background: var(--knop); color: var(--op-knop); border-color: var(--knop); } } .winst:has(.winst-open:active) { transform: scale(.985); } .winst { transition: transform var(--duur-druk) var(--curve-uit); } .winst-open:focus-visible { outline: none; box-shadow: var(--focusring); } .winst.is-weg { opacity: 0; } /* ---------- Glasgroep (DESIGN.md §4): stilstaande kleurvlekken achter een groep glazen kaarten ---------- Enkel radial-gradient, geen filter: blur(), en niets beweegt. Zonder blur of bij minder transparantie worden de kaarten weer effen. */ .glas-groep { position: relative; isolation: isolate; } .blok:has(.glas-groep) { overflow-x: clip; } /* de vlekken steken uit, maar nooit zijwaarts scrollen */ /* Twee lagen die elk traag drijven (petrol en oker), plus een zacht licht dat de muis volgt (js/glas.js). Enkel transform en opacity; pauzeert buiten beeld (.is-gepauzeerd); stil bij "minder beweging". */ .glas-groep::before, .glas-groep::after { content: ""; position: absolute; z-index: -1; inset: -22% -12%; pointer-events: none; will-change: transform; } .glas-groep::before { background: radial-gradient(30% 40% at 24% 32%, color-mix(in srgb, var(--inkt) 44%, transparent), transparent 70%), radial-gradient(28% 36% at 70% 72%, color-mix(in srgb, var(--inkt) 38%, transparent), transparent 70%); animation: glas-drift-a 38s var(--curve-in-uit) infinite alternate; } .glas-groep::after { background: radial-gradient(30% 40% at 76% 36%, color-mix(in srgb, var(--oker) 75%, transparent), transparent 70%), radial-gradient(28% 36% at 30% 70%, color-mix(in srgb, var(--oker) 65%, transparent), transparent 70%); animation: glas-drift-b 52s var(--curve-in-uit) infinite alternate; } @keyframes glas-drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(9%, 5%, 0) scale(1.06); } 100% { transform: translate3d(3%, -6%, 0) scale(.96); } } @keyframes glas-drift-b { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-8%, 6%, 0) scale(.95); } 100% { transform: translate3d(-3%, -5%, 0) scale(1.07); } } .glas-groep.is-gepauzeerd::before, .glas-groep.is-gepauzeerd::after { animation-play-state: paused; } .glas-groep-licht { position: absolute; z-index: -1; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--oker) 42%, transparent), transparent); transition: opacity 400ms var(--curve-uit); will-change: transform, opacity; } .glas-groep.licht-aan .glas-groep-licht { opacity: 1; } @media (prefers-reduced-motion: reduce) { .glas-groep::before, .glas-groep::after { animation: none; } .glas-groep-licht { display: none; } } .glas-groep .glas { background: var(--glas-groep-kaart, color-mix(in srgb, var(--kaart) 70%, transparent)); -webkit-backdrop-filter: var(--glas-blur-kaart); backdrop-filter: var(--glas-blur-kaart); border: 1px solid var(--glas-rand); box-shadow: var(--glas-licht), var(--glas-schaduw); } .glas-groep .glas .winst-open { background: color-mix(in srgb, var(--kaart) 70%, transparent); border-color: var(--glas-rand); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glas-groep .glas { background: var(--kaart); } } @media (prefers-reduced-transparency: reduce) { .glas-groep::before, .glas-groep::after, .glas-groep-licht { display: none; } .glas-groep .glas { background: var(--kaart); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { .glas-groep::before, .glas-groep::after, .glas-groep-licht { display: none; } .glas-groep .glas { background: var(--kaart); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--lijn-sterk); } } /* Het venster zelf */ .venster { width: min(880px, calc(100% - 32px)); max-width: none; max-height: 85vh; max-height: 85dvh; margin: auto; padding: 0; border: 1px solid var(--glas-rand); border-radius: var(--radius-lg); background: var(--glas-venster); color: var(--inkt); -webkit-backdrop-filter: var(--glas-blur-venster); backdrop-filter: var(--glas-blur-venster); box-shadow: var(--glas-licht), var(--glas-schaduw); overflow: hidden; transform-origin: 0 0; } .venster::backdrop { background: var(--scrim); } .venster-binnen { position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(28px, 4vw, 48px); } .venster-tekst .winst-icoon { margin-bottom: 18px; } .venster-tekst h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.2; margin-bottom: 12px; padding-right: 32px; } .venster-tekst p { margin: 0; color: var(--inkt); font-size: 1.0625rem; } .venster-sluit { position: absolute; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; background: color-mix(in srgb, var(--inkt) 8%, transparent); color: var(--inkt); transition: background-color var(--duur-kort) ease, transform var(--duur-druk) var(--curve-uit); } .venster-sluit svg { width: 20px; height: 20px; } .venster-sluit:active { transform: scale(.94); } .venster-sluit:focus-visible { outline: none; box-shadow: var(--focusring); } @media (hover: hover) and (pointer: fine) { .venster-sluit:hover { background: color-mix(in srgb, var(--inkt) 14%, transparent); } } html.venster-open { overflow: hidden; } html.venster-open .gsm-balk { visibility: hidden; } @media (max-width: 699px) { /* gsm: volledig scherm, afgerond bovenaan */ .venster { width: 100%; max-height: none; height: calc(100dvh - 12px); margin: 12px 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; } .venster-binnen { grid-template-columns: 1fr; align-items: start; align-content: start; height: 100%; max-height: none; padding: 24px 20px 32px; gap: 24px; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .venster { background: var(--kaart); } } @media (prefers-reduced-transparency: reduce) { .venster { background: var(--kaart); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-contrast: more) { .venster { background: var(--kaart); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--lijn-sterk); } } /* ---------- Voorbeelden in de vensters (huisstijl, geen echte schermen) ---------- */ .venster-beeld p { margin: 0; } .vb-sterren { display: inline-flex; gap: 3px; color: var(--ster, var(--oker)); } .vb-sterren svg { width: 16px; height: 16px; } .vb-sterren .leeg { color: var(--lijn); } .vb-sterren--groot svg { width: 28px; height: 28px; } .duim { width: 16px; height: 16px; flex: none; } .duim--op { color: var(--positief); } .duim--neer { color: var(--negatief); transform: scaleY(-1); } /* gsm-scherm (voorbeeld feedbackpagina) */ .vb-gsm { width: min(100%, 300px); margin: 0 auto; padding: 8px; border-radius: 34px; background: var(--petrol-donker); box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--inkt) 40%, transparent); } .vb-scherm { display: flex; flex-direction: column; gap: 12px; min-height: 420px; padding: 36px 18px 22px; border-radius: 27px; background: var(--kaart); position: relative; } .vb-scherm::before { content: ""; position: absolute; top: 12px; left: 50%; width: 30%; height: 8px; transform: translateX(-50%); border-radius: var(--radius-pil); background: var(--petrol-donker); } .vb-scherm--midden { align-items: center; justify-content: center; text-align: center; } .vb-gsm-titel { font-family: var(--font-titel); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.25rem; line-height: 1.25; text-align: center; } .vb-scherm .vb-sterren { justify-content: center; } .vb-gsm-kop { font-weight: 600; margin-top: 6px !important; } .vb-keuze { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--radius-md); background: var(--papier); font-size: 0.875rem; font-weight: 500; line-height: 1.3; } .vb-veld { padding: 10px 12px; border: 1px solid var(--lijn-sterk); border-radius: var(--radius-md); color: var(--inkt-zacht); font-size: 0.875rem; min-height: 64px; } .vb-gsm-tekst { font-size: 0.9375rem; line-height: 1.45; } .vb-vink { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--oker-zacht); color: var(--oker-diep); } .vb-vink svg { width: 28px; height: 28px; } .vb-gsm-knop { margin-top: 6px; padding: 12px 18px; border-radius: var(--radius-pil); background: var(--knop); color: var(--op-knop); font-weight: 600; font-size: 0.9375rem; } /* paneel (voorbeeld dashboard en rapport) */ .vb-paneel { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--radius-lg); background: var(--papier); border: 1px solid var(--lijn); box-shadow: var(--schaduw-kaart); } .vb-tabs { display: flex; flex-wrap: wrap; gap: 6px; } .vb-tab { padding: 6px 12px; border-radius: var(--radius-pil); font-size: 0.8125rem; font-weight: 600; color: var(--inkt-zacht); background: var(--kaart); border: 1px solid var(--lijn); } .vb-tab--aan { background: var(--knop); color: var(--op-knop); border-color: var(--knop); } .vb-reactie { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--kaart); border: 1px solid var(--lijn); border-left: 3px solid var(--negatief); } .vb-reactie-tekst { font-size: 0.9375rem; line-height: 1.45; } .vb-themas { display: flex; flex-wrap: wrap; gap: 6px; } .vb-thema { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pil); background: var(--kaart); border: 1px solid var(--lijn); font-size: 0.8125rem; font-weight: 500; } .vb-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.8125rem; font-weight: 600; } .vb-label { padding: 3px 10px; border-radius: var(--radius-pil); background: var(--oker-zacht); color: var(--oker-diep); } .vb-zacht { color: var(--inkt-zacht); font-weight: 500; } .vb-knop { padding: 7px 14px; border-radius: var(--radius-pil); border: 1px solid var(--inkt); font-size: 0.8125rem; font-weight: 600; } .vb-rapport { gap: 10px; background: var(--kaart); } .vb-rapport-periode { font-family: var(--font-titel); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.25rem; } .vb-cijfers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; } .vb-cijfer { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--papier); font-size: 0.8125rem; color: var(--inkt-zacht); font-weight: 500; } .vb-cijfer strong { font-family: var(--font-titel); font-weight: 600; font-size: 1.75rem; line-height: 1.1; color: var(--inkt); } .vb-rapport-kop { font-weight: 600; font-size: 0.9375rem; margin-top: 4px !important; } .vb-rapport .vb-thema { background: var(--papier); } /* ---------- Rustige beweging (docs/DESIGN.md §5, js/beweging.js) ---------- Eén keer in beeld komen: de beginstand geldt enkel voor wat JavaScript markeert. */ .met-beweging .komt-in-beeld { opacity: 0; transform: translateY(12px); } .met-beweging .is-in-beeld { opacity: 1; transform: none; transition: opacity var(--duur-in-beeld) var(--curve-uit), transform var(--duur-in-beeld) var(--curve-uit); } .vraag summary, .faq-groepen-nav a, .baas-strook, .menu-link { transition: color var(--duur-kort) ease, background-color var(--duur-kort) ease; } .groot-cijfer { font-variant-numeric: tabular-nums; } /* glazen kaart: na de eerste aankomst neemt js/beweging.js de sterren en de tekst over */ .met-beweging .binnen.wisselt .binnen-sterren svg, .met-beweging .binnen.wisselt .binnen-tekst { animation: none; } .binnen-sterren .leeg { color: var(--lijn); } @media (prefers-reduced-motion: reduce) { .met-beweging .komt-in-beeld { opacity: 1; transform: none; } /* niets krimpt of draait; enkel kleuren veranderen nog */ .knop:active, .menu-knop:active, .winst:has(.winst-open:active), .venster-sluit:active { transform: none; } .vraag summary .plus { transition: background-color .2s; } } /* ---------- 5. Wie we zijn ---------- */ .wie .wrap { display: grid; grid-template-columns: 1fr; } .wie-tekst { max-width: 720px; } .wie--met-quote .wrap { grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 72px); align-items: center; } .wie-intro { color: var(--inkt-zacht); font-size: 1.08rem; margin: 18px 0 28px; } .belofte-lijst { list-style: none; margin: 0; padding: 0; display: grid; } .belofte-lijst li { padding: 16px 0; border-top: 1px solid var(--lijn); color: var(--inkt-zacht); } .belofte-lijst strong { color: var(--inkt); } .quote-kaart { margin: 0; padding: clamp(22px, 4vw, 32px); } .quote-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 20px; } .quote-kaart blockquote { margin: 0; font-family: var(--font-titel); font-weight: 600; font-size: 1.3rem; line-height: 1.4; } .quote-kaart blockquote::before { content: "“"; color: var(--oker); } .quote-kaart blockquote::after { content: "”"; color: var(--oker); } .quote-kaart figcaption { margin-top: 12px; color: var(--inkt-zacht); font-size: .93rem; } @media (max-width: 820px) { .wie--met-quote .wrap { grid-template-columns: 1fr; } } /* ---------- 7. Prijzen ---------- */ .baas-strook { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-top: 28px; padding: 20px 24px; border: 2px dashed var(--oker); border-radius: var(--radius-lg); color: var(--inkt); text-decoration: none; background: transparent; transition: background-color .15s; } .baas-strook:hover { background: var(--oker-zacht); color: var(--inkt); } .baas-strook-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--oker-diep); white-space: nowrap; } .baas-strook-link svg { width: 18px; height: 18px; } /* Podium: zolang het oprichtersaanbod loopt (.prijzen--oprichters, gezet door site.js; standaard in de HTML) hangt rechts een prijskaartje en zijn de pakketten doorzichtig. */ .prijzen-podium { display: grid; gap: 40px; align-items: start; } .prijzen--oprichters .prijzen-podium { grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; } .prijzen--oprichters .prijskaartje { grid-column: 2; grid-row: 1; } .prijzen--oprichters .pakketten-kolom { grid-column: 1; grid-row: 1; } .oprichters-regel { text-align: center; color: var(--inkt); margin: 18px 0 0; } /* Het prijskaartje: zoals in de winkel, aan een touwtje, iets scheef */ .prijskaartje { position: relative; rotate: 2deg; transform-origin: 50% 24px; filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--inkt) 18%, transparent)); } .prijskaartje-vorm { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 58px 26px 26px; background: color-mix(in srgb, var(--oker-zacht) 70%, var(--kaart)); border-radius: 6px 6px var(--radius-lg) var(--radius-lg); clip-path: polygon(22% 0, 78% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); } .prijskaartje-gat { position: absolute; top: 18px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--papier-diep); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--inkt) 30%, transparent); } .prijskaartje-touw { position: absolute; top: -22px; right: calc(50% - 4px); width: calc(50% + 60px); height: 50px; overflow: visible; pointer-events: none; z-index: 1; } .prijskaartje-touw path { fill: none; stroke: var(--oker-diep); stroke-width: 1.5px; vector-effect: non-scaling-stroke; } .prijskaartje-touw circle { fill: var(--oker-diep); } .prijskaartje-tijdelijk { display: inline-flex; align-self: center; margin-bottom: 18px; padding: 4px 12px; border-radius: var(--radius-pil); background: var(--inkt); color: var(--op-knop); font-size: .8125rem; font-weight: 600; text-align: center; } .prijskaartje .bovenregel { margin-bottom: 4px; color: var(--oker-diep); } .prijs s { margin-left: 8px; color: var(--inkt-zacht); font-size: 1.25rem; text-decoration-thickness: 2px; text-decoration-color: var(--inkt-zacht); } .prijs--oprichter strong { font-size: 3.75rem; color: var(--inkt); } .prijskaartje .prijs-jaar { min-height: 0; margin-bottom: 14px; color: var(--inkt); } .prijskaartje .prijs-jaar s { margin-left: 6px; color: var(--inkt-zacht); } .prijskaartje-winst { margin: 0 0 12px; padding: 10px 14px; width: 100%; border-radius: var(--radius-md); background: var(--kaart); border: 1.5px dashed var(--oker); font-weight: 600; color: var(--inkt); } .prijskaartje-uitleg { margin: 0 0 16px; color: var(--inkt); font-size: .95rem; } .plaatsen { display: grid; grid-template-columns: repeat(13, 1fr); gap: 5px; width: 100%; margin-bottom: 18px; } .plaatsen i { display: block; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--oker-diep); background: var(--kaart); } .plaatsen i.bezet { background: var(--oker-diep); } /* Pakketten in één kaart met drie kolommen */ .prijzen-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--lijn); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--schaduw-kaart); transition: opacity var(--duur) ease; } .prijskaart { background: var(--kaart); padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; } .prijskaart--aanbevolen { background: color-mix(in srgb, var(--oker-zacht) 55%, var(--kaart)); } .prijs-label { align-self: flex-start; margin-bottom: 10px; background: var(--oker-zacht); color: var(--oker-diep); box-shadow: inset 0 0 0 1.5px var(--oker); font-size: .8125rem; font-weight: 600; padding: 3px 12px; border-radius: var(--radius-pil); } .prijskaart h3 { font-size: 1.75rem; line-height: 1.2; } .prijs { margin: 14px 0 4px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; } .prijs strong { font-family: var(--font-titel); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: clamp(2.4rem, 2rem + 1.2vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; } .prijs span { color: var(--inkt-zacht); } .prijs-jaar { color: var(--inkt-zacht); font-size: .93rem; margin: 0 0 20px; min-height: 3.2em; } .prijskaart .knop { margin-bottom: 22px; } .functies { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--lijn); display: grid; gap: 11px; font-size: .94rem; } .functies li { display: flex; gap: 10px; align-items: flex-start; } .functies svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--oker-diep); } .functies li.niet { color: var(--inkt-zacht); opacity: .75; } .functies li.niet svg { color: var(--lijn-sterk); } .functies .klein { font-size: .82em; color: var(--inkt-zacht); } /* doorzichtig zolang het oprichtersaanbod loopt; tekst in inkt, zodat ze leesbaar blijft (AA) */ .prijzen--oprichters .pakketten { opacity: .72; } .prijzen--oprichters .pakketten :is(.prijs span, .prijs-jaar, .functies li.niet, .functies .klein) { color: var(--inkt); opacity: 1; } /* Kaders onder de pakketten: twee gelijke kaarten met een rond icoon */ .prijs-kaders { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; } .prijs-kader { padding: clamp(22px, 3vw, 30px); background: var(--kaart); border-radius: var(--radius-lg); box-shadow: var(--schaduw-kaart); } .prijs-kader .winst-icoon { border-radius: 50%; margin-bottom: 16px; } .prijs-kader h3 { margin-bottom: 10px; } .prijs-kader p { color: var(--inkt-zacht); margin: 0; } @media (max-width: 1100px) { /* kaartje boven de pakketten */ .prijzen--oprichters .prijzen-podium { grid-template-columns: minmax(0, 1fr); gap: 36px; } .prijzen--oprichters .prijskaartje, .prijzen--oprichters .pakketten-kolom { grid-column: 1; grid-row: auto; } .prijskaartje { width: min(100%, 400px); justify-self: center; rotate: 1deg; } .prijskaartje-touw { display: none; } } @media (max-width: 920px) { .prijzen-raster { grid-template-columns: minmax(0, 1fr); } .prijs-jaar { min-height: 0; } .prijs-kaders { grid-template-columns: 1fr; } } /* ---------- 8. Veelgestelde vragen ---------- */ .faq { display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 5vw, 64px); } .faq-groepen-nav { position: sticky; top: calc(var(--menu-hoogte) + 24px); align-self: start; display: grid; gap: 4px; } .faq-groepen-nav a { color: var(--inkt-zacht); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 500; } .faq-groepen-nav a:hover { background: rgba(22,58,69,.06); color: var(--inkt); } .faq-groep + .faq-groep { margin-top: 36px; } .faq-groep h3 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 10px; } .vraag { border-bottom: 1px solid var(--lijn); } .vraag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; font-weight: 500; font-size: 1.0625rem; } .vraag summary::-webkit-details-marker { display: none; } .vraag summary:hover { color: var(--oker-diep); } .vraag summary .plus { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(22,58,69,.06); transition: transform .2s, background-color .2s; } .vraag summary .plus svg { width: 14px; height: 14px; } .vraag[open] summary .plus { transform: rotate(45deg); background: var(--oker-zacht); color: var(--oker-diep); } .vraag .antwoord { padding: 0 44px 20px 2px; color: var(--inkt-zacht); } .vraag .antwoord p { margin: 0; } /* Antwoord schuift open en dicht (DESIGN.md §5). Browsers zonder interpolate-size klappen meteen open, zoals vroeger. */ @supports (interpolate-size: allow-keywords) { .vraag { interpolate-size: allow-keywords; } .vraag::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 250ms var(--curve-uit), opacity 250ms var(--curve-uit), content-visibility 250ms allow-discrete; } .vraag[open]::details-content { block-size: auto; opacity: 1; } @media (prefers-reduced-motion: reduce) { .vraag::details-content { transition: opacity 200ms ease-out, content-visibility 200ms allow-discrete; } } } .vraag:target summary, .vraag.is-gelinkt summary { color: var(--oker-diep); } @media (max-width: 820px) { .faq { grid-template-columns: 1fr; } .faq-groepen-nav { display: none; } } /* ---------- 9. Gratis proberen ---------- */ .proberen { background: var(--papier-diep); color: var(--inkt); overflow: hidden; padding-top: calc(clamp(64px, 9vw, 96px) + 20px); } .proberen .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 6vw, 72px); align-items: start; } .proberen h2 span { display: block; } .proberen-stappen { margin: 24px 0 20px; padding: 0; list-style: none; counter-reset: stap; display: grid; gap: 12px; color: var(--inkt); font-size: 1.0625rem; } /* petrol accent: genummerde rondjes */ /* geen grid: een stap met meerdere stukken tekst (bv. "Je abonnement start die dag.") blijft één doorlopende zin */ .proberen-stappen li { counter-increment: stap; position: relative; min-height: 30px; padding-left: 42px; } .proberen-stappen li::before { content: counter(stap); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--inkt); color: var(--op-knop); font-size: .875rem; font-weight: 600; } .proberen-klein { color: var(--inkt-zacht); font-size: .93rem; margin: 0; } .formulier { background: var(--kaart); color: var(--inkt); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 36px); border: 1px solid var(--lijn); box-shadow: var(--schaduw-kaart); } .velden { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; } .veld { display: grid; gap: 6px; } .veld--breed { grid-column: 1 / -1; } .veld label, .veld legend { font-weight: 500; font-size: .875rem; letter-spacing: .01em; } .veld .opt { font-weight: 400; color: var(--inkt-zacht); } /* Velden: een licht papieren vlak in de witte kaart; bij klikken wit met de focusrand */ .veld input, .veld textarea, .veld select { width: 100%; font: inherit; font-size: 16px; color: var(--inkt); background: var(--papier); border: 1.5px solid var(--lijn-sterk); border-radius: var(--radius-md); padding: 11px 14px; min-height: 48px; transition: border-color var(--duur-kort) ease, background-color var(--duur-kort) ease, box-shadow var(--duur-kort) ease; } .veld textarea { min-height: 96px; resize: vertical; } @media (hover: hover) and (pointer: fine) { .veld input:hover, .veld textarea:hover { border-color: var(--inkt-zacht); } } .veld input:focus-visible, .veld textarea:focus-visible { outline: 2px solid transparent; background: var(--kaart); border-color: var(--focus); box-shadow: var(--focusring); } .veld input::placeholder, .veld textarea::placeholder { color: var(--inkt-zacht); opacity: 1; } /* fout: rode rand, heel lichte rode achtergrond en een klein icoon voor de bestaande tekst */ .veld.fout input, .veld.fout textarea { border-color: var(--negatief); background: color-mix(in srgb, var(--negatief-zacht) 55%, var(--kaart)); } .veld .foutmelding { display: none; align-items: flex-start; gap: 6px; color: var(--negatief); font-weight: 500; font-size: .875rem; line-height: 1.4; } .veld.fout .foutmelding:not(:empty) { display: flex; transition: opacity var(--duur-kort) ease; } @starting-style { .veld.fout .foutmelding { opacity: 0; } } .foutmelding::before, .form-melding::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: currentColor; -webkit-mask: var(--icoon-let-op) center / contain no-repeat; mask: var(--icoon-let-op) center / contain no-repeat; } :root { --icoon-let-op: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E"); --icoon-vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } fieldset.veld { border: 0; margin: 0; padding: 0; min-width: 0; } fieldset.veld legend { padding: 0; margin-bottom: 8px; } /* Keuzeknoppen: pillen; de gekozen pil is petrol met een vinkje */ .keuzes { display: flex; flex-wrap: wrap; gap: 8px; } .keuze { position: relative; } .keuze input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; min-height: 0; } .keuze span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px; border-radius: var(--radius-pil); border: 1.5px solid var(--lijn-sterk); background: var(--papier); font-size: .94rem; font-weight: 500; transition: border-color var(--duur-kort) ease, background-color var(--duur-kort) ease, color var(--duur-kort) ease, transform var(--duur-druk) var(--curve-uit); } @media (hover: hover) and (pointer: fine) { .keuze input:not(:checked):hover + span { border-color: var(--inkt-zacht); background: var(--kaart); } } .keuze input:active + span { transform: scale(.97); } .keuze input:checked + span { background: var(--inkt); border-color: var(--inkt); color: var(--op-knop); padding-left: 14px; } .keuze input:checked + span::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--icoon-vink) center / contain no-repeat; mask: var(--icoon-vink) center / contain no-repeat; } .keuze input:focus-visible + span { outline: 2px solid transparent; box-shadow: var(--focusring); } @media (prefers-reduced-motion: reduce) { .keuze input:active + span { transform: none; } } .lokval { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .formulier .knop { margin-top: 22px; } .onder-knop { font-size: .85rem; color: var(--inkt-zacht); margin: 14px 0 0; } /* melding onderaan: een balkje met icoon */ .form-melding { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md); font-size: .93rem; line-height: 1.45; } .form-melding[hidden] { display: none; } .form-melding--fout { background: var(--negatief-zacht); color: var(--negatief); box-shadow: inset 3px 0 0 var(--negatief); } .form-melding--info { background: var(--oker-zacht); color: var(--oker-diep); box-shadow: inset 3px 0 0 var(--oker); } .bedankt { text-align: center; padding: 28px 8px; } .bedankt .s-vink { width: 64px; height: 64px; margin-bottom: 18px; } .bedankt h3 { font-size: 1.75rem; margin-bottom: 8px; } .bedankt p { color: var(--inkt-zacht); margin: 0; } /* Bedankscherm komt binnen (DESIGN.md §5): kaart 400 ms, daarna tekent het vinkje zich (lengte van het pad ≈ 20) */ @keyframes bedankt-aan { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @keyframes vink-teken { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } } @keyframes bedankt-vervaag { from { opacity: 0; } to { opacity: 1; } } .met-beweging .bedankt:not([hidden]) { animation: bedankt-aan 400ms var(--curve-uit) both; } .met-beweging .bedankt:not([hidden]) .s-vink svg { stroke-dasharray: 20; animation: vink-teken 350ms var(--curve-uit) 250ms both; } @media (prefers-reduced-motion: reduce) { .met-beweging .bedankt:not([hidden]) { animation: bedankt-vervaag 200ms ease-out both; } .met-beweging .bedankt:not([hidden]) .s-vink svg { animation: none; stroke-dasharray: none; } } /* Melding onder het formulier schuift zacht binnen, zoals de foutjes per veld */ .form-melding { transition: opacity 200ms var(--curve-uit), transform 200ms var(--curve-uit); } @starting-style { .form-melding { opacity: 0; transform: translateY(4px); } } @media (prefers-reduced-motion: reduce) { @starting-style { .form-melding { transform: none; } } } @media (max-width: 880px) { .proberen .wrap { grid-template-columns: 1fr; } } @media (max-width: 520px) { .velden { grid-template-columns: 1fr; } } /* Luifelrand: de gestreepte boogjes van het logo, enkel decoratief bovenaan een blok */ .luifel { position: absolute; top: 0; left: 0; right: 0; height: 32px; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, var(--oker) 0 40px, var(--kaart) 40px 80px); -webkit-mask: linear-gradient(#000 0 0) top / 100% 12px no-repeat, radial-gradient(circle at 20px 12px, #000 19.5px, transparent 20px) 0 0 / 40px 32px repeat-x; mask: linear-gradient(#000 0 0) top / 100% 12px no-repeat, radial-gradient(circle at 20px 12px, #000 19.5px, transparent 20px) 0 0 / 40px 32px repeat-x; } /* ---------- Vaste knop op gsm ---------- */ .gsm-balk { display: none; } @media (max-width: 699px) { .gsm-balk { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom)); background: var(--glas-balk); -webkit-backdrop-filter: var(--glas-blur-balk); backdrop-filter: var(--glas-blur-balk); border-top: 1px solid var(--lijn); transform: translateY(110%); visibility: hidden; transition: transform .25s, visibility .25s; } .gsm-balk.is-zichtbaar { transform: none; visibility: visible; } } @media (prefers-reduced-motion: reduce) { .gsm-balk { transition: none; } } /* ---------- Footer ---------- */ .footer { background: var(--petrol-donker); color: var(--op-donker-zacht); padding: 56px 0 40px; font-size: .93rem; } .footer .wrap { display: grid; gap: 28px; } .footer-boven { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; } .footer .logo { color: #fff; margin: 0; } .footer .logo-beeld { height: 48px; } .footer-zin { margin: 10px 0 0; font-family: var(--font-titel); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.125rem; color: var(--op-donker); max-width: 22em; } .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } .footer a { color: var(--op-donker); text-decoration: none; } .footer a:hover { color: var(--oker-licht); text-decoration: underline; } .footer .taalkeuze a, .footer .taalkeuze span { color: var(--op-donker-zacht); } .footer .taalkeuze [aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); } .footer .taalkeuze .punt { color: rgba(243,241,236,.25); } .footer-onder { border-top: 1px solid rgba(243,241,236,.12); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; font-size: .875rem; color: var(--op-donker-zacht); } .footer-onder a[href^="tel:"] { white-space: nowrap; } /* telefoonnummer nooit middenin afbreken */ /* ---------- Losse pagina's ---------- */ .losse-pagina { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .losse-pagina main { flex: 1; } /* Tekstpagina's (privacy, voorwaarden, google-check, baas): kop in een zachte band in papier-diep, zoals de banden op de startpagina; daaronder de inhoud in één smalle kolom. */ .tekstpagina-kop { padding: clamp(56px, 9vw, 112px) var(--rand) clamp(64px, 9vw, 104px); background: linear-gradient(180deg, var(--papier-diep) 0, var(--papier-diep) calc(100% - 120px), transparent 100%); } .tekstpagina-wrap, .tekstpagina { max-width: 720px; margin: 0 auto; } .tekstpagina-kop h1 { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; margin-bottom: 18px; } .tekstpagina-kop p { color: var(--inkt); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 36em; margin: 0; } .tekstpagina { max-width: calc(720px + 2 * var(--rand)); padding: 0 var(--rand) clamp(64px, 9vw, 104px); margin-top: calc(-1 * clamp(24px, 4vw, 40px)); } .tekstpagina p { color: var(--inkt-zacht); } /* "in opbouw" en andere tijdelijke uitleg: witte kaart met rond okericoon */ .plaatshouder-kader { position: relative; padding: 22px 24px 22px 76px; min-height: 84px; background: var(--kaart); border-radius: var(--radius-lg); box-shadow: var(--schaduw-kaart); color: var(--inkt); line-height: 1.55; } .plaatshouder-kader::before { content: ""; position: absolute; left: 22px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--oker-zacht); } .plaatshouder-kader::after { content: ""; position: absolute; left: 32px; top: 30px; width: 20px; height: 20px; background: var(--oker-diep); -webkit-mask: var(--icoon-info) center / contain no-repeat; mask: var(--icoon-info) center / contain no-repeat; } :root { --icoon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v5.5M12 7.5v.01'/%3E%3C/svg%3E"); } .tekstpagina-knoppen { margin-top: 28px; } /* Meldingen (404, niet-actief): witte kaart in het midden, op een zachte band in papier-diep */ .melding-pagina { flex: 1; display: grid; place-items: center; padding: clamp(48px, 8vw, 96px) var(--rand); text-align: center; background: radial-gradient(70% 60% at 50% 40%, var(--papier-diep), transparent 75%); } .melding-pagina .glas { max-width: 520px; width: 100%; padding: clamp(32px, 6vw, 52px) clamp(24px, 5vw, 44px); } .melding-pagina .logo { margin: 0 auto 28px; justify-content: center; } .melding-icoon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--oker-zacht); color: var(--oker-diep); } .melding-icoon svg { width: 30px; height: 30px; } .melding-pagina h1 { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.1rem); line-height: 1.2; text-wrap: balance; margin-bottom: 12px; } .melding-pagina p { color: var(--inkt-zacht); margin-bottom: 26px; } /* één keer zacht binnenkomen (enkel CSS, ook zonder script); stil bij "minder beweging" */ @keyframes komt-binnen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .tekstpagina-wrap, .melding-pagina .glas { animation: komt-binnen var(--duur-in-beeld) var(--curve-uit) both; } .tekstpagina { animation: komt-binnen var(--duur-in-beeld) var(--curve-uit) 80ms both; } @media (prefers-reduced-motion: reduce) { .tekstpagina-wrap, .tekstpagina, .melding-pagina .glas { animation: none; } } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------- Pakketten: details in een venster (js/venster.js) ---------- Met JavaScript tonen de kolommen enkel naam en prijs; het plusje opent de functies. */ .met-beweging .pakketten .prijskaart.heeft-venster { position: relative; overflow: hidden; cursor: pointer; } .met-beweging .pakketten .heeft-venster .functies { display: none; } .met-beweging .pakketten .heeft-venster h3 { padding-right: 52px; } .met-beweging .pakketten .heeft-venster .knop { position: relative; z-index: 2; margin: auto 0 0; } .met-beweging .pakketten .heeft-venster .prijs-jaar { min-height: 0; margin-bottom: 18px; } /* naast het prijskaartje zijn de kolommen smal: titel iets kleiner, plusje iets dichter in de hoek */ .met-beweging .prijzen--oprichters .pakketten .heeft-venster h3 { font-size: 1.5rem; padding-right: 44px; } .met-beweging .prijzen--oprichters .pakketten .winst-open { top: 12px; right: 12px; } .prijskaart:has(.winst-open:active) { transform: scale(.985); } .prijskaart { transition: transform var(--duur-druk) var(--curve-uit); } @media (prefers-reduced-motion: reduce) { .prijskaart:has(.winst-open:active) { transform: none; } } @media (hover: hover) and (pointer: fine) { .prijskaart.heeft-venster:hover .winst-open { background: var(--knop); color: var(--op-knop); border-color: var(--knop); } } .prijzen--oprichters .prijzen-podium { align-items: center; } /* het venster van een pakket */ .venster--pakket .venster-binnen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .venster--pakket h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); margin-bottom: 4px; padding-right: 32px; } .venster--pakket .prijs-jaar { min-height: 0; margin-bottom: 18px; } .venster--pakket .oprichters-regel { text-align: left; margin: 0; } .venster--pakket .functies { border-top: 0; padding-top: 0; font-size: 1rem; gap: 14px; } .venster--pakket .functies .klein { font-size: .85em; } @media (max-width: 699px) { .venster--pakket .venster-binnen { grid-template-columns: 1fr; } } /* ---------- Eigen aanwijzer (docs/DESIGN.md §5, js/aanwijzer.js) ---------- Enkel met een muis en pas na de eerste beweging (html.eigen-aanwijzer). Tekstvelden en vensters houden de gewone aanwijzer. */ html.eigen-aanwijzer, html.eigen-aanwijzer *, html.eigen-aanwijzer ::backdrop { cursor: none !important; } html.eigen-aanwijzer :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select) { cursor: auto !important; } /* oudere browsers zonder popover: in een venster de gewone aanwijzer */ html.eigen-aanwijzer:not(.aanwijzer-bovenop) :is(dialog, dialog *, ::backdrop) { cursor: auto !important; } .aanwijzer { position: fixed; inset: auto; left: 0; top: 0; z-index: 2147483000; width: 0; height: 0; pointer-events: none; opacity: 0; margin: 0; padding: 0; border: 0; background: none; overflow: visible; color: inherit; transition: opacity var(--duur-kort) ease; } .aanwijzer.is-zichtbaar { opacity: 1; } .aanwijzer.is-weg { opacity: 0; } .aanwijzer > * { position: absolute; left: 0; top: 0; transition: transform 200ms var(--curve-uit), opacity 150ms ease; } .aanwijzer-stip { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--inkt); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--kaart) 90%, transparent); } /* lichte rand: ook zichtbaar op donkere tekst */ .aanwijzer-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid var(--oker); background: color-mix(in srgb, var(--oker) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--kaart) 85%, transparent); /* ook zichtbaar op een okerknop */ opacity: 0; transform: scale(.2); } .aanwijzer-pil { margin: 0; padding: 6px 12px; border-radius: var(--radius-pil); white-space: nowrap; background: var(--oker-zacht); color: var(--oker-diep); font: 600 .8125rem/1.2 var(--font-tekst); box-shadow: var(--schaduw-kaart); opacity: 0; transform: translate3d(16px, 20px, 0) scale(.6); transform-origin: 0 0; } .aanwijzer-zoek { width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: var(--inkt); color: var(--kaart); opacity: 0; transform: scale(.3); } .aanwijzer-zoek svg { width: 18px; height: 18px; } /* standen */ .aanwijzer.is-ring .aanwijzer-ring { opacity: 1; transform: none; } .aanwijzer.is-ring .aanwijzer-stip { background: var(--oker-diep); transform: scale(.75); } .aanwijzer.is-pil .aanwijzer-pil { opacity: 1; transform: translate3d(16px, 20px, 0); } .aanwijzer.is-pil .aanwijzer-stip { background: var(--oker-diep); } .aanwijzer.is-zoek .aanwijzer-zoek { opacity: 1; transform: none; } .aanwijzer.is-zoek .aanwijzer-stip { opacity: 0; } .aanwijzer.is-ingedrukt .aanwijzer-stip { transform: scale(.6); } .aanwijzer.is-ingedrukt .aanwijzer-ring { transform: scale(.85); } .aanwijzer-op-donker .aanwijzer-stip { background: var(--papier); box-shadow: none; } /* op een petrol of okerknop: lichte ring */ .aanwijzer.op-knop .aanwijzer-ring { border-color: var(--kaart); background: color-mix(in srgb, var(--kaart) 16%, transparent); box-shadow: none; } .aanwijzer.op-knop .aanwijzer-stip { background: var(--kaart); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .aanwijzer > * { transition: opacity 150ms ease; } } @media (prefers-contrast: more) { .aanwijzer { display: none; } html.eigen-aanwijzer, html.eigen-aanwijzer *, html.eigen-aanwijzer ::backdrop { cursor: auto !important; } }