/* --------------------------------------------------------------------------- Cookiebot banner — searchHub CI overrides Ships through backend/ and is merged into deploy/ at build time. Never hand-edited into dist/ (handbook section 4.2). WHY THIS FILE EXISTS: Cookiebot's banner designer offers Theme (Light/Dark), Button style and a logo upload. It has no colour picker, no hex field, no font control and no custom-CSS box. Verified in the admin UI 2026-09-21 by inspecting the DOM for a colour input and for any mention of CSS — neither exists. Brand-exact therefore has to come from our own stylesheet. VERIFIED 2026-09-21 on the live banner: Cookiebot renders into the page's light DOM with the stable #CybotCookiebotDialog ids these selectors target. The shadow-DOM fallback is not needed. WHY EVERY DECLARATION IS !important — do not "clean this up". Cookiebot injects its own stylesheet into at RUNTIME, after this . On equal specificity the later sheet wins, so the first version of this file loaded correctly (14 rules, selectors matching real elements) and changed nothing: the accept button still computed to rgb(16, 50, 207) and the dialog font to sans-serif. Measured on /en/faq.html before the fix. !important is what outranks a runtime-injected sheet we do not control. Token values are read from the live /en/ stylesheet, not from memory. WHY "ALLOW ALL" IS NOT CORAL. Coral is the brand accent, but on a consent banner a red primary button signals "stop" on the button that means "yes" — the colour argues against the label. It also failed accessibility: white text on #e94749 is 3.84:1, below the 4.5:1 WCAG AA needs for normal text. The replacement is CALCULATED, not picked by eye. Coral #e94749 sits at hue 359.3 degrees. Its exact complement is 179.3 degrees — teal. Scanning that hue for a value that clears AA on white text gives #0f7e7c at 4.89:1. Complementary to the brand, affirmative rather than alarming, and legible. The three action colours and why each one: Allow all #0f7e7c teal, solid, white text 4.89:1 go / affirmative Deny #2b2d42 ink, solid, white text 13.49:1 neutral, NOT red — refusing is a legitimate choice, not an error state Allow selection white, ink border the middle path Both primary choices are solid, the same size and the same weight, so neither is visually favoured. That is a GDPR requirement, not a style preference. Colour-blind checked by simulation (protan / deutan / tritan): teal stays clearly separated from ink in every case (distance 104-116), so "Allow all" and "Deny" never converge. Coral and teal do converge under protanopia, which is exactly why coral is no longer used on a button — it now appears only as the active-tab underline and link colour, where nothing is being compared. HOVER DIRECTION: both solid buttons go LIGHTER on hover, never darker and never to a tint. Measured: Allow all 6.50 -> 5.09, Deny 13.49 -> 10.73, both still AA for white text. The base teal is deliberately a step darker than the lightest AA-passing value so that "lighter on hover" is possible at all -- lighter means less contrast against white text, and the previous base (#0f7e7c, 4.89:1) had no room above the 4.5 floor. Toggles: on = teal (same affirmative colour as Allow all), off = #6f7488, which clears 3:1 against the white knob for WCAG 1.4.11 non-text contrast. Cookiebot's default off-state is near-black (rgb(20,20,20)), which reads as heavier than the on-state and inverts the meaning. ELEMENT IDS ARE VERSION-SPECIFIC. These were read off the live banner (Cookiebot 2.137.0) on 2026-09-21, not guessed. Two ids in the first draft were wrong: the middle button is `...LevelButtonLevelOptinAllowallSelection` (lowercase "all"), not `...LevelButtonCustomize`, and the toggle did not match at all. Both are kept below alongside the real ones so a version change degrades rather than breaks. If Cookiebot renames things, re-read the ids from a live banner. --------------------------------------------------------------------------- */ #CybotCookiebotDialog { --sh-ink: #2b2d42; /* --ink-700 text, headings */ --sh-ink-soft: #6f7488; /* --neutral-500 legal small print */ --sh-coral: #e94749; /* --coral-500 BRAND ACCENT ONLY — links, active tab underline. Never a button fill here: see the note below. */ --sh-coral-dark: #d23a3c; /* --coral-600 */ --sh-go: #0c6967; /* affirmative action + "on". The exact complement of the brand coral: coral sits at H=359.3, this at H=178.9. Sits at 6.50:1 on white rather than the minimum, so the hover below can go LIGHTER and still clear AA. */ --sh-go-hover: #0f7b79; /* LIGHTER than base — 5.09:1, still AA */ --sh-ink-hover: #3a3c55; /* --ink-600, LIGHTER than ink — 10.73:1 */ --sh-off: #6f7488; /* --neutral-500 toggle "off" track */ --sh-surface: #ffffff; /* --neutral-000 */ --sh-hairline: #e1e4ea; /* --neutral-150 */ font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif !important; color: var(--sh-ink) !important; background: var(--sh-surface) !important; border-radius: 12px !important; /* --radius-lg */ box-shadow: 0 12px 28px rgba(27, 31, 48, .12), 0 4px 8px rgba(27, 31, 48, .05) !important; /* --shadow-lg */ font-size: 14px !important; /* --fs-sm */ line-height: 1.5 !important; /* --lh-normal */ } #CybotCookiebotDialog *, #CybotCookiebotDialog a { font-family: inherit; } #CybotCookiebotDialogBodyContentTitle, #CybotCookiebotDialogTabContent .CybotCookiebotDialogBodyLevelButtonDescription { color: var(--sh-ink) !important; font-weight: 600 !important; /* --fw-semibold */ } #CybotCookiebotDialogBodyContentText { color: var(--sh-ink-soft); } #CybotCookiebotDialog a, #CybotCookiebotDialogBodyContentText a { color: var(--sh-coral); } /* Primary action — "Allow all" ------------------------------------------- */ #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, #CybotCookiebotDialogBodyButtonAccept { background: var(--sh-go) !important; border: 1px solid var(--sh-go) !important; color: #ffffff !important; border-radius: 8px !important; /* --radius-md */ font-weight: 600 !important; } #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover, #CybotCookiebotDialogBodyButtonAccept:hover { background: var(--sh-go-hover) !important; border-color: var(--sh-go-hover) !important; } /* Secondary actions — "Deny" and "Allow selection" ------------------------ */ /* Deny carries the same visual weight as accept, minus the fill. Under GDPR a reject control that is quieter than the accept control is a dark pattern, and Cookiebot's own compliance checks flag it. Do not "tidy" this into a link. */ /* Deny — solid ink. Same weight as Allow all, different hue, never red. */ #CybotCookiebotDialogBodyButtonDecline, #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll { background: var(--sh-ink) !important; border: 1px solid var(--sh-ink) !important; color: #ffffff !important; border-radius: 8px !important; font-weight: 600 !important; } #CybotCookiebotDialogBodyButtonDecline:hover, #CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll:hover { background: var(--sh-ink-hover) !important; border-color: var(--sh-ink-hover) !important; } /* Allow selection — the middle path, outlined. */ #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialogBodyLevelButtonCustomize { background: var(--sh-surface) !important; border: 1px solid var(--sh-ink) !important; color: var(--sh-ink) !important; border-radius: 8px !important; font-weight: 600 !important; } /* Only the OUTLINED button gets the light tint. Deny must never appear here: it is a solid button with white text, so a near-white hover makes it vanish. That shipped on 2026-09-21 — Deny had two hover rules, and this one came later with equal specificity, so it won. Reported by Jonathan: "hovering over 'deny' goes to all white, the button disappears." Keep these selector lists disjoint. */ #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover, #CybotCookiebotDialogBodyLevelButtonCustomize:hover { background: #f3f3f7 !important; /* --ink-050 */ border-color: var(--sh-ink) !important; } /* Structure --------------------------------------------------------------- */ #CybotCookiebotDialogNav, #CybotCookiebotDialogDetailBodyContentCookieContainerTypes, #CybotCookiebotDialogBodyEdgeMoreDetails { border-color: var(--sh-hairline); } #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive { border-bottom-color: var(--sh-coral) !important; color: var(--sh-ink) !important; } /* Toggles ----------------------------------------------------------------- */ /* The `[data-target]` form in the first draft matched nothing on Cookiebot 2.137.0 — the checked slider stayed rgb(16, 50, 207). Measured on the live banner. Match on the checkbox alone, which is stable across versions. */ #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider { background-color: var(--sh-off) !important; } #CybotCookiebotDialog input[type="checkbox"]:checked + .CybotCookiebotDialogBodyLevelButtonSlider, #CybotCookiebotDialog input[type="checkbox"]:checked ~ .CybotCookiebotDialogBodyLevelButtonSlider { background-color: var(--sh-go) !important; } /* "Necessary" is on and locked. Muted so it reads as fixed, not switchable. */ #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSliderWrapperDisabled input[type="checkbox"]:checked + .CybotCookiebotDialogBodyLevelButtonSlider { background-color: var(--sh-go) !important; opacity: 0.45 !important; } /* Focus ring — keyboard users must see this clearly ----------------------- */ #CybotCookiebotDialog button:focus-visible, #CybotCookiebotDialog a:focus-visible, #CybotCookiebotDialog input:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(233, 71, 73, .28) !important; /* --shadow-focus */ } /* Phone ------------------------------------------------------------------- */ @media (max-width: 600px) { #CybotCookiebotDialog { border-radius: 12px 12px 0 0; font-size: 14px; } #CybotCookiebotDialogBodyButtonDecline, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, #CybotCookiebotDialogBodyLevelButtonCustomize { width: 100%; margin: 4px 0; } }