# 清简 · Swiss Minimal

瑞士国际主义网格。纯白底、无衬线、零圆角，靠严格的网格、字号跳跃和一条朱橙强调色完成表达，不用任何装饰。

## 一句话定位
把信息摊平在网格上，一眼扫完，没有多余动作。

## 设计参数

| 项 | 取值 |
| --- | --- |
| 主色（强调色） | 朱橙 `#C2410C` |
| 底色 / 色带 | 纯白 `#FFFFFF` / 浅灰 `#F5F5F5` |
| 正文墨色 | `#0E0E0E`，次级 `#3D3D3D` |
| 分隔线 | `#E3E3E3`（1px） |
| 字体 | 无衬线（Helvetica Neue / PingFang SC / 鸿蒙 / 雅黑） |
| 圆角 | 全站 `0`（零圆角，直角网格） |
| 阴影 | 不使用 |
| 动效强度 | 3 / 10（仅一次性淡入 + 悬停变色） |

## 版式家族（每节一套，避免重复）
1. **Hero** 全幅 50 / 50 分屏，右侧照片通栏铺满，二维码压在照片左下角
2. **擅长领域** 横向吸附标签条（`scroll-snap`），可左右滑动浏览全部领域
3. **工作经历** 整幅浅灰色带，左标题右正文
4. **专业领域** 双栏大字段落，中间一条竖线分隔
5. **办公机构** 单行地址 + 行动按钮

## 交互与可访问性
- 单一行动号召「立即咨询」，全站统一一个文案，直连 `tel:` 拨号
- 移动端底部通栏咨询条（无圆角，贴合屏幕边缘）
- `prefers-color-scheme: dark` 自动切换深色 token
- `prefers-reduced-motion` 下关闭全部动效
- 横向标签条支持触屏滑动与键盘滚动

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

## 适合谁
面向企业客户、希望传递"效率、现代、不拖泥带水"信号的律师；也适合把名片投放在商务场景或做二维码名片印刷配套页。

## 与其他 7 套的差异
- 唯一使用**全幅 50/50 分屏 Hero** 的版本（照片通栏无边距）
- 唯一用**横向滑动标签**承载擅长领域
- 强调色朱橙，是八套里对比最强、最"跳"的一支

## 改内容的位置
- 姓名、律所、地址、电话、邮箱：`class="hero-copy"` 内的 `<h1>` 与 `<dl class="facts">`
- 擅长领域标签：`id="fields"` 的 `<ul class="pills">`，增删 `<li>` 即可
- 工作经历：`id="career"` 的 `.band .grid`
- 备案号：页脚 `<nav>`

## 透明抠图适配
律师照已抠去背景（透明 PNG/WebP）。按瑞士网格的平面原则，肖像区用**无渐变的纯平浅灰** `#F4F4F4` 衬底（不随深色模式变暗），并用 `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%。