# 网站系统

## 必须同步的触点

更新品牌时同时处理 Header、Footer、favicon、Apple/192/512/maskable 图标、Open Graph、JSON-LD、manifest、品牌规范页、404、测试与静态导出。不能只替换首页图片。

## 版本化资产

生产代码使用 `/brand/hskb-v14-primary.svg`、`/brand/hskb-v14-reversed.svg`、`/brand/hskb-v14-symbol.svg` 等路径。V13 URL 只可保留为历史兼容；不得继续被当前页面引用。

## Header 与页面

- 桌面母标建议宽 216–240 px，完整母标不得小于 160 px。
- Header 建议高 80–96 px；导航不超过 6 个主要项目。
- 手机空间不足时用独立 H，并保留可访问名称。
- 背景以 Pure White、Mat White、Gallery Ink 为主。
- 暗底使用 `reversed`，但 H 仍为红色；不得生成白色 H。
- H 使用 `object-fit: contain` 和原始 `1020:1019` 比例，不能同时强制不相容的宽高。
- Gallery Frame 可以作为 Hero、案例图和品牌页的主构图；普通内容模块仍保持简洁网格。

## React 示例

```tsx
<Image
  src={inverse ? "/brand/hskb-v14-reversed.svg" : "/brand/hskb-v14-primary.svg"}
  alt="博格港湾 Harbor Stem"
  width={1219}
  height={278}
/>
```

独立 H：

```tsx
<Image
  src="/brand/hskb-v14-symbol.svg"
  alt=""
  width={1020}
  height={1019}
  style={{ width: 48, height: "auto" }}
/>
```

不要用 CSS rectangles、border、mask 或 live text 重绘 Logo。

## QA

检查 320、768、1024、1440 px；键盘焦点；颜色对比；Logo 最小尺寸与比例；深浅背景；缓存清除后的网络资源；favicon/PWA；社交分享；结构化数据；404；无动效偏好；所有本地链接和图片。运行品牌校验、lint、测试、静态导出，并检查浏览器 console。
