/* ============================================================ 首屏關鍵字型（自己切的子集，2026-09-30） ------------------------------------------------------------ 🔴 為什麼有這一段：字型 CSS 改成不擋渲染之後（09-29），畫面先用系統明體畫、 Noto Serif TC 到了再換，Oscar 看到「字體跳動」。Google Fonts 的中文是上百個 unicode-range 切片、URL 帶版本號，沒辦法可靠 preload。 所以把「每一頁首屏會出現的字」（交易路徑頁整個首屏；內容頁只取導覽、麵包屑、 頁標、側欄——正文換字不算跳動）切成小檔自己託管，合計 252 KB，在 preload。 族名另取，排在堆疊第一位：字在子集裡就用它（第一次繪製就是正確字型）， 不在就往後掉到 Google 那套。不用 unicode-range，瀏覽器本來就會逐字回退。 🔴 font-display 用 block 不用 swap：這五個檔已經 preload，線上量到它們到達的時間就是首次繪製 （±10ms），block 期實際上只有幾十毫秒；用 swap 的話那幾十毫秒會先畫系統字、再換—— 桌機 .ns-dhero__spec 與 .ns-facts 的數字（Cormorant）就在 FCP 後 10ms 跳了 0.03。 字元清單與產生腳本：07-site/scripts/fonts/（重跑即可更新）。 ============================================================ */ @font-face { font-family: "Noto Sans TC Critical"; font-weight: 400; font-style: normal; font-display: block; src: url("../fonts/critical/notosanstc-critical-400.woff2") format("woff2"); } @font-face { font-family: "Noto Sans TC Critical"; font-weight: 700; font-style: normal; font-display: block; src: url("../fonts/critical/notosanstc-critical-700.woff2") format("woff2"); } @font-face { font-family: "Noto Serif TC Critical"; font-weight: 600; font-style: normal; font-display: block; src: url("../fonts/critical/notoseriftc-critical-600.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond Critical"; font-weight: 500; font-style: normal; font-display: block; src: url("../fonts/critical/cormorant-critical-500.woff2") format("woff2"); } /* ============================================================ Design tokens — 三層 cascade（procedure §4-1） 換品牌只動 Layer 1；換方向（C／D）只動 Layer 2。 來源：業主品牌企劃 V2 ＋ 03-design/tokens.md 🔴 主題內不得出現寫死的 hex，一律引用這裡的變數。 ============================================================ */ :root { /* -------- Layer 1：企劃書 V2 原色（一碼未改，不可自行調整）-------- */ --brand-cream: #FCEEDB; /* 米底色 — 包裝與主官網底色 */ --brand-brown: #B97C49; /* 溫暖棕 — 主要品牌色 */ --brand-sage: #ADAF95; /* 鼠尾草綠 — 清爽風味 */ --brand-sand: #D6BDA6; /* 柔沙棕 — 襯底、次要按鈕 */ /* -------- Layer 1b：推導色（企劃書沒有，待業主確認）-------- 理由：上面四色沒有能當內文的深色。 溫暖棕 #B97C49 壓在米底 #FCEEDB 上只有 3.04:1，不到 WCAG AA 內文要求的 4.5:1。 以下三色是從溫暖棕往下推的同一色相，不是新的品牌色。 */ --brand-ink: #3B2A1E; /* 主文字 對米底 11.97:1 ✅ */ --brand-ink-soft: #6B5545; /* 次要文字 對米底 6.11:1 ✅ */ --brand-brown-deep: #8E5B32; /* 連結、按鈕底 對米底 4.98:1 ✅ */ --brand-espresso: #4A3324; /* D／B 版主底色 */ --brand-espresso-deep: #33231A; /* D／B 版次底、頁尾 */ /* -------- Layer 2：語意層（預設 = 米底暖光）-------- 方向未定案時先用亮版。業主選 D 大圖敘事後，改掛 body.theme-dark 覆寫。 */ --bg: var(--brand-cream); --bg-alt: #F7E4CC; --bg-raised: #FFFBF5; --text: var(--brand-ink); --text-soft: var(--brand-ink-soft); --accent: var(--brand-brown-deep); --on-accent: var(--brand-cream); /* 壓在 --accent 上的文字 4.98:1 */ --accent-hover: var(--brand-ink); --on-accent-hover: var(--brand-cream); /* 11.97:1 */ /* 🔴 「浮起面」的配對前景色。 每一個會翻轉的底色都必須有配對的前景色，否則切換模式時兩者會脫鉤—— D 深調把 --bg-raised 翻成米色（深棕中的唯一淺色區）， 若前景仍跟著 --text 走，就會變成米字壓米底（1:1，看不見）。 浮起面在兩個模式下都是淺色，所以這三個值兩邊相同，不需要在 .theme-dark 重定義。 */ --text-on-raised: var(--brand-ink); --text-soft-on-raised: var(--brand-ink-soft); --accent-on-raised: var(--brand-brown-deep); /* 錯誤／必填。企劃書沒有這個角色，但表單一定會用到。 Woo 預設是純紅 red，壓在米底上只有 3.50:1，不到 AA。 以下數值皆為實測：#A4262C 對米底 6.36:1、對浮起面 7.04:1。 */ --danger: #A4262C; --danger-on-raised: #A4262C; --line: rgba(59, 42, 30, .14); /* 表單框線、數量框、選項卡：比分隔線重一階，否則輸入框在米底上幾乎看不見邊。 原本只以 fallback 的形式散在 layout.css 裡（var(--line-strong, ...)）， 那種寫法在 D 深調不會翻轉——fallback 是寫死的深色值。 */ --line-strong: rgba(59, 42, 30, .28); --footer-bg: var(--brand-ink); --footer-fg: var(--brand-cream); /* -------- Layer 3：元件 -------- 🔴 這裡只放「不隨模式翻轉」的元件 token。 會翻轉的顏色（按鈕底與字）不能在這裡寫成 --btn-bg: var(--accent)—— 自訂屬性在「宣告的那個元素」上就完成代換，:root 看不到 body.theme-dark 的覆寫， 結果是背景取到 :root 的深棕、文字取到深調的深棕，兩個都深（實測 2.06:1）。 所以元件規則直接引用 --accent／--on-accent 這組配對，靠繼承在使用點解析。 */ --card-bg: var(--bg-raised); --card-border: var(--line); --tag-bg: var(--brand-brown-deep); /* 🔴 不可改回 --brand-brown：白字只有 3.48:1 */ --tag-fg: #FFFFFF; /* -------- 字體 -------- */ /* -------- 字級：下限 15px（2026-09-18 起）-------- 🔴 把尺寸收成一組 token，不是為了好看，是為了「下限」能被守住。 原本 45 條規則各自寫死 10.5px～15px，任何一次改版都可能再掉回去； 收成 token 之後，要破下限就得動這四行，會被看見。 對照（原始 → 2026-09-16 → 2026-09-18）： 10–12px 小標、細字、法規列 → 16 → --fs-2xs 15 12.5–13.5 欄位標籤、導覽、頁尾連結 → 17 → --fs-xs 16 14–15px 內文、按鈕、導言 → 18 → --fs-s 17 小標題 → 20 → --fs-m 19 🔴 2026-09-18 整組下調一階，業主指定。 交換的是什麼要寫清楚：09-16 把下限拉到 16px 是為了可讀性， 代價是「大標 vs 極小輔助字」的級距反差從設計稿的 5.5 倍掉到 3.6 倍， 編輯直書這個方向的核心美感就在那個反差上。下調一階把反差找回一些。 15px 仍高於多數電商內文（13–14px），WCAG 本身沒有規定最小字級， 16px 那條是我們自己立的規則，不是法規底線。 🔴 標題級距仍然不動。它們遠高於下限，跟著縮只會讓版面失去重音。 */ --fs-2xs: 15px; --fs-xs: 16px; --fs-s: 17px; --fs-m: 19px; /* 🔴 2026-09-18：中文只留 Noto Serif TC，Noto Sans TC 整個拿掉（業主決定）。 ──────────────────────────────────────────────────── 原本是「標題明體、內文黑體」兩套中文。拿掉一套的直接好處是 少載一整個中文字型家族——中文字型是全站最大的字體成本， 一個家族的一個字重就是上百個 unicode-range 切片。 🔴 代價要寫在這裡，因為它不會自己冒出來： 有幾處版面原本是**靠 serif／sans 的對比**分主從的， 例如 home.css 的 .ns-fact__title 與 .ns-fact__desc（註解寫著 「只差 1–2px，只靠 serif／sans 分層」）。現在兩者同一套字， 分層只剩字重與字距——所以那一條的字重從 400 提到 --fw-em。 日後再有「兩行字級差不多」的版面，不能再指望換字體來分。 --font-body 與 --font-heading 現在指到同一個家族，但兩個 token 都留著： 它們表達的是用途不是字型，之後若中文主字換成凝書體（見 tokens.md）， 標題會先換、內文未必跟著換。 */ /* 🔴 2026-10-02 業主拍板（Bella《官網設計討論》）：內文思源黑體 Medium、大標思源宋體 SemiBold。 09-18「中文只剩 Noto Serif TC」就此作廢，中文回到兩個家族；首屏子集也跟著重切 （10-06 起是 notosanstc-critical-400／700、notoseriftc-critical-600、cormorant-critical-500）。 */ --font-heading: "Noto Serif TC Critical", "Noto Serif TC", "Songti TC", serif; --font-body: "Noto Sans TC Critical", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-figure: "Cormorant Garamond Critical", "Cormorant Garamond", "Noto Serif TC", serif; /* -------- 字重尺度：四個 token，別再自己寫數字 -------- 🔴 **字重的數量幾乎不影響流量，這件事跟直覺相反，量過才知道。** ──────────────────────────────────────────────── Google Fonts 對同一個家族只有兩種發法（2026-09-19 實測， 抓同一個切片比 content-length）： 只要 1 個字重 → 靜態檔　29.6 KB／切片 要 2 個以上（不管幾個） → 可變字型 56.6 KB／切片 200;300;500 與 300;500 拿到的是**同一個檔案**——334 個 @font-face 指向的不重複 URL 只有 113 個。所以 4 個砍到 3 個省 0 KB， 之後想加第 4 級也是 0 KB。唯一會改變流量的決定是「1 個 vs 2 個以上」， 而只有 1 個字重等於中文完全沒有輕重對比，這個設計做不到。 → **字重要少，理由是版面秩序，不是流量。** 真正吃流量的是「載幾個中文家族」 （09-18 實測拿掉一整個 Noto Sans TC 讓首頁字型從 2480 KB 降到 1862 KB； 10-02 Bella 指定內文黑體，兩個中文家族又回來了，這是設計決定、代價已知）。 🔴 2026-10-06 現行尺度——全站只有這四個字重，每個 token 只給一個家族： --fw-text 400 黑體內文，站上絕大多數的字（Bella 10-06：Regular） --fw-em 700 黑體強調：strong／b、表頭。宋體沒有 700，不給宋體 --fw-display 600 所有宋體：大標、頁首標題、小標、Q&A 問題（Bella：SemiBold） --fw-fig 500 Cormorant 數字與英文 kicker 寫了尺度外的字重，瀏覽器會就近替代或合成偽粗體，不報錯。所以： ・每條 font-family: var(--font-figure) 都明寫 --fw-fig ・每條 font-family: var(--font-body) 都明寫 --fw-text（否則在 Cormorant 父層底下會繼承到 500） ・base.css 把 strong／b／h1–h6 壓回尺度；layout.css 把 Astra 給 button／label 的 500 壓回 ・scripts/qa/cdp/weights.mjs 掃十一頁，有第五個字重就失敗 歷程：10-02 Bella 上移到 500／600／700（200／300 不再載入）→ 10-03 Oscar 收成四個 （宋體 700 併入 600、Cormorant 600 刪除）→ 10-06 Bella 內文 500 → 400、Cormorant 拆出 --fw-fig。 規格與實測表：03-design/字體規格.md */ --fw-display: 600; /* 大標：Noto Serif TC SemiBold */ --fw-text: 400; /* 內文：Noto Sans TC Regular（10-06 前是 500） */ --fw-em: 700; /* 強調：Noto Sans TC Bold。只給黑體，宋體沒有 700 */ --fw-fig: 500; /* 數字：Cormorant Garamond 500。所有 --font-figure 的規則都明寫它 */ /* 劃線原價。三處價格（hero、口味區、商品頁）共用同一個值—— 原本各自寫 --fs-xs（16px），放在 38–40px 的現價旁邊像註腳， 2026-09-25 Oscar 看圖：「刪除線的文字太小」。 取現價的六成上下：桌機 24／手機 19。不做成價格的 em， 因為三處現價的 clamp 各不相同，em 會讓劃線價也跟著三種。 */ --fs-strike: clamp(19px, 1.9vw, 24px); --ls-heading: .10em; /* 中文標題字距 .08–.16em */ --ls-body: .035em; /* 內文 .03–.04em */ --lh-heading: 1.5; --lh-body: 1.9; /* -------- 間距／圓角／陰影 -------- */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --radius: 0; /* 兩版都用直角，配合包裝的方正感 */ --shadow: none; /* 用 1px 細線與底色差分層，不用陰影 */ } /* D 大圖敘事（深調）——業主選定後在 body 加 .theme-dark 即可整站切換 */ body.theme-dark { --bg: var(--brand-espresso); --bg-alt: var(--brand-espresso-deep); --bg-raised: var(--brand-cream); /* 深棕中的唯一淺色區：商品區 */ --text: var(--brand-cream); --text-soft: rgba(252, 238, 219, .66); --accent: var(--brand-sand); --on-accent: var(--brand-espresso); /* 6.53:1 */ --accent-hover: var(--brand-cream); --on-accent-hover: var(--brand-espresso);/* 10.27:1 */ --line: rgba(252, 238, 219, .18); --line-strong: rgba(252, 238, 219, .38); --footer-bg: var(--brand-espresso-deep); --footer-fg: var(--brand-cream); /* 深調的錯誤色要翻成淺紅：#F2B8AE 對深棕 6.84:1、對次深底 8.77:1。 浮起面（米色島）仍用深紅，由 --danger-on-raised 提供，不在這裡覆寫。 */ --danger: #F2B8AE; }