feat(v2): design tokens, fonts (Manrope/Space Grotesk/JetBrains Mono), galaxy background

2026-06-12 00:16:01 +02:00
parent 1a7bf8ca11
commit f378d7aed4
5 changed files with 410 additions and 1 deletions
@@ -0,0 +1,110 @@
+/* ================================================================
+   nexus-tokens.css — Nexus Mission Control V2 Design Tokens
+   Geladen NACH main.css, überschreibt shadcn/v1-Standards.
+   ================================================================ */
+
+:root {
+  /* ── Surfaces ─────────────────────────────────────── */
+  --space-0: #050410;
+  --space-1: #0a0818;
+  --space-2: #0e0c20;
+  --space-3: #141130;
+  --space-4: #1b1742;
+  --glass:   rgba(20, 17, 48, 0.55);
+  --glass-2: rgba(28, 24, 64, 0.55);
+
+  /* ── Lines ────────────────────────────────────────── */
+  --line:    rgba(150, 140, 255, 0.10);
+  --line-2:  rgba(150, 140, 255, 0.18);
+  --line-3:  rgba(150, 140, 255, 0.30);
+
+  /* ── Text ─────────────────────────────────────────── */
+  --tx:  #ece9ff;
+  --tx-2: #a8a3d6;
+  --tx-3: #6f6aa0;
+
+  /* ── Accent Gradient ──────────────────────────────── */
+  --a-blue:   #4f7cff;
+  --a-purple: #b557f6;
+  --a-mid:    #7c6cff;
+  --grad:   linear-gradient(120deg, var(--a-blue), var(--a-purple));
+  --grad-soft: linear-gradient(120deg, rgba(79,124,255,.18), rgba(181,87,246,.18));
+
+  /* ── Status ───────────────────────────────────────── */
+  --st-work:  #3ddc97;
+  --st-think: #34d6f5;
+  --st-queue: #fbbf24;
+  --st-block: #fb7185;
+  --st-idle:  #6b6796;
+
+  /* ── Glows ────────────────────────────────────────── */
+  --glow:        0 0 0 1px rgba(124,108,255,.20), 0 0 28px -4px rgba(124,108,255,.55);
+  --glow-blue:   0 0 24px -2px rgba(79,124,255,.65);
+  --glow-purple: 0 0 24px -2px rgba(181,87,246,.60);
+  --glow-work:   0 0 16px -1px rgba(61,220,151,.70);
+  --glow-think:  0 0 16px -1px rgba(52,214,245,.65);
+
+  /* ── Radius ───────────────────────────────────────── */
+  --r:    14px;
+  --r-sm: 10px;
+  --r-lg: 20px;
+
+  /* ── Layout ───────────────────────────────────────── */
+  --sidebar-w: 248px;
+  --topbar-h:  62px;
+  --rail-w:    360px;
+}
+
+/* ── Glass card utility ────────────────────────────── */
+.glass-panel {
+  background: var(--glass);
+  border: 1px solid var(--line);
+  border-radius: var(--r);
+  backdrop-filter: blur(12px);
+}
+
+/* ── Gradient text ─────────────────────────────────── */
+.grad-text {
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* ── Status dot keyframes ──────────────────────────── */
+@keyframes pulse-work {
+  0%   { box-shadow: 0 0 0 0   rgba(61,220,151,.55); }
+  70%  { box-shadow: 0 0 0 7px rgba(61,220,151,0);   }
+  100% { box-shadow: 0 0 0 0   rgba(61,220,151,0);   }
+}
+@keyframes pulse-think {
+  0%   { box-shadow: 0 0 0 0   rgba(52,214,245,.55); }
+  70%  { box-shadow: 0 0 0 7px rgba(52,214,245,0);   }
+  100% { box-shadow: 0 0 0 0   rgba(52,214,245,0);   }
+}
+@keyframes pulse-block {
+  0%   { box-shadow: 0 0 0 0   rgba(251,113,133,.55); }
+  70%  { box-shadow: 0 0 0 7px rgba(251,113,133,0);   }
+  100% { box-shadow: 0 0 0 0   rgba(251,113,133,0);   }
+}
+@keyframes shimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(180%);  }
+}
+/* ── V2 Scrollbars ─────────────────────────────────── */
+.v2-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
+.v2-scroll::-webkit-scrollbar-thumb {
+  background: rgba(124,108,255,.22);
+  border-radius: 9px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+.v2-scroll::-webkit-scrollbar-thumb:hover {
+  background: rgba(124,108,255,.4);
+  background-clip: padding-box;
+}
+.v2-scroll::-webkit-scrollbar-track { background: transparent; }
+
+/* ── Typography helpers ────────────────────────────── */
+.font-display { font-family: 'Space Grotesk', sans-serif; }
+.font-mono-v2 { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }