/* ═══════════════════════════════════════════════════════════════════════════ RED WARDEN STUDIOS — CONSENT MANAGEMENT PLATFORM (CMP) v1 · 2026-08-09 Loaded on every page. Renders nothing until js/consent.js decides there is something to ask about, so this file is ~4 KB of dead weight on a page that never shows a banner — which is the correct trade against a flash of an unstyled banner on the page that does. TYPE FLOOR: nothing here goes below 0.72rem. CONTRAST: every text colour in this file is >= rgba(255,255,255,.62) on a near-black panel, which clears AA. Both are project baselines — see CHECKPOINT. Do not "tidy" them downward. NO LAYOUT SHIFT BY CONSTRUCTION. The bar is position:fixed and enters with a transform, so it can never move the document and can never cost CLS. It is also injected at the end of , after the LCP element has painted. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── The bar ────────────────────────────────────────────────────────────── */ .rws-cmp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; /* above the nav (100) and the chamber (10) */ display: none; padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 5vw, 3rem); background: rgba(8, 8, 9, 0.97); border-top: 1px solid var(--rws-border-red, rgba(192, 57, 43, 0.25)); box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.75); color: var(--rws-white-80, rgba(255, 255, 255, 0.8)); font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 0.95rem; line-height: 1.65; transform: translateY(110%); transition: transform .5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } /* backdrop-filter is a progressive nicety, never the thing carrying legibility. The 0.97 background above already does that on its own, so a browser that ignores this line loses nothing. */ @supports (backdrop-filter: blur(12px)) { .rws-cmp { background: rgba(8, 8, 9, 0.92); backdrop-filter: blur(14px); } } .rws-cmp.is-mounted { display: block; } .rws-cmp.is-open { transform: translateY(0); } .rws-cmp-inner { max-width: var(--container-max, 1200px); margin: 0 auto; } /* ─── Headline row ───────────────────────────────────────────────────────── */ .rws-cmp-title { font-family: var(--font-heading, 'Cinzel', Georgia, serif); font-size: 1.02rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: .5rem; } .rws-cmp-copy { max-width: 68ch; margin-bottom: 1.1rem; } .rws-cmp-copy a { color: rgba(255, 255, 255, 0.92); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rws-crimson, #C0392B); } .rws-cmp-copy a:hover { color: #fff; } /* ─── Buttons ────────────────────────────────────────────────────────────── */ .rws-cmp-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; } .rws-cmp-btn { font-family: var(--font-body, 'Inter', system-ui, sans-serif); font-size: 0.86rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: .78rem 1.5rem; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: background .25s, border-color .25s, color .25s; /* 44px minimum touch target. A consent control that is hard to hit is a consent control that gets mis-tapped, and a mis-tapped Accept is not consent in any jurisdiction that matters. */ min-height: 44px; } .rws-cmp-btn--accept { background: var(--rws-crimson, #C0392B); border-color: var(--rws-crimson, #C0392B); color: #fff; } .rws-cmp-btn--accept:hover { background: #d0432f; border-color: #d0432f; } /* REJECT IS VISUALLY EQUAL TO ACCEPT — same size, same weight, same row, no greying, no burying behind a second click. This is not a style preference: the EDPB and the French CNIL have both fined operators for making refusal harder than acceptance, and a "Reject all" rendered as a faint text link is the exact pattern they cite. Do not demote this button to improve opt-in rates. */ .rws-cmp-btn--reject { background: transparent; border-color: rgba(255, 255, 255, 0.34); color: rgba(255, 255, 255, 0.9); } .rws-cmp-btn--reject:hover { border-color: rgba(255, 255, 255, 0.7); color: #fff; } .rws-cmp-btn--manage { background: transparent; border-color: transparent; color: rgba(255, 255, 255, 0.72); padding-left: .6rem; padding-right: .6rem; text-decoration: underline; text-underline-offset: 4px; } .rws-cmp-btn--manage:hover { color: #fff; } .rws-cmp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ─── Preferences panel ──────────────────────────────────────────────────── */ .rws-cmp-panel { display: none; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--rws-border, rgba(255, 255, 255, 0.06)); /* A long panel on a short phone must be able to scroll on its own without the bar swallowing the whole viewport. */ max-height: min(52vh, 460px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .rws-cmp.is-managing .rws-cmp-panel { display: block; } .rws-cmp-cat { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid var(--rws-border, rgba(255, 255, 255, 0.06)); } .rws-cmp-cat:last-of-type { border-bottom: 0; } .rws-cmp-cat-text { flex: 1 1 auto; min-width: 0; } .rws-cmp-cat-name { font-family: var(--font-heading, 'Cinzel', Georgia, serif); font-size: 0.92rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: .3rem; } .rws-cmp-cat-desc { font-size: 0.88rem; line-height: 1.6; color: rgba(255, 255, 255, 0.66); } /* "Nothing in this category is currently running" — the honest state, and the line that keeps this banner truthful while the categories are still empty. */ .rws-cmp-cat-state { display: inline-block; margin-top: .35rem; font-size: 0.74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); } .rws-cmp-cat-state::before { content: '\25CF\00a0\00a0'; color: rgba(255,255,255,.4); } .rws-cmp-cat-state.is-live::before { color: var(--rws-crimson, #C0392B); } /* ─── Toggle ─────────────────────────────────────────────────────────────── */ .rws-cmp-toggle { flex: 0 0 auto; position: relative; width: 52px; height: 30px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06); cursor: pointer; transition: background .25s, border-color .25s; padding: 0; } .rws-cmp-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: transform .25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), background .25s; } .rws-cmp-toggle[aria-checked="true"] { background: var(--rws-crimson-glow, rgba(192, 57, 43, 0.15)); border-color: var(--rws-crimson, #C0392B); } .rws-cmp-toggle[aria-checked="true"]::after { transform: translateX(22px); background: var(--rws-crimson, #C0392B); } .rws-cmp-toggle[disabled] { cursor: not-allowed; opacity: .75; } .rws-cmp-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .rws-cmp-panel-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; } /* ─── Footer re-open link ────────────────────────────────────────────────── */ .rws-cmp-reopen { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; } .rws-cmp-reopen:hover { color: var(--rws-white, #fff); } /* ─── Mobile ─────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .rws-cmp { font-size: 0.92rem; padding-bottom: max(1.1rem, env(safe-area-inset-bottom)); } .rws-cmp-actions { flex-direction: column; align-items: stretch; } .rws-cmp-btn { width: 100%; text-align: center; } /* Manage stays last in the DOM and last on screen: on a phone the two real decisions should be reachable without reading past a third option. */ .rws-cmp-panel-actions { flex-direction: column; } .rws-cmp-cat { gap: .8rem; } } /* ─── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .rws-cmp, .rws-cmp-toggle, .rws-cmp-toggle::after, .rws-cmp-btn { transition: none; } }