/* ========================================================= United — Antibot / Security Verification screen Scoped under .ab-root so it never leaks into other pages. ========================================================= */ .ab-root { --bg: #07071a; --card: rgba(14, 14, 32, 0.92); --accent: #6a0dad; --accent2: #1abc9c; --text: #e0e0f0; --muted: #8886b0; --border: rgba(106, 13, 173, 0.35); --glow: rgba(106, 13, 173, 0.5); --glow2: rgba(26, 188, 156, 0.35); --font: "Space Grotesk", sans-serif; --mono: "Fira Code", monospace; /* Full-viewport flex box so the card sits dead-centre. */ position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px; } .ab-root, .ab-root * { box-sizing: border-box; } /* Page canvas — applied to only while this screen is mounted. */ body:has(.ab-root) { margin: 0; font-family: "Space Grotesk", sans-serif; background: #07071a; color: #e0e0f0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* --------------------------------------------------------- Ambient background: blurred orbs --------------------------------------------------------- */ .bg-orb { position: fixed; z-index: 0; border-radius: 50%; filter: blur(120px); opacity: 0.35; pointer-events: none; } .bg-orb-1 { top: -10%; left: -8%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(106, 13, 173, 0.5), transparent 70%); animation: orbDrift1 18s ease-in-out infinite alternate; } .bg-orb-2 { right: -5%; bottom: -5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(26, 188, 156, 0.35), transparent 70%); animation: orbDrift2 22s ease-in-out infinite alternate; } .bg-orb-3 { top: 50%; left: 60%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(106, 13, 173, 0.3), transparent 70%); animation: orbDrift3 15s ease-in-out infinite alternate; } @keyframes orbDrift1 { from { transform: translate(0, 0); } to { transform: translate(80px, 60px); } } @keyframes orbDrift2 { from { transform: translate(0, 0); } to { transform: translate(-60px, -80px); } } @keyframes orbDrift3 { from { transform: translate(0, 0); } to { transform: translate(-40px, 50px); } } /* --------------------------------------------------------- Ambient background: dotted grid + matrix canvas --------------------------------------------------------- */ .bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(106, 13, 173, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(106, 13, 173, 0.04) 1px, transparent 1px); background-size: 48px 48px; mask: radial-gradient(ellipse 60% 60% at 50% 50%, #000 40%, transparent 100%); } #matrix { position: fixed; inset: 0; z-index: 0; opacity: 0.03; pointer-events: none; } /* --------------------------------------------------------- Ambient background: rising particles --------------------------------------------------------- */ .particles { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .particles span { position: absolute; display: block; border-radius: 50%; opacity: 0; animation: particleUp linear infinite; } @keyframes particleUp { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 15% { opacity: 0.5; } 85% { opacity: 0.4; } 100% { transform: translateY(-10vh) scale(1.2); opacity: 0; } } /* --------------------------------------------------------- Card --------------------------------------------------------- */ .ab-card { position: relative; z-index: 10; width: 420px; max-width: 92vw; margin: 0; padding: 40px 36px 32px; border: 1px solid var(--border); border-radius: 20px; background: var(--card); box-shadow: 0 0 60px rgba(106, 13, 173, 0.12), 0 24px 80px rgba(0, 0, 0, 0.5); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); animation: cardEntry 0.7s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes cardEntry { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } } /* Rotating conic border */ .ab-card::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 20px; opacity: 0.6; background: conic-gradient( from 0deg, transparent, rgba(106, 13, 173, 0.3), rgba(26, 188, 156, 0.2), transparent, rgba(106, 13, 173, 0.3), transparent ); animation: borderSpin 8s linear infinite; } @keyframes borderSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* --------------------------------------------------------- Logo --------------------------------------------------------- */ .ab-logo { display: flex; justify-content: center; margin-bottom: 20px; } .ab-logo img { width: 64px; height: auto; filter: drop-shadow(0 0 20px var(--glow)) drop-shadow(0 0 40px rgba(106, 13, 173, 0.2)); animation: logoBreathe 3s ease-in-out infinite; } @keyframes logoBreathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px var(--glow)) drop-shadow(0 0 40px rgba(106, 13, 173, 0.2)); } 50% { transform: scale(1.03); filter: drop-shadow(0 0 28px var(--glow2)) drop-shadow(0 0 50px rgba(26, 188, 156, 0.3)); } } /* --------------------------------------------------------- Header --------------------------------------------------------- */ .ab-header { margin-bottom: 28px; text-align: center; } .ab-title { margin-bottom: 4px; font-size: 15px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--text); } .ab-title span { color: var(--accent2); } .ab-subtitle { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 2px; color: var(--muted); } .ab-divider { height: 1px; margin: 0 auto 22px; background: linear-gradient( 90deg, transparent, var(--border), rgba(26, 188, 156, 0.2), var(--border), transparent ); } /* --------------------------------------------------------- Status line + progress bar --------------------------------------------------------- */ .ab-status { display: flex; align-items: center; gap: 10px; min-height: 20px; margin-bottom: 14px; } .ab-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 8px var(--glow2); animation: dotPulse 1.5s ease-in-out infinite; } .ab-status-dot.done { background: #2ecc71; box-shadow: 0 0 8px rgba(46, 204, 113, 0.5); animation: none; } @keyframes dotPulse { 0%, 100% { opacity: 0.5; box-shadow: 0 0 6px var(--glow2); } 50% { opacity: 1; box-shadow: 0 0 14px var(--accent2); } } .ab-status-text { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.5px; color: var(--muted); } .ab-progress { height: 3px; margin: 0 0 24px; border-radius: 2px; background: rgba(106, 13, 173, 0.1); overflow: hidden; } .ab-progress-bar { width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 12px var(--glow2); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* --------------------------------------------------------- Verify button --------------------------------------------------------- */ .ab-verify-btn { display: none; /* revealed by script once ready */ position: relative; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 13px 0; margin-bottom: 20px; border: 1px solid rgba(26, 188, 156, 0.3); border-radius: 10px; background: rgba(12, 16, 40, 0.55); color: var(--accent2); font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 0 10px rgba(26, 188, 156, 0.22); cursor: pointer; overflow: hidden; transition: all 0.3s ease; -webkit-appearance: none; appearance: none; } .ab-verify-btn:hover { border-color: var(--accent2); background: rgba(26, 188, 156, 0.06); box-shadow: 0 0 20px var(--glow2); color: #fff; } .ab-verify-btn:active { transform: scale(0.98); } .ab-verify-btn .btn-label { position: relative; z-index: 2; } .ab-verify-btn .btn-shine { position: absolute; inset: 0; z-index: 1; opacity: 0.8; pointer-events: none; background: linear-gradient( 105deg, transparent 40%, rgba(26, 188, 156, 0.06) 50%, transparent 60% ); transform: translateX(-100%); animation: shine 3s ease-in-out infinite; } @keyframes shine { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } } /* --------------------------------------------------------- Footer --------------------------------------------------------- */ .ab-footer { font-family: var(--mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; color: rgba(136, 134, 176, 0.4); } /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media (max-width: 500px) { .ab-card { padding: 28px 22px 24px; border-radius: 16px; } .ab-logo img { width: 52px; } .ab-title { font-size: 13px; letter-spacing: 2px; } }