Spaces:
Running
Running
| @import "./fonts.css"; | |
| /* Design tokens + shared primitives. Component styles live in their .vue files. */ | |
| :root { | |
| --bg: #0b0b0c; | |
| --surface: #141416; | |
| --surface-2: #1c1c1f; | |
| --line: #262629; | |
| --line-strong: #3a3a3f; | |
| --text: #f2eee6; | |
| --text-2: #b8b3a8; | |
| --text-3: #77736b; | |
| /* Change --accent to re-theme; everything else derives from it. */ | |
| --accent: #d7ff3b; | |
| --accent-ink: #0b0b0c; | |
| --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); | |
| --accent-hover: color-mix(in srgb, var(--accent) 80%, white); | |
| --radius: 4px; | |
| /* sticky header height; the docked panel and sticky table heads sit under it */ | |
| --header-h: 57px; | |
| /* docked detail panel: --panel is the room it takes, 0 while closed */ | |
| --panel-w: 460px; | |
| --panel: 0px; | |
| --font: "Inter Tight Variable", ui-sans-serif, system-ui, sans-serif; | |
| --font-display: "Big Shoulders Display Variable", "Inter Tight Variable", sans-serif; | |
| --font-mono: "JetBrains Mono Variable", ui-monospace, Menlo, monospace; | |
| --ease: cubic-bezier(0.2, 0.7, 0.2, 1); | |
| color-scheme: dark; | |
| } | |
| html.panel-open { --panel: var(--panel-w); } | |
| *, *::before, *::after { box-sizing: border-box; } | |
| html, body { margin: 0; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font); | |
| font-size: 14px; | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| ::selection { background: var(--accent); color: var(--accent-ink); } | |
| button { font: inherit; color: inherit; } | |
| svg { width: 1em; height: 1em; flex: none; } | |
| :focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } | |
| /* The page itself has no visible scrollbar — <ScrollProgress> in the header shows position | |
| instead, and the layout no longer shifts by the scrollbar's width. */ | |
| html { scrollbar-width: none; } | |
| html::-webkit-scrollbar { display: none; } | |
| /* Inner scroll areas (e.g. the drawer) get thin, themed scrollbars. */ | |
| * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } | |
| ::-webkit-scrollbar { width: 10px; height: 10px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--line-strong); | |
| border: 3px solid var(--bg); | |
| border-radius: 10px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--text-3); } | |
| /* Shared primitives */ | |
| .mono { font-family: var(--font-mono); } | |
| .eyebrow { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-3); | |
| } | |
| .btn { | |
| display: inline-flex; align-items: center; justify-content: center; gap: 8px; | |
| height: 40px; padding: 0 16px; | |
| border: 1px solid var(--line-strong); border-radius: var(--radius); | |
| background: transparent; color: var(--text); | |
| font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; | |
| text-decoration: none; cursor: pointer; | |
| transition: border-color 0.15s, background 0.15s, color 0.15s; | |
| } | |
| .btn:hover { border-color: var(--text-2); } | |
| .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } | |
| .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } | |