/* Age gate modal + cookie consent banner. * * Default state (no cookies): both overlays are VISIBLE so the markup * works without JavaScript (graceful degradation). The server adds * class="is-age-verified" and/or "is-cookies-accepted" on when * the matching cookie is present, hiding the overlays server-side with * no flash on repeat visits. * * ui-ux-pro-max: * §1 accessibility — role=dialog, aria-modal, focus trap in JS * §2 touch targets — buttons ≥48px tall * §7 motion / reduced — brief fade in, disabled under reduced-motion */ /* ---------- Age gate modal ---------- */ .age-gate { position: fixed; inset: 0; z-index: 9000; display: flex; justify-content: center; padding: var(--space-4, 1rem); /* Scrollable overlay itself: when card is taller than the viewport (short mobile screens, zoomed text, landscape orientation), the user scrolls the overlay to reach the accept button. Paired with `margin: auto` on the card (below) — that combo stays centered when content fits AND degrades to scroll-from-top when it doesn't, unlike `align-items: center` which would clip the top. */ overflow-y: auto; overscroll-behavior: contain; /* FULLY opaque: previous 92% alpha let the cookie-consent banner (z-index: 7000) bleed through the bottom edge, making the gate look mis-aligned. With full opacity we also don't need a blur. */ background: rgb(26, 23, 22); animation: age-gate-fade-in 220ms ease-out both; } /* Hide the cookie banner while the age gate is visible. Avoids the "two stacked dark bars" visual that made users think the age card wasn't centered. Cookie consent surfaces after age verification. */ html:not(.is-age-verified) .cookie-consent { display: none; } html.is-age-verified .age-gate { display: none; } @keyframes age-gate-fade-in { from { opacity: 0; } to { opacity: 1; } } .age-gate__card { max-width: 480px; width: 100%; /* `margin: auto` is the centering trick: collapses to equal top/bottom margins when the overlay has room, and collapses to zero when it doesn't, letting overflow:auto on the overlay scroll naturally from the top of the card. Replaces the former align-items:center + max-height combo that broke on short Android viewports. */ margin: auto; padding: var(--space-5, 2rem); background: var(--color-surface-dark, #1A1716); border: 1px solid rgba(197, 165, 90, 0.28); border-radius: var(--radius-lg, 12px); box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.6); color: var(--color-text-on-dark, #F5F0EB); text-align: center; } /* Tighter layout on small / short screens. */ @media (max-width: 480px), (max-height: 620px) { .age-gate__card { padding: var(--space-4, 1.25rem); } } .age-gate__logo { display: block; width: auto; height: 56px; margin: 0 auto var(--space-3, 1.25rem); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); } @media (max-width: 480px), (max-height: 620px) { .age-gate__logo { height: 44px; margin-bottom: var(--space-2, 0.75rem); } } .age-gate__title { font-family: var(--font-italic, "Lora", Georgia, serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 5vw, 2rem); line-height: 1.2; color: var(--color-secondary, #C5A55A); margin: 0 0 var(--space-3, 1.25rem); } @media (max-width: 480px), (max-height: 620px) { .age-gate__title { margin-bottom: var(--space-2, 0.75rem); } } .age-gate__desc { color: var(--color-text-on-dark, #F5F0EB); opacity: 0.88; font-size: 1rem; line-height: 1.5; margin: 0 0 var(--space-4, 1.75rem); } @media (max-width: 480px), (max-height: 620px) { .age-gate__desc { font-size: 0.95rem; margin-bottom: var(--space-3, 1rem); } } .age-gate__actions { display: flex; flex-direction: column; gap: var(--space-2, 0.75rem); margin-bottom: var(--space-3, 1.25rem); } .age-gate__btn { min-height: 48px; font-weight: 600; letter-spacing: 0.01em; } .age-gate__btn--no { background: transparent; color: var(--color-text-on-dark, #F5F0EB); border: 1px solid rgba(197, 165, 90, 0.3); } .age-gate__btn--no:hover, .age-gate__btn--no:focus-visible { background: rgba(197, 165, 90, 0.08); border-color: var(--color-secondary, #C5A55A); } .age-gate__legal { font-size: 0.78rem; line-height: 1.5; color: var(--color-text-on-dark, #F5F0EB); opacity: 0.55; margin: 0; } @media (min-width: 520px) { .age-gate__actions { flex-direction: row; justify-content: center; } .age-gate__btn { flex: 1 1 auto; max-width: 260px; } } /* ---------- Cookie consent banner ---------- */ .cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7000; background: rgba(26, 23, 22, 0.96); color: var(--color-text-on-dark, #F5F0EB); border-top: 1px solid rgba(197, 165, 90, 0.22); box-shadow: 0 -8px 24px -8px rgba(0, 0, 0, 0.5); animation: cookie-consent-slide 300ms ease-out both; } html.is-cookies-accepted .cookie-consent { display: none; } html.is-consent-decided .cookie-consent { display: none; } @keyframes cookie-consent-slide { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .cookie-consent__inner { display: flex; flex-direction: column; gap: var(--space-2, 0.75rem); align-items: stretch; padding-block: var(--space-3, 1rem); /* Safe-area inset for notch / home indicator on iOS. */ padding-bottom: max(var(--space-3, 1rem), env(safe-area-inset-bottom)); } .cookie-consent__text { font-size: 0.9rem; line-height: 1.5; margin: 0; } .cookie-consent__headline { margin: 0 0 var(--space-1, 0.25rem); font-weight: 600; } .cookie-consent__cats { list-style: none; margin: 0 0 var(--space-1, 0.25rem); padding: 0; display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); } .cookie-consent__cat { display: flex; flex-wrap: wrap; gap: 0 var(--space-2, 0.5rem); } .cookie-consent__cat-label { color: var(--color-secondary, #C5A55A); } .cookie-consent__cat-desc { color: var(--color-text-on-dark, #F5F0EB); } .cookie-consent__copy { margin: var(--space-1, 0.25rem) 0 0; } @media (max-width: 480px) { .cookie-consent__inner { padding-block: var(--space-2, 0.75rem); } .cookie-consent__text { font-size: 0.85rem; } } .cookie-consent__link { color: var(--color-secondary, #C5A55A); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } .cookie-consent__link:hover, .cookie-consent__link:focus-visible { color: var(--color-secondary-light, #D4B96B); } .cookie-consent__actions { display: flex; justify-content: flex-end; gap: var(--space-2, 0.75rem); } .cookie-consent__btn { min-height: 44px; min-width: 140px; } @media (max-width: 480px) { .cookie-consent__actions { justify-content: stretch; } .cookie-consent__btn { flex: 1 1 auto; min-width: 0; } } @media (min-width: 720px) { .cookie-consent__inner { flex-direction: row; align-items: center; gap: var(--space-4, 1.5rem); } .cookie-consent__text { flex: 1 1 auto; } .cookie-consent__actions { flex: 0 0 auto; } } /* ---------- Body scroll lock while age gate is open ---------- */ /* Lock the underlying page (content behind the gate) so the user can't scroll past the modal, but leave the .age-gate overlay itself free to scroll (enforced by its own overflow-y: auto above). We lock , not , so the overlay — which is positioned relative to the viewport — still scrolls internally. */ html:not(.is-age-verified) body { overflow: hidden; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .age-gate, .cookie-consent { animation: none; } }