# TRCC 数字体验设计规范 v1.0

> 交付对象：前端开发 / 视觉设计 / 动效工程 / QA
> 项目定位：文化传媒与广告公司的品牌官网，专业、大胆、有统治力
> 文档目标：所有页面与所有特效均给出可执行数值，无需二次猜测

---

## 0. 文档信息与前置假设

| 项 | 内容 |
|---|---|
| 版本 | v1.0 / 2026-11-05 |
| 业务领域 | 文化传媒 / 广告：品牌策略、视觉设计、影像与动态、数字体验、媒介整合 |
| 视觉基调 | 暗色 + 高饱和霓虹（品红 / 电青 / 紫），3D 体积、分层纹理 |
| 与上一版关系 | 独立新体系，不沿用冷调单色终端稿 |
| 默认页面范围 | 10 个视图：加载态、首页、服务、作品索引、作品详情、关于、洞察列表、洞察文章、联系、404 |
| 页面范围说明 | 若项目裁剪页面，按第 7 章删减对应章节即可，全局 token 与特效规格不变 |
| 品牌资料 | 文档内公司信息仅使用品牌代号 `TRCC`；业务文案为占位，不引用任何真实客户、案例、联系方式 |

**硬性约束（贯穿全文，验收不通过即打回）**

1. 正文文字与背景对比度 ≥ 7:1，辅助文字 ≥ 4.5:1（WCAG AA+）。
2. 所有动效仅驱动 `transform / opacity / filter / clip-path`，禁止动画 `width/height/top/left/margin`。
3. 移动端（≤768px）必须关闭视差、3D 鼠标跟随、堆叠 sticky。
4. `prefers-reduced-motion: reduce` 下，全部动效降级为静态或 ≤200ms 淡入。
5. 单文件 Demo 零外部依赖；正式站图片、字体、3D 模型走 CDN 但必须有本地回退。

---

## 1. 视觉概念：NEON SOVEREIGN / 霓虹主权

### 1.1 一句话概念
暗色是权力的基座，霓虹是释放的信号，3D 是占据的体积，纹理是空间里的粉尘。TRCC 不是「展示作品的公司」，而是「定义视觉秩序的一方」。

### 1.2 三条设计原则

| 原则 | 含义 | 执行判据 |
|---|---|---|
| 支配感 Dominance | 大字号、非对称、大留黑、元素越界 | 首屏主标占视口宽度 ≥ 68%，至少 1 个元素出血到视口边缘 |
| 精确感 Precision | 等宽编号、1px 描边、8pt 网格、硬朗直角 | 圆角 ≤ 2px；所有编号用等宽字 + 前导零 |
| 能量感 Voltage | 霓虹只在高光处爆发，其余区域保持克制 | 单屏霓虹着色面积 ≤ 8%，霓虹不做大面积背景 |

### 1.3 空间分层模型（所有页面统一）

| 层 | z-index | 内容 | 视差系数 k | 混合/透明度 |
|---|---|---|---|---|
| L0 基底 | 0 | `#05060A` 纯色 + 噪点 | 0 | 噪点 opacity .035 / overlay |
| L1 结构 | 1 | 透视网格、径向光晕、扫描线 | 0.08 / 0.15 | 网格 .06，光晕 .12，扫描线 .20 |
| L2 内容 | 5 | 文字、卡片、导航、表单 | 0 / 0.35（装饰块） | 不透明 |
| L3 前景 | 7 | 3D 物件、粒子、光标光斑、HUD | 0.6 / 0.85 | 按章节规定 |

> 关键：L1 全部置于 L2 **之下**。扫描线绝不叠在文字上方，避免降低对比度。若设计确需前景扫描线，必须用 `mix-blend-mode: soft-light` 且 opacity ≤ .12，并重新实测对比度。

### 1.4 视觉隐喻库
全息投影台、光学胶片、夜城湿地面反射、控制台 HUD、棱镜折射、磁带/信号刻度。**禁止**：白底商务照、握手图、圆润渐变 blobs、拟物 UI、emoji。

---

## 2. 设计基础

### 2.1 色彩 Token（可直接复制）

> **默认主题**：站点以 `<html data-theme="01">` 加载，默认显示「熔金工业」。本节 token 是移除 `data-theme` 后的回退基线（对应面板中的 `00 原始霓虹`）；7 套可切换主题的完整 token 见附录 A。

```css
:root{
  /* 基底 */
  --ink-900:#05060A;      /* 页面主底 */
  --ink-800:#0A0D14;      /* 次级区块 */
  --ink-700:#111623;      /* 卡片/面板 */
  --ink-600:#1B2233;      /* 描边基色 */
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  /* 文字 */
  --fg:#F2F5FF;           /* 主文字 */
  --fg-2:#A9B4CC;         /* 辅助文字 */
  --fg-3:#7C88A3;         /* 三级：仅装饰性大字/编号，禁止用于 <14px 正文 */

  /* 霓虹 */
  --neon-cyan:#22E7FF;    /* 主强调 */
  --neon-magenta:#FF3CAC; /* 次强调 */
  --neon-violet:#8B5CFF;  /* 氛围，禁止作文字 */
  --neon-lime:#C6FF3D;    /* 状态点/高光，用量 <1% */

  /* 渐变与发光 */
  --grad-brand:linear-gradient(120deg,#FF3CAC 0%,#8B5CFF 46%,#22E7FF 100%);
  --glow-cyan:0 0 0 1px rgba(34,231,255,.55),0 0 18px rgba(34,231,255,.32),0 0 48px rgba(34,231,255,.14);
  --glow-magenta:0 0 0 1px rgba(255,60,172,.5),0 0 22px rgba(255,60,172,.28),0 0 56px rgba(255,60,172,.12);
}
```

### 2.2 对比度实测表（基于上述色值，WCAG 相对亮度计算）

| 前景 | 背景 | 对比度 | 允许用途 |
|---|---|---|---|
| `#F2F5FF` | `#05060A` | **18.59:1** | 正文、标题、按钮文字 ✅ |
| `#F2F5FF` | `#111623` | **16.58:1** | 卡片内正文 ✅ |
| `#A9B4CC` | `#05060A` | **9.73:1** | 辅助文字 ✅ |
| `#A9B4CC` | `#111623` | **8.67:1** | 卡片辅助文字 ✅ |
| `#7C88A3` | `#05060A` | 5.70:1 | 仅 ≥14px 装饰编号/元数据（AA 通过，正文不达标）⚠️ |
| `#7C88A3` | `#111623` | 5.08:1 | 同上，禁止用于小字正文 ⚠️ |
| `#22E7FF` | `#05060A` | **13.45:1** | 强调文字、链接、数字 ✅ |
| `#C6FF3D` | `#05060A` | **17.14:1** | 状态高光 ✅ |
| `#FF3CAC` | `#05060A` | 6.26:1 | **仅装饰**：描边、渐变、≥24px 大字、光晕；禁止正文 ⚠️ |
| `#8B5CFF` | `#05060A` | 4.89:1 | **禁止作文字**；仅渐变、光晕、背景 ⚠️ |
| `#8B5CFF` | `#111623` | 4.36:1 | 不达标，禁止作文字 ❌ |
| `#05060A` | `#22E7FF` | **13.45:1** | 电青实心按钮文字 ✅ |
| `#05060A` | `#C6FF3D` | **17.14:1** | 酸绿实心按钮文字 ✅ |
| `#05060A` | `#FF3CAC` | 6.26:1 | **禁止**品红实心按钮 ❌ |

