/* ────────────────────────────────────────────────────────────────────────── 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)); } } /* v43 (2026-08-19): PROPOSED AND REJECTED, recorded so it is not re-proposed. Audit v4 finding 29 named the banner's own in-copy links (81x19 and 114x19 at 390x844 with touch emulation) among the targets v42 left out. They were lifted to 44px by giving .cc-text and its links a 44px line box, the only way an in-sentence link can reach 44px without its tap area overlapping the lines above and below. Fady saw it on the demo the same day and REJECTED it: the banner card grew from 414 to 539px on a phone, 64 percent of the screen. The banner is back to exactly what v42 shipped. Its BUTTONS were never the problem and still hit 44.5px. The matching block in index.html went with it. */