# 墨衡 · Editorial Serif

编辑出版式律师名片。把名片当一页杂志内文来排：宋体字族、冷调纸白、发丝级分隔线，靠字重与留白建立层级，不靠色块和阴影。

## 一句话定位
像翻开一本法律评论的版权页，安静、可信、耐读。

## 设计参数

| 项 | 取值 |
| --- | --- |
| 主色（强调色） | 靛蓝 `#2E4A7C` |
| 底色 / 面 | 冷调纸白 `#F4F4F2` / `#FBFAF8` |
| 正文墨色 | `#16181A`，次级 `#3E4448` |
| 分隔线 | `#D7D8D3`（1px 发丝线） |
| 字体 | 宋体字族（Songti SC / Noto Serif SC / 思源宋体），元信息用无衬线 |
| 圆角 | 全站 `2px`（近直角，纸媒裁切感） |
| 阴影 | 不使用，层级靠留白与发丝线 |
| 动效强度 | 3 / 10（仅一次性淡入 + 悬停） |

## 版式家族（每节一套，避免重复）
1. **Hero** 非对称双栏（1.12 : 0.88），左文右图，照片 3:4 竖幅
2. **擅长领域** 左标题右正文，标题在桌面端吸顶（sticky）
3. **工作经历** 时间轴行（年份 + 事件），发丝线分隔
4. **专业领域** 两张描边卡片
5. **办公机构** 整幅行动条，地址与地图按钮左右分置

## 交互与可访问性
- 单一行动号召「立即咨询」，全站统一一个文案，直连 `tel:` 拨号
- 移动端底部浮动咨询条，适配 `env(safe-area-inset-bottom)` 安全区
- `prefers-color-scheme: dark` 自动切换深色 token
- `prefers-reduced-motion` 下关闭全部动效
- 跳转链接、语义化 `header / main / section / footer`、`:focus-visible` 焦点环

## 深色模式
自动跟随系统。深底色 `#101214`，强调色提亮为 `#86A6DC` 以保证对比度。

## 适合谁
看重专业沉淀、客户偏传统行业或年长群体、希望页面读起来"像一份正式文件"的律师。

## 与其他 7 套的差异
- 唯一全站使用**宋体**的版本（青瓷仅标题用宋体）
- 唯一使用**吸顶小节标题**的版本
- 强调色靛蓝，与其他七套（朱橙 / 青绿 / 松绿 / 警示黄 / 冷青 / 青紫 / 铜橙）完全不撞色

## 改内容的位置
- 姓名、律所、地址、电话、邮箱：搜索 `<dl class="facts">` 与 `<h1>`
- 擅长领域：`id="fields"`
- 工作经历：`id="career"` 的 `<ul class="timeline">`
- 备案号：页脚 `<nav>`

## 透明抠图适配
律师照已抠去背景（透明 PNG/WebP）。肖像区配**纸色径向衬底**（浅色模式 `#FCFBF8 → #F0EFEA → #E3E1D9`，深色模式 `#F4F2EC → #E1DFD7 → #CBC9C1`），并用 `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%。