/* ============================================================ agegate.css path: /lib/agegate.css purpose: Full-dim age-verification gate shown on first visit. Loaded in (render-blocking, by design) so the hide rule below applies before the page paints — paired with the inline check script each template carries and lib/agegate.js, which builds the modal. ============================================================ */ html.age-pending body { visibility: hidden; } /* Entrance animations (title rise, glow, etc.) are time-based from page load, not from "the gate closed" — without this they'd run to completion behind the modal and the visitor would never see them play. Freezing every animation at its 0% frame while gated, then letting this rule disappear with the class, makes them play fresh on reveal. */ html.age-pending * { animation-play-state: paused !important; } .agegate { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 6, 8, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); visibility: visible; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .agegate-card { width: 100%; max-width: 420px; background: #111114; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 32px 28px; text-align: center; color: #f4f4f5; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } .agegate-mark { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0 0 16px; } .agegate-title { font-size: 1.4rem; line-height: 1.3; margin: 0 0 12px; font-weight: 600; } .agegate-copy { font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72); margin: 0 0 26px; } .agegate-actions { display: flex; gap: 12px; } .agegate-actions button { flex: 1 1 0; min-height: 46px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: opacity 0.15s ease, transform 0.15s ease; } .agegate-actions button:active { transform: scale(0.98); } .agegate-yes { background: #f4f4f5; color: #111114; } .agegate-yes:hover { opacity: 0.9; } .agegate-no { background: transparent; color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.22); } .agegate-no:hover { background: rgba(255, 255, 255, 0.06); } .agegate-fine { margin: 18px 0 0; font-size: 0.72rem; line-height: 1.5; color: rgba(255, 255, 255, 0.4); } @media (max-width: 480px) { .agegate-card { padding: 26px 20px; } }