**由此产生三条强制规则**
- R1：实心按钮底色只允许 `--neon-cyan` / `--neon-lime` / `--fg`；品红与紫不得作实心底。
- R2：品红与紫只能出现在描边、渐变、光晕、`-webkit-text-stroke` 描边字、≥24px 展示字。
- R3：任何图片叠加文字，图片上必须覆盖 ≥ `rgba(5,6,10,.88)` 的底部渐变，实测文字对比度 ≥ 7:1。

### 2.3 字体系统

| 角色 | 字体 | 回退栈 | 用途 |
|---|---|---|---|
| Display 展示 | `Archivo Black` / `Space Grotesk 700` | `"PingFang SC","Noto Sans SC",sans-serif` | 首页主标、CTA 大标 |
| Heading 标题 | `Space Grotesk 600/700` | 同上 | 区块标题 |
| Body 正文 | `Inter 400/500` | `"PingFang SC","Microsoft YaHei",sans-serif` | 段落、说明 |
| Mono 等宽 | `JetBrains Mono 400/500` | `"SF Mono",Menlo,Consolas,monospace` | 编号、标签、数据、终端行 |

**离线 Demo 字体栈**（零外部依赖，不加载 Web 字体）：
`-apple-system, BlinkMacSystemFont, "Archivo", "Space Grotesk", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif`。
中文字形依赖系统字体。若目标运行环境确认缺少中文字体（表现为文字显示为方框），必须改为内嵌 WOFF2 中文子集：用 fonttools 按页面实际用字裁剪，约 30–60KB，base64 内嵌并以 `@font-face` 声明，`font-display:swap`。这是唯一可接受的降级方式，不得改用图片替代文字。

**排版比例（1.250 梯度，clamp 公式直接可用）**

```css
--fs-display:clamp(64px, 9.2vw, 168px);  /* 字距 -.045em / 行高 .92 / 字重 800 */
--fs-h1:clamp(44px, 5.4vw, 88px);        /* -.035em / 1.02 / 700 */
--fs-h2:clamp(30px, 3.4vw, 52px);        /* -.02em / 1.12 / 700 */
--fs-h3:clamp(20px, 1.7vw, 26px);        /* 0 / 1.3 / 600 */
--fs-body:clamp(14px, 1.05vw, 16px);     /* 0 / 1.75 / 400 */
--fs-small:13px;                          /* 0 / 1.7 / 400 */
--fs-mono:11px;                           /* +.18em / 1.4 / 400 */
```

中文在大字号下需额外 `letter-spacing:.01em`，避免负字距导致笔画粘连。

### 2.4 栅格、间距、形状

| 项 | 规格 |
|---|---|
| 容器 | `max-width:1440px`，左右安全边距 64px（≥1440）/ 32px（768–1439）/ 20px（<768） |
| 栅格 | 12 栏，gutter 24px（移动 12px） |
| 间距阶梯 | 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160 |
| 区块垂直节奏 | 桌面 120px，平板 88px，移动 64px |
| 圆角 | 统一 2px；胶囊仅用于状态标签 `999px` |
| 描边 | 1px `var(--line)`；强调 1px `var(--neon-cyan)` |
| 阴影 | 不使用黑色投影；只用霓虹外发光 token |

### 2.5 z-index 契约
`0 基底` / `1 纹理` / `2 光晕` / `5 内容` / `7 3D 与 HUD` / `20 导航` / `40 轮播控件` / `60 弹层` / `100 加载幕` / `200 焦点提示`

---

## 3. 分层纹理系统（全局，所有页面）

| 纹理 | 实现 | 参数 | 层级 |
|---|---|---|---|
| 胶片噪点 | inline SVG `feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3"` 作 `background-image` | opacity `.035`，`mix-blend-mode:overlay`，`background-size:180px` | L0 / z0 |
| 透视网格 | `repeating-linear-gradient(90deg,rgba(34,231,255,.10) 0 1px,transparent 1px 88px)` + 横向同值，`transform:perspective(600px) rotateX(62deg) scale(1.6)` | opacity `.06`，底部 `mask-image:linear-gradient(transparent,#000)` | L1 / z1 |
| 双色光晕 | 两个 `radial-gradient(closest-side,rgba(255,60,172,.16),transparent)` 与 cyan 同值，`position:fixed`，尺寸 60vw | opacity `.12`，随滚动 k=.15 位移 | L1 / z2 |
| 扫描线 | `repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)` | opacity `.20`，**置于内容层之下** | L1 / z1 |
| 边缘暗角 | `radial-gradient(ellipse at 50% 40%,transparent 38%,rgba(5,6,10,.9) 100%)` | 常驻 | L1 / z1 |

全部纹理层 `pointer-events:none`、`will-change` 仅在滚动期间由 JS 添加、结束移除。

---

## 4. 全局组件规格

### 4.1 按钮

| 类型 | 静止 | 悬停 | 按下 |
|---|---|---|---|
| Primary | 底 `#22E7FF`，字 `#05060A`，padding `16px 26px`，等宽 11px +.16em | `translateY(-2px)` + `box-shadow:var(--glow-cyan)`，240ms | `translateY(0) scale(.98)`，120ms |
| Outline | 透明底，1px `var(--line-strong)`，字 `#F2F5FF` | 触发第 5.3 节发光边框，字变 `#22E7FF` | 同上 |
| Text | 无边框，字 `#A9B4CC`，尾部 `↗` | 字 `#22E7FF`，箭头 `translate(3px,-3px)` | — |

所有按钮 `min-height:44px`；`:focus-visible` 复用 hover 发光 + `outline:2px solid var(--neon-cyan);outline-offset:4px`。

### 4.2 标签 / 编号 / 分隔线
- 标签：等宽 10px，+.2em，1px 描边 `var(--line-strong)`，padding `5px 10px`，圆角 2px。
- 章节编号：`§ 01 / 06`，等宽 11px，`#22E7FF`，前置 22px 短横线。
- 分隔线：1px `var(--line)`；强调线为 2px `var(--grad-brand)`，宽度 64px。

### 4.3 卡片基类
背景 `--ink-700`，1px `--line`，圆角 2px，padding 32px，内部 `position:relative`。悬停统一触发 5.3 节发光边框；卡片内禁止嵌套第二层发光边框。

### 4.4 导航
- 固定顶栏，高 76px，桌面 `backdrop-filter:blur(14px)` + `background:rgba(5,6,10,.72)`，底部 1px `--line`。
- 左：22×22px 品牌方形图标（内联 SVG，`viewBox="0 0 198.43 198.43"`，蓝底 `#16088C` + 白色层叠折线），高度与右侧 `TRCC` 字标字号 22px 对齐；右：锚点链接（等宽 11px）+ Primary 按钮。详见 4.9。
- 滚动 > 80px：高度收至 60px，背景不透明度升至 .92，字标缩小至 14px，过渡 260ms。
- 当前区块链接：底部 2px `--neon-cyan` 指示条，宽度由 0 → 100%，320ms。
- 移动 <768px：折叠为全屏抽屉，背景 `--ink-900`，菜单项 `clamp(28px,8vw,44px)`，逐项 stagger 60ms 上移。

### 4.5 光标
桌面自定义光标：12px 实心 `#22E7FF` 方点 + 36px 描边环，环以 `lerp .18` 跟随；hover 可交互元素时环放大至 56px 并变品红描边。触屏与 reduced-motion 下隐藏自定义光标、恢复系统光标。

### 4.6 表单
输入框：透明底，仅 1px 底边 `--line-strong`，高 52px，字 16px（防 iOS 缩放）；focus 时底边变 `--neon-cyan` + 0 0 18px 青光，240ms；错误态底边 `--neon-magenta` + 等宽 11px 提示文字（提示文字用 `#F2F5FF`，不用品红，保证对比度）。

### 4.7 设计师导航（Design System Panel）

