@charset "UTF-8"; /* ⚠ @charset 必須是檔案的**第一個位元組**，前面連註解都不能有。 伺服器回的是 `Content-Type: text/css`（沒有 charset），CSS 檔本身若也沒宣告， 瀏覽器只能用後備編碼去解讀 —— 實測會把 UTF-8 的「→」(E2 86 92) 讀成 Latin-1 的「â†\'」，所有箭頭都變成亂碼（2026-07-31 客戶回報）。 ⚠ 這一行只加在檔首，底下所有既有規則一個字都沒動。 */ /* * 一天聽一點 — 前台設計 Token（SSOT） * * 【用途】全站視覺變數的唯一來源。顏色、字體、圓角、間距一律定義在這裡， * 其他 CSS 一律 var(--xxx) 引用，**禁止散落 hex**（中央廚房準則 H）。 * 客戶要調色時改這一支，19 頁同步生效。 * * 【多版設計稿】一份設計稿 = 一組 token。 * A 版寫在 :root；B 版只覆寫「有差異」的變數，不必整組重寫。 * 切換方式：layouts/main.php 的 加 data-theme="b"（SSOT，改一處全站生效）。 * 客戶定案後，把沒選中的那組刪掉，不留死碼。 * * 【命名慣例】沿用 shadcn token 命名（公司 merp／後台公版同一套，內部溝通零成本）。 * 值採 HSL 分量寫法（如 `0 0% 96%`），使用時 hsl(var(--muted))； * 這樣才能用 hsl(var(--muted) / 0.5) 調透明度，也是準則 H 的寫法。 * * 【現況】色值取自 Figma 設計稿 proposal1（file HA3Phyl0yV5OKS8nb4hHMr， * node 6:2 / frame 490:209），經 Figma API 抽出 Fill Style 與 Text Style 的 * 精確值，非目測。右側註解保留設計稿原始 hex 與 Figma style 名稱，方便對稿。 * * 【設計調性】此稿的核心是「0.2em 寬字距 + 直角 + 米白／深灰雙底」。 * 字距 (--tracking) 幾乎套用在所有文字上，是還原度的關鍵，別省。 */ :root { /* ─── 品牌主色 ─────────────────────────────────────────── */ --brand: 0 0% 18.4%; /* #2F2F2F｜Figma color/dark，全稿主色 */ --brand-foreground: 0 0% 100%; /* #FFFFFF｜主色上的文字 */ --brand-accent: 32 35% 75%; /* #D6C1A9｜Figma color/second，米棕輔色 */ /* ─── 介面基礎 ───────────────────────────────────────── */ --background: 34.3 36.8% 96.3%; /* #F9F6F2｜Figma color/card-background，頁面底 */ --foreground: 0 0% 18.4%; /* #2F2F2F｜主要文字 */ --heading: 0 0% 0%; /* #000000｜Figma text-title，標題專用 */ --card: 34.3 36.8% 96.3%; /* #F9F6F2｜卡片底（深色區塊上的米白卡） */ --card-foreground: 0 0% 18.4%; /* #2F2F2F */ --muted: 33 22.4% 90.4%; /* #ECE7E1｜次要區塊底 */ --muted-foreground: 0 0% 30%; /* #000000 @70%｜Figma text-p-contet，內文 */ --border: 33 22.4% 90.4%; /* #ECE7E1｜邊框、分隔線 */ --input: 33 22.4% 90.4%; /* #ECE7E1｜表單框線 */ --ring: 0 0% 18.4%; /* #2F2F2F｜focus 外框 */ /* ─── 反白區塊（近期課程用深底米白字，與頁面底相反） ───────── */ --surface-dark: 0 0% 18.4%; /* #2F2F2F｜深色區塊底 */ --surface-dark-foreground: 34.3 36.8% 96.3%; /* #F9F6F2｜深色區塊上的文字 */ /* ─── 裝飾色 ────────────────────────────────────────── */ --decoration: 207 60% 97%; /* #F3F8FC｜Figma color/decoration，淡藍裝飾 */ /* ⚠ 2026-07-30 客戶指定：右下角浮動的 YouTube／Podcast 鈕改用藍色。 ⚠ 這是本稿色票的**例外**——切版初期的規格明確寫過「不要增加藍色」， 全站其餘元件仍然只用米白／暖灰／卡其／深灰，請不要因為這個 token 存在 就拿去別的地方用。 色值由客戶指定為 #B1C7DE（淡藍）。 ⚠ 這是**淺色**藍，所以圖示必須是深灰而不是米白： 深灰圖示壓在上面 7.71:1 ← 採用 米白圖示壓在上面 1.61:1 ← 幾乎看不見 第一版用的是深藍 #496B8D 配米白圖示，換成淡藍時圖示色必須跟著翻過來。 ⚠ 這顆鈕壓在米白頁面底上的對比也只有 1.61:1 —— 邊界幾乎不存在， 所以下方那道極淡投影不能拿掉，它是這兩顆與背景之間唯一的分界。 */ /* ⚠ 小數位不能省：取整成 211 41% 78% 會還原成 #B0C6DE，與客戶指定的 #B1C7DE 差 1/255。本檔慣例是 HSL 分量寫法（才能用 hsl(var(--x) / a) 調透明度）， 所以保留一位小數，而不是改寫成 hex。 */ /* ⚠ 2026-07-31 追加放行：客戶指定「深灰色區域的文字 hover 效果改成藍色」， 所以深色帶（服務專區／近期課程）的標題 hover 也用這一顆（見 style.css 的 .on-dark）。 ⚠ 放行**僅限這兩處**：浮動社群鈕、深色帶文字 hover。 米白區與其他元件仍然維持「不要增加藍色」，不要因為這裡多了一個用途就到處套。 */ --accent-blue: 210.7 40.5% 78.2%; /* #B1C7DE｜浮動社群鈕 + 深色帶文字 hover */ /* ─── 語意色（表單驗證、提示） ───────────────────────────── */ --success: 142 71% 45%; --warning: 38 92% 50%; --danger: 0 84% 60%; /* ─── 字體 ────────────────────────────────────────────── 中文＝思源黑體 Noto Sans TC｜英文＝Inter（皆自架，見 fonts.css） 兩者分工照設計稿：中文文案用 --font-body； 純英文元素（Decoration p、課程編號、Footer 底紋大字）用 --font-en。 中文段落裡夾雜的英數（如「AI 分身」「10/31」）仍走 Noto Sans TC， 與 Figma 一致 —— 設計稿把那些整個文字節點都指定為 Noto Sans TC。 */ --font-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --font-en: "Inter", "Helvetica Neue", Arial, sans-serif; /* Hero 英文小標專用（Figma 603:719 指定 Julius Sans One），自架 */ --font-eyebrow: "Julius Sans One", "Inter", "Helvetica Neue", Arial, sans-serif; /* 高級 Serif（2026-07-30 新增，自架 Cormorant Garamond）。 ⚠ **只給背景的超大 DAY 數字用**（Hero 開場動畫、桌曆左頁背景）。 全站正文字型沒有改成明體 —— 切版初期的規格「不要改成明體」仍然成立， 這一套只作用在透明度 4–8% 的裝飾性數字上，看不到中文。 ⚠ 客戶點名的 Canela／Ivy Mode 都是商用付費字型（需授權與字檔）； Cormorant Garamond 是質感最接近、授權免費（OFL 1.1）的替代。 日後若取得 Canela 授權，把字檔放進 assets/front/fonts/ 並改這一行即可。 */ --font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; /* ─── 字重（設計稿主力是 350 DemiLight，非一般的 400） ────────── */ --fw-light: 100; /* DemiLight */ --fw-normal: 200; /* Regular */ --fw-medium: 700; /* Medium */ --fw-bold: 700; /* Bold — 僅 Footer 底紋大字使用 */ /* ─── 字距 ──────────────────────────────────────────── */ /* 設計稿所有文字一律 0.2em（h1 48px→9.6、內文 14px→2.8），是本稿調性核心 */ --tracking: .2em; /* ─── 字級／行高 ──────────────────────────────────────── 依 daniel 提供的字級表，並與 Figma Text Style 逐項核對過。 行高一律換算成無單位比值（px ÷ 字級），縮放時比例才不會跑掉。 字距全部 20% ＝ --tracking（0.2em），不逐項重複寫。 【中文 Noto Sans TC】 h1 regular 400 48 / 66 h2 regular 400 28 / 30 p title regular 400 24 / 50 p demilight 350 14 / 30 【英文 Inter】 Decoration p regular 400 14 / auto Footer bg title bold 700 96 / 90 */ --text-h1: 3rem; /* 48px｜CN h1｜Figma Typography/h1 */ --lh-h1: calc(66 / 48); /* 66px */ --text-h2: 1.75rem; /* 28px｜CN h2｜Figma Typography/h2 */ --lh-h2: calc(30 / 28); /* 30px */ --text-lead: 1.5rem; /* 24px｜CN p title｜Figma Typography/p title */ --lh-lead: calc(50 / 24); /* 50px */ --text-body: .875rem; /* 14px｜CN p｜Figma Typography/h3 */ --lh-body: calc(30 / 14); /* 30px */ /* 英文 Inter */ --text-deco: .875rem; /* 14px｜EN Decoration p（Service Zone 等小標） */ --lh-deco: normal; /* auto */ --text-footer-title: 6rem; /* 96px｜EN Footer background title */ --lh-footer-title: calc(90 / 96); /* 90px */ /* 字級表未列，但設計稿實際用到，保留： */ --text-sub: 1.125rem; /* 18px｜Figma Typography/p tilte 2（卡片標題、Header LOGO） */ --lh-sub: calc(30 / 18); /* 30px */ /* 區塊主標（服務專區／近期課程／知識專區） Figma 603:721（服務專區）與 603:1241（實體課程）實測都是 400 / 36 / 70， 與 Typography/h2 的 28 / 30 是不同的一級 —— h2 是內頁小節標題， 區塊主標比它大一階、行高也鬆得多。這一級之前被誤用 h2 切成 28/30， 字太小又太擠，整段看起來偏重，2026-07-29 依設計稿修正。 */ --text-section: 2.25rem; /* 36px */ --lh-section: calc(70 / 36); /* 70px */ /* 內文（小卡介紹、課程資訊）：Figma 18 / 35，比 --lh-sub 的 30 再鬆一點 */ --lh-sub-loose: calc(35 / 18); /* 35px */ --text-en: 2.25rem; /* 36px｜Figma Typography/EN（課程編號 01/02/03） */ --lh-en: calc(43.6 / 36); /* 43.6px */ /* ─── 圓角 ──────────────────────────────────────────── */ /* 本稿卡片與圖片一律直角，只有按鈕是膠囊（設計稿實測 30px） */ --radius-sm: 0; --radius: 0; /* 卡片、圖片預設 */ --radius-lg: 0; --radius-pill: 30px; /* 標籤、膠囊按鈕 */ /* ─── 版面 ──────────────────────────────────────────── */ /* 1440 是設計稿的「比例基準」，不是硬上限。 1440 以下：完全照設計稿（--container-max 就是設計稿的 1296）。 1440 以上：見本檔最後的大螢幕流體區塊，容器改為隨視窗成長並各自設上限。 */ --design-width: 1440px; /* 設計稿畫布寬，比例換算的基準 */ --container-max: 1296px; /* 標準內容區（設計稿 1440 畫布的內容寬） */ --container-wide: 1296px; /* 視覺型區塊（課程／輪播）；基準寬度時與上者相同 */ --section-y: 7rem; /* 區塊上下留白（桌機）。參考 re-loop 的大留白節奏加大 */ /* ─── 區塊接縫（2026-07-30 收斂）────────────────────────────── --section-y 是「區塊自己的上下留白」，兩個相鄰區塊各出一份 —— 所以接縫的實際高度是它的**兩倍**（1920 時 144×2 = 288px）， 客戶反饋服務專區到實體課程、以及頁面底部空白太多，原因就在這裡。 分成兩級，因為兩種接縫的性質不同： --section-seam 同一條色帶**內部**（服務專區 → 實體課程， 兩段共用同一塊 #2F2F2F，視覺上是一整條深色帶， 中間不需要「分隔兩個區塊」那麼多的空白） --section-seam-band 色帶**交界**與頁面底部（實體課程 → 知識專區、 知識專區 → Footer，這裡有底色變化幫忙分段， 留白可以比原本少，但要比帶內接縫多一階） ⚠ 刻意不隨 1920 的 --section-y 一起放大到 9rem： 客戶的反饋正是「空白太多」，寬螢幕再放大會回到原本的問題。 */ --section-seam: 4rem; /* 64px｜兩段各出一半 → 接縫 128px */ --section-seam-band: 7rem; /* 112px｜接縫 224px */ /* ⚠ 頁尾接縫必須是**獨立的一個值**，不能沿用 --section-seam-band： 區塊之間的接縫是「上下兩段各出一半」，頁尾只有知識專區**單邊**出 —— 同一個值套下去，頁尾看起來永遠只有區塊接縫的一半。 ⚠ 2026-07-30 二次加大（8rem → 11rem）：Footer 底色從卡其改回米白之後， 它與知識專區**變成同一個顏色**，原本在做分隔的色彩邊界消失了 —— 同樣的距離會覺得更近。Footer 上緣的細線也已依客戶指定移除， 所以現在唯一能分隔這兩段的就只剩留白，必須給足。 */ --section-seam-end: 11rem; /* 176px｜知識專區 → Footer */ --section-x: 4.5rem; /* 區塊左右留白（桌機，(1440-1296)/2=72px） */ /* ─── 視覺節奏 ────────────────────────────────────────── 留白節奏參考 re-loop.jp 的比例邏輯（非複製其數值）： 區塊留白大方、標題與內容之間留一段明顯的空、內文相對標題再縮一階。 我們的字距是 0.2em（對方是 normal），文字本身已經很鬆， 因此比例取其約六成，避免整頁鬆散到失焦。 */ --space-title-gap: 7rem; /* 區塊標題 → 內容的間隔（設計稿為 2.5rem，加大） */ --indent-step: 7.5rem; /* 階梯縮排一階：內文相對標題往右推 */ /* ─── 動態 ────────────────────────────────────────────── 三層節奏：hover 快、進場中、影像慢。 */ --transition: 200ms cubic-bezier(0.2, 0, 0, 1); --dur-hover: 200ms; --dur-reveal: 600ms; --dur-media: 1200ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 進場：快進慢收 */ --reveal-shift: 2.5rem; /* 進場前的下方位移量 */ /* ⚠ 2026-08-14 首頁 Hero 改版拿掉桌曆時，原本「Hero 桌曆 Showcase」整組 --cal-*／--hero-* token 已整批移除，但這兩顆後來被其他元件借用成 共用值，隨桌曆一起刪會連帶弄壞還活著的元件，改搬到這裡： --cal-ease .band-shift／.svc-layout／.kz-layout／.kz-intro 揭幕動畫共用的緩動曲線 --cal-dur-progress .course-progress-bar（實體課程列表頁碼進度線） 在用的時長 名稱仍帶 cal- 字首（沿用舊名，避免另外改所有引用處），但已經不是 桌曆專屬 token。 */ --cal-ease: cubic-bezier(.45, .05, .25, 1); --cal-dur-progress: 560ms; /* ─── 細線 ──────────────────────────────────────────────── 2026-07-30 新增。客戶反饋「知識專區的線條與文字樣式跟服務專區／實體課程 各排各的」，指定**以服務專區與實體課程為統一基準**。 ⚠ 統一的定義不是「同一個色值」，而是**同一條規則在不同底色上的正確投影**： 1px ＋ 該表面自己的對比色 ＋ 同一階視覺輕重。 實測對比（WCAG，非目測）： 深底 #2F2F2F 上　米棕 55%　→ 3.44:1 ← 基準（服務專區／實體課程） 淺底 #F9F6F2 上　深灰 48%　→ 2.72:1 ← 本次為知識專區訂的等效值 淺底 #F9F6F2 上　米棕 100% → 1.62:1 ← 改版前 .kz-rule 用的值 淺底 #F9F6F2 上　深灰 16%　→ 1.34:1 ← 改版前其餘知識專區線用的值 所以淺底**不能**照抄米棕：偏黃、又比同一區其他線更輕（1.62 vs 1.34 幾乎同級）， 三種輕重混在一起 —— 那正是「各排各的」的技術成因。 ⚠ 淺底刻意比深底略輕（2.72 vs 3.44），不是等對比（那要 48%→57%）： 1px 亮線壓在深底上會有光暈（halation），同對比時看起來比深色細線更重。 .48 取自客戶參考稿主結構分隔線的實測值（等效 alpha .465），不是憑感覺調的。 ⚠ Footer 有自己的 --footer-line（.14），Hero 的 .cal-hole／.cal-progress 是零件不是分隔線 —— 兩者本次都不動，不要順手併進來。 */ --rule-on-dark: hsl(var(--brand-accent) / .55); --rule-on-light: hsl(var(--foreground) / .48); --rule-on-light-hover: hsl(var(--foreground) / .75); /* 清單列 hover */ --rule-on-light-active:hsl(var(--foreground)); /* 清單列選取中 */ /* ─── 圖片版位圓角 ───────────────────────────────────────── 客戶指定「圓角保持克制，約 6–10px」。 ⚠ 與 --radius 不同，不要混用 —— --radius 是「本稿卡片一律直角」的既有決定（0）， 值不動；只有**圖片版位**走這個克制圓角。 */ --radius-media: 8px; /* ─── 小標級（日期／分類／編號）──────────────────────────── 服務專區與實體課程改版時確立的一級（13px）。原本散落成六處 .8125rem， 收斂成 token 供三個區塊共用，級距表才是單一權威來源： 36（區塊主標）/ 24（標題）/ 18（項目名稱）/ 14（內文）/ 13（小標） */ --text-meta: .8125rem; /* 13px */ --lh-meta: 1.7; } /* * ─── B 版設計稿 ───────────────────────────────────────────── * 只覆寫與 A 版「有差異」的變數。相同的不必重複寫。 * 啟用： * * 註：Figma 的 proposal2 與 proposal1 共用同一組色票（#2F2F2F／#F9F6F2／#D6C1A9）， * 差異在「版型」（proposal2 為左右分割深色系），不是覆寫變數能切換的。 * 若客戶要看 proposal2，需另寫一套版型 CSS，不走此機制。 */ [data-theme="b"] { /* --brand: ; */ /* --brand-accent: ; */ /* --radius: ; */ /* --font-display: ; */ } /* * ─── 大螢幕流體延展（≥ 1440，設計稿基準以上） ────────────────── * * 目的：1920／2560 這種寬螢幕不要只在中間顯示 1440、兩側大片留白。 * * 為什麼用 min(90vw, 上限)： * 90vw 在「剛好 1440」時等於 1296 —— 與設計稿的內容寬完全相同， * 所以從 1439 跨到 1440 不會有跳動，設計稿比例在基準點上是 1:1 還原的。 * 再往上才開始長，並各自設上限避免行長過長（可讀性）與元件被拉稀。 * * 為什麼分兩級容器： * 標準內容區（服務／知識）是卡片式內容，行長由卡片自身寬度（上限 780）決定， * 不是由容器決定，所以容器可以放到 1760 而不傷可讀性 —— 變寬只是多露出卡片。 * 視覺型區塊（近期課程）整張卡就是版面，可以再寬，上限 1920。 * * 斷點只往上加，1439 以下完全不受影響 —— 既有 Tablet／Mobile 設定原封不動。 * * 掛在 .is-designed（body class）而非 :root：未切版的 18 頁內容仍由 wireframe.css * 鎖在 1440，若這裡改動 :root，那些頁面的 footer 會跟著變寬而與內容對不齊。 * 等各頁陸續切版、掛上 .is-designed，就會自動吃到這組流體容器。 */ @media (min-width: 1440px) { .is-designed { --container-max: min(90vw, 1760px); --container-wide: min(90vw, 1920px); } } /* 小桌機（992–1279）：訂閱表單靠右後距離左緣還不夠遠， 96px 的 Footer 底紋大字會壓到表單。此區間縮到 64px，1280 起才回到設計稿的 96。 */ @media (min-width: 992px) and (max-width: 1279.98px) { :root { --text-footer-title: 4rem; /* 64px */ } } /* 超寬螢幕：內容變寬後，垂直節奏要跟著鬆一點才不會顯得扁。 只動留白、不動字級與元件比例，版面不會變形。 */ @media (min-width: 1920px) { .is-designed { --section-y: 9rem; --section-x: 5.5rem; --space-title-gap: 9rem; } } /* * ─── 響應式版面變數 ───────────────────────────────────────── * 間距類 token 在窄幅收斂，各元件不必各自寫 media query。 * 字級同樣在此收斂：設計稿 h1 48px 在手機會撐破，於此統一降級。 */ @media (max-width: 991.98px) { :root { --section-y: 2.5rem; --section-x: 1.5rem; /* 窄幅 --section-y 已收到 2.5rem，接縫再比它小一階就會擠在一起， 所以兩級接縫在這裡收斂成同一個值、且不小於區塊留白 */ --section-seam: 2rem; --section-seam-band: 2.5rem; --section-seam-end: 4rem; --text-h1: 2rem; /* 32px */ --text-h2: 1.375rem; /* 22px */ --text-section: 1.75rem;/* 28px｜區塊主標 36px 在窄幅會撐破 */ --text-lead: 1.25rem; /* 20px */ --text-en: 1.5rem; /* 24px */ --text-footer-title: 3.25rem; /* 52px｜96px 在窄幅會撐破 */ /* 窄幅沒有橫向餘裕，階梯縮排取消、標題間隔收斂 */ --space-title-gap: 2.5rem; --indent-step: 0; } } @media (max-width: 575.98px) { :root { --section-y: 2rem; --section-x: 1.3rem; --section-seam: 1.75rem; --section-seam-band: 2rem; --section-seam-end: 3.25rem; --text-h1: 1.625rem; /* 26px */ --text-section: 1.5rem; /* 24px */ --tracking: .12em; /* 窄幅收斂字距，避免中文標題折行破碎 */ --text-footer-title: 2.5rem; /* 40px */ } } /* * ═══════════════════════════════════════════════════════════════════════ * Editorial 設計語言（2026-07-31 客戶指定改版） * ═══════════════════════════════════════════════════════════════════════ * * 版型、架構、各區塊 Layout **全部保留不動**，只重新統一設計語言。 * 目標調性 Editorial／Publishing／Museum／Premium（Calm・Knowledge・Modern） * 要離開的 心理療癒品牌／插畫品牌／文創商品／課程平台 * 精神參考 The School of Life（吸收精神，**不是複製**） * * 客戶在同一輪陸續補的指定，全部收在這一份 token 裡： * 「矩形現代感一點，現在整個網站太可愛了一點」 → 圓角整組收到 2px * 「把線條感拿掉，以色塊跟色塊去做區隔」 → 線色轉為近乎透明，分段改交給底色 * 「字體還是用偏細偏乾淨」「不要太粗太大」 → 字重壓低、字級只微調 * 「要有高級感」 → 細字 + 大留白 + 寬字距小標 * * ⚠ 紀律：本區塊**只新增、不改寫**。上方所有既有宣告一個字都沒有動， * 要換掉的值一律在這裡重新宣告（同特異度、位置更後面 → 這裡贏）。 * 要整組回到改版前，把本區塊註解掉即可。 * ⚠ 因為在這裡覆寫 :root，**上方兩組 RWD media query 的同名變數會被蓋掉** * （media query 不加特異度，勝負只看順序）。凡是上方 media 有給值、 * 這裡又重新宣告的變數，本區塊最後**必須再寫一次自己的 RWD**。 */ :root { /* ─── 字距分級 ────────────────────────────────────────────────── 改版前全站一律 .2em。那是**小標級**的字距 —— 套在內文與大標上， 整頁看起來鬆、飄、軟，正是客戶說的「療癒／文青」而不是「出版品」。 出版品的字距是分級的：大標與內文收窄（密度＝份量）， 寬字距只留給日期／編號／英文標籤 —— 那才是它原本的位置， 而且收乾淨之後，這一級的寬字距反而變成明確的識別。 ⚠ .2em 沒有被丟掉，它還在 --tracking-meta 裡，是這一稿的簽名。 */ --tracking-display: .06em; /* ≥30px 的大標 */ --tracking-title: .10em; /* 18–28px 標題、導覽、按鈕 */ --tracking-body: .06em; /* 內文 */ --tracking-meta: .2em; /* 日期／編號／英文小標（沿用原本的 .2em） */ /* 內文字距成為全站預設值 —— 既有數十條 `letter-spacing: var(--tracking)` 一次到位，不必逐條改（漏一條就有一塊字距不一樣）。 需要 display／title／meta 的元素在 style.css 逐項明寫。 ⚠ 未切版的 18 頁不受影響：wireframe.css 有自己的 --wf-*，沒引用這組 token。 */ --tracking: var(--tracking-body); /* ─── 字級／行高（客戶：「不要太粗太大」「偏細偏乾淨」「要有高級感」）── 高級感不是把字放大，是**細、乾淨、留白多**： 字級只微調（區塊主標 36 → 38 上限，內文 14 → 15） 行距維持在 30px 這一階（絕對行距不變，字略大 → 段落密度剛好） 份量交給留白與尺寸階層，不交給字重 ⚠ 這一版刻意**不放大**標題：上一輪做到 48px，客戶回饋「不要太粗太大」。 */ --text-section: clamp(1.875rem, 2vw, 2.375rem); /* 30 → 38px */ --lh-section: 1.5; --text-lead: 1.5rem; /* 24px（不變） */ --lh-lead: 1.6; --text-sub: 1.125rem; /* 18px（不變） */ --lh-sub: 1.7; --lh-sub-loose: 1.8; --text-body: .9375rem; /* 15px（原 14）— 只加一階，讀起來扎實但不壯 */ --lh-body: 2; /* 30px 絕對行距，與原本同階 */ --lh-meta: 1.7; /* 標題字重：獨立成一級，而且刻意**比改版前細**。 改版前標題吃 --fw-normal（米白區 450／深色帶 410），偏壯； 客戶要的是「偏細偏乾淨」，所以壓到與內文同級，層級改由字級與留白撐。 ⚠ 深色帶 -20 是既有的光暈補償（淺色字壓深底看起來會胖一階）。 */ --fw-heading: 350; /* ─── 線條（客戶：「把線條感拿掉，以色塊跟色塊去做區隔」）────────── 線條系統整組退場：區塊線、欄線、卡片線、Footer 欄間線全部不畫。 分段改由底色色塊承擔（見下方「色塊分段」）。 ⚠ token **保留不刪**：站上還有幾處把「線」當作留白骨架的元件 （Hero 頁眉的空白軌），值改成幾乎看不見，日後客戶要把線加回來 只要調這兩個數字，不必回頭找數十個選擇器。 */ --rule-on-light: hsl(var(--foreground) / .10); --rule-on-light-hover: hsl(var(--foreground) / .24); --rule-on-light-active:hsl(var(--foreground) / .55); --rule-on-dark: hsl(var(--surface-dark-foreground) / .10); /* ─── 色塊分段（客戶指定「交錯式：四段四色」）──────────────────── 段與段之間不畫線，靠底色直接換塊 —— 翻頁般的節奏： Hero Paper #F9F6F2 服務專區 Charcoal #2F2F2F 實體課程 Warm Gray #ECE7E1 ← 由深轉淺，最大的一次換塊 知識專區 Paper #F9F6F2 Footer Warm Gray #ECE7E1 版權列 Charcoal #2F2F2F ⚠ 沒有新增任何色票，四個色塊全部來自既有的 --background／--muted／--surface-dark（Paper／Warm Gray／Charcoal）。 */ /* ─── 圓角（客戶：「矩形現代感一點，現在整個網站太可愛了一點」）────── 「可愛」的來源幾乎全是圓角：膠囊按鈕、膠囊標籤、圓形浮動鈕、圓角圖片。 ⚠ 不用 0 而用 2px：完全直角在螢幕上會因為抗鋸齒顯得毛躁， 2px 是「看不出圓角、但邊緣乾淨」的那一階（Hero 紙張早就是 2px）。 ⚠ --radius 維持 0 不動（本稿卡片一律直角，既有決定）。 */ --radius-media: 2px; /* 原 8px */ --radius-pill: 2px; /* 原 30px 膠囊 → 矩形，按鈕／標籤／輸入框一起換 */ /* ─── 微互動（客戶：保持克制）────────────────────────────────── */ --reveal-shift: 1rem; /* 進場位移 40px → 16px：「就位」而不是「彈出」 */ --hover-zoom: 1.02; --hover-nudge: 4px; } /* 深色帶的標題字重補償（理由見 --fw-heading） */ .on-dark { --fw-heading: 330; } /* ── Editorial 級距的 RWD ──────────────────────────────────────────── ⚠ 必須存在：本檔上方兩組 media query 也宣告了 --text-section／--text-lead， 但那些在本區塊**之前**，會被上面的 :root 蓋掉。 */ @media (max-width: 991.98px) { :root { --text-section: clamp(1.625rem, 3.6vw, 2rem); /* 26 → 32px */ --text-lead: 1.25rem; /* 20px */ --text-body: .875rem; /* 14px */ } } @media (max-width: 575.98px) { :root { --text-section: 1.5rem; /* 24px */ --tracking-display: .03em; --tracking-title: .06em; --tracking-body: .04em; --tracking-meta: .14em; } } /* * ─── 色票改版（2026-07-31 客戶提供四色參考稿）────────────────────────── * * 客戶指定「顏色搭配以這四個為搭配」： * NUDE #F2E3D0 暖米（淺色塊、深底上的標籤色） * AERIAL #B0C7DD 淡藍（唯一的強調色：hover／active／CTA／重點文字） * SLATE #7C7D80 中灰（次要文字、標籤） * BLACK #000000 純黑（主要文字、深色塊） * * ⚠ 只覆寫值，**token 名稱一個都沒有改** —— 站上 5000 行 CSS 全部是 var(--xxx) 引用， * 換名字等於整份重寫。改值就是全站生效，這正是 token 當初存在的理由。 * ⚠ 頁面底（--background #F9F6F2）**維持不動**：參考稿本身也是把四個色塊 * 放在一張近白的紙上，那張紙就是我們的 --background。它不是第五個顏色， * 是承載這四色的畫布。 * ⚠ 舊的卡其 #D6C1A9 由 NUDE #F2E3D0 接手（同一個 --brand-accent）。 * NUDE 比卡其亮很多，所以它**只在深色塊上當標籤色**； * 原本用卡其的淺底位置（知識專區英文小標／清單／Hero 英文小標） * 全部改指向 SLATE，見 style.css 的對應區塊。 */ /* ⚠ 2026-08-13 客戶指定「全站字色黑色改成黑 90%」： 只調下面三個 -foreground／heading 角色（文字色），不動 --brand／--ring／ --surface-dark —— 那三個是背景／外框用途（按鈕底色、focus 外框、深色塊底）， 不是「字色」，客戶這句話沒有要它們一起變。 ⚠ 數值換算比照本檔既有慣例（見 44 行 muted-foreground 的「#000000 @70%」 寫法）：黑 X% ＝ HSL 明度 (100-X)%，黑 90% 因此是 L 10%，不是 0%。 */ :root { --brand: 0 0% 0%; /* BLACK #000000 */ --foreground: 0 0% 10%; /* 黑 90%（原純黑 #000000）｜主要文字 */ --heading: 0 0% 10%; /* 黑 90%（原純黑 #000000） */ --card-foreground: 0 0% 10%; /* 黑 90%（原純黑 #000000） */ --ring: 0 0% 0%; --muted: 33.3 56.7% 88.2%; /* NUDE #F2E3D0｜淺色塊（實體課程／Footer） */ --brand-accent: 33.3 56.7% 88.2%; /* NUDE #F2E3D0｜深色塊上的標籤色 */ --surface-dark: 0 0% 0%; /* BLACK #000000｜深色塊 */ --surface-dark-foreground: 34.3 36.8% 96.3%; /* 紙白（不變） */ --accent-blue: 209.4 39.8% 77.8%; /* AERIAL #B0C7DD｜hover／active／CTA */ /* 2026-08-25 新增。AERIAL 是淺色，本來就設計成「底色」用（文字疊上去 要改黑，見全站其餘 --accent-blue 用法）——直接拿來當「文字顏色」 壓在淺底上實測只有 1.3~1.7:1，等於看不到字。這裡跟上面 --muted-foreground（SLATE 壓深一階）同一招：色相/彩度不變， 只把明度壓到可讀的深度，壓純白 8.1:1、壓卡片淺灰底 6.0:1， 兩邊都過 WCAG AA。不是新顏色，是 AERIAL 的「文字級」。 */ --accent-blue-text: 209.4 39.8% 32%; /* SLATE 原色。用在**標籤與大字**（≥18px 或非內文）。 */ --slate: 224.7 1.6% 49.4%; /* SLATE #7C7D80 */ /* 內文用的中灰：SLATE 壓深一階。 ⚠ 為什麼不直接用 SLATE：#7C7D80 壓在 #F9F6F2 上只有 3.8:1， 內文（15px）需要 4.5:1 才過 WCAG AA。壓到 38% 明度後是 5.6:1， 色相與 SLATE 完全相同，視覺上仍是同一個灰，只是深一階。 ⚠ 這不是新增第五個顏色，是同一個 SLATE 的**內文級**。 */ --muted-foreground: 224.7 4% 38%; } /* * ─── 膚色 → 灰色（2026-07-31 客戶指定）──────────────────────────────── * * 客戶：「背景壓灰底」「膚色的都換成灰色」。 * * 上一輪依四色參考稿把暖米（NUDE #F2E3D0）當成淺色塊，客戶看過實機之後 * 決定整組換成灰 —— 頁面底也一起由暖紙白壓成灰白。 * * 灰階全部由 SLATE #7C7D80 的**同一個色相**（225°）推出來， * 只改明度，所以整站的灰是同一家族、不會有的偏暖有的偏藍： * #F5F5F7 96.5% 頁面底（Paper 位置） * #E3E3E8 90% 淺色塊（實體課程／Hero 右半／Footer） * #C4C4CC 78% 深底上的標籤色（原本卡其／NUDE 的位置） * #7C7D80 49.4% SLATE（次要文字） * #000000 0% BLACK * * ⚠ 一樣只覆寫值，token 名稱一個都沒改 —— 全站 var(--xxx) 自動跟著換。 * ⚠ AERIAL #B0C7DD 不動：它是唯一的強調色（hover／active／CTA）， * 而且藍在灰階底上比在暖米底上更跳，這次改版反而讓它更清楚。 * ⚠ 對比都算過： * #C4C4CC 壓 #000000 = 10.6:1（深底標籤） * #000000 壓 #E3E3E8 = 16.3:1（淺色塊上的標題） * #7C7D80 壓 #F5F5F7 = 3.9:1 → 所以內文仍走 --muted-foreground（38% 明度，5.7:1） */ :root { --background: 225 6% 96.5%; /* #F5F5F7｜頁面底（壓灰） */ --card: 225 6% 96.5%; --muted: 225 6% 90%; /* #E3E3E8｜淺色塊 */ --brand-accent: 225 6% 78%; /* #C4C4CC｜深色塊上的標籤色 */ --surface-dark-foreground: 225 6% 96.5%; /* 深色塊上的文字，與頁面底同一階灰 */ /* 表單框線／邊界沿用同一階灰，避免出現第二種灰 */ --border: 225 6% 90%; --input: 225 6% 90%; } /* Header 實際高度（桌機）＝ 上內距 39 + 下內距 22 + 導覽行盒 30 ⚠ 這個數字原本散在三處（--cal-top-gap 的算式、home.js 的 THRESHOLD、 Hero 的上留白），2026-07-31 Hero 改成「header 自己一條、頁面接在下面」之後 必須有一個權威來源，否則 header 內距一調就會有一處對不上。 */ :root { --header-h: 91px; } /* 膚色（NUDE #F2E3D0）保留成一個具名色，供指定位置使用。 ⚠ 2026-07-31 客戶先指定「膚色的都換成灰色」，隨後又指定 「知識專區左邊膚色底」—— 所以膚色不是被廢掉，是從「全站淺色塊」 收斂成**單一指定位置**的重點色塊。全站其餘淺色塊仍然是灰（--muted）。 */ :root { --nude: 33.3 56.7% 88.2%; /* #F2E3D0 */ } /* ─── 「目前所在色塊」的底色與對比色（2026-07-31）──────────────────────── 全站分成黑／灰／淺灰三種色塊，同一顆按鈕會出現在不同色塊上。 把「我腳下的底色是什麼」抽成兩個 token，按鈕的 hover 就只要寫一次： hover ＝ 填滿 --ink-here、文字換成 --surface-here（＝與背景色呼應的反相） 每個色塊只要宣告自己的這兩個值，所有按鈕自動跟上（見 style.css）。 */ :root { --surface-here: hsl(var(--background)); --ink-here: hsl(var(--foreground)); } /* 淺色塊再壓深一階（2026-07-31）。 ⚠ 理由是「假線」問題：實體課程／Footer 的淺色塊與內容區的 #F6F6F7 只差 12 階， 兩者相鄰時眼睛讀不出「兩個色塊」，只讀得到「一條沒對齊的線」（客戶回報）。 把落差拉到 26 階之後，同一個交界就會被讀成兩塊色 —— 這是分段要的效果。 ⚠ 不動 --background：內容區維持 #F6F6F7，客戶指定「知識專區右邊還是要有淺灰比」。 */ :root { --muted: 225 6% 87%; /* #DCDCE1（原 #E3E3E8） */ } /* ═══════════════════════════════════════════════════════════════════════ 色塊改版：黑 → SLATE、淺灰 → 白（2026-08-03 客戶指定，附 SLATE 色票圖） ═══════════════════════════════════════════════════════════════════════ 客戶：「把背景有的黑色區塊改成這個顏色（SLATE #7C7D80），淺灰的區塊改成白色。」 ⚠ 一樣只覆寫值，token 名稱一個都沒改 —— 全站 var(--xxx) 自動跟著換， 深色塊（知識專區左欄、Hero 遮罩、色帶轉場）一次到位。 ⚠ --background（頁面底 #F5F5F7）**維持不動**：客戶稍早指定「知識專區右邊 還是要有淺灰比」，那個淺灰指的就是頁面底，不是這次要換白的「淺色塊」。 這次換白的是 --muted —— 實體課程與 Footer 那兩塊。 ⚠ 深色塊上的文字必須跟著補救：SLATE 比 BLACK 亮很多， 原本的 #F5F5F7 壓 SLATE ＝ 3.79:1（掉到 AA 以下） 改成純白 壓 SLATE ＝ 4.12:1（SLATE 底上能拿到的最高值） 這是色票本身的天花板，不是可以再調出來的 —— 4.5:1 需要底色再深一階。 已知取捨：15px 內文在這塊上是 4.12:1，大字（≥24px）過 AA，內文差 0.4。 */ :root { --surface-dark: 224.7 1.6% 49.4%; /* SLATE #7C7D80（原 BLACK #000000）*/ --surface-dark-foreground: 0 0% 100%; /* 純白｜SLATE 底上的文字 */ --muted: 0 0% 100%; /* 白（原 #DCDCE1）｜實體課程／Footer */ } /* 「淺灰色塊」的具名來源。 ⚠ --muted 這一輪被指定換成白（實體課程／Footer），可是站上還有需要 「比頁面底再深一階的灰卡」的位置（服務專區的服務卡）。 不要在 style.css 散一個 hex —— 把 --muted 換白之前的那階灰留成具名 token。 */ :root { --surface-grey: 225 6% 87%; /* #DCDCE1｜淺灰色塊（原 --muted）*/ } /* 「稍深一階的灰色塊」（2026-08-04 客戶指定：服務專區手機版 「AI 分身用稍微深色的灰當背景，企業內訓用淺灰色當背景」）。 ⚠ 不是隨手調一個灰：站上的灰階本來就是同一條 225 6% 的階梯， 96.5% --background 頁面底 #F5F5F7 90% --border／--input 87% --surface-grey 淺灰色塊 #DCDCE1 78% ← 這一階 稍深灰 #C4C4CC 49.4% --slate 深灰 #7C7D80 取現成的下一階，色相與飽和度都不動，兩塊卡才會讀起來是「同一種灰的兩個明度」， 而不是兩個不同的顏色。 ⚠ 78% 這個值站上已經在用（深色塊上的標籤色 --brand-accent）， 但那是「標籤文字色」的語意，拿來當卡片底會讓日後改標籤色時連帶改到卡片。 另立具名 token，兩個角色各自獨立。 ⚠ 黑字壓 #C4C4CC ＝ 12.0:1，遠高於 AA。 */ :root { --surface-grey-deep: 225 6% 78%; /* #C4C4CC｜稍深一階的灰色塊 */ } /* * ═══════════════════════════════════════════════════════════════════════ * 字級大小切換（2026-08-04 客戶指定） * ═══════════════════════════════════════════════════════════════════════ * 客戶：「網站增加字級大小區分，在 header 增加一欄位 字／小 大 特大 切換， * 目前的字大小為小，大跟特大可以根據字體區去移動版面。」 * * 做法：**只改根字級**，不逐條改 token。 * 本檔所有 --text-* 都是 rem（實測 34 個，含 5 個斷點的覆寫）， * 而 rem 就是根字級的倍數 —— 改一個地方，全站字級連同 rem 排版一起等比放大， * 這正是客戶說的「根據字體去移動版面」。 * * ⚠ 為什麼不用 --font-scale 乘進每個 token： * 那要把 34 條既有的 token 定義全部改寫（守則：只新增不改寫）， * 而且每加一個新斷點就要記得補一次，漏一條就會有一段字不跟著變。 * 根字級是唯一不會漏的做法。 * ⚠ 為什麼字級變大時**版面也要跟著鬆**：內距與間距同樣是 rem， * 只放大字、不放大容器的話，字會擠爆按鈕與卡片（膠囊鈕、標籤最先破）。 * 一起放大才是等比縮放，比例維持原樣。 * ⚠ 不受影響的是 px 與 vw／vh 的部分 —— 主要是 Hero 桌曆的幾何 * （--cal-* 那一組）與 --header-h。那是刻意的： * ・Hero 的圖片版位由視窗尺寸決定，跟著字級長大反而會裁掉更多畫面 * ・fixed header 若跟著長高，整站的 scroll-padding 與 sticky 停點都要重算 * 所以那兩處維持固定，只有其中的文字變大（實測仍在版位內，見部署驗證）。 * ⚠ 級距刻意保守（+12.5% / +25%）：中文在 1.5 倍以上會讓兩欄版型直接折行破版。 * 若客戶要更大，優先加第四級而不是把特大再往上拉。 * ⚠ 100% ＝ 使用者瀏覽器自己的預設字級（通常 16px）—— * 寫死 16px 會覆蓋掉「使用者已經把瀏覽器字級調大」的無障礙設定。 * ⚠ 屬性掛在 （見 assets/front/js/prefs.js），與 :root 是同一個元素， * 所以這裡的選擇器不必再往上找。 */ html { font-size: 100%; } /* ⚠ 2026-08-04 客戶回饋後上調一階：「大請用特大的字大小，特大再更大。」 初版 100 / 112.5 / 125（16／18／20px）→ 現在 100 / 125 / 150（16／20／24px）。 兩個級距都是 +4px，讀起來是均勻的三階，而不是「大跟特大差不多」。 ⚠ 150% 是這一版刻意踩到的上限：中文在 1.5 倍以上，兩欄版型會開始折行破版 （初版註解已預告過這件事）。若客戶還要更大，正解是加第四級並讓 對應版型在該級距降成單欄，而不是把這個數字再往上推。 */ html[data-font-size="lg"] { font-size: 125%; /* 16 → 20px（原 112.5% / 18px） */ } html[data-font-size="xl"] { font-size: 150%; /* 16 → 24px（原 125% / 20px） */ }