/* ============================================================================ * analytics.css — privacy banner styling * ============================================================================ * Loaded by every page on barrelguru.com via . * The banner is appended to by analytics.js the first time a visitor * arrives without a stored choice. Once Accept or Decline is clicked the * banner removes itself from the DOM — no further CSS runs. * * Design: * - Bottom-anchored, full-width, max-height auto. Single column on mobile, * row on desktop. * - Carbon background with subtle border and racing-stripe top edge — * visually consistent with the Paddock Club marketing palette. * - Two buttons: Decline (ghost) on the left, Accept (champagne) on the * right. Accept is the right default; we lead with the privacy stance. * - z-index 60 so it sits above the sticky nav (z 40-50) and below any * modal that genuinely needs to win (none today). * ========================================================================= */ #bg-consent-banner { position: fixed; inset: auto 0 0 0; z-index: 60; background: #0A0A0F; border-top: 1px solid rgba(184, 158, 106, 0.32); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4); color: #F4F0E8; font-family: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace; animation: bg-consent-slide-up .25s ease-out; } #bg-consent-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #B89E6A 0%, #D4BC8C 18%, #0A0A0F 19%, #0A0A0F 22%, #00665D 23%, #00897B 38%, #0A0A0F 39%, #0A0A0F 50%, #B89E6A 51%, #D4BC8C 70%, #0A0A0F 71%); } @keyframes bg-consent-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } #bg-consent-banner .bg-consent-inner { max-width: 1180px; margin: 0 auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; } #bg-consent-banner .bg-consent-copy { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } #bg-consent-banner .bg-consent-title { font-family: 'Saira Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 3px; color: #D4BC8C; text-transform: uppercase; } #bg-consent-banner .bg-consent-body { font-size: 12px; line-height: 1.6; color: #C0C5CA; } #bg-consent-banner .bg-consent-link { color: #D4BC8C; text-decoration: underline; text-underline-offset: 2px; } #bg-consent-banner .bg-consent-link:hover { color: #EBDCB8; } #bg-consent-banner .bg-consent-actions { display: flex; gap: 8px; flex-shrink: 0; } #bg-consent-banner .bg-consent-btn { font-family: 'Saira Condensed', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; padding: 10px 18px; border-radius: 2px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } #bg-consent-banner .bg-consent-decline { background: transparent; border: 1px solid rgba(192, 197, 202, 0.32); color: #9CA0A8; } #bg-consent-banner .bg-consent-decline:hover { border-color: rgba(192, 197, 202, 0.55); color: #F4F0E8; } #bg-consent-banner .bg-consent-accept { background: #B89E6A; border: 1px solid #B89E6A; color: #0A0A0F; } #bg-consent-banner .bg-consent-accept:hover { background: #D4BC8C; border-color: #D4BC8C; } /* Wide screens: row layout */ @media (min-width: 720px) { #bg-consent-banner .bg-consent-inner { flex-direction: row; align-items: center; gap: 24px; } }