/* ========================================================================= frega-cookie.css - the cookie-consent banner, matched to frega.co.uk SHARED FILE (UI-26). Linked by defaultFregaCom.master (S2T) and duw.master (the Hub). Extracted from s2t-theme.css so both surfaces share ONE source of truth - a copy would drift. Owner, 2026-07-17: "we need to update the cookie notification at the bottom to match the frega.co.uk one". Derived from the LIVE site, not from memory: frega.co.uk runs the SAME cookieconsent library from the same path, with identical markup, copy, Learn-more href and controls. The only delta was colour - the masters hardcoded a "palette" of #1d8a8a teal + a #62ffaa outline button, neither in the MASTER palette. So this is a RE-THEME, not a port. Ported from frega's main-components.css with --clr-* -> --s2t-* ; every value is identical because S2T's tokens are already the same green family (--s2t-brand-strong == --clr-teal-dark == #136242). !! SELF-SUFFICIENT VIA FALLBACKS. duw.master (the Hub) does NOT load s2t-theme.css, so NONE of the --s2t-* tokens are defined there. Every var() below therefore carries its S2T value as a fallback so the banner renders identically on any master. If you add a token here, give it a fallback or it goes silently inert off-S2T (the three that once lacked one - --s2t-font, --s2t-dur-standard, --s2t-ease-standard - are now covered). !! PALETTE MUST STAY OUT of each master's initialise(). A palette block generates an inline cc-color-override-- class that SILENTLY OUTRANKS everything below. Removed from BOTH masters as part of UI-26. The library's own CSS carries zero colour (verified on our copy), so this block is the only source of the banner's appearance. !! SPECIFICITY / LOAD-ORDER TRAP: cookieconsent.min.css is ed BEFORE this file on both masters, so an equal-specificity rule here would win on order - but every selector below is ALSO deliberately over-specified to outrank the library regardless of order. Do NOT "simplify" them: - library .cc-revoke,.cc-window (0,1,0) -> .cc-window.cc-banner (0,2,0) - library .cc-window.cc-banner (0,2,0) -> body .cc-window.cc-banner (0,2,1) (a (0,2,0) rule here silently loses and you get 28.8px padding) - library .cc-link:visited (0,2,0) -> .cc-window.cc-banner .cc-link:visited (0,3,0) Consent BEHAVIOUR is untouched: same message, same href, position:bottom, static:false, same cookieconsent_status cookie. This is colour only. ========================================================================= */ /* The panel. Frosted glass needs backdrop-filter; without it a translucent panel over arbitrary page content cannot guarantee the white text's 4.5:1, so the no-support fallback is the OPAQUE brand green. Built on --s2t-brand-strong (#136242), NOT --s2t-brand (#4A8A68): white on the lighter green fails AA for body copy. Do not "brighten" this. */ body .cc-window.cc-banner { background: var(--s2t-brand-strong, #136242); color: #fff; font-family: var(--s2t-font, 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); padding: 16px 24px; /* needs the `body` prefix - see the load-order note */ gap: 16px; border-top: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 -2px 12px rgba(0, 0, 0, .10); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { body .cc-window.cc-banner { background: rgba(19, 98, 66, .85); /* = --s2t-brand-strong @ 85%; a hex token cannot live inside rgba() */ -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } } .cc-window.cc-banner .cc-message { font-size: 14px; line-height: 1.5; color: #fff; margin-right: 16px; } /* "Learn more". The library ships opacity:.8 (dilutes contrast) and .cc-link:visited{color:initial} - which would render a visited link BLACK on the green panel. Both are outranked here at (0,3,0). */ .cc-window.cc-banner .cc-link, .cc-window.cc-banner .cc-link:visited, .cc-window.cc-banner .cc-link:active { color: #fff; opacity: 1; text-decoration: underline; text-underline-offset: 2px; padding: 4px; } .cc-window.cc-banner .cc-link:hover { color: var(--s2t-brand-light, #86AF99); } /* The CTA. MASTER sec.15 says primary CTAs are white text on --brand; on this brand-strong panel a --brand pill measures ~1.8:1 against its own background - below the 3:1 WCAG 1.4.11 floor for UI components - so the CTA inverts to a white pill with --s2t-brand-deep text. Both are token colours; no off-brand value is introduced. Pill radius per MASTER sec.6. */ .cc-window.cc-banner .cc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* MASTER sec.8 touch target - library renders 40px */ padding: 8px 24px; background: #fff; color: var(--s2t-brand-deep, #044D31); border: 2px solid transparent; /* library forces border-width:2px/style:solid */ border-radius: var(--s2t-radius-btn, 50px); /* MASTER sec.6's single 50px, as frega uses - NOT --s2t-radius-pill (9999px) */ font-family: var(--s2t-font, 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 16px; /* library ships .9em = 14.4px */ font-weight: 700; letter-spacing: .02em; white-space: nowrap; text-decoration: none; transition: background-color var(--s2t-dur-standard, 200ms) var(--s2t-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)), color var(--s2t-dur-standard, 200ms) var(--s2t-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)); } .cc-window.cc-banner .cc-btn:hover, .cc-window.cc-banner .cc-btn:focus { background: var(--s2t-brand-subtle, #F6F8F7); color: var(--s2t-brand-strong, #136242); text-decoration: none; } /* MASTER sec.8 focus ring. The library's controls are , so :focus-visible applies normally. A --s2t-brand halo is invisible against this dark green panel, so the ring is white - a dark-surface adaptation, not an off-brand substitution. */ .cc-window.cc-banner .cc-btn:focus-visible, .cc-window.cc-banner .cc-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }