/* ============================================================ Nova Age Gate — site-entry 21+ verification overlay (inc/nova-age-gate.php + assets/js/nova-age-gate.js) Full-screen overlay shown on first visit. Hidden for visitors who already hold the `nova_age_verified` cookie via the `nova-age-verified` class the head script adds to . ============================================================ @package nova-peptides ============================================================ */ .nova-age-gate { position: fixed; inset: 0; /* Max stacking value — must sit above every other overlay, including the Omnisend welcome popup (its `.omnisend-form--container` is fixed at z-index 200000). With our opaque backdrop on top, any marketing popup stays hidden behind the gate and is revealed only after the visitor verifies and the gate is dismissed. */ z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } /* Verified visitors: overlay never shows (class set pre-paint in , and again by the JS after a "Yes" click). */ html.nova-age-verified .nova-age-gate { display: none !important; } /* Lock page scroll while the gate is up (i.e. not yet verified). */ html:not(.nova-age-verified) body { overflow: hidden !important; } .nova-age-gate__backdrop { position: absolute; inset: 0; background: rgba(12, 1, 26, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .nova-age-gate__card { position: relative; z-index: 1; width: 100%; max-width: 460px; box-sizing: border-box; padding: 40px 36px; text-align: center; background: var(--nova-bg-primary, #3e1e6d); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--nova-radius-card, 20px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5); } .nova-age-gate__logo { height: 44px; width: auto; display: block; margin: 0 auto 24px; } .nova-age-gate__title { font-family: var(--nova-font-heading); font-size: 26px; line-height: 1.2; font-weight: 700; color: #ffffff; margin: 0 0 12px; } .nova-age-gate__desc { font-family: var(--nova-font-body); font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); margin: 0 0 20px; } .nova-age-gate__question { font-family: var(--nova-font-heading); font-size: 18px; font-weight: 600; color: #ffffff; margin: 0 0 24px; } .nova-age-gate__actions { display: flex; flex-direction: column; gap: 12px; } .nova-age-gate__btn { font-family: var(--nova-font-body); font-size: 15px; font-weight: 600; line-height: 1.2; padding: 15px 24px; border-radius: var(--nova-radius-button, 40px); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease; border: 1.5px solid transparent; } .nova-age-gate__btn--yes { background: var(--nova-accent, #8a4fff); color: #ffffff; border-color: var(--nova-accent, #8a4fff); } .nova-age-gate__btn--yes:hover { background: var(--nova-accent-hover, #7a3fef); border-color: var(--nova-accent-hover, #7a3fef); } .nova-age-gate__btn--no, .nova-age-gate__btn--back { background: transparent; color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.25); } .nova-age-gate__btn--no:hover, .nova-age-gate__btn--back:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; border-color: rgba(255, 255, 255, 0.45); } .nova-age-gate__btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .nova-age-gate__state[hidden] { display: none !important; } /* Blocked state reads a touch more serious. */ .nova-age-gate__state[data-age-state="blocked"] .nova-age-gate__title { color: #ff8f8f; } @media (max-width: 480px) { .nova-age-gate { padding: 16px; } .nova-age-gate__card { padding: 32px 22px; } .nova-age-gate__title { font-size: 22px; } }