/* ═══════════════════════════════════════════════════════════════════════ LETLOU ENERGY — COOKIE CONSENT BANNER ─────────────────────────────────────────────────────────────────────── Extracted from LetlouGlobal.css. Depends on: LetlouDesignTokens.css (tokens), LetlouGlobal.css (base). Design: static card, always shown fully expanded — no collapse/expand interaction. Floating card, bottom-right on desktop; bottom sheet on mobile. Three consent categories (Cookie Policy §2): 1. Strictly Necessary — always ON, locked badge, no toggle 2. Analytics & Perf — opt-in (GA4 + Clarity) 3. Functional — opt-in (reserved for future use) Visibility controlled by .show-cookie-banner on . ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ COOKIE CONSENT BANNER ────────────────────────────────────────────────────────────────────── Design: static card, always shown fully expanded — no collapse/expand interaction. Floating card, bottom-right on desktop; bottom sheet on mobile. Never covers the home-page news-flash strip (which sits at the very bottom of the hero, not at the viewport bottom). Three consent categories drawn from Cookie Policy §2: 1. Strictly Necessary — always ON, locked badge, no toggle 2. Analytics & Perf — opt-in (GA4 + Clarity) 3. Functional — opt-in (reserved for future use: language preference, form-progress autosave) Markup (static HTML, see components/cookie-banner.html): Visibility: The banner is shown/hidden via a single class on : .show-cookie-banner #cookieBanner { display: flex; } Set synchronously by an inline head script (before paint) and toggled by LetlouGlobal.js once a consent decision is made. ═══════════════════════════════════════════════════════════════════════ */ /* ── Outer shell ── Hidden by default; shown only when carries .show-cookie-banner (set by the head script / consent JS). This avoids any flash-of-banner and removes the need for a JS-driven enter/leave animation class. */ .cookie-banner { display: none; position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1090; width: clamp(300px, 92vw, 400px); max-height: calc(100dvh - 3rem); overflow-y: auto; flex-direction: column; background: var(--cookie-bg); border: 1px solid color-mix(in srgb, var(--color-amber) 22%, transparent); border-radius: var(--radius-lg); box-shadow: var(--cookie-shadow); animation: cb-enter 0.32s var(--transition-normal) both; } .show-cookie-banner .cookie-banner { display: flex; } @keyframes cb-enter { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Amber accent rule across the top */ .cookie-banner::before { content: ''; display: block; height: 3px; background: linear-gradient( 90deg, var(--color-amber) 0%, color-mix(in srgb, var(--color-amber) 35%, transparent) 100% ); flex-shrink: 0; } /* ── Intro bar ── */ .cookie-banner__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem 0.85rem 1.1rem; } .cookie-banner__bar-icon { color: var(--color-amber); font-size: 1rem; flex-shrink: 0; line-height: 1; } .cookie-banner__bar-text { flex: 1; font-size: 0.78rem; color: var(--cookie-text-muted); line-height: 1.45; margin: 0; } .cookie-banner__bar-text strong { color: var(--color-white); font-weight: 700; display: block; font-size: 0.8rem; margin-bottom: 0.15rem; } .cookie-banner__bar-text a { color: var(--color-amber); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-amber) 35%, transparent); font-weight: 500; font-size: 0.74rem; transition: border-color var(--transition-fast); white-space: nowrap; } .cookie-banner__bar-text a:hover { border-color: var(--color-amber); } .cookie-policy-link { display: inline; } /* ── Action buttons (reused in .cookie-banner__panel-actions) ── */ .cookie-btn-accept-all { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--color-amber); color: var(--color-interactive-text); font-family: var(--font-body); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.03em; padding: 0.55rem 0.9rem; border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast), transform var(--transition-fast); } .cookie-btn-accept-all:hover { background: var(--color-amber-hover); transform: translateY(-1px); } .cookie-btn-accept-all:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .cookie-btn-accept-all i { font-size: 0.7rem; } .cookie-btn-decline-all { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--cookie-text-faint); font-family: var(--font-body); font-weight: 600; font-size: 0.74rem; padding: 0.55rem 0.85rem; border: 1px solid var(--cookie-surface-dim); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); } .cookie-btn-decline-all:hover { color: var(--cookie-text-hover); border-color: var(--cookie-border-hover); } .cookie-btn-decline-all:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; } /* ── Preference panel — always visible ── */ .cookie-banner__panel { border-top: 1px solid var(--cookie-border-faint); padding: 0.9rem 1.1rem 0; } .cookie-banner__panel-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cookie-text-faint); /* WCAG AA 4.5:1 on navy-deep */ margin-bottom: 0.65rem; } /* ── Individual category row ── */ .cookie-category { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--cookie-border-dim); } .cookie-category:last-of-type { border-bottom: none; } .cookie-category__info { flex: 1; min-width: 0; } .cookie-category__name { font-size: 0.8rem; font-weight: 700; color: var(--color-white); display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.2rem; line-height: 1.3; } .cookie-category__name i { color: var(--color-amber); font-size: 0.72rem; flex-shrink: 0; width: 14px; text-align: center; } .cookie-category__desc { font-size: 0.7rem; color: var(--cookie-text-faint); line-height: 1.5; margin: 0; } /* Required badge — replaces toggle for locked category */ .cookie-required-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-amber); background: color-mix(in srgb, var(--color-amber) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-amber) 20%, transparent); border-radius: 99px; padding: 0.22rem 0.55rem; white-space: nowrap; margin-top: 0.15rem; cursor: not-allowed; user-select: none; } .cookie-required-badge i { font-size: 0.58rem; } /* ── Toggle switch ── */ .cookie-toggle { position: relative; flex-shrink: 0; margin-top: 0.15rem; } .cookie-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .cookie-toggle__track { display: block; width: 36px; height: 20px; background: var(--cookie-surface-dim); border-radius: 99px; border: 1px solid var(--cookie-border-faint); cursor: pointer; transition: background var(--transition-normal), border-color var(--transition-normal); position: relative; } .cookie-toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--cookie-toggle-thumb); border-radius: 50%; transition: transform var(--transition-normal), background var(--transition-normal); } /* Checked state */ .cookie-toggle input:checked + .cookie-toggle__track { background: var(--color-amber); border-color: var(--color-amber); } .cookie-toggle input:checked + .cookie-toggle__track::after { transform: translateX(16px); background: var(--toggle-checked-thumb); } /* Focus ring on the label (accessible keyboard target) */ .cookie-toggle input:focus-visible + .cookie-toggle__track { outline: 2px solid var(--color-amber); outline-offset: 2px; } /* Hover */ .cookie-toggle__track:hover { border-color: var(--cookie-toggle-hover); } .cookie-toggle input:checked + .cookie-toggle__track:hover { background: var(--color-amber-hover); border-color: var(--color-amber-hover); } /* ── Panel footer actions — Decline / Save / Accept ── */ .cookie-banner__panel-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0.85rem 1.1rem 1rem; border-top: 1px solid var(--cookie-border-faint); margin-top: 0.1rem; } .cookie-btn-save { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--color-amber); color: var(--color-interactive-text); font-family: var(--font-body); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.03em; padding: 0.6rem 1rem; border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast), transform var(--transition-fast); } .cookie-btn-save:hover { background: var(--color-amber-hover); transform: translateY(-1px); } .cookie-btn-save:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .cookie-btn-save i { font-size: 0.7rem; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } } /* ── Floating "Cookie Settings" trigger ── Shown after a consent decision has been recorded, so users can reopen the banner at any time. Hidden via the `hidden` attribute until LetlouGlobal.js reveals it. */ /* Cookie floating trigger — retired on all screen sizes in favour of the Cookie Settings item in the Legal nav dropdown. The trigger element remains in the DOM so LetlouGlobal.js cookie logic still works (the nav Cookie Settings button calls trigger.click()). Hidden via CSS only — do not remove the HTML element. */ .cookie-floating-trigger { display: none !important; } .cookie-floating-trigger:hover { background: var(--color-interactive); border-color: var(--color-amber); transform: translateY(-2px); } .cookie-floating-trigger:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; } .cookie-floating-trigger i { font-size: 0.85rem; } /* ── Mobile: full-width bottom sheet ── */ @media (max-width: 480px) { .cookie-banner { bottom: 0; right: 0; left: 0; width: 100%; max-height: 80dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-left: none; border-right: none; border-bottom: none; /* Ensure it sits above any fixed bottom UI */ padding-bottom: env(safe-area-inset-bottom, 0px); } .cookie-banner__bar { padding: 0.9rem 1rem 0.75rem; } .cookie-banner__panel-actions { padding: 0.85rem 1rem 1rem; } }