/* ===================================================================== VEXTRIS · NEON CYBER-LUXE THEME OVERLAY Activated by adding class "vx" to . Loads AFTER each page's own stylesheet, so these rules win on specificity + source order. Restyles existing components only — no markup or JS changes required. ===================================================================== */ :root { --vx-bg: #08060f; --vx-bg-2: #0c0a18; --vx-violet: #8b6bff; --vx-violet-deep: #6a3df0; --vx-cyan: #4fd6ff; --vx-cyan-deep: #2aa9e0; --vx-pink: #ff5ec4; --vx-gold: #ffc94d; --vx-silver: #d8dcf0; --vx-green: #8ef0b4; --vx-text: #eef0ff; --vx-muted: #9aa0c4; --vx-glass: rgba(22, 20, 40, 0.55); --vx-glass-2: rgba(20, 18, 38, 0.92); --vx-glass-brd: rgba(140, 130, 230, 0.18); --vx-glow-v: rgba(139, 107, 255, 0.55); --vx-glow-c: rgba(79, 214, 255, 0.5); --vx-fd: "Bebas Neue", "Segoe UI", sans-serif; --vx-fb: "DM Sans", system-ui, sans-serif; --vx-ease: cubic-bezier(0.25, 0.1, 0.25, 1); } /* ---- Global canvas: starfield + vignette + tech grid ---- */ body.vx { background: var(--vx-bg) !important; color: var(--vx-text); position: relative; } body.vx::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background-repeat: no-repeat; background: radial-gradient(1.4px 1.4px at 18% 24%, rgba(255,255,255,0.55) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 72% 38%, rgba(160,200,255,0.5) 50%, transparent 51%), radial-gradient(1.1px 1.1px at 42% 72%, rgba(255,255,255,0.4) 50%, transparent 51%), radial-gradient(1.3px 1.3px at 88% 80%, rgba(200,160,255,0.5) 50%, transparent 51%), radial-gradient(1px 1px at 60% 12%, rgba(255,255,255,0.35) 50%, transparent 51%), radial-gradient(1px 1px at 32% 52%, rgba(255,255,255,0.3) 50%, transparent 51%), radial-gradient(ellipse at 50% -10%, #15102e 0%, var(--vx-bg) 60%); } body.vx::after { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background-image: linear-gradient(rgba(120,130,220,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(120,130,220,0.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 0%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 25%, #000 0%, transparent 80%); } /* Existing dev/portal decorative layers retuned to neon */ body.vx .bg-grid { opacity: 0.5; } body.vx .bg-glow { background: radial-gradient(circle at 70% 12%, rgba(139,107,255,0.22), transparent 55%), radial-gradient(circle at 12% 60%, rgba(79,214,255,0.16), transparent 55%) !important; filter: blur(8px); } /* ---- Floating aurora blobs injected on every vx page ---- */ body.vx > .vx-aurora-fx { position: fixed; inset: -15% -10% auto -10%; height: 120%; z-index: -2; filter: blur(80px) saturate(135%); opacity: 0.75; pointer-events: none; overflow: hidden; } body.vx > .vx-aurora-fx i { position: absolute; border-radius: 50%; mix-blend-mode: screen; display: block; } body.vx > .vx-aurora-fx i.a { width: 44vw; height: 44vw; max-width: 600px; max-height: 600px; top: -6%; left: 6%; background: radial-gradient(circle, var(--vx-violet) 0%, transparent 68%); animation: vx-fx1 17s ease-in-out infinite; } body.vx > .vx-aurora-fx i.b { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; top: 2%; right: 4%; background: radial-gradient(circle, var(--vx-cyan) 0%, transparent 66%); animation: vx-fx2 21s ease-in-out infinite; } body.vx > .vx-aurora-fx i.c { width: 32vw; height: 32vw; max-width: 440px; max-height: 440px; bottom: -12%; left: 40%; opacity: 0.65; background: radial-gradient(circle, var(--vx-pink) 0%, transparent 68%); animation: vx-fx3 25s ease-in-out infinite; } @keyframes vx-fx1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,5%) scale(1.12)} } @keyframes vx-fx2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5%,7%) scale(1.1)} } @keyframes vx-fx3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4%,-6%) scale(1.15)} } /* ---- Nav ---- */ body.vx .top-nav { background: linear-gradient(to bottom, rgba(8,6,15,0.96), rgba(8,6,15,0.5)) !important; border-bottom: 1px solid transparent; } body.vx .top-nav.scrolled { background: rgba(8,6,15,0.82) !important; backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--vx-glass-brd); } body.vx .top-nav-brand { color: var(--vx-violet) !important; text-shadow: 0 0 18px rgba(139,107,255,0.4); } body.vx .top-nav-brand span { color: var(--vx-cyan) !important; } body.vx .top-nav-links a { color: var(--vx-muted); } body.vx .top-nav-links a:hover { color: var(--vx-text); } body.vx .top-nav-links a.active { color: var(--vx-cyan) !important; } body.vx .nav-search { background: var(--vx-glass); border-color: var(--vx-glass-brd); color: var(--vx-muted); border-radius: 999px; } body.vx .nav-avatar { background: linear-gradient(135deg, var(--vx-violet), var(--vx-cyan)); box-shadow: 0 0 16px rgba(139,107,255,0.4); } /* ---- Buttons (shared + login + dev) ---- */ body.vx .btn, body.vx .login-btn, body.vx .dev-btn { border-radius: 999px; transition: transform 0.22s var(--vx-ease), box-shadow 0.22s, background 0.22s, border-color 0.22s; } body.vx .btn-play, body.vx .btn-primary, body.vx .login-btn-primary, body.vx .dev-btn-primary { background: linear-gradient(100deg, var(--vx-violet-deep), var(--vx-violet)) !important; color: #fff !important; border: 1px solid transparent !important; box-shadow: 0 8px 30px rgba(106,61,240,0.45), inset 0 0 0 1px rgba(255,255,255,0.12); } body.vx .btn-play:hover, body.vx .btn-primary:hover, body.vx .login-btn-primary:hover, body.vx .dev-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(106,61,240,0.62) !important; background: linear-gradient(100deg, var(--vx-violet), var(--vx-violet-deep)) !important; } body.vx .btn-ghost, body.vx .btn-secondary, body.vx .login-btn-ghost, body.vx .dev-btn-secondary { background: rgba(255,255,255,0.05) !important; color: var(--vx-text) !important; border: 1px solid var(--vx-glass-brd) !important; backdrop-filter: blur(6px); } body.vx .btn-ghost:hover, body.vx .btn-secondary:hover, body.vx .login-btn-ghost:hover, body.vx .dev-btn-secondary:hover { background: rgba(255,255,255,0.1) !important; transform: translateY(-2px); border-color: rgba(139,107,255,0.5) !important; } body.vx .btn-accent { background: linear-gradient(100deg, var(--vx-cyan-deep), var(--vx-cyan)) !important; color: #08060f !important; box-shadow: 0 8px 26px rgba(79,214,255,0.4); } body.vx .login-btn-wallet { background: rgba(79,214,255,0.1) !important; color: var(--vx-cyan) !important; border: 1px solid rgba(79,214,255,0.4) !important; } body.vx .login-btn-wallet:hover { background: rgba(79,214,255,0.18) !important; } body.vx .btn:disabled, body.vx .btn-pending { opacity: 0.9; } /* ============================ HERO (home + download) ============================ */ body.vx .hero { overflow: hidden; align-items: flex-start !important; justify-content: center !important; padding-top: calc(var(--nav-height) + 2.5rem) !important; min-height: max(540px, calc(100svh - var(--nav-height))) !important; } body.vx .hero-content { position: relative; z-index: 2; max-width: min(520px, 100%); } body.vx .hero-img-placeholder { background: radial-gradient(120% 120% at 70% 20%, rgba(139,107,255,0.35), transparent 55%), radial-gradient(100% 100% at 30% 80%, rgba(79,214,255,0.22), transparent 55%), linear-gradient(135deg, #15102e 0%, #0d0a1c 55%, var(--vx-bg) 100%) !important; } body.vx .scene-grid { background-image: linear-gradient(rgba(139,107,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(139,107,255,0.06) 1px, transparent 1px) !important; } body.vx .scene-glow { background: radial-gradient(circle, var(--vx-glow-v) 0%, transparent 70%) !important; width: 320px !important; height: 320px !important; } body.vx .scene-glow2 { background: radial-gradient(circle, var(--vx-glow-c) 0%, transparent 70%) !important; width: 220px !important; height: 220px !important; } body.vx .hero-bg { background: linear-gradient(to right, rgba(8,6,15,0.96) 26%, transparent 70%), linear-gradient(to top, var(--vx-bg) 0%, transparent 45%) !important; } body.vx .hero-art { background: radial-gradient(ellipse at 70% 35%, rgba(79,214,255,0.08) 0%, transparent 55%), radial-gradient(ellipse at 25% 75%, rgba(139,107,255,0.14) 0%, transparent 50%) !important; } body.vx .hero-title { color: #fff !important; text-shadow: 0 0 42px rgba(139,107,255,0.4); } body.vx .hero-title span { background: linear-gradient(100deg, var(--vx-cyan), var(--vx-violet) 55%, var(--vx-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: vx-shine 6s linear infinite; } @keyframes vx-shine { to { background-position: 200% center; } } body.vx .hero-badge { background: linear-gradient(100deg, var(--vx-violet-deep), var(--vx-violet)) !important; border-radius: 999px; box-shadow: 0 6px 20px rgba(106,61,240,0.4); } body.vx .hero-badge.hot { background: linear-gradient(100deg, #d6266b, var(--vx-pink)) !important; } body.vx .hero-tag { border-color: rgba(79,214,255,0.35); color: var(--vx-cyan); border-radius: 999px; background: rgba(79,214,255,0.06); } body.vx .hero-score { background: rgba(255,201,77,0.12); border-color: rgba(255,201,77,0.4); color: var(--vx-gold); } body.vx .hero-stat .stat-value { color: var(--vx-cyan); } /* ============================ SECTION HEADINGS ============================ */ body.vx .section-title { color: #fff; } body.vx .section-title span { color: var(--vx-cyan); } body.vx .section-sub { color: var(--vx-muted); } body.vx .section-see-all { color: var(--vx-cyan); } body.vx .section-see-all:hover { color: #fff; } /* ============================ TICKER ============================ */ body.vx .ticker-bar { background: linear-gradient(90deg, var(--vx-violet-deep), var(--vx-cyan-deep)) !important; } body.vx .ticker-item { color: rgba(255,255,255,0.92); } /* ============================ GAME CARDS / POSTERS ============================ */ body.vx .game-card { background: var(--vx-glass-2); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; transition: transform 0.25s var(--vx-ease), border-color 0.25s, box-shadow 0.25s; } body.vx .game-card:hover { border-color: rgba(139,107,255,0.45); box-shadow: 0 26px 60px rgba(0,0,0,0.6), 0 0 36px rgba(139,107,255,0.18); } body.vx .card-badge { border-radius: 999px; backdrop-filter: blur(8px); } body.vx .badge-silver { background: rgba(216,220,240,0.16); color: var(--vx-silver); border: 1px solid rgba(216,220,240,0.4); } body.vx .badge-gold, body.vx .badge-top { background: rgba(255,201,77,0.16); color: var(--vx-gold); border: 1px solid rgba(255,201,77,0.45); } body.vx .badge-certified { background: rgba(120,230,160,0.14); color: var(--vx-green); border: 1px solid rgba(120,230,160,0.4); } body.vx .card-tier { color: var(--vx-cyan); } body.vx .card-rating { color: var(--vx-gold); } body.vx .card-play-btn { background: linear-gradient(135deg, var(--vx-violet), var(--vx-cyan)); color: #08060f; } body.vx .poster-image { border-radius: 14px; border-color: var(--vx-glass-brd); } body.vx .poster-card:hover { filter: drop-shadow(0 14px 30px rgba(139,107,255,0.25)); } body.vx .poster-card .badge { background: linear-gradient(100deg, var(--vx-violet-deep), var(--vx-violet)); color: #fff; border-radius: 999px; } body.vx .poster-card .badge-gold { background: linear-gradient(100deg, #b9831c, var(--vx-gold)); color: #1a1407; } body.vx .category-pill { background: var(--vx-glass); border: 1px solid var(--vx-glass-brd); color: var(--vx-muted); border-radius: 999px; backdrop-filter: blur(8px); transition: border-color 0.2s, color 0.2s, transform 0.2s; } body.vx .category-pill:hover, body.vx .category-pill.active { color: var(--vx-text); border-color: rgba(139,107,255,0.45); background: rgba(139,107,255,0.12); } body.vx .category-pill.active { color: var(--vx-cyan); } body.vx .cat-icon { color: var(--vx-violet); } /* ============================ INFO STRIP / TILES ============================ */ body.vx .info-tile { background: var(--vx-glass); border: 1px solid var(--vx-glass-brd); border-radius: 16px; backdrop-filter: blur(10px); transition: transform 0.25s, border-color 0.25s; position: relative; overflow: hidden; } body.vx .info-tile:hover { transform: translateY(-4px); border-color: rgba(139,107,255,0.4); } body.vx .info-tile h3 { color: #fff; } body.vx .info-tile p, body.vx .info-tile a { color: var(--vx-muted); } body.vx .info-tile a { color: var(--vx-cyan); } /* ============================ FOOTER ============================ */ body.vx .store-footer { background: transparent; border-top: 1px solid var(--vx-glass-brd); } body.vx .footer-logo { color: var(--vx-violet); } body.vx .footer-logo span { color: var(--vx-cyan); } body.vx .footer-links a:hover { color: var(--vx-cyan); } /* ============================ LOGIN / SIGN-IN ============================ */ body.vx .login-header h1 { color: #fff; } body.vx .login-header h1 span { color: var(--vx-cyan); } body.vx .login-header p { color: var(--vx-muted); } body.vx .login-card { background: var(--vx-glass-2) !important; border: 1px solid var(--vx-glass-brd) !important; border-radius: 20px !important; backdrop-filter: blur(16px) saturate(130%); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 50px rgba(139,107,255,0.08); } body.vx .login-card.focused { border-color: rgba(139,107,255,0.5) !important; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 40px rgba(139,107,255,0.22); } body.vx .login-card h2 { color: #fff; } body.vx .login-card-tag { background: rgba(79,214,255,0.1); color: var(--vx-cyan); border-radius: 999px; } body.vx .login-field label { color: var(--vx-muted); } body.vx .login-field input { background: rgba(8,6,15,0.6) !important; border: 1px solid var(--vx-glass-brd) !important; color: var(--vx-text) !important; border-radius: 12px !important; transition: border-color 0.2s, box-shadow 0.2s; } body.vx .login-field input:focus { border-color: var(--vx-cyan) !important; box-shadow: 0 0 0 3px rgba(79,214,255,0.18) !important; outline: none; } body.vx .login-divider::after { background: var(--vx-glass-brd); } body.vx .login-hint, body.vx .login-footer-note { color: var(--vx-muted); } body.vx .login-footer-note a, body.vx .login-divider { color: var(--vx-cyan); } body.vx .login-status.ok { color: var(--vx-green); } body.vx .login-status.err { color: #ff8aa0; } body.vx .sign-in-code-box { background: rgba(79,214,255,0.06); border: 1px solid rgba(79,214,255,0.25); border-radius: 14px; } body.vx .sign-in-code-label { color: var(--vx-muted); } body.vx .sign-in-code-value { color: var(--vx-cyan); font-family: var(--vx-fd); letter-spacing: 0.25em; text-shadow: 0 0 20px rgba(79,214,255,0.5); } body.vx .sign-in-code-note, body.vx .sign-in-code-note code { color: var(--vx-muted); } body.vx .nav-login-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; padding: 0.46rem 1.05rem; border-radius: 999px; background: linear-gradient(100deg, var(--vx-violet-deep), var(--vx-violet)) !important; color: #fff !important; border: 1px solid transparent !important; box-shadow: 0 6px 18px rgba(106,61,240,0.4); transition: transform 0.2s var(--vx-ease), box-shadow 0.2s; } body.vx .nav-login-btn:hover { color: #fff !important; transform: translateY(-1px); box-shadow: 0 9px 24px rgba(106,61,240,0.58); } body.vx .nav-login-dev { background: rgba(79,214,255,0.12) !important; color: var(--vx-cyan) !important; box-shadow: none; } body.vx .nav-dev-pill, body.vx .nav-login-dev { color: var(--vx-cyan); } body.vx .login-signed-bar { background: var(--vx-glass); border: 1px solid var(--vx-glass-brd); border-radius: 14px; } body.vx .login-signed-bar a { color: var(--vx-cyan); } /* ============================ PROFILE ============================ */ body.vx .profile-avatar-lg { background: linear-gradient(135deg, var(--vx-violet), var(--vx-cyan)) !important; box-shadow: 0 0 40px rgba(139,107,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.2); color: #fff; } body.vx #profile-name, body.vx .profile-hero h1 { color: #fff; font-family: var(--vx-fd); letter-spacing: 0.05em; } body.vx .profile-hero .sub { color: var(--vx-muted); } body.vx .profile-wallet-box, body.vx .profile-wallet-panel { background: var(--vx-glass); border: 1px solid var(--vx-glass-brd); border-radius: 16px; backdrop-filter: blur(10px); } body.vx .profile-wallet-box .label { color: var(--vx-muted); } body.vx .profile-wallet-box code, body.vx .wallet-option code { color: var(--vx-cyan); background: rgba(8,6,15,0.55); border: 1px solid var(--vx-glass-brd); border-radius: 8px; } body.vx .wallet-option { background: var(--vx-glass-2); border: 1px solid var(--vx-glass-brd); border-radius: 16px; transition: border-color 0.25s, transform 0.25s; } body.vx .wallet-option:hover { transform: translateY(-3px); border-color: rgba(139,107,255,0.4); } body.vx .wallet-option.active { border-color: var(--vx-cyan); box-shadow: 0 0 30px rgba(79,214,255,0.18); } body.vx .wallet-option h3 { color: #fff; } body.vx .wallet-option p { color: var(--vx-muted); } body.vx .profile-signed-out { color: var(--vx-text); } body.vx .store-status { color: var(--vx-muted); } /* ============================ DEVELOPERS HUB ============================ */ body.vx .dev-header .logo, body.vx .dev-header .top-nav-brand { color: var(--vx-violet); } body.vx .dev-header h1 { color: #fff; } body.vx .dev-header h1 span { color: var(--vx-cyan); } body.vx .dev-header .tagline, body.vx .dev-header p { color: var(--vx-muted); } body.vx .dev-domain { background: var(--vx-glass); border: 1px solid var(--vx-glass-brd); color: var(--vx-text); border-radius: 999px; transition: border-color 0.2s, transform 0.2s; } body.vx .dev-domain:hover { border-color: rgba(139,107,255,0.5); transform: translateY(-1px); } body.vx .dev-domain-api { color: var(--vx-cyan); } body.vx .dev-pillar { background: var(--vx-glass); border: 1px solid var(--vx-glass-brd); border-radius: 16px; backdrop-filter: blur(10px); transition: transform 0.25s, border-color 0.25s; position: relative; overflow: hidden; } body.vx .dev-pillar::after { content: ""; position: absolute; width: 120px; height: 120px; right: -34px; top: -34px; border-radius: 50%; background: radial-gradient(circle, var(--vx-glow-v), transparent 70%); opacity: 0.35; } body.vx .dev-pillar:hover { transform: translateY(-4px); border-color: rgba(139,107,255,0.4); } body.vx .dev-pillar h3, body.vx .dev-pillar h3 a { color: #fff; } body.vx .dev-pillar h3 a:hover { color: var(--vx-cyan); } body.vx .dev-pillar p { color: var(--vx-muted); position: relative; z-index: 1; } body.vx .dev-status, body.vx .dev-api-panel { background: var(--vx-glass); border: 1px solid var(--vx-glass-brd); border-radius: 16px; backdrop-filter: blur(10px); } body.vx .dev-status strong { color: #fff; } body.vx .dev-status a, body.vx .dev-api-endpoints a, body.vx .dev-footer a { color: var(--vx-cyan); } body.vx .dev-status ul, body.vx .dev-status li { color: var(--vx-muted); } body.vx .dev-api-panel h2, body.vx .dev-section h2 { color: #fff; } body.vx .dev-api-panel h2 span, body.vx .dev-section h2 span { color: var(--vx-cyan); } body.vx .dev-api-intro { color: var(--vx-muted); } body.vx .dev-api-endpoints li { border-color: var(--vx-glass-brd); } body.vx .dev-api-endpoints span { color: var(--vx-muted); } body.vx .dev-footer { color: var(--vx-muted); border-top: 1px solid var(--vx-glass-brd); } body.vx code { color: var(--vx-cyan); } /* ============================ DEV PORTAL APP ============================ */ body.vx .dev-steps { color: var(--vx-muted); } body.vx .dev-steps span { background: var(--vx-glass); border: 1px solid var(--vx-glass-brd); border-radius: 999px; } body.vx .dev-steps span.done { background: rgba(139,107,255,0.18); border-color: rgba(139,107,255,0.5); color: var(--vx-text); } body.vx .dev-session-bar, body.vx .dev-settings { background: var(--vx-glass); border: 1px solid var(--vx-glass-brd); border-radius: 16px; backdrop-filter: blur(10px); } body.vx .dev-session-title strong { color: #fff; } body.vx .dev-session-api code, body.vx .dev-settings input { color: var(--vx-text); } body.vx .dev-tabs { border-bottom: 1px solid var(--vx-glass-brd); } body.vx .dev-tab { color: var(--vx-muted); border-radius: 999px 999px 0 0; transition: color 0.2s, background 0.2s; } body.vx .dev-tab:hover { color: var(--vx-text); } body.vx .dev-tab.active { color: #fff; background: linear-gradient(180deg, rgba(139,107,255,0.18), transparent); border-bottom: 2px solid var(--vx-cyan); } body.vx .dev-card { background: var(--vx-glass-2); border: 1px solid var(--vx-glass-brd); border-radius: 18px; backdrop-filter: blur(12px); box-shadow: 0 18px 50px rgba(0,0,0,0.4); } body.vx .dev-card h2 { color: #fff; } body.vx .dev-card h3 { color: var(--vx-text); } body.vx .dev-field label, body.vx .dev-settings label { color: var(--vx-muted); } body.vx .dev-field input, body.vx .dev-field select, body.vx .dev-field textarea, body.vx .dev-settings input { background: rgba(8,6,15,0.6) !important; border: 1px solid var(--vx-glass-brd) !important; color: var(--vx-text) !important; border-radius: 12px !important; transition: border-color 0.2s, box-shadow 0.2s; } body.vx .dev-field input:focus, body.vx .dev-field select:focus, body.vx .dev-field textarea:focus, body.vx .dev-settings input:focus { border-color: var(--vx-cyan) !important; box-shadow: 0 0 0 3px rgba(79,214,255,0.18) !important; outline: none; } body.vx .dev-field small { color: var(--vx-muted); } body.vx .dev-badge { border-radius: 999px; } body.vx .dev-badge.published { background: rgba(120,230,160,0.16); color: var(--vx-green); border: 1px solid rgba(120,230,160,0.4); } body.vx .dev-badge.draft { background: rgba(255,201,77,0.16); color: var(--vx-gold); border: 1px solid rgba(255,201,77,0.4); } body.vx .dev-json, body.vx .dev-list li { background: rgba(8,6,15,0.5); border: 1px solid var(--vx-glass-brd); border-radius: 12px; color: var(--vx-text); } body.vx .dev-list li { color: var(--vx-muted); } body.vx .dev-progress { background: rgba(8,6,15,0.6); border-radius: 999px; } body.vx .dev-progress-bar { background: linear-gradient(90deg, var(--vx-violet), var(--vx-cyan)); } body.vx .dev-pkg-source-opt { border: 1px solid var(--vx-glass-brd); border-radius: 12px; } body.vx .dev-status.ok { color: var(--vx-green); } body.vx .dev-status.err { color: #ff8aa0; } /* ============================ MOTION SAFETY ============================ */ @media (prefers-reduced-motion: reduce) { body.vx > .vx-aurora-fx i, body.vx .hero-title span, body.vx .scene-glow, body.vx .scene-glow2 { animation: none !important; } } /* ---- Brand wordmark split: VEX (violet) + TRIS (cyan) ---- */ body.vx .dev-header .logo { color: var(--vx-violet); } body.vx .dev-header .logo span { color: var(--vx-cyan); } body.vx.dev-page .top-nav-brand span { display: inline !important; color: var(--vx-cyan) !important; } /* ---- Ambient FX: particle canvas + cursor spotlight ---- */ body.vx .vx-fx-canvas, body.vx-store .vx-fx-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; } body.vx .vx-spotlight, body.vx-store .vx-spotlight { position: fixed; top: 0; left: 0; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; z-index: -1; mix-blend-mode: screen; will-change: transform; background: radial-gradient(circle, rgba(139,107,255,0.10), rgba(79,214,255,0.05) 42%, transparent 70%); } @media (prefers-reduced-motion: reduce) { body.vx .vx-spotlight, body.vx-store .vx-spotlight { display: none; } } /* Keep page content above ambient layers (spotlight used to sit at z-index: 1) */ body.vx > :not(.top-nav):not(.vx-aurora-fx):not(.vx-fx-canvas):not(.vx-spotlight), body.vx-store > :not(.top-nav):not(.vx-fx-canvas):not(.vx-spotlight) { position: relative; z-index: 1; }