/* Feonix × Cookiebot — brand override stylesheet (Phase 2H.1) * * Loaded in on every public HTML page after the Cookiebot uc.js * script. Cookiebot ships with hard-coded inline styles + an internal * stylesheet, so most properties need !important to win the cascade. * * Selector set is the documented Cookiebot stable family * (#CybotCookiebotDialog…, .CybotCookiebot…). These have been stable * across Cookiebot installs for years. If a selector misses on the live * banner, devtools-inspect the rendered DOM and patch in place — the * Cookiebot script generates DOM at runtime via string concatenation, * so the source can't be statically inspected. * * Brand tokens (mirrored from privacy.html / index.html style blocks): * --feonix-dark: #17121F * --feonix-mid: #52485E * --feonix-rg-mid: #8B6842 (rose-gold mid — primary button) * --feonix-rg-dark: #885030 (rose-gold dark — hover) * --feonix-cream: #F7F3EF (background) * --feonix-border: #DDD6CF * * ICO compliance: Allow / Selection / Deny buttons all sized + weighted * equally so "Reject" is as prominent as "Accept" (UK ICO guidance). * * Cookiebot logo: opacity reduced to 0.4 (free-tier ToS requires it * remain visible — we don't hide it, just dial down visual prominence). */ /* ────────────────────────────────────────────────────────── Hide the persistent floating widget (Phase 2H.2) ────────────────────────────────────────────────────────── Cookiebot's floating "Cookie settings" mini-panel is visually intrusive on a premium clinic site. The footer "Cookie settings" link (with data-cookieconsent="renew") replaces it — accessible when needed, invisible when not. Defensive selectors: Cookiebot's widget DOM has shipped under different IDs/classes across versions. Hit all known variants. */ #CookiebotWidget, .CookiebotWidget, #CybotCookiebotDialogBodyButtonClose ~ #CookiebotWidget, [class*="CookiebotWidget"], [id*="CookiebotWidget"] { display: none !important; } /* ────────────────────────────────────────────────────────── Custom property scope (everything resolves inside dialog) ────────────────────────────────────────────────────────── */ #CybotCookiebotDialog, #CybotCookiebotDialogBodyUnderlay { --feonix-dark: #17121F; --feonix-mid: #52485E; --feonix-muted: #6B6478; --feonix-rg-mid: #8B6842; --feonix-rg-dark: #885030; --feonix-rg-light: #F4BF9D; --feonix-cream: #F7F3EF; --feonix-border: #DDD6CF; } /* ────────────────────────────────────────────────────────── Container / dialog ────────────────────────────────────────────────────────── */ #CybotCookiebotDialog { background: var(--feonix-cream) !important; border: 1px solid var(--feonix-border) !important; border-radius: 4px !important; box-shadow: 0 8px 32px rgba(23, 18, 31, 0.12) !important; font-family: 'Montserrat', Arial, sans-serif !important; color: var(--feonix-dark) !important; max-width: 720px !important; padding: 32px !important; } /* Cookiebot uses #CybotCookiebotDialogBodyUnderlay as the page-dim layer when the dialog is shown as a modal. Soften it. */ #CybotCookiebotDialogBodyUnderlay { background: rgba(23, 18, 31, 0.32) !important; } /* ────────────────────────────────────────────────────────── Typography — heading + body copy ────────────────────────────────────────────────────────── */ #CybotCookiebotDialogBodyContentTitle, #CybotCookiebotDialogDetailBodyContentTextOverviewLangDirRTL, #CybotCookiebotDialogDetailBodyContentCookieTypeIntro, .CybotCookiebotDialogBodyEdgeMoreInfoLink, #CybotCookiebotDialog h2, #CybotCookiebotDialog h3 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; color: var(--feonix-dark) !important; letter-spacing: 0.01em !important; } #CybotCookiebotDialogBodyContentTitle { font-size: 24px !important; line-height: 1.25 !important; margin-bottom: 12px !important; } #CybotCookiebotDialogBodyContentText, #CybotCookiebotDialog p, #CybotCookiebotDialog li, #CybotCookiebotDialog td, #CybotCookiebotDialog th { font-family: 'Montserrat', Arial, sans-serif !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--feonix-dark) !important; } #CybotCookiebotDialog a, #CybotCookiebotDialogBodyContentText a { color: var(--feonix-rg-dark) !important; text-decoration: underline !important; } #CybotCookiebotDialog a:hover { color: var(--feonix-dark) !important; } /* ────────────────────────────────────────────────────────── Tabs — Consent / Details / About ────────────────────────────────────────────────────────── */ #CybotCookiebotDialogNav, #CybotCookiebotDialogTabContent { border-bottom: 1px solid var(--feonix-border) !important; } .CybotCookiebotDialogNavItemLink, #CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink { font-family: 'Montserrat', Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--feonix-muted) !important; padding: 12px 4px !important; border-bottom: 2px solid transparent !important; background: transparent !important; transition: color 0.15s, border-color 0.15s !important; } .CybotCookiebotDialogNavItemLink:hover { color: var(--feonix-dark) !important; } .CybotCookiebotDialogNavItemLink[aria-selected="true"], .CybotCookiebotDialogActive { color: var(--feonix-dark) !important; border-bottom-color: var(--feonix-rg-mid) !important; } /* ────────────────────────────────────────────────────────── Buttons — equal weight per ICO guidance ────────────────────────────────────────────────────────── */ .CybotCookiebotDialogBodyButton, #CybotCookiebotDialogBodyLevelButtonAccept, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection, #CybotCookiebotDialogBodyLevelButtonCustomize, #CybotCookiebotDialogBodyButtonDecline, #CybotCookiebotDialogBodyLevelButtonDecline, #CybotCookiebotDialogBodyButtonsWrapper button { font-family: 'Montserrat', Arial, sans-serif !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 14px 24px !important; border-radius: 1px !important; cursor: pointer !important; min-height: 44px !important; transition: background 0.2s, color 0.2s, border-color 0.2s !important; margin: 4px !important; line-height: 1.2 !important; } /* Primary — Allow all */ #CybotCookiebotDialogBodyLevelButtonAccept, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { background: var(--feonix-rg-mid) !important; color: #FFFFFF !important; border: 1px solid var(--feonix-rg-mid) !important; } #CybotCookiebotDialogBodyLevelButtonAccept:hover, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover { background: var(--feonix-rg-dark) !important; border-color: var(--feonix-rg-dark) !important; } /* Secondary — Allow selection */ #CybotCookiebotDialogBodyLevelButtonCustomize, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { background: #FFFFFF !important; color: var(--feonix-rg-mid) !important; border: 1px solid var(--feonix-rg-mid) !important; } #CybotCookiebotDialogBodyLevelButtonCustomize:hover, #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover { background: var(--feonix-rg-mid) !important; color: #FFFFFF !important; } /* Tertiary — Deny / Reject (must be as prominent as Accept per ICO) */ #CybotCookiebotDialogBodyButtonDecline, #CybotCookiebotDialogBodyLevelButtonDecline { background: transparent !important; color: var(--feonix-dark) !important; border: 1px solid var(--feonix-border) !important; } #CybotCookiebotDialogBodyButtonDecline:hover, #CybotCookiebotDialogBodyLevelButtonDecline:hover { background: var(--feonix-cream) !important; border-color: var(--feonix-rg-mid) !important; color: var(--feonix-rg-dark) !important; } /* Button row layout */ #CybotCookiebotDialogBodyButtonsWrapper, .CybotCookiebotDialogBodyBottomWrapperButtons { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: stretch !important; } /* ────────────────────────────────────────────────────────── Toggle switches — Necessary / Preferences / Statistics / Marketing ────────────────────────────────────────────────────────── */ .CybotCookiebotDialogBodyLevelButtonSliderWrapper { background: transparent !important; } .CybotCookiebotDialogBodyLevelButtonSlider { background: var(--feonix-border) !important; border-radius: 12px !important; transition: background 0.2s !important; } input.CybotCookiebotDialogBodyLevelButton:checked + .CybotCookiebotDialogBodyLevelButtonSlider, .CybotCookiebotDialogBodyLevelButtonWrapper input:checked ~ .CybotCookiebotDialogBodyLevelButtonSlider { background: var(--feonix-rg-mid) !important; } .CybotCookiebotDialogBodyLevelButtonSlider:before { background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(23, 18, 31, 0.18) !important; transition: transform 0.2s !important; } .CybotCookiebotDialogBodyLevelButtonDescription, .CybotCookiebotDialogBodyLevelButtonLabel { font-family: 'Montserrat', Arial, sans-serif !important; font-size: 13px !important; color: var(--feonix-dark) !important; } /* ────────────────────────────────────────────────────────── Cookiebot branding — keep visible (free-tier ToS), reduce prominence ────────────────────────────────────────────────────────── */ #CybotCookiebotDialogPoweredbyCybot, #CybotCookiebotDialogPoweredByText { opacity: 0.4 !important; font-size: 10px !important; } #CybotCookiebotDialogPoweredbyImage { opacity: 0.4 !important; max-height: 14px !important; width: auto !important; } /* ────────────────────────────────────────────────────────── Tables — cookie list in Details panel ────────────────────────────────────────────────────────── */ #CybotCookiebotDialog table, #CybotCookiebotDialogDetail table { border-collapse: collapse !important; width: 100% !important; } #CybotCookiebotDialog table th { font-family: 'Montserrat', Arial, sans-serif !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--feonix-rg-mid) !important; border-bottom: 1px solid var(--feonix-border) !important; padding: 12px 8px !important; text-align: left !important; } #CybotCookiebotDialog table td { font-size: 13px !important; padding: 10px 8px !important; border-bottom: 1px solid var(--feonix-border) !important; } /* ────────────────────────────────────────────────────────── Close button ────────────────────────────────────────────────────────── */ .CybotCookiebotDialogBodyButtonClose, #CybotCookiebotDialogClose { color: var(--feonix-muted) !important; opacity: 0.7 !important; } .CybotCookiebotDialogBodyButtonClose:hover { color: var(--feonix-dark) !important; opacity: 1 !important; } /* ────────────────────────────────────────────────────────── CookieDeclaration table on privacy.html#cookies (Cookiebot's