/** * AnonAge age gate — front end. * * Colours come from CSS custom properties printed inline in from the merchant's Appearance * settings, so this file never needs regenerating and stays cacheable. */ html.anonage-locked, html.anonage-locked body { overflow: hidden !important; } .anonage-gate { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 20px; background-color: var( --anonage-backdrop, #07162e ); background-image: var( --anonage-bg-image, none ); background-size: var( --anonage-bg-size, auto ); background-repeat: var( --anonage-bg-repeat, no-repeat ); background-position: var( --anonage-bg-position, center ); -webkit-backdrop-filter: blur( var( --anonage-blur, 8px ) ); backdrop-filter: blur( var( --anonage-blur, 8px ) ); overflow-y: auto; -webkit-font-smoothing: antialiased; } .anonage-panel-box { box-sizing: border-box; width: 100%; max-width: 440px; padding: 32px 28px; border: var( --anonage-border-width, 1px ) solid var( --anonage-border, #12285a ); border-radius: var( --anonage-radius, 16px ); background: var( --anonage-modal-bg, #0a1a3d ); color: var( --anonage-text, #eaf2fc ); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; text-align: center; box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.45 ); } .anonage-logo { display: block; max-width: 180px; max-height: 72px; width: auto; height: auto; margin: 0 auto 20px; } .anonage-gate .anonage-title { margin: 0 0 10px; color: var( --anonage-text, #eaf2fc ); font-size: 22px; font-weight: 700; line-height: 1.25; } .anonage-gate .anonage-message { margin: 0 0 22px; color: var( --anonage-text, #eaf2fc ); font-size: 15px; opacity: 0.92; } .anonage-gate .anonage-form { margin: 0; } .anonage-gate .anonage-label { display: block; margin-bottom: 6px; color: var( --anonage-muted, #9fb2ce ); font-size: 13px; text-align: left; } .anonage-gate .anonage-input { box-sizing: border-box; display: block; width: 100%; margin: 0 0 4px; padding: 12px 14px; border: 1px solid var( --anonage-border, #12285a ); border-radius: 8px; background: rgba( 255, 255, 255, 0.06 ); color: var( --anonage-text, #eaf2fc ); font-size: 17px; /* 16px+ stops iOS Safari zooming on focus. */ line-height: 1.3; text-align: left; } .anonage-gate .anonage-input:focus { outline: 2px solid var( --anonage-button-bg, #0080e0 ); outline-offset: 1px; } .anonage-gate .anonage-select { appearance: none; -webkit-appearance: none; } .anonage-gate .anonage-error { min-height: 18px; margin: 0 0 8px; color: #ff6b85; font-size: 13px; text-align: left; } .anonage-gate .anonage-error-block { min-height: 0; margin: 0 0 20px; text-align: center; } .anonage-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .anonage-gate .anonage-btn { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 13px 18px; border: 0; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: opacity 0.15s ease; } .anonage-gate .anonage-btn:hover { opacity: 0.9; } .anonage-gate .anonage-btn:focus-visible { outline: 2px solid var( --anonage-text, #eaf2fc ); outline-offset: 2px; } .anonage-gate .anonage-btn-primary { background: var( --anonage-button-bg, #0080e0 ); color: var( --anonage-button-text, #ffffff ); } .anonage-gate .anonage-btn-secondary { background: transparent; border: 1px solid var( --anonage-border, #12285a ); color: var( --anonage-secondary, #eaf2fc ); } .anonage-gate .anonage-footer { margin: 20px 0 0; color: var( --anonage-muted, #9fb2ce ); font-size: 12px; line-height: 1.45; } /* Split enforcement --------------------------------------------------- */ /* * Where the withheld content will go. Deliberately unstyled once filled — it holds ordinary post * content and must inherit the theme's typography, not ours. */ .anonage-restricted-notice { margin: 1.5em 0; padding: 1.25em 1.5em; border: 1px dashed currentColor; border-radius: 8px; opacity: 0.75; font-style: italic; } .anonage-restricted-loaded > .anonage-restricted-notice { display: none; } /* Verified mode ------------------------------------------------------- */ .anonage-qr { width: 220px; max-width: 100%; margin: 4px auto 18px; padding: 10px; border-radius: 10px; background: #ffffff; /* A code needs a light quiet zone whatever the panel colour is. */ line-height: 0; } .anonage-qr svg { display: block; width: 100%; height: auto; } .anonage-gate .anonage-waiting { margin: 0 0 4px; color: var( --anonage-text, #eaf2fc ); font-size: 14px; } .anonage-gate .anonage-countdown { margin: 0; color: var( --anonage-muted, #9fb2ce ); font-size: 13px; font-variant-numeric: tabular-nums; } .anonage-gate a.anonage-btn { display: block; text-decoration: none; } .anonage-gate a.anonage-btn + a.anonage-btn { margin-top: 10px; } .anonage-spinner { width: 28px; height: 28px; margin: 28px auto; border: 3px solid var( --anonage-border, #12285a ); border-top-color: var( --anonage-button-bg, #0080e0 ); border-radius: 50%; animation: anonage-spin 0.8s linear infinite; } @keyframes anonage-spin { to { transform: rotate( 360deg ); } } @media ( prefers-reduced-motion: reduce ) { .anonage-spinner { animation-duration: 2.4s; } .anonage-gate .anonage-btn { transition: none; } } @media ( max-width: 480px ) { .anonage-panel-box { padding: 26px 20px; } .anonage-gate .anonage-title { font-size: 20px; } }