**定位**：全局悬浮组件，供设计师/开发者在真实页面上切换候选配色、复制色值、跳转规范与组件锚点。用于评审与开发阶段，正式上线可保留为内部入口或按开关移除。
**入口分工**：面板由第 9 个圆点或快捷键 `G` 展开；右下角悬浮按钮外链至独立子域 `https://trn.tingriver.cn/`（导航站单独部署，见 4.10），不再承担面板开关。

| 项 | 规格 |
|---|---|
| 悬浮按钮 | `position:fixed; right:24px; bottom:24px; z-index:50`，改为 `<a>` 外链：`href="https://trn.tingriver.cn/" target="_blank" rel="noopener"`；高 48px，外框 `border-radius:999px`（胶囊）；等宽 11px +.14em；左侧 8px 菱形主强调点，右侧 `↗` 外链标记；悬停 `translateY(-3px)` + `--glow-cyan`，240ms |
| 面板 | 右侧抽屉，`width:min(380px,100vw)`，`z-index:60`，背景 `--ink-800`，左边 1px `--line-strong`；`translateX(100%)→0`，420ms `--e-inout` |
| 遮罩 | `z-index:59`，`rgba(var(--ink900-rgb),.62)` + `blur(3px)`，opacity 300ms |
| 分区 | ① 配色方案（8 项，含默认）② 当前色值（5 行，点击复制）③ 规范与组件（1 个文档链接 + 5 个锚点）④ 底部说明 |
| 配色项 | 编号 / 名称 + 英文 / 5 格色条（11×22px）；选中态 1px 主强调描边 + `rgba(var(--cyan-rgb),.07)` 底 + `aria-pressed="true"` |
| 色值行 | 16px 色块 + 标签 + HEX（等宽 10px）+「复制」；`role="button" tabindex="0"`，Enter/Space 等价触发 |
| 复制反馈 | 底部 toast，`z-index:70`，主强调底 + 深字，11px，1.4s 后淡出；`navigator.clipboard` 失败回退 `execCommand('copy')` |
| 动画 | 仅 transform / opacity；面板 420ms，遮罩 300ms，hover 240ms |
| 键盘 | `G` 与第 8 圆点均可展开面板、`Esc` 关闭、Tab 焦点陷阱、关闭后焦点归还第 8 圆点 |
| 可访问性 | `role="dialog" aria-modal="true"`、`aria-expanded` / `aria-hidden` 同步、`aria-live="polite"` 播报复制结果；文字只用 `--fg` / `--fg-2` / `--cyan` |
| 移动 | <768px 按钮内边距降至 14px、隐藏快捷键提示；面板宽度 100vw |

**配色切换机制（开发必须按此实现）**
1. 全站颜色一律走 CSS 自定义属性；半透明色必须写 `rgba(var(--x-rgb),α)`，不得写死数值，否则切换后残留旧色。
2. 主题以 `html[data-theme="01"]` … `"06"` 覆盖变量；移除 `data-theme` 回到默认 `00`。
3. 覆盖清单：`--ink-900/800/700/600`、`--ink900-rgb/ink800-rgb`、`--fg/fg-2/fg-3/fg2-rgb`、`--cyan/magenta/violet/lime` 及四个 `-rgb`、`--art-bg`、`--grad`。`--glow` 已用 `rgba(var(--cyan-rgb),…)` 表达，无需逐主题重写。
4. SVG 作品图用 `<use>` 引用 symbol：切换时读取 `getComputedStyle(documentElement)` 的当前变量值，按映射回写 sprite 内 `stroke / fill / stop-color`，再置空并重设 `use[href]` 强制刷新实例。
5. 切换不持久化（评审期避免误判）；方向确定后把选定值写入 `tokens.css` 并删除其余主题类。

**验收**：8 套主题下正文 ≥7:1、辅助 ≥4.5:1、主强调与按钮深字 ≥7:1（实测见附录 A）；切换后无残留旧色；`Esc` 可关闭且焦点归还。

### 4.8 右上角配色圆点条（Palette Dots）

**位置**：导航右侧「发起对话」按钮正下方，`position:absolute; top:calc(100% + 9px); right:0`；容器为 `rgba(var(--ink900-rgb),.88)` + 1px `--line-strong` + `blur(10px)`。绝对定位不占导航高度，4.4 节的 76px 导航规格不变。

| 圆点 | 行为 | 视觉 |
|---|---|---|
| 01–07 | 切换附录 A 的 7 套候选配色，调用 `applyTheme(id)` | 13px 圆点，填充该方案主强调色；选中态双层外环 `0 0 0 2px --ink-900, 0 0 0 3px --fg` |
| 08 | 生成 7 套以外的随机配色，每次点击换一套 | conic-gradient 六色环；生成后填充为当前主强调色 |
| 09 | 展开 4.7 设计系统面板，`aria-expanded` 同步 | 透明底 + 2px `--cyan` 同心环 |

**通用交互**：hover `scale(1.28)` 200ms；hover / focus-visible 显示等宽 9px tooltip（`data-tip`），底色 `--ink-800`、文字 `--fg`；移动端圆点缩至 11px、间距 6px，9 个保持一行。

**随机配色算法（第 8 圆点，必须按此实现）**
1. 随机色相 `h ∈ [0,360)`，与 7 套主色相 `[38,120,199,77,356,255]` 的最小环形距离必须 > 30°，否则重抽（最多 60 次）。
2. 底色 `hsl(h,18%,4.5%)`，面板 `hsl(h,16%,8%)`，卡片 `hsl(h,14%,11%)`，描边基 `hsl(h,12%,17%)`。
3. 主文字 `hsl(h,25%,97%)`、辅助 `hsl(h,14%,72%)`；主强调 `hsl(h,92%,L)`、次强调 `hsl(h+35~115,92%,L)`，`L` 从 62% 起每 3% 递增至 86%，取首个满足对底色 ≥8:1 的值。
4. 氛围色 `hsl(h,70%,40%)` 仅用于渐变 / 光晕；`--lime` 复用次强调；`--grad` = 氛围 → 次 → 主，120deg。
5. 生成后以 `documentElement.style.setProperty` 写入内联变量（优先级高于 `data-theme` 类），同步写全部 `-rgb` 分量并刷新 SVG 作品图；切回 01–07 或 00 时先 `removeProperty` 清除 20 个内联变量，避免残留。
6. 每次生成都做运行时校验：正文 / 辅助 / 主强调 / 次强调对底色均 ≥7:1；不满足则重抽，60 次仍失败才提示重试。

**验收**：300 次抽样 0 失败（实测最低：强调 8.00:1、正文 18.28:1、辅助 9.41:1）；圆点与面板选中态双向同步；随机态下面板 8 项均不选中，标题显示 `RANDOM / #XXXXXX`。

### 4.9 品牌标识资产

| 位置 | 资产 | 规格 |
|---|---|---|
| 导航左上 | 品牌方形图标 | 内联 SVG `viewBox="0 0 198.43 198.43"`，22×22px，蓝底 `#16088C` + 白色层叠折线；与右侧 22px `TRCC` 字标等高；`aria-hidden="true"`，文字已提供可读名称 |
| 页脚左下 | 汀江文化全字标 | 内联 SVG `viewBox="0 0 1229.56 366.54"`，`width:min(280px,100%)`、`height:auto`，荧光绿 `#00FF05`；`role="img" aria-label="汀江文化"`；下方保留一句品牌描述 |

**内联 SVG 冲突规避（必须执行）**：两份原始 SVG 都使用 `class="cls-1"`，内联到同一 HTML 时 `<style>` 规则是全局的，会互相串色。必须用 id 限定作用域：
- 字标：`#tjLogo .cls-1{fill:#00ff05}`
- 图标：`#brandIcon .cls-1{fill:#16088c}`、`#brandIcon .cls-2{fill:#fff}`

