/* ═══════════════════════════════════════════════════════════════ VANCE UI — SHARED DESIGN SYSTEM (ui.css) One source of truth for every dashboard surface. Cyberpunk: void black, neon cyan #00d4ff, magenta #e879f9. Load FIRST in ; pages layer their layout CSS on top. ═══════════════════════════════════════════════════════════════ */ :root{ /* ── core palette ─────────────────────────────── */ --void:#050506; /* deepest background */ --bg:#070b10; /* page background */ --surface:#0c1420; /* raised surface */ --card:#111b2e; /* card fill */ --card2:#0e1626; /* card alt / hover */ --line:rgba(120,140,160,.18); --line2:rgba(120,140,160,.3); /* ── text ─────────────────────────────────────── */ --ink:#e7edf2; /* primary text */ --silver:#aab0b6; /* secondary text */ --dim:#5b7d86; /* muted text */ /* ── neon accents ─────────────────────────────── */ --cyan:#00d4ff; /* primary neon */ --mag:#e879f9; /* secondary neon */ --cyan-soft:rgba(0,212,255,.12); --mag-soft:rgba(232,121,249,.12); --glow-c:0 0 18px rgba(0,212,255,.35); --glow-m:0 0 18px rgba(232,121,249,.35); /* ── semantic ─────────────────────────────────── */ --green:#00e676; --green-soft:rgba(0,230,118,.12); --red:#ff1744; --red-soft:rgba(255,23,68,.12); --yellow:#ffd600; --yellow-soft:rgba(255,214,0,.12); --orange:#ff9100; --orange-soft:rgba(255,145,0,.12); --purple:#7b2ffc; --purple-soft:rgba(123,47,252,.14); /* ── type ─────────────────────────────────────── */ --font-display:"Saira",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; /* ── shape ────────────────────────────────────── */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; --shadow:0 8px 30px rgba(0,0,0,.45); } /* ── base ─────────────────────────────────────────── */ *{box-sizing:border-box} html{scrollbar-color:var(--line2) transparent} body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-mono); -webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; letter-spacing:.04em} a{color:var(--cyan); text-decoration:none; transition:color .2s} a:hover{color:var(--mag)} ::selection{background:var(--cyan); color:#000} /* custom scrollbars (webkit) */ ::-webkit-scrollbar{width:9px; height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line2); border-radius:var(--r-pill)} ::-webkit-scrollbar-thumb:hover{background:var(--cyan)} /* ── components ───────────────────────────────────── */ /* card */ .card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow)} .card.hover{transition:border-color .25s, transform .25s, box-shadow .25s} .card.hover:hover{border-color:var(--cyan); box-shadow:var(--shadow), var(--glow-c); transform:translateY(-2px)} .card h3{color:var(--cyan); font-size:14px; text-transform:uppercase; letter-spacing:.22em; margin:0 0 12px; display:flex; align-items:center; gap:8px} .card h3::before{content:""; width:8px; height:8px; background:var(--cyan); box-shadow:var(--glow-c); border-radius:2px; flex:none} /* chip / filter pill */ .chip{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--silver); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 14px; cursor:pointer; transition:all .2s} .chip:hover{border-color:var(--cyan); color:var(--ink)} .chip.on{background:var(--cyan-soft); border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-c)} /* button */ .btn{font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--ink); background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-sm); padding:8px 16px; cursor:pointer; transition:all .2s} .btn:hover{border-color:var(--cyan); color:var(--cyan); box-shadow:var(--glow-c)} .btn.primary{background:var(--cyan-soft); border-color:var(--cyan); color:var(--cyan)} .btn.primary:hover{background:rgba(0,212,255,.22); box-shadow:var(--glow-c)} .btn.danger{border-color:rgba(255,23,68,.4); color:var(--red)} .btn.danger:hover{border-color:var(--red); box-shadow:0 0 14px rgba(255,23,68,.3)} /* input */ .input{font-family:var(--font-mono); font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line2); border-radius:var(--r-sm); padding:9px 14px; outline:none; transition:border-color .2s, box-shadow .2s; width:100%} .input::placeholder{color:var(--dim)} .input:focus{border-color:var(--cyan); box-shadow:var(--glow-c)} /* badge / stat value */ .badge{display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:var(--r-pill); border:1px solid var(--line2); color:var(--silver)} .badge.cyan{color:var(--cyan); border-color:var(--cyan); background:var(--cyan-soft)} .badge.mag{color:var(--mag); border-color:var(--mag); background:var(--mag-soft)} .badge.green{color:var(--green); border-color:var(--green); background:var(--green-soft)} .badge.red{color:var(--red); border-color:var(--red); background:var(--red-soft)} .badge.yellow{color:var(--yellow); border-color:var(--yellow); background:var(--yellow-soft)} /* kpi block */ .kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; text-align:left} .kpi .lab{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:6px} .kpi .val{font-family:var(--font-display); font-size:26px; font-weight:300; color:var(--ink); letter-spacing:.02em; font-variant-numeric:tabular-nums} .kpi .val.cyan{color:var(--cyan); text-shadow:var(--glow-c)} .kpi .val.mag{color:var(--mag); text-shadow:var(--glow-m)} .kpi .val.green{color:var(--green)} .kpi .val.red{color:var(--red)} .kpi .sub{font-size:11px; color:var(--dim); margin-top:4px; letter-spacing:.08em} /* table */ .table{width:100%; border-collapse:collapse; font-size:13px} .table th{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line2); font-weight:400} .table td{padding:9px 10px; border-bottom:1px solid var(--line); color:var(--silver); font-variant-numeric:tabular-nums} .table tr:hover td{background:var(--surface); color:var(--ink)} .table td.num,.table th.num{text-align:right} /* progress bar */ .prog{height:4px; background:var(--surface); border-radius:var(--r-pill); overflow:hidden} .prog b{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--mag)); box-shadow:var(--glow-c); transition:width .4s ease} /* status dot */ .dot{width:8px; height:8px; border-radius:50%; display:inline-block} .dot.cyan{background:var(--cyan); box-shadow:var(--glow-c)} .dot.mag{background:var(--mag); box-shadow:var(--glow-m)} .dot.green{background:var(--green); box-shadow:0 0 8px rgba(0,230,118,.6)} .dot.red{background:var(--red); box-shadow:0 0 8px rgba(255,23,68,.6)} .dot.yellow{background:var(--yellow); box-shadow:0 0 8px rgba(255,214,0,.6)} .dot.dim{background:var(--dim)} /* cyber grid backdrop */ .cyber-bg{position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(60% 50% at 50% 0%, rgba(0,212,255,.07), transparent 60%), radial-gradient(50% 40% at 90% 100%, rgba(232,121,249,.06), transparent 60%), linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px); background-size:100% 100%, 100% 100%, 42px 42px, 42px 42px; mask-image:radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image:radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%)} /* neon text */ .neon-c{color:var(--cyan); text-shadow:var(--glow-c)} .neon-m{color:var(--mag); text-shadow:var(--glow-m)} /* empty state */ .empty{color:var(--dim); font-size:13px; letter-spacing:.04em; text-align:center; padding:28px 12px; border:1px dashed var(--line2); border-radius:var(--r-md)} /* focus rings */ button:focus-visible, a:focus-visible, input:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px} @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }