/* ============================================================================
GATEWAY FLOW — Complianz consent-banner styling (THEME-owned)
Enqueued sitewide by gateway_flow_enqueue_assets(), after style.css.
── Why this file exists ────────────────────────────────────────────────────
Complianz's own "custom CSS" field lives in the `{prefix}cmplz_cookiebanners`
DB row (`use_custom_cookie_css` / `custom_css` columns). That row is exactly
the kind of content a `docker/scripts/db-push.sh` seed import overwrites —
and in fact already has been wiped once, with no copy left in git or any
seed. Putting the banner's brand styling in the theme instead means a DB
import can delete the banner CONFIGURATION (position, categories, text) but
can never again delete its LOOK — that lives in version control, ships with
the theme, and applies to whatever banner Complianz renders.
── How it survives Complianz's own CSS ─────────────────────────────────────
Complianz's default banner stylesheet (cookiebanner/css/defaults/banner-
{type}.css) is injected by ITS OWN JS at an unpredictable point in the page
lifecycle (client-side, after geoip/region resolution) — so we cannot rely
on our simply loading later in source order to win the cascade.
Instead we exploit how CSS custom properties resolve: Complianz's stylesheet
only ever defines its `--cmplz_*` tokens at `:root` (confirmed by reading
both cookiebanner/css/cookiebanner.css and the generated defaults — and by
generate_css() in cookiebanner/class-cookiebanner.php, which always
regex-replaces the `:root{}` block only, no matter what a banner row's
colours are). A declaration on `.cmplz-cookiebanner` itself is DIRECT, not
inherited — and a direct value always wins over an inherited one regardless
of stylesheet load order or specificity math. So redeclaring the same
`--cmplz_*` names on `.cmplz-cookiebanner` / `#cmplz-manage-consent` below
is load-order-proof by construction, not by luck or !important.
For the handful of properties Complianz does NOT expose as a variable
(description text colour, category-card background, fonts, the chevron
icon, focus states) we fall back to `!important` on our own selector,
matched at Complianz's own specificity — documented inline at each use.
── Tokens ───────────────────────────────────────────────────────────────────
Reuses the SITEWIDE custom properties from theme/style.css (--accent,
--on-accent, --ink, --surface, --bg, --line, --mute) and the SAME day/night
mechanism (html[data-mode="night"]) — not an isolated namespace — because
this banner should look like it belongs to the rest of the site, and should
re-theme automatically if those sitewide tokens ever change.
── Contrast ledger (WCAG 2.2 AA — 4.5:1 normal text / 3:1 large text & UI) ──
Computed via the standard relative-luminance formula (sRGB → linear →
0.2126R+0.7152G+0.0722B), (L1+0.05)/(L2+0.05):
Ink #14130F on Surface #FFFFFF (day message/title)........... 18.59:1
Paper #FFFFFF on Night Surface #141420 (night message/title).. 18.25:1
On-accent Ink #14130F on Flow Orange #FF6B35 (day Accept)..... 6.56:1
On-accent Ink #14130F on Night Accent #FF2E4C (night Accept).. 5.09:1
Muted Ink #6B6860 on Surface #FFFFFF (day descriptions)....... 5.56:1
Ink #14130F on Warm Canvas #F3EDE4 (manage-widget, day)....... 15.97:1
Success #137A47 on Surface #FFFFFF (day "Mereu activ")....... 5.38:1
Success #137A47 on Night Surface #141420 — FAILS at 3.39:1, so
night uses a lightened tint #1FA35C instead................ 5.61:1
Night Accent #FF2E4C on Night Surface #141420 (night link on
hover, decorative only — never the sole text colour)........ 4.99:1
Flow Orange (#FF6B35) is NEVER used as text colour here (2.84:1 on white,
confirmed insufficient in theme/style.css's own --on-accent comment) — it
is a fill only, matching DESIGN.md. All focus indicators use --ink (not
--accent) for the same reason: --ink clears 4.5:1+ in both modes, where
--accent measured only 2.44–2.84:1 against light-day surfaces (this
mirrors the newer, contrast-first --gfa-focus precedent in
assets/css/activities.css, not the older nav/lang-switch var(--accent)
outline pattern).
── Scope ────────────────────────────────────────────────────────────────────
Every selector below is namespaced under Complianz's own markup
(.cmplz-cookiebanner, #cmplz-manage-consent, #cmplz-cookiebanner-container).
Nothing outside those roots is touched.
========================================================================= */
/* ===== 1. Variable takeover — direct declarations beat inherited :root ===== */
.cmplz-cookiebanner,
#cmplz-manage-consent .cmplz-manage-consent {
/* Shell */
--cmplz_banner_width: 480px;
--cmplz_banner_background_color: var(--surface);
--cmplz_banner_border_color: var(--line);
--cmplz_banner_border_width: 1px;
--cmplz_banner_border_radius: 8px; /* DESIGN.md "Functional panels" */
--cmplz_banner_margin: 8px; /* DESIGN.md spacing scale — xs */
/* Typography */
--cmplz_title_font_size: 18px;
--cmplz_text_color: var(--ink);
--cmplz_hyperlink_color: var(--ink); /* Flow Orange fails 4.5:1 as text — see contrast ledger */
--cmplz_text_font_size: 14px;
--cmplz_link_font_size: 13px;
--cmplz_category_body_font_size: 13px;
--cmplz_category_header_title_font_size: 14px;
--cmplz_category_header_active_font_size: 12px;
/* Buttons — primary = Flow Orange fill + Ink text (DESIGN.md); secondary =
ghost/ink, matching .gf-btn-primary / .gf-btn-ghost in style.css */
--cmplz_button_border_radius: 6px; /* DESIGN.md "Controls" */
--cmplz_button_font_size: 13px;
--cmplz_button_accept_background_color: var(--accent);
--cmplz_button_accept_border_color: var(--on-accent);
--cmplz_button_accept_text_color: var(--on-accent);
--cmplz_button_deny_background_color: transparent;
--cmplz_button_deny_border_color: var(--ink);
--cmplz_button_deny_text_color: var(--ink);
--cmplz_button_settings_background_color: transparent;
--cmplz_button_settings_border_color: var(--ink);
--cmplz_button_settings_text_color: var(--ink);
/* "Mereu activ" (always-active) label — DESIGN.md Success, day value.
Night mode relights this to a lighter tint two rules down (day's
#137A47 only clears 3.39:1 on Night Surface — see contrast ledger). */
--cmplz_category_header_always_active_color: #137A47;
/* Category toggle switches. The day "on" fill uses Ink rather than Flow
Orange — same reasoning as the site's own .gf-mode-pill (day: Ink fill,
night: Accent fill): Flow Orange only clears 3:1 non-text contrast
against DARK surfaces, not against the light card backgrounds these
tracks sit on in day mode. Night mode below switches this to --accent,
which clears 4.99:1 against Night Surface. Bullet stays a fixed light
neutral (Paper) in both modes so it always reads against either track
colour. */
--cmplz_slider_active_color: var(--ink);
--cmplz_slider_inactive_color: var(--line);
--cmplz_slider_bullet_color: #FFFDF9;
/* Manage-consent floating pill sizing (>=44px tall tap target) */
--cmplz-manage-consent-height: 52px;
--cmplz-manage-consent-offset: -38px;
}
html[data-mode="night"] .cmplz-cookiebanner,
html[data-mode="night"] #cmplz-manage-consent .cmplz-manage-consent {
--cmplz_category_header_always_active_color: #1FA35C; /* 5.61:1 on Night Surface */
--cmplz_slider_active_color: var(--accent);
}
/* ===== 2. Direct overrides — properties Complianz doesn't expose as a var == */
.cmplz-cookiebanner {
font-family: var(--font-body) !important;
box-shadow: 0 20px 60px rgba(20, 19, 15, 0.18) !important;
}
html[data-mode="night"] .cmplz-cookiebanner {
box-shadow: 0 0 0 1px var(--accent), 0 20px 60px rgba(0, 0, 0, 0.55) !important;
}
.cmplz-cookiebanner .cmplz-title {
font-family: var(--font-display) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
.cmplz-cookiebanner .cmplz-close {
transition: color 0.15s ease, transform 0.15s ease;
}
.cmplz-cookiebanner .cmplz-close:hover {
transform: scale(1.08);
}
/* Category cards: replace Complianz's fixed rgba(239,239,239,.5) grey with
the theme's own subtle-surface token, so it stays correct in night mode
automatically instead of staying a flat light-grey card on a dark banner. */
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
background-color: var(--overlay) !important;
border: 1px solid var(--line) !important;
border-radius: 6px !important;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
font-family: var(--font-body) !important;
font-weight: 600 !important;
}
/* Description text is a secondary read — Muted Ink clears 4.5:1 (see ledger)
while visually stepping back from the primary message/title colour. */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
color: var(--mute) !important;
}
html[data-mode="night"] .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
color: rgba(255, 253, 249, 0.72) !important;
}
/* Chevron toggle icon: the rendered markup is an inline