/* * Interoperly cookie consent banner styling. * * Self-contained. No Tailwind dependencies. No external font imports. * No url() to external hosts. WCAG 2.2 AA compliant. * * Loaded via in . * * Design reference: docs/architecture/PR_D_COOKIE_BANNER_DESIGN.md * sections 5 (banner UX) and 5.6 (accessibility). */ /* ---------- CSS custom properties ---------- */ :root { --consent-bg-primary: #0a1628; --consent-bg-secondary: #1a2942; --consent-text-primary: #f1f5f9; --consent-text-secondary: #cbd5e1; --consent-accent: #22d3ee; --consent-warning: #fbbf24; --consent-warning-bg: #1f1d11; --consent-border-subtle: rgba(255, 255, 255, 0.1); --consent-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3); --consent-modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); --consent-z-banner: 9000; --consent-z-modal: 9100; --consent-radius: 8px; --consent-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } /* ---------- Hidden state (HTML hidden attribute) ---------- */ .consent-banner[hidden], .consent-modal-backdrop[hidden], .consent-modal-gpc-notice[hidden] { display: none; } /* ---------- Banner ---------- */ .consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: #0f1d36; color: var(--consent-text-primary); border-top: 1px solid rgba(34, 211, 238, 0.15); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4); font-family: var(--consent-font); font-size: 14px; line-height: 1.5; transform: translateY(0); transition: transform 250ms ease-out; } .consent-banner-inner { max-width: 1280px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; } @media (min-width: 768px) { .consent-banner-inner { padding: 32px; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; } } .consent-banner-heading { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--consent-text-primary); } .consent-banner-copy { margin: 0; color: var(--consent-text-primary); font-size: 14px; line-height: 1.6; flex: 1; } .consent-banner-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; } @media (min-width: 480px) { .consent-banner-actions { flex-direction: row; gap: 12px; } } /* ---------- Buttons (banner + modal share base; text-link style, no boxes) ---------- */ .consent-btn { appearance: none; -webkit-appearance: none; margin: 0; border: none; background: transparent; cursor: pointer; min-height: 44px; min-width: 44px; padding: 10px 12px; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; color: var(--consent-text-primary); text-decoration: none; transition: color 150ms ease-out; } .consent-btn:hover, .consent-btn:focus { color: var(--consent-accent); } .consent-btn:focus-visible { outline: 2px solid var(--consent-accent); outline-offset: 2px; border-radius: 2px; } /* All three banner buttons share the same equal-weight treatment. No filled background, no boxed border. Hover and focus shift color to bio-teal accent (matches site nav convention). Equal visual weight is preserved per CPRA section 7026 symmetry. */ .consent-btn-reject, .consent-btn-manage, .consent-btn-accept, .consent-btn-save, .consent-btn-cancel { /* All inherit base .consent-btn treatment. No per-button overrides. */ } /* ---------- Modal ---------- */ .consent-modal-backdrop { position: fixed; inset: 0; z-index: 9100; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; font-family: var(--consent-font); } .consent-modal { background: var(--consent-bg-secondary); color: var(--consent-text-primary); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; border-radius: var(--consent-radius); border: 1px solid var(--consent-border-subtle); box-shadow: var(--consent-modal-shadow); padding: 32px; } .consent-modal-heading { margin: 0 0 12px 0; font-size: 20px; font-weight: 700; color: var(--consent-text-primary); } .consent-modal-heading:focus { outline: none; } .consent-modal-intro { margin: 0 0 16px 0; color: var(--consent-text-secondary); font-size: 14px; line-height: 1.5; } .consent-modal-gpc-notice { margin: 0 0 20px 0; padding: 12px 16px; background: var(--consent-warning-bg); border-left: 4px solid var(--consent-warning); color: var(--consent-text-primary); font-size: 13px; line-height: 1.5; border-radius: 4px; } .consent-modal-form { margin: 0; } .consent-toggle-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--consent-border-subtle); } .consent-toggle-row:first-child { border-top: none; } .consent-toggle { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--consent-accent); cursor: pointer; } .consent-toggle:disabled { cursor: not-allowed; opacity: 0.6; } .consent-toggle:focus, .consent-toggle:focus-visible { outline: 2px solid var(--consent-accent); outline-offset: 2px; } .consent-toggle-label { display: flex; flex-direction: column; gap: 4px; cursor: pointer; flex: 1; } .consent-toggle:disabled + .consent-toggle-label { cursor: not-allowed; } .consent-toggle-name { font-size: 14px; font-weight: 600; color: var(--consent-text-primary); } .consent-toggle-desc { font-size: 13px; line-height: 1.5; color: var(--consent-text-secondary); } .consent-modal-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--consent-border-subtle); } @media (min-width: 480px) { .consent-modal-actions { flex-direction: row; justify-content: flex-end; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .consent-banner, .consent-btn { transition: none; } } /* ---------- Increased contrast ---------- */ @media (prefers-contrast: more) { .consent-banner { border-top-width: 2px; border-top-color: var(--consent-text-primary); } .consent-modal { border-width: 2px; border-color: var(--consent-text-primary); } .consent-btn { border-width: 3px; } .consent-toggle-row { border-top-width: 2px; } .consent-modal-gpc-notice { border-left-width: 6px; } } /* ---------- Print ---------- */ @media print { .consent-banner, .consent-modal-backdrop { display: none !important; } }