# 硬派 · Neo-Brutalist

新粗野主义。米白底、纯黑 3px 描边、警示黄强调色、硬阴影位移，等宽字体做标签，规则全部摆到台面上。

## 一句话定位
不修饰、不含糊，把边界画得清清楚楚，态度本身就是专业度的一部分。

## 设计参数

| 项 | 取值 |
| --- | --- |
| 主色（强调色） | 警示黄 `#E8C100`（上面一律配纯黑文字，保证对比度） |
| 底色 / 面 | 米白 `#F0EEE9` / 纯白 `#FFFFFF` |
| 正文墨色 | `#0B0B0B`，次级 `#33302B` |
| 描边 | 纯黑 `#0B0B0B`，统一 `3px` |
| 字体 | 无衬线正文 + 等宽字体标签（Cascadia Mono / Consolas） |
| 圆角 | 全站 `0`（零圆角） |
| 阴影 | 硬阴影 `6px / 8px / 12px` 纯黑位移，无模糊、无发光 |
| 动效强度 | 4 / 10（淡入 + 按下位移 4px 模拟物理按压） |

## 版式家族（每节一套，避免重复）
1. **Hero** 左文右图，照片与联系信息均为粗描边方块，配硬阴影
2. **擅长领域** 2×2 粗描边方块，首块填警示黄，悬停反向位移
3. **工作经历** 警示黄陈述块（大号加粗一句话）+ 下方双栏正文
4. **专业领域** 两个粗描边方框并排
5. **办公机构** 粗描边面板 + 硬阴影，地址与地图按钮左右分置

## 交互与可访问性
- 单一行动号召「立即咨询」，全站统一一个文案，直连 `tel:` 拨号
- 按钮 `:active` 位移 4px、阴影同步收缩，模拟真实按压
- 等宽标签在小屏自动降为单列，长邮箱强制换行不溢出
- 移动端底部通栏咨询条（无圆角）
- `prefers-color-scheme: dark` 自动切换深色 token（描边转为浅色）
- `prefers-reduced-motion` 下关闭全部动效

## 深色模式
自动跟随系统。深底色 `#121110`，描边由黑转白 `#F2F0EA`，警示黄保持不变以维持品牌一致。

## 适合谁
做刑事辩护、执行回款、劳动争议等需要"强硬、能扛事"观感的业务；也适合面向年轻客户或希望在同行中形成强记忆点的律师。

## 与其他 7 套的差异
- 唯一使用**粗描边 + 硬阴影**的版本
- 唯一使用**等宽字体标签**与**物理按压反馈**的版本
- 强调色警示黄，是八套里存在感最强的对比方案

## 改内容的位置
- 姓名、律所、地址、电话、邮箱：`<span class="kicker">`、`<h1>` 与 `<dl class="facts">`
- 擅长领域方块：`id="fields"` 的 `.tiles`，增删 `article.tile` 即可
- 工作经历黄块与正文：`id="career"` 的 `.yellow` 与 `.plain`
- 备案号：页脚 `<nav>`

## 透明抠图适配
律师照已抠去背景（透明 PNG/WebP）。按粗野主义的直白原则，肖像区用**纯白硬底** `#FFFFFF`（固定不随深色模式变暗），并用 `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%。