/* Age restriction modal styles */ .age-modal-backdrop { position: fixed; inset: 0; background: radial-gradient(circle at top, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.98)); display: flex; align-items: center; justify-content: center; z-index: 80; } .age-modal { width: min(480px, 100% - 2.5rem); background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.98)); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-5); box-shadow: var(--shadow-lg); color: #e5e7eb; } .age-modal-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .age-modal-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: radial-gradient(circle at 30% 20%, #fee2e2 0, #ef4444 45%, #7f1d1d 100%); font-weight: 700; font-size: 0.9rem; color: #111827; } .age-modal-title { font-size: 1.4rem; margin-bottom: 0; } .age-modal-body p { font-size: 0.95rem; color: #e5e7eb; } .age-modal-note { margin-top: var(--space-2); font-size: 0.85rem; color: #cbd5f5; } .age-modal-actions { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); } @media (min-width: 480px) { .age-modal-actions { flex-direction: row; } } .age-btn { width: 100%; border-radius: 999px; padding: 0.7rem 1.4rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; } .age-btn-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-accent-purple)); color: #ffffff; box-shadow: 0 12px 32px rgba(37, 99, 235, 0.7); } .age-btn-primary:hover, .age-btn-primary:focus-visible { background: linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-gold)); } .age-btn-secondary { background: transparent; color: #e5e7eb; border-color: rgba(148, 163, 184, 0.9); } .age-btn-secondary:hover, .age-btn-secondary:focus-visible { background: rgba(15, 23, 42, 0.7); } /* When the modal is visible we want to prevent body scroll. This utility class can be toggled from JS on . */ .body-age-locked { overflow: hidden; } /* Fade out animation */ @keyframes fadeOut { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } } /* Hide the age modal with fade animation */ .age-modal-backdrop.is-hidden { animation: fadeOut 0.3s ease-out forwards; pointer-events: none; } .age-modal-backdrop[hidden] { display: none; }