# 图像叙事风 · Image-Led Editorial

> 来源技能：`frontend-skill`（restrained composition, image-led hierarchy, cohesive content structure, tasteful motion）

## 风格定位

图像是视觉主角。大幅摄影做构图元素（非背景图），衬线标题，克制单强调色，充足留白。遵循 frontend-skill 规范：避免 generic cards、weak branding、UI clutter，追求编辑部式图像叙事节奏。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 暖白底 | `#FAF8F4` | 页面背景 |
| 墨黑 | `#1A1A18` | 标题、正文 |
| 次级 | `#6B6B68` | 描述 |
| 细线 | `#E5E0D6` | 边框、分隔 |
| 深绿 | `#2F5D50` | 单一强调色（CTA、编号、eyebrow） |

红色 logo 用 `hue-rotate(140deg)` 滤镜转深绿，融入配色系统。

## 字体

- **衬线标题**：Newsreader 500/600（本地 woff2）
- **标签/数字**：Outfit 500/700（本地 woff2）
- **中文**：系统栈
- 正文行长限制 56-66ch

## 布局特点

- Hero 桌面右侧 42% 宽全高圆角图版（JS 注入，非背景图）
- 手机 Hero 图收缩为 42vh
- "怎么帮你办"区块注入 21:9 大图 + 小字 caption
- 去卡片化：feature/hub-card 改为细线顶边编辑部式分栏
- routecard/stepcard 用悬挂大编号 + 细线
- 节奏：墨黑使命宣言 → 暖白数字条 → 深绿 CTA → 细线页脚

## 图片资源

3 张本地 JPEG（API 生成图失效时已用已有本地图兜底裁切）：
- `img/hero-firm.jpg` — 明亮暖调接待空间
- `img/signing.jpg` — 法律图书馆深色调
- `img/campus.jpg` — 书架区域裁切构图

## 交互特性

- Hero 入场序列（文字阶梯上浮 + 图版淡入）
- 滚动淡入（IntersectionObserver + stagger，动画后自动清理 class）
- 图片 hover `scale(1.02)` transform 300ms
- 图片懒加载（`loading="lazy"`，Hero 图 `fetchpriority="high"`）
- `prefers-reduced-motion`：停用全部动效
- 保留全部基础功能

## 文件结构

```
图像叙事风/
├── index.html ~ admin.html
└── assets/
    ├── logo.svg
    ├── style.min.css          （编辑部式图像叙事系统）
    ├── site.min.js            （Hero 图注入 + 懒加载 + reveal）
    ├── img/                   （3 张本地 JPEG）
    └── vendor/fonts/          （Newsreader + Outfit + JetBrains Mono 本地字体）
```