# 玻璃拟态风 · Glassmorphism

> 来源技能：`taste-skill` 2.B 节 — Glassmorphism / "frosted glass"

## 风格定位

磨砂玻璃质感界面。多层大半径径向渐变光斑底色 + `backdrop-filter` 模糊半透明卡片 + 半透明白边框 + 顶部内侧高光，呈现通透、层次分明的玻璃悬浮效果。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 光斑底 | 渐变 `#EEF2FF→#FDF3F9→#ECFEFF` | 页面背景 |
| 光斑色 | 淡紫 `#A5B4FC` / 粉 `#F9A8D4` / 蓝 `#93C5FD` / 青 `#67E8F9` | 装饰光斑 |
| 玻璃填充 | `rgba(255,255,255,.55)` | 卡片 |
| 文字主 | `#1E2A4A` | 正文 |
| 文字次 | `#5A6B8C` | 描述 |
| 强调 | `#2F6BFF` | 按钮、链接（电蓝） |

## 字体

- **展示字体**：Outfit 500/700/800（本地 woff2）
- **等宽**：JetBrains Mono 400
- **中文**：系统栈

## 布局特点

- 悬浮胶囊磨砂导航（sticky + 滚动加深）
- Hero 整体大玻璃面板内嵌径向光晕
- 内容区块半透明白洗底
- 圆角 20-30px

## 玻璃配方

```css
backdrop-filter: blur(18px) saturate(160%);
background: rgba(255,255,255,.55);
border: 1px solid rgba(255,255,255,.65);
box-shadow: inset 0 1px 0 rgba(255,255,255,.65),
            0 8px 32px rgba(31,38,135,.12);
border-radius: 20px;
```

## 交互特性

- 4 个装饰光斑 `.gl-orb` 鼠标视差跟随 + 正弦漂浮
- 滚动入场 reveal（阶梯延迟）
- 导航滚动磨砂加深
- `prefers-reduced-transparency`：实色降级
- `prefers-reduced-motion`：停用光斑/动画

## 文件结构

```
玻璃拟态风/
├── index.html ~ admin.html
└── assets/
    ├── logo.svg
    ├── style.min.css
    ├── site.min.js          （光斑注入 + 视差 + reveal）
    └── vendor/fonts/        （Outfit + JetBrains Mono 本地字体）
```