/* ========================================================================== Cookie Banner Token-driven styles. Do NOT add hardcoded colors, spacing, or z-index values — reference var(--*) tokens from tokens.css instead. ========================================================================== */ /* -------------------------------------------------------------------------- Hide banner from frame 1 when the inline pre-check added cookie-accepted to (Decision 8 + 11 — no flash on return visits). -------------------------------------------------------------------------- */ html.cookie-accepted .cookie-banner { display: none; } /* -------------------------------------------------------------------------- Base layout — fixed, full-width, bottom-anchored -------------------------------------------------------------------------- */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-cookie-banner); /* = 900, above floating CTA (850) */ display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px var(--pad); background: var(--bg-card); border-top: 1px solid var(--line); box-shadow: var(--shadow-md); } /* -------------------------------------------------------------------------- Text content -------------------------------------------------------------------------- */ .cookie-banner__text { flex: 1; min-width: 220px; /* prevents single-word wrap on narrow columns */ font-size: 14px; line-height: 1.5; color: var(--muted); } .cookie-banner__privacy-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .cookie-banner__privacy-link:hover { color: var(--accent-hover); } /* -------------------------------------------------------------------------- Action buttons row -------------------------------------------------------------------------- */ .cookie-banner__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* -------------------------------------------------------------------------- Accept button — inherits .btn .btn-primary from button.css. No additional overrides needed; the sizing tokens from button.css apply. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Close (×) — icon-only, touch-target ≥ 44px (Decision 12 + WCAG 2.5.8) -------------------------------------------------------------------------- */ .cookie-banner__close { display: flex; align-items: center; justify-content: center; /* Touch target ≥ 44px */ min-width: 44px; min-height: 44px; padding: 0; background: transparent; border: none; border-radius: var(--r-xs); color: var(--muted); cursor: pointer; transition: color 0.15s, background-color 0.15s; } .cookie-banner__close:hover { color: var(--ink); background-color: var(--accent-soft); } .cookie-banner__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* -------------------------------------------------------------------------- Mobile (≤ 640px) — stacked layout, full-width buttons -------------------------------------------------------------------------- */ @media (max-width: 640px) { .cookie-banner { padding: 16px var(--pad); flex-direction: column; align-items: stretch; } .cookie-banner__text { min-width: 0; } .cookie-banner__actions { justify-content: flex-end; } }