/* ============================================================
* TuringFlow v5 · Landing Page · 亮底简约大气
* 浅色调色板 · 森林墨绿文字 · 极度克制金色
* ============================================================ */
/* ---------- Design Tokens ---------- */
:root {
/* 浅色基调 · 四层（v3 加第三层浅苔绿 + 深墨绿）*/
--c-paper: #FBF9F4; /* 层 1 · 米白（默认）*/
--c-cream: #F5F0E8; /* 层 2 · 暖米 */
--c-moss: #E8EEE9; /* 层 3 · 浅苔绿（v3 新增 · 打破明度同质化）*/
--c-moss-line: #D4DDD6; /* 浅苔绿边线 */
--c-forest: #1C2920; /* 层 4 · 深墨绿（climax/knowledge/cta）*/
--c-forest-2: #243328; /* 深墨绿次层 · 卡片底 */
--c-forest-line:#2F4033; /* 深墨绿边线 */
--c-cream-hi: #FFFFFF;
--c-line: #E6DFD3;
--c-line-soft: #F0E9DC;
/* 文字 · 森林墨绿系 */
--c-ink: #1C2920;
--c-ink-2: #2C3A30;
--c-dim: #6B7A6E;
--c-dim-2: #8A9B8F;
--c-muted: #B0B8AE;
/* 金色 · 浅底烫金体系（v2 升级 2026-04-18）
- --c-gold 浅底小面积用 · 青铜压深，保可读性（对比度 6:1）
- --c-gold-hi hover 提亮
- --c-gold-ink 次要文字 / eyebrow / 小标签纯色（对比度 7:1）
- --c-gold-dark 描边 / 深端色（烫金工艺暗面）
- --c-gold-lite 烫金工艺亮面（高光）
- 深底段保留发光亮金 --c-gold-glow */
--c-gold: #8C6A3D;
--c-gold-hi: #A88048;
--c-gold-ink: #6D5022;
--c-gold-dark: #5A3E18;
--c-gold-lite: #E6C078;
--c-gold-glow: #E8C782; /* 深底段亮金 · 深色版同款 */
/* 深色 · 仅用于 CTA 按钮 */
--c-ink-deep: #0F1410;
/* 字体 */
--f-serif: 'Noto Serif SC', 'Source Han Serif CN', 'Songti SC', Georgia, serif;
--f-sans: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--f-display: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
--f-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* 节奏 */
--rail: clamp(24px, 5vw, 80px);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--eye-size: 11px;
--eye-letter: .22em;
--ease-out: cubic-bezier(.22,.61,.36,1);
--ease-inout: cubic-bezier(.65,.05,.35,1);
--shadow-card: 0 1px 2px rgba(28,41,32,.04), 0 8px 24px rgba(28,41,32,.04);
--shadow-lift: 0 2px 6px rgba(28,41,32,.06), 0 20px 50px rgba(28,41,32,.08);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--f-sans);
font-size: 16px;
line-height: 1.7;
background: var(--c-paper);
color: var(--c-ink);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: .01em;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-cream); }
::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-dim-2); }
/* ---------- Shared Components ---------- */
/* v5.3 · eyebrow 统一样式：无金线，inline-block，统一字号字距 */
.eyebrow {
display: inline-block;
padding-left: 0;
font-family: var(--f-sans);
font-size: var(--eye-size);
letter-spacing: var(--eye-letter);
text-transform: uppercase;
color: var(--c-dim);
position: relative;
font-weight: 500;
}
.eyebrow::before { content: none; }
.scene h2 {
font-family: var(--f-serif); font-weight: 700;
font-size: clamp(36px, 4vw, 56px); line-height: 1.15;
color: var(--c-ink);
letter-spacing: -.015em;
margin: 16px 0 22px;
}
.scene h2 em {
font-family: var(--f-display); font-style: italic;
font-weight: 700;
/* 烫金工艺 · 文档 §4.2C */
background: linear-gradient(135deg,
#D4A84B 0%, #E6C078 22%, #8C6A3D 48%,
#C79447 72%, #F0D58A 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* text-shadow 在 font-synthesis italic + background-clip:text 组合下会产生幽灵字；
改用 filter drop-shadow，它跟随真实绘制形状。*/
filter: drop-shadow(0 1px 0 rgba(109,80,34,.12));
}
/* 深底段切回发光亮金纯色 */
.dark-stage h2 em, .scene-climax h2 em, .scene-knowledge h2 em, .scene-cta h2 em {
background: none;
-webkit-text-fill-color: var(--c-gold-glow);
color: var(--c-gold-glow);
text-shadow: none;
filter: none;
}
.lede {
font-family: var(--f-sans);
font-size: clamp(16px, 1.1vw, 17px);
line-height: 1.8;
color: var(--c-dim);
max-width: 60ch;
}
.shot {
position: relative;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
border: 1px solid var(--c-line);
overflow: hidden;
background: var(--c-cream-hi);
}
.shot img { width:100%; display:block; }
.shot-cap {
position: absolute; top: 12px; left: 12px;
background: rgba(28,41,32,.85);
color: var(--c-cream);
font-size: 11px; letter-spacing: .08em;
padding: 6px 10px; border-radius: 4px;
z-index: 2;
font-weight: 500;
}
/* v6 · 通用产品视图布晦 — macOS 窗口 chrome + 金色数据徽章 */
/* 用法：
*
...·url
*
![]()
*
99...
*