# 现代工作室风 · Modern Studio

> 来源技能：`high-end-visual-design`（soft-skill）

## 风格定位

明亮、可信的现代法律咨询工作室视觉。非对称 Hero 视觉面板配春季物理动效，呈现专业而温暖的工作室氛围。适用于服务展示与信任建立。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 亮底 | `#F9FAFB` | 页面背景 |
| 纯白 | `#FFFFFF` | 卡片 |
| 深炭 | `#18181B` | 标题、正文 |
| 钢灰 | `#71717A` | 描述 |
| 细边 | `rgba(226,232,240,0.5)` | 卡片边框 |
| 强调 | `#3B82F6` | 链接、按钮（电蓝） |

## 字体

- **展示字体**：Outfit 500/700/800（本地 woff2）
- **等宽**：JetBrains Mono 400
- **中文**：系统栈

## 布局特点

- Hero 非对称视觉面板（JS 注入大幅工作室摄影图至右侧）
- Bento 风格混合尺寸网格
- 弹簧物理动效（spring easing）
- whisper shadow 卡片提升

## 交互特性

- Hero 视觉面板图片注入
- 滚动 reveal 阶梯入场
- 弹簧缓动 hover 效果
- 保留全部基础功能
- `prefers-reduced-motion` 降级

## 文件结构

```
现代工作室风/
├── index.html ~ admin.html
└── assets/
    ├── logo.svg
    ├── style.min.css
    ├── site.min.js              （Hero 视觉注入 + 弹簧动效）
    ├── img/hero-studio.jpg      （本地 Hero 图）
    └── vendor/fonts/            （Outfit + JetBrains Mono 本地字体）
```