/*! * AAL Age Gate 3.2.1 -- front-end styles * American Alpha Labs Corp * * Contrast notes (WCAG 2.2 AA): * #f5f7fa on #12161c ....... 16.4:1 (body copy) * #c7ced9 on #12161c ....... 11.4:1 (small print / legal block) * #8ec5ff on #12161c ....... 10.1:1 (links) * #ffffff on #b91c26 ........ 6.5:1 (primary button) * #6b7480 border on #12161c . 3.9:1 (non-text UI component, needs 3:1) * The legal block is never set below 0.9375rem (15px). The gate this replaces * set it at 11.5px, which was the accessibility weak point named in the draft. * * Motion: the mark is animated with `transform` only, so it is composited on the * GPU and never triggers layout or paint. Nothing else in this file animates a * layout property. * * Layout: the modal is usable at 320px — single-column buttons, fluid padding, * no fixed widths anywhere. */ .aal-ag-root { --aal-ag-backdrop: rgba(6, 8, 11, 0.94); --aal-ag-panel-bg: #12161c; --aal-ag-text: #f5f7fa; --aal-ag-muted: #c7ced9; --aal-ag-line: #2a323d; --aal-ag-link: #8ec5ff; --aal-ag-accept-bg: #b91c26; --aal-ag-accept-bg-hover: #d1222e; --aal-ag-accept-text: #ffffff; --aal-ag-decline-border: #6b7480; --aal-ag-focus: #ffd24a; /* * The coin face. Black, per the owner's instruction — the plate used to be * #fefefe because the old mark had a solid white background baked into the * file and no alpha. The default mark is now a real transparent PNG cut from * the dark-background master, so the disc behind it is a design choice rather * than a repair, and it can be any colour. */ --aal-ag-logo-plate-bg: #000000; /* The coin's rim. Kept faint — it defines the edge of the disc against the * panel without drawing attention to itself. */ --aal-ag-logo-plate-rim: rgba(255, 255, 255, 0.16); /* Small and elegant: 44px on a 320px phone, 64px from ~580px up. */ --aal-ag-logo-size: clamp(44px, 11vw, 64px); /* * One revolution every 12 seconds. * * It was 24s from 2.x through 3.2.0, chosen when the mark rotated in the * plane of the screen — where a slow turn reads as deliberate. The coin flip * changed that: a rotateY spends much of each revolution foreshortened, so at * 24s the mark sat edge-on or near it for long stretches and the motion read * as hesitant rather than calm. 12s is the owner's call after seeing it live, * and it holds each face long enough to be read while keeping the turn * continuous. * * This is the ONLY value to change if the pace is still wrong — the light * animation is bound to the same duration and stays in phase automatically. * Lower is faster. */ --aal-ag-spin-duration: 12s; /* * Viewing distance for the flip, as a MULTIPLE of the mark's own width. * * This has to scale with the mark or the effect changes between phone and * desktop: perspective is a distance in the same units as the element, so a * fixed 700px reads very differently against a 44px mark than a 64px one. * Holding the ratio constant holds the look constant. * * 2.4x was chosen by eye against alternatives. It was 10x in the first cut of * 3.2.0 and that was the mistake: at that distance there is almost no * foreshortening difference between the near and far edge, so the mark reads * as being SQUASHED from side to side rather than turning. At 2.4x the near * edge visibly comes forward and it reads as rotation. */ --aal-ag-coin-perspective: calc(var(--aal-ag-logo-size, 64px) * 2.4); /* How dark the faces go at their most edge-on. 1 = no shading at all. */ --aal-ag-coin-shade: 0.45; position: fixed; inset: 0; z-index: 2147483000; display: block; color: var(--aal-ag-text); font-family: inherit; line-height: 1.55; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .aal-ag-root[hidden], .aal-ag-panel[hidden] { display: none !important; } /* * Page hiding. Duplicated from the inline critical CSS the plugin prints in * — that copy is what runs before this file loads; this copy keeps the * rule discoverable in the stylesheet. * * TWO THINGS ABOUT THIS RULE ARE DELIBERATE. * * 1. It is scoped to `html.aal-ag-armed`, a class added only by the plugin's * inline bootstrap. If that script never runs — a CSP, a stripped * inline block, anything at all — nothing is hidden, and the site cannot be * taken down by its own stylesheet. * 2. It hides with `visibility: hidden`, not `display: none`. Both remove the * subtree from the accessibility tree, so a screen-reader user is not read * the storefront through the overlay; but `visibility` keeps the boxes laid * out, so a slider, a sticky header or a WooCommerce form that measures * itself while initialising measures real dimensions. Nothing is ever * detached from the document — see assets/js/aal-age-gate.js. */ html.aal-ag-armed body.aal-ag-gated { overflow: hidden; } html.aal-ag-armed body.aal-ag-gated > *:not(#aal-age-gate-root):not(#wpadminbar) { visibility: hidden !important; } /* * The pointer-events half of `inert`, including on browsers too old to * implement the attribute — the script's polyfill path adds .aal-ag-inert and * manages tabindex and aria-hidden there. */ [inert], .aal-ag-inert { pointer-events: none !important; } .aal-ag-backdrop { position: absolute; inset: 0; background: var(--aal-ag-backdrop); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .aal-ag-viewport { position: relative; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 40px); padding-top: max(clamp(12px, 3vw, 40px), env(safe-area-inset-top)); padding-bottom: max(clamp(12px, 3vw, 40px), env(safe-area-inset-bottom)); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .aal-ag-panel { position: relative; box-sizing: border-box; width: 100%; max-width: 660px; margin: auto; padding: clamp(18px, 4vw, 36px); background: var(--aal-ag-panel-bg); border: 1px solid var(--aal-ag-line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } /* ------------------------------------------------------------------- Logo */ .aal-ag-logo-wrap { display: flex; justify-content: center; margin: 0 0 16px; text-align: center; } /* * The coin face: a black disc, 1.5x the width of the mark. * * The 1.5x is inherited from when this plate was hiding a white-background PNG, * and it is kept because it is still the right number. A square turning about * its centre sweeps a circle of 1.414x its width, so even at the widest point of * the flip the mark stays inside the disc; and the mark's furthest ink sits at * about 1.06x its half-width, so it never crowds the rim. Nothing is clipped — * the disc is larger than the image, it does not crop it. * * This element also carries the perspective for the flip. Perspective must live * on the PARENT of the rotating element, not on the element itself, or every * face shares one flat vanishing point and the coin reads as a squash rather * than a turn. */ .aal-ag-logo-plate { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: calc(var(--aal-ag-logo-size, 64px) * 1.5); height: calc(var(--aal-ag-logo-size, 64px) * 1.5); border-radius: 50%; background: var(--aal-ag-logo-plate-bg, #000000); box-shadow: 0 0 0 1px var(--aal-ag-logo-plate-rim, rgba(255, 255, 255, 0.16)); perspective: var(--aal-ag-coin-perspective, 700px); } /* Float the mark with no disc behind it: filter `aal_age_gate_logo_plate` to * false. The flip still works — the perspective comes along. */ .aal-ag-logo-plate--bare { width: auto; height: auto; background: transparent; box-shadow: none; } /* * The coin. Spins about the VERTICAL axis, left to right, so the mark turns * edge-on and back like a coin standing on a table — not clockwise in the plane * of the screen, which is what this did before 3.2.0. * * `transform-style: preserve-3d` is what allows the two faces to occupy real * positions in 3D space instead of being flattened into this element's plane. It * is the one declaration the whole effect depends on, which is why the two-face * arrangement below is gated behind @supports for it. */ .aal-ag-coin { position: relative; display: block; width: var(--aal-ag-logo-size, 64px); height: var(--aal-ag-logo-size, 64px); transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; animation: aal-ag-spin var(--aal-ag-spin-duration) linear infinite; } @keyframes aal-ag-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .aal-ag-logo { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; /* no distortion if a non-square file is supplied */ transform-origin: 50% 50%; } /* * Fallback first, enhancement second. * * Without `preserve-3d` the two images would stack on top of each other and the * back one would simply cover the front. So face B does not exist unless the * browser can actually place it in 3D. In that fallback the coin still animates * `rotateY`, which without 3D context renders as a horizontal squash-and-stretch * — not the intended effect, but a coherent one, and the mark stays readable * throughout because there is no back face to turn towards the viewer. */ .aal-ag-logo--face-b { display: none; } /* * The light. * * Perspective alone was not enough — the mark still read as a squash rather than * a turn. This is the cue that was missing: real metal loses light as it turns * away from you, and the eye uses that far more than it uses foreshortening. * * One period of this curve spans a HALF revolution, which is why the same * animation can drive both faces unchanged: over one full turn it is brightest * at 0°, 180° and 360° — the two face-on moments — and darkest at 90° and 270°, * where whichever face is showing is edge-on and about to hand over. * * `filter` is applied to the faces and never to .aal-ag-coin. A filter on the * coin would flatten its `transform-style: preserve-3d` and collapse the whole * effect into two stacked flat images. */ @keyframes aal-ag-coin-light { 0% { filter: brightness(1); } 25% { filter: brightness(var(--aal-ag-coin-shade, 0.45)); } 50% { filter: brightness(1); } 75% { filter: brightness(var(--aal-ag-coin-shade, 0.45)); } 100% { filter: brightness(1); } } @supports (transform-style: preserve-3d) { .aal-ag-logo--face-a, .aal-ag-logo--face-b { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; animation: aal-ag-coin-light var(--aal-ag-spin-duration) linear infinite; } /* * Pre-rotated half a turn. When the coin itself reaches 180° this face is * pointing at the viewer and its own rotation has cancelled the coin's, so * the mark reads the right way round rather than mirrored. The handover * happens at 90° and 270°, where both faces are exactly zero pixels wide. */ .aal-ag-logo--face-b { transform: rotateY(180deg); } } /* -------------------------------------------------------------- Typography */ .aal-ag-title { margin: 0 0 14px; text-align: center; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--aal-ag-text); } .aal-ag-subhead { margin: 20px 0 8px; font-size: 1rem; font-weight: 700; color: var(--aal-ag-text); } .aal-ag-desc, .aal-ag-copy { color: var(--aal-ag-muted); font-size: 0.9375rem; } .aal-ag-copy p { margin: 0 0 12px; } .aal-ag-copy strong { color: var(--aal-ag-text); font-weight: 700; } .aal-ag-list { margin: 0 0 12px; padding-left: 1.25em; list-style: disc; } .aal-ag-list li { margin: 0 0 8px; } .aal-ag-policy { margin-top: 14px; } .aal-ag-link, .aal-ag-linkbtn { color: var(--aal-ag-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .aal-ag-link:hover, .aal-ag-linkbtn:hover { text-decoration-thickness: 2px; } .aal-ag-linkbtn { display: inline; padding: 0; margin: 0; background: none; border: 0; font: inherit; cursor: pointer; } /* ----------------------------------------------------------------- Actions */ .aal-ag-actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 22px 0 4px; } .aal-ag-btn { display: block; width: 100%; min-height: 56px; /* comfortably above the 44px minimum */ padding: 16px 18px; margin: 0; font-family: inherit; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; text-align: center; border-radius: 10px; border: 2px solid transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: manipulation; } .aal-ag-btn--accept { background: var(--aal-ag-accept-bg); color: var(--aal-ag-accept-text); border-color: var(--aal-ag-accept-bg); } .aal-ag-btn--accept:hover { background: var(--aal-ag-accept-bg-hover); border-color: var(--aal-ag-accept-bg-hover); } .aal-ag-btn--decline { background: transparent; color: var(--aal-ag-text); border-color: var(--aal-ag-decline-border); } .aal-ag-btn--decline:hover { border-color: var(--aal-ag-text); } /* ------------------------------------------------------------------- Focus */ .aal-ag-root :focus { outline: 3px solid var(--aal-ag-focus); outline-offset: 3px; } .aal-ag-root :focus:not(:focus-visible) { outline-color: transparent; } .aal-ag-root :focus-visible { outline: 3px solid var(--aal-ag-focus); outline-offset: 3px; } /* * The heading receives focus programmatically when the dialog opens. Browsers * are inconsistent about matching :focus-visible in that case, so the ring is * forced on here — it is the only "you are here" cue a sighted keyboard user * gets at that moment. Declared last so it beats the :not(:focus-visible) rule * above at equal specificity. */ .aal-ag-root .aal-ag-title:focus { outline: 3px solid var(--aal-ag-focus); outline-offset: 4px; border-radius: 4px; } /* -------------------------------------------------------- Enter-key hint */ /* * #aal-ag-enter-hint is screen-reader-only until the visitor presses Enter on * the confirm button, at which point it becomes visible so a sighted keyboard * user is told why nothing happened. */ .aal-ag-enter-hint--shown { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--aal-ag-decline-border); border-radius: 10px; font-size: 0.9375rem; color: var(--aal-ag-text); background: rgba(255, 210, 74, 0.08); } /* ---------------------------------------------------------------- noscript */ .aal-ag-noscript { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--aal-ag-line); border-radius: 10px; font-size: 0.9375rem; color: var(--aal-ag-muted); } .aal-ag-noscript p { margin: 0 0 8px; } .aal-ag-noscript p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------- Fail open */ /* * The watchdog in the inline bootstrap adds `html.aal-ag-failopen` when * the gate's own script has not initialised within a few seconds — blocked by a * CSP, mangled by a JS-combine, or killed by a bundle-mate that threw first. * The overlay then stops covering the viewport and becomes a static block of * disclaimer copy at the top of the page, with the confirm controls hidden * because they cannot work. * * The authoritative copy of these rules is the inline critical CSS, which does * not depend on this file having loaded at all. This copy is here so the * behaviour is discoverable in the stylesheet, and it is scoped so it can never * fire on its own. */ .aal-ag-failopen-note { display: none; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--aal-ag-line); border-radius: 10px; font-size: 0.9375rem; color: var(--aal-ag-muted); } html.aal-ag-failopen body.aal-ag-gated > *:not(#aal-age-gate-root):not(#wpadminbar) { visibility: visible !important; } html.aal-ag-failopen body.aal-ag-gated { overflow: visible !important; position: static !important; top: auto !important; } html.aal-ag-failopen .aal-ag-root { position: static !important; inset: auto !important; z-index: auto !important; background: transparent !important; } html.aal-ag-failopen .aal-ag-backdrop { display: none !important; } html.aal-ag-failopen .aal-ag-viewport { display: block !important; height: auto !important; overflow: visible !important; } html.aal-ag-failopen .aal-ag-actions { display: none !important; } html.aal-ag-failopen .aal-ag-failopen-note { display: block !important; } /* ------------------------------------------------ Screen-reader-only helper */ .aal-ag-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------------------------------------------------- Breakpoint copy swap */ /* * One modal, two copy blocks. `display: none` removes a block from the * accessibility tree as well as the render tree, so exactly one version is * announced. There is no second modal to keep in sync. */ .aal-ag-copy--wide { display: none; } .aal-ag-copy--narrow { display: block; } .aal-ag-wide-only { display: none; } @media (min-width: 600px) { .aal-ag-copy--wide { display: block; } .aal-ag-copy--narrow { display: none; } .aal-ag-wide-only { display: inline; } .aal-ag-actions { grid-template-columns: 1fr 1fr; gap: 14px; } } /* ------------------------------------------------------------ Scroll lock */ /* * iOS Safari scrolls the page behind a modal even with `overflow: hidden` on * . `position: fixed` is the half that actually stops it; the script * stores the offset in `top` and restores it with window.scrollTo() on unlock. */ body.aal-ag-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* --------------------------------------------------------- Reduced motion */ @media (prefers-reduced-motion: reduce) { /* * The animation moved from .aal-ag-logo to .aal-ag-coin in 3.2.0 when the * spin became a two-faced flip. Both are named here: the coin because that is * what actually animates now, the logo because a stale override on the old * selector is exactly the kind of thing that silently stops honouring a * reduced-motion preference. * * Stopped at 0deg, face A is towards the viewer and face B is turned away * with backface-visibility hidden, so the mark is simply still and correct. */ .aal-ag-coin, .aal-ag-logo { animation: none !important; transform: none !important; filter: none !important; will-change: auto; } /* ...except face B, whose 180° is orientation, not motion. Clearing it would * turn both faces towards the viewer and stack them. */ .aal-ag-logo--face-b { transform: rotateY(180deg) !important; } .aal-ag-root, .aal-ag-root * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------- Forced colours */ @media (forced-colors: active) { .aal-ag-panel { border: 2px solid CanvasText; } .aal-ag-btn { border: 2px solid ButtonText; } .aal-ag-root :focus-visible { outline: 3px solid Highlight; } } /* ------------------------------------------------------------------- Print */ @media print { .aal-ag-root { display: none !important; } }