66 lines
2.9 KiB
CSS
66 lines
2.9 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────
|
|
* Theme · blueprint
|
|
* Engineering schematic / architect's drafting board. Deep navy with
|
|
* drafting-cyan accent, IBM Plex Mono everywhere, signature DASHED
|
|
* 2px rules + 60px drafting grid baked into the stage. Hero numbers
|
|
* are mono cyan with ticks.
|
|
*
|
|
* character knobs:
|
|
* • hero numbers — mono cyan, 0 letter-spacing
|
|
* • rule — 2px DASHED cyan (drafting line)
|
|
* • card — 2px solid border, 0 radius
|
|
* • surface — 60px drafting grid
|
|
* • motion — measured (precise drafting tools)
|
|
* ───────────────────────────────────────────────────────────────────── */
|
|
:root {
|
|
/* ─── palette ─── */
|
|
--shell: #0a1224;
|
|
--surface: #0e1a2e;
|
|
--surface-2: #142441;
|
|
--surface-3: #1c2f54;
|
|
--text: #d6e5ff;
|
|
--text-2: #a8c2f0;
|
|
--text-mute: #6c89b8;
|
|
--text-faint: #3e5680;
|
|
--rule: rgba(120, 200, 255, 0.30);
|
|
--accent: #4dd2ff;
|
|
--accent-soft: rgba(77, 210, 255, 0.10);
|
|
--accent-glow: rgba(77, 210, 255, 0.55);
|
|
|
|
/* ─── fonts (mono pairing) ─── */
|
|
--font-display-cn: "IBM Plex Sans", "Noto Sans SC", sans-serif;
|
|
--font-display-en: "IBM Plex Mono", "JetBrains Mono", monospace;
|
|
--font-body: "IBM Plex Sans", "Noto Sans SC", sans-serif;
|
|
--font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;
|
|
--font-features: "tnum", "zero", "ss01";
|
|
|
|
/* ─── motion: drafting-precise ─── */
|
|
--dur-base: 500ms;
|
|
--dur-slow: 800ms;
|
|
--dur-cinematic: 1200ms;
|
|
|
|
/* ─── design identity: drafting board ─── */
|
|
--r-card: var(--r-flat); /* SIGNATURE — engineering, not branding */
|
|
--r-stage: 0;
|
|
--rule-w: 2px;
|
|
--rule-style: dashed; /* SIGNATURE — drafting line */
|
|
--hero-num-font: var(--font-mono);
|
|
--hero-num-style: normal;
|
|
--hero-num-weight: 500;
|
|
--hero-num-track: -0.02em;
|
|
--stage-pad-x: 96px;
|
|
--stage-pad-y: 72px;
|
|
--card-shadow: inset 0 0 0 2px var(--rule);
|
|
--shadow-stage:
|
|
0 60px 160px rgba(0, 20, 60, 0.55),
|
|
0 0 0 1px rgba(120, 200, 255, 0.10);
|
|
|
|
/* ─── decoration: 60px drafting grid ─── */
|
|
--surface-pattern:
|
|
linear-gradient(rgba(120, 200, 255, 0.08) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(120, 200, 255, 0.08) 1px, transparent 1px),
|
|
linear-gradient(rgba(120, 200, 255, 0.04) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(120, 200, 255, 0.04) 1px, transparent 1px);
|
|
--surface-pattern-size: 240px 240px, 240px 240px, 60px 60px, 60px 60px;
|
|
}
|