/** * WPS Age Verification — front-end gate. * * Fail-closed: the gate is VISIBLE by default. The inline head script adds * `wps-av-verified` to for returning visitors (hides the gate before * paint) or `wps-av-locked` (locks scroll). If JavaScript fails entirely, * the overlay still blocks the page. * * Values are literal on purpose — the plugin must not depend on theme SCSS. * Palette/typography mirror the theme gate this replaces: DM Sans (loaded * globally by the theme), #da3832 accept, #4a4a4a reject, black card. */ .wps-av__wrapper { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 10000; opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s linear 0.25s; } /* Verified visitors: gate never paints. */ html.wps-av-verified .wps-av__wrapper { display: none; } /* Accept fade-out (class added by JS before the element is removed). */ .wps-av__wrapper.wps-av--dismissed { opacity: 0; visibility: hidden; pointer-events: none; } /* Scroll lock via class — no inline styles to un-wind. */ html.wps-av-locked, html.wps-av-locked body { overflow: hidden; height: 100%; } .wps-av__container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 20px; background-color: rgba(0, 0, 0, 0.7); } .wps-av__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 40px; /* Never wider than the viewport, whatever the breakpoint state. */ max-width: min(520px, 100%); padding: 50px 60px 60px; border-radius: 10px; background-color: #000; } .wps-av__logo { display: block; max-width: 180px; height: auto; } .wps-av__card h2 { font-family: "DM Sans", sans-serif; font-size: clamp(24px, 1vw, 32px); font-weight: 600; line-height: 1.5; letter-spacing: -0.25px; color: #fff; padding: 0; margin: 0; } .wps-av__subtext { font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.75); padding: 0; margin: -20px 0 0; } .wps-av__ctas { display: flex; gap: 16px; width: 100%; } .wps-av__ctas a, .wps-av__ctas button { display: flex; justify-content: center; align-items: center; width: 50%; min-width: fit-content; height: 54px; padding: 0 24px; font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 600; line-height: 1; color: #fff; text-decoration: none; border: 0; border-radius: 7px; cursor: pointer; } .wps-av__reject { background-color: #4a4a4a; } .wps-av__accept { background-color: #da3832; } .wps-av__ctas a:focus-visible, .wps-av__ctas button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* 599px rather than the old theme's 499px: side-by-side buttons only fit comfortably above ~560px, and desktop browsers clamp windows around 500px. */ @media (max-width: 599px) { .wps-av__card { width: 100%; max-width: 90%; padding: 50px 30px; } .wps-av__card h2 { font-size: 18px; } .wps-av__ctas { flex-direction: column; } .wps-av__ctas a, .wps-av__ctas button { width: 100%; } }