/* ============================================================ eVoucher.gift — analytics cookie consent bar A plain stylesheet rather than CookieConsentBanner.razor.css: the bar is fixed to the bottom of the viewport, so it also needs a rule on to reserve its height, and Blazor scoped CSS only reaches the component's own elements. Painted from the house tokens (--ev-*, app.css) rather than a merchant's --evs-* accent: the bar sits outside .evs-root, and this is the platform speaking, not the shop. Ink and paper read correctly over every storefront palette and in both app themes, so no dark-mode variant is needed. ============================================================ */ /* Answered visitors get the bar with hidden set server-side so "Cookie choices" can re-open it — it must not paint, and must not claim body padding, until it is revealed. Stated explicitly because .ev-consent sets position and z-index, and a stylesheet later in the cascade could otherwise resurrect it. */ .ev-consent[hidden] { display: none; } .ev-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; /* over sticky headers (1020), under Bootstrap's modals (1055) */ background: var(--ev-ink, #1A1411); color: var(--ev-paper-light, #FBF6EC); border-top: 1px solid rgba(251, 246, 236, 0.16); box-shadow: 0 -10px 30px -12px rgba(26, 20, 17, 0.45); font-family: var(--ev-font-sans, system-ui, sans-serif); animation: ev-consent-rise 0.32s cubic-bezier(0.22, 0.8, 0.3, 1) both; } @keyframes ev-consent-rise { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ev-consent { animation: none; } } .ev-consent-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 36px; padding-block: 16px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .ev-consent-copy { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(251, 246, 236, 0.88); max-width: 68ch; } .ev-consent-link { color: var(--ev-brass, #B68B4C); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .ev-consent-link:hover { color: var(--ev-paper-light, #FBF6EC); } .ev-consent-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* Accept and Decline are deliberately the SAME button: same size, same fill, same hit area, side by side. Styling Accept as the call to action and Decline as a quiet ghost link is exactly the nudge the ICO calls out, so neither is dressed up as the obvious answer — only the labels differ. */ .ev-consent-btn { font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 12px 24px; min-width: 118px; border-radius: 999px; border: 1px solid transparent; background: var(--ev-paper-light, #FBF6EC); color: var(--ev-ink, #1A1411); cursor: pointer; transition: background-color 0.15s ease; } .ev-consent-btn:hover { background: #FFFFFF; } .ev-consent-btn:focus-visible { outline: 2px solid var(--ev-brass, #B68B4C); outline-offset: 2px; } /* Keep the bar off the bottom of the page. cookie-consent.js measures the bar and sets --ev-consent-h; the fallback covers the stacked mobile layout for the moment before script runs. */ body:has(.ev-consent:not([hidden])) { padding-bottom: var(--ev-consent-h, 168px); } @media (max-width: 720px) { .ev-consent-inner { padding-inline: 20px; padding-block: 14px; flex-direction: column; align-items: stretch; gap: 14px; } .ev-consent-copy { font-size: 13.5px; } /* Both buttons stay on one row and share the width equally — Decline is never the one pushed off-screen or shrunk on a phone. */ .ev-consent-actions { gap: 10px; } .ev-consent-btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; } } /* An embedded storefront is a third-party frame: the consent cookie cannot be written there, so the bar would nag on every view and analytics could never be switched on anyway. Stay out of the merchant's page entirely. */ .evs-embedded .ev-consent { display: none; } .evs-embedded body:has(.ev-consent) { padding-bottom: 0; } /* Same reasoning for the way back to the bar: offering "Cookie choices" inside the merchant's frame would re-open something that cannot be shown or stored. The wrapper goes with it — it carries the footer separator that emits, and hiding the button alone left the doubled "· ·" the separator exists to prevent. */ .evs-embedded [data-ev-consent-choices], .evs-embedded [data-ev-consent-reopen] { display: none; }