76 lines
3.4 KiB
CSS
76 lines
3.4 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────
|
|
* Theme · neon-cyber
|
|
* Cyberpunk future-tech. Deep navy canvas, electric cyan as primary
|
|
* accent, magenta as the secondary glow tint (used only via *-glow
|
|
* alpha). Clash Display for display, Satoshi for body, JetBrains Mono
|
|
* for terminal-y bits. Signature: faint cyan grid + neon text-shadow
|
|
* on hero text.
|
|
*
|
|
* character knobs:
|
|
* • hero numbers — Clash Display, weight 700, tabular figures
|
|
* • rule — 1px solid cyan (low alpha)
|
|
* • card — slight radius (8-12px) with cyan inset glow
|
|
* • surface — fine cyan grid (40px) + soft scan vignette
|
|
* • motion — snappy + futuristic (faster than midnight)
|
|
* ───────────────────────────────────────────────────────────────────── */
|
|
:root {
|
|
/* ─── palette ─── */
|
|
--shell: #04060f;
|
|
--surface: #0a0f1c;
|
|
--surface-2: #111828;
|
|
--surface-3: #1a2238;
|
|
--text: #e8f4ff;
|
|
--text-2: #b8c8e0;
|
|
--text-mute: #6a7a98;
|
|
--text-faint: #3a4660;
|
|
--rule: rgba(0, 255, 204, 0.22);
|
|
--accent: #00ffcc; /* electric cyan */
|
|
--accent-soft: rgba(0, 255, 204, 0.10);
|
|
--accent-glow: rgba(255, 0, 170, 0.55); /* SIGNATURE — magenta glow */
|
|
|
|
/* ─── fonts ─── */
|
|
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
|
--font-display-en: "Clash Display", "Space Grotesk", "Manrope", "Inter", sans-serif;
|
|
--font-body: "Satoshi", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
|
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
|
--font-features: "tnum", "ss01", "ss02", "zero";
|
|
|
|
/* ─── motion: snappy future ─── */
|
|
--dur-quick: 160ms;
|
|
--dur-base: 380ms;
|
|
--dur-slow: 650ms;
|
|
--dur-cinematic: 1050ms;
|
|
|
|
/* ─── design identity: cyber edge ─── */
|
|
--r-card: var(--r-sm);
|
|
--r-stage: 0;
|
|
--rule-w: 1px;
|
|
--rule-style: solid;
|
|
--hero-num-font: var(--font-display-en);
|
|
--hero-num-style: normal;
|
|
--hero-num-weight: 700;
|
|
--hero-num-track: -0.02em;
|
|
--stage-pad-x: 100px;
|
|
--stage-pad-y: 80px;
|
|
--text-shadow:
|
|
0 0 12px rgba(0, 255, 204, 0.35),
|
|
0 0 24px rgba(255, 0, 170, 0.12); /* SIGNATURE — cyan + magenta tail */
|
|
--card-shadow:
|
|
inset 0 0 0 1px var(--rule),
|
|
0 0 40px rgba(0, 255, 204, 0.06);
|
|
--shadow-stage:
|
|
0 60px 160px rgba(0, 30, 50, 0.65),
|
|
0 0 0 1px rgba(0, 255, 204, 0.18),
|
|
0 0 80px rgba(0, 255, 204, 0.08);
|
|
|
|
/* ─── decoration: cyan grid + soft scan vignette ─── */
|
|
--surface-pattern:
|
|
linear-gradient(rgba(0, 255, 204, 0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 255, 204, 0.05) 1px, transparent 1px),
|
|
linear-gradient(rgba(0, 255, 204, 0.025) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 255, 204, 0.025) 1px, transparent 1px);
|
|
--surface-pattern-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
|
|
--surface-vignette:
|
|
radial-gradient(ellipse at center, transparent 35%, rgba(0, 10, 25, 0.6) 100%);
|
|
}
|