**主题跟随（本轮变更）**：页脚全字标不再固定 `#00FF05`，改为 `#tjLogo .cls-1{fill:var(--cyan)}`，随当前主题主强调色变化；在 `02 磷光矩阵` 下 `--cyan:#00FF05`，字标恢复原始荧光绿。导航左上蓝底白 W 图标仍为固定品牌色，不随主题变化。
对比度：荧光绿 / 白对深色底 ≥14.75:1，白色 W 对蓝底 14.51:1，均满足硬性规则。

**验收**：切换 7 套配色与随机配色后，页脚字标跟随主强调色、导航图标保持不变；导航图标与右侧文字顶部/底部对齐；页脚字标在 375px 宽不溢出。

### 4.10 部署结构与 URL 规范（Cloudflare Pages）

| 站点 | 域名 | 部署目录 | 入口 |
|---|---|---|---|
| 主站 | `tingriver.cn` | `TRCC-site/` | `index.html` |
| 设计师导航 | `trn.tingriver.cn` | `TRCC-nav/` | `index.html`（由 nav.html 改名） |

- 两个 Pages 项目**分别**绑定自定义域；不可在同一项目绑定两个域指向不同内容。
- 主站所有「首页」链接用根相对 `href="/"`，**禁止** `href="#top"`（会产生 `/#top`）。
- 首页「设计师导航」按钮：`href="https://trn.tingriver.cn/" target="_blank" rel="noopener"`。
- 导航页两处「← TRCC」：`href="https://tingriver.cn/"`。
- 导航目录内不得保留旧的 `index.html` 图片页（title「TRCC · 汀江文化」）；子域根目录的 `index.html` 必须是 nav.html。
- 主站根目录放 `_redirects`：`/design-nav/* https://trn.tingriver.cn/ 301`，旧路径永久跳转到子域。
- **Cloudflare Pages 不支持逐文件删除**：清理旧文件必须重新部署干净目录；旧 deployment 留在历史里但不再服务流量。改域名或清残留后执行一次 Purge Everything 清边缘缓存。

**验收**：地址栏访问 `tingriver.cn/` 无 `#top`；点击首页全部 5 个入口后 URL 仍为根路径；`/design-nav/` 与 `/design-nav/nav` 301 到子域；子域「← TRCC」回主站且不再出现图片页。

---

## 5. 六大特效技术规格（核心）

### 5.1 3D 元素：全息棱镜（Hero 主物件）

**形态**：一个 6 面立方/八面复合棱镜，边长 220px，面为半透明玻璃 + 1px 霓虹描边，内部含 `TRCC` 字标与扫描线。

**实现路径 A（默认，CSS 3D，零依赖）**
```css
.stage{ perspective:1200px; perspective-origin:50% 45%; }
.prism{ transform-style:preserve-3d;
        transform:rotateX(calc(-16deg + var(--ry))) rotateY(calc(24deg + var(--rx)));
        transition:transform .35s cubic-bezier(.22,1,.36,1); }
.face{ position:absolute; inset:0; border:1px solid rgba(34,231,255,.55);
       background:linear-gradient(135deg,rgba(34,231,255,.09),rgba(139,92,255,.05));
       backdrop-filter:blur(2px); box-shadow:inset 0 0 40px rgba(34,231,255,.10); }
.face:nth-child(1){ transform:translateZ(110px) }
.face:nth-child(2){ transform:rotateY(180deg) translateZ(110px) }
.face:nth-child(3){ transform:rotateY(90deg) translateZ(110px) }
.face:nth-child(4){ transform:rotateY(-90deg) translateZ(110px) }
.face:nth-child(5){ transform:rotateX(90deg) translateZ(110px) }
.face:nth-child(6){ transform:rotateX(-90deg) translateZ(110px) }
```
- 自转：`rotateY` 每 18s 一圈 `linear infinite`（仅无 hover 时）。
- 鼠标跟随：`pointermove` 归一化到 [-1,1]，写入 `--rx = mx * 12deg`、`--ry = -my * 9deg`；用 rAF + `lerp(cur,target,.08)` 平滑。
- 呼吸光：面描边颜色在 cyan → magenta 间 6s ease-in-out 交替（仅 `border-color` 变化，不改布局）。
- 折射条：一条 2px `var(--grad-brand)` 斜向高光，随自转 `translateX(-120% → 120%)` 4.5s。

**实现路径 B（增强，WebGL / Three.js）**：`glTF` 模型 ≤ 180KB，`MeshPhysicalMaterial transmission:.9, roughness:.08, ior:1.45`，环境光 cyan/magenta 双点光，DPR 上限 2，`powerPreference:"high-performance"`。检测失败或 `navigator.hardwareConcurrency < 4` 时回退路径 A。

**降级**：`prefers-reduced-motion` → 固定 `rotateX(-16deg) rotateY(24deg)`，关闭自转与跟随；≤768px → 尺寸缩至 160px，关闭鼠标跟随。

### 5.2 视差滚动

**层级系数表**（`y` 为元素中心相对视口中心的滚动偏移 px）

| 元素 | 系数 k | 变换 |
|---|---|---|
| L1 透视网格 | 0.08 | `translate3d(0, y*.08, 0)` |
| L1 双色光晕 | 0.15 | `translate3d(0, y*.15, 0)` |
| 背景大号描边字 | 0.22 | `translate3d(0, y*.22, 0)` |
| 图片卡内层图像 | 0.35 | `translate3d(0, y*.35, 0) scale(1.12)` |
| 前景文字块 | 0.06 | `translate3d(0, y*.06, 0)` |
| 3D 棱镜 / HUD | 0.60 | `translate3d(0, y*.60, 0)` |
| 浮动粒子 | 0.85 | `translate3d(0, y*.85, 0)` |

**执行规格**
- 单一 `requestAnimationFrame` 循环，滚动事件只写 `targetScroll`，渲染循环 `cur += (target-cur)*.09`；`|target-cur| < .1` 时停止循环。
- 元素用 `IntersectionObserver{rootMargin:"200px 0px"}` 挂载/卸载，离开视口即跳过计算。
- 只写 `transform`，读取 `getBoundingClientRect` 集中在 resize/初始化时缓存，避免逐帧强制布局。
- 元素统一 `will-change:transform`（仅激活期间）。
- ≤768px 或 reduced-motion：所有 k 置 0，元素保持静态。

### 5.3 发光边框悬停（Glow Border Hover）

**DOM 结构**：`.glow-card > .glow-ring`（绝对定位 inset:0）+ `.glow-card > .glow-inner`（inset:1px，背景 `--ink-700`）+ 内容层。

```css
@property --angle{ syntax:"<angle>"; initial-value:0deg; inherits:false }
.glow-ring{
  position:absolute; inset:0; border-radius:2px; padding:1px;
  background:conic-gradient(from var(--angle),
    transparent 0 58%, #22E7FF 70%, #8B5CFF 82%, #FF3CAC 90%, transparent 100%);
  opacity:0; transition:opacity .26s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glow-card:hover .glow-ring,.glow-card:focus-visible .glow-ring{
  opacity:1; animation:spin-angle 3.6s linear infinite;
}
@keyframes spin-angle{ to{ --angle:360deg } }
.glow-card:hover{ transform:translateY(-4px); box-shadow:0 0 24px rgba(34,231,255,.22); }
.glow-card{ transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease; }
```

**光标光斑**：卡片内附加 `::after`，`background:radial-gradient(240px circle at var(--px) var(--py),rgba(34,231,255,.10),transparent 70%)`，`--px/--py` 由 `pointermove` 写入；仅在 hover 时 opacity 0→1（200ms）。

