68 lines
3.3 KiB
CSS
68 lines
3.3 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────
|
|
* Theme · pastel-dream
|
|
* Friendly modern pastel. Soft blue-gray shell, cream card surface,
|
|
* single sage-green as the only saturated accent. Plus Jakarta Sans
|
|
* everywhere — rounded geometric sans. SIGNATURE: large rounded
|
|
* cards (20px+) + faint multi-tone pill ribbon decoration (sage /
|
|
* lavender / blush / cream) tucked along the right edge.
|
|
*
|
|
* character knobs:
|
|
* • hero numbers — Plus Jakarta Sans, weight 800
|
|
* • rule — 1px solid soft gray
|
|
* • card — large 20px radius (friendly, rounded)
|
|
* • surface — pastel pill ribbon at right edge (very faint)
|
|
* • motion — soft springy (gentle overshoot)
|
|
* ───────────────────────────────────────────────────────────────────── */
|
|
:root {
|
|
/* ─── palette ─── */
|
|
--shell: #c8d9e6;
|
|
--surface: #faf9f7;
|
|
--surface-2: #ffffff;
|
|
--surface-3: #f0ecde;
|
|
--text: #1f2429;
|
|
--text-2: #3a4046;
|
|
--text-mute: #707880;
|
|
--text-faint: #a8b0b8;
|
|
--rule: #d8d4cb;
|
|
--accent: #5a7c6a; /* sage green */
|
|
--accent-soft: rgba(90, 124, 106, 0.10);
|
|
--accent-glow: rgba(90, 124, 106, 0.30);
|
|
|
|
/* ─── fonts ─── */
|
|
--font-display-cn: "Noto Sans SC", "Source Han Sans SC", -apple-system, sans-serif;
|
|
--font-display-en: "Plus Jakarta Sans", "Inter", -apple-system, sans-serif;
|
|
--font-body: "Plus Jakarta Sans", "Inter", "Noto Sans SC", -apple-system, sans-serif;
|
|
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
|
--font-features: "ss01", "ss02", "cv02", "tnum";
|
|
|
|
/* ─── motion: soft springy ─── */
|
|
--dur-base: 520ms;
|
|
--dur-slow: 820ms;
|
|
--dur-cinematic: 1200ms;
|
|
|
|
/* ─── design identity: friendly rounded ─── */
|
|
--r-card: var(--r-lg); /* SIGNATURE — 20px+ friendly rounding */
|
|
--r-stage: 0;
|
|
--rule-w: 1px;
|
|
--rule-style: solid;
|
|
--hero-num-font: var(--font-display-en);
|
|
--hero-num-style: normal;
|
|
--hero-num-weight: 800;
|
|
--hero-num-track: -0.035em;
|
|
--stage-pad-x: 100px;
|
|
--stage-pad-y: 80px;
|
|
--card-shadow:
|
|
0 1px 0 var(--rule),
|
|
0 24px 56px rgba(40, 60, 80, 0.10);
|
|
--shadow-stage:
|
|
0 60px 160px rgba(50, 70, 90, 0.25),
|
|
0 0 0 1px rgba(0, 0, 0, 0.03);
|
|
|
|
/* ─── decoration: SIGNATURE — pastel pill ribbon at right edge ─── */
|
|
--surface-pattern:
|
|
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='1080' preserveAspectRatio='xMaxYMid slice'><g><rect x='1820' y='180' width='44' height='160' rx='22' fill='%23f0b4d4' opacity='0.55'/><rect x='1820' y='360' width='44' height='220' rx='22' fill='%23a8d4c4' opacity='0.55'/><rect x='1820' y='600' width='44' height='140' rx='22' fill='%23c7b8ea' opacity='0.55'/><rect x='1820' y='760' width='44' height='180' rx='22' fill='%23ffe6a7' opacity='0.55'/></g></svg>");
|
|
--surface-pattern-size: 100% 100%;
|
|
--surface-pattern-blend: normal;
|
|
--surface-pattern-opacity: 0.9;
|
|
}
|