# 夜航 · Dark Nocturne

深色专业向。近黑底、冷银字、青绿强调色，卡片带柔和圆角与层次，是八套里最早把深色做成完整体系的一支（与「琉璃」同为锁定深色，但走青绿而非冷青）。

## 一句话定位
夜间也看得舒服的深色名片，专业、克制、有一点科技感，但不发光不炫技。

## 设计参数

| 项 | 取值 |
| --- | --- |
| 主色（强调色） | 青绿 `#4FB3A0` |
| 底色 / 面 | 近黑 `#0C1013` / `#141A1E` / `#1A2227` |
| 正文文字 | 冷银 `#E6EBEE`，次级 `#B3BFC6` |
| 分隔线 | `#232D33`（1px） |
| 字体 | 无衬线（PingFang SC / 鸿蒙 / 雅黑） |
| 圆角 | 全站 `14px`（卡片）与胶囊（按钮），无直角混用 |
| 阴影 | 不使用外发光，层次靠底色明度差 |
| 动效强度 | 5 / 10（淡入 + 卡片悬停上浮 + 手风琴展开） |

## 版式家族（每节一套，避免重复）
1. **Hero** 左文右图，联系方式做成三张圆角信息条
2. **擅长领域** Bento 网格，4 项 4 格，按 2+1 / 1+2 交错，其中两格用低饱和渐变做视觉变化
3. **工作经历** 原生 `<details>` 手风琴，默认展开第一条
4. **专业领域** 定义行，左侧青绿竖条标记
5. **办公机构** 整块圆角行动面板

## 交互与可访问性
- 单一行动号召「立即咨询」，全站统一一个文案，直连 `tel:` 拨号
- 手风琴用原生 `details / summary`，键盘可操作，无 JS 也能展开
- 移动端底部胶囊咨询条，适配安全区
- 本版本**锁定深色**（`color-scheme: dark`），不跟随系统切换浅色
- `prefers-reduced-motion` 下关闭全部动效

## 深色模式
本版本本身就是深色，不再提供浅色切换。如在强光户外使用，建议改用「清简」或「硬派」。

## 适合谁
常做互联网、电商、新媒体客户，或在微信/夜间场景投放二维码名片的律师；也适合希望与其他律师"看起来不一样"的个人品牌。

## 与其他 7 套的差异
- 唯一**锁定深色**的版本
- 唯一使用 **Bento 交错网格**与**手风琴**的版本
- 强调色青绿，与「琉璃」同为深色底，但走青绿而非冷青，是八套里唯一把深色与暖调内容结合的一支

## 改内容的位置
- 姓名、律所、地址、电话、邮箱：`<dl class="contacts">` 与 `<h1>`
- 擅长领域 Bento：`id="fields"` 的 `.bento`，四个 `article.cell`
- 工作经历手风琴：`id="career"` 的 `.acc`，增删 `<details>` 即可
- 备案号：页脚 `<nav>`

## 透明抠图适配
律师照已抠去背景（透明 PNG/WebP）。本版本锁定深色底，透明人像最容易"消失"，因此肖像区配**浅色径向衬底** `#EFF2F4 → #D3DADE → #A9B3BA`，另叠一层青绿微光 `rgba(79,179,160,.16)` 与主题呼应；`object-fit: contain` 保证人物不被裁切。这是全部八套里衬底最必要的一版。

## 资源依赖（独立部署）
本目录**自带全部资源**，可整目录单独上传部署，不依赖上级目录：

```
夜航/
├── index.html
├── README.md
└── assets/
    ├── mine.webp      律师照主图（透明抠图，70KB）
    ├── mine.png       同上 PNG 兜底（209KB，老浏览器用）
    ├── qr.jpg         微信二维码
    └── favicon.ico
```

照片用 WebP 主图 + `onerror` 自动回退 PNG，不支持 WebP 的浏览器也能正常显示。
原图 `mine.png` 为 874×1280 透明抠图，已压出 800px 宽 WebP（70KB）与 400px 宽 PNG 兜底（209KB），加载体积比原图减少约 93%。