# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## 專案性質

單檔靜態 HTML landing page 示範專案（虛構產品 `dotlog`），用於演繹 `DESIGN.md` 的設計規範。**無 build 系統、無 npm 依賴、無測試框架、非 git 倉庫**。文案、統計數字、GitHub 連結皆為假資料，不要當成真實產品資訊處理。

## 常用指令

```bash
# 本地預覽（推薦，避開 file:// 的字體 CORS）
python3 -m http.server 8000
# 或直接開檔
open index.html
```

重新產生 `screenshot-light.png` / `screenshot-dark.png`：README 有完整 Playwright (Python) 腳本。**關鍵陷阱**：全頁截圖前必須手動把所有 `.fade-up` 元素加上 `visible` class，否則下半部區塊會因 IntersectionObserver 尚未觸發而呈空白。

## 架構

只有三個檔案要理解：

- **`DESIGN.md`** — 設計權威來源。色彩 token、字體、間距、圓角、各區塊版面、組件樣式（Button/Card/Badge/Code）、動態規範、可及性要求都在這裡。**改 `index.html` 樣式前先查這份**；設計決策衝突時以 `DESIGN.md` 為準，除非使用者明確要求偏離。
- **`index.html`** — 全部 HTML + CSS + JS 都在單檔內，無外部 `.css` / `.js`。內部結構固定順序：
  1. `<style>` 內：Tokens (`:root` 與 `html.dark`) → Reset → 各區塊樣式（依 Header → Hero → Features → Steps → Apps → Pipeline → FAQ → Footer 順序排列，與 `<body>` 內的 `<section>` 順序一致）。
  2. `<body>` 內每個 `<section class="section">` 以 `<!-- ============ 區塊名 ============ -->` 註解分隔，可獨立增刪不影響其他區塊。
  3. 檔末兩個 IIFE：主題切換（`html.dark` class + `localStorage('dotlog-theme')` + `prefers-color-scheme` fallback）、`.fade-up` 的 IntersectionObserver。
- **`README.md`** — 使用者文件，列出區塊清單、響應式斷點、可及性重點、客製化步驟。

### 主題切換

深色主題靠 `html.dark` class 驅動，所有 CSS variable 在 `html.dark { ... }` 區塊重新定義。加新樣式時若用到顏色，**一律透過 CSS variable**（`var(--foreground)` 等），不要寫死 hex，否則深色模式會壞。

### 字體

`<head>` 只載入 Space Grotesk + JetBrains Mono（Google Fonts CDN）。`DESIGN.md` 第 3 節列的 Merriweather 在本實作中**刻意省略**，不要自行補回。

## 編輯守則

- 改品牌色：同時更新 `:root` 與 `html.dark` 的 `--primary`（兩處），`DESIGN.md` 第 2 節也要同步。
- 主色 `#00bb7f` 只用於 CTA、logo、關鍵圖示、hover — 不做大面積填充（`DESIGN.md` §2.4）。
- 卡片靠 `1px solid var(--border)` 劃界，無預設陰影，hover 才浮起（`DESIGN.md` §6.2）。
- 響應式斷點對照 README「響應式斷點」表與 `DESIGN.md` §9；動 grid 欄數前先確認。
