193 lines
5.7 KiB
CSS
193 lines
5.7 KiB
CSS
/*
|
|
* static/css/base.css
|
|
* Design tokens, reset, and typographic foundation.
|
|
*
|
|
* Aesthetic: Industrial Ops Terminal
|
|
* Dark graphite workspace with electric cyan as the primary action colour
|
|
* and amber for warnings/consumed state. Syne for UI chrome, JetBrains Mono
|
|
* for instruction content. Strong structure, decisive whitespace.
|
|
*/
|
|
|
|
/* ── Fonts ─────────────────────────────────────────────────────────────── */
|
|
@font-face {
|
|
font-family: 'Syne';
|
|
src: url('/static/assets/fonts/syne.woff2') format('woff2');
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
src: url('/static/assets/fonts/jetbrains-mono.woff2') format('woff2');
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* ── Design tokens ──────────────────────────────────────────────────────── */
|
|
:root {
|
|
/* Surfaces */
|
|
--bg-void: #080b0d;
|
|
--bg-base: #0d1117;
|
|
--bg-raised: #131920;
|
|
--bg-overlay: #1a2230;
|
|
--bg-hover: #1f2a3a;
|
|
--bg-active: #243040;
|
|
|
|
/* Borders */
|
|
--border-subtle: #1e2c3a;
|
|
--border-muted: #253345;
|
|
--border-strong: #2e4058;
|
|
|
|
/* Text */
|
|
--text-primary: #e8edf2;
|
|
--text-secondary:#8da0b3;
|
|
--text-muted: #4a6175;
|
|
--text-disabled: #2e4a5e;
|
|
|
|
/* Brand / accent */
|
|
--cyan: #00d4ff;
|
|
--cyan-dim: #007fa8;
|
|
--cyan-glow: rgba(0, 212, 255, 0.15);
|
|
|
|
/* Status */
|
|
--green: #00e676;
|
|
--green-dim: #00703a;
|
|
--green-glow: rgba(0, 230, 118, 0.15);
|
|
|
|
--amber: #ffbe0b;
|
|
--amber-dim: #8a6500;
|
|
--amber-glow: rgba(255, 190, 11, 0.12);
|
|
|
|
--red: #ff4f4f;
|
|
--red-dim: #8a0000;
|
|
--red-glow: rgba(255, 79, 79, 0.15);
|
|
|
|
/* Typography */
|
|
--font-ui: 'Syne', system-ui, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
|
|
|
|
--text-xs: 0.6875rem; /* 11px */
|
|
--text-sm: 0.75rem; /* 12px */
|
|
--text-base: 0.875rem; /* 14px */
|
|
--text-md: 1rem; /* 16px */
|
|
--text-lg: 1.125rem; /* 18px */
|
|
--text-xl: 1.375rem; /* 22px */
|
|
--text-2xl: 1.75rem; /* 28px */
|
|
--text-3xl: 2.25rem; /* 36px */
|
|
|
|
/* Spacing */
|
|
--space-1: 0.25rem;
|
|
--space-2: 0.5rem;
|
|
--space-3: 0.75rem;
|
|
--space-4: 1rem;
|
|
--space-5: 1.25rem;
|
|
--space-6: 1.5rem;
|
|
--space-8: 2rem;
|
|
--space-10: 2.5rem;
|
|
--space-12: 3rem;
|
|
|
|
/* Radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
|
|
--shadow-md: 0 4px 16px rgba(0,0,0,0.5);
|
|
--shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
|
|
--shadow-cyan: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0,212,255,0.06);
|
|
|
|
/* Animation */
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--duration-fast: 120ms;
|
|
--duration-normal: 240ms;
|
|
--duration-slow: 400ms;
|
|
}
|
|
|
|
/* ── Light theme overrides ───────────────────────────────────────────────── */
|
|
/* Applied when <html data-theme="light"> is set by theme.js */
|
|
[data-theme="light"] {
|
|
--bg-void: #e8e8e3;
|
|
--bg-base: #f2f2ed;
|
|
--bg-raised: #ffffff;
|
|
--bg-overlay: #ebebe6;
|
|
--bg-hover: #e2e2dc;
|
|
--bg-active: #d8d8d2;
|
|
|
|
--border-subtle: #d0d0ca;
|
|
--border-muted: #c0c0b8;
|
|
--border-strong: #a8a8a0;
|
|
|
|
--text-primary: #1a1f2e;
|
|
--text-secondary:#4a5568;
|
|
--text-muted: #718096;
|
|
--text-disabled: #a0aec0;
|
|
|
|
/* Slightly desaturated accents so they work on a light surface */
|
|
--cyan: #007fa8;
|
|
--cyan-dim: #005c7a;
|
|
--cyan-glow: rgba(0, 127, 168, 0.14);
|
|
|
|
--green: #166534;
|
|
--green-dim: #14532d;
|
|
--green-glow: rgba(22, 101, 52, 0.12);
|
|
|
|
--amber: #92400e;
|
|
--amber-dim: #78350f;
|
|
--amber-glow: rgba(146, 64, 14, 0.1);
|
|
|
|
--red: #b91c1c;
|
|
--red-dim: #7f1d1d;
|
|
--red-glow: rgba(185, 28, 28, 0.1);
|
|
|
|
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
|
|
--shadow-md: 0 4px 16px rgba(0,0,0,0.1);
|
|
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
|
|
--shadow-cyan: 0 0 20px rgba(0,127,168,0.1);
|
|
}
|
|
|
|
/* ── Reset ──────────────────────────────────────────────────────────────── */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-ui);
|
|
font-size: var(--text-base);
|
|
color: var(--text-primary);
|
|
background-color: var(--bg-base);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--bg-base); }
|
|
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
|
|
|
/* Focus ring */
|
|
:focus-visible {
|
|
outline: 2px solid var(--cyan);
|
|
outline-offset: 2px;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
/* ── Typography helpers ──────────────────────────────────────────────────── */
|
|
.mono { font-family: var(--font-mono); }
|
|
.label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
|
|
.muted { color: var(--text-muted); }
|
|
.subtle { color: var(--text-secondary); }
|
|
|