/** * Storefront Gate — age-verification modal. * Bound to the site's --ly-* design tokens with hard fallbacks so it also * renders correctly stand-alone. */ /* Hidden by default; the head arm-script adds .sfg-armed to when the visitor hasn't verified, which reveals it and locks scroll. */ .sfg-gate { display: none; } html.sfg-armed { overflow: hidden; } html.sfg-armed .sfg-gate { display: flex; position: fixed; inset: 0; z-index: var(--ly-z-modal, 3000); align-items: center; justify-content: center; padding: 24px; } .sfg-gate__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(var(--ly-blur-veil, 14px)); backdrop-filter: blur(var(--ly-blur-veil, 14px)); } .sfg-gate__panel { position: relative; width: 100%; max-width: 640px; box-sizing: border-box; padding: 40px 44px 36px; background: var(--ly-color-surface-alt, #1b0e13); border: 1px solid var(--ly-color-border, rgba(245, 237, 230, 0.12)); border-radius: var(--ly-radius-md, 20px); box-shadow: var(--ly-shadow-float, 0 18px 50px rgba(0, 0, 0, 0.55)); color: var(--ly-color-text, #f5ede6); text-align: left; animation: sfg-rise var(--ly-duration-slow, 240ms) var(--ly-ease-standard, cubic-bezier(0.2, 0, 0, 1)) both; } @keyframes sfg-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .sfg-gate__close { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 0; border-radius: var(--ly-radius-pill, 999px); color: var(--ly-color-text-muted, rgba(245, 237, 230, 0.70)); cursor: pointer; transition: color var(--ly-duration-fast, 150ms) ease, background var(--ly-duration-fast, 150ms) ease; } .sfg-gate__close:hover { color: var(--ly-color-text, #f5ede6); background: rgba(245, 237, 230, 0.06); } .sfg-gate__eyebrow { margin: 0 0 14px; font-family: var(--ly-text-body, 'Manrope', system-ui, sans-serif); font-size: 0.72rem; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: var(--ly-letter-spacing-eyebrow, 0.22em); color: var(--ly-color-primary, #e0102f); } .sfg-gate__title { margin: 0 0 14px; font-family: var(--ly-text-display, 'Playfair Display', Georgia, serif); font-weight: 700; font-size: 2rem; line-height: 1.15; color: var(--ly-color-text, #f5ede6); } .sfg-gate__body { margin: 0 0 28px; max-width: 46ch; font-family: var(--ly-text-body, 'Manrope', system-ui, sans-serif); font-size: 1rem; line-height: 1.6; color: var(--ly-color-text-muted, rgba(245, 237, 230, 0.70)); } .sfg-gate__actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; } .sfg-gate__btn { appearance: none; font-family: var(--ly-text-body, 'Manrope', system-ui, sans-serif); font-size: 0.95rem; font-weight: 600; line-height: 1; padding: 14px 28px; border-radius: var(--ly-radius-pill, 999px); cursor: pointer; transition: transform var(--ly-duration-fast, 150ms) ease, background var(--ly-duration-fast, 150ms) ease, border-color var(--ly-duration-fast, 150ms) ease, box-shadow var(--ly-duration-fast, 150ms) ease; } .sfg-gate__btn--ghost { background: transparent; color: var(--ly-color-text, #f5ede6); border: 1px solid var(--ly-color-border-strong, rgba(245, 237, 230, 0.20)); } .sfg-gate__btn--ghost:hover { border-color: var(--ly-color-text, #f5ede6); transform: translateY(-1px); } .sfg-gate__btn--primary { background: var(--ly-color-primary, #e0102f); color: var(--ly-color-text-on-primary, #ffffff); border: 1px solid var(--ly-color-primary, #e0102f); box-shadow: var(--ly-shadow-glow, 0 0 0 1px rgba(224, 16, 47, 0.45), 0 10px 34px rgba(224, 16, 47, 0.28)); } .sfg-gate__btn--primary:hover { background: var(--ly-color-primary-hover, #f5324d); border-color: var(--ly-color-primary-hover, #f5324d); transform: translateY(-1px); } .sfg-gate__btn--primary:active { background: var(--ly-color-primary-dark, #b00c25); transform: translateY(0); box-shadow: none; } @media (max-width: 560px) { .sfg-gate__panel { padding: 32px 24px 28px; } .sfg-gate__title { font-size: 1.6rem; } .sfg-gate__actions { justify-content: stretch; } .sfg-gate__btn { flex: 1 1 auto; text-align: center; } } @media (prefers-reduced-motion: reduce) { .sfg-gate__panel { animation: none; } }