/* ========================================================================= Nexus VPN — system screens Access denied, payment result. These render before (or instead of) the React bundle, by replacing document.body, so they cannot rely on anything the app sets up — only on tokens.css, which is linked in and survives the body swap. ========================================================================= */ .nxs { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 32px 24px calc(32px + var(--safe-b, 0px)); background: var(--bg, #050506); color: var(--ink, #F2F4F8); font-family: var(--font, -apple-system, 'Segoe UI', Roboto, sans-serif); text-align: center; overflow-y: auto; } /* One pool of light behind the mark — same treatment as the splash. */ .nxs::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 40% at 50% 38%, rgba(255, 255, 255, 0.05), transparent 70%); } .nxs > * { position: relative; } /* ------------------------------------------------------------- the mark -- */ .nxs__art { position: relative; width: 104px; height: 104px; margin-bottom: 26px; animation: nxs-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; } .nxs__mark { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.85)); } /* Status glyph rides the mark's lower-right, so the brand stays the subject and the state is an annotation on it rather than a giant emoji. */ .nxs__badge { position: absolute; right: -4px; bottom: -2px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #0B0C0E; border: 1px solid var(--stroke-hi, rgba(255, 255, 255, 0.16)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.8); animation: nxs-pop 520ms cubic-bezier(0.22, 1.3, 0.36, 1) 260ms both; } .nxs__badge svg { width: 19px; height: 19px; display: block; } .nxs--ok .nxs__badge svg { color: var(--mint, #6EE7B7); } .nxs--fail .nxs__badge svg { color: var(--rose, #FF8FA3); } .nxs--denied .nxs__badge svg { color: var(--ink-dim, rgba(242,244,248,.62)); } /* ---------------------------------------------------------------- copy --- */ .nxs__title { margin: 0 0 10px; font-size: clamp(21px, 5.6vw, 25px); font-weight: 600; letter-spacing: -0.01em; color: var(--ink, #F2F4F8); animation: nxs-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; } .nxs__text { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.55; color: var(--ink-dim, rgba(242, 244, 248, 0.62)); animation: nxs-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both; } .nxs__sub { margin: 10px 0 0; max-width: 300px; font-size: 13px; line-height: 1.5; color: var(--ink-faint, rgba(242, 244, 248, 0.38)); animation: nxs-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; } /* ----------------------------------------------------------------- cta --- */ .nxs__cta { margin-top: 30px; display: inline-flex; align-items: center; gap: 9px; padding: 14px 30px; border: none; border-radius: var(--r-pill, 999px); /* Bright chrome fill, dark ink. The inherited markup put white text on this gradient once it stopped being teal — 1.3:1. */ background: linear-gradient(135deg, #ffffff 0%, #c9d2de 100%); color: #0A0B0D; font: 600 15px/1 var(--font, sans-serif); text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: transform 160ms var(--ease-snap, ease); animation: nxs-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both; } .nxs__cta:active { transform: scale(0.97); } .nxs__cta svg { width: 16px; height: 16px; } @keyframes nxs-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes nxs-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }