/* * Age / research-use acknowledgement gate. * * Renders a centred modal over a blurred overlay, mirroring the cart-drawer * overlay treatment and the theme's button/typography tokens. The gate is * visible by default; the inline script toggles `age-gate-acknowledged` * (hide up-front) or `age-gate-locked` (scroll lock) on the element. */ .age-gate-acknowledged age-gate.age-gate { display: none; } .age-gate-locked, .age-gate-locked body { overflow: hidden; } age-gate.age-gate { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: calc(var(--gap, 8px) * 2); } .age-gate__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 0; } .age-gate__dialog { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: calc(100vh - var(--gap, 8px) * 4); overflow-y: auto; background: var(--color-background, #fff); color: var(--color-text, #000); border: 1px solid var(--color-border, #000); border-radius: var(--border-radius-button, 0); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .age-gate__inner { padding: calc(var(--gap, 8px) * 4); } .age-gate__title { margin: 0 0 calc(var(--gap, 8px) * 3); text-align: center; font-family: var(--font-headline); font-style: var(--font-headline-style); font-weight: var(--font-headline-weight); font-size: var(--font-headline-size); text-transform: var(--font-headline-transform, none); letter-spacing: var(--font-headline-letter-spacing, normal); line-height: var(--font-headline-line-height, 1.1); color: var(--color-headings-text, #000); } .age-gate__form { display: flex; flex-direction: column; gap: calc(var(--gap, 8px) * 3); } /* Custom checkbox built around a visually-hidden native input. */ .age-gate__check { display: flex; align-items: flex-start; gap: calc(var(--gap, 8px) * 1.5); cursor: pointer; } .age-gate__checkbox { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .age-gate__check-box { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; background: var(--color-input-bg, #fff); border: 1px solid var(--color-border, #000); border-radius: 2px; position: relative; transition: background 0.2s ease, border-color 0.2s ease; } .age-gate__check-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--color-button-primary-text, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.15s ease; } .age-gate__checkbox:checked + .age-gate__check-box { background: var(--color-button-primary-background, #151515); border-color: var(--color-button-primary-background, #151515); } .age-gate__checkbox:checked + .age-gate__check-box::after { transform: rotate(45deg) scale(1); } .age-gate__checkbox:focus-visible + .age-gate__check-box { outline: 2px solid var(--color-border, #000); outline-offset: 2px; } .age-gate__check-text { font-family: var(--font-base); font-style: var(--font-base-style); font-weight: var(--font-base-weight); font-size: max(13px, calc(var(--font-base-size) - 1px)); line-height: var(--font-base-line-height, 1.5); letter-spacing: var(--font-base-letter-spacing, normal); color: var(--color-body-text, #000); } .age-gate__submit { margin-top: calc(var(--gap, 8px) * 1); } @media (max-width: 480px) { .age-gate__inner { padding: calc(var(--gap, 8px) * 3); } }