/* ============================================================ WDA — COOKIE CONSENT PANEL (shared, every page) Single source of truth for the cookie banner presentation. Injected by assets/site.js and appended directly to . Preserves the approved WDA ink/glass visual language; only layout, layering, safe-area and reduced-motion are normalized. Previously these rules lived only in site.css, which 12 live pages never loaded — that was the root cause of the banner "not appearing" (it fell back to normal flow below the footer). ============================================================ */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cookie, 9000); /* horizontal gutter + bottom spacing incl. iOS safe area */ padding: 0 clamp(16px, 3vw, 28px) calc(20px + env(safe-area-inset-bottom, 0px)); /* hidden resting state — revealed by .is-in */ opacity: 0; transform: translateY(18px); transition: transform 380ms cubic-bezier(.22, 1, .36, 1), opacity 380ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; /* not interactive until shown */ } .cookie-banner.is-in { opacity: 1; transform: translateY(0); pointer-events: auto; } .cookie-banner.is-hiding { opacity: 0; transform: translateY(12px); transition: transform 220ms cubic-bezier(.4, 0, 1, 1), opacity 220ms cubic-bezier(.4, 0, 1, 1); pointer-events: none; } .cookie-banner__inner { max-width: 1180px; margin-inline: auto; background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-surface) 100%); color: #fff; border: 1px solid var(--color-ink-border); border-radius: var(--radius-lg); box-shadow: 0 14px 36px rgba(23, 36, 58, .28); padding: 18px 22px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .cookie-banner__body { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 420px; min-width: 0; } .cookie-banner__ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(var(--color-brand-secondary-rgb), .16); color: var(--color-brand-secondary); display: grid; place-items: center; } .cookie-banner__ic svg { width: 20px; height: 20px; } .cookie-banner__body p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.55; color: var(--color-text-on-dark-muted); } .cookie-banner__body a { color: var(--color-brand-primary); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie-banner__actions .btn { min-height: 44px; } .cookie-banner__actions .btn--outline { color: #fff; border-color: var(--color-ink-border-strong); } .cookie-banner__actions .btn--outline:hover { background: rgba(255, 255, 255, .06); border-color: #fff; } /* keep keyboard focus clearly visible on the dark panel */ .cookie-banner__actions .btn:focus-visible { outline: 2px solid var(--color-brand-secondary); outline-offset: 2px; } /* ---- Tablet / small desktop: let actions wrap under the text ---- */ @media (max-width: 820px) { .cookie-banner__inner { gap: 16px; } .cookie-banner__actions { width: 100%; } } /* ---- Mobile: compact bottom sheet, full-width stacked buttons ---- */ @media (max-width: 640px) { .cookie-banner { padding-inline: 12px; } .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 16px; } .cookie-banner__actions { width: 100%; flex-direction: column; } .cookie-banner__actions .btn { width: 100%; flex: 1 1 auto; } } /* very narrow phones — guarantee text never overflows */ @media (max-width: 360px) { .cookie-banner__body p { font-size: 13px; } } /* ---- Reduced motion: near-instant, no movement ---- */ @media (prefers-reduced-motion: reduce) { .cookie-banner, .cookie-banner.is-hiding { transition: opacity 1ms linear; transform: none; } .cookie-banner.is-in { transform: none; } }