/* ============================================================================ THE 21+ PAGE — its age gate, and its hero Loaded by beer-wine-liquor.html and nowhere else, so the other eight pages pay nothing for it. The mechanism, because it is easy to get backwards: - The page content is REAL HTML. It is not injected by script. That keeps it readable with JavaScript off and indexable by search engines, which is the honest position: a client-side gate is a convention, not a lock. - A tiny inline script in sets [data-age-gate="closed"] on BEFORE first paint when the visitor has not answered. Without it the shelves would flash into view for a frame before the gate arrived. - Everything here therefore hangs off that attribute. No attribute, no gate: JavaScript disabled means the page simply reads, rather than showing a permanently blank screen, which would be the worse failure. The look is the same enamel sign as the rest of the site: cream board, heavy condensed capitals, a gold rule. It is deliberately NOT a grey system modal. ========================================================================== */ /* ---- this page's hero photograph --------------------------------------- Overrides the shared .ed-hero__bg, which is the forecourt. Same two-rule shape the shared sheet uses: a JPEG every browser can read, and the WebP that every browser actually gets. Both filenames were checked to exist before being written here. The pipeline emits a JPEG only at the fallback width (and at 1200 for images flagged "og"), so referencing hero-shelves-1600.jpg — which looks like it ought to exist — would have 404'd the hero and left a black box. Verify, do not pattern-match: images/derived is not a complete grid. */ [data-page="liquor"] .ed-hero__bg { background: url('../images/derived/hero-shelves-800.jpg') center/cover no-repeat; } .webp [data-page="liquor"] .ed-hero__bg { background: url('../images/derived/hero-shelves-1600.webp') center/cover no-repeat; } /* ---- the gate ----------------------------------------------------------- */ /* Lock the page behind the gate. `overflow: hidden` on both elements is what stops iOS Safari scrolling the body underneath the overlay. */ html[data-age-gate="closed"], html[data-age-gate="closed"] body { overflow: hidden; } /* Belt and braces with the `inert` attribute the script sets: if a browser somehow paints before the script runs, there is nothing to read. `visibility` rather than a blur, for three reasons: a blurred wall of bottles is still a wall of bottles; `filter` on an ancestor makes it the containing block for `position: fixed`, which would unpin the nav; and hidden images are not fetched, so nobody downloads the shelves before answering. The layout is preserved, so releasing the gate does not jump. */ html[data-age-gate="closed"] [data-age-shield] { visibility: hidden; pointer-events: none; } .age-gate[hidden] { display: none; } .age-gate { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 5vw, 2rem); background: rgba(20, 23, 26, 0.82); overflow-y: auto; } .age-gate__panel { width: 100%; max-width: 30rem; background: var(--bg-primary); border: 1px solid var(--border-glass); border-top: 4px solid var(--sign-gold); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); padding: clamp(1.5rem, 5vw, 2.25rem); text-align: center; } /* Two panels share the box: the question, and the answer for anyone under 21. Swapped by [data-age-state] rather than by rebuilding the markup. */ .age-gate[data-age-state="declined"] [data-age-ask-panel] { display: none; } .age-gate:not([data-age-state="declined"]) [data-age-decline-panel] { display: none; } .age-gate__mark { display: block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.9rem; } .age-gate__title { font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 700; line-height: 1.08; letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance; color: var(--text-primary); margin: 0; } .age-gate__title em { font-style: normal; color: var(--sign-red); } .age-gate__lead { margin: 0.75rem 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--text-secondary); } .age-gate__actions { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.5rem 0 0; } .age-gate__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.85rem 1.2rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .age-gate__btn--yes { background: var(--accent); color: #ffffff; border: 1px solid var(--accent); } .age-gate__btn--yes:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .age-gate__btn--no { background: transparent; color: var(--text-primary); border: 1px solid var(--border-glass-hover); } .age-gate__btn--no:hover { border-color: var(--text-primary); } .age-gate__btn:focus-visible { outline: 3px solid var(--sign-gold); outline-offset: 2px; } .age-gate__note { margin: 1.2rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); } /* ---- the under-21 panel ------------------------------------------------- Not a dead end. Everything listed is something this store genuinely sells and has a photograph of, so the visit is still worth something to both sides. */ .age-gate__alt { display: grid; gap: 1px; margin: 1.4rem 0 0; background: var(--border-glass); border: 1px solid var(--border-glass); text-align: left; } .age-gate__alt a { display: block; background: var(--bg-card); padding: 0.8rem 1rem; text-decoration: none; color: var(--text-primary); transition: background 0.2s ease; } .age-gate__alt a:hover { background: var(--bg-glass-hover); } .age-gate__alt a:focus-visible { outline: 3px solid var(--sign-gold); outline-offset: -3px; } .age-gate__alt strong { display: block; font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .age-gate__alt span { display: block; font-size: 0.82rem; line-height: 1.4; color: var(--text-secondary); } @media (prefers-reduced-motion: reduce) { .age-gate__btn, .age-gate__alt a { transition: none; } }