/* ─── age-gate ──────────────────────────────────────────────────────────────── * Standalone: loaded by both sub-sites (root tools and mistress/lara-nutty), * which have different design tokens. Every var() therefore carries a literal * fallback, so the gate looks right even where the tokens do not exist. * Loaded in before the site stylesheet: the overlay must be styled the * moment it paints, never a flash of unstyled text over adult content. */ /* Set on by age-gate.js while the head is still parsing, so this applies * before the body paints. Two jobs: * - scroll lock, so the page cannot be read around the dialog; * - hide the page content until the visitor confirms. * `visibility` (not `display`) keeps the layout intact, so removing the class * reveals the page with no reflow. The dialog re-enables visibility on itself. * * Fail-open by design: with JavaScript disabled the class is never added and * the site stays readable. A gate that blanks the page for no-JS visitors would * hide the site from crawlers too — and this is self-declared confirmation, not * an access-control mechanism. */ html.age-gate-open, html.age-gate-open body { overflow: hidden; } html.age-gate-open body > *:not(#age-gate) { visibility: hidden; } html.age-gate-open #age-gate { visibility: visible; } #age-gate { position: fixed; inset: 0; z-index: 2147483647; /* above any nav, modal or embed on the page */ display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: var(--bg, #0d0d0d); /* Opaque, not translucent: nothing behind it may be legible. */ } #age-gate .age-gate-box { width: 100%; max-width: 34rem; padding: 2rem 1.75rem; text-align: center; background: var(--bg-card, #16161a); border: 1px solid var(--border2, rgba(176, 38, 255, .30)); border-radius: var(--radius, 16px); color: var(--text, #f3eefb); font-family: var(--font, system-ui, sans-serif); } #age-gate h1 { margin: 0 0 .85rem; font-size: 1.5rem; line-height: 1.2; color: var(--text, #f3eefb); } #age-gate p { margin: 0 0 1.4rem; font-size: .97rem; line-height: 1.6; color: var(--text-muted, #9b93ad); } #age-gate .age-gate-enter { display: block; width: 100%; padding: .85rem 1.2rem; font: inherit; font-weight: 700; color: #fff; background: var(--purple, #b026ff); border: 0; border-radius: var(--radius-sm, 9px); cursor: pointer; } #age-gate .age-gate-enter:hover { filter: brightness(1.12); } #age-gate .age-gate-leave { display: inline-block; margin-top: .9rem; font-size: .93rem; color: var(--text-muted, #9b93ad); text-decoration: underline; } #age-gate .age-gate-note { margin: 1.3rem 0 0; font-size: .8rem; color: var(--text-dim, #5a5470); } #age-gate :focus-visible { outline: 2px solid var(--neon, #39ff14); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { #age-gate { animation: age-gate-in .12s ease-out; } @keyframes age-gate-in { from { opacity: 0; } to { opacity: 1; } } }