/* =============================================================================
Be Safe Safety — Complianz cookie-consent banner restyle
-----------------------------------------------------------------------------
Repaints the default Complianz (complianz-gdpr) opt-in banner so it matches
the Be Safe Figma design: a full-width near-black bar pinned to the bottom,
a bold white headline + muted sub-line on the left, and three pill buttons on
the right — "Accept all" (white pill), "Manage preferences" + "Reject
non-essential" (dark outlined pills).
This is a STYLE-ONLY layer. Complianz's markup, classes and JS are untouched:
buttons keep their .cmplz-accept / .cmplz-deny / .cmplz-view-preferences
hooks so consent behaviour is unaffected.
Visual reference: elements/CookieBanner/default.css + html.twig (the BD port
of the Figma build). Colours/sizes come from assets/css/tokens.css.
Specificity strategy: every rule is anchored on the #cmplz-cookiebanner-
container ID (1,x,x), which out-specifies Complianz's own class-only banner
stylesheet (uploads/complianz/css/banner-1-optin.css) without !important.
!important is used only where Complianz sets the same property inline-equiv
via CSS custom properties that an ID selector still cannot override cleanly
(none required so far) — keep it that way.
============================================================================= */
/* ---------------------------------------------------------------------------
Container + bar
The Complianz banner is `.cmplz-cookiebanner` inside the container. On wide
screens its own stylesheet already pins it bottom / full-width via a grid;
we collapse that grid back to a single horizontal flex bar (text | buttons).
--------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
font-family: var(--font);
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: calc(100% - 2rem);
max-width: calc(var(--container-max) - 2rem);
margin: 0 auto 1rem;
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1.25rem;
background: var(--neutral-900);
color: var(--neutral-0);
border: 0;
border-radius: var(--radius);
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.28);
/* Neutralise Complianz's centered-card transform on narrow widths. */
transform: none;
top: auto;
}
/* ---------------------------------------------------------------------------
CRITICAL — keep Complianz's hide/dismiss states working.
The `display:flex` above is anchored on the #cmplz-cookiebanner-container ID,
so its specificity is (1,1,0). Complianz hides the banner with class-only
rules in its runtime stylesheet (uploads/complianz/css/banner-1-optin.css):
.cmplz-cookiebanner.cmplz-dismissed { display: none; } -> (0,2,0)
and the general cookieblocker stylesheet hides the not-yet-shown banner with:
.cmplz-hidden { display: none; } -> (0,1,0)
An ID selector (1,1,0) out-specifies BOTH, so once this restyle is loaded the
banner's `display` is permanently forced to `flex`. The consent JS still runs
and still writes the consent cookie + adds `.cmplz-dismissed`, but the banner
never visually disappears — to the user the buttons look dead ("clicking does
nothing"). GDPR-critical regression.
Fix: re-assert the hide at matching (1,2,0) / (1,2,0) specificity from inside
this stylesheet, so the restyle layer owns the dismiss behaviour instead of
silently overriding it. Functionality restored; the visual restyle is intact.
--------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-hidden {
display: none;
}
/* Complianz pins the banner with a centering transform under 1024px — undo it
so the bar stays a full-width strip on tablet/mobile too. */
@media (max-width: 1023px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner {
transform: none;
left: 0;
right: 0;
}
}
/* ---------------------------------------------------------------------------
Header — the Figma bar has no logo / title / close chrome. Complianz still
renders them; hide so only the message + buttons remain.
--------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-header,
#cmplz-cookiebanner-container .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-links.cmplz-documents,
#cmplz-cookiebanner-container .cmplz-links.cmplz-information {
display: none;
}
/* ---------------------------------------------------------------------------
Body + message
`.cmplz-body` holds the message and (when expanded) the category accordion.
In the slim bar it is just the left-hand text column.
--------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-body {
flex: 1 1 auto;
width: auto;
max-height: none;
overflow: visible;
display: block;
padding: 0;
margin: 0;
}
#cmplz-cookiebanner-container .cmplz-message {
margin: 0;
color: var(--neutral-0);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.45;
word-wrap: break-word;
}
#cmplz-cookiebanner-container .cmplz-message a {
color: var(--neutral-300);
text-decoration: underline;
}
/* ---------------------------------------------------------------------------
Two-tone message (Figma: bold white headline over a muted grey sub-line).
The banner message is stored in Complianz's banner settings (wp_cmplz_-
cookiebanners, fields message_optin/message_optout) as two spans:
… — line 1, headline
… — line 2, sub-line
Both survive Complianz's wp_kses() (cmplz_allowed_html()
permits span + class), so no PHP output filter is needed. Each span is set
to display:block so the two parts stack onto their own lines, matching the
bss-cookie-banner__main / __sub split in elements/CookieBanner/default.css.
--------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-message .cmplz-msg-lead {
display: block;
color: var(--neutral-0);
font-size: 0.875rem;
font-weight: 600;
line-height: 1.45;
}
#cmplz-cookiebanner-container .cmplz-message .cmplz-msg-sub {
display: block;
color: var(--neutral-400);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.45;
}
/* ---------------------------------------------------------------------------
Category accordion (shown only after "Manage preferences" is clicked, when
Complianz adds .cmplz-categories-visible). Repaint it onto the dark bar so
the expanded state stays on-brand. Layout stays Complianz's own.
--------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible {
flex-wrap: wrap;
}
#cmplz-cookiebanner-container .cmplz-categories {
width: 100%;
}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category {
background-color: rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
}
#cmplz-cookiebanner-container .cmplz-category-title,
#cmplz-cookiebanner-container .cmplz-description,
#cmplz-cookiebanner-container .cmplz-description span,
#cmplz-cookiebanner-container .cmplz-always-active {
color: var(--neutral-300);
}
#cmplz-cookiebanner-container .cmplz-category-title {
color: var(--neutral-0);
}
#cmplz-cookiebanner-container .cmplz-icon.cmplz-open svg path { fill: var(--neutral-300); }
/* ---------------------------------------------------------------------------
Buttons — pills on the right.
Complianz buttons (all four always exist in the DOM, see
complianz-gdpr/cookiebanner/templates/cookiebanner.php):
.cmplz-accept "Accept all"
.cmplz-deny "Reject non-essential"
.cmplz-view-preferences "Manage preferences"
.cmplz-save-preferences "Save preferences"
.cmplz-manage-options extra TCF/manage-options control
STATE MECHANISM — do NOT override it.
Complianz decides which buttons are visible per banner state:
* Default (collapsed) banner: its own banner-1-optin.css globally hides
`.cmplz-save-preferences` and `.cmplz-btn.cmplz-manage-options`
(`display:none`), leaving exactly three buttons —
.cmplz-accept / .cmplz-deny / .cmplz-view-preferences.
* Expanded preferences panel: when `.cmplz-view-preferences` is clicked,
complianz.js toggles INLINE styles — it hides .cmplz-view-preferences
and shows .cmplz-save-preferences (`display:block`).
Therefore this stylesheet must never set `display` on the shared
`.cmplz-btn` selector: an ID-anchored `display` would out-specify
Complianz's class-only `display:none` and force-show the preferences-only
buttons in the collapsed view. We only repaint each button (colour, pill
shape, padding) and let Complianz own show/hide entirely.
Mapped to Figma:
.cmplz-accept -> solid white pill ("Accept all")
.cmplz-view-preferences -> dark outlined pill ("Manage preferences")
.cmplz-deny -> dark outlined pill ("Reject non-essential")
--------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 0.5rem;
flex: 0 0 auto;
width: auto;
}
/* ---------------------------------------------------------------------------
Button order — match the Figma (elements/CookieBanner/html.twig):
1. Accept all 2. Manage preferences 3. Reject non-essential
Complianz emits a fixed DOM order inside .cmplz-buttons:
.cmplz-accept (1) · .cmplz-deny = "Reject" (2) · .cmplz-view-preferences
= "Manage" (3)
so we only swap deny and view-preferences visually with flexbox `order`.
This is presentation only — Complianz markup, classes and JS are untouched,
so tab order / consent behaviour stay exactly as Complianz defines them.
.cmplz-save-preferences keeps order:0 so, when it replaces view-preferences
in the expanded panel, it sits where "Manage preferences" was.
--------------------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept {
order: 1;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
order: 2;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny {
order: 3;
}
/* Pill styling only — intentionally NO `display` property here, so Complianz's
native per-state visibility (class `display:none` + JS inline toggle) keeps
working. `align-items`/`justify-content` only take effect once Complianz
itself makes the button a flex box, so they are harmless when it is hidden. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
align-items: center;
justify-content: center;
width: auto;
min-width: 0;
height: auto;
margin: 0;
padding: 0.75rem 1.25rem;
font-family: var(--font);
font-size: 1rem;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-align: center;
text-decoration: none;
border-radius: var(--radius-pill);
border: 1px solid transparent;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
opacity var(--t-fast) var(--ease);
}
/* The three buttons Complianz keeps visible in the default banner view get the
inline-flex layout. Targeting them individually (instead of `.cmplz-btn`)
means .cmplz-save-preferences / .cmplz-manage-options are never touched, so
Complianz's `display:none` on them is left to win in the collapsed view. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
display: inline-flex;
}
/* Save-preferences is hidden by Complianz until the panel is expanded, where
complianz.js sets `display:block` inline. Match that inline value so our
pill styling still applies once it becomes visible, without ever
force-showing it ourselves. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
align-items: center;
justify-content: center;
}
/* Solid white pill — "Accept all". */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept {
background: var(--neutral-0);
color: var(--neutral-900);
border-color: var(--neutral-0);
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
opacity: 0.9;
}
/* Dark outlined pills — "Manage preferences" + "Reject non-essential". */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
background: transparent;
color: var(--neutral-0);
border-color: var(--neutral-400);
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--neutral-300);
}
/* Keep focus visible for keyboard users (consent UI must stay accessible). */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:focus-visible {
outline: 2px solid var(--blue-500);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
The "Manage consent" revoke tab — keep it readable but unobtrusive; only its
colours are touched, position/animation stay Complianz's.
--------------------------------------------------------------------------- */
#cmplz-manage-consent .cmplz-manage-consent {
font-family: var(--font);
background-color: var(--neutral-900);
color: var(--neutral-0);
border: 0;
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
font-weight: 600;
}
/* ---------------------------------------------------------------------------
Mobile — stack text over buttons, buttons go full-width like the BD port.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
width: calc(100% - 1rem);
margin: 0 auto 0.5rem;
padding: 1rem;
}
#cmplz-cookiebanner-container .cmplz-buttons {
flex-direction: column;
align-items: stretch;
justify-content: stretch;
width: 100%;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
width: 100%;
}
}