66 lines
3.0 KiB
CSS
66 lines
3.0 KiB
CSS
/* ─────────────────────────────────────────────────────────────────────
|
|
* Theme · sunset-zine
|
|
* Indie risograph zine. Warm peach paper, riso-magenta accent,
|
|
* Fraunces serif (with playful curves), DASHED rules (cut-and-paste
|
|
* feel), springy motion. Hero numbers are oversized italic Fraunces.
|
|
*
|
|
* character knobs:
|
|
* • hero numbers — italic Fraunces, very tight tracking
|
|
* • rule — 1.5px DASHED (zine cut line)
|
|
* • card — 12px radius (slight softening)
|
|
* • surface — coarser peach paper grain (riso noise)
|
|
* • motion — springy with overshoot (playful)
|
|
* ───────────────────────────────────────────────────────────────────── */
|
|
:root {
|
|
/* ─── palette ─── */
|
|
--shell: #f4d4b6;
|
|
--surface: #fcecd4;
|
|
--surface-2: #ffe6c8;
|
|
--surface-3: #f0d4a8;
|
|
--text: #2a1810;
|
|
--text-2: #4a2c20;
|
|
--text-mute: #7a5040;
|
|
--text-faint: #a07866;
|
|
--rule: #c89878;
|
|
--accent: #e91e63; /* riso magenta */
|
|
--accent-soft: rgba(233, 30, 99, 0.10);
|
|
--accent-glow: rgba(233, 30, 99, 0.40);
|
|
|
|
/* ─── fonts ─── */
|
|
--font-display-cn: "Noto Serif SC", "Source Han Serif SC", serif;
|
|
--font-display-en: "Fraunces", "Recoleta", "GT Sectra", "Playfair Display", serif;
|
|
--font-body: "Fraunces", "Source Serif Pro", "Noto Serif SC", serif;
|
|
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
|
--font-features: "ss01", "ss02", "tnum", "dlig";
|
|
|
|
/* ─── motion: springy zine ─── */
|
|
--dur-base: 550ms;
|
|
--dur-slow: 850ms;
|
|
--dur-cinematic: 1300ms;
|
|
|
|
/* ─── design identity: zine ─── */
|
|
--r-card: var(--r-md); /* slight softening */
|
|
--r-stage: 0;
|
|
--rule-w: 2px;
|
|
--rule-style: dashed; /* SIGNATURE — cut-and-paste */
|
|
--hero-num-font: var(--font-display-en);
|
|
--hero-num-style: italic;
|
|
--hero-num-weight: 600;
|
|
--hero-num-track: -0.04em;
|
|
--stage-pad-x: 110px;
|
|
--stage-pad-y: 80px;
|
|
--card-shadow:
|
|
0 1px 0 var(--rule),
|
|
8px 8px 0 var(--accent-soft); /* offset peach shadow */
|
|
--shadow-stage:
|
|
0 60px 160px rgba(120, 70, 40, 0.30),
|
|
0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
|
|
/* ─── decoration: coarse riso paper grain ─── */
|
|
--surface-pattern:
|
|
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' seed='12'/><feColorMatrix values='0 0 0 0 0.65 0 0 0 0 0.50 0 0 0 0 0.40 0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
|
|
--surface-pattern-size: 200px 200px;
|
|
--surface-pattern-blend: multiply;
|
|
--surface-pattern-opacity: 0.55;
|
|
}
|