/** * Darealmop_AgeGate — Gate Structural Skeleton * * STRUCTURE ONLY — this stylesheet ships NO appearance. It defines the * fail-closed visibility mechanic, the full-viewport blocking backdrop, the * centred modal placement and the inner layout. Every painted value is a * `--dm-age-*` custom property declared with NO literal fallback (CONVENTIONS * §7): a theme that sets no tokens gets an unpainted-but-functional gate, and * a theme re-skins purely by setting tokens on `:root`. * * TOKEN CONTRACT — the frozen `--dm-age-*` set (v2.0.0; additions are minor, * removals/renames are major). Two layers, standard waterfall * (per-surface → module-family → nothing): * * Family layer (shared, leaf — set these once to paint the whole gate): * --dm-age-backdrop-bg --dm-age-bg --dm-age-text --dm-age-text-muted * --dm-age-accent --dm-age-accent-text * --dm-age-radius --dm-age-shadow --dm-age-font * * Per-surface layer (`--dm-age-gate-*`, overrides the family value): * backdrop: --dm-age-gate-backdrop-bg * panel: --dm-age-gate-bg --dm-age-gate-text --dm-age-gate-radius * --dm-age-gate-shadow --dm-age-gate-font * title: --dm-age-gate-title-color --dm-age-gate-title-size * --dm-age-gate-title-weight * message: --dm-age-gate-msg-size --dm-age-gate-text-muted * buttons: --dm-age-gate-btn-radius --dm-age-gate-btn-border * confirm: --dm-age-gate-confirm-bg --dm-age-gate-confirm-text * --dm-age-gate-confirm-border * decline: --dm-age-gate-decline-bg --dm-age-gate-decline-text * --dm-age-gate-decline-border * back: --dm-age-gate-back-bg --dm-age-gate-back-text * --dm-age-gate-back-border (each falls back to its decline twin) * * FAIL-CLOSED: the gate and backdrop are VISIBLE by default and hidden only * when carries `.darealmop-age-ok` — added by gate.js in once a * valid confirmation cookie is present, before first paint. A visitor with JS * disabled keeps the content blocked. NOTE the no-fallback rule means the * *visual obscuring* of the page needs `--dm-age-backdrop-bg` (or the * per-surface twin) to be set by the theme — interaction blocking, scroll * lock and the focus trap work regardless, but an unthemed install shows a * transparent backdrop. Every shipping theme MUST set the backdrop token. * * Functional tokens this skeleton reads (mechanics, not appearance — these * keep their numeric fallbacks; a gate with `z-index: auto` could stack under * theme chrome and stop blocking, which would be a functional failure): * --dm-age-gate-z gate stacking (numeric fallback 10000) * --dm-age-gate-z-backdrop backdrop stacking (numeric fallback 9999) * --dm-age-gate-blur backdrop blur radius (0px = none) */ /* ═══════════════════════════════════════════════════════════════ FAIL-CLOSED HIDE — only a valid confirmation removes the gate. ═════════════════════════════════════════════════════════════ */ .darealmop-age-ok .dm-age-gate, .darealmop-age-ok .dm-age-gate-backdrop { display: none !important; } /* ═══════════════════════════════════════════════════════════════ BACKDROP — blocks all interaction with the page behind it. pointer-events: auto (the default) is deliberate: clicks land on the backdrop, never on the content underneath. The visitor must make an explicit choice. The backdrop carries NO colour of its own — the theme paints the tint via --dm-age-gate-backdrop-bg / --dm-age-backdrop-bg. backdrop-filter lives on ::before so the gate (a sibling) stays sharp (same isolation trick as Darealmop_Gdpr). ═════════════════════════════════════════════════════════════ */ .dm-age-gate-backdrop { position: fixed; inset: 0; z-index: var(--dm-age-gate-z-backdrop, 9999); background: var(--dm-age-gate-backdrop-bg, var(--dm-age-backdrop-bg)); } .dm-age-gate-backdrop::before { content: ''; position: absolute; inset: 0; backdrop-filter: blur(var(--dm-age-gate-blur, 0px)); -webkit-backdrop-filter: blur(var(--dm-age-gate-blur, 0px)); } /* ═══════════════════════════════════════════════════════════════ GATE — centred modal, always above the backdrop. ═════════════════════════════════════════════════════════════ */ .dm-age-gate { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--dm-age-gate-z, 10000); box-sizing: border-box; width: min(480px, calc(100vw - 32px)); max-height: 90vh; overflow-y: auto; background: var(--dm-age-gate-bg, var(--dm-age-bg)); color: var(--dm-age-gate-text, var(--dm-age-text)); border-radius: var(--dm-age-gate-radius, var(--dm-age-radius)); box-shadow: var(--dm-age-gate-shadow, var(--dm-age-shadow)); font-family: var(--dm-age-gate-font, var(--dm-age-font)); } .dm-age-gate * { box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════ INNER LAYOUT ═════════════════════════════════════════════════════════════ */ /* CRITICAL: the question / declined panels toggle via the [hidden] attribute (gate.js showView). Because `.dm-age-gate__panel` sets `display:flex` below, it would override the UA-default `[hidden]{display:none}` (equal specificity, author wins) — leaving BOTH panels on screen at once and making the "I am under 18" toggle appear to do nothing. Force [hidden] to win. */ .dm-age-gate [hidden] { display: none !important; } .dm-age-gate__panel { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 4vw, 36px); text-align: center; } .dm-age-gate__title { margin: 0; line-height: 1.2; /* Unset token ⇒ the declaration computes to `unset` ⇒ inherits the panel text colour — the correct no-fallback default for a heading. */ color: var(--dm-age-gate-title-color); font-size: var(--dm-age-gate-title-size); font-weight: var(--dm-age-gate-title-weight); } .dm-age-gate__message, .dm-age-gate__declined-message { margin: 0; line-height: 1.6; font-size: var(--dm-age-gate-msg-size); color: var(--dm-age-gate-text-muted, var(--dm-age-text-muted)); } /* ═══════════════════════════════════════════════════════════════ BUTTONS — layout only; the theme owns fill, text colour, borders. An unset border token computes to `unset` (initial ⇒ no border), which also neutralises the UA button border — no literal needed. ═════════════════════════════════════════════════════════════ */ .dm-age-gate__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .dm-age-gate__btn { flex: 1 1 auto; min-width: 140px; padding: 12px 20px; cursor: pointer; line-height: 1.2; font: inherit; border: var(--dm-age-gate-btn-border); border-radius: var(--dm-age-gate-btn-radius, var(--dm-age-gate-radius, var(--dm-age-radius))); } .dm-age-gate__btn--confirm { background: var(--dm-age-gate-confirm-bg, var(--dm-age-accent)); color: var(--dm-age-gate-confirm-text, var(--dm-age-accent-text)); border: var(--dm-age-gate-confirm-border, var(--dm-age-gate-btn-border)); } .dm-age-gate__btn--decline { background: var(--dm-age-gate-decline-bg); color: var(--dm-age-gate-decline-text); border: var(--dm-age-gate-decline-border, var(--dm-age-gate-btn-border)); } /* "Go back" is the same secondary role as "No" — each token falls back to its decline twin so a theme styles the pair once. */ .dm-age-gate__btn--back { background: var(--dm-age-gate-back-bg, var(--dm-age-gate-decline-bg)); color: var(--dm-age-gate-back-text, var(--dm-age-gate-decline-text)); border: var(--dm-age-gate-back-border, var(--dm-age-gate-decline-border)); } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE — stack the buttons on tight phones. ═════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .dm-age-gate { width: calc(100vw - 24px); } .dm-age-gate__btn { flex-basis: 100%; } }