/* ═══ 成緒 CI 全站設計 Token · 方案 C 暖中性 · 單一來源在 CI-portal/tokens.py ═══ */ /* Inter：介面英數字型（2026-07-22 Hank 選定）。中文不含在內，仍走系統字， 所以實際只下載拉丁字母與數字，約 30KB、載一次即快取。 ⚠️ @import 必須放在所有規則之前，否則整條會被瀏覽器忽略。 ⚠️ 各系統 CSP 本來就允許 Google Fonts（style-src 有 fonts.googleapis.com、 font-src 有 fonts.gstatic.com），所以不必改任何安全設定；要改自架再說。 */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* 🔴 Inter 的數字「預設不等寬」（實測 40px 下 111=48.81px、888=74.24px）， 直接換過去會讓所有金額欄位對不齊。Segoe UI 預設是等寬的，所以原本沒事。 → 全站統一開啟等寬數字。這是換 Inter 的必要配套，不是額外裝飾。 */ body{font-variant-numeric:tabular-nums} :root{ /* ── 品牌固定色（CIS 官方，不隨主題變）── */ --ci-brand-yellow:#FFD22D; /* 能量黃 Pantone 116 */ --ci-brand-orange:#F58250; /* 活力橙 Pantone 164 */ --ci-brand-gray:#666666; /* 沈穩灰 CoolGray 9 */ --ci-brand-grad:linear-gradient(135deg,#FFD22D,#F58250); --ci-on-brand:#3a2e18; /* 壓在黃橘底上的字，對黃底 9.16:1 */ /* ── 表面 ── */ --ci-bg:#FAF8F5; --ci-bg-sunken:#F3F0EB; /* 表頭／區塊次底 */ --ci-surface:#FFFFFF; /* 卡片：純白，為密集表格可讀性 */ --ci-surface-alt:#FAF8F5; /* 卡片內次底／hover */ --ci-line:#E8E3DB; --ci-line-soft:#F0ECE5; /* ── 文字 ── */ --ci-text:#1F1D1A; /* 16.81:1 */ --ci-text-mut:#4E4A44; /* 8.80:1 */ --ci-text-dim:#6F6A62; /* 5.37:1 · 取代 CI-portal 只有 2.50:1 的 #a49a8d */ /* ── 動作色（見檔頭「橘色為什麼要拆兩個」）── */ --ci-accent:#E56A38; --ci-accent-text:#C1420B; --ci-accent-wash:#FCEFE7; /* ── 語意狀態（各含 文字／底／框 三件）── */ --ci-ok:#1A7A44; --ci-ok-bg:#EBF7F0; --ci-ok-line:#B4E3C8; --ci-warn:#8A5A00; --ci-warn-bg:#FFF7E6; --ci-warn-line:#F2D394; --ci-danger:#B3261E; --ci-danger-bg:#FDEEEC; --ci-danger-line:#F5C6C1; --ci-info:#2551B5; --ci-info-bg:#EAF0FC; --ci-info-line:#C0D4F5; /* ── 側欄（暖褐，通路管家既有色，帳務日後對齊）── */ --ci-sb:#38332F; --ci-sb-line:#4C463F; --ci-sb-hover:#4A443D; --ci-sb-active:#514A41; --ci-sb-text:#ECE7DF; /* 10.14:1 */ --ci-sb-dim:#C6BFB4; /* 6.84:1 */ /* ── 子系統識別色 ── */ /* 🔑 各系統在自己的 style.css 覆寫這一個值即可（白牌客製也是換它）。 帳務=橘 · 通路管家=橘 · 社群中心=紫 · 自動化中心=黃 */ --ci-sys:#F58250; /* ── 字級（8 階，取代現行 20~24 種；所有 .5px 值一律淘汰）── */ --ci-fs-xs:11px; /* badge／標籤 */ --ci-fs-sm:12px; /* 表格內文／meta */ --ci-fs-md:13px; /* 按鈕／表單／預設 UI */ --ci-fs-base:14px; /* body 基準 */ --ci-fs-lg:16px; /* 頁名／卡片標題 */ --ci-fs-xl:20px; /* 區塊標題 */ --ci-fs-2xl:26px; /* 頁面主標 */ --ci-fs-3xl:34px; /* KPI 數字 */ /* ── 圓角（4 階，取代現行 10~15 種）── */ --ci-r-sm:6px; /* 輸入框／按鈕 */ --ci-r-md:10px; /* 卡片／彈窗 */ --ci-r-lg:16px; /* 大面板 */ --ci-r-pill:999px; /* ── 陰影（3 階）── */ --ci-shadow-1:0 1px 2px rgba(40,32,24,.05),0 10px 24px -20px rgba(40,32,24,.30); --ci-shadow-2:0 2px 6px rgba(40,32,24,.07),0 14px 30px -18px rgba(40,32,24,.35); --ci-shadow-3:0 18px 50px -16px rgba(40,32,24,.42); /* ── 間距（4px 制）── */ --ci-sp-1:4px; --ci-sp-2:8px; --ci-sp-3:12px; --ci-sp-4:16px; --ci-sp-5:20px; --ci-sp-6:26px; /* ── 字型 ── 🔴 真正的原則＝**每台機器看到的必須一樣**（Hank：「要以一般電腦為主，因為未來是給更多人用的」）。 判準不是「有沒有內建」，而是「會不會因機器而異」。兩條路都能達標： (a) 只用作業系統內建字 → 保證看得到，但 Windows 是 Segoe UI、Mac 是蘋方，**仍然不一樣** (b) 外載字型 → 真正每台一致。**英數選這條（Inter）**，中文因為檔案太大仍走 (a)。 🔴 `Noto Sans TC` 曾放在第一順位，已移除、別再加回來： 我們**沒有外載**它，所以只有「剛好裝過」的機器才吃得到（例如做設計那台） → 自己驗收的畫面 ≠ 客戶看到的畫面。**列了卻不載，是最糟的組合**。 Inter 與它的差別就在於 Inter 有真的載（見檔案上方的 @import）。 🔴 分界（別搞混）：**思源黑體＝做圖用**（社群字卡、A4 標籤貼紙、對外素材，那些是我們自己輸出成圖片， 字型嵌在圖裡，每台機器看到的都一樣）；**系統介面＝用作業系統內建字**。 所以「CIS 指定字型是思源黑體」不等於「網頁 CSS 要指定思源黑體」——別再把它加回這一行。 順序：**Inter 先吃掉英數**（每台機器一致），中文它沒有字，自然落到系統的正黑／PingFang。 Inter 載不到時（網路異常／防火牆擋 Google）自動退回 -apple-system／Segoe UI，畫面不會壞。 通路管家原本把 Microsoft JhengHei 排第一，導致同一組金額在它和其他系統長得不一樣，已一併修正。 ⚠️ 要改這行之前先確認各系統 body 都有明確 line-height，否則行距會跟著字型浮動 （2026-07-21 手機版「文字上下過擠」就是這樣來的）。 */ --ci-font:"Inter",-apple-system,"Segoe UI","Microsoft JhengHei",system-ui,sans-serif; --ci-font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; } /* ═══ 深色主題：（hub／社群中心）═══ */ :root[data-ci-theme="dark"]{ --ci-bg:#1A1714; --ci-bg-sunken:#221E1A; --ci-surface:#221E1A; --ci-surface-alt:#282320; --ci-line:#362F28; --ci-line-soft:#2C2721; --ci-text:#EBE6DE; /* 14.6:1 */ --ci-text-mut:#C2BAAE; --ci-text-dim:#8F877C; /* 深底上橘色有 7.20:1，可直接用 CIS 原色，不必加深 */ --ci-accent:#F58250; --ci-accent-text:#F58250; --ci-accent-wash:#33241B; --ci-ok:#4ADE9B; --ci-ok-bg:#12301F; --ci-ok-line:#245B3C; --ci-warn:#FFC24B; --ci-warn-bg:#332608; --ci-warn-line:#5C4713; --ci-danger:#FF8189; --ci-danger-bg:#3A1418; --ci-danger-line:#6B2028; --ci-info:#7FB2FF; --ci-info-bg:#12213C; --ci-info-line:#274063; --ci-sb:#231F1B; --ci-sb-line:#362F28; --ci-sb-hover:#2E2823; --ci-sb-active:#3A332C; --ci-sb-text:#EBE6DE; --ci-sb-dim:#B7AFA4; --ci-shadow-1:0 1px 3px rgba(0,0,0,.45); --ci-shadow-2:0 2px 8px rgba(0,0,0,.55); --ci-shadow-3:0 20px 44px -14px rgba(0,0,0,.72); }