/* ==========================================================================
云隐易学堂 Design Tokens
Aman 极简 · 东方文人 · 烫金质感
========================================================================== */
/* 字体通过页面 里的 + 加载
（@import 在 iframe 内可能阻塞渲染，避免使用） */
:root {
/* ── 色彩 · 玄墨系（深色）───────────────────────────── */
--ink-void: #0a0a14; /* 极夜、卷轴装帧内衬 */
--ink-deep: #1a1a2e; /* 玄墨、主文字 */
--ink-soft: #2a2a3e; /* 次级深色 */
/* ── 色彩 · 云雾系（浅色 · 主背景）─────────────────── */
--paper: #f5f2ea; /* 云雾白 · 宣纸 */
--paper-warm: #ebe6d7; /* 素笺 · 次级背景 */
--paper-mist: #e3ddc9; /* 卷轴留白 */
--paper-line: #d9d2be; /* 分割线基色 */
/* ── 色彩 · 烫金系 ─────────────────────────────────── */
--gold-500: #c9a84c; /* 主金 · CTA · 关键标题 */
--gold-700: #8b6f2a; /* 深金 · 按压、阴影 */
--gold-300: #e8d28a; /* 浅金 · 高光、粒子 */
--gold-100: #f5ecc9; /* 极浅金 · 描边 */
--gold-gradient: linear-gradient(135deg, #8b6f2a 0%, #c9a84c 40%, #e8d28a 60%, #c9a84c 100%);
--gold-foil: linear-gradient(120deg,
#8b6f2a 0%, #c9a84c 20%, #f5ecc9 35%, #e8d28a 50%,
#c9a84c 65%, #8b6f2a 85%, #c9a84c 100%);
/* ── 色彩 · 文字 ───────────────────────────────────── */
--text-primary: #1a1a2e;
--text-secondary: #6b6555;
--text-tertiary: #9a927e;
--text-inverse: #f5f2ea;
/* ── 色彩 · 强调 ───────────────────────────────────── */
--cinnabar: #8b2c26; /* 朱砂 · 印章、极少警示 */
/* ── 字体 ──────────────────────────────────────────── */
--font-serif-cn: "LXGW WenKai Screen", "霞鹜文楷", "Noto Serif SC", "Source Han Serif SC", serif;
--font-serif-en: "Cormorant Garamond", "LXGW WenKai Screen", serif;
--font-song-cn: "Noto Serif SC", "Source Han Serif SC", "SimSun", serif;
/* ── 字号（H5 375px 基准）─────────────────────────── */
--fs-display: 40px; /* 主标题 · 竖排大字 */
--fs-h1: 28px;
--fs-h2: 22px;
--fs-h3: 18px;
--fs-body: 15px;
--fs-small: 13px;
--fs-micro: 11px;
/* ── 行距 ─────────────────────────────────────────── */
--lh-tight: 1.2;
--lh-normal: 1.6;
--lh-loose: 2.0;
/* ── 字重 ─────────────────────────────────────────── */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
/* ── 字间距 ───────────────────────────────────────── */
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-wide: 0.08em; /* 中文标题拉伸 */
--ls-wider: 0.2em; /* 装饰性英文 */
/* ── 留白 ─────────────────────────────────────────── */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
--sp-10: 128px;
/* ── 圆角（东方审美：几乎不用圆角）──────────────── */
--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;
/* ── 描边 ─────────────────────────────────────────── */
--hairline: 0.5px solid var(--gold-500);
--hairline-mist: 0.5px solid var(--paper-line);
--hairline-gold-soft: 0.5px solid rgba(201, 168, 76, 0.35);
/* ── 阴影（极克制）────────────────────────────────── */
--shadow-none: none;
--shadow-mist: 0 1px 24px rgba(26, 26, 46, 0.04);
--shadow-scroll: 0 8px 40px rgba(26, 26, 46, 0.08),
0 2px 6px rgba(139, 111, 42, 0.06);
/* ── 缓动 ─────────────────────────────────────────── */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}
/* ══════════════════════════════════════════════════════════
全局基线
══════════════════════════════════════════════════════════ */
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html, body {
margin: 0;
padding: 0;
background: var(--paper);
color: var(--text-primary);
font-family: var(--font-serif-cn);
font-weight: var(--fw-regular);
font-size: var(--fs-body);
line-height: var(--lh-normal);
letter-spacing: var(--ls-normal);
text-rendering: optimizeLegibility;
}
/* ══════════════════════════════════════════════════════════
常用类
══════════════════════════════════════════════════════════ */
/* 竖排文字 */
.vertical-cn {
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: 0.15em;
}
/* 烫金文字 */
.gold-foil-text {
background: var(--gold-foil);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: goldShimmer 8s ease-in-out infinite;
}
@keyframes goldShimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* 金色 hairline */
.gold-line {
height: 0.5px;
background: linear-gradient(90deg,
transparent 0%,
var(--gold-500) 20%,
var(--gold-300) 50%,
var(--gold-500) 80%,
transparent 100%);
}
/* 印章 · 朱砂方章 */
.seal {
display: inline-block;
width: 42px;
height: 42px;
background: var(--cinnabar);
color: var(--paper);
font-family: var(--font-song-cn);
font-weight: 500;
font-size: 11px;
line-height: 1;
letter-spacing: 0;
padding: 6px 4px;
text-align: center;
writing-mode: vertical-rl;
text-orientation: upright;
opacity: 0.88;
}
/* 云雾漂浮层（用作 overlay） */
.mist-layer {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 800px 400px at 20% 30%, rgba(245,242,234,0.4), transparent 60%),
radial-gradient(ellipse 600px 300px at 80% 70%, rgba(232,210,138,0.06), transparent 60%);
animation: mistDrift 60s ease-in-out infinite;
}
@keyframes mistDrift {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(-20px, -10px, 0); }
}
/* 页面淡入 */
.page-fade-in {
animation: pageFadeIn 1200ms var(--ease-out) both;
}
@keyframes pageFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 关键 CTA · 烫金按钮 */
.btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 40px;
background: var(--ink-deep);
color: var(--paper);
font-family: var(--font-serif-cn);
font-size: 15px;
font-weight: var(--fw-regular);
letter-spacing: var(--ls-wide);
border: 0.5px solid var(--gold-500);
border-radius: 0;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 400ms var(--ease-out);
}
.btn-gold::before {
content: "";
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(232, 210, 138, 0.3) 50%,
transparent 100%);
transition: left 800ms var(--ease-out);
}
.btn-gold:hover::before { left: 100%; }
.btn-gold:active { transform: scale(0.98); }
/* 次级按钮 · 描金 */
.btn-outline-gold {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 40px;
background: transparent;
color: var(--gold-500);
font-family: var(--font-serif-cn);
font-size: 15px;
letter-spacing: var(--ls-wide);
border: 0.5px solid var(--gold-500);
border-radius: 0;
cursor: pointer;
transition: all 300ms var(--ease-out);
}
.btn-outline-gold:hover {
background: rgba(201, 168, 76, 0.06);
}