/* --------------------------------------------------------------------------- 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, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { width: 100%; margin: 4px 0; } /* Bottom sheet on phones (Mira, 2026-09-25). Without this, Cookiebot's own sheet keeps the dialog a centred card (top:50% + translate) that covered 98% of a 375x667 screen, including the 57px sticky header and the menu button. The .CybotCookiebotDialogActive class and !important are what beat Cookiebot's runtime-injected sheet. The 72px keeps the header visible. */ #CybotCookiebotDialog.CybotCookiebotDialogActive { top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 72px) !important; /* keeps the 57px header visible */ border-radius: 12px 12px 0 0 !important; padding-bottom: env(safe-area-inset-bottom) !important; /* iPhone home bar */ } } /* Short screens: phones in landscape (Wren, 2026-09-25) -------------------- Reported by Jonathan on a real iPhone in landscape: the banner showed the header, tabs, body text and buttons, but would not scroll, so the four category toggles and the Details/About content could not be reached. What the DOM shows (Cookiebot 2.137.0, measured at 844x390 and 932x430): above 600px wide, Cookiebot's own layout applies. The four toggles sit in one row BELOW the body text, inside #CybotCookiebotDialogBody, and start below the fold. Three vertical scrollers are nested there: #CybotCookiebotDialogTabContent overflow:auto, does not overflow #CybotCookiebotDialogBody overflow:auto, overflows by ~94px #CybotCookiebotDialogBodyContent overflow:auto, does not overflow In landscape the body text fills the whole visible scroll area, so every swipe starts on the innermost scroller. iOS latches a touch to the scroller it starts in, and hands it on unreliably. In portrait the toggles are visible, so a swipe can start outside the inner scroller. That is why portrait worked. (The iOS part is inferred: Chromium and desktop WebKit both scroll the nested set. No Cookiebot or site JS blocks touch.) The fix, keyed on HEIGHT so desktop and portrait are untouched: 1. One scroller per tab. The active tab panel scrolls. The body text is plain content inside it, not a scroller of its own. 2. The dialog fits the visible height (dvh, with the % line as fallback). 3. Tighter header, tabs and footer, so the toggle row shows under the text and the visitor can see there is more. Two-ID selectors and !important are needed: Cookiebot's own rule is `#CybotCookiebotDialog #CybotCookiebotDialogBodyContent`, injected later. */ @media (max-height: 500px) { #CybotCookiebotDialog.CybotCookiebotDialogActive { max-height: calc(100% - 16px) !important; max-height: calc(100dvh - 16px) !important; } #CybotCookiebotDialog.CybotCookiebotDialogActive .CybotCookiebotDialogContentWrapper { min-height: 0 !important; max-height: 100% !important; } #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogHeader { padding: 0.5em 1em !important; flex: none !important; } #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogNav { flex: none !important; } #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink { padding: 0.6em 1em !important; } /* The tab area takes the space left over and does not scroll itself. */ #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogTabContent { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } /* The active panel is the one scroller. */ #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogTabContent .CybotCookiebotDialogTabPanel { min-height: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain !important; } /* The body text is content, not a nested scroller. */ #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogBodyContent { flex: none !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0.75em 0.625em !important; } /* Cookiebot's JS turns on a white fade over the bottom of the body text when it judges that box scrollable. With the box no longer a scroller the fade stays on and greys out the last lines of the text. Hide it here. */ #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogBodyContent .CybotCookiebotFader { display: none !important; } #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogBody .CybotCookiebotScrollContainer, #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogBody .CybotCookiebotScrollArea { max-height: none !important; height: auto !important; overflow: visible !important; } #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogBodyLevelButtonsSelectPane .CybotCookiebotDialogBodyLevelButtonWrapper { padding: 0.75em 1em !important; } /* Buttons stay pinned below the scroller. */ #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogFooter { flex: none !important; } #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogFooter .CybotCookiebotScrollArea { padding: 0.5em 1em !important; } #CybotCookiebotDialog.CybotCookiebotDialogActive #CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton { padding: 0.6em 1em !important; min-height: 44px !important; /* touch target floor */ } }