/* ============================================================================ BME — cookieconsent theme override ---------------------------------------------------------------------------- Maps the vanilla-cookieconsent (#cc-main) CSS variables onto the BME token layer so the consent banner + preferences modal read as part of the design system: brutalist zero-radius, mono type, hairline borders, brand blue. Load ORDER matters — this must come AFTER the plugin's own stylesheet: …/cookieconsent.css (defines light defaults on :root, dark on .cc--darkmode) …/cookieconsent-theme.css (this file — overrides on #cc-main) Dark mode: we do NOT use the plugin's `.cc--darkmode` class. Every value below resolves from a BME semantic token (--surface/--fg/--bg/--line/--meta/ --line-soft), and those already invert under the site's `.dark` class on . So the banner follows the existing theme toggle automatically, with no JS class-sync. Overriding on #cc-main (id specificity) beats the plugin's :root declarations for the whole modal subtree. ========================================================================= */ #cc-main { /* Brutalist law: zero radius everywhere (plugin class rules out-specify the global * { border-radius:0 } reset, so we zero the vars directly). */ --cc-modal-border-radius: 0; --cc-btn-border-radius: 0; --cc-pm-toggle-border-radius: 0; --cc-font-family: var(--font-mono); /* Surface + text — the modal sits on the same surface as .panel / cards. */ --cc-bg: var(--surface); --cc-primary-color: var(--fg); --cc-secondary-color: var(--meta); --cc-link-color: var(--heritage-blue); /* Primary button — echoes .btn--primary (fg fill, bg text; inverts w/ theme). */ --cc-btn-primary-bg: var(--fg); --cc-btn-primary-color: var(--bg); --cc-btn-primary-border-color: var(--fg); --cc-btn-primary-hover-bg: var(--heritage-blue); --cc-btn-primary-hover-color: #fff; --cc-btn-primary-hover-border-color: var(--heritage-blue); /* Secondary button — echoes .btn (hairline outline, transparent fill). */ --cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: var(--fg); --cc-btn-secondary-border-color: var(--line); --cc-btn-secondary-hover-bg: var(--heritage-blue); --cc-btn-secondary-hover-color: #fff; --cc-btn-secondary-hover-border-color: var(--heritage-blue); /* Separators / section + category borders — the site's soft hairline. */ --cc-separator-border-color: var(--line-soft); --cc-section-category-border: var(--line-soft); --cc-cookie-category-block-border: var(--line-soft); --cc-cookie-category-block-hover-border: var(--line); --cc-footer-border-color: var(--line-soft); /* Expandable category blocks in the preferences modal. */ --cc-cookie-category-block-bg: var(--bg); --cc-cookie-category-block-hover-bg: var(--bg); --cc-cookie-category-expanded-block-bg: transparent; --cc-cookie-category-expanded-block-hover-bg: var(--bg); --cc-footer-bg: var(--bg); --cc-footer-color: var(--meta); /* Toggles — brand blue when on; graphite off; readonly = necessary/locked. */ --cc-toggle-on-bg: var(--heritage-blue); --cc-toggle-off-bg: var(--meta); --cc-toggle-on-knob-bg: #fff; --cc-toggle-off-knob-bg: #fff; --cc-toggle-enabled-icon-color: var(--heritage-blue); --cc-toggle-disabled-icon-color: var(--meta); --cc-toggle-readonly-bg: var(--line-soft); --cc-toggle-readonly-knob-bg: var(--surface); --cc-toggle-readonly-knob-icon-color: var(--meta); /* Scrollbar accents. */ --cc-webkit-scrollbar-bg: var(--line-soft); --cc-webkit-scrollbar-hover-bg: var(--heritage-blue); } /* Backdrop behind the preferences modal — key off the site's own ink so it reads consistently in both themes (the token-mapped vars above handle the rest of the inversion on their own). */ #cc-main { --cc-overlay-bg: rgb(10 10 10 / 0.65); } .dark #cc-main { --cc-overlay-bg: rgb(10 10 10 / 0.78); }