**键盘等价**：`:focus-visible` 必须触发完全相同的边框与位移；不得只做 hover。

**不支持 `@property` 的浏览器**：回退为静态 1px `--neon-cyan` 描边 + `box-shadow:var(--glow-cyan)`，用 `@supports not (background:conic-gradient(from var(--angle),red,blue))` 判定。

### 5.4 带文字叠加的图片卡片轮播（Overlay Carousel）

**布局**
- 视口宽 `min(1180px, 100%)`，卡片宽 `clamp(260px, 29vw, 380px)`，`aspect-ratio:4/5`（竖构图），卡间距 24px，圆角 2px。
- 三态：中央卡 `scale(1) / opacity 1 / z 3`；相邻卡 `scale(.86) / opacity .5 / filter:blur(1px) saturate(.7) / z 2`；更远卡 `scale(.74) / opacity .22 / z 1`。
- 中心卡水平居中，相邻卡 `translateX(±(cardW*1.06))`。

**图片与文字叠加**
```css
.card-media{ position:absolute; inset:0; filter:saturate(.8) contrast(1.12); }
.card-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,6,10,.10) 0%,rgba(5,6,10,.30) 42%,rgba(5,6,10,.92) 100%); }
.card-overlay{ position:absolute; left:28px; right:28px; bottom:28px; color:var(--fg); }
```
- 叠加内容（自上而下）：等宽编号 `01 / 06`（`#22E7FF`，11px）、类别标签、项目名（H3 26px）、一行说明（14px `#A9B4CC`，在 `.92` 遮罩上实测 ≥ 9:1）、右下 `↗` 圆形描边按钮 40px。
- 中央卡进入时，图片 `scale(1.10)→scale(1)`，900ms `cubic-bezier(.16,1,.3,1)`；文字块 `translateY(14px)→0` + opacity，520ms，delay 120ms。

**交互**
| 输入 | 行为 |
|---|---|
| 自动播放 | 每 5.5s 前进一张；hover / focus-within / 页面隐藏 / reduced-motion 时暂停 |
| 拖拽 | `pointerdown/move/up`，水平位移 > 60px 或速度 > .4px/ms 触发切换；未达阈值回弹 420ms |
| 滚轮 | 卡区域内 `wheel` deltaX 或 shift+deltaY 前进/后退，节流 700ms |
| 键盘 | `←/→` 切换，`Home/End` 首尾，`Enter` 打开详情；容器 `tabindex="0"` + `aria-roledescription="carousel"` |
| 分页 | 底部 6 段进度条，当前段填充 `var(--grad-brand)`，动画时长等于自动播放间隔 |
| 循环 | 无限循环，用索引取模，不做 DOM 克隆（transform 定位法） |

**切换动画**：620ms `cubic-bezier(.16,1,.3,1)`，同时更新三态 class；切换期间 `pointer-events:none` 防抖。

**图片资产**：AVIF 优先 / WebP 回退，`@2x`，尺寸 `800×1000`，单张 ≤ 160KB，`loading="lazy"`（首屏前三张 `eager`），`alt` 必填，`width/height` 属性必填防 CLS。

### 5.5 堆叠卡片滚动（Sticky Stack）

**容器**：`.stack{ height:calc(var(--n) * 78vh) }`，n 为卡数（建议 3–5）。

**每张卡**：
```css
.stack-card{ position:sticky; top:14vh; height:66vh; min-height:460px;
  transform-origin:50% 0; will-change:transform,filter; }
```
**滚动进度驱动公式**（`p ∈ [0,1]` 为下一张卡覆盖当前卡的进度，`i` 为当前卡之后已堆上的层数，最多计 3 层）：

```
scale     = 1 - 0.05 * i * p
translateY= -18px * i * p
brightness= 1 - 0.12 * i * p
opacity   = 1 - 0.10 * i * p   （下限 .55）
z-index   = 10 + cardIndex
```
- 用单个 rAF 循环按 `scrollY` 计算每张卡的 `p = clamp((scrollY - cardTop + vh*.5) / (vh*.6), 0, 1)`，写入 CSS 变量 `--p`。
- 卡片左侧 3px 霓虹竖线按顺序轮换 cyan → magenta → violet → cyan。
- 卡内布局：左 40% 编号 + 大标题，右 60% 说明与指标；底部一条 1px `--line`。
- 内容进入视口时 `clip-path:inset(0 0 100% 0)→inset(0)`，700ms。
- **降级**：≤768px 或 reduced-motion → 取消 `position:sticky` 与全部变换，改为普通纵向列表，卡片间距 16px。

### 5.6 精致加载动画（Preloader）

**总时长 ≤ 1600ms；任何情况下 ≥ 2500ms 强制关闭**（含资源加载失败的兜底定时器）。

| 阶段 | 时间 | 内容 | 参数 |
|---|---|---|---|
| A 黑场 | 0–200ms | 纯 `--ink-900` + 噪点淡入 | opacity 0→.035，200ms linear |
| B 字标 | 200–900ms | `TRCC` 四字母逐字遮罩上移 | 每字 `translateY(110%)→0`，stagger 60ms，时长 620ms，`cubic-bezier(.16,1,.3,1)`；字重 800，字号 clamp(48px,8vw,96px) |
| B' 扫描线 | 200–1100ms | 一条 1px `var(--grad-brand)` 横线自上而下 | `translateY(-10vh → 110vh)`，900ms ease-in-out，附带 12px 青色拖影 |
| C 进度 | 900–1400ms | 等宽 `00 → 100` 数字 + 240px 进度条 | 数字按 `easeOutCubic` 递增；进度条 `scaleX(0→1)`，500ms |
| D 退场 | 1400–1600ms | 幕布 `clip-path:inset(0 0 0 0)→inset(0 0 100% 0)` 上收 | 200ms `cubic-bezier(.76,0,.24,1)`；同时首页内容 `translateY(20px)→0` + opacity，stagger 80ms，700ms |

- 进度取值：`max(真实资源加载进度, 900ms 最短展示)`；`window.load` 后若未到 1400ms 则等待，若已超过立即进入 D。
- 加载幕 `z-index:100`，`aria-live="polite"` 播报「正在载入」，完成后 `aria-hidden="true"` 并从 tab 序移除。
- 幕布期间锁定 `body{overflow:hidden}`，完成后释放。
- reduced-motion：跳过 A–D，直接 150ms 淡入首页。
- 同会话二次访问（`sessionStorage`）可缩短至 400ms 纯淡出。

---

## 6. 动效系统

### 6.1 时长档位
| 档 | 时长 | 用途 |
|---|---|---|
| micro | 120ms | 按下、开关、颜色切换 |
| fast | 240ms | hover、focus、按钮、导航收起 |
| base | 400ms | 卡片位移、标签切换 |
| slow | 700ms | 入场、区块揭示、clip-path |
| cinematic | 1200ms | 3D 转场、视差层大位移 |

### 6.2 缓动曲线（只允许这四条）
```css
--e-out:cubic-bezier(.16,1,.3,1);        /* 入场、揭示（默认） */
--e-soft:cubic-bezier(.22,1,.36,1);      /* hover、跟随 */
--e-inout:cubic-bezier(.76,0,.24,1);     /* 幕布、翻转 */
--e-linear:linear;                        /* 自转、marquee、进度条 */
```

### 6.3 通用入场（Scroll Reveal）
`IntersectionObserver{threshold:.16}`，元素初始 `opacity:0;translateY(24px)`，进入后 `700ms var(--e-out)`；同组子元素 stagger 80ms，最多 6 个；只触发一次。

### 6.4 Marquee 字带
`width:max-content`，`translateX(0 → -50%)`，32s linear infinite；hover 暂停；内容复制两份保证无缝。

