/** * GothamPeps :: Entry popups (age check, research agreement) * * While an answer is missing, carries .gp-verify-pending (set by an * inline script in ). The backdrop is drawn on html::after so it covers * the page from the very first paint, before the popup markup at the end of * the body has even been parsed. */ html.gp-verify-pending { overflow: hidden; } html.gp-verify-pending::after { content: ""; position: fixed; inset: 0; z-index: 99998; background: radial-gradient(ellipse at center, rgba(57, 134, 245, .12) 0%, rgba(0, 0, 0, 0) 60%), rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .gp-verify[hidden], .gp-verify__card[hidden] { display: none; } html.gp-verify-pending .gp-verify[hidden] { display: flex; } .gp-verify { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1.25rem; overflow-y: auto; } .gp-verify__card { position: relative; width: 100%; max-width: 30rem; margin: auto; padding: 2.25rem 1.5rem 1.75rem; background: linear-gradient(170deg, #0d1626 0%, #050505 70%); border: 1px solid var(--gp-primary, #3986f5); box-shadow: 0 0 0 1px rgba(36, 207, 239, .08), 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(57, 134, 245, .45); color: var(--gp-body-color, rgba(255, 255, 255, .8)); text-align: center; animation: gp-verify-in .45s cubic-bezier(.4, 0, .2, 1) both; } @media (min-width: 640px) { .gp-verify__card { padding: 2.75rem 2.5rem 2.25rem; } } /* Cyan rule across the top edge. */ .gp-verify__card::before { content: ""; position: absolute; top: -1px; left: 2rem; right: 2rem; height: 2px; background: linear-gradient(90deg, transparent, var(--gp-accent, #24cfef), transparent); } @keyframes gp-verify-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .gp-verify__brand { display: flex; justify-content: center; margin-bottom: 1.25rem; } .gp-verify__logo .gp-brand__logo { max-height: 64px; width: auto; } .gp-verify__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border: 1px solid rgba(57, 134, 245, .5); border-radius: 50%; color: var(--gp-accent, #24cfef); } .gp-verify__icon svg { width: 1.5rem; height: 1.5rem; } .gp-verify__title { margin: 0 0 .875rem; color: var(--gp-white, #fff); font-family: var(--gp-font-heading, serif); font-size: clamp(1.75rem, 5vw, 2.25rem); font-weight: 500; line-height: 1.15; font-variant-numeric: lining-nums; } .gp-verify__text { margin: 0 auto 1.75rem; max-width: 26rem; font-size: .9375rem; line-height: 1.65; } .gp-verify__text p { margin: 0 0 .75rem; } .gp-verify__text p:last-child { margin-bottom: 0; } .gp-verify__actions { display: grid; gap: .75rem; } @media (min-width: 480px) { .gp-verify__actions { grid-template-columns: 1.4fr 1fr; } } .gp-verify__actions .gp-btn { width: 100%; justify-content: center; padding-block: .9375rem; } .gp-verify__actions .gp-btn svg { display: none; } @media (prefers-reduced-motion: reduce) { .gp-verify__card { animation: none; } }