/* ============================================================================ Age gate — 21+ entry confirmation overlay ============================================================================ Loaded synchronously in so the gate paints before any underlying page content becomes interactive. The script in age-gate.js decides whether to show or skip the overlay based on localStorage. ============================================================================ */ /* Hide page content until age-gate.js decides what to do. The script removes this class once it has resolved (either by hiding the gate because the user is already confirmed, or by showing it). Without this, the landing page would flash briefly before the gate appears. */ html.bg-age-pending body > *:not(#age-gate) { visibility: hidden; } html.bg-age-pending { overflow: hidden; } /* When the gate is showing, lock background scroll. */ html.bg-age-gated { overflow: hidden; } html.bg-age-gated body > *:not(#age-gate) { visibility: hidden; } #age-gate { position: fixed; inset: 0; z-index: 9999; background: rgba(16, 14, 11, 0.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 24px; font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace; color: #E8DCC5; animation: bg-age-fade 0.3s ease-out; } @keyframes bg-age-fade { from { opacity: 0; } to { opacity: 1; } } #age-gate.hidden { display: none; } .age-gate-card { background: linear-gradient(180deg, #1A1612 0%, #100E0B 100%); border: 1px solid rgba(232, 169, 60, 0.32); border-radius: 14px; padding: 44px 38px 32px; max-width: 460px; width: 100%; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); position: relative; overflow: hidden; } .age-gate-card::before { content: ''; position: absolute; top: 0; left: 38px; right: 38px; height: 2px; background: linear-gradient(90deg, transparent, #E8A93C, transparent); } .age-gate-brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 13px; font-weight: 700; letter-spacing: 4px; color: #E8A93C; text-align: center; margin-bottom: 22px; } .age-gate-tm { font-size: 8px; vertical-align: super; } .age-gate-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 700; color: #F5DCAB; text-align: center; margin-bottom: 12px; line-height: 1.2; letter-spacing: 0.3px; } .age-gate-title em { font-style: italic; color: #E8A93C; font-weight: 400; } .age-gate-sub { font-size: 12px; color: #A89880; text-align: center; margin-bottom: 28px; line-height: 1.7; } .age-gate-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .age-gate-btn { width: 100%; background: #E8A93C; color: #1A1612; border: 1px solid #E8A93C; font-family: inherit; font-size: 12px; font-weight: 500; padding: 14px 24px; border-radius: 6px; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s; } .age-gate-btn:hover { background: #F5DCAB; border-color: #F5DCAB; } .age-gate-btn:active { transform: translateY(1px); } .age-gate-btn:focus-visible { outline: 2px solid #F5DCAB; outline-offset: 2px; } .age-gate-btn-secondary { background: transparent; color: #A89880; border: 1px solid rgba(168, 152, 128, 0.32); } .age-gate-btn-secondary:hover { background: rgba(168, 152, 128, 0.08); color: #C29362; border-color: rgba(194, 147, 98, 0.48); } .age-gate-foot { font-size: 10px; color: #6E5C40; text-align: center; line-height: 1.6; margin-top: 18px; letter-spacing: 0.3px; } .age-gate-foot a { color: #C29362; text-decoration: underline; text-underline-offset: 2px; } .age-gate-foot a:hover { color: #E8A93C; } @media (max-width: 480px) { .age-gate-card { padding: 32px 24px 24px; } .age-gate-title { font-size: 24px; } }