` 内放 6 个 `
`。
---
## 四、顶部导航
固定在顶部，默认透明，Hero 滚动过半后变实色背景，支持目录展开。
```html
```
```css
.nav-container {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 14px 20px; background: transparent; transition: background 0.3s ease;
}
.nav-container.nav-solid {
background: rgba(250,250,250,0.88);
backdrop-filter: blur(12px);
}
.nav-container::after {
content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 24px;
background: linear-gradient(180deg, rgba(250,250,250,0.7) 0%, transparent 100%);
pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
}
.nav-container.nav-solid::after { opacity: 1; }
.nav-inner { max-width: 800px; margin: 0 auto; }
.nav-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.nav-title { display: flex; align-items: center; gap: 12px; }
.nav-title-icon {
width: 36px; height: 36px; background: rgba(255,255,255,0.95);
border-radius: 12px; display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 12px rgba(锚点RGB, 0.10);
}
.nav-title-text { font-size: 14px; font-weight: 700; color: var(--color-text-anchor); }
.nav-toggle {
display: flex; align-items: center; gap: 8px; padding: 10px 16px;
background: rgba(255,255,255,0.9); border: none; border-radius: 12px;
cursor: pointer; box-shadow: 0 2px 8px rgba(锚点RGB, 0.08); transition: all 0.2s ease;
}
.nav-toggle-text { font-size: 12px; color: var(--color-text-secondary); }
.nav-toggle-icon { font-size: 12px; color: var(--color-text-muted); transition: transform 0.3s ease; }
.nav-container.expanded .nav-toggle-icon { transform: rotate(180deg); }
.nav-card {
background: rgba(255,255,255,0.82); backdrop-filter: blur(24px);
border-radius: 16px; margin-top: 12px;
box-shadow: 0 8px 32px rgba(锚点RGB, 0.12);
max-height: 0; overflow: hidden; opacity: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-container.expanded .nav-card { max-height: 500px; padding: 8px 0; opacity: 1; }
.nav-link {
display: flex; align-items: center; gap: 12px; padding: 14px 20px;
text-decoration: none; color: var(--color-text-secondary); font-size: 14px; font-weight: 400;
}
.nav-link:hover { background: rgba(Base色RGB, 0.4); color: var(--color-text-anchor); }
```
```javascript
function toggleNav() { document.getElementById('navContainer').classList.toggle('expanded'); }
function closeNav() { document.getElementById('navContainer').classList.remove('expanded'); }
document.addEventListener('click', e => {
if (!document.getElementById('navContainer').contains(e.target)) closeNav();
});
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
document.querySelector(a.getAttribute('href'))?.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
```
⚠️ Hero `padding-top` 至少 `80px`；各章节卡片添加 `id="section-N"` 对应导航 `href`。
---
## 五、Hero Banner 系统
`::before` 多层 radial-gradient + `::after` 噪点纹理 + 滚动淡出，是区别于普通页面的核心视觉特征。
```css
/* 容器：全宽突破 */
.hero {
position: relative; z-index: 1;
padding: 100px 0 60px; text-align: center;
margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
width: 100vw; overflow: visible;
}
/* 渐变背景层 */
.hero::before {
content: '';
position: absolute; top: -80px; left: -20%; right: -20%; bottom: -100px;
z-index: 0;
background:
radial-gradient(ellipse 90% 80% at 10% 20%, rgba(R1,G1,B1, 0.7) 0%, rgba(R1,G1,B1, 0.3) 30%, transparent 60%),
radial-gradient(ellipse 80% 90% at 85% 10%, rgba(R2,G2,B2, 0.65) 0%, rgba(R2,G2,B2, 0.25) 35%, transparent 55%),
radial-gradient(ellipse 70% 60% at 60% 90%, rgba(R3,G3,B3, 0.5) 0%, rgba(R3,G3,B3, 0.2) 30%, transparent 50%),
radial-gradient(ellipse 60% 70% at 20% 85%, rgba(R4,G4,B4, 0.45) 0%, rgba(R4,G4,B4, 0.15) 35%, transparent 55%),
radial-gradient(ellipse 50% 45% at 50% 45%, rgba(255,255,255, 0.9) 0%, rgba(255,255,255, 0.4) 40%, transparent 70%),
linear-gradient(160deg, rgba(base1, 0.6) 0%, rgba(base2, 0.4) 50%, rgba(base3, 0.3) 100%);
filter: blur(2px);
mask-image: linear-gradient(180deg, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
transition: opacity 0.4s ease;
}
/* 噪点纹理层 */
.hero::after {
content: '';
position: absolute; top: 0; left: -20%; right: -20%; bottom: 0;
z-index: 1; opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
pointer-events: none;
mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
transition: opacity 0.4s ease;
}
/* 滚动淡出状态 */
.hero.fading::before { opacity: var(--banner-opacity, 1); }
.hero.fading::after { opacity: calc(0.04 * var(--banner-opacity, 1)); }
.hero.faded::before { opacity: 0; }
.hero.faded::after { opacity: 0; }
/* ⚠️ 文字层级必须高于渐变层 */
.hero > * { position: relative; z-index: 2; }
```
```css
/* hero-subtitle 宽度与卡片容器对齐 */
.hero-subtitle { max-width: 800px; padding: 0 16px; margin: 0 auto; }
```
```javascript
const navEl = document.querySelector('.nav-container');
const heroEl = document.querySelector('.hero');
function handleScrollEffects() {
const scrollY = window.scrollY;
const bannerFadeStart = 30;
const bannerFadeEnd = heroEl.offsetHeight * 0.6;
if (scrollY <= bannerFadeStart) {
heroEl.classList.remove('fading', 'faded');
heroEl.style.removeProperty('--banner-opacity');
} else if (scrollY < bannerFadeEnd) {
const progress = (scrollY - bannerFadeStart) / (bannerFadeEnd - bannerFadeStart);
heroEl.classList.add('fading');
heroEl.classList.remove('faded');
heroEl.style.setProperty('--banner-opacity', (1 - progress).toFixed(3));
} else {
heroEl.classList.remove('fading');
heroEl.classList.add('faded');
}
navEl.classList.toggle('nav-solid', scrollY > bannerFadeEnd);
}
window.addEventListener('scroll', handleScrollEffects, { passive: true });
handleScrollEffects();
```
### Hero::before 颜色推导
颜色从方案实际色值出发轻微提升饱和度，保持低饱和粉彩质感。❌ 禁止使用深饱和色（如 `rgba(210,165,80)` 这类深琥珀）。
| 位置 | 推导方法 |
|------|---------|
| R1（左上，flow色） | 取 Flow 色 RGB，最大通道轻微提升 |
| R2（右上） | Flow 与 Spark 之间的色相 |
| R3（中下，spark色） | 取 Spark 色，轻微提升 |
| R4（左下） | R1/R2 中间值 |
**各方案参考色：**
| 方案 | R1/G1/B1 | R2/G2/B2 | R3/G3/B3 | R4/G4/B4 |
|------|---------|---------|---------|---------|
| A 极光幻影 | `200,190,240` | `160,200,245` | `160,225,210` | `190,180,230` |
| C 晴空碧蓝 | `160,205,235` | `120,195,240` | `145,215,190` | `150,208,230` |
| D 薄荷森林 | `178,218,162`（暖黄绿） | `175,210,190` | `185,215,170` | `168,212,194` |
| F 薰衣草梦 | `218,210,245` | `228,215,238` | `242,210,230` | `248,225,172`（暖橙黄辅光） |
| K 烟雨青山 | `168,202,222` | `160,196,218` | `155,215,198` | `165,200,220` |
| M 金玉暖辉 | `248,228,205` | `248,225,198` | `250,240,195` | `248,228,205` |
---
## 六、内容组件规范
### 章节标题区（Section Header）
编号在上、标题在下，左边缘统一对齐：
```
section-header（flex-direction: column; align-items: flex-start; gap: 6px）
├── 编号行（row; gap: 4px）
│ ├── 序号值（Space Grotesk, 12px, 700, muted）
│ └── 标签（12px, 400, "· CHAPTER" 等）
└── 标题区
├── 中文标题（18px, 700, anchor）
└── 英文副标题（14px, 400, muted）
```
❌ 禁止：编号列 + 标题列横排（导致左边缘错位）
### 正文条目（Info-item）
```css
.info-item { display: flex; align-items: flex-start; gap: 8px; }
.info-item::before {
content: "·"; font-size: 14px; line-height: 1.8;
color: var(--color-flow); flex-shrink: 0;
}
/* ⚠️ font-size 和 line-height 必须与正文一致，否则序列点垂直偏移 */
```
### 图标一致性规则
同一层级下的图标必须系统统一、背景统一：
| 维度 | 要求 |
|------|------|
| 图标系统 | 全部 Font Awesome **或**全部 emoji，同组禁止混用 |
| 背景色 | 同组按 spark → flow → base → rgba(锚点,0.08) 顺序轮换 |
| 背景形状 | 同组 width / height / border-radius 完全一致 |
| 图标大小 | 同组 font-size 完全相同 |
```css
/* 推荐模式 */
.icon-box { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.icon-box i { font-size: 18px; color: var(--color-text-anchor); }
.icon-box.t1 { background: var(--color-spark); }
.icon-box.t2 { background: var(--color-flow); }
.icon-box.t3 { background: var(--color-base); }
.icon-box.t4 { background: rgba(锚点RGB, 0.08); }
```
### 关键洞察框（Alert-box）
```css
.alert-box {
background: rgba(flow色RGB, 0.26);
border-radius: 12px; padding: 16px 18px;
/* ❌ 不加 border-left */
}
```
⚠️ Alert-box **必须**放在白色 `.card` 内，禁止直接叠放在 Glow 背景上。
### ECharts 字体
```javascript
textStyle: {
fontFamily: 'HarmonyOS Sans SC, PingFang SC, Microsoft YaHei, sans-serif',
// ❌ 不加 fontStyle: 'italic'
}
```
---
## 检查清单
- [ ] `--bg: #FAFAFA` 近纯白，不用 Base 色作页面背景
- [ ] Auroral Glow：`position: fixed; bottom: 0`，6 椭圆，flow/spark 交替，opacity 随深度递减
- [ ] 字体：HarmonyOS Sans SC（中文）+ Space Grotesk（数字），无斜体，字重只用 700/400
- [ ] 字号 5 种：48 / 26 / 18 / 14 / 12px
- [ ] 卡片无 box-shadow 无 border，白色背景直接浮在 Glow 上
- [ ] 顶部导航：fixed + 滚动变实色 + 目录展开 + 平滑滚动，各章节有 `id="section-N"`
- [ ] Hero：`width:100vw` 全宽 + `::before` 5层渐变 + `::after` 噪点 + `handleScrollEffects()` 滚动淡出
- [ ] `.hero > * { position: relative; z-index: 2 }` — 文字层级高于渐变层
- [ ] `hero-subtitle` 用 `max-width: 800px; padding: 0 16px`
- [ ] Hero 渐变色从方案色值轻微提升，禁止深饱和色
- [ ] Alert-box 在白色 card 内，不直接放在 Glow 背景上
- [ ] 同组图标系统统一（全 FA 或全 emoji），背景色/尺寸/字号一致
- [ ] ECharts fontFamily 在 JS 中显式设置
- [ ] 内容信息量充足，卡片无内容裁切