# 极光渐变风 · Aurora / Mesh Gradients

> 来源技能：`taste-skill` 2.B 节 — Aurora / mesh gradients

## 风格定位

柔和星云渐变氛围。深色底上多层大半径 radial-gradient 光斑缓慢漂移，玻璃质感卡片半透明悬浮，标题用渐变文字（`background-clip: text`）。与暗黑科技风的区分：无等宽正文、无扫描线/网格硬朗元素，追求柔和流动感。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 深底 | `#070B14` | 页面背景 |
| 光斑色 | 青 `#22D3EE` / 品红 `#E879F9` / 紫 `#818CF8` / 绿 `#34D399` | 装饰光斑 |
| 玻璃填充 | `rgba(255,255,255,.04)` | 卡片 |
| 玻璃边框 | `rgba(255,255,255,.09)` | 卡片边框 |
| 主体文字 | `#F1F5F9` | 正文 |
| 次级文字 | `#94A3B8` | 描述 |

## 字体

- **展示字体**：Outfit 500/700/800（本地 woff2）
- **中文**：系统栈
- 无等宽正文（与暗黑科技风区分）

## 极光层

JS 注入 `.aurora-layer` + `.aurora-blob`（`position:fixed`, `z-index:-1`）：
- `filter: blur(80px)`，opacity .26-.36
- 4 条 drift keyframes（68-90s ease-in-out infinite alternate）
- 仅动 `transform/scale` 保证 GPU 合成
- 手机端自动降为 2 个光斑

## 渐变文字

```css
background: linear-gradient(100deg, #22D3EE, #818CF8, #E879F9);
-webkit-background-clip: text;
color: transparent;
```
配 `@supports` 守卫，不支持时回退实色。

## 交互特性

- 光斑层注入 + 缓慢漂移
- 滚动 reveal（IntersectionObserver + 80ms 错峰）
- 主按钮青→紫→品红渐变实色
- logo 用 `hue-rotate(198deg)` 映射为极光青色系
- `prefers-reduced-motion`：停用光斑漂移/reveal/平滑滚动/轮播

## 文件结构

```
极光渐变风/
├── index.html ~ admin.html
└── assets/
    ├── logo.svg
    ├── style.min.css
    ├── site.min.js           （光斑注入 + reveal + 基础功能）
    └── vendor/fonts/         （Outfit 本地字体）
```