/* ========================================================================== eG Innovations — fully custom Cookiebot consent UI (live) -------------------------------------------------------------------------- Load with a in BEFORE the Cookiebot script tag, so the suppression rule is parsed before Cookiebot can paint its own dialog. Pair with eg-cookie-consent-live.js. Scoped entirely to .egc-* class names plus the two Cookiebot dialog ids — no body, no resets, no font-family, so the host site's typography wins. ========================================================================== */ :root { --egc-surface: #ffffff; --egc-ink: #000000; /* titles, active tab, primary button */ --egc-muted: #777169; /* body copy */ --egc-subtle: #a59f97; /* inactive tab, idle speaker, locked toggle */ --egc-line: #ebe8e4; /* borders, toggle track */ --egc-underline: #d7d2cc; /* link underlines */ --egc-accent: #000000; /* active toggle */ --egc-btn-solid: #000000; /* primary button */ --egc-btn-solid-hover: #44403b; --egc-ghost-hover: #fdfcfc; --egc-focus: #2b7fff; --egc-radius: 20px; --egc-shadow: 0 0 1px 0 rgba(0, 0, 0, .4), 0 2px 4px 0 rgba(0, 0, 0, .04), 0 6px 16px 0 rgba(0, 0, 0, .04); --egc-raised: 0 0 0 .5px rgba(0, 0, 0, .1), 0 1px 1px 0 rgba(0, 0, 0, .04), 0 2px 4px 0 rgba(0, 0, 0, .04); --egc-ease: cubic-bezier(.4, 0, .2, 1); } /* This build replaces Cookiebot's dialog entirely, so it stays suppressed for the whole session. Consent still flows through the official API, and data-blockingmode="auto" keys off consent state, not dialog visibility. */ html.egc-suppress #CybotCookiebotDialog, html.egc-suppress #CybotCookiebotDialogBodyUnderlay { display: none !important; } /* Cookiebot's own widget icon is replaced by this UI. Cleanest is to switch the widget off in Cookiebot Manager > Banner > Widget; this rule covers it when the widget is left enabled. Guarded by egc-suppress, so if our script never takes over (Cookiebot blocked, script error) the widget comes back rather than leaving the visitor with no way to reach consent settings. */ html.egc-suppress #CookiebotWidget { display: none !important; } /* ---------- floating settings button (post-consent) ----------------------- */ .egc-fab { display: none !important; /* reopening is handled by the footer link */ position: fixed; left: 24px; bottom: 24px; z-index: 2147482000; width: 48px; height: 48px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--egc-accent); color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, background-color .15s ease; } .egc-fab[hidden] { display: none; } .egc-fab.is-visible { opacity: 1; transform: translateY(0); } /* Hidden host for the official Cookie Declaration we read cookie data from. Kept off-screen at a realistic width rather than clipped to 1px, so the declaration renders its tables normally and stays parseable. */ .egc-declaration-source { position: fixed !important; left: -10000px; top: 0; width: 1200px; height: 1px; overflow: hidden; pointer-events: none; } /* ---------- card ---------------------------------------------------------- */ .egc { isolation: isolate; box-sizing: border-box; position: fixed; left: 16px; bottom: 16px; right: auto; z-index: 2147483645; width: 500px; max-width: calc(100% - 40px); background: var(--egc-surface); color: var(--egc-ink); border-radius: var(--egc-radius); box-shadow: var(--egc-shadow); letter-spacing: .01em; -webkit-font-smoothing: antialiased; /* Keeps content inside the rounded corners and, with max-height below, stops a long category list pushing the card past the viewport. */ overflow: hidden; /* Always a column, in BOTH views. If this only applied while the settings class was on, removing it on close would drop the action bar out of the flex layout and snap it up to the short notice height while the card was still animating down. */ display: flex; flex-direction: column; opacity: 0; transform: translateY(28px); /* Slides up on open, reverses on close. The transform runs longer than the fade and uses an ease-out curve, so it decelerates into place instead of stopping flat. Compositor-only properties: no layout work per frame. */ transition: opacity .3s var(--egc-ease), transform .42s cubic-bezier(.16, 1, .3, 1); will-change: transform, opacity; backface-visibility: hidden; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 6px 16px 0px; } .egc *, .egc *::before, .egc *::after { box-sizing: border-box; } .egc[hidden] { display: none; } .egc.is-visible { opacity: 1; transform: translateY(0); } /* The card is focused programmatically on open so screen readers announce it, but it is a container, not a control — the ring would just outline the whole card. Every interactive child keeps its own :focus-visible outline. */ .egc:focus, .egc:focus-visible { outline: none; } /* Added only while the card is resizing between views, so height is animated deliberately rather than on every open. Heights are measured in JS; auto cannot be transitioned. */ .egc--morphing { transition: opacity .3s var(--egc-ease), transform .42s cubic-bezier(.16, 1, .3, 1), height .38s cubic-bezier(.16, 1, .3, 1); } /* Incoming view / tab panel fades and lifts into place as the card resizes. */ @keyframes egcEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .egc__view--enter { animation: egcEnter .3s cubic-bezier(.16, 1, .3, 1) both; } .egc--settings { height: auto; /* Capped well below the viewport so the list scrolls instead of the card growing to fit every category. */ max-height: min(520px, calc(100vh - 32px)); } /* The visible view fills whatever height the card currently has, so the action bar stays pinned to the bottom edge for the whole morph — growing on open and shrinking on close alike. */ .egc__view[hidden] { display: none; } .egc__view:not([hidden]) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } /* ---------- compact notice ------------------------------------------------ */ /* The 16px bottom padding here is the whole gap down to the action bar — the bar itself has no top padding, matching the reference footer. */ .egc__notice { padding: 16px 20px 16px; text-align: justify;} /* Title left, speaker toggle pinned right. */ .egc__head { display: flex; justify-content: space-between; align-items: center; align-self: stretch; gap: 12px; } .egc__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--egc-ink); } .egc__text { margin: 0px 0 0; font-size: 14px; font-weight: 400; line-height: 21px; color: var(--egc-muted); text-wrap: pretty; } .egc__text a, .egc__about a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--egc-underline); transition: text-decoration-color 150ms var(--egc-ease); } .egc__text a:hover, .egc__about a:hover { text-decoration-color: currentColor; } /* On/off is conveyed by colour: subtle when idle, black while speaking. */ .egc__sound { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--egc-subtle); cursor: pointer; transition: color 150ms var(--egc-ease); } .egc__sound svg { width: 20px; height: 20px; } .egc__sound:hover { color: var(--egc-muted); } .egc__sound[aria-pressed="true"] { color: var(--egc-ink); } .egc__spacer { margin-left: auto; } /* ---------- buttons ------------------------------------------------------- */ .egc-btn { display: inline-flex; height: 40px; padding: 0 16px; justify-content: center; align-items: center; border: 0; border-radius: 9999px; font: inherit; font-size: 15px; font-weight: 400; line-height: normal; letter-spacing: normal; cursor: pointer; white-space: nowrap; overflow: clip; transition: background-color 150ms var(--egc-ease); } .egc-btn:active, .egc-icon-btn:active { transform: scale(.98); } .egc-btn--ghost { background: var(--egc-surface); color: var(--egc-ink); box-shadow: var(--egc-raised); } .egc-btn--ghost:hover { background: var(--egc-ghost-hover); } .egc-btn--solid { background: var(--egc-btn-solid); color: #fff; } .egc-btn--solid:hover { background: var(--egc-btn-solid-hover); } /* Circular, and the same height as .egc-btn so the row lines up. */ .egc-icon-btn { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9999px; background: var(--egc-surface); color: var(--egc-ink); box-shadow: var(--egc-raised); cursor: pointer; transition: background-color 150ms var(--egc-ease); } .egc-icon-btn:hover { background: var(--egc-ghost-hover); } .egc-icon-btn svg { width: 20px; height: 20px; } .egc-btn:focus-visible, .egc-icon-btn:focus-visible, .egc-fab:focus-visible, .egc__sound:focus-visible, .egc__tab:focus-visible, .egc__details-toggle:focus-visible, .egc__switch:focus-visible { outline: 1.5px solid var(--egc-focus); outline-offset: 2px; } /* ---------- settings view ------------------------------------------------- */ /* Lives inside .egc__scroll so it scrolls away with the list — the scroll container supplies the horizontal padding, so there is none here. */ .egc__tabs { display: flex; align-items: center; gap: 20px; padding: 18px 0 0px; } .egc__tab { font: inherit; font-size: 16px; font-weight: 600; line-height: 24px; background: none; border: 0; padding: 0; color: var(--egc-subtle); cursor: pointer; transition: color 150ms var(--egc-ease); } .egc__tab:hover { color: var(--egc-muted); } .egc__tab[aria-selected="true"] { color: var(--egc-ink); } .egc__scroll { flex: 1; /* Without this a flex item refuses to shrink below its content height, so the list would push the card past its max-height instead of scrolling. */ min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */ /* No top padding — the tab row inside supplies it. */ padding: 0 20px 36px; } /* 12px here + the tabs' 12px bottom padding = a 24px gap between the header row and the first category. */ .egc__scroll > .egc__panel, .egc__scroll > .egc__about { margin-top: 12px; } .egc__group + .egc__group { margin-top: 24px; } /* Categories ease in as they enter the scroll viewport. The class is applied from JS only once IntersectionObserver is confirmed available, so a browser without it never ends up with permanently invisible content. */ .egc__group--reveal { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1); } .egc__group--reveal.is-in { opacity: 1; transform: none; } .egc__group-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 0px; } .egc__group-name { margin: 4px 0; /* optically centres the name against the toggle */ font-size: 15px; font-weight: 400; line-height: 22px; font-family: 'GraphikRegular'; color: var(--egc-ink); } .egc__group-desc { margin: 0; font-size: 14px; font-weight: 400; line-height: 21px; color: var(--egc-muted); text-wrap: pretty; } .egc__details-toggle { font: inherit; background: none; border: 0; padding: 0; margin-left: 4px; color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--egc-underline); transition: text-decoration-color 150ms var(--egc-ease); cursor: pointer; white-space: nowrap; } .egc__details-toggle:hover { text-decoration-color: currentColor; } /* ---------- switch -------------------------------------------------------- */ .egc__switch { flex: none; margin-left: auto; width: 32px; height: 20px; padding: 0; border: 0; border-radius: 9999px; background: var(--egc-line); cursor: pointer; position: relative; box-shadow: none; transition: background .15s var(--egc-ease); } /* Knob inset 2px on every side: 32 - 2 - 16 - 2 = 12px of travel, so the gap on the right when checked matches the gap on the left when unchecked. */ .egc__switch::after { content: ""; position: absolute; top: 1.7px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s var(--egc-ease); will-change: transform; } .egc__switch[aria-checked="true"] { background: var(--egc-accent); } .egc__switch[aria-checked="true"]::after { transform: translateX(12px); } .egc__switch[disabled] { background: var(--egc-subtle); cursor: not-allowed; } /* ---------- cookie details ------------------------------------------------ */ .egc__details { margin-top: 16px; border: 1px solid var(--egc-line); border-radius: 10px; /* border-box lets the JS animate height straight to scrollHeight, which already includes padding and border. */ box-sizing: border-box; } .egc__details[hidden] { display: none; } .egc__cookie { padding: 14px; /* reference uses 1em at a 14px font size */ font-size: 14px; line-height: 21px; color: var(--egc-muted); word-break: break-word; } .egc__cookie + .egc__cookie { border-top: 1px solid var(--egc-line); } .egc__cookie-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px 16px; } .egc__field-label { margin: 0; font-size: 12px; font-weight: 400; line-height: 17px; color: var(--egc-ink); } .egc__field-value { margin: 0; font-size: 14px; line-height: 21px; color: var(--egc-muted); overflow-wrap: anywhere; } .egc__cookie-purpose { margin: 14px 0 0; font-size: 14px; line-height: 21px; color: var(--egc-muted); } .egc__details-empty { margin: 0; padding: 16px; font-size: 14px; line-height: 21px; color: var(--egc-muted); } /* ---------- about tab ----------------------------------------------------- */ .egc__about p { margin: 0 0 12px; font-size: 14px; line-height: 21px; color: var(--egc-muted); text-wrap: pretty; } .egc__about p:last-child { margin-bottom: 0; } /* ---------- action bar ---------------------------------------------------- */ /* Shared by both views and never rebuilt, so the buttons hold their position while the card morphs between notice and settings. */ .egc__bar { position: relative; display: flex; align-items: center; align-self: stretch; flex: none; gap: 12px; margin-top: auto; /* No top padding: the view above supplies the gap. Matches the reference footer's `0 1.25rem 1.25rem`. */ padding: 0 20px 20px; background: var(--egc-surface); z-index: 1; } .egc__btn-label { display: inline-block; } .egc__btn-icon { display: inline-flex; align-items: center; justify-content: center; will-change: transform, opacity; } /* Fades the scrolling list out as it passes under the bar, instead of cutting it off at a hard edge. Sits above the scroll area, click-through. */ .egc--settings .egc__bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; pointer-events: none; background: linear-gradient(to top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, .987) 8.1%, hsla(0, 0%, 100%, .951) 15.5%, hsla(0, 0%, 100%, .896) 22.5%, hsla(0, 0%, 100%, .825) 29%, hsla(0, 0%, 100%, .741) 35.3%, hsla(0, 0%, 100%, .648) 41.2%, hsla(0, 0%, 100%, .55) 47.1%, hsla(0, 0%, 100%, .45) 52.9%, hsla(0, 0%, 100%, .352) 58.8%, hsla(0, 0%, 100%, .259) 64.7%, hsla(0, 0%, 100%, .175) 71%, hsla(0, 0%, 100%, .104) 77.5%, hsla(0, 0%, 100%, .049) 84.5%, hsla(0, 0%, 100%, .013) 91.9%, hsla(0, 0%, 100%, 0) 100%); } /* ---------- responsive ---------------------------------------------------- */ @media (max-width: 639px) { .egc { right: 12px; bottom: 12px; max-width: calc(100% - 24px); } .egc--settings { max-height: min(520px, calc(100vh - 24px)); } .egc__notice { padding: 20px 16px 16px; } .egc__tabs { padding: 20px 0 12px; } .egc__scroll { padding: 0 16px 28px; } .egc__bar { padding: 0 16px 16px; gap: 8px; } .egc-btn { height: 36px; padding: 0 14px; font-size: 14px; } .egc-icon-btn { width: 36px; height: 36px; } .egc__cookie-grid { grid-template-columns: 1fr; gap: 12px; } .egc-fab { left: 12px; bottom: 12px; } } @media (prefers-reduced-motion: reduce) { .egc, .egc--morphing, .egc__switch, .egc__switch::after, .egc__details, .egc__group--reveal { transition: none !important; animation: none !important; } .egc__view--enter { animation: none !important; } .egc__group--reveal { opacity: 1; transform: none; } .egc__scroll { scroll-behavior: auto; } .egc-btn:active, .egc-icon-btn:active { transform: none; } }