/* ═══════════════════════════════════════════════════════════════════════════ 等公務園＋學習平臺 — 設計 Token（統整版） 權威順序（高到低）： 1. 客戶定案頁面 —— homepage-lime.html（入口網站）、學習環境（應用介面） 這兩處的既有數值是視覺契約，不得更動。 2. 官方 Figma —— color_theme / 通用前台UI（原訂基準） 提供「結構」：狀態色、互動狀態階、表面階、透明度階、字級階梯、light/dark。 3. 本檔推導出的新階 —— 僅適用於尚未設計的新頁面。 ── 架構：三層 ──────────────────────────────────────────────────────────── 第 0 層 核心 三方一致，任何介面都不得分歧（中性色階、狀態色、字型、間距） 第 1 層 介面主題 允許分歧但必須登記於此檔 [data-surface="portal"] 入口網站（首頁、列表、公開頁） [data-surface="learning"] 應用介面（學習環境、後台） 兩者皆可再套 [data-theme="dark"] 第 2 層 元件 只寫一次，靠主題變數自動換裝（見 design-components.css） 用法：　或　 未指定時預設 portal + light。 ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 第 0 層 · 核心（三方一致，不隨介面或明暗改變） ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── 中性色階 ── 首頁、學習環境、官方 fig 三方比對 ΔE ≤ 2，可安全共用。 */ --ink-900:#0f172a; /* 最深標題 */ --ink-850:#0f1721; /* = 官方 on-background */ --ink-800:#1d293d; --ink-750:#24364d; /* ★ 內文預設。三方完全一致（官方 on-surface） */ --ink-700:#334155; --ink-650:#364153; /* 學習環境 --ink-2 */ --ink-600:#475569; /* ★ 三方一致（首頁 ink-500 / 學習環境 ink-3） */ --ink-500:#5b6a80; /* 學習環境 --muted */ --ink-450:#64748b; /* 學習環境 --muted-2 */ --ink-400:#94a4b8; --ink-300:#c3d5de; --ink-250:#cbd5e1; /* ★ 三方一致 */ --ink-200:#d6dbe2; --line-300:#e2e8f0; /* ★ 三方一致，分隔線預設 */ --line-200:#e5e7eb; --line-100:#ebedf0; --surface-200:#edf0f4; /* ★ 三方一致（官方 surface2） */ --surface-150:#eef2f7; --surface-100:#f1f6f8; --surface-50:#f9fafb; --surface-0:#fcfcff; /* ★ 官方 surface / background */ --white:#ffffff; --black:#000000; /* ── 狀態色 ── 學習環境這六個值 100% 命中官方 fig（ΔE=0），直接採用為全站標準。 首頁沒有狀態色是因為它沒有表單與回饋訊息，不是刻意不同。 */ --status-danger:#db352e; --status-danger-bg:#ffe0db; --status-danger-ink:#c52821; --status-success:#088806; --status-success-bg:#def5d6; --status-success-ink:#005300; --status-warn:#a1460b; --status-warn-bg:#fff2e5; --status-info:#236bb3; --status-info-bg:#f2f7fd; /* ── 透明度階（採官方 fig opacity-*） ── */ --alpha-4:rgba(0,0,0,.04); --alpha-8:rgba(0,0,0,.08); --alpha-12:rgba(0,0,0,.12); --alpha-20:rgba(0,0,0,.20); --alpha-60:rgba(0,0,0,.60); --alpha-70:rgba(0,0,0,.70); --alpha-80:rgba(0,0,0,.80); /* ── 文字強調三級（採官方 fig on-surface-*-emphasis） ── */ --emphasis-high:var(--black); --emphasis-medium:var(--alpha-60); --emphasis-disabled:rgba(0,0,0,.35); /* ── 字型 ── 官方 Typography 以「語言模式」切換：繁中→Noto Sans TC｜英數→Inter ｜英文→Arial｜多語系→Noto Sans。Web 端以 fallback 鏈一次涵蓋，效果相同。 全站以繁體中文為主，故 Noto Sans TC 必須在 Arial 之前。 */ --font-sans:'Inter','Noto Sans TC','Noto Sans',Arial,system-ui,sans-serif; --font-tc:'Noto Sans TC',sans-serif; --font-num:'Inter',Arial,'Noto Sans TC',sans-serif; --font-icon:'Material Icons Outlined'; --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-extrabold:800; --fw-black:900; /* 官方未提供 600 SemiBold，內嵌字型也已移除，請勿使用。 */ /* ── 字級階梯 ── 採官方 Typography 的 12 階為標準（新頁面一律用這組）。 定案頁面的既有字級不動，對照見 design-system-alignment.md。 */ --fs-2xs:11px; --fs-xs:13px; --fs-sm:14px; --fs-md:16px; --fs-lg:18px; /* ★ 內文預設，全站使用最多 */ --fs-xl:20px; --fs-2xl:23px; /* 卡片標題 */ --fs-3xl:26px; --fs-4xl:29px; --fs-5xl:32px; --fs-6xl:36px; --fs-7xl:41px; /* 非階梯值：首頁統計帶的流體上限。--fs-stat 在 1280（xl）時剛好落在 官方最高階 41px，僅在 ≥1280 的寬桌機才超出，屬滿版展示的合理放大。 新頁面的字級上限一律為 --fs-7xl（41px），不得直接引用本值。 */ --fs-display:52px; --fs-3xs:12px; /* 官方 1row-XS / 2row-XS */ /* 流體字級：跨斷點連續縮放，避免在斷點處跳動 */ --fs-section:clamp(26px,3.4vw,36px); --fs-stat:clamp(31px,3.2vw,52px); --fs-stat-sm:clamp(26px,2.7vw,41px); /* ── 行高（採官方 line-height/*） ── */ --lh-1row:1; --lh-heading-lg:1.25; --lh-tight:1.3; /* = 官方 2row-sm */ --lh-heading-md:1.4; --lh-snug:1.3; --lh-normal:1.46; /* = 官方 2row-xl */ --lh-heading-sm:1.5; --lh-loose:1.7; /* = 官方 body */ --ls-eyebrow:.15em; --ls-tight:-.02em; --ls-wide:.02em; --ls-default:.14px; /* 官方 letter-spacing/default */ /* ── 間距（4px 基準，三方一致） ── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; /* ── 動效 ── */ --dur-fast:.18s; --dur:.22s; --dur-slow:.32s; --ease:cubic-bezier(.4,0,.2,1); --lift:-4px; --press:.98; /* ── 層級 ── */ --z-header:30; --z-floater:40; --z-dropdown:40; --z-backdrop:60; --z-drawer:61; /* ── 觸控與無障礙（不可因介面而放寬） ── */ --tap-min:44px; --focus-width:3px; --focus-offset:2px; } /* ═══════════════════════════════════════════════════════════════════════════ 第 1 層 · 介面主題 ═══════════════════════════════════════════════════════════════════════════ */ /* ── 入口網站（首頁、列表、公開頁）── 依 homepage-lime.html 定案值 性格：淡綠白底 + 萊姆識別 + 大圓角。任務是「吸引與導覽」。 */ :root, :root[data-surface="portal"]{ --color-bg:#fbfef6; /* 淡綠白，非純白 */ --color-surface:var(--white); --color-surface-muted:var(--surface-200); --color-surface-hover:var(--surface-100); --color-fg:var(--ink-750); --color-fg-strong:var(--ink-900); --color-fg-muted:var(--ink-600); --color-fg-subtle:var(--ink-400); --color-border:var(--alpha-12); --color-border-soft:var(--alpha-8); --color-line:var(--line-300); --color-accent:#007eb2; /* 主行動色（定案） */ --color-on-accent:var(--white); /* accent 底上的文字色 */ --color-accent-hover:#0b7dbc; --color-accent-pressed:#00618a; --color-accent-strong:#218553; --color-brand:#1a685d; --color-eyebrow:#4d7c0f; --color-highlight:#74b509; --color-danger:var(--status-danger); --color-focus:#007eb2; --color-inverse-bg:#07233b; --color-inverse-fg:var(--ink-250); --color-inverse-heading:#a3e536; --color-inverse-line:rgba(255,255,255,.09); /* 尺度 */ --r-card:24px; /* 招牌圓角 */ --container-max:1920px; --header-h:86px; --gutter:clamp(16px,3.2vw,96px); --shadow-xs:0 1px 2px rgba(16,24,40,.05); --shadow-sm:0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06); --shadow-md:0 10px 8px rgba(0,0,0,.10),0 4px 3px rgba(0,0,0,.05); --shadow-lg:0 20px 25px -5px rgba(0,0,0,.10),0 10px 10px -5px rgba(0,0,0,.04); --shadow-xl:0 18px 28px -10px rgba(15,23,42,.28),0 6px 12px rgba(15,23,42,.08); --ring-focus:0 0 0 3px rgba(0,126,178,.16); /* 招牌漸層（入口網站專屬視覺語彙，應用介面不使用） */ --grad-brand:linear-gradient(150deg,#218553 0%,#007eb2 80%); --grad-accent:linear-gradient(98deg,#84cc16 14%,#0ea5e9 86%); --grad-login:linear-gradient(304deg,#5f5fb8 4%,#7d4cad 88%); --grad-affil:linear-gradient(163deg,#ecfccb 14%,#e0f2fe 86%); --grad-card-border:linear-gradient(144.7deg,#a3d857 0%,#5cc0e3 100%); --grad-stats:linear-gradient(164deg,#218553,#007eb2); } /* ── 應用介面（學習環境、後台）── 依學習環境定案值 性格：藍灰底 + 靛藍主色 + 中圓角 + 窄容器。任務是「長時間專注操作」。 */ :root[data-surface="learning"]{ --color-bg:#eef3f8; /* 藍灰底，降低長時間閱讀的亮度負擔 */ --color-surface:var(--white); --color-surface-muted:var(--surface-200); --color-surface-hover:var(--surface-150); --color-surface-raised:var(--surface-0); --color-fg:var(--ink-750); --color-fg-strong:var(--ink-650); --color-fg-muted:var(--ink-600); --color-fg-subtle:var(--ink-450); --color-border:var(--line-300); --color-border-soft:var(--line-200); --color-line:var(--line-300); --color-accent:#5d6bc0; /* 主行動色（定案） */ --color-on-accent:var(--white); --color-accent-hover:#4d5ab0; --color-accent-pressed:#2f3577; --color-accent-strong:#2f3577; --color-brand:#236bb3; --color-eyebrow:var(--ink-600); --color-highlight:#c5dcf2; --color-link:#236bb3; /* 連結色與主行動色分離，避免內文誤點 */ --color-link-bg:#f2f7fd; --color-danger:var(--status-danger); --color-focus:#236bb3; --color-inverse-bg:#1a2433; --color-inverse-fg:var(--ink-200); --color-inverse-heading:var(--white); --color-inverse-line:rgba(255,255,255,.09); /* 尺度 */ --r-card:16px; --container-max:1376px; --header-h:60px; --gutter:clamp(16px,2.4vw,32px); --shadow-xs:0 1px 2px rgba(29,45,71,.06); --shadow-sm:0 1px 2px rgba(29,45,71,.06),0 1px 3px rgba(29,45,71,.08); --shadow-md:0 6px 20px rgba(29,45,71,.10); --shadow-lg:0 18px 50px rgba(20,40,70,.22); --shadow-xl:0 18px 50px rgba(20,40,70,.22); --ring-focus:0 0 0 3px rgba(35,107,179,.18); /* 應用介面不使用入口網站的識別漸層，避免喧賓奪主 */ --grad-brand:linear-gradient(150deg,#5d6bc0,#236bb3); --grad-accent:linear-gradient(98deg,#5d6bc0,#236bb3); --grad-stats:linear-gradient(164deg,#5d6bc0,#236bb3); } /* ═══ 深色模式 ═══ 分為「共用翻轉」＋「各介面專屬」三塊。 未指定 data-surface 時預設為入口網站，故入口網站的深色與共用區同一組選擇器。 */ /* 共用：透明度與強調層級翻轉為白色系 */ :root[data-theme="dark"]{ --alpha-4:rgba(255,255,255,.04); --alpha-8:rgba(255,255,255,.08); --alpha-12:rgba(255,255,255,.12); --alpha-20:rgba(255,255,255,.20); --emphasis-high:var(--white); --emphasis-medium:rgba(255,255,255,.60); --emphasis-disabled:rgba(255,255,255,.35); } /* ── 入口網站 · 深色 ── 由首頁品牌推導：淡綠白底翻為深青藍（沿用頁尾／統計帶的 #07233b 家族）， 萊姆識別色在深底上直接用 lime-400 提亮，主行動藍提亮到 #3fb8e6。 對比實測（對 surface #0b2438）：內文 12.8:1、次要 7.4:1、主行動 7.0:1、 eyebrow 10.4:1、accent 上的文字 7.4:1，全數通過 AA。 */ :root[data-theme="dark"], :root[data-surface="portal"][data-theme="dark"]{ --color-bg:#061b2b; --color-surface:#0b2438; --color-surface-muted:#14344b; --color-surface-hover:#0f2c41; --color-surface-raised:#0b2438; --color-fg:#dce9f2; --color-fg-strong:#f1f8fb; --color-fg-muted:#9db4c4; --color-fg-subtle:#6f8a9c; --color-border:rgba(255,255,255,.14); --color-border-soft:rgba(255,255,255,.08); --color-line:rgba(255,255,255,.12); --color-accent:#3fb8e6; --color-on-accent:#04202c; --color-accent-hover:#5cc7ee; --color-accent-pressed:#2aa3d1; --color-accent-strong:#4fc79b; --color-brand:#5fd0bd; --color-eyebrow:#a3e536; --color-highlight:#a3e536; --color-focus:#5cc7ee; /* 深色區塊要比頁面底更深，否則統計帶與頁尾會糊在一起 */ --color-inverse-bg:#03121e; --color-inverse-fg:#c3d5e0; --color-inverse-heading:#a3e536; --color-inverse-line:rgba(255,255,255,.10); --shadow-xs:0 1px 2px rgba(0,0,0,.45); --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 18px rgba(0,0,0,.45); --shadow-lg:0 20px 34px rgba(0,0,0,.55); --shadow-xl:0 18px 34px rgba(0,0,0,.6); --ring-focus:0 0 0 3px rgba(92,199,238,.28); /* 漸層在深底上要提亮，否則會沉進背景 */ --grad-brand:linear-gradient(150deg,#2fa583 0%,#3fb8e6 80%); --grad-accent:linear-gradient(98deg,#a3e536 14%,#38bdf8 86%); --grad-login:linear-gradient(304deg,#8b8bdd 4%,#a473d8 88%); --grad-affil:linear-gradient(163deg,#1f3a1c 14%,#123246 86%); --grad-card-border:linear-gradient(144.7deg,#a3d857 0%,#5cc0e3 100%); --grad-stats:linear-gradient(164deg,#2fa583,#3fb8e6); } /* ── 應用介面 · 深色 ── 依學習環境定案的 dark token（選擇器權重高於上方） */ :root[data-surface="learning"][data-theme="dark"]{ --color-bg:#0f1620; --color-surface:#161f2b; --color-surface-muted:#243040; --color-surface-hover:#1e2836; --color-surface-raised:#1a2433; --color-fg:#e9eef6; --color-fg-strong:#e9eef6; --color-fg-muted:#adbccd; --color-fg-subtle:#8496ac; --color-border:#2b3746; --color-border-soft:#2b3746; --color-line:#3b4859; /* 深色模式的 accent 是淺色，文字必須翻黑，否則白字讀不到 */ --color-accent:#c2c8f4; --color-on-accent:#1a2138; --color-accent-hover:#d4d9f8; --color-accent-pressed:#a8b0e8; --color-brand:#7ab6f2; --color-link:#7ab6f2; --color-link-bg:#16293b; --color-highlight:#22405f; --color-inverse-bg:#0b1119; --color-inverse-fg:#adbccd; --color-inverse-heading:var(--white); } /* ═══════════════════════════════════════════════════════════════════════════ 第 1.5 層 · 圓角與版面（共用階梯，--r-card 由主題指定） ═══════════════════════════════════════════════════════════════════════════ */ :root{ --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-3xl:28px; --r-full:9999px; /* 招牌非對稱圓角：僅用於首頁學習紀錄的三張數據卡，不得外擴 */ --r-asym-a:24px 60px 32px 24px; --r-asym-b:60px 24px 32px 24px; --page-max:var(--container-max); } /* ═══════════════════════════════════════════════════════════════════════════ 斷點 —— 採官方六級命名（CSS 變數無法用於 media query，此處為文件化常數） 來源：通用前台UI.fig「主頁框架RWD規範」分區的規範畫板 主頁框架_1_xs 360×640｜_sm 560×996｜_md 768×1024 ＋ lg 1024 / xl 1280 / xxl 1440 的框架尺寸 xs 360 手機（設計基準寬） 我方規則：≤ 559 sm 560 大手機／小平板直式 560 – 767 md 768 平板直式 768 – 1023 lg 1024 平板橫式 1024 – 1279 xl 1280 桌機（原始設計基準線） 1280 – 1439 xxl 1440 寬桌機 ≥ 1440 我方既有的 560 / 768 / 1024 / 1280 與官方完全一致，本次僅對齊命名並補上 xxl。 1920 為設計稿原生寬度（--container-max），不是斷點。 ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ :root{ --dur-fast:0s; --dur:0s; --dur-slow:0s; --lift:0px; } }