/*! * Benefitra cookie-consent styling. * Theme-aware: the site toggles data-theme="light|dark" on * (document.documentElement, localStorage key "benefitra-theme") and also * respects prefers-color-scheme. We support BOTH: * - html[data-theme="dark"] -> explicit user/site toggle wins * - @media (prefers-color-scheme: dark) -> used only when no explicit * light theme is set (covers the pre-hydration first paint) * All colors below meet WCAG AA (>= 4.5:1 for text) in both modes. * Brand: Benefitra navy #0a1628 + ocean green #10B981. */ /* ------------------------------- TOKENS -------------------------------- */ .bf-consent-root, #bf-consent-reopen { --bf-bg: #ffffff; --bf-fg: #0a1628; /* navy text on white: contrast ~16:1 */ --bf-muted: #45526b; /* on white: ~7.4:1 */ --bf-border: #d5dce6; --bf-surface: #f4f6fa; --bf-primary: #0f7a55; /* accessible green on white for button bg (white text ~4.6:1) */ --bf-primary-fg: #ffffff; --bf-primary-hover: #0b5f42; --bf-secondary-fg: #0a1628; --bf-accent: #10B981; --bf-track-off: #b7c0cf; --bf-track-on: #0f7a55; --bf-thumb: #ffffff; --bf-focus: #1d4ed8; /* strong visible focus ring, both modes tuned below */ --bf-shadow: 0 -2px 24px rgba(10, 22, 40, 0.18); } /* Explicit dark toggle set by the site. */ html[data-theme="dark"] .bf-consent-root, html[data-theme="dark"] #bf-consent-reopen { --bf-bg: #0f1b2d; --bf-fg: #eef2f8; /* on dark navy: ~15:1 */ --bf-muted: #b3c0d4; /* on dark navy: ~8:1 */ --bf-border: #2a3a52; --bf-surface: #16273d; --bf-primary: #10B981; /* brand emerald; navy text on it ~5.3:1 */ --bf-primary-fg: #062318; --bf-primary-hover: #34d399; --bf-secondary-fg: #eef2f8; --bf-accent: #34d399; --bf-track-off: #45526b; --bf-track-on: #10B981; --bf-thumb: #0f1b2d; --bf-focus: #93c5fd; --bf-shadow: 0 -2px 24px rgba(0, 0, 0, 0.55); } /* System dark preference, ONLY when the site has not forced light. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .bf-consent-root, html:not([data-theme="light"]) #bf-consent-reopen { --bf-bg: #0f1b2d; --bf-fg: #eef2f8; --bf-muted: #b3c0d4; --bf-border: #2a3a52; --bf-surface: #16273d; --bf-primary: #10B981; --bf-primary-fg: #062318; --bf-primary-hover: #34d399; --bf-secondary-fg: #eef2f8; --bf-accent: #34d399; --bf-track-off: #45526b; --bf-track-on: #10B981; --bf-thumb: #0f1b2d; --bf-focus: #93c5fd; --bf-shadow: 0 -2px 24px rgba(0, 0, 0, 0.55); } } /* ------------------------------ CONTAINER ------------------------------ */ .bf-consent-root { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; /* above site chrome, below nothing we own */ display: flex; justify-content: center; padding: 16px; box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; /* Not a full-screen overlay: keyboard and screen-reader users can still reach page content. The banner sits at the bottom and traps focus only while a control inside it is focused. */ pointer-events: none; } .bf-consent-dialog { pointer-events: auto; width: 100%; max-width: 720px; background: var(--bf-bg); color: var(--bf-fg); border: 1px solid var(--bf-border); border-radius: 14px; box-shadow: var(--bf-shadow); max-height: calc(100vh - 32px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .bf-consent-body { padding: 20px 22px 22px; } .bf-consent-heading { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--bf-fg); } .bf-consent-intro { margin: 0 0 16px; color: var(--bf-muted); } .bf-consent-link { color: var(--bf-primary); text-decoration: underline; font-weight: 600; } html[data-theme="dark"] .bf-consent-link { color: var(--bf-accent); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .bf-consent-link { color: var(--bf-accent); } } .bf-consent-link:hover { text-decoration: none; } /* ------------------------------- BUTTONS ------------------------------- */ .bf-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; } .bf-consent-panel-actions { margin-top: 18px; } .bf-consent-btn { appearance: none; border: 1px solid transparent; border-radius: 10px; padding: 11px 18px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; line-height: 1.2; min-height: 44px; /* comfortable touch target */ flex: 1 1 auto; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .bf-consent-btn-primary { background: var(--bf-primary); color: var(--bf-primary-fg); border-color: var(--bf-primary); } .bf-consent-btn-primary:hover { background: var(--bf-primary-hover); border-color: var(--bf-primary-hover); } .bf-consent-btn-secondary { background: transparent; color: var(--bf-secondary-fg); border-color: var(--bf-border); } .bf-consent-btn-secondary:hover { background: var(--bf-surface); } .bf-consent-btn-ghost { background: transparent; color: var(--bf-primary); border-color: transparent; text-decoration: underline; flex: 0 1 auto; } html[data-theme="dark"] .bf-consent-btn-ghost { color: var(--bf-accent); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .bf-consent-btn-ghost { color: var(--bf-accent); } } .bf-consent-btn-ghost:hover { background: var(--bf-surface); text-decoration: none; } /* ------------------------------- PANEL --------------------------------- */ .bf-consent-panel { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--bf-border); } .bf-consent-panel[hidden] { display: none; } .bf-consent-cat { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--bf-border); } .bf-consent-cat:last-of-type { border-bottom: 0; } .bf-consent-cat-text { flex: 1 1 auto; min-width: 0; } .bf-consent-cat-title { font-weight: 700; color: var(--bf-fg); display: inline-block; margin-right: 8px; } .bf-consent-always { font-size: 12px; font-weight: 600; color: var(--bf-muted); background: var(--bf-surface); border: 1px solid var(--bf-border); border-radius: 999px; padding: 2px 8px; vertical-align: middle; } .bf-consent-cat-desc { margin: 6px 0 0; color: var(--bf-muted); font-size: 14px; } /* ------------------------------ SWITCH --------------------------------- */ .bf-consent-switch { appearance: none; border: 0; background: transparent; padding: 4px; margin: 0; cursor: pointer; flex: 0 0 auto; } .bf-consent-switch-track { display: block; width: 48px; height: 28px; border-radius: 999px; background: var(--bf-track-off); position: relative; transition: background-color .15s ease; } .bf-consent-switch-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bf-thumb); box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .15s ease; } .bf-consent-switch[aria-checked="true"] .bf-consent-switch-track { background: var(--bf-track-on); } .bf-consent-switch[aria-checked="true"] .bf-consent-switch-thumb { transform: translateX(20px); } .bf-consent-switch.is-disabled { cursor: not-allowed; opacity: .85; } /* ----------------------------- REOPEN BTN ------------------------------ */ .bf-consent-reopen { position: fixed; left: 16px; bottom: 16px; z-index: 2147482000; display: inline-flex; align-items: center; gap: 8px; background: var(--bf-bg); color: var(--bf-fg); border: 1px solid var(--bf-border); border-radius: 999px; padding: 9px 14px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(10,22,40,.16); min-height: 40px; } .bf-consent-reopen:hover { background: var(--bf-surface); } .bf-consent-reopen-icon { font-size: 16px; line-height: 1; } .bf-consent-reopen-label { line-height: 1; } /* ----------------------------- FOCUS RING ------------------------------ */ .bf-consent-btn:focus-visible, .bf-consent-switch:focus-visible, .bf-consent-link:focus-visible, .bf-consent-reopen:focus-visible { outline: 3px solid var(--bf-focus); outline-offset: 2px; border-radius: 10px; } /* Fallback for browsers without :focus-visible. */ .bf-consent-btn:focus, .bf-consent-switch:focus, .bf-consent-reopen:focus { outline: 3px solid var(--bf-focus); outline-offset: 2px; } .bf-consent-btn:focus:not(:focus-visible), .bf-consent-switch:focus:not(:focus-visible), .bf-consent-reopen:focus:not(:focus-visible) { outline: none; } /* ---------------------------- RESPONSIVE ------------------------------- */ @media (max-width: 560px) { .bf-consent-root { padding: 10px; } .bf-consent-body { padding: 18px 16px 18px; } .bf-consent-actions { flex-direction: column; } .bf-consent-btn { width: 100%; flex: 1 1 auto; } .bf-consent-btn-ghost { order: 3; } .bf-consent-reopen-label { display: none; } /* icon-only on small screens */ .bf-consent-reopen { padding: 10px; } } /* --------------------------- REDUCED MOTION ---------------------------- */ @media (prefers-reduced-motion: reduce) { .bf-consent-btn, .bf-consent-switch-track, .bf-consent-switch-thumb { transition: none; } } /* --------------------------- HIGH CONTRAST ----------------------------- */ @media (prefers-contrast: more) { .bf-consent-dialog { border-width: 2px; } .bf-consent-btn { border-width: 2px; } }