/* ────────────────────────────────────────────────────────────────────────── masser-cookiebot.css — shared mobile compaction overrides for the Cookiebot consent dialog (#CybotCookiebotDialog). The default Cookiebot dialog renders ~779px tall on a 390x844 viewport (~92% of the visible viewport). On a small device that is closer to a takeover than a banner — visitors cannot see the content underneath while the dialog is open, and a sceptical visitor may bounce. This stylesheet caps the visible dialog at ~22% of the viewport on any screen under 768px, while preserving every compliance guarantee the bigger layout provides: • Accept (Allow all), Allow selection, and Deny buttons are always on screen — none drop below the scroll fold. They render in a single row at the bottom of the dialog with identical sizing (flex: 1 1 0) so each carries equal visual weight. • Nothing is hidden. Title, intro, and any details affordances remain in the dialog body — they scroll inside the capped band (#CybotCookiebotDialogTabContent) rather than getting clipped. • Body text stays at 12.5–14px so legibility is not sacrificed for size; button text stays at 12px (single short label per button). Cookiebot ships its own !important rules, so every selector here is also flagged !important to win the cascade. Scoping is strict (#CybotCookiebot* IDs only, behind a max-width media query) so no page chrome outside the dialog is affected. Loaded from every Cookiebot-carrying page via . Keep the rules here only — no per-page copies. ────────────────────────────────────────────────────────────────────── */ /* ── Defensive visibility floor (every viewport). PECR + UK GDPR require that when a consent decision is needed, the dialog is genuinely surfaced to the visitor, not just present in the DOM. These guards stop any other stylesheet on the page (page-level overrides, browser extensions, stale CDN-cached versions of this stylesheet from an earlier deploy) leaving the dialog mounted but visually hidden via visibility: hidden or opacity: 0. Critical: we intentionally do NOT pin `display` here. Cookiebot uses display: none as its natural "dialog dismissed" state once the visitor clicks Allow / Deny, and we must not fight that — pinning display would block the dismiss behaviour. */ #CybotCookiebotDialog, #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper { visibility: visible !important; opacity: 1 !important; } @media (max-width: 767px) { /* ── Outer dialog: cap visible footprint, prevent the inner content from pushing it past the cap. Cookiebot wraps everything in a .CybotCookiebotDialogContentWrapper element underneath #CybotCookiebotDialog, so the flex column has to be applied to the wrapper as well as the dialog — that wrapper is the actual layout context for header / tab content / footer. */ #CybotCookiebotDialog { /* Pin to the bottom of the viewport. Cookiebot's default centred overlay (top: 50%; left: 50%; transform: translate(-50%, -50%)) lands the compact dialog right over the hero headline on a phone, so we override top + transform here and pin to the bottom edge instead. iOS Safari's bottom toolbar can occupy the lower ~34 px of the viewport, so add env(safe-area-inset-bottom) on top of the 8 px gap so the dialog never sits underneath the toolbar. left/right 8 px gives the small breathing room the design called for; width: auto + box-sizing: border-box lets the dialog stretch between the two anchors. */ position: fixed !important; top: auto !important; right: 8px !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; left: 8px !important; transform: none !important; margin: 0 !important; width: auto !important; max-height: 22vh !important; min-height: 0 !important; overflow: hidden !important; box-sizing: border-box !important; padding: 0 !important; } #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper { display: flex !important; flex-direction: column !important; max-height: 22vh !important; min-height: 120px !important; height: 100% !important; box-sizing: border-box !important; } /* Layout floor for the outer dialog too: roughly enough room for the header strip + one line of intro + the compact button row at our reduced sizes. Stops any layout edge case where the flex column ends up giving the dialog a 0-height box. */ #CybotCookiebotDialog { min-height: 120px !important; } /* ── Header (Cookiebot brand strip) — pinned, compact. */ #CybotCookiebotDialogHeader { padding: 4px 12px !important; flex-shrink: 0 !important; min-height: 0 !important; } #CybotCookiebotDialogHeaderLogosWrapper { height: auto !important; } /* ── Tab navigation (Consent / Details / About) — hidden on mobile. The action bar still surfaces the full Customize affordance and the body can still be scrolled. */ #CybotCookiebotDialogNav { display: none !important; } /* ── Middle scroll region. This is where the title, intro paragraph, and consent toggles render. We make it the scroll container so the footer (button bar) stays pinned even when content overflows. */ #CybotCookiebotDialogTabContent { flex: 1 1 auto !important; overflow-y: auto !important; overflow-x: hidden !important; min-height: 0 !important; padding: 6px 12px !important; -webkit-overflow-scrolling: touch !important; } #CybotCookiebotDialogBody { padding: 0 !important; max-width: none !important; width: 100% !important; } #CybotCookiebotDialogBodyContent { padding: 0 !important; margin: 0 !important; } #CybotCookiebotDialogBodyContentTitle { font-size: 13.5px !important; line-height: 1.3 !important; margin: 0 0 4px !important; padding: 0 !important; } #CybotCookiebotDialogBodyContentText { font-size: 12.5px !important; line-height: 1.4 !important; padding: 0 !important; } /* ── Consent toggle stack — zero out Cookiebot generous spacing so the four category checkboxes pack tightly when scrolled into view. */ #CybotCookiebotDialogBodyLevelWrapper, #CybotCookiebotDialogBodyLevelButtons, #CybotCookiebotDialogBodyLevelButtonsTable, #CybotCookiebotDialogBodyLevelButtonsRow, #CybotCookiebotDialogBodyLevelButtonsSelectPane, #CybotCookiebotDialogBodyFieldsetInnerContainer { padding: 0 !important; margin: 6px 0 0 !important; min-height: 0 !important; } #CybotCookiebotDialogBodyEdgeMoreDetailsLink { font-size: 12px !important; padding: 4px 0 !important; } /* ── Sticky bottom button bar. Cookiebot routes the action buttons into #CybotCookiebotDialogFooter via a nested scroll container, so we zero out the padding on every layer between the footer and the wrapper that actually holds the buttons. The wrapper itself then becomes a single-row flex container with three equal cells. */ #CybotCookiebotDialogFooter, #CybotCookiebotDialogFooter .CybotCookiebotScrollArea { flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; max-height: none !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } #CybotCookiebotDialogBodyButtons, #CybotCookiebotDialogBodyButtonsWrapper { flex-shrink: 0 !important; padding: 6px 10px !important; margin: 0 !important; gap: 6px !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: stretch !important; background: inherit !important; } /* Equal-sized action buttons. flex: 1 1 0 lets them divide the row evenly regardless of label length — Allow all / Allow selection / Deny each get 1/3 of the available width. min-width: 0 is required so labels can shrink rather than forcing a wrap. */ #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialogBodyLevelButtonCustomize, #CybotCookiebotDialogBodyButtonDecline { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: auto !important; min-height: 36px !important; padding: 9px 6px !important; font-size: 12px !important; line-height: 1.2 !important; letter-spacing: 0 !important; margin: 0 !important; border-radius: 4px !important; box-sizing: border-box !important; white-space: nowrap !important; } }