### 6.5 禁止清单
- 禁止 bounce / elastic / 弹簧回弹（削弱统治感）。
- 禁止 `filter:blur()` 常驻在文字上。
- 禁止同时运行 > 3 个 `infinite` 动画（首屏）。
- 禁止霓虹闪烁频率 > 3Hz（光敏性癫痫风险）。

---

## 7. 页面规格（全部 10 个视图）

> 通用：所有页面共享第 2–6 章；导航、页脚、噪点/网格/光晕/扫描线纹理、加载态全局一致。页脚高 240px，含 4 列（字标与一句话定位 / 页面导航 / 服务导航 / 联系占位）+ 底部等宽版权行与系统状态灯。

---

### P0 · 加载态 Preloader
| 项 | 规格 |
|---|---|
| 目标 | 建立"系统启动"的第一印象，不阻塞内容 |
| 视觉概念 | 纯黑控制台启动画面，唯一光源是品牌渐变扫描线 |
| 结构 | 居中字标 → 下方进度条 → 左下等宽 `INITIALIZING / TRCC.CORE` → 右下百分比 |
| 交互 | 无输入；`Esc` 可跳过；加载失败 2.5s 强制放行 |
| 动画 | 严格执行 5.6 阶段表 |
| 验收 | 最慢 3G 下 2.5s 内必见首页；键盘焦点不落在幕布内 |

---

### P1 · 首页 Home

**目标**：3 秒内传达「统治力 + 技术感 + 创意能力」，引导至作品与联系。

**区块顺序与栅格**

| # | 区块 | 栅格 | 高度 |
|---|---|---|---|
| 1 | Hero | 左 7 栏文字 / 右 5 栏 3D 棱镜 | `min-height:100vh` |
| 2 | 状态条 | 12 栏等分 4 项 | 88px |
| 3 | Marquee 字带 | 全宽出血 | 64px |
| 4 | 能力矩阵 | 12 栏 → 4 张卡片各占 3 栏 | auto + 120px padding |
| 5 | 作品轮播 | 全宽视口 | 720px |
| 6 | 堆叠卡片 | 12 栏 | `n × 78vh` |
| 7 | 数据/主张 | 左 5 栏大标 / 右 7 栏数字 | 480px |
| 8 | CTA | 全宽面板，内边距 96px | auto |
| 9 | 页脚 | 4 列 | 240px |

**Hero 详细**
- 顶部等宽眉标：`§ 001 / VISUAL SOVEREIGNTY` + 22px 青色短线。
- 主标三行：`WE OWN` / `THE` + 描边 `SIGNAL` / `从策略到曝光，定义视觉秩序`（中文副标 20px `#A9B4CC`）。展示字用 `--fs-display`，第 2 行 `SIGNAL` 用 `-webkit-text-stroke:2px var(--grad-brand)` 无法直接渐变描边，实现为 `background:var(--grad-brand);-webkit-background-clip:text;color:transparent` 的渐变实心字 + 1px 青色外发光。
- 描述段：最多 2 行 28 字，`--fg-2`。
- 双 CTA：`查看作品 ↗`（Primary）、`了解能力`（Outline）。
- 右侧 5.1 节 3D 棱镜，出血到视口右边缘 40px；周围 3 个 HUD 角标（`+` 十字、等宽 `RENDER/OK`、`CH.09`）。
- 底部 `SCROLL ↓` 指示 + 1px 渐变进度线，随滚动填充。
- 背景：L0 噪点 + L1 透视网格 + 品红/青双光晕；大号描边背景字 `TRCC` 以 opacity .04 置于文字后。

**交互与动画**
- 5.1 鼠标跟随 3D；5.2 视差（Hero 内 4 层）；文字入场 stagger 100ms；`SCROLL` 指示 2s 上下 6px 循环。
- 能力矩阵卡片：5.3 发光边框 + 图标 `translateY(-3px)`；卡片编号等宽。
- 作品轮播：5.4 全量交互。
- 堆叠卡片：5.5 全量交互（4 张：策略 / 设计 / 影像 / 传播）。
- 数据区：数字从 0 递增到目标值，1200ms `easeOutCubic`，仅首次进入触发；**数值用占位 `00+` 形式，禁止编造真实业绩**。

**响应式**：<1080px Hero 改单栏，3D 棱镜缩至 240px 置于文字下方；<768px 关闭 3D 跟随与视差，轮播改单卡居中 + 手势滑动，堆叠改普通列表。

**验收要点**：首屏主标在 375px 宽不换行溢出；霓虹着色面积 ≤8%；所有正文对比度 ≥7:1；LCP 元素为 Hero 主标。

---

### P2 · 服务 Services

**目标**：把 5 条业务线讲清，突出方法论而非罗列。

| 区块 | 规格 |
|---|---|
| 页头 | 全高 60vh，`§ 02 / CAPABILITIES` + `--fs-h1` 标题 + 右侧 3 行说明；背景大号描边 `02`，视差 k=.22 |
| 服务列表 | 5 行手风琴，每行高 104px（展开 320px）；左侧等宽编号 + 服务名 `--fs-h2` + 右侧 `+` 图标 |
| 展开内容 | 左 6 栏：120 字说明 + 3 个交付物标签；右 6 栏：一张 16:10 抽象视觉图（渐变遮罩 + 霓虹几何） |
| 方法论 | 4 步横向流程，1px 连线，节点为 12px 青色方点，当前步骤放大 1.4× |
| CTA | 与 P1 第 8 区块同组件 |

**交互**：点击/Enter 展开手风琴，`grid-template-rows:0fr→1fr` 400ms（该属性为布局动画，特例：改用 `max-height` + opacity + `translateY`，或直接固定高度切换）；同时只允许一项展开；展开时编号变 `--neon-cyan`、右侧 `+` 旋转 45° 变 `×`。流程节点随滚动依次点亮（stagger 180ms）。

**动画**：页头描边字视差；行 hover 左侧出现 3px 渐变竖线（scaleY 0→1，240ms）。

---

### P3 · 作品索引 Work

**目标**：高密度陈列，筛选不打断浏览。

| 区块 | 规格 |
|---|---|
| 页头 | 40vh，`§ 03 / SELECTED WORK` + 标题 + 计数 `06 PROJECTS` |
| 筛选条 | sticky top 60px，等宽 11px 分类标签（全部 / 品牌 / 影像 / 数字 / 空间），当前项 1px 青底 + 深字 |
| 作品网格 | 12 栏，卡片跨 6 栏（桌面 2 列）或 4 栏（宽屏 3 列），比例 4:3，间距 24px，错落：偶数卡 `margin-top:64px` |
| 卡片 | 图片 + 5.4 同款底部渐变遮罩 + 编号/项目名/类别/年份；hover 图片 `scale(1.06)` 700ms、遮罩加深、右下箭头滑入 |
| 加载更多 | Outline 按钮，追加 6 条，`reveal` stagger 80ms |
| 空态 | 居中 HUD 卡片 `NO SIGNAL / 该分类暂无项目`，青色状态点 |

**交互**：筛选用 FLIP 技术，退场 `opacity→0 scale(.96)` 200ms，重排 400ms `var(--e-out)`，入场 stagger 60ms；URL `?cat=` 同步，支持浏览器前进后退。点击卡片进入 P4，转场用共享元素：图片 `clip-path` 从卡片矩形放大至全屏，520ms `var(--e-inout)`。

---

### P4 · 作品详情 Case Study

**目标**：把单个案例讲成一个有节奏的叙事。

