/*! * Boost Privacy — Frontend UX enhancements * * @package BoostPrivacy * @since 1.5.0 * @since 1.5.0 alpha7 — INVERSION pattern (compliance hardening): * defaults show the bar; animations engage only when the JS * bundle boots and sets `data-animating="true"` on . * If the JS never loads, the bar is still visible (no * animation) so consent can be collected. Compliance beats * polish. */ /* ──────────────────────────────────────────────────────────────────── * Cookie bar — visible by default, JS opts into animation * ──────────────────────────────────────────────────────────────────── */ #boost-privacy-cookie-bar { opacity: 1; transform: translateY(0); } html[data-animating="true"] #boost-privacy-cookie-bar { transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } html[data-animating="true"] #boost-privacy-cookie-bar[data-state="initial"] { opacity: 0; transform: translateY(16px); } html[data-animating="true"] #boost-privacy-cookie-bar[data-state="leaving"] { opacity: 0; transform: translateY(16px); pointer-events: none; } html[data-animating="true"] #boost-privacy-cookie-bar.boost-position-top[data-state="initial"], html[data-animating="true"] #boost-privacy-cookie-bar.boost-position-top[data-state="leaving"] { transform: translateY(-16px); } /* ──────────────────────────────────────────────────────────────────── * Preferences modal — same inversion pattern * ──────────────────────────────────────────────────────────────────── */ #boost-privacy-preferences-modal { opacity: 1; } html[data-animating="true"] #boost-privacy-preferences-modal { transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-animating="true"] #boost-privacy-preferences-modal[data-state="initial"] { opacity: 0; } #boost-privacy-preferences-modal .boost-modal-content { transform: none; } html[data-animating="true"] #boost-privacy-preferences-modal .boost-modal-content { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } html[data-animating="true"] #boost-privacy-preferences-modal[data-state="initial"] .boost-modal-content { transform: scale(0.96) translateY(8px); } /* ──────────────────────────────────────────────────────────────────── * Reduced-motion * ──────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html[data-animating="true"] #boost-privacy-cookie-bar, html[data-animating="true"] #boost-privacy-preferences-modal, html[data-animating="true"] #boost-privacy-preferences-modal .boost-modal-content { transition-duration: 0ms !important; transform: none !important; } html[data-animating="true"] #boost-privacy-cookie-bar[data-state="initial"], html[data-animating="true"] #boost-privacy-preferences-modal[data-state="initial"] { opacity: 1 !important; } } /* ──────────────────────────────────────────────────────────────────── * Focus-visible styling * ──────────────────────────────────────────────────────────────────── */ #boost-privacy-cookie-bar :focus-visible, #boost-privacy-preferences-modal :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 3px; } #boost-privacy-cookie-bar :focus:not(:focus-visible), #boost-privacy-preferences-modal :focus:not(:focus-visible) { outline: none; } .boost-focus-trap-sentinel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; outline: none !important; }