67 lines
2.8 KiB
CSS
67 lines
2.8 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────
|
|
* Theme · warm-keynote
|
|
* Modern SaaS keynote with editorial warmth: warm cream canvas + sepia
|
|
* ink + teal accent + huge rounded glass slabs. Inter for everything,
|
|
* font-black for hero numbers (chunky modernist).
|
|
*
|
|
* character knobs:
|
|
* • hero numbers — chunky black sans (font-weight 900)
|
|
* • rule — 1px solid neutral hairline + 4px accent rule
|
|
* • card — large radius (24-32px), soft warm shadow
|
|
* • surface — warm 40px paper grid
|
|
* • motion — springy with slight overshoot
|
|
* ───────────────────────────────────────────────────────────────────── */
|
|
:root {
|
|
/* ─── palette ─── */
|
|
--shell: #f5efe1;
|
|
--surface: #fdfbf7;
|
|
--surface-2: #ffffff;
|
|
--surface-3: #f0e9d8;
|
|
--text: #43302b;
|
|
--text-2: #5b443d;
|
|
--text-mute: #8a7969;
|
|
--text-faint: #b8a994;
|
|
--rule: #e6dcc4;
|
|
--accent: #14b8a6;
|
|
--accent-soft: rgba(20, 184, 166, 0.10);
|
|
--accent-glow: rgba(20, 184, 166, 0.45);
|
|
|
|
/* ─── fonts ─── */
|
|
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
|
--font-display-en: "Inter", "SF Pro Display", -apple-system, sans-serif;
|
|
--font-body: "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
|
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
|
--font-features: "cv11", "ss01", "tnum";
|
|
|
|
/* ─── motion: springy keynote ─── */
|
|
--dur-base: 500ms;
|
|
--dur-slow: 800ms;
|
|
--dur-cinematic: 1200ms;
|
|
|
|
/* ─── design identity: glass slabs ─── */
|
|
--r-card: var(--r-xl); /* 32px keynote slabs */
|
|
--r-stage: 0;
|
|
--rule-w: 1px;
|
|
--rule-style: solid;
|
|
--hero-num-font: var(--font-display-en);
|
|
--hero-num-style: normal;
|
|
--hero-num-weight: 900;
|
|
--hero-num-track: -0.04em;
|
|
--stage-pad-x: 100px;
|
|
--stage-pad-y: 80px;
|
|
--card-shadow:
|
|
0 1px 2px rgba(67, 48, 43, 0.04),
|
|
0 24px 60px rgba(67, 48, 43, 0.10);
|
|
--card-glass-bg: rgba(255, 255, 255, 0.85);
|
|
--card-glass-border: rgba(255, 255, 255, 0.9);
|
|
--shadow-stage:
|
|
0 60px 160px rgba(67, 48, 43, 0.18),
|
|
0 0 0 1px rgba(0, 0, 0, 0.03);
|
|
|
|
/* ─── decoration: warm 40px grid ─── */
|
|
--surface-pattern:
|
|
linear-gradient(rgba(190, 175, 150, 0.18) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(190, 175, 150, 0.18) 1px, transparent 1px);
|
|
--surface-pattern-size: 40px 40px;
|
|
}
|