| 区块 | 规格 |
|---|---|
| 全幅头图 | 100vh，图片视差 k=.35；底部 40% 高度渐变遮罩；标题 `--fs-h1` 左下，客户/年份/服务为等宽元数据行 |
| 概览 | 左 4 栏「挑战 / 方法 / 结果」标签，右 8 栏 3 段正文，最大宽度 680px，行高 1.9 |
| 指标条 | 3–4 组数字，数字 `--fs-h1` 青色，单位等宽；**用占位数值并标注 `示意数据`** |
| 视觉陈列 | 交替：全幅图 / 2 图并排 / 居中竖图；图片间 96px 间距，每张 `clip-path` 揭示 |
| 引言 | 全宽品红描边引用块，字号 `--fs-h2`，左侧 3px `var(--grad-brand)` 竖线 |
| 下一案例 | 全宽卡片，hover 时背景图 `scale(1.06)` + 青色描边发光，点击进入下一 P4 |

**交互**：右侧固定进度指示（等宽 `01—06` 圆点，随滚动更新，点击跳转）；图片点击可进入灯箱（背景 `--ink-900`/.96，`Esc` 关闭，焦点陷阱）；返回 P3 保留原筛选与滚动位置。

**动画**：头图视差 + 标题遮罩上移；正文段落滚动揭示；指标数字递增（同 P1）；图片 `clip-path:inset(0 0 100% 0)→0` 800ms。

---

### P5 · 关于 Studio

**目标**：建立可信度与人格，不写空话。

| 区块 | 规格 |
|---|---|
| 页头 | `§ 05 / THE STUDIO` + 主张句 `--fs-h1`，右下方等宽 `EST. 20XX / [城市占位]` |
| 主张 | 左 7 栏 2 段正文（最多 160 字），右 5 栏抽象 3D 棱碎片（5.1 的简化版，仅 3 面） |
| 原则 | 3 张 5.3 发光边框卡片，各含编号、标题、60 字说明 |
| 团队 | 4 列人像卡，灰度 `filter:grayscale(1)`，hover 恢复彩色 + 青色描边；**人像为占位图，不引用真实人物** |
| 时间线 | 竖向 1px 线 + 5 个节点，节点随滚动点亮，等宽年份 |
| 合作方 | 单色 logo 墙，opacity .45，hover 至 .9；标注 `示意标识` |

**动画**：主张段逐行遮罩上移（stagger 120ms）；时间线节点 `scale(0→1)` 400ms；整页视差仅用于页头与 3D 碎片。

---

### P6 · 洞察列表 Insights

**目标**：内容可读优先，霓虹退到装饰位。

| 区块 | 规格 |
|---|---|
| 页头 | 32vh，`§ 06 / SIGNAL LOG` + 标题 |
| 置顶文章 | 左 7 栏 16:9 图 + 右 5 栏标题/摘要/日期/阅读时长，卡片 5.3 发光边框 |
| 列表 | 每行：等宽日期(2 栏) / 标题(6 栏) / 分类(2 栏) / `↗`(1 栏)，行高 88px，1px 分隔线 |
| 分页 | 等宽数字，当前项青色方底深字 |
| 订阅 | 窄条输入框 + Primary 按钮，成功态为青色等宽 `SIGNAL RECEIVED` |

**交互**：行 hover 背景 `--ink-800` + 左侧 2px 青线 + 标题 `translateX(6px)`，240ms；分类筛选同 P3；订阅校验邮箱格式，错误提示见 4.6。

**动画**：仅 reveal 与 hover；本页关闭视差、3D、marquee，保证长文阅读性能。

---

### P7 · 洞察文章 Article

**目标**：极致可读性，是全站最"安静"的页面。

| 项 | 规格 |
|---|---|
| 版心 | `max-width:720px`，左右留白；正文 17px / 行高 1.95 / 段间距 28px |
| 页头 | 分类标签 + `--fs-h2` 标题 + 等宽元数据行 + 1px 分隔线 |
| 头图 | 16:9，圆角 2px，底部极淡渐变 |
| 正文 | H2 32px / H3 24px；引用块左侧 3px 青线 + `--ink-800` 底；代码块等宽 13px + 1px 描边 |
| 侧栏 | 桌面 `position:sticky;top:100px` 目录，当前章节青色；移动折叠为顶部下拉 |
| 阅读进度 | 顶部 2px `var(--grad-brand)`，`scaleX` 随滚动 |
| 相关阅读 | 3 张 4.3 卡片，无发光边框（降低干扰） |
| 分享 | 3 个 40px 描边圆角方按钮，hover 青色描边 |

**禁用**：3D、视差、自动轮播、自定义光标、marquee、霓虹光晕常驻（仅进度条与目录高光保留）。

---

### P8 · 联系 Contact

**目标**：让发起对话的动作成为页面唯一焦点。

| 区块 | 规格 |
|---|---|
| 左栏 | 7 栏：`§ 08 / TRANSMISSION` + `--fs-display` 的 `LET'S TALK` 描边字 + 3 行等宽占位联系信息 + 状态灯 `AVAILABLE FOR PROJECTS` |
| 右栏 | 5 栏表单，5.3 发光边框包裹；字段：姓名 / 公司 / 邮箱 / 项目类型（自定义下拉）/ 预算区间（分段选择）/ 简述（textarea 5 行）/ 提交按钮 |
| 背景 | 3D 棱镜简化轮廓 opacity .18 置于左栏后方；一处品红光晕 |
| 提交后 | 表单区切换为 HUD 成功卡：`TRANSMISSION RECEIVED` + 青色等宽编号 + 返回按钮，520ms 交叉淡入 |
| 页脚前 | 全宽地图替代：抽象坐标网格 + 等宽 `[ 坐标占位 ]`，不使用在线地图 |

**交互**：字段 focus 见 4.6；提交按钮 loading 态为 3 个 4px 方点依次亮灭（1.2s 循环）；校验失败逐项抖动 `translateX(±4px)` 2 次共 240ms；成功态焦点自动移至成功卡标题（`tabindex="-1"`）。

---

### P9 · 404 / 信号丢失

| 项 | 规格 |
|---|---|
| 视觉 | 全屏黑 + 大号描边 `404`（`--fs-display`，渐变描边字），中央扫描线缓慢上下扫动（4s），噪点 opacity 提升至 .06 |
| 文案 | 等宽 `SIGNAL LOST / 该坐标不存在` + 一行 14px 说明 |
| 交互 | 两个按钮：`返回首页`（Primary）、`查看作品`（Outline）；`Esc` 回首页 |
| 动效 | `404` 每 6s 发生一次 120ms 的水平错位（glitch，`clip-path` 分带 ±4px），其余时间静止 |
| 无障碍 | `<h1>` 为可读的「页面未找到」，描边 404 为 `aria-hidden` 装饰 |

---

## 8. 风格指南

### 8.1 影像与图形
- 色调：暗调 High-key 反相，高对比，深蓝黑阴影，霓虹反射高光；色温偏冷。
- 处理：`saturate(.8) contrast(1.12)`，叠加 `rgba(139,92,255,.06)` 冷色层；允许轻微色差（chromatic aberration）2px，仅用于 Hero 与头图。
- 抽象视觉占位：几何棱镜、扫描线、网格、示波器波形、胶片齿孔；禁止真实人物商务照、图库感素材。
- 图标：1.5px 线性，24×24 网格，方形端点，圆角 0；仅用 `↗ ↓ + × ← →` 等基础符号，不用填充图标。

### 8.2 文案语气
- 中文：短句、主动、断言式，不用「我们致力于…」「赋能」「打造闭环」。
- 英文标签：全大写等宽，功能性强（`SELECTED WORK` / `INITIALIZING`），不做装饰性长句。
- 所有未确认的数据、客户、年份、联系方式一律用占位并显式标注「示意」，禁止编造。

