/** * cookies17 — consent banner & preference centre styles. * Namespaced under .cookies17- and driven by --cookies17-accent (set inline). * Built for WCAG 2.2 AA: equal-weight choices, visible focus, >=44px targets, * reflow at 400% zoom, and prefers-reduced-motion support. */ .cookies17 { /* Accent resolves in this order: 1. inline --cookies17-accent set by the CP per-site override (if any) 2. --cookies17-brand, defined once per site from the Tailwind brand palette 3. a safe accessible fallback (used on non-Tailwind / extracted sites) */ --cookies17-accent: var(--cookies17-brand, #3F7608); --cookies17-ink: #14181d; --cookies17-muted: #5b6670; --cookies17-surface: #ffffff; --cookies17-border: #d7dce1; --cookies17-radius: 12px; --cookies17-focus: #0b3d91; } .cookies17, .cookies17 * { box-sizing: border-box; } /* ---- Banner ---------------------------------------------------------- */ .cookies17-banner { position: fixed; z-index: 2147483000; /* above most site UI, below nothing critical */ left: 50%; bottom: 24px; transform: translateX(-50%); width: min(860px, calc(100% - 40px)); background: var(--cookies17-surface); color: var(--cookies17-ink); border: 1px solid var(--cookies17-border); border-radius: var(--cookies17-radius); box-shadow: 0 10px 40px rgba(13, 20, 28, .28); padding: 28px 32px; font-family: inherit; font-size: 16px; line-height: 1.55; } .cookies17-banner[hidden] { display: none; } .cookies17-banner--top { bottom: auto; top: 20px; } .cookies17-banner--bottom-left { left: 20px; bottom: 20px; transform: none; } .cookies17-banner--bottom-right { left: auto; right: 20px; bottom: 20px; transform: none; } .cookies17-banner--center { top: 50%; bottom: auto; transform: translate(-50%, -50%); } /* Full-width bar fixed to the bottom edge — full-bleed, no centred container. */ .cookies17-banner--full { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; transform: none; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; box-shadow: 0 -6px 24px rgba(13, 20, 28, .18); padding: 16px 24px; } /* GOV.UK-style: full-width, in the page flow at the very top, so it pushes the page down and scrolls away with it. banner.js moves the banner to the top of so this works wherever the banner tag is placed in the template. Matches the full-width bottom bar (full-bleed, same size); no shadow since it sits in the page flow at the top. */ .cookies17-banner--top-full { position: static; width: 100%; max-width: none; transform: none; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: none; padding: 16px 24px 24px; } .cookies17-banner__heading { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.3; } .cookies17-banner__body { margin: 0 0 20px; color: var(--cookies17-ink); } .cookies17-banner__body a { color: var(--cookies17-focus); text-decoration: underline; } /* Theme-safe link (inherits text colour so it stays readable on any background). */ .cookies17-link { color: inherit; text-decoration: underline; } .cookies17-banner__policy { margin: 0 0 20px; font-size: 15px; } .cookies17-dialog__policy { margin: 18px 0 0; font-size: 15px; } .cookies17-actions { display: flex; flex-wrap: wrap; gap: 10px; } /* ---- Buttons (equal weight: no dark patterns) ----------------------- */ .cookies17-btn { appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; font-weight: 600; min-height: 44px; padding: 10px 18px; border-radius: 8px; border: 2px solid transparent; flex: 1 1 auto; text-align: center; transition: box-shadow .12s ease, filter .12s ease; } /* Equal weighting (PECR/GDS): Accept, Reject and Manage are visually identical — same size, colour and weight — so no option is nudged. They differ only by label. */ .cookies17-btn--accept, .cookies17-btn--reject, .cookies17-btn--manage { background: var(--cookies17-accent); color: var(--cookies17-on-accent, #fff); border-color: var(--cookies17-accent); } .cookies17-btn:hover { filter: brightness(1.08); box-shadow: 0 0 0 3px var(--cookies17-border); } .cookies17-btn:focus-visible, .cookies17-toggle__input:focus-visible + .cookies17-toggle__track, .cookies17-link:focus-visible { outline: 3px solid var(--cookies17-focus); outline-offset: 2px; } /* ---- Consent controls (policy page) --------------------------------- */ .cookies17-consent-controls { margin: 24px 0; padding: 20px; border: 1px solid var(--cookies17-border); border-radius: 10px; } .cookies17-consent-controls__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .cookies17-consent-controls__actions .cookies17-btn { flex: 0 1 auto; } /* Withdraw is a secondary action: outlined rather than filled. */ .cookies17-consent-controls__withdraw { background: transparent; color: var(--cookies17-accent); border-color: var(--cookies17-accent); } .cookies17-consent-controls__id { margin: 0 0 6px; } .cookies17-consent-controls__id code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; } .cookies17-consent-controls__note { margin: 0; font-size: .9em; opacity: .8; } /* ---- Preference modal ----------------------------------------------- */ .cookies17-modal { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(13, 20, 28, .55); } .cookies17-modal[hidden] { display: none; } .cookies17-dialog { background: var(--cookies17-surface); color: var(--cookies17-ink); border-radius: var(--cookies17-radius); width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px; box-shadow: 0 12px 40px rgba(13, 20, 28, .35); } .cookies17-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .cookies17-dialog__heading { margin: 0; font-size: 20px; font-weight: 700; } .cookies17-close { appearance: none; background: transparent; border: 2px solid transparent; border-radius: 8px; cursor: pointer; min-width: 44px; min-height: 44px; font-size: 22px; line-height: 1; color: var(--cookies17-muted); } .cookies17-cat { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--cookies17-border); } .cookies17-cat__text { flex: 1 1 auto; } .cookies17-cat__name { margin: 0 0 2px; font-size: 15px; font-weight: 700; } .cookies17-cat__desc { margin: 0; font-size: 14px; color: var(--cookies17-muted); } /* ---- Accessible toggle (real checkbox) ------------------------------ */ .cookies17-toggle { position: relative; flex: none; display: inline-flex; align-items: center; } .cookies17-toggle__input { position: absolute; top: 0; left: 0; width: 44px; height: 28px; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .cookies17-toggle__track { width: 44px; height: 28px; border-radius: 999px; background: #b7c0c9; position: relative; transition: background .15s ease; /* Decorative only — let clicks reach the checkbox sitting above it. */ pointer-events: none; } .cookies17-toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s ease; } .cookies17-toggle__input:checked + .cookies17-toggle__track { background: var(--cookies17-accent); } .cookies17-toggle__input:checked + .cookies17-toggle__track::after { transform: translateX(16px); } .cookies17-toggle__input:disabled { cursor: not-allowed; } .cookies17-toggle__input:disabled + .cookies17-toggle__track { background: var(--cookies17-accent); opacity: .55; } .cookies17-cat__state { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cookies17-muted); margin-top: 4px; } .cookies17-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } /* ---- Reduced motion -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cookies17-toggle__track, .cookies17-toggle__track::after, .cookies17-btn { transition: none; } } /* ---- Small viewports / reflow --------------------------------------- */ @media (max-width: 480px) { .cookies17-banner { width: calc(100% - 16px); left: 8px; right: 8px; bottom: 8px; transform: none; } .cookies17-banner--center { top: auto; } .cookies17-btn { flex: 1 1 100%; } } /* ---- Cookie policy table -------------------------------------------- */ .cookies17-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .cookies17-table-group { margin: 0 0 32px; } .cookies17-table-heading { margin: 0 0 4px; font-size: 18px; font-weight: 700; } .cookies17-table-desc { margin: 0 0 12px; color: #5b6670; } .cookies17-table-scroll { overflow-x: auto; } .cookies17-table-updated { margin: 0 0 20px; font-size: 0.875em; opacity: 0.7; } .cookies17-table { width: 100%; border-collapse: collapse; font-size: 15px; } .cookies17-table caption { text-align: left; } .cookies17-table th, .cookies17-table td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid #d7dce1; } .cookies17-table thead th { font-weight: 700; border-bottom: 2px solid #14181d; } .cookies17-table tbody th { font-weight: 400; } .cookies17-table code { font-size: .92em; }