# DESIGN.md — Ben's Consulting 首页优化方案

> 温暖商务 × 精致动效：让专业投研能力在视觉上被感知

## 1. Visual Theme & Atmosphere

**Style**: Warm Professional (Style Seed #4) + 克制动效
**Keywords**: 专业、可信、温暖、精致、数据感、编辑感、橙色温度
**Tone**: 值得信赖的投研伙伴 — NOT 冰冷的金融科技、NOT 花哨的营销站
**Feel**: 推开一家高端精品投行的大门，温暖的灯光、扎实的木质桌面、墙上挂着精心装裱的市场分析图

**Interaction Tier**: L2 流畅交互（滚动 reveal + 导航动画 + 卡片微交互）
**Dependencies**: CSS only (IntersectionObserver) — 零外部依赖

## 2. Color Palette & Roles

```css
:root {
  /* Backgrounds */
  --bg: #f8f7f4;                          /* 米白主背景 */
  --surface: #ffffff;                      /* 卡片/容器 */
  --surface-alt: #f0efeb;                  /* 交替 section */
  --surface-hover: #ffffff;               /* 悬停态表面 */

  /* Borders */
  --border: #e5e7eb;                      /* 默认边框 */
  --border-hover: #d97706;                /* 悬停边框（橙） */

  /* Text */
  --text: #0f172a;                         /* 标题、重要文字 */
  --text-secondary: #475569;               /* 正文、描述 */
  --text-tertiary: #94a3b8;               /* 标签、辅助信息 */

  /* Accent */
  --accent: #d97706;                       /* 主强调色 */
  --accent-hover: #b45309;                 /* 强调色 hover */
  --accent-light: #fff7ed;                 /* 强调色浅背景 */
  --accent-glow: rgba(217, 119, 6, 0.15);  /* 强调色辉光 */

  /* RGB variants for rgba() */
  --bg-rgb: 248, 247, 244;
  --accent-rgb: 217, 119, 6;

  /* Semantic */
  --success: #16a34a;
  --error: #dc2626;
  --warning: #f59e0b;
}
```

**Color Rules:**
- 所有颜色通过 CSS 变量引用，禁止硬编码 hex
- 橙色仅用于：CTA、强调文字、活跃态、装饰性边框/图标
- 背景色保持米白温暖基调，深色文字保证可读性

## 3. Typography Rules

**Font Stack:**
```css
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap');
```

| Role | Font | Size | Weight | Line Height | Letter Spacing |
|------|------|------|--------|-------------|----------------|
| Hero H1 | Noto Serif SC | clamp(2.5rem, 6vw, 4.5rem) | 700 | 1.1 | -0.03em |
| Section H2 | Noto Serif SC | 1.6rem | 700 | 1.3 | -0.02em |
| H3 (Card) | Noto Sans SC | 1.2rem | 700 | 1.3 | — |
| Body | Noto Sans SC | 0.95rem | 400 | 1.7 | 0.02em |
| Label/Meta | DM Sans / JetBrains Mono | 0.75rem | 500 | 1.4 | 0.05em |
| Hero Tag | JetBrains Mono | 0.8rem | 600 | 1.4 | 0.08em |

**Typography Rules:**
- 中文字体在前，英文字体作为 fallback：`'Noto Serif SC', 'DM Sans', serif`
- 正文行高 ≥ 1.7，长篇阅读场景 ≥ 1.8
- 正文字号 ≥ 15px
- **NEVER use**: 非标准 Web 字体、系统回退的生硬组合

**Text Decoration:**
- Hero H1: 左侧橙色竖线装饰，无渐变（克制风格）
- Section H2: 左侧 4px 橙色实线边框
- 数字/KPI: 等宽字体 + 橙色强调

## 4. Component Stylings

### Buttons / CTAs
```css
.cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.7rem 1.5rem; border-radius: 6px;
  font: 600 0.85rem 'JetBrains Mono', monospace;
  border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
  cursor: pointer; transition: all 0.25s ease;
}
.cta:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.2);
}
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cta:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.cta-ghost {
  background: transparent; color: var(--accent);
}
.cta-ghost:hover { background: var(--accent-light); }
```

### Cards / Service Cards
```css
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 2rem;
  transition: all 0.3s ease; box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 24px rgba(217, 119, 6, 0.1);
  background: var(--surface-hover);
}
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
```

### Navigation
```css
.nav-link {
  color: var(--text-secondary); text-decoration: none;
  font-size: 0.9rem; font-weight: 500;
  position: relative; transition: color 0.2s;
}
.nav-link::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 2px; background: var(--accent);
  transition: width 0.3s ease;
}
.nav-link:hover { color: var(--accent); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--accent); font-weight: 700; }
.nav-link.active::after { width: 100%; }
```

### Links (inline)
```css
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hover); }
```

### Tags / Badges
```css
.tag {
  display: inline-block; padding: 4px 10px; border-radius: 4px;
  font: 600 0.75rem 'JetBrains Mono', monospace;
  color: var(--accent); background: var(--accent-light);
  transition: all 0.2s;
}
.card:hover .tag { background: var(--accent); color: #fff; }
```

## 5. Layout Principles

**Container:**
- Max width: 1200px
- Padding: 0 5%
- Narrow variant: 900px (about section, text-heavy)

**Spacing Scale:**
- Section padding: 5rem 0 (80px)
- Component gap: 1.5rem (24px)
- Card internal padding: 2rem (32px)

**Grid:**
```css
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
```

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat | none | Background elements, decorations |
| Subtle | `0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04)` | Default cards |
| Elevated | `0 12px 24px rgba(217,119,6,0.1)` | Hover state cards |

## 7. Animation & Interaction

**Motion Philosophy**: 克制优雅，只用 opacity 和 transform，确保 60fps
**Tier**: L2
**Dependencies**: 纯 CSS + IntersectionObserver（零第三方依赖）

### Entrance Animation (Hero)
```css
.hero-fade-in {
  animation: heroEntrance 1s ease-out forwards;
}
@keyframes heroEntrance {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
```

### Scroll Reveal (Cards & Sections)
```css
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
```

### Hero Visual — 渐变数据流背景（替代地球图）
```css
.hero-visual {
  position: absolute; top: 0; right: 0;
  width: 50%; height: 100%;
  background: 
    radial-gradient(ellipse at 80% 20%, rgba(217,119,6,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 60%, rgba(59,130,246,0.04) 0%, transparent 50%);
  pointer-events: none;
}
```

### Card Stagger
```css
.card:nth-child(1) .reveal { transition-delay: 0s; }
.card:nth-child(2) .reveal { transition-delay: 0.1s; }
.card:nth-child(3) .reveal { transition-delay: 0.2s; }
.card:nth-child(4) .reveal { transition-delay: 0.3s; }
```

### Hover & Focus States
- 所有可交互元素（卡片、按钮、导航链接）有 hover + focus-visible 态
- 卡片 hover: translateY(-4px) + 橙色边框 + 阴影变化
- 按钮 hover: 深色 + translateY(-2px) + 橙色 glow 阴影

### Reduced Motion
```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}
```

## 8. Do's and Don'ts

### Do
- 保持米白温暖底色，橙色点缀，不引入额外强调色
- 卡片 hover 使用 translateY + 橙色边框 + 阴影，形成统一反馈语言
- 导航链接使用下划线动画 hover 态
- 内容按"Hero → 服务卡片 → 关于我们 → 友情链接"线性叙事
- 中英混排时中文字体优先、英文字体 fallback

### Don't
- ❌ 禁止使用纯色块占位图片 — 使用 Unsplash 真实图片或渐变
- ❌ 禁止 Hero 使用静态纯文字 — 必须有视觉锚点（光效/数据流背景）
- ❌ 禁止卡片简单等大 grid 布局 — 使用 Bento 或内容驱动非对称布局
- ❌ 禁止使用 emoji 作为图标 — 使用内联 SVG 或 Unicode 装饰符号
- ❌ 禁止移动端横向溢出 — 确保 touch target ≥ 44×44px
- ❌ 禁止导航链接使用无下划线的纯色文字 — 必须有 hover 反馈
- ❌ 禁止硬编码 hex 颜色 — 全部通过 CSS 变量引用
- ❌ 禁止页面加载时所有内容同时出现 — 必须 staggered 入场
- ❌ 禁止深色模式仅反转黑白 — 保持温暖基调调整
- ❌ 禁止滚动无动效 — 至少 L1 级 fadeIn

## 9. Responsive Behavior

**Breakpoints:**
| Name | Width | Key Changes |
|------|-------|-------------|
| Desktop | > 768px | 4列 grid、Hero 双栏布局、导航水平显示 |
| Tablet | 480-768px | 2列 grid、Hero 文字居中、导航水平显示 |
| Mobile | < 480px | 1列 grid、Hero 字体缩小、导航汉堡菜单、卡片全宽 |

**Touch Targets:** minimum 44×44px
**Collapsing Strategy:** 导航栏在 ≤ 768px 折叠为汉堡菜单；4列 → 2列 → 1列

```css
@media (max-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .hero { text-align: center; }
  .hero-sub-wrapper { border-left: none; padding-left: 0; }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2rem; }
  nav { display: none; } /* 替换为汉堡菜单 */
}
```