/** * Age gate overlay. * * Colour comes from the active theme's design tokens (bespoke sets these in * theme.json); hex fallbacks keep it legible if the theme is ever inactive. * The gate is a fixed layer over the page — content stays in the DOM beneath * it, so crawlers still index the page. */ .gsag { position: fixed; inset: 0; z-index: 2147483000; /* above sticky headers, cookie bars, embeds */ display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--wp--preset--color--ink-deep, #0B1520); background: color-mix(in srgb, var(--wp--preset--color--ink-deep, #0B1520) 92%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Set by JS on while the gate is up, to stop the page scrolling. */ html.gsag-locked, html.gsag-locked body { overflow: hidden; } .gsag__card { width: min(30rem, 100%); text-align: center; padding: clamp(1.75rem, 5vw, 2.75rem); background: var(--wp--preset--color--ink-raised, #273647); border: 1px solid var(--wp--custom--rule, rgba(242, 237, 228, 0.14)); color: var(--wp--preset--color--cream, #F5F1E8); } .gsag__eyebrow { margin: 0 0 1rem; font-family: var(--wp--preset--font-family--util, Archivo, system-ui, sans-serif); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--muted, #949CA4); } .gsag__q { margin: 0; font-family: var(--wp--preset--font-family--display, Anton, Impact, sans-serif); font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.05; letter-spacing: 0.01em; color: var(--wp--preset--color--cream, #F5F1E8); } .gsag__actions { display: flex; gap: 0.75rem; justify-content: center; margin: 1.5rem 0 0; } .gsag__btn { appearance: none; cursor: pointer; font-family: var(--wp--preset--font-family--util, Archivo, system-ui, sans-serif); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.85rem 1.5rem; border: 1px solid var(--wp--preset--color--gold, #B78500); transition: background-color 0.15s ease, color 0.15s ease; } .gsag__btn--yes { background: var(--wp--preset--color--gold, #B78500); color: var(--wp--preset--color--ink, #122335); } .gsag__btn--yes:hover { background: transparent; color: var(--wp--preset--color--yellow, #FFCB02); } .gsag__btn--no { background: transparent; color: var(--wp--preset--color--cream, #F5F1E8); border-color: var(--wp--custom--rule, rgba(242, 237, 228, 0.14)); } .gsag__btn--no:hover { border-color: var(--wp--preset--color--cream, #F5F1E8); } .gsag__btn:focus-visible { outline: 2px solid var(--wp--preset--color--yellow, #FFCB02); outline-offset: 2px; } .gsag__legal { margin: 1.25rem 0 0; font-family: var(--wp--preset--font-family--util, Archivo, system-ui, sans-serif); font-size: 0.75rem; color: var(--wp--preset--color--muted, #949CA4); } @media (prefers-reduced-motion: reduce) { .gsag { backdrop-filter: none; -webkit-backdrop-filter: none; } .gsag__btn { transition: none; } }