69 lines
3.3 KiB
CSS
69 lines
3.3 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────
|
|
* Theme · forest-ink
|
|
* Deep-forest-green ink on ivory cream. Like indigo-porcelain, the
|
|
* move is that the ink itself is green — text / headings / hero
|
|
* numbers all render in deep forest, never pure black. Source Serif
|
|
* body + Playfair Display display = vintage National Geographic
|
|
* spread. The accent is a slightly brighter green (used sparingly
|
|
* for kpi / link emphasis).
|
|
*
|
|
* character knobs:
|
|
* • hero numbers — italic Playfair Display, weight 500
|
|
* • rule — 1px solid faint warm hairline
|
|
* • card — refined small radius
|
|
* • surface — very subtle paper grain (warm, multiply)
|
|
* • motion — slow + cinematic (documentary pace)
|
|
* ───────────────────────────────────────────────────────────────────── */
|
|
:root {
|
|
/* ─── palette ─── */
|
|
--shell: #ece7da;
|
|
--surface: #f5f1e8;
|
|
--surface-2: #faf7ee;
|
|
--surface-3: #ebe7d8;
|
|
--text: #1a2e1f; /* SIGNATURE — forest green IS the ink */
|
|
--text-2: #253d2c;
|
|
--text-mute: #5c6a5e;
|
|
--text-faint: #909a92;
|
|
--rule: #c8c0a8;
|
|
--accent: #4d7a4d; /* slightly brighter forest for emphasis */
|
|
--accent-soft: rgba(77, 122, 77, 0.10);
|
|
--accent-glow: rgba(77, 122, 77, 0.32);
|
|
|
|
/* ─── fonts ─── */
|
|
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
|
--font-display-en: "Playfair Display", "GT Sectra", "Bodoni 72", "Times New Roman", serif;
|
|
--font-body: "Source Serif 4", "Source Serif Pro", "Noto Serif SC", "Times New Roman", serif;
|
|
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
|
--font-features: "ss01", "tnum", "lnum";
|
|
|
|
/* ─── motion: slow documentary pace ─── */
|
|
--dur-base: 720ms;
|
|
--dur-slow: 1150ms;
|
|
--dur-cinematic: 1650ms;
|
|
|
|
/* ─── design identity: vintage editorial ─── */
|
|
--r-card: var(--r-sm);
|
|
--r-stage: 0;
|
|
--rule-w: 1px;
|
|
--rule-style: solid;
|
|
--hero-num-font: var(--font-display-en);
|
|
--hero-num-style: italic;
|
|
--hero-num-weight: 500;
|
|
--hero-num-track: -0.035em;
|
|
--stage-pad-x: 130px;
|
|
--stage-pad-y: 92px;
|
|
--card-shadow:
|
|
0 1px 0 var(--rule),
|
|
0 20px 48px rgba(26, 46, 31, 0.10);
|
|
--shadow-stage:
|
|
0 60px 160px rgba(26, 46, 31, 0.28),
|
|
0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
|
|
/* ─── decoration: faint warm paper grain (National Geographic feel) ─── */
|
|
--surface-pattern:
|
|
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.50 0 0 0 0 0.35 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
|
--surface-pattern-size: 320px 320px;
|
|
--surface-pattern-blend: multiply;
|
|
--surface-pattern-opacity: 0.55;
|
|
}
|