first commit

docs/superpowers/specs/2026-09-11-editorial-redesign-design.md

@@ -0,0 +1,80 @@
+# 盈豐太陽能 — 前台 Editorial 極簡重新設計 (Redesign Spec)
+
+- **日期**：2026-09-11
+- **狀態**：已與客戶確認方向
+- **背景**：初版 UI（見 `2026-09-11-ying-fung-solar-design.md`）被客戶評為「AI 模板感太重」。本規格取代該 spec 的 §5 設計系統部分；其餘架構／資料庫／路由／SEO 決策不變。
+
+---
+
+## 1. 設計方向
+
+**暖米白 × 琥珀金 × 明體標題** 的 editorial 極簡風，似高端工程公司官網。
+
+要消滅嘅「AI 模板痕跡」：
+
+- 綠→天藍漸層（logo 磚、hero 光暈、流程圓圈、CTA 橫額）→ 全站零漸層、零光斑
+- 膠囊形按鈕（`rounded-full`）→ 直角或微圓角（≤4px）
+- Pill badge 眉題 →「琥珀短線＋細字 letterspaced 眉題」
+- Hero 圖上浮卡 → 圖下髮絲線統計列
+- Icon 放淺色圓角磚嘅卡片網格 → 編號式清單／髮絲線格網，無卡片陰影
+- 柔和陰影卡片 → 髮絲邊框（hairline）分隔
+
+## 2. 範圍
+
+- **只改前台**：`src/theme/system.ts`、`src/layouts/Base.astro`、`src/components/site/*.tsx`
+- **唔郁**：資料層、D1 schema、路由、admin（`/admin` 後台維持現有純 CSS 色系）
+
+## 3. 新 Design Tokens（`src/theme/system.ts`）
+
+### 色彩
+
+| Token | 值方向 | 用途 |
+|---|---|---|
+| `bg` 頁面 | 暖米白 `#FAF8F4` | 主背景 |
+| `bg.subtle` | 略深米白 `#F3EFE7` | 分段背景 |
+| `ink`（深色 surface） | 墨黑 `#1A1917` | CTA / Footer / 深色 section |
+| `fg` | 墨 `#1A1917` | 正文 |
+| `fg.muted` | 暖灰 `#6E6862` | 次要文字 |
+| `border.subtle` | 髮絲 `#E7E2D9` | 分隔線、邊框 |
+| `brand`（唯一彩色） | 琥珀金階梯，主色 `#C2410C`–`#D97706` 一帶 | CTA、編號、重點數字 |
+
+- 語意 token 名保留（`brand.*`、`fg.muted`、`border.subtle`、`bg.subtle`）以減少改動；舊 `sky` 色階移除。
+- `bg.hero` token 移除（Hero 用主背景）。
+
+### 字體
+
+- 標題：`Noto Serif HK`（700/900），serif fallback
+- 內文：維持 `Noto Sans HK`
+- `Base.astro` 的 Google Fonts link 加入 Noto Serif HK 字重；global body 背景轉米白
+
+### 形狀與動效
+
+- 按鈕：實心墨黑或琥珀金，直角／微圓角（`rounded="sm"` 或 `none`），唔再係膠囊
+- 卡片：去大圓角去陰影，以髮絲線分隔
+- 動效：保留簡單 hover（透明度／位移），唔加新動畫庫
+
+## 4. 各 Section 重構
+
+1. **Header**：去玻璃模糊 → 米白實底＋髮絲底線；logo 改純文字 wordmark（serif 公司名，唔再係漸層 icon 磚）；CTA 改墨黑直角實心掣；手機 drawer 保留但跟新色
+2. **Hero**：serif 超大標題；眉題改琥珀短線＋細字；剷走圖上浮卡 → 圖下方髮絲線統計列（回本期／系統年期／牌照）；次 CTA 改文字連結「睇完成案例 →」；去背景光斑
+3. **TrustBar**：四欄髮絲分隔列，幼線 icon＋細字，無底色無框
+4. **Services**：icon 卡片 → 編號式清單（01／02／03），serif 標題＋列頂髮絲線，hover 出現箭嘴
+5. **Features**：白卡 → 髮絲線格網（報紙分欄感），編號＋serif 標題
+6. **Process**：漸層圓圈 → 超大 serif 琥珀數字＋髮絲連線
+7. **Cases**：去圓角去陰影；首案例 featured 放大（非對稱）；地點 pill badge 改細字標籤
+8. **FAQ**：白卡 accordion → 髮絲線裸列，serif 問題
+9. **ContactCta**：漸層橫額 → 墨黑實底 section，serif 白標題＋琥珀實心掣
+10. **Footer**：深綠底 → 墨黑底；logo 磚改文字 wordmark；髮絲分隔線
+11. **WhatsAppFab**：綠色圓掣 → 墨黑圓掣（icon 保持白色）
+12. **Blog 列表／文章頁**：serif 標題、髮絲線、琥珀 accent，跟新 tokens
+13. **SectionHeading**：pill eyebrow → 琥珀短線＋細字眉題；預設左對齊
+
+## 5. 驗證
+
+- `npm run build` 通過
+- `npm run dev` 目測：RWD、錨點、FAQ accordion、WhatsApp link、無 hydration error
+
+## 6. 文件同步
+
+- `src/AGENTS.md`：token 名單更新（移除 `sky`、`bg.hero`；加入 `ink`）
+- `src/components/site/AGENTS.md`：樣式慣例更新（editorial 風、禁用漸層／膠囊／陰影卡）