/* ========================================================================== CookieConsent — brand override -------------------------------------------------------------------------- Re-themes the vanilla-cookieconsent v3 banner/modal to match the site. Do NOT edit the vendor file (consent/cookieconsent.css) — it is minified and gets overwritten on every library update. This file only reassigns the library's own `--cc-*` CSS variables to the site design tokens defined in style.css (--navy-scale-*, --teal-scale-*, --gray-scale-*, --font-*, …). Load order: this file must come AFTER cookieconsent.css in every page's . Specificity also guarantees it wins — the vendor sets its variables on :root / .cc--darkmode (specificity 0,1,0), and #cc-main here is 1,0,0. Dark mode: the config (cookieconsent-config.js) toggles `.cc--darkmode` on from `prefers-color-scheme: dark`, the same signal the rest of the site themes on. So the dark block below is driven by the same media query and stays in lockstep with the page — no dependency on the vendor's dark class. ========================================================================== */ /* ---- Light theme ------------------------------------------------------- */ #cc-main { /* Type + shape */ --cc-font-family: var(--font-body); --cc-modal-border-radius: var(--radius-lg); /* 16px, like the site cards */ --cc-btn-border-radius: var(--radius-md); /* 10px, matches --btn-radius */ /* Surfaces + text */ --cc-bg: var(--gray-scale-0); --cc-primary-color: var(--gray-scale-800); --cc-secondary-color: var(--gray-scale-500); --cc-link-color: var(--brand-steel); /* Primary button = filled navy (like .btn--primary) */ --cc-btn-primary-bg: var(--navy-scale-800); --cc-btn-primary-border-color: var(--navy-scale-700); --cc-btn-primary-color: var(--gray-scale-0); --cc-btn-primary-hover-bg: var(--navy-scale-500); --cc-btn-primary-hover-border-color: var(--navy-scale-400); --cc-btn-primary-hover-color: var(--gray-scale-0); /* Secondary button = light neutral with navy ink (like .btn--secondary) */ --cc-btn-secondary-bg: var(--gray-scale-100); --cc-btn-secondary-border-color: var(--gray-scale-200); --cc-btn-secondary-color: var(--navy-scale-800); --cc-btn-secondary-hover-bg: var(--gray-scale-200); --cc-btn-secondary-hover-border-color: var(--gray-scale-300); --cc-btn-secondary-hover-color: var(--navy-scale-900); /* Separators + expandable category blocks */ --cc-separator-border-color: var(--gray-scale-200); --cc-section-category-border: var(--gray-scale-200); --cc-cookie-category-block-bg: var(--gray-scale-100); --cc-cookie-category-block-border: var(--gray-scale-200); --cc-cookie-category-block-hover-bg: var(--gray-scale-200); --cc-cookie-category-block-hover-border: var(--gray-scale-300); --cc-cookie-category-expanded-block-hover-bg: var(--gray-scale-200); /* Toggles — "on" uses the site's teal accent (its active/enabled colour) */ --cc-toggle-on-bg: var(--teal-scale-500); --cc-toggle-off-bg: var(--gray-scale-400); --cc-toggle-on-knob-bg: var(--gray-scale-0); --cc-toggle-off-knob-bg: var(--gray-scale-0); --cc-toggle-enabled-icon-color: var(--gray-scale-0); --cc-toggle-disabled-icon-color: var(--gray-scale-0); --cc-toggle-readonly-bg: var(--gray-scale-300); --cc-toggle-readonly-knob-bg: var(--gray-scale-0); /* Footer of the preferences modal */ --cc-footer-bg: var(--gray-scale-100); --cc-footer-color: var(--gray-scale-500); --cc-footer-border-color: var(--gray-scale-200); /* Dimmer behind the modal — brand-navy tint instead of flat black */ --cc-overlay-bg: rgba(14, 27, 56, .55); } /* ---- Dark theme -------------------------------------------------------- */ /* Same trigger as the site + the config's .cc--darkmode toggle. The --primary / --surface / --raised / --primary-* tokens exist ONLY inside the dark :root in style.css, so they are referenced only here where they are defined. */ @media (prefers-color-scheme: dark) { #cc-main { /* Banner reads as a navy card, like the site's dark surfaces */ --cc-bg: var(--navy-scale-800); --cc-primary-color: var(--gray-scale-0); --cc-secondary-color: var(--gray-scale-300); --cc-link-color: var(--primary); /* Primary button = light-blue --primary with navy ink (dark .btn--primary) */ --cc-btn-primary-bg: var(--primary); --cc-btn-primary-border-color: var(--primary-lighter-100); --cc-btn-primary-color: var(--navy-scale-800); --cc-btn-primary-hover-bg: var(--primary-lighter-100); --cc-btn-primary-hover-border-color: var(--primary-lighter-200); --cc-btn-primary-hover-color: var(--gray-scale-0); /* Secondary button = raised navy surface with light ink */ --cc-btn-secondary-bg: var(--surface); --cc-btn-secondary-border-color: var(--primary-darker-100); --cc-btn-secondary-color: var(--gray-scale-0); --cc-btn-secondary-hover-bg: var(--raised); --cc-btn-secondary-hover-border-color: var(--primary); --cc-btn-secondary-hover-color: var(--gray-scale-0); /* Separators + category blocks — lighter navies layered on the card */ --cc-separator-border-color: rgba(255, 255, 255, .08); --cc-section-category-border: var(--navy-scale-700); --cc-cookie-category-block-bg: var(--navy-scale-700); --cc-cookie-category-block-border: var(--navy-scale-600); --cc-cookie-category-block-hover-bg: var(--navy-scale-600); --cc-cookie-category-block-hover-border: var(--navy-scale-500); --cc-cookie-category-expanded-block-hover-bg: var(--navy-scale-700); /* Toggles — teal "on" still reads on the dark card */ --cc-toggle-on-bg: var(--teal-scale-500); --cc-toggle-off-bg: var(--gray-scale-600); --cc-toggle-on-knob-bg: var(--gray-scale-0); --cc-toggle-off-knob-bg: var(--gray-scale-0); --cc-toggle-enabled-icon-color: var(--navy-scale-900); --cc-toggle-disabled-icon-color: var(--navy-scale-900); --cc-toggle-readonly-bg: var(--navy-scale-600); --cc-toggle-readonly-knob-bg: var(--navy-scale-300); /* Footer */ --cc-footer-bg: var(--surface); --cc-footer-color: var(--gray-scale-300); --cc-footer-border-color: rgba(255, 255, 255, .08); /* Dimmer — darker on the dark page */ --cc-overlay-bg: rgba(0, 0, 0, .7); } }