### 8.3 视觉禁忌
白底 / 大圆角 / 柔和粉彩渐变 / 拟物阴影 / 大面积品红或紫背景 / emoji / 弹跳动画 / 超过 3 种霓虹同时出现在一屏 / 文字上方的扫描线 / 正文使用品红或紫色。

---

## 9. 可访问性与性能预算

### 9.1 可访问性验收清单
- [ ] 全部文字实测 ≥7:1（正文）/ ≥4.5:1（辅助），按 2.2 表执行
- [ ] 所有可交互元素 `:focus-visible` 有 2px 青色轮廓，且触发与 hover 等效的视觉反馈
- [ ] 轮播支持 ←/→/Home/End，堆叠与手风琴支持 Enter/Space
- [ ] 灯箱/抽屉有焦点陷阱，`Esc` 关闭并归还焦点
- [ ] 所有图片 `alt` 必填；装饰图 `alt=""` + `aria-hidden`
- [ ] `prefers-reduced-motion` 下：无自转、无视差、无自动播放、加载动画跳过
- [ ] 触控目标 ≥44×44px；闪烁频率 <3Hz
- [ ] 语义结构：每页唯一 `<h1>`，导航 `<nav>`，主内容 `<main>`，轮播 `aria-roledescription`

### 9.2 性能预算
| 指标 | 上限 |
|---|---|
| 首屏 HTML + CSS + JS（gzip，不含图片/字体） | 180KB |
| 字体子集 | 每字重 ≤ 45KB（WOFF2，中文按需子集） |
| 单张图片 | ≤160KB（AVIF/WebP，@2x） |
| WebGL 模型 | ≤180KB glTF / 不用时 0KB |
| LCP | <2.5s（4G） |
| CLS | <0.05 |
| INP | <200ms |
| 帧率 | 滚动与 3D 交互稳定 60fps；中端机 ≥50fps |
| 动画层 | 首屏 `infinite` 动画 ≤3 个 |

**工程要求**：单一 rAF 循环统一驱动视差/堆叠/进度；`IntersectionObserver` 挂载；`content-visibility:auto` 用于长列表；`will-change` 用完移除；WebGL 在页面隐藏时 `cancelAnimationFrame`；字体 `font-display:swap` + `<link rel="preload">` 仅主字重。

---

## 10. 交付资产清单

| 资产 | 格式 | 规格 |
|---|---|---|
| Design Token | `tokens.css` | 本文 2.1 / 2.3 / 2.4 / 6.2 全部变量 |
| 噪点纹理 | `noise.svg` | feTurbulence，180px tile |
| 品牌渐变 | `brand-gradient.svg` | 120deg 三色，供描边/遮罩引用 |
| 3D 棱镜 | `prism.glb` | ≤180KB，或纯 CSS 实现 |
| 图标集 | `icons.svg` sprite | 1.5px stroke，24px 网格，12 枚 |
| 抽象占位图 | `work-01…06.avif/.webp` | 800×1000 与 1600×900 两套 |
| 字标 | `trcc-wordmark.svg` | 字重 800，+.08em，含单色/渐变两版 |
| 动效参数表 | 本文第 5、6 章 | 直接作为开发验收依据 |

---

## 11. 开发者执行顺序与自检

1. 落 `tokens.css` + 纹理层 + 栅格，先做静态首页骨架。
2. 接 5.6 Preloader → 5.1 3D → 5.2 视差（共用同一 rAF）。
3. 接 5.3 发光边框 → 5.4 轮播 → 5.5 堆叠。
4. 按第 7 章补齐 P2–P9，复用全局组件，不重复实现特效。
5. 跑第 9.1 清单 + 2.2 对比度复测 + 375 / 768 / 1440 三档断点。
6. 对照「硬性约束」5 条逐条验收。

**最终验收口径**：任一页面出现「白底白字 / 深底深字」、品红或紫作正文、移动端仍跑视差、reduced-motion 下仍有自转，均视为未通过。

---

## 附录 A · 7 套配色（默认已定：01 熔金工业）

> 状态：**默认已定为 `01 熔金工业`**（页面以 `<html data-theme="01">` 加载），其余 6 套保留为可切换选项。第 2.1 节 token 为 `00` 回退基线。
> 用途：7 套已通过 4.8 的圆点条嵌入页面，`02 磷光矩阵` 位于第 2 个圆点；第 8 圆点提供 7 套以外的随机配色，第 9 圆点展开设计系统面板。
> 备份：改动前的演示页与规范按批次存于 `backup/`：`*_20261106-0033.*`（8 圆点改动前）、`*_20261106-0101.*`（品牌标识与胶囊改动前）、`*_20261106-0128.*`（默认配色与磷光矩阵改动前）。

| 编号 | 方案 | 底色 | 主文字 | 主强调 | 次强调 | 正文 | 辅助 | 主强调 | 气质 |
|---|---|---|---|---|---|---|---|---|---|
| 00 | 原始霓虹 Neon sovereign | `#05060A` | `#F2F5FF` | `#22E7FF` | `#FF3CAC` | 18.59 | 9.73 | 13.45 | 高饱和品红 / 电青 / 紫（当前） |
| 01 | 熔金工业 Molten amber | `#0A0906` | `#FFF6E6` | `#FFB020` | `#FF7A3D` | 18.56 | 10.05 | 10.89 | 暖金橙，工业统治感 |
| 02 | 磷光矩阵 Phosphor matrix | `#040705` | `#FFFFFF` | `#00FF05` | `#FFFFFF` | 20.24 | 11.11 | 14.75 | 黑 + 荧光绿 `#00FF05` + 白 |
| 03 | 深空钴蓝 Cobalt void | `#050A14` | `#EDF4FF` | `#7DD3FC` | `#8AB4FF` | 17.91 | 10.26 | 11.88 | 冷蓝克制，科技专业 |
| 04 | 酸性青柠 Acid lime | `#080B06` | `#F4FFE8` | `#C6FF3D` | `#22E7FF` | 19.15 | 11.23 | 16.75 | 高饱和酸绿，街头冲击 |
| 05 | 血色终端 Crimson terminal | `#0B0608` | `#FFF0F1` | `#FF7A85` | `#FF9A5B` | 18.19 | 9.77 | 8.02 | 赤红杂志感，危险气场 |
| 06 | 钛银冷白 Titanium | `#0B0D11` | `#F2F6FA` | `#E8EDF5` | `#00E5FF` | 17.91 | 9.89 | 16.54 | 近单色，最克制高级 |
| 07 | 紫外极光 Ultraviolet aurora | `#080611` | `#F5F0FF` | `#A78BFA` | `#22D3EE` | 17.99 | 9.90 | 7.39 | 紫青极光，最接近 00 |

**修正记录**：`03 深空钴蓝` 原 `#4C8DFF` 6.19:1、`05 血色终端` 原 `#FF4D5E` 6.20:1、`01 熔金工业` 原 `#FF5A1F` 6.39:1 均低于 7:1，已提亮为 `#8AB4FF` / `#FF7A85` / `#FF7A3D`；原深色降为纯氛围色（`--violet`），只用于渐变、光晕与 1px 描边，不写字、不做实心按钮底。

**氛围色约定**：`--violet`（含 00 的 `#8B5CFF`）允许低于 7:1，仅限渐变中段、径向光晕与描边；`--magenta` 在 7 套候选中均已 ≥7:1，但按第 2.2 节 R2 仍禁止用于 <24px 正文。

**每套完整 token** 见 `TRCC-homepage-demo.html` 的 `html[data-theme="…"]` 块；正式上线时把 `01` 的值写入 `tokens.css` 作为默认，并同步更新第 2.1 / 2.2 节与第 10 章资产清单。