# 液态玻璃风 · Apple Liquid Glass (Approximation)

> 来源技能：`taste-skill` 2.B 节 — Apple Liquid Glass
>
> **声明**：Apple Liquid Glass 官方仅限苹果平台。本实现为网页近似（approximation），使用 `backdrop-filter` + 多层折射边框 + 高光叠加模拟。

## 风格定位

更接近 Apple 液态玻璃的通透凝胶质感。与玻璃拟态风的区别：更强镜面内高光、边缘折射感、999px 胶囊形态、流动光斑、更大圆角（28-32px）。导航整体为悬浮胶囊，编号徽章为圆形水滴。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 背景渐变 | 天蓝 `#D9EEFF`→白→淡青 `#E8FBF5` | 页面背景 |
| 光斑色 | 青 `#7DD3FC` / 蓝 `#60A5FA` / 薄荷 `#6EE7B7` | 流动光斑 |
| 玻璃填充 | `rgba(255,255,255,.42)` | 卡片 |
| 文字主 | `#0B2540` | 正文 |
| 文字次 | `#4A6280` | 描述 |
| 海蓝 | `#0A84FF` | 强调、按钮（Apple 系统蓝） |

## 字体

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

## 玻璃配方（与玻璃拟态风零重叠）

```css
backdrop-filter: blur(24px) saturate(180%);
background: rgba(255,255,255,.42);
border: 1px solid rgba(255,255,255,.35);
box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.35),      /* 环形折射 */
  inset 0 1.5px 0 rgba(255,255,255,.9),        /* 顶部镜面高光 */
  inset 0 -1px 0 rgba(255,255,255,.25),        /* 底部反光 */
  0 10px 40px rgba(14,80,140,.10),
  0 2px 8px rgba(14,80,140,.06);
border-radius: 28-32px;                         /* 大圆角 */
```

## 形态语言

- 导航 999px 悬浮胶囊（sticky top 14px，滚动收紧）
- 按钮/标签/输入框/回到顶部均为胶囊或圆形
- 编号徽章圆形水滴（区别于玻璃拟态风的圆角方块）
- 面板另叠斜向镜面流光（`::after` 半透白渐变）

## 交互特性

- 3 个固定光斑纯 transform 漂移（30/34/38s 交替缓动）
- 导航滚动浮起收紧（padding 收缩、填充加浓、logo 缩小）
- 滚动 reveal（IntersectionObserver + 阶梯延迟）
- 按钮 hover `scale(1.03)` + 高光增强
- `prefers-reduced-transparency`：实色降级
- `prefers-reduced-motion`：停用光斑/动画

## 文件结构

```
液态玻璃风/
├── index.html ~ admin.html
└── assets/
    ├── logo.svg
    ├── style.min.css          （液态玻璃配方 + 胶囊系统）
    ├── site.min.js            （光斑注入 + 导航浮起 + reveal）
    └── vendor/fonts/          （Outfit 本地字体）
```