/* ── NOXEN design tokens ─────────────────────────────────────────── Concept: a private signal traveling through open space — deep indigo-black void, violet→blue nebula gradients, a live constellation of connected stars and slow-orbiting satellites behind everything. Estedad (Black/900) for Persian display/body — heavy, self-hosted, no external font CDN — JetBrains Mono for technical data (ports, protocols, prices, config strings) since that's real subject matter here, not decoration. */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); @font-face { font-family: 'Estedad'; src: url('/fonts/estedad/Estedad-Black.woff2') format('woff2'), url('/fonts/estedad/Estedad-Black.ttf') format('truetype'); /* Only the Black cut is loaded, mapped across the whole weight range so every nominal weight (400/600/700/800...) renders as true Black 900 instead of the browser synthesizing a fake bold on top of it. */ font-weight: 100 900; font-style: normal; font-display: swap; } :root { --bg: #03020A; --bg-2: #080514; --bg-panel: rgba(255,255,255,0.045); --bg-panel-raised: rgba(255,255,255,0.075); --line: rgba(255,255,255,0.12); --line-strong: rgba(255,255,255,0.24); --ink: #f4f2ff; --ink-dim: #b9b3dd; --ink-faint: #7c76a8; --indigo: #6366F1; --violet: #8B5CF6; --violet-2: #A855F7; --purple: #A855F7; --magenta: #D946EF; --blue: #3B82F6; --cyan: #3B82F6; --accent-grad: linear-gradient(120deg, var(--blue) 0%, var(--indigo) 30%, var(--violet) 60%, var(--purple) 85%, var(--magenta) 100%); --accent-grad-soft: linear-gradient(120deg, rgba(59,130,246,0.16), rgba(139,92,246,0.16), rgba(217,70,239,0.16)); --danger: #ff5d78; --success: #3ee6b0; --radius: 18px; --radius-sm: 10px; --chamfer-sm: 8px; --chamfer-md: 14px; --chamfer-lg: 22px; --font-display: 'Estedad', sans-serif; --font-body: 'Estedad', sans-serif; --font-mono: 'JetBrains Mono', monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1.125rem; --fs-lg: 1.4rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fs-4xl: 4rem; --ease-out: cubic-bezier(.16,.9,.3,1); --shadow-glow: 0 0 0 1px var(--line), 0 20px 60px -20px rgba(139,92,246,0.45); } * { box-sizing: border-box; /* Kill the default mobile "tap flash" (the blue/gray highlight box that briefly appears over buttons, the hamburger, and +/- steppers when tapped on touch devices) site-wide. */ -webkit-tap-highlight-color: transparent; font-synthesis: none; } html { scroll-behavior: smooth; } body { margin: 0; /* Transparent on purpose: the animated starfield/nebula canvas (#starfield, z-index:-1) already paints the whole background. Body used to also paint its own solid/gradient background here, and — because an in-flow, non-positioned box like paints AFTER negative z-index descendants in the stacking order — that second background rendered on top of the canvas and hid the animation. Keep this transparent so the canvas stays visible. */ background: transparent; color: var(--ink); font-family: var(--font-body); font-weight: 900; direction: rtl; text-align: right; line-height: 1.7; min-height: 100vh; position: relative; } /* ── Starfield background canvas ─────────────────────────────── */ #starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; background: transparent; pointer-events: none; } a { color: inherit; } .mono { font-family: var(--font-mono); direction: ltr; text-align: left; display: inline-block; unicode-bidi: plaintext; } .nums { font-family: var(--font-mono); direction: ltr; unicode-bidi: plaintext; display: inline-block; font-variant-numeric: lining-nums tabular-nums; } h1, h2, h3 { font-family: var(--font-display); font-weight: 900; margin: 0 0 0.5em; letter-spacing: -0.01em; } .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } /* ── Scroll reveal — pair with reveal.js ─────────────────────── */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn::after { display: none; } } /* ── Nav — slim glass console, angled leading edge (was a pill) ─── */ .nav { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; margin: 16px 0; background: rgba(10, 8, 24, 0.62); border: 1px solid var(--line); clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px)); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); } .nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(99,102,241,0.55), rgba(217,70,239,0.55)); clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px); } .brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; text-decoration: none; letter-spacing: 0.01em; } .brand-logo { height: 26px; width: auto; display: block; filter: drop-shadow(0 0 10px rgba(139,92,246,0.55)); } .nav-links { display: flex; gap: 8px; align-items: center; } /* ── Buttons — chamfered glass, gradient fill, sweep on hover (was a pill) */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 1px solid transparent; font-family: var(--font-body); font-weight: 900; font-size: 0.95rem; cursor: pointer; text-decoration: none; overflow: hidden; isolation: isolate; clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)); transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out), border-color .15s ease, background .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .btn::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%); transform: translateX(-120%); transition: transform .6s var(--ease-out); } .btn:hover::after { transform: translateX(120%); } .btn:active { transform: scale(0.97); } .btn-gold { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 10px 28px -10px rgba(139,92,246,0.65); } .btn-gold:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset, 0 16px 38px -10px rgba(139,92,246,0.9); transform: translateY(-2px); } .btn-ghost { background: rgba(255,255,255,0.03); border-color: var(--line); color: var(--ink); } .btn-ghost::after { display: none; } .btn-ghost:hover { border-color: var(--violet); color: var(--ink); background: rgba(139,92,246,0.1); } .btn-danger { background: rgba(255,93,120,0.08); border-color: rgba(255,93,120,0.4); color: var(--danger); } .btn-danger::after { display: none; } .btn-danger:hover { background: rgba(255,93,120,0.16); } .btn-block { width: 100%; } .btn-sm { padding: 9px 18px; font-size: 0.85rem; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } /* ── Hero ────────────────────────────────────────────────────── */ .hero { padding: 56px 0 56px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .hero .eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; margin-bottom: 14px; font-weight: 600; } .hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.28; } .hero p.lead { color: var(--ink-dim); font-size: 1.08rem; max-width: 46ch; margin: 18px 0 30px; } .hero-ctas { display: flex; gap: 12px; } /* Signal beacon diagram — orbiting satellite signature element */ .beacon-diagram { position: relative; height: 320px; display: flex; align-items: center; justify-content: center; } .beacon-diagram svg { width: 100%; height: 100%; } .pulse-ring { transform-origin: center; animation: pulse 2.6s ease-out infinite; } .pulse-ring:nth-child(2) { animation-delay: .9s; } .pulse-ring:nth-child(3) { animation-delay: 1.8s; } @keyframes pulse { 0% { r: 8; opacity: 0.9; } 100% { r: 90; opacity: 0; } } .orbit-path { animation: spin 22s linear infinite; transform-origin: 160px 160px; } .orbit-path.reverse { animation-direction: reverse; animation-duration: 30s; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .pulse-ring { animation: none; opacity: 0.35; } .orbit-path { animation: none; } } /* ── Cards / panels — chamfered glass, gradient hairline (was rounded) */ .panel { position: relative; clip-path: polygon(var(--chamfer-lg) 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%, 0 var(--chamfer-lg)); background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, linear-gradient(155deg, rgba(255,255,255,0.16), rgba(139,92,246,0.06) 40%, rgba(217,70,239,0.14)) border-box; background-color: rgba(15,12,35,0.55); border: 1px solid transparent; padding: 28px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-glow); } .panel + .panel { margin-top: 20px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 40px 0; } .plan-card { position: relative; clip-path: polygon(var(--chamfer-md) 0, 100% 0, 100% calc(100% - var(--chamfer-md)), calc(100% - var(--chamfer-md)) 100%, 0 100%, 0 var(--chamfer-md)); background: linear-gradient(160deg, rgba(139,92,246,0.12), rgba(255,255,255,0.03)) padding-box, linear-gradient(155deg, rgba(255,255,255,0.14), rgba(217,70,239,0.12)) border-box; border: 1px solid transparent; padding: 22px; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); } .plan-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -20px rgba(139,92,246,0.55); } .plan-card .amt { font-family: var(--font-mono); font-size: 1.6rem; margin: 6px 0 2px; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .plan-card .unit { color: var(--ink-faint); font-size: 0.85rem; } .tier-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; color: var(--success); background: rgba(62,230,176,0.12); border: 1px solid rgba(62,230,176,0.35); border-radius: 999px; } /* ── Forms ───────────────────────────────────────────────────── */ label { display: block; font-size: 0.88rem; color: var(--ink-dim); margin: 16px 0 6px; } label:first-child { margin-top: 0; } input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-sm); padding: 12px 14px; font-family: var(--font-body); font-size: 0.95rem; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: var(--violet); } textarea { min-height: 90px; resize: vertical; font-family: var(--font-mono); direction: ltr; text-align: left; } .form-row { display: flex; gap: 12px; } .form-row > * { flex: 1; } .field-hint { font-size: 0.8rem; color: var(--ink-faint); margin-top: 6px; } .error-msg { background: rgba(255,93,120,0.12); border: 1px solid rgba(255,93,120,0.35); color: #ffb1c0; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.88rem; margin-top: 14px; } .success-msg { background: rgba(62,230,176,0.12); border: 1px solid rgba(62,230,176,0.35); color: #a8f3da; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.88rem; margin-top: 14px; } /* ── Stepper (buy flow) ──────────────────────────────────────── */ .stepper { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; } .stepper button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 1.1rem; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .stepper button:hover { border-color: var(--violet); color: var(--violet-2); } .stepper button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .stepper .val { font-family: var(--font-mono); font-size: 1rem; } /* ── Auth pages ──────────────────────────────────────────────── */ .auth-wrap { max-width: 420px; margin: 60px auto; padding: 0 24px; position: relative; z-index: 1; } .auth-wrap .panel { padding: 34px 30px; } /* ── Table-ish lists ─────────────────────────────────────────── */ .list-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; background: rgba(255,255,255,0.035); } .badge { font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; font-family: var(--font-mono); } .badge-active { background: rgba(62,230,176,0.15); color: var(--success); } .badge-expired { background: rgba(255,93,120,0.15); color: var(--danger); } .badge-pending { background: rgba(139,107,255,0.18); color: var(--violet-2); } .kv { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 0.92rem; } .kv:last-child { border-bottom: none; } .kv .k { color: var(--ink-dim); } .kv .v { font-family: var(--font-mono); direction: ltr; } /* ── Tabs ────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; } .tab { padding: 12px 18px; cursor: pointer; color: var(--ink-dim); border-bottom: 2px solid transparent; font-weight: 600; white-space: nowrap; } .tab.active { color: var(--ink); border-image: var(--accent-grad) 1; border-bottom: 2px solid var(--violet); } .section-title { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 16px; } .dim { color: var(--ink-dim); } .faint { color: var(--ink-faint); font-size: 0.85rem; } .copyable { cursor: pointer; } .copyable:hover { color: var(--violet-2); } footer { text-align: center; padding: 60px 0 30px; color: var(--ink-faint); font-size: 0.85rem; position: relative; z-index: 1; } @media (max-width: 820px) { .hero { grid-template-columns: 1fr; padding-top: 30px; } .beacon-diagram { height: 220px; order: -1; } .form-row { flex-direction: column; } } /* ── Home page: trust strip ───────────────────────────────────── */ .trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); clip-path: polygon(var(--chamfer-md) 0, 100% 0, 100% calc(100% - var(--chamfer-md)), calc(100% - var(--chamfer-md)) 100%, 0 100%, 0 var(--chamfer-md)); margin: 36px 0; overflow: hidden; } .trust-item { background: rgba(15,12,35,0.6); padding: 20px 12px; text-align: center; } .trust-num { display: block; font-size: 1.5rem; font-weight: 700; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 4px; } .trust-label { font-size: 0.8rem; color: var(--ink-dim); } @media (max-width: 640px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } } /* ── Home page: how-it-works steps ───────────────────────────── */ .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 40px; } .how-step { position: relative; padding: 24px 20px; clip-path: polygon(var(--chamfer-sm) 0, 100% 0, 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, 0 100%, 0 var(--chamfer-sm)); background: rgba(255,255,255,0.03); border: 1px solid var(--line); transition: border-color .2s ease, transform .2s ease; } .how-step:hover { border-color: var(--violet); transform: translateY(-3px); } .how-num { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 0.95rem; margin-bottom: 14px; clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%); background: var(--accent-grad); color: #fff; } .how-step h3 { font-size: 1.02rem; margin-bottom: 6px; } @media (max-width: 720px) { .how-grid { grid-template-columns: 1fr; } } /* ── Home page: why-grid ─────────────────────────────────────── */ .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .why-item { padding: 4px; } .why-icon { font-size: 1.4rem; margin-bottom: 8px; } /* ══════════════════════════════════════════════════════════════════ Design-system additions — toasts, skeletons, segmented controls, mobile nav, modals, status badges, empty states, receipt uploader ══════════════════════════════════════════════════════════════════ */ /* ── Toast / notification system ────────────────────────────────── */ #toast-stack { position: fixed; z-index: 999; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 24px)); pointer-events: none; } @media (max-width: 640px) { #toast-stack { top: auto; bottom: 16px; } } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; background: rgba(15, 12, 35, 0.92); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 14px 14px; box-shadow: 0 16px 40px -14px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: toast-in .28s cubic-bezier(.2,.9,.3,1.2); border-inline-start: 3px solid var(--violet); } .toast.toast-out { animation: toast-out .22s ease forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.97); } } .toast-icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-top: 1px; } .toast-body { flex: 1; min-width: 0; } .toast-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; } .toast-msg { color: var(--ink-dim); font-size: 0.84rem; line-height: 1.55; } .toast-close { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 1rem; padding: 2px; line-height: 1; flex-shrink: 0; } .toast-close:hover { color: var(--ink); } .toast-success { border-inline-start-color: var(--success); } .toast-success .toast-icon { color: var(--success); } .toast-error { border-inline-start-color: var(--danger); } .toast-error .toast-icon { color: var(--danger); } .toast-warning { border-inline-start-color: #ffb84f; } .toast-warning .toast-icon { color: #ffb84f; } .toast-info { border-inline-start-color: var(--blue); } .toast-info .toast-icon { color: var(--cyan); } /* ── Skeleton loaders ────────────────────────────────────────────── */ .skel { position: relative; overflow: hidden; background: rgba(255,255,255,0.06); border-radius: var(--radius-sm); } .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent); animation: skel-sweep 1.5s ease-in-out infinite; } @keyframes skel-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .skel-line { height: 14px; margin: 8px 0; border-radius: 6px; } .skel-line.w60 { width: 60%; } .skel-line.w40 { width: 40%; } .skel-line.w80 { width: 80%; } .skel-card { height: 96px; border-radius: var(--radius); margin-bottom: 12px; } @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } } /* ── Empty states ────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 48px 20px; } .empty-state .empty-icon { font-size: 2.4rem; margin-bottom: 14px; opacity: 0.8; } .empty-state h4 { margin: 0 0 8px; font-size: 1rem; } .empty-state p { color: var(--ink-dim); font-size: 0.88rem; max-width: 40ch; margin: 0 auto 20px; } /* ── Error / retry state ─────────────────────────────────────────── */ .state-error { text-align: center; padding: 30px 20px; } .state-error p { color: #ffb1c0; margin-bottom: 14px; font-size: 0.9rem; } /* ── Segmented control (duration presets, etc.) ─────────────────── */ .segmented { display: flex; flex-wrap: wrap; gap: 8px; } .segmented .seg-opt { flex: 1 1 auto; min-width: 68px; text-align: center; cursor: pointer; padding: 12px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(255,255,255,0.03); font-family: var(--font-mono); font-size: 0.92rem; transition: border-color .15s ease, background .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; user-select: none; } .segmented .seg-opt:hover { border-color: var(--violet); } .segmented .seg-opt.active { border-color: var(--violet); background: var(--accent-grad-soft); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(139,107,255,0.4); } .segmented .seg-opt small { display: block; color: var(--ink-faint); font-family: var(--font-body); font-size: 0.72rem; margin-top: 3px; } /* ── Big number stepper (traffic / duration) ────────────────────── */ .big-stepper { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: rgba(255,255,255,0.035); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; } .big-stepper button { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ink); font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s, background .15s; } .big-stepper button:hover:not(:disabled) { border-color: var(--violet); color: var(--violet-2); background: rgba(139,107,255,0.1); } .big-stepper button:disabled { opacity: 0.35; cursor: not-allowed; } .big-stepper .big-val { text-align: center; flex: 1; } .big-stepper .big-val .num { font-family: var(--font-mono); font-weight: 700; font-size: 2rem; line-height: 1; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; min-width: 2ch; transition: opacity .12s ease; } .big-stepper .big-val .unit { display: block; color: var(--ink-faint); font-size: 0.78rem; margin-top: 6px; } /* ── Price display ───────────────────────────────────────────────── */ .price-display { text-align: center; padding: 22px 0 6px; } .price-display .price-label { color: var(--ink-dim); font-size: 0.85rem; margin-bottom: 6px; } .price-display .price-amt { font-family: var(--font-mono); font-weight: 800; font-size: 2rem; color: var(--ink); transition: opacity .15s ease; } .price-display .price-sub { color: var(--ink-faint); font-size: 0.8rem; margin-top: 8px; } /* ── Status badges (orders / services / payments) ───────────────── */ .badge { display: inline-flex; align-items: center; gap: 5px; } .badge-approved, .badge-active { background: rgba(62,230,176,0.15); color: var(--success); } .badge-rejected, .badge-expired { background: rgba(255,93,120,0.15); color: var(--danger); } .badge-pending { background: rgba(255,184,79,0.16); color: #ffcf88; } .badge-review { background: rgba(139,107,255,0.18); color: var(--violet-2); } /* ── Summary / dashboard cards ───────────────────────────────────── */ .summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .summary-card { display: flex; flex-direction: column; gap: 4px; } .summary-card .sc-label { color: var(--ink-dim); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; } .summary-card .sc-value { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; } .summary-card .sc-foot { color: var(--ink-faint); font-size: 0.8rem; margin-top: 6px; } .progress-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 10px; } .progress-bar > div { height: 100%; background: var(--accent-grad); border-radius: 999px; transition: width .4s ease; } .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 4px; } .quick-action { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 20px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,0.03); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s, background .15s; } .quick-action:hover { border-color: var(--violet); transform: translateY(-2px); background: rgba(139,107,255,0.06); } .quick-action .qa-icon { font-size: 1.5rem; } .quick-action .qa-label { font-size: 0.85rem; font-weight: 600; } /* ── Mobile nav ──────────────────────────────────────────────────── */ .nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 999px; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .nav-toggle:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; } .nav-links.open { display: flex; } @media (max-width: 720px) { .nav-toggle { display: flex; } .nav-links { display: none; position: absolute; top: calc(100% + 8px); inset-inline: 12px; flex-direction: column; align-items: stretch; gap: 6px; background: rgba(10, 8, 26, 0.97); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; backdrop-filter: blur(20px); z-index: 50; } .nav-links a, .nav-links button { width: 100%; justify-content: flex-start; } /* .nav uses clip-path for its angled corner (see the un-media-queried rule above). clip-path clips EVERY descendant's painted output to the shape of the .nav box itself — including this dropdown, which is positioned absolute and pokes out below that box. That's why the menu opened (class + display were correct) but nothing ever showed up: it was being silently clipped away. Dropping the clip-path on small screens, where the angled corner is barely visible anyway, fixes it. */ /* z-index:60 promotes the WHOLE .nav stacking context (which already exists because of backdrop-filter) above later same-level siblings — namely the hero's SVG diagram, which sits lower in the DOM and would otherwise paint on top of the dropdown and swallow taps even though the dropdown looked correctly positioned. */ .nav { position: relative; clip-path: none; border-radius: var(--radius-sm); z-index: 60; } .nav::before { display: none; } } /* ── Mobile bottom tab bar ──────────────────────────────────────── */ @keyframes bn-enter { from { transform: translateX(-50%) translateY(28px) scale(0.94); opacity: 0; } to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } } @keyframes bn-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } } .bottom-nav { display: none; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(92%, 420px); z-index: 90; align-items: center; justify-content: space-around; padding: 8px 6px; gap: 2px; background: rgba(9, 7, 22, 0.86); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: var(--shadow-glow); padding-bottom: max(8px, env(safe-area-inset-bottom)); touch-action: pan-y; /* leaves vertical scroll alone, we handle horizontal swipes ourselves */ } .bottom-nav.bn-ready { animation: bn-enter .5s var(--ease-out); } /* Sliding pill that glides behind the active tab instead of the old "just recolor whichever link is active" jump-cut — this is the moving piece that makes switching tabs (by tap or swipe) feel smooth. */ .bn-indicator { position: absolute; left: 0; top: 6px; bottom: 6px; border-radius: 999px; background: linear-gradient(120deg, rgba(99,102,241,0.32), rgba(217,70,239,0.32)); border: 1px solid rgba(139,92,246,0.4); pointer-events: none; z-index: 0; transition: transform .38s var(--ease-out), width .38s var(--ease-out), opacity .2s ease; opacity: 0; } .bottom-nav.bn-swiping .bn-indicator { transition: none; } .bottom-nav a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1 1 0; min-width: 0; padding: 7px 4px; border-radius: 999px; color: var(--ink-faint); text-decoration: none; font-size: 0.66rem; font-weight: 800; transition: color .15s ease, transform .15s var(--ease-out); -webkit-tap-highlight-color: transparent; } .bottom-nav a:active { transform: scale(0.88); } .bottom-nav a svg { width: 21px; height: 21px; flex-shrink: 0; transition: filter .2s ease; } .bottom-nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .bottom-nav a.active { color: var(--ink); } .bottom-nav a.active svg { filter: drop-shadow(0 0 6px rgba(139,92,246,0.7)); } .bottom-nav a.bn-pop svg { animation: bn-pop .32s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .bottom-nav.bn-ready { animation: none; } .bn-indicator { transition: none; } .bottom-nav a { transition: none; } .bottom-nav a.bn-pop svg { animation: none; } } @media (max-width: 720px) { .bottom-nav { display: flex; } body.has-bottom-nav .container { padding-bottom: 96px; } } /* ── Google Sign-In button — galaxy theme ────────────────────────── No Google element is rendered on the page at all. This is a plain button; clicking it calls google.accounts.id.prompt() in app.js, which pops Google's own real, unmodified sign-in UI programmatically. So what's visible is 100% ours, but the actual auth request is 100% Google's real flow — nothing fake is submitted on Google's behalf. */ .google-label { font-size: 0.8rem; font-weight: 700; color: var(--ink-faint); text-align: center; margin-bottom: 10px; } .google-btn-wrap { position: relative; width: 100%; height: 48px; } .google-btn-custom { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; border-radius: 999px; overflow: hidden; cursor: pointer; background: radial-gradient(120px 60px at 18% -20%, rgba(217,70,239,0.55), transparent 70%), radial-gradient(140px 70px at 85% 120%, rgba(59,130,246,0.55), transparent 70%), linear-gradient(135deg, #100a24 0%, #170f30 40%, #1c1140 70%, #170f30 100%); border: 1px solid rgba(168,85,247,0.35); margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; color: #f4f2ff; font-family: var(--font-body); font-weight: 800; font-size: 0.92rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 22px -4px rgba(168,85,247,0.55), 0 10px 28px -12px rgba(59,130,246,0.55); transition: box-shadow .25s var(--ease-out), transform .18s var(--ease-out), border-color .25s ease, filter .2s ease; } /* Scattered starfield dots, matching the site's constellation motif */ .google-btn-custom::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.9; background-image: radial-gradient(1.4px 1.4px at 12% 30%, #fff, transparent 100%), radial-gradient(1.2px 1.2px at 24% 70%, #fff, transparent 100%), radial-gradient(1.6px 1.6px at 40% 20%, rgba(255,255,255,0.9), transparent 100%), radial-gradient(1.2px 1.2px at 58% 78%, #fff, transparent 100%), radial-gradient(1.4px 1.4px at 74% 35%, rgba(255,255,255,0.85), transparent 100%), radial-gradient(1.2px 1.2px at 88% 65%, #fff, transparent 100%), radial-gradient(1.6px 1.6px at 96% 25%, rgba(255,255,255,0.9), transparent 100%); animation: google-btn-twinkle 3.2s ease-in-out infinite; } /* Comet-sweep highlight on hover, like the site's existing shimmer */ .google-btn-custom::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%); transform: translateX(-120%); transition: transform .6s var(--ease-out); } .google-btn-custom .google-btn-badge { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(168,85,247,0.18), 0 1px 2px rgba(0,0,0,0.25); } .google-btn-custom span:not(.google-btn-badge) { position: relative; z-index: 2; } .google-btn-wrap:hover .google-btn-custom { border-color: rgba(217,70,239,0.6); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 32px -2px rgba(217,70,239,0.75), 0 16px 38px -12px rgba(59,130,246,0.7); transform: translateY(-2px); } .google-btn-wrap:hover .google-btn-custom::after { transform: translateX(120%); } .google-btn-wrap:active .google-btn-custom { transform: scale(0.98); } .google-btn-custom:disabled { opacity: 0.7; cursor: default; } @keyframes google-btn-twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* ── Floating contact widget (Telegram support) ──────────────────── */ .contact-widget { position: fixed; left: 18px; bottom: 18px; z-index: 95; } .contact-fab { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(139,92,246,0.65), 0 0 0 1px rgba(255,255,255,0.08) inset; transition: transform .2s var(--ease-out), box-shadow .25s ease; -webkit-tap-highlight-color: transparent; } .contact-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 38px -10px rgba(139,92,246,0.85); } .contact-fab:active { transform: scale(0.94); } .contact-widget.open .contact-fab { transform: rotate(90deg); } .contact-widget.open .contact-fab:hover { transform: rotate(90deg) translateY(-2px) scale(1.04); } .contact-fab-badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; border: 2px solid var(--bg); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; line-height: 16px; text-align: center; animation: contact-badge-pop .25s var(--ease-out); } @keyframes contact-badge-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .contact-panel { position: absolute; bottom: 66px; left: 0; width: min(320px, 88vw); background: linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-glow); animation: contact-panel-in .22s var(--ease-out); } @keyframes contact-panel-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .contact-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; } .contact-panel-title { font-weight: 900; font-size: 0.98rem; } .contact-panel-close { background: none; border: none; color: var(--ink-faint); font-size: 1rem; cursor: pointer; line-height: 1; padding: 4px; -webkit-tap-highlight-color: transparent; } .contact-panel-close:hover { color: var(--ink); } .contact-panel-text { color: var(--ink-dim); font-size: 0.85rem; margin: 0 0 14px; line-height: 1.6; } .contact-tg-btn { display: flex; } @media (max-width: 720px) { .contact-widget { left: 14px; bottom: max(84px, calc(84px + env(safe-area-inset-bottom))); } } /* ── Contact widget: چت سایت / تلگرام tabs ────────────────────────── */ .contact-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .contact-tab { flex: 1; border: none; background: transparent; color: var(--ink-faint); font-family: var(--font-body); font-weight: 800; font-size: 0.78rem; padding: 7px 6px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; } .contact-tab.active { background: var(--accent-grad); color: #fff; } .contact-tab-panel { display: none; } .contact-tab-panel.active { display: block; } .chat-thread { height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; padding: 4px 2px; scrollbar-width: thin; } .chat-thread::-webkit-scrollbar { width: 5px; } .chat-thread::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; } .chat-empty { color: var(--ink-faint); font-size: 0.82rem; text-align: center; margin: auto; line-height: 1.7; } .chat-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 0.84rem; line-height: 1.6; word-break: break-word; white-space: pre-wrap; } .chat-msg.mine { margin-right: 0; margin-left: auto; background: var(--accent-grad); color: #fff; border-bottom-left-radius: 4px; } .chat-msg.theirs { margin-left: 0; margin-right: auto; background: var(--bg-panel); border: 1px solid var(--line); color: var(--ink); border-bottom-right-radius: 4px; } .chat-msg-time { display: block; margin-top: 3px; font-size: 0.65rem; opacity: 0.65; font-family: var(--font-mono); } .chat-input-row { display: flex; gap: 8px; align-items: center; } .chat-input-row input { flex: 1; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; color: var(--ink); font-family: var(--font-body); font-size: 0.85rem; } .chat-input-row input:focus { outline: none; border-color: var(--violet); } .chat-send-btn { width: 38px; height: 38px; border-radius: 50%; border: none; flex-shrink: 0; cursor: pointer; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .15s var(--ease-out); -webkit-tap-highlight-color: transparent; } .chat-send-btn:hover { transform: scale(1.06); } .chat-send-btn:active { transform: scale(0.94); } .chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* ── Admin support-chat tab (list + thread, side by side) ─────── */ .chat-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 6px; border-radius: 999px; background: var(--accent-grad); color: #fff; font-size: 0.68rem; font-weight: 700; font-family: var(--font-mono); vertical-align: middle; } .admin-chat { display: grid; grid-template-columns: 260px 1fr; gap: 14px; align-items: start; } @media (max-width: 720px) { .admin-chat { grid-template-columns: 1fr; } } .admin-chat-list { border: 1px solid var(--line); border-radius: var(--radius, 14px); background: var(--bg-panel); max-height: 480px; overflow-y: auto; scrollbar-width: thin; } .admin-chat-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--line); transition: background .15s var(--ease-out); } .admin-chat-item:last-child { border-bottom: none; } .admin-chat-item:hover { background: var(--bg-panel-raised); } .admin-chat-item.active { background: rgba(139,92,246,0.14); } .admin-chat-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .admin-chat-item-name { font-weight: 700; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-chat-item-preview { color: var(--ink-faint); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-chat-item-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent-grad); color: #fff; font-size: 0.68rem; font-weight: 700; font-family: var(--font-mono); flex-shrink: 0; } .admin-chat-thread-wrap { border: 1px solid var(--line); border-radius: var(--radius, 14px); background: var(--bg-panel); padding: 14px; display: flex; flex-direction: column; } .admin-chat-head { font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; color: var(--ink); } .admin-chat-thread { height: 380px; } /* ── Data-usage bar (1GB trial and other capped plans) ────────── */ .usage-bar-wrap { margin-top: 12px; } .usage-bar-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 5px; } .usage-bar-track { height: 8px; border-radius: 999px; background: var(--bg-panel); border: 1px solid var(--line); overflow: hidden; } .usage-bar-fill { height: 100%; border-radius: 999px; background: var(--accent-grad); transition: width .4s var(--ease-out); } .usage-bar-fill.usage-warn { background: linear-gradient(120deg, #f59e0b, #ef4444); } /* ── Page transitions ────────────────────────────────────────────── Native cross-document View Transitions (Chrome 126+ / Edge — no-op, gracefully ignored elsewhere): the browser cross-fades old→new page instead of a hard cut, which is most of what reads as "not smooth" when tapping between pages. Paired with the inline background-color style in every page's , this also kills the white flash that used to show for an instant before style.css finished loading. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: nx-fade-out .16s var(--ease-out) both; } ::view-transition-new(root) { animation: nx-fade-in .22s var(--ease-out) both; } @keyframes nx-fade-out { to { opacity: 0; } } @keyframes nx-fade-in { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Give the persistent chrome (top nav, bottom tab bar, starfield canvas) their own view-transition-name instead of letting them fade out with the rest of the old page and back in with the new one. Two consecutive pages have a nav bar and bottom bar that look identical, so once the browser can match "this page's nav" to "the next page's nav" by name, its default behavior is to smoothly cross-fade/morph between the two snapshots in place — which reads as the bar staying put and steady rather than reloading, without any client-side routing. This is the safer alternative to a full SPA rewrite (see setupNavPrefetch() in app.js for why): everything about how each page works — forms, auth checks, uploads — is untouched; only the transition treatment of these three elements changes. */ .nav { view-transition-name: site-nav; } .bottom-nav { view-transition-name: site-bottom-nav; } #starfield { view-transition-name: site-starfield; } @media (prefers-reduced-motion: reduce) { .nav, .bottom-nav, #starfield { view-transition-name: none; } } /* ── Modal ───────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(4,3,12,0.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 18px; animation: fade-in .18s ease; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal-box { width: min(480px, 100%); max-height: 86vh; overflow-y: auto; background: linear-gradient(180deg, rgba(20,17,42,0.98), rgba(10,8,26,0.98)); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 26px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); animation: modal-in .22s cubic-bezier(.2,.9,.3,1.1); } @keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-box .modal-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 6px; } .modal-box .modal-close { position: absolute; top: 16px; inset-inline-end: 16px; } .modal-box { position: relative; } /* ── Receipt / file upload dropzone ──────────────────────────────── */ .upload-zone { border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: 22px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; position: relative; } .upload-zone:hover, .upload-zone.drag { border-color: var(--violet); background: rgba(139,107,255,0.06); } .upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .upload-zone .uz-icon { font-size: 1.6rem; margin-bottom: 8px; } .upload-zone .uz-text { font-size: 0.88rem; color: var(--ink-dim); } .upload-zone .uz-hint { font-size: 0.78rem; color: var(--ink-faint); margin-top: 4px; } .upload-zone.has-file { border-style: solid; border-color: var(--success); background: rgba(62,230,176,0.06); } .upload-preview { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.04); } .upload-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; } .upload-preview .up-name { font-size: 0.85rem; flex: 1; word-break: break-all; } .upload-preview .up-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 1rem; } /* ── Step indicator (buy flow) ──────────────────────────────────── */ .step-indicator { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; } .step-indicator .step { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: 0.82rem; } .step-indicator .step .dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-family: var(--font-mono); } .step-indicator .step.done .dot { background: var(--success); border-color: var(--success); color: #06251b; } .step-indicator .step.active { color: var(--ink); } .step-indicator .step.active .dot { border-color: var(--violet); color: var(--violet-2); } .step-indicator .step-line { flex: 1; height: 1px; background: var(--line); min-width: 14px; } /* ── Explainer / help boxes ──────────────────────────────────────── */ .help-box { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: rgba(79,125,250,0.08); border: 1px solid rgba(79,125,250,0.25); font-size: 0.86rem; color: var(--ink-dim); } .help-box .hb-icon { flex-shrink: 0; } /* ── Status pending banner (config page) ─────────────────────────── */ .status-banner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 18px; } .status-banner.pending { background: rgba(255,184,79,0.12); border: 1px solid rgba(255,184,79,0.3); color: #ffcf88; } .status-banner.active { background: rgba(62,230,176,0.1); border: 1px solid rgba(62,230,176,0.3); color: #a8f3da; } @media (max-width: 560px) { .big-stepper .big-val .num { font-size: 1.6rem; } .panel { padding: 20px; } } /* ── Client-side router (router.js) ────────────────────────────── */ .router-progress { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0; background: var(--accent-grad); z-index: 9999; transition: width .25s ease-out, opacity .2s ease-out .1s; box-shadow: 0 0 10px rgba(139,92,246,0.6); } #page-root, .page-root-instance { animation: noxen-page-in .22s ease-out; } @keyframes noxen-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { #page-root, .page-root-instance { animation: none; } }