/* ────────────────────────────────────────────────────────────────────────── Cookie-consent banner + settings panel — hand-rolled, self-hosted, no third- party requests. Pairs with assets/consent.js. Identical for every client. Minimal, in the site's own design system (light theme, brand yellow accent). GBA rule: on the banner, "Alles weigeren" and "Alles aanvaarden" are IDENTICAL (both solid) so neither stands out; "Voorkeuren" is the lighter neutral option. The single yellow accent button is "Bewaren" in the preferences panel. ────────────────────────────────────────────────────────────────────────── */ .cc-btn, .cc-banner a, .cc-modal a, .cc-switch, .cc-switch input { cursor: pointer; } /* Lock background scroll while the preferences panel is open. */ html.cc-lock { overflow: hidden !important; } /* The banner/panel set their OWN font-family and line-height rather than inheriting the page's, because this stylesheet loads on three pages whose rules differ: index.html sets no line-height (so it is the browser default `normal`), while privacy.html + cookiebeleid.html set `line-height:1.6`. Elements here that don't declare their own — .cc-title above all — inherited that 1.6 and rendered a taller headline box on those two pages, which read as a bigger gap between the rolling-cookie animation, "Cookies" and the copy. `normal` is exactly what the homepage already renders, so this ALIGNS privacy + cookiebeleid TO the homepage and leaves the homepage itself byte-for-byte unchanged. Fixed 2026-07-24 (v34). */ .cc-banner, .cc-backdrop, .cc-modal { font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif; line-height: normal; box-sizing: border-box; } .cc-banner *, .cc-modal * { box-sizing: border-box; } .cc-banner[hidden], .cc-backdrop[hidden] { display: none !important; } /* ── first layer (2026-07-22 variant, awaiting Fady's verdict): a NON-BLOCKING floating card pinned to the bottom — ONE centred card, identical at every width ≥768px (it becomes a full-width bottom SHEET only at ≤767px, see the one media query below; that 767/768 line is the banner's single breakpoint). No dimmed backdrop and NO scroll lock — the page (incl. the privacy/cookie pages the copy links to) scrolls freely behind it, and clicks in the surrounding strip pass straight through; only the card itself is interactive. The card keeps the roomy centered layout (rolling-cookie scene, heading, copy, buttons), is capped at 90vh with internal scroll so it survives a short window or a phone held sideways, and slides up on show. Only a real choice closes it. ── */ .cc-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; display: flex; justify-content: center; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); pointer-events: none; /* the container never blocks the page */ } .cc-banner:not([hidden]) { animation: ccFadeIn .22s ease both; } .cc-bar { pointer-events: auto; /* only the card is interactive */ width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; /* cap at ~90% viewport; scroll inside */ background: #fff; color: var(--ink, #111112); border-radius: var(--r, 20px); padding: 26px 24px 22px; /* upward-biased shadow: the card is anchored to the bottom, so a downward shadow would fall off-screen (and entirely so on the flush mobile sheet). This radiates up + sideways so it's visible above the card/sheet in both layouts. */ box-shadow: 0 -4px 40px rgba(0,0,0,.20); display: flex; flex-direction: column; gap: 16px; text-align: center; animation: ccModalIn .32s cubic-bezier(.2,.7,.2,1) both; } .cc-copy { flex: none; min-width: 0; } /* ── COOKIE ANIMATION "De stadsrit" (imported from Fady's Claude Design project, scene 2a) ── A cookie rolls like a wheel down the street: it spins + gently hops while a line-art skyline scrolls past behind it, on a thin road line, masked to fade at both edges. Sits above the "Cookies" heading, replacing the old static icon. Purely decorative (aria-hidden); frozen for reduced-motion users (see the media query below). Only the three keyframes 2a needs were taken; the other concepts in the design doc were discarded. */ .cc-anim { position: relative; width: 220px; height: 72px; margin: 2px auto 6px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); } .cc-anim-city { position: absolute; left: 0; bottom: 11px; display: flex; animation: ccCityScroll 2.4s linear infinite; } .cc-anim-city svg { flex: none; } .cc-anim-road { position: absolute; left: 0; right: 0; bottom: 10px; height: 1.5px; background: var(--line, #EBEBEA); } .cc-anim-hop { position: absolute; left: 50%; bottom: 12px; margin-left: -20px; animation: ccRollHop 1.3s ease-in-out infinite; } .cc-anim-cookie { display: block; animation: ccRollSpin 1.3s linear infinite; } @keyframes ccCityScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-230px); } } @keyframes ccRollSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes ccRollHop { 0%, 30%, 52%, 100% { transform: translateY(0); } 37% { transform: translateY(2px); } 44% { transform: translateY(-3px); } } .cc-title { font-weight: 800; font-size: 21px; letter-spacing: -.02em; margin: 0 0 10px; } .cc-text { font-size: 14.5px; line-height: 1.6; color: var(--ink-2, #3a3a3c); margin: 0; } /* links in ink, met een gele onderstreping als merk-accent (accent-als-tekst is uit het palet) */ .cc-text a, .cc-intro a { color: var(--ink, #111112); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow, #F5B700); text-decoration-thickness: 2px; text-underline-offset: 2px; } /* ── buttons ── The two yellow banner CTAs (reject/accept) and the panel's Bewaren REUSE the site's .btn / .btn-yellow look (index.html) — the SAME button as "Boek nu": resting glow, hover lightens + lifts + stronger glow, active press. Voorkeuren reuses .btn-ghost ("Bellen"). Because consent.css ALSO loads on privacy.html / cookiebeleid.html — which don't carry the site's .btn classes — these rules are COPIED here, not imported; index.html keeps its own .btn CSS so "Boek nu" never depends on this stylesheet loading. The glow's rgba() is .btn-yellow's resolved brand value (this file already hardcodes the brand yellow in its fallbacks; consent.css is not templated). "Alles weigeren" + "Alles aanvaarden" sit side by side (accept on the right), both identical yellow — GBA: reject and accept match in size AND colour. They MUST stay EQUAL width even though the site button sizes to its label (accept's label is longer), so the row keeps `flex` to stretch them to one shared width. On the ≤767px phone sheet the pair wraps to a stacked pair (still identical). "Voorkeuren" is the ghost option, full-width below. */ .cc-actions { display: flex; flex-direction: column; gap: 9px; flex: none; } .cc-actions-row { display: flex; gap: 9px; flex-wrap: wrap; } .cc-actions-row .cc-btn { flex: 1 1 150px; min-width: 0; } /* stretch reject+accept to EQUAL width; wrap to stacked under ~2×150 */ .cc-actions > [data-cc="prefs"] { width: 100%; } /* shared button box = the site's .btn (index.html). ONE deviation: a taller vertical padding so the banner CTAs + Bewaren hit a ~44px touch target on a phone (the site's .btn is 10px 16px = 36.5px tall, under the 44px target). This overrides ONLY padding — colour, radius, font, border, hover, :active and :focus-visible stay shared with .btn-yellow. Same pattern the site itself uses at .driver-card .actions .btn (index.html ~L323), which also overrides .btn's padding for its context. */ .cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; white-space: nowrap; padding: 14px 16px; border-radius: var(--r-pill, 999px); /* 14px vertical → ~44px tall touch target (.btn is 10px) */ border: 1.5px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .2s ease, background .18s, border-color .18s; } .cc-btn:active { transform: scale(.975); } /* yellow = .btn-yellow ("Boek nu"): the two banner CTAs (reject/accept) AND the panel's Bewaren */ .cc-actions .cc-solid, .cc-accent { background: var(--yellow, #F5B700); color: #1a1200; box-shadow: 0 8px 24px -8px rgba(245,183,0,.5); } .cc-actions .cc-solid:hover, .cc-accent:hover { background: var(--yellow-hover, #ffc21a); transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(245,183,0,.6); } /* lighter neutral = .btn-ghost ("Bellen"): Voorkeuren — ink border on hover, no yellow stroke */ .cc-ghost { background: transparent; color: var(--ink, #111112); border-color: var(--line, #EBEBEA); } .cc-ghost:hover { border-color: var(--ink, #111112); } .cc-wide { flex: none; width: 100%; } /* visible keyboard focus on every consent control — but NOT on the sheet itself: consent.js focuses the banner programmatically (a11y), and some browsers drew that :focus-visible as a black ring around the whole card */ .cc-btn:focus-visible, .cc-x:focus-visible, .cc-banner a:focus-visible, .cc-modal a:focus-visible { outline: 2px solid var(--ink, #111112); outline-offset: 2px; } .cc-banner:focus, .cc-banner:focus-visible { outline: none; } .cc-switch input:focus-visible + .cc-slider { outline: 2px solid var(--ink, #111112); outline-offset: 2px; box-shadow: 0 0 0 4px var(--yellow-soft, rgba(245,183,0,.25)); } /* ── first-layer load dim (attention only — NEVER consent) ── A LIGHT scrim that appears WITH the non-blocking banner on the first visit, to pull the eye to the card on load. Purely visual: pointer-events:none, so the page stays fully scrollable AND clickable through it and the banner stays non-blocking — this is NOT a modal, there is no scroll lock and no focus trap. On the first real scroll (>=40px) it fades OUT (opacity only, no movement) and never returns until a choice is made; consent.js runs a PASSIVE scroll listener and removes it once it fires. The scroll ONLY removes the dim — it is NEVER treated as consent: nothing is stored, no Google request is made, and the banner stays up and working. Kept deliberately LIGHTER than the preferences panel's real modal backdrop below (.cc-backdrop, rgba(17,17,18,.5)) — same ink hue, lower alpha. The REST state is opacity:1, so the dim shows the instant it is un-hidden with the banner — it does NOT rely on the render/frame loop (rAF, entrance animation), which browsers throttle in a backgrounded tab; the transition drives only the fade-OUT, which real visitors always see on a visible tab. */ .cc-dim { position: fixed; inset: 0; z-index: 2147482999; /* just under the banner (2147483000): dims the page, never the card */ background: rgba(17,17,18,.28); /* LIGHT load dim; the modal backdrop below stays heavier at .5 */ pointer-events: none; /* never intercepts clicks or scroll */ opacity: 1; transition: opacity .28s ease; /* shown as soon as un-hidden; transition = the clear fade-out (opacity only, no movement) */ } .cc-dim[hidden] { display: none !important; } .cc-dim.cc-dim-clear { opacity: 0; } /* first real scroll adds this: fades the dim out */ .cc-dim.cc-under-panel { opacity: 0; } /* preferences panel open: crossfades the dim out as the backdrop fades in (removed on cancel to fade it back in) — no bright frame */ /* ── second layer: centered modal ── */ .cc-backdrop { position: fixed; inset: 0; z-index: 2147483002; background: rgba(17,17,18,.5); display: flex; align-items: center; justify-content: center; padding: 20px; /* Fade BOTH ways via an opacity TRANSITION (not a one-shot fade-in animation) so opening + closing crossfade the first-layer load dim: as this backdrop goes 0<->.5 the load dim goes .28<->0 on the SAME .28s timeline, so the screen only darkens/lightens smoothly — never a bright uncovered frame between the two layers (the Voorkeuren flash, fixed 2026-07-22). The .5 value itself is UNCHANGED. */ opacity: 0; transition: opacity .28s ease; pointer-events: none; /* only catch click-outside-to-close once it has faded in */ } .cc-backdrop.cc-show { opacity: 1; pointer-events: auto; } @keyframes ccFadeIn { from { opacity: 0; } to { opacity: 1; } } .cc-modal { width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; background: #fff; color: var(--ink, #111112); border-radius: var(--r, 20px); padding: 26px 26px 24px; box-shadow: 0 24px 70px rgba(0,0,0,.32); animation: ccModalIn .28s cubic-bezier(.2,.7,.2,1) both; } @keyframes ccModalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } } /* header row: title on the left, a visible ✕ close (cancel) on the right */ .cc-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .cc-modal-head h2 { margin: 0; } .cc-x { flex: none; width: 34px; height: 34px; margin: -6px -6px 0 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--r-pill, 999px); color: var(--muted, #696a73); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .cc-x:hover { background: var(--line, #EBEBEA); color: var(--ink, #111112); } .cc-x svg { width: 18px; height: 18px; display: block; } .cc-modal h2 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; } .cc-intro { font-size: 13.5px; line-height: 1.55; color: var(--ink-2, #3a3a3c); margin: 0 0 18px; } /* category rows: label + one-line description, toggle on the right */ .cc-cat { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line, #EBEBEA); border-radius: var(--r-sm, 13px); padding: 14px 16px; margin-bottom: 10px; } .cc-cat-text h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 3px; } .cc-cat-text p { font-size: 12.5px; line-height: 1.45; color: var(--muted, #696a73); margin: 0; } .cc-always { font-size: 12px; font-weight: 700; color: var(--ink-2, #3a3a3c); white-space: nowrap; flex: none; } /* toggle switch (ON = brand yellow) */ .cc-switch { position: relative; width: 44px; height: 26px; flex: none; } .cc-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; } .cc-slider { position: absolute; inset: 0; background: #d4d4d8; border-radius: 999px; transition: background .18s; pointer-events: none; } .cc-slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .cc-switch input:checked + .cc-slider { background: var(--yellow, #F5B700); } .cc-switch input:checked + .cc-slider::before { transform: translateX(18px); } .cc-modal-actions { display: flex; margin-top: 20px; } @media (prefers-reduced-motion: reduce) { .cc-banner:not([hidden]), .cc-bar, .cc-modal { animation: none !important; } /* freeze the rolling-cookie scene: cookie sits centered + upright, skyline still */ .cc-anim-city, .cc-anim-hop, .cc-anim-cookie { animation: none !important; transform: none !important; } .cc-slider, .cc-slider::before { transition: none; } /* load dim + panel backdrop: no fade — they appear / clear / crossfade instantly (still no bright frame, since the load-dim-out and backdrop-in swap in the same recalc, so the screen only ever darkens) */ .cc-dim, .cc-backdrop { transition: none; } } /* Mobile: flush the floating card to the bottom + side edges as a proper bottom SHEET (rounded top corners only). A floating card with side margins looks messy on a phone — page content peeks in the side gaps and it overlaps the hero. Flush to the edges reads as an intentional sheet: content only shows ABOVE it, never beside it. 767px = the site's own mobile breakpoint. */ @media (max-width: 767px) { .cc-banner { padding: 0; } .cc-bar { max-width: none; max-height: 88vh; border-radius: var(--r, 20px) var(--r, 20px) 0 0; padding: 24px 20px max(20px, env(safe-area-inset-bottom, 0px)); } }