/* --------------------------------------------------------------------------- Cookie consent banner --------------------------------------------------------------------------- Gates GA4 and Microsoft Clarity. The markup is built at runtime by assets/js/consent.js -- there is no build step here, so pasting a banner into sixteen pages would guarantee they drift. z-index sits at 998, deliberately BELOW the Tarvi launcher (999) and the Tarvi modal (1000). The launcher is pushed up by --consent-banner-height while the bar is visible, so the two never overlap; and a visitor who opens Tarvi before answering gets the modal over the bar rather than a consent bar floating on top of a conversation. --------------------------------------------------------------------------- */ .consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding: 18px 24px; background: var(--thm-dark-blue, #010818); border-top: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); font-family: var(--thm-font, 'Roboto', sans-serif); animation: consent-banner-in 260ms ease-out; } @keyframes consent-banner-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .consent-banner { animation: none; } } .consent-banner__text { margin: 0; max-width: 70ch; color: rgba(255, 255, 255, 0.86); font-size: 14px; line-height: 1.6; } .consent-banner__link { color: #fff; text-decoration: underline; text-underline-offset: 2px; } .consent-banner__link:hover, .consent-banner__link:focus { color: var(--thm-powder-blue, #a1afe1); } .consent-banner__actions { display: flex; gap: 12px; flex-shrink: 0; } /* Accept and Decline share one class on purpose. Giving the preferred answer more visual weight than the other is the dark pattern this banner exists to avoid -- if these ever diverge, that is a bug, not a design tweak. */ .consent-banner__button { min-width: 116px; padding: 10px 22px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; background: transparent; color: #fff; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; } .consent-banner__button:hover, .consent-banner__button:focus-visible { background: var(--thm-cobalt-blue, #1338b3); border-color: var(--thm-cobalt-blue, #1338b3); } .consent-banner__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Lift the Tarvi launcher clear of the bar while it is showing. The custom property is written by consent.js from the bar's measured height, because that height depends on how the copy wraps at the current viewport. */ body.has-consent-banner .tarvi-launcher { bottom: calc(24px + var(--consent-banner-height, 0px)); transition: bottom 200ms ease; } @media (max-width: 767px) { .consent-banner { gap: 14px; padding: 16px 18px; justify-content: flex-start; } .consent-banner__actions { width: 100%; } .consent-banner__button { flex: 1 1 0; min-width: 0; } body.has-consent-banner .tarvi-launcher { bottom: calc(16px + var(--consent-banner-height, 0px)); } } /* The banner is injected into and has no place in a printed page. */ @media print { .consent-banner { display: none !important; } }