# 青瓷 · Celadon

东方雅致向。瓷白底、松绿强调色、圆形肖像与胶囊按钮，气质温润，是八套里视觉最"软"的一支。

## 一句话定位
不端着的东方感，亲切、细腻，适合需要被信任而不是被震慑的场景。

## 设计参数

| 项 | 取值 |
| --- | --- |
| 主色（强调色） | 松绿 `#2F6B62` |
| 底色 / 面 / 浅染 | 瓷白 `#F1F3F0` / 纯白 `#FFFFFF` / 青瓷染 `#E4EFEA` |
| 正文墨色 | `#17201E`，次级 `#48544F` |
| 分隔线 | `#DBE1DB`（1px） |
| 字体 | 标题宋体（Songti SC / 思源宋体），正文无衬线 |
| 圆角 | 卡片 `12px`，按钮与标签 `999px`（胶囊），规则固定不混用 |
| 阴影 | 不使用，靠底色与圆形容器区分层次 |
| 动效强度 | 4 / 10（淡入 + 悬停变色） |

## 版式家族（每节一套，避免重复）
1. **Hero** 左文右图，肖像裁成**正圆形**置于浅染圆底中
2. **擅长领域** 全幅浅染色块，内含大号宋体陈述句 + 双列清单
3. **工作经历** 双卡片，首张带宋体首字下沉
4. **专业领域** 胶囊标签行，一行一个领域
5. **办公机构** 圆角面板，地址与地图按钮左右分置

## 交互与可访问性
- 单一行动号召「立即咨询」，全站统一一个文案，直连 `tel:` 拨号
- 移动端底部胶囊咨询条，适配安全区
- `prefers-color-scheme: dark` 自动切换深色 token
- `prefers-reduced-motion` 下关闭全部动效

## 深色模式
自动跟随系统。深底色 `#0F1413`，强调色提亮为 `#7FC2B4`。

## 适合谁
家事婚姻、继承、邻里纠纷等需要"共情感"的业务方向；也适合面向个人客户而非企业客户的律师。

## 与其他 7 套的差异
- 唯一使用**圆形肖像**的版本
- 唯一使用**胶囊标签行**与**首字下沉**的版本
- 强调色松绿，气质温润，与「墨衡」的冷峻、「硬派」的强硬形成对照

## 改内容的位置
- 姓名、律所、地址、电话、邮箱：`<dl class="contacts">` 与 `<h1>`
- 擅长领域陈述句与清单：`id="fields"` 的 `.band-in`
- 工作经历双卡：`id="career"` 的 `.cards`
- 备案号：页脚 `<nav>`

## 透明抠图适配
律师照已抠去背景（透明 PNG/WebP）。圆形肖像内配**瓷白径向衬底**（浅色模式 `#FBFBF8 → #EFF2EC → #E2E7DF`，深色模式 `#F2F4F0 → #E3E8E1 → #D2D8D0`），并用 `object-fit: contain` 保证人物不被裁切。圆形裁切仍由 CSS `border-radius: 50%` 完成，换图无需重新裁图。

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

```
青瓷/
├── 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%。