/** * Cookie consent. * * Visibility is inverted from the usual approach: the banner is visible as * rendered, and a class on hides it once a decision exists. A consent * notice that needs JavaScript to appear will sometimes not appear, and that * failure is silent. * * Every colour, radius and font is a custom property written by the settings * screen. Buttons carry their element type in the selector, because themes * style every button on the site and a banner inheriting theme padding is how * "Reject" ends up looking different from "Accept". */ .ac { --ac-bg: #fff; --ac-ink: #000030; --ac-accent: #000030; --ac-cta: #69D8FF; --ac-cta-ink: #000030; --ac-radius: 14px; --ac-line: rgba(0, 0, 48, .12); --ac-muted: rgba(0, 0, 48, .64); --ac-font-head: Fraunces, Georgia, serif; --ac-font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; position: fixed; inset: 0; z-index: 999998; display: flex; pointer-events: none; font-family: var(--ac-font-body); color: var(--ac-ink); animation: ac-in .28s cubic-bezier(.22, .61, .36, 1) both; } /* A decision has been made: the notice goes, the reopen button arrives. */ /* Dismissal. * * Three mechanisms, deliberately: the html class, the hidden attribute, and * an inline display set by the script once the fade finishes. The banner * covers the page, so "still there after Accept" is the worst failure this * component has — it is worth more than one guarantee. */ .ac-decided .ac, .ac[hidden] { display: none !important; } .ac.is-out { animation: ac-out .24s ease forwards; pointer-events: none; } .ac.is-out .ac__panel { animation: ac-sink .24s ease forwards; } @keyframes ac-out { to { opacity: 0; } } @keyframes ac-sink { to { transform: translateY(10px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ac.is-out, .ac.is-out .ac__panel { animation-duration: .01s; } } .ac * { box-sizing: border-box; } @keyframes ac-in { from { opacity: 0; } to { opacity: 1; } } .ac--bottom { align-items: flex-end; } .ac--top { align-items: flex-start; } .ac--centre { align-items: center; justify-content: center; } /* Only the centred variant dims the page. A bar does not need to take the site away from the visitor to be noticed. */ .ac__scrim { position: absolute; inset: 0; background: rgba(6, 8, 20, .55); } .ac--centre .ac__scrim { pointer-events: auto; } .ac:not(.ac--centre) .ac__scrim { display: none; } .ac__panel { position: relative; pointer-events: auto; width: 100%; background: var(--ac-bg); border-radius: var(--ac-radius); box-shadow: 0 6px 44px rgba(6, 8, 20, .22), 0 1px 0 rgba(255, 255, 255, .6) inset; padding: 24px 26px; display: flex; align-items: center; gap: 30px; animation: ac-rise .3s cubic-bezier(.22, .61, .36, 1) both; } @keyframes ac-rise { from { transform: translateY(16px); } to { transform: none; } } .ac--top .ac__panel { animation-name: ac-drop; } @keyframes ac-drop { from { transform: translateY(-16px); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .ac, .ac__panel { animation: none; } } .ac--bar .ac__panel { max-width: 1160px; margin: 16px auto; } .ac--box .ac__panel { max-width: 420px; margin: 18px 18px 18px auto; flex-direction: column; align-items: stretch; gap: 18px; } .ac--centre .ac__panel { max-width: 540px; margin: 18px; flex-direction: column; align-items: stretch; gap: 20px; } .ac__main { flex: 1; min-width: 0; } /* The theme sets h2 site-wide, and at hero size that turned this into a * 60px headline dominating the page. Pinned for the same reason the buttons * are: a consent notice inheriting display typography stops being a notice. */ .ac h2.ac__title { margin: 0 0 7px !important; padding: 0 !important; font-family: var(--ac-font-head) !important; font-size: 19px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--ac-ink) !important; } .ac__message { font-size: 14.5px; line-height: 1.6; color: var(--ac-muted); } .ac__message p { margin: 0; font-size: 14.5px !important; line-height: 1.6 !important; color: var(--ac-muted) !important; } .ac__message p + p { margin-top: 6px; } .ac__policy { display: inline-block; margin-top: 4px; color: var(--ac-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* ---------- Choices ---------- */ .ac__choices { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--ac-line); max-height: 38vh; overflow-y: auto; /* Room for the scrollbar so text does not sit under it. */ padding-right: 4px; } .ac__choices[hidden] { display: none; } .ac__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--ac-line); } .ac__row:last-child { border-bottom: 0; } .ac__row-name { margin: 0 0 3px; font-size: 14px; font-weight: 700; color: var(--ac-ink); } .ac__row-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ac-muted); } .ac__always { flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 48, .05); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-muted); white-space: nowrap; } /* Switch */ .ac__switch { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; cursor: pointer; } .ac__switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .ac__track { width: 46px; height: 27px; border-radius: 999px; background: rgba(0, 0, 48, .16); display: block; position: relative; transition: background .18s ease; } .ac__dot { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(6, 8, 20, .32); transition: transform .18s cubic-bezier(.22, .61, .36, 1); } .ac__switch input:checked + .ac__track { background: var(--ac-accent); } .ac__switch input:checked + .ac__track .ac__dot { transform: translateX(19px); } .ac__switch input:focus-visible + .ac__track { outline: 2px solid var(--ac-accent); outline-offset: 3px; } /* ---------- Actions ---------- */ /* Two buttons now, so each gets a little more width. They stay identical to each other — only the fill differs, marking the primary path rather than making the other harder to find. */ .ac__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .ac--box .ac__actions, .ac--centre .ac__actions { width: 100%; } .ac .ac__btn, .ac button.ac__btn { -webkit-appearance: none; appearance: none; margin: 0; min-width: 132px; min-height: 0; /* Reject and Accept share every dimension. Only the fill differs, so one reads as the primary path — not so the other is harder to find. */ padding: 13px 22px; border: 1px solid var(--ac-line); border-radius: 9px; background: transparent; color: var(--ac-ink); font-family: var(--ac-font-body); font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: normal; text-transform: none; text-align: center; white-space: nowrap; cursor: pointer; box-shadow: none; transition: border-color .15s ease, background .15s ease, transform .12s ease; } .ac button.ac__btn:hover { border-color: var(--ac-accent); background: rgba(0, 0, 48, .03); } .ac button.ac__btn:active { transform: translateY(1px); } .ac button.ac__btn:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; } .ac button.ac__btn--accept, .ac button.ac__btn--save { background: var(--ac-cta); border-color: var(--ac-cta); color: var(--ac-cta-ink); } .ac button.ac__btn--accept:hover, .ac button.ac__btn--save:hover { background: var(--ac-cta); filter: brightness(.94); } .ac button.ac__btn[hidden] { display: none; } /* ---------- Reopen ---------- */ /* Themes paint every button on the site, which turned this into a bright * square in the corner. Pinned, and hidden by attribute as well as class so * it cannot appear alongside the banner it reopens. */ .ac-reopen, button.ac-reopen { -webkit-appearance: none; appearance: none; position: fixed; left: 18px; bottom: 18px; z-index: 999997; width: 44px; height: 44px; padding: 0; margin: 0; min-width: 0; display: none; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 48, .12); border-radius: 50%; background: #fff !important; background-image: none !important; color: #000030 !important; box-shadow: 0 4px 18px rgba(6, 8, 20, .18) !important; cursor: pointer; opacity: .8; transition: opacity .15s ease, transform .15s ease; } /* Mirror image of the banner: it appears only once a decision exists. */ .ac-decided .ac-reopen { display: flex; } .ac-reopen:hover { opacity: 1; transform: translateY(-2px); } .ac-reopen[hidden], button.ac-reopen[hidden] { display: none !important; } /* Belt and braces: never both on screen at once. */ html:not(.ac-decided) .ac-reopen { display: none !important; } .ac-link { -webkit-appearance: none; appearance: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* ---------- Blocked embeds ---------- */ .ac-blocked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 200px; padding: 26px; border: 1px dashed rgba(0, 0, 48, .2); border-radius: 12px; background: rgba(0, 0, 48, .03); text-align: center; font-family: "Nunito Sans", sans-serif; } .ac-blocked p { margin: 0; font-size: 13.5px; color: rgba(0, 0, 48, .64); max-width: 34ch; line-height: 1.55; } .ac-blocked button { -webkit-appearance: none; appearance: none; padding: 10px 18px; border: 1px solid rgba(0, 0, 48, .2); border-radius: 8px; background: #fff; color: #000030; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .ac-blocked + iframe[data-ac-src] { display: none; } /* ============================================================ Mobile A cookie banner is the first thing a visitor meets, often on a phone, and it is the one element that must not need horizontal scrolling or a pinch-zoom to dismiss. Below 860px the panel becomes a sheet: full width, buttons stacked and full width, Accept nearest the thumb. ============================================================ */ @media (max-width: 860px) { .ac--bar .ac__panel, .ac--box .ac__panel, .ac--centre .ac__panel { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; margin: 10px; max-width: none; } .ac__actions { width: 100%; } .ac button.ac__btn { flex: 1 1 auto; min-width: 0; padding: 13px 12px; } .ac__choices { max-height: 44vh; } } @media (max-width: 560px) { .ac--bottom .ac__panel { margin: 0; /* Meets the bottom edge, so it reads as a sheet rather than a card floating over the page. */ border-radius: var(--ac-radius) var(--ac-radius) 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); } .ac__title { font-size: 18px; } .ac__message { font-size: 14px; } /* Column-reverse puts Accept at the bottom of the stack — closest to the thumb — while Reject stays first in the DOM and identical in size. */ .ac__actions { flex-direction: column-reverse; gap: 8px; } .ac button.ac__btn { width: 100%; min-height: 46px; } .ac__row { gap: 14px; padding: 12px 0; } .ac__row-note { font-size: 12px; } .ac__choices { max-height: 38vh; } .ac-reopen { width: 42px; height: 42px; left: 14px; bottom: 14px; } .ac-blocked { min-height: 160px; padding: 20px; } } /* Landscape phone: a 44vh list leaves nothing to press. */ @media (max-height: 480px) and (orientation: landscape) { .ac__choices { max-height: 28vh; } .ac__panel { padding: 14px 18px; gap: 12px; } .ac__title { font-size: 17px; margin-bottom: 4px; } }