/* * consent.css — styles for the shared cookie-consent module (js/consent.js). * * Self-contained on purpose: it loads on marketing pages, the legal pages, the SPA * AND the builder-generated pages, which do NOT share a CSS-variable set — so the * brand tokens are declared LOCALLY on the banner element (never inherited from the * page) and every value is explicit. This is the ONE place the banner geometry is * set (Engineering T2): a centered floating card that clears the bottom corners, and * while it is open the chat launcher is lifted clear of it (PUB-13). * * Design: the 1Gesture brand kit (deep green #00552B, lime #B3FF7A, ink #232824, * Libre Franklin). Two states share one card — the intro (Accept all / Manage * preferences) and the granular preferences panel (Save preferences / Accept all / * Reject non-essential). Ticket 869etgen0 (2026-09-01, owner ruling * 2026-09-01-approval-owner-ruling-2026-09-01-cookie-box-first-screen-st): the * intro deliberately no longer offers Reject non-essential or equal prominence * with Accept — refusing moved one layer down into the panel, where its three * buttons ARE equal-prominence (identical size/shape/weight). Owner ruling d4 * (2026-09-02): the intro carries two REAL buttons on one row, Accept all filled * and 10% wider than the outline Manage preferences above 460px; at 460px and * under they stack, Accept all on top, both the same width. Analytics defaults * OFF. */ /* Brand type — self-hosted, only the two weights the banner uses; font-display:swap with an Arial Narrow / system fallback so text is never invisible while it loads. */ @font-face { font-family: 'Libre Franklin 1G'; font-weight: 600; font-display: swap; src: url('/branding/fonts/LibreFranklin-Medium.woff2') format('woff2'); } @font-face { font-family: 'Libre Franklin 1G'; font-weight: 800; font-display: swap; src: url('/branding/fonts/LibreFranklin-ExtraBold.woff2') format('woff2'); } /* ---- banner shell ------------------------------------------------------- */ .cookie-banner.og-consent { /* brand tokens, scoped locally (self-contained; not from page vars) */ --cc-green: #00552B; --cc-green-dark: #003D20; --cc-lime: #B3FF7A; --cc-ink: #232824; --cc-ink-soft: #4B534C; --cc-border: #E2E5E1; --cc-amber: #A35E00; /* 'Franklin Gothic Medium' is a NON-FIRST fallback only — a face the reader may have installed, never one we ship. Owner ruling 2026-08-07 (DEF-091); pinned by Side C of server/tests/font-licensing-guard.test.js. */ font-family: 'Libre Franklin 1G', 'Franklin Gothic Medium', 'Arial Narrow', system-ui, -apple-system, sans-serif; /* A centered floating CARD (not a full-width bottom bar): it never covers the bottom-left app controls or the bottom-right chat launcher, so it cannot intercept their clicks. PUB-13 is handled by lifting the launcher clear. */ position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: min(480px, calc(100vw - 32px)); z-index: 2147483000; background: #ffffff; color: var(--cc-ink); border: 1px solid var(--cc-border); border-radius: 18px; box-shadow: 0 18px 50px rgba(35, 40, 36, 0.22); padding: 22px; /* Non-modal: the card surface never captures clicks meant for the app behind it. Only the card's own controls are interactive (re-enabled below). Consent is enforced by default-deny in the tracker, not by blocking UI. */ pointer-events: none; /* Default-hidden; [hidden] and .is-visible drive display so BOTH the SPA and marketing test idioms work against one element. */ display: none; } /* Re-enable interaction only on the card's own controls. */ .cookie-banner.og-consent button, .cookie-banner.og-consent a, .cookie-banner.og-consent .cookie-switch { pointer-events: auto; } .cookie-banner.og-consent.is-visible { display: block; } /* The [hidden] attribute must always win (SPA hides via el.hidden = true). */ .cookie-banner.og-consent[hidden] { display: none; } /* ---- intro / panel state toggle ----------------------------------------- */ .cookie-banner.og-consent .cookie-banner__panel { display: none; } .cookie-banner.og-consent.og-consent--prefs .cookie-banner__intro { display: none; } .cookie-banner.og-consent.og-consent--prefs .cookie-banner__panel { display: block; } /* Stale-version "our policy changed" notice (set by consent.js on a re-ask). */ .cookie-banner.og-consent .og-consent__lede:not(:empty) { display: block; font-weight: 800; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cc-amber); margin: 0 0 8px; } /* ---- intro ---------------------------------------------------------------- */ .cookie-banner.og-consent .cookie-banner__title { font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -0.01em; color: var(--cc-ink); margin: 0 0 8px; } .cookie-banner.og-consent .cookie-banner__text { font-size: 14px; line-height: 1.6; color: var(--cc-ink-soft); margin: 0 0 16px; } /* The panel's Analytics category carries the same Cookie Policy link as the intro (progressive disclosure, 2026-08-07), so it gets the same green-underline treatment — without this it renders as a default blue browser link. */ /* The phone-only short descriptions (consent.js .cookie-cat__short) are hidden by default. Kept as its own rule, apart from the link rule below: it once landed inside that selector list and hid the intro's Cookie Policy link everywhere. */ .cookie-banner.og-consent .cookie-cat__short { display: none; } .cookie-banner.og-consent .cookie-banner__text a, .cookie-banner.og-consent .cookie-cat__desc a { color: var(--cc-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* Intro action row: Accept all + Manage preferences, side by side (ticket 869etgen0, owner ruling d4 2026-09-02 — Reject non-essential lives in the panel footer below). Accept all is the filled primary and is exactly 10% wider than Manage preferences: "size represents importance". The row FILLS the card, so it lines up with the text block above it rather than huddling in the left half (owner ruling 2026-09-02, after seeing it on staging: "the placement doesn't feel right when the buttons are on the left but the box is centred"). The previous content-sized, left-aligned version was never a design decision — it was a workaround for the onboarding wizard's Continue button, which the banner's own buttons could intercept. That is now fixed properly at the other end: .onboarding-page reserves the banner's height while it is open (see deep-field.css), so the wizard lifts clear and the row no longer has to hide in the left half. flex-grow carries the 10%: with flex-basis 0, two items growing 1.1 and 1 end up in exactly that ratio, whatever the card width. min-width: 0 stops each item flooring at its own min-content, which is what let the panel footer overflow. */ .cookie-banner.og-consent .cookie-banner__actions { display: flex; gap: 10px; align-items: stretch; } .cookie-banner.og-consent .cookie-banner__actions .cookie-banner__btn { min-width: 0; padding-left: 16px; padding-right: 16px; } .cookie-banner.og-consent .cookie-banner__actions .cookie-banner__manage { flex: 1 1 0; } .cookie-banner.og-consent .cookie-banner__actions .cookie-banner__accept { flex: 1.1 1 0; } .cookie-banner.og-consent .cookie-banner__btn { font: inherit; font-weight: 800; font-size: 14.5px; line-height: 1.2; border-radius: 999px; padding: 12px 16px; min-height: 48px; /* AA touch target */ cursor: pointer; border: 2px solid transparent; flex: 1 1 0; /* equal width */ white-space: nowrap; transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .cookie-banner.og-consent .cookie-banner__btn:active { transform: translateY(1px); } .cookie-banner.og-consent .cookie-banner__accept, .cookie-banner.og-consent .cookie-banner__accept2, .cookie-banner.og-consent .cookie-banner__save { background: var(--cc-green); color: #ffffff; border-color: var(--cc-green); } .cookie-banner.og-consent .cookie-banner__accept:hover, .cookie-banner.og-consent .cookie-banner__accept2:hover, .cookie-banner.og-consent .cookie-banner__save:hover { background: var(--cc-green-dark); border-color: var(--cc-green-dark); } .cookie-banner.og-consent .cookie-banner__decline { background: var(--cc-ink); color: #ffffff; border-color: var(--cc-ink); } .cookie-banner.og-consent .cookie-banner__decline:hover { background: #000000; border-color: #000000; } /* Manage preferences — SECONDARY, and a real button (owner ruling d4, 2026-09-02). It was a quiet underlined text control while Reject non-essential still sat on this row and Manage was only the third way in; with Reject moved down a layer, Manage preferences IS the second choice on this screen and is styled as one: an outline button, same shape and hit area as Accept all, lower visual weight. The label sits on ONE line (owner ruling 2026-09-02). It was briefly wrapped across two, back when both buttons were sized by their content and the wrap was the only thing keeping Manage preferences narrower than Accept all. The row fills the card now and flex-grow guarantees that difference, so the wrap earned nothing and looked wrong in a full-width button. white-space: normal is kept so the label can still wrap rather than overflow if a translation or a very narrow card leaves it no room. */ .cookie-banner.og-consent .cookie-banner__manage { background: #ffffff; color: var(--cc-green); border-color: var(--cc-green); white-space: normal; line-height: 1.15; } .cookie-banner.og-consent .cookie-banner__manage:hover { background: #F2F7F4; border-color: var(--cc-green-dark); color: var(--cc-green-dark); } /* Visible keyboard focus everywhere (AA 2.4.7). */ .cookie-banner.og-consent button:focus-visible, .cookie-banner.og-consent a:focus-visible, .cookie-banner.og-consent .cookie-switch__input:focus-visible ~ .cookie-switch__track { outline: 3px solid var(--cc-ink); outline-offset: 2px; } /* ---- preferences panel --------------------------------------------------- */ .cookie-banner.og-consent .cookie-banner__panel-title { font-weight: 800; font-size: 18px; color: var(--cc-ink); margin: 0 0 4px; } .cookie-banner.og-consent .cookie-banner__panel-sub { font-size: 13px; line-height: 1.55; color: var(--cc-ink-soft); margin: 0 0 14px; } .cookie-banner.og-consent .cookie-cat { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--cc-border); } .cookie-banner.og-consent .cookie-cat:first-of-type { border-top: none; padding-top: 4px; } .cookie-banner.og-consent .cookie-cat__txt { flex: 1; } .cookie-banner.og-consent .cookie-cat__name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; color: var(--cc-ink); margin: 0 0 3px; } .cookie-banner.og-consent .cookie-cat__desc { font-size: 12.5px; line-height: 1.5; color: var(--cc-ink-soft); margin: 0; } .cookie-banner.og-consent .cookie-cat__always { font-weight: 800; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cc-green); background: var(--cc-lime); border-radius: 999px; padding: 3px 9px; } /* Analytics toggle. Clicking the label toggles the (visually hidden but focusable) checkbox natively; on/off is conveyed by the knob position AND the On/Off label, never colour alone (WCAG 1.4.1). Default OFF. */ .cookie-banner.og-consent .cookie-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; margin-top: 2px; } .cookie-banner.og-consent .cookie-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: -1px; overflow: hidden; } .cookie-banner.og-consent .cookie-switch__track { position: relative; flex: 0 0 auto; width: 50px; height: 29px; background: #c2ccc2; border-radius: 999px; transition: background 0.16s ease; } .cookie-banner.og-consent .cookie-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.16s ease; } .cookie-banner.og-consent .cookie-switch__input:checked ~ .cookie-switch__track { background: var(--cc-green); } .cookie-banner.og-consent .cookie-switch__input:checked ~ .cookie-switch__track::after { transform: translateX(21px); } .cookie-banner.og-consent .cookie-switch__state { min-width: 22px; font-weight: 800; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cc-ink-soft); } /* Save preferences / Accept all / Reject non-essential — EQUAL prominence: identical size, shape, weight and hit area (Legal T1.5 / QA T4 veto on any accept-dominant styling). This is where that guarantee now lives (ticket 869etgen0) — the intro row above is Accept all alone. */ .cookie-banner.og-consent .cookie-banner__panel-foot { display: flex; gap: 10px; margin-top: 16px; } /* min-width: 0 and white-space: normal are what keep the three inside the card. .cookie-banner__btn sets white-space: nowrap, and a flex item's default min-width: auto floors it at min-content — with nowrap that IS the full label, so "Save preferences" + "Accept all" + "Reject non-essential" could not shrink and the last one rendered outside the card (owner-reported 2026-09-02, A12). Letting the labels wrap onto two lines fixes it without shortening any label. */ .cookie-banner.og-consent .cookie-banner__panel-foot .cookie-banner__save, .cookie-banner.og-consent .cookie-banner__panel-foot .cookie-banner__accept2, .cookie-banner.og-consent .cookie-banner__panel-foot .cookie-banner__decline { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.15; padding-left: 10px; padding-right: 10px; } /* Narrow screens (owner ruling, q8.1 correction 2026-09-02). The intro stacks with Accept all ON TOP and the two buttons the SAME width as each other — at this width position carries the hierarchy, not size, so the 10% difference is dropped. The PANEL is height-constrained here, not width-constrained (owner report 2026-09-02: "when I hit Manage Preferences, the whole block is too big for my screen"). Measured at 375px before this change the card stood 535px tall, which fills a 560px-tall viewport edge to edge. Two things bought that back, and the card is NOT made scrollable: it is deliberately click-through (pointer-events: none, only its own controls opt back in) and scrolling would mean capturing touches again — the very thing behind the wizard and modal collisions this ticket already had to fix. 1. The category rows become a grid so a long description runs the FULL width underneath its switch instead of being squeezed into a column beside it (owner's own suggestion: "drop that text slightly so it's below that switch and make it cover the full width"). display: contents on the text wrapper lets the name and the description become grid items in their own right. Analytics: 3 wrapped lines down to 2, and the dead space under the switch goes. ~19px. 2. The footer stays a ROW here rather than stacking into three full-width buttons — 164px of the card's 535 went on that column. One row of three equal buttons is ~65px. ~100px. They stay identical in size, which is where the Legal T1.5 / QA T4 equal-prominence guarantee lives. Together: about 535px down to about 415px. */ @media (max-width: 460px) { .cookie-banner.og-consent .cookie-banner__actions { flex-direction: column; align-items: stretch; } /* Category row: name and switch share the top line, description spans beneath. */ .cookie-banner.og-consent .cookie-cat { display: grid; grid-template-columns: 1fr auto; column-gap: 14px; row-gap: 4px; align-items: center; } .cookie-banner.og-consent .cookie-cat__txt { display: contents; } .cookie-banner.og-consent .cookie-cat__name { grid-column: 1; grid-row: 1; } .cookie-banner.og-consent .cookie-cat .cookie-switch { grid-column: 2; grid-row: 1; margin-top: 0; } .cookie-banner.og-consent .cookie-cat__desc { grid-column: 1 / -1; grid-row: 2; } /* flex: 1 1 auto on BOTH drops the 10% difference here — stacked, Accept all on top is the signal, not size (owner ruling, q8.1 correction). They fill the card's width like the panel footer does, which is what align-items: stretch gives once the row is a column. Both labels are one line now, so they are the same height without the 4.2em floor the two-line version needed. */ .cookie-banner.og-consent .cookie-banner__actions .cookie-banner__accept, .cookie-banner.og-consent .cookie-banner__actions .cookie-banner__manage { flex: 1 1 auto; } /* Footer, two rows (owner ruling 2026-09-02, on a real phone: "the buttons are a bit sh#t ... all the text doesn't fit in it"). One row of three gave each button 113px and wrapped two of the three labels onto a second line. Three stacked full-width rows fit the text but cost 164px, over 100px more than we have. The split costs 47px and fixes the text: row 1 Accept all | Reject non-essential — the pair a visitor chooses between, equal width and side by side, which is where the Legal T1.5 / QA T4 equal-prominence guarantee lives row 2 Save preferences, full width — a different kind of action, and only meaningful once a switch has been touched At 390px that is 174px each on row 1 and every label on ONE line. */ .cookie-banner.og-consent .cookie-banner__panel-foot { flex-wrap: wrap; } /* NO `order` HERE (D17, owner ruling 4 September 2026). This row used to carry order: 1 / order: 2 to lift Accept all and Reject non-essential above Save preferences, while the markup in consent.js still read save-first — so the box READ one way and TABBED another (WCAG 2.4.3 Focus Order). The markup now carries this order itself, and the wrap alone reproduces the same two rows: accept2 and decline take a half each, save cannot fit beside them at 1 1 100% and wraps to its own full-width row. Do not re-add `order` — it would silently detach reading order from focus order again. */ .cookie-banner.og-consent .cookie-banner__panel-foot .cookie-banner__accept2, .cookie-banner.og-consent .cookie-banner__panel-foot .cookie-banner__decline { flex: 1 1 0; padding-left: 10px; padding-right: 10px; } .cookie-banner.og-consent .cookie-banner__panel-foot .cookie-banner__save { flex: 1 1 100%; } /* Height paid back, so the panel fits the screen without scrolling — it cannot scroll: the card is deliberately click-through (pointer-events: none), and making it scrollable would mean capturing touches again, the behaviour behind the wizard and modal collisions this ticket already had to fix. Both cuts remove DUPLICATED information on this width only, never information that exists nowhere else, and neither applies above 460px: - the always-on rows lose their description. They describe categories the visitor cannot change; the ALWAYS ON badge carries the operative fact and the Cookie Policy link below carries the detail. - the panel's intro line goes. It says "Essential and functional cookies stay on. Analytics is optional and off until you turn it on." — on this panel both halves are SHOWN rather than stated: two ALWAYS ON badges, and the Analytics switch sitting visibly at OFF. Owner ruling, same day. ~456px down to ~395px at 390px wide, measured with the real Libre Franklin. */ .cookie-banner.og-consent .cookie-cat:not(:has(.cookie-switch)) .cookie-cat__desc { display: none; } .cookie-banner.og-consent .cookie-banner__panel-sub { display: none; } .cookie-banner.og-consent { padding: 18px; } /* CONSENT_VERSION 5 added the Advertising row and named Google, and the card grew from ~485px to ~631px at 375 x 560 — off the top of the screen. Each optional row swaps to its short description here (consent.js .cookie-cat__short): the same processors, the same CRM link, the same "Meta also uses it for its own purposes", fewer words. The full wording is still one tap away in the Cookie Policy link both versions share, and above 460px the long version shows. */ .cookie-banner.og-consent .cookie-cat__long { display: none; } .cookie-banner.og-consent .cookie-cat__short { display: inline; } /* And 4px less air above and below each row (14px -> 10px): with four rows that is the last ~30px, and leaves the card clear of the top of a 560px screen with room to spare rather than touching it. */ .cookie-banner.og-consent .cookie-cat { padding-top: 10px; padding-bottom: 10px; } .cookie-banner.og-consent .cookie-cat:first-of-type { padding-top: 4px; } } /* The narrowest phones (320-380px wide), where every description wraps one line more. Before CONSENT_VERSION 5 the panel fitted a 320 x 560 screen at ~502px; the Advertising row pushed it to ~574px. The panel heading goes (the dialog keeps its accessible name, "Cookie consent", and the two buttons that open this panel say what it is), and the card's padding and the descriptions' leading tighten a little. The text size does not change. */ @media (max-width: 380px) { .cookie-banner.og-consent .cookie-banner__panel-title { display: none; } .cookie-banner.og-consent { padding: 14px; } .cookie-banner.og-consent .cookie-cat__desc { line-height: 1.4; } } @media (prefers-reduced-motion: reduce) { .cookie-banner.og-consent .cookie-banner__btn, .cookie-banner.og-consent .cookie-switch__track, .cookie-banner.og-consent .cookie-switch__track::after { transition: none; } } /* ---- launcher de-conflict (PUB-13) -------------------------------------- * While the banner is open, lift the floating chat launcher above the card so * their boxes never overlap. consent.js sets --og-consent-h to the live banner * height (recomputed when the panel opens); it returns to rest on hide(). */ body.og-consent-open .og-chat-launcher { transform: translateY(calc(-1 * (var(--og-consent-h, 96px) + 24px))); } /* ---- persistent "Cookie settings" re-open control ------------------------ */ .og-consent-settings { font-family: 'Libre Franklin 1G', 'Franklin Gothic Medium', 'Arial Narrow', system-ui, sans-serif; color: #00552B; background: transparent; border: none; padding: 0; cursor: pointer; /* DEF-048: the control is now the cookie ICON, so lay it out as an icon button (no text underline). The accessible name lives on aria-label/title. */ display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .og-consent-settings svg { display: block; } .og-consent-settings:hover { color: #003D20; } .og-consent-settings:focus-visible { outline: 3px solid #232824; outline-offset: 2px; } /* Footer variant: inline with the other footer links. DEF-048 follow-up — the marketing footers are DARK green, and the base control colour is the SAME deep green (#00552B), so the icon was invisible against the footer. Inherit the footer's own (light) text colour and match the links' 85% opacity instead. */ .og-consent-settings--footer { display: inline-flex; align-items: center; margin: 8px 12px 0; color: inherit; opacity: 0.85; } .og-consent-settings--footer:hover { color: inherit; opacity: 1; } /* Fixed variant (SPA + builder pages, which have no