# Homepage Lime 設計同步檢核

- 主要視覺依據：`image-1.png`
- 原始設計來源：`/Users/bruce/Downloads/e等公務園+首頁_最終版/首頁_款式2_等公務園_1920up_0.83x_建議版.html`
- 現行實作：`homepage-lime.html`
- 驗證輸出：`figma/renders/homepage-lime-source-aligned-final.png`

## 已同步

- 1920 桌面版整體縮放、內容寬度與區段節奏
- Header 雙層結構、導覽、搜尋、登入／註冊樣式
- Hero 比例、滿版背景、輪播箭頭與玻璃分頁
- 推薦課程、最新消息、課程類別、主打專區與相關網站的卡片尺寸、字級、間距與陰影
- 統計帶弧形、數值排版與深色 Footer
- 原始設計所使用的 88 個本地資產
- 平板／手機搜尋收合、右側抽屜導覽、登入切換、卡片與網站輪播、Footer 開合

## 靜態檢核

- HTML 引用資產：33
- 缺少資產：0
- 主要互動掛點：登入、行動選單、搜尋、輪播、Footer 開合皆存在
- 主要區段已補上 `data-od-id`，可於 Open Design 中直接選取與註解

## 檔案結構（方向定案後）

`index.html` 為專案入口，連向 `homepage-lime.html`（參考實作）與 `design-system.html`（設計系統）。
其他方向的舊稿、未引用資產與瘦身前備份保留於 `_archive/`。
設計規範見 `design-system.md`，token 見 `assets/design-tokens.css`。

### 樣式瘦身紀錄

`homepage-lime.html` 873KB → 153KB：

- 內嵌字型（682KB，佔原檔 81%）抽成共用檔 `assets/offline-fonts.css`，
  後續頁面一律 link 此檔，不再逐頁內嵌
- 移除未使用的 Inter 600 字重（29KB）
- 預編譯 Tailwind 過濾掉 17 條死規則（39.5KB → 38KB）
- 手寫樣式移除 15 個已無對應元素的 class（bg-gradient-*、nav-arrow、collapse-y、foot-accent-* 等）

驗證方式：解析所有被移除的選擇器，逐一在文件本文中比對 class token，
確認 32 個被移除的 class 全部確實未被使用（無誤刪）。
過程中修正了兩個 CSS 解析錯誤——Tailwind 把逗號跳脫為 `\2c `（含結尾空白），
以及 `/*! … */` 註解黏在 preflight `*` 選擇器前面，兩者都會造成誤刪生效中的規則。

## RWD 斷點系統

前提：本頁的 `offline-tailwind` 是**預編譯子集**，只包含 HTML 已實際使用的 class。
新增 `md:grid-cols-2` 之類的類名不會產生任何樣式 —— 所有響應式規則一律寫在
`<style>` 末段的「RWD 系統」區塊（手寫 CSS，以 id／`data-od-id` 提高權重）。

| 斷點 | 定位 | 主要佈局 |
| --- | --- | --- |
| ≤559 | 手機 | logo 可壓縮；hero 連續高度（約 2:1）+ 依圖裁切重心；推薦課程改「縮圖左·資訊右」列表；消息／類別單欄；主打 2 欄；統計 2 欄格線 |
| 560–767 | 大手機 | 學習紀錄單欄（保留插圖）；推薦課程 2 欄；主打 2→3 欄；統計 2 欄 |
| 768–1023 | 平板直式 | 學習紀錄 3 欄（隱藏插圖）；消息／類別 2 欄；推薦課程 3 欄；統計 3 欄 |
| 1024–1279 | 平板橫式 | 學習紀錄 3 欄（小插圖）；消息／類別 3 欄；主打 4 欄；統計單列 |
| ≥1280 | 桌機 | 完全維持原 Figma 設計，未改動 |

### 本次修正的破版

- Header：logo 固定 257px 寬導致 360px 出現水平捲軸；已登入時再加通知＋帳號鈕，390px 溢出 65px → logo 改為可等比壓縮，≤479 收起通知鈕與帳號箭頭
- 收合搜尋列由右往左展開時左緣超出視窗被裁切 → 寬度改 `calc(100vw − 128px)`，≤479 進階搜尋收為 icon
- Hero 在手機被壓成 87px 細條、圖上文字無法辨識 → 改連續線性高度並依三張圖各自視覺重心（`--mpos`）裁切
- 學習紀錄卡文字壓到右側插圖（390／560／1024 皆有）→ 插圖同時鎖高與鎖寬，卡片右內距避讓
- 最新消息平板 3 欄時底部兩顆按鈕必然溢出 → ≤1023 改 2 欄、≤639 單欄並補行動版「看更多」
- 主打專區兩行標籤撐破 `h-[62px]` 固定框 → 高度改 auto、標籤字級隨斷點縮放
- 統計帶絕對定位內容換行後溢出弧形帶壓到頁尾 → ≤1279 改流式排版（`dl` 必須 `relative + z-index:1`，用 `static` 會被弧形 SVG 蓋住）
- 智慧客服浮動鈕在平板壓住課程卡、手機完全沒有入口 → ≤1279 改 56px 圓形 FAB（含 iOS 安全區）

### 驗收方式與結果

以 srcdoc iframe 逐寬度量測（`figma/renders/rwd-audit-final.png`）。
360／390／430／560／768／1024 的訪客與已登入狀態：

- `scrollWidth == 視窗寬` → 無水平捲動
- 超出視窗的元素：0（相關網站輪播軌道為刻意溢出，由容器捲動裁切）
- 學習紀錄文字壓插圖：0
- 統計帶：`dl position=relative z=1`、5 組數字皆在弧形帶內

已知非缺陷：`leading-none` 標題與 `-my-3` 負邊距會讓 `scrollHeight` 略大於盒高，
裝飾用光暈圓（`aria-hidden`，`overflow-hidden` 裁切）同理；兩者在 1280+ 原設計即存在。

## 預覽備註

Open Design 的長頁輸出會在分段擷取時重複呈現 `sticky` Header 與 `fixed` 智慧客服；這是長截圖拼接行為，瀏覽器中的實際頁面仍各只有一個固定元件。