/* Age gate — 21+ verification overlay. * * The gate is a native . It is styled to fill the viewport itself * rather than sitting in a separate overlay element, so the same rules cover * both states: modal via showModal() (top layer, background inerted by the * browser) and the no-JavaScript fallback, where the `open` attribute alone * keeps it visible in normal flow. * * The z-index only matters in that no-JS case — the top layer outranks every * z-index on the page. For reference the existing stack is #main-wrapper 99999, * .sidenav 999999, .sidenav-overlay 999998. */ dialog.age-gate, dialog.age-gate[open] { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: var(--padding, 1.5rem); border: 0; overflow-y: auto; color: var(--color-text, #000); /* The dialog is its own backdrop. ::backdrop only paints in the top layer, so relying on it would leave the no-JS fallback transparent. `top center` matches how site.css positions this same image on ; centring it instead pushes the artwork's dark band into view as a hard horizontal edge. The dimming is a layered gradient rather than background-blend-mode, which renders consistently over the artwork. */ background-color: #0a161e; background-image: linear-gradient(rgba(10, 22, 30, 0.82), rgba(10, 22, 30, 0.82)), url('../img/llc-bg.png'); background-position: top center; background-size: cover; background-repeat: no-repeat; } /* Match it anyway, so the modal state does not show the page bleeding through during the top-layer transition. */ dialog.age-gate::backdrop { background-color: #0a161e; } .age-gate__dialog { width: 100%; max-width: 34rem; margin: auto; padding: 2.5rem 2rem; border-radius: 8px; background-color: var(--color-white, #fff); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); text-align: center; } .age-gate__logo { max-width: 200px; height: auto; margin: 0 auto 1.5rem; } .age-gate__heading { margin: 0 0 1rem; font-size: 1.75rem; line-height: 1.25; color: var(--color-text, #000); } .age-gate__text { margin: 0 0 2rem; color: var(--color-text-grey, #464646); } .age-gate__text p:last-child { margin-bottom: 0; } .age-gate__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .age-gate__form { margin: 0; } /* Reset rather than inherit — Materialize styles bare buttons and anchors. */ .age-gate__button { display: inline-block; padding: 0.75rem 1.75rem; border: solid 2px var(--color-red, #ef6323); border-radius: 20px; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .age-gate__button--yes { background-color: var(--color-red, #ef6323); color: var(--color-white, #fff); } /* Hover only — NOT :focus. showModal() focuses this button on open, so a focus-driven colour change would repaint the primary action in the "pressed" colour on first render and stop it reading as primary. Focus is signalled by the ring below instead. */ .age-gate__button--yes:hover { background-color: var(--color-dark-purple, #142530); border-color: var(--color-dark-purple, #142530); color: var(--color-white, #fff); } .age-gate__button--no { background-color: transparent; color: var(--color-text, #000); } .age-gate__button--no:hover { background-color: var(--color-light-grey, #efefef); color: var(--color-text, #000); } /* Keep the focus ring visible — this dialog is keyboard-operated by design. */ .age-gate__button:focus-visible { outline: 3px solid var(--color-blue, #0965a6); outline-offset: 2px; } /* Set on server-side while the gate is up, so the page behind cannot be scrolled even before JavaScript runs. Removed on dismissal. */ .age-gate-locked, .age-gate-locked body { overflow: hidden; } @media only screen and (max-width: 480px) { .age-gate__dialog { padding: 2rem 1.25rem; } .age-gate__heading { font-size: 1.4rem; } .age-gate__actions { flex-direction: column; } .age-gate__button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .age-gate__button { transition: none; } }