/* alopeptides Age Gate — scoped under #alo-age-gate, brand-styled (DM Sans + violet) */ /* Hidden by default → no flash for verified visitors. The early head-script adds .alo-gate-on to only when the visitor is NOT yet verified. */ #alo-age-gate { display: none; } html.alo-gate-on #alo-age-gate { display: flex; } html.alo-gate-on, html.alo-gate-on body { overflow: hidden !important; } #alo-age-gate { position: fixed; inset: 0; z-index: 99999; background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 50%, #ECE7FF 100%); align-items: center; justify-content: center; padding: 32px; overflow-y: auto; transition: opacity .3s ease; font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } #alo-age-gate.hiding { opacity: 0; pointer-events: none; } #alo-age-gate .ag-watermark { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .05; color: #6B5CF6; } #alo-age-gate .ag-card { position: relative; width: 100%; max-width: 560px; margin: auto; background: rgba(255,255,255,0.66); backdrop-filter: blur(3px); border: 1px solid #E5E2F7; border-radius: 24px; box-shadow: 0 20px 50px rgba(107,92,246,0.12); padding: 52px 44px; text-align: center; } #alo-age-gate .ag-logo { display: inline-flex; align-items: center; justify-content: center; } #alo-age-gate .ag-logo img { height: 54px; width: auto; max-width: 260px; } #alo-age-gate h1 { margin-top: 34px; font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -0.015em; color: #111118; } #alo-age-gate p { margin: 18px auto 0; max-width: 480px; font-size: 15.5px; line-height: 1.6; color: #4B5563; } #alo-age-gate .ag-actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } #alo-age-gate .ag-btn { font-family: inherit; font-size: 15px; font-weight: 700; border-radius: 8px; padding: 15px 26px; cursor: pointer; border: 1.5px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all .18s ease; } #alo-age-gate .ag-yes { background: linear-gradient(135deg, #5B86FF 0%, #8257F6 100%); color: #fff; box-shadow: 0 8px 20px rgba(107,92,246,0.28); } #alo-age-gate .ag-yes:hover { filter: brightness(1.05); transform: translateY(-1px); } #alo-age-gate .ag-no { background: #fff; border-color: #6B5CF6; color: #6B5CF6; } #alo-age-gate .ag-no:hover { background: #F5F3FF; transform: translateY(-1px); } #alo-age-gate .ag-remember { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 14px; color: #6B7280; cursor: pointer; user-select: none; } #alo-age-gate .ag-remember input { width: 16px; height: 16px; accent-color: #6B5CF6; cursor: pointer; } #alo-age-gate .ag-divider { margin: 24px auto 0; max-width: 380px; height: 1px; background: #E5E2F7; } #alo-age-gate .ag-fine { margin: 22px auto 0; max-width: 480px; font-size: 12px; line-height: 1.55; color: #9CA3AF; } #alo-age-gate .ag-fine a { color: #6B5CF6; text-decoration: underline; text-underline-offset: 2px; } #alo-age-gate .ag-fine p + p { margin-top: 10px; } @media (max-width: 480px) { #alo-age-gate { padding: 20px; } #alo-age-gate .ag-card { padding: 34px 22px; } #alo-age-gate .ag-word { font-size: 22px; } #alo-age-gate h1 { font-size: 23px; } #alo-age-gate .ag-actions { flex-direction: column; } #alo-age-gate .ag-btn { width: 100%; } }