/* ============================================================================ COOKIE CONSENT BANNER — fragments/analytics.html :: cookieBanner A bar across the bottom of the viewport, over the page rather than in it, so it never reflows content that has already painted. Linked from the banner fragment (i.e. from ) rather than from head-styles: it is not needed to paint the page correctly, and most visitors see it once. Z-INDEX 400. Above the popups (base/popup-common.css tops out at 300 for a nested modal) so it can always be answered and always be dismissed, and below the loading overlay (component/loading.css, 10000) so it does not sit on top of a page that has not finished loading. NOT A MODAL. No backdrop, no scroll lock, nothing behind it goes inert — see the note on role="dialog" in the fragment. The page stays usable with the banner up. ========================================================================== */ .cookie-consent { position: fixed; z-index: 400; left: 50%; transform: translateX(-50%); /* env(safe-area-inset-bottom) keeps it clear of the iPhone home indicator, and resolves to 0 everywhere else — no media query needed. */ bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(920px, calc(100vw - 32px)); display: flex; align-items: center; gap: 22px; padding: 18px 22px; border-radius: var(--radius-xl); border: 1px solid var(--overlay-md); background: var(--bell-dropdown); box-shadow: var(--shadow-menu); color: var(--color-text); font-family: var(--font-main); } /* The fragment renders the banner with the `hidden` attribute once the question has been answered, and the script toggles that attribute. `display: flex` above beats the UA's [hidden] { display: none }, so it has to be restated here — without this line an answered visitor sees the banner on every page. */ .cookie-consent[hidden] { display: none; } .cookie-consent__body { flex: 1 1 auto; min-width: 0; } .cookie-consent__title { margin: 0 0 4px; font-size: 1rem; font-weight: 600; color: var(--color-text); } .cookie-consent__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); } .cookie-consent__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } /* Both buttons are the same size and weight on purpose. See the note in the fragment: a "no" that is quieter than the "yes" is not a free choice, and the consent it collects is worth nothing. The accent on accept is colour only. */ .cookie-consent__btn { appearance: none; cursor: pointer; white-space: nowrap; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--overlay-lg); background: var(--overlay-sm); color: var(--color-text); font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .cookie-consent__btn:hover { background: var(--overlay-md); border-color: var(--overlay-xl); transform: translateY(-1px); } .cookie-consent__btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } .cookie-consent__btn--accept { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary-btn), var(--accent-secondary-btn)); box-shadow: var(--shadow-primary); } .cookie-consent__btn--accept:hover { border-color: transparent; background: linear-gradient(135deg, var(--accent-primary-btn), var(--accent-secondary-btn)); box-shadow: var(--shadow-primary-lg); } /* ── Narrow screens ─────────────────────────────────────────────────────── Stack, and let the buttons share the width. Full-width targets matter more here than the tidier inline row: this is a thing people tap once, in a hurry, usually with a thumb. */ @media (max-width: 640px) { .cookie-consent { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 24px); } .cookie-consent__actions { display: grid; grid-template-columns: 1fr 1fr; } .cookie-consent__btn { padding: 12px 14px; } } @media (prefers-reduced-motion: reduce) { .cookie-consent__btn { transition: none; } .cookie-consent__btn:hover { transform: none; } }