/* ========================================================================== tokens.css — 設計代幣 (Design Tokens) -------------------------------------------------------------------------- 風格：Corporate Distributor — 深藍與銅色的代理商識別 （2026-09-11 全站改版，取代舊版「Technical Dossier」紙白＋銅色系統。 舊版沿革見 git log；調色盤與元件全部换新，間距、動態節奏等 非風格相關的代幣則沿用。） ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. 顏色 --------------------------------------------------------------------- 深藍（navy）為品牌主色，銅色（copper）為訊號色，用於強調與行動呼籲。 兩者都來自設計方提供的色階（見 landing-page-project-setup/）， 這裡只做了一件事：實際算過對比度，把「小字用銅色」的地方 從 copper-400 換成 copper-600 —— 原始色階裡 copper-400 對白底 只有 2.76:1，字級不到能免除 4.5:1 門檻的「大字」，不合格。 copper-600 對白底 5.33:1、對淺灰底 4.89:1，兩個表面都過。 copper-400 保留給「按鈕底色（上面疊深藍字）」與裝飾性粗線這類 不受文字對比限制的用途——按鈕上深藍字對 copper-400 有 6.14:1，沒問題。 --------------------------------------------------------------------- */ /* 深藍色階 */ --navy-50: #EBEDF2; --navy-100: #D3D7E3; --navy-200: #A8B0C7; --navy-300: #7C87AB; --navy-400: #4A5578; --navy-500: #1D2B54; --navy-600: #0B1B3D; /* 品牌深藍主色 —— 導覽列字、標題、深色區塊底 */ --navy-700: #081530; --navy-800: #050F22; /* 銅色階 */ --copper-50: #FDF1E6; --copper-100: #FADEC1; --copper-400: #E58325; /* 按鈕底色、裝飾粗線 —— 不當文字色 */ --copper-500: #C96B15; /* 按鈕 hover */ --copper-600: #A5560F; /* 文字用銅色：白底 5.33:1、淺灰底 4.89:1 */ --copper-700: #7C400B; /* 中性灰階 */ --slate-900: #1E242B; --slate-700: #33393F; --slate-500: #5B6168; /* 內文次要色，對白底 6.26:1 */ --slate-300: #9298A0; --slate-100: #DBDEE2; --grid-gray: #F4F5F7; /* 交替區段底色 */ /* 狀態色 */ --status-success: #2E9E6D; --status-success-bg: #DFF3EA; --status-warning: #C96B15; --status-warning-bg: #FDF1E6; --status-danger: #B0362C; --status-danger-bg: #F7E3E1; /* --- 語意代幣（元件實際引用這些，不要直接引用色階）--- */ --paper: #FFFFFF; /* 頁面／卡片底色 */ --surface: #FFFFFF; --surface-sunken: var(--grid-gray); --ink-surface: var(--navy-600); /* 深色區段（導覽、hero、footer、CTA 帶） */ --ink-surface-2: var(--navy-700); /* 深色區段上再疊一層的卡片 */ --ink: var(--navy-600); /* 標題、主要文字 */ --ink-secondary: var(--slate-500); /* 內文次要色 */ --ink-faint: var(--slate-500); --on-ink: #FFFFFF; --on-ink-secondary: #AEB5C4; /* 深色底上的次要文字，8.24:1 */ --rule: rgba(11,27,61,.12); /* 卡片邊框（裝飾，不受 3:1 限制） */ --rule-strong: rgba(11,27,61,.20); --rule-on-ink: rgba(255,255,255,.14); /* 互動元件邊框 —— 見上方對比度說明；深色底上的輸入框邊框 刻意比設計稿的 18% 白再亮（38%），對輸入框底色才有 3:1。 */ --control-border: #898984; --control-border-on-ink: rgba(255,255,255,.38); --signal: var(--copper-600); /* 文字用銅色 */ --signal-hover: var(--copper-700); --signal-on-ink: var(--copper-400); /* 深藍底上：copper-400 對 navy-600 有 6.14:1，夠亮 */ --signal-wash: var(--copper-50); --accent-bg: var(--copper-400); /* 按鈕底色專用，不當文字色 */ --accent-bg-hover: var(--copper-500); --danger: var(--status-danger); --success: var(--status-success); --focus: var(--copper-600); /* --------------------------------------------------------------------- 2. 字體 --------------------------------------------------------------------- Montserrat 是設計稿指定的西文字體，自架（見 assets/fonts/）。 中文延續本站既有政策：不下載 Noto Sans TC 網頁字型（動輒 好幾 MB），落到系統內建的 PingFang TC／微軟正黑體 —— 這兩個系統字型本身就是台灣使用者每天在讀的字，品質也好。 Space Mono 用於數據標籤、國別、年份，維持技術感。 --------------------------------------------------------------------- */ --font-sans: 'Montserrat', /* 既有的子集化 Noto Sans TC（見 fonts-cjk.css）排在系統字型 之前——這次改版沒有重新跑 subset-cjk.py，所以舊內容用到 的中文字仍走這個字型，新文案裡舊子集沒收錄的字會自動 落到後面的系統字型，不會破版，只是那幾個字不同字體。 */ 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Heiti TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, 'Cascadia Mono', Consolas, 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', monospace; --w-normal: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; --w-extra: 800; --w-black: 900; /* 字級 —— clamp 讓手機到桌機連續縮放 */ --text-micro: 0.8125rem; /* 13px */ --text-label: 0.875rem; /* 14px */ --text-body-sm: 0.9375rem; /* 15px */ --text-body: 1rem; /* 16px */ --text-lede: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem); --text-subheading: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); --text-heading: clamp(1.75rem, 2.2vw + 1.1rem, 3.25rem); --text-display: clamp(2.25rem, 6.5vw + 0.6rem, 6.5rem); --lh-display: 0.98; --lh-heading: 1.1; --lh-body: 1.65; --lh-tight: 1.35; --ls-display: -0.035em; --ls-heading: -0.03em; --ls-body: 0; --ls-mono: 0.08em; --ls-label: 0.14em; /* --------------------------------------------------------------------- 3. 間距 —— 4px 基準（沿用舊版，非風格相關） --------------------------------------------------------------------- */ --space-2: 0.125rem; --space-4: 0.25rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-24: 1.5rem; --space-32: 2rem; --space-48: 3rem; --space-64: 4rem; --space-96: 6rem; --space-128: 8rem; --section-y: clamp(4rem, 8vw, 7.5rem); /* --------------------------------------------------------------------- 4. 版面 --------------------------------------------------------------------- */ --wrap: 75rem; --wrap-narrow: 46rem; --gutter: clamp(1.25rem, 5vw, 4rem); --measure-zh: 30em; --measure-en: 68ch; /* --------------------------------------------------------------------- 5. 造型 —— 圓角卡片、柔和陰影，取代舊版的直角製圖風格 --------------------------------------------------------------------- */ --radius-sharp: 4px; --radius: 6px; --radius-media: 9px; --hairline: 1px; /* --------------------------------------------------------------------- 6. 層次 --------------------------------------------------------------------- */ --shadow-none: none; --shadow-card: 0 1px 3px rgba(11,27,61,.06); --shadow-lift: 0 18px 40px rgba(11,27,61,.14); --shadow-deep: 0 30px 70px rgba(11,27,61,.42); /* --------------------------------------------------------------------- 7. 動態（沿用舊版節奏，非風格相關） --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-rule: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-fast: 200ms; --dur-base: 400ms; --dur-slow: 700ms; --dur-rule: 900ms; --stagger: 60ms; --stack-scale: 0.94; --stack-recede: 0.965; --stack-lift: 40px; --stack-radius: 20px; --stack-rotate: 0deg; /* --------------------------------------------------------------------- 8. 疊層 --------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 100; --z-overlay: 1000; } /* 深色區段內的代幣翻轉 —— 導覽列、hero、CTA 帶、footer 都套用 .on-ink。 規則和舊版相同：--ink 與 --on-ink 必須「成對」寫死，不能互相 var()， 否則實心按鈕會整顆消失（見下方註解的原始解釋）。 */ .on-ink { --paper: var(--navy-600); --surface: var(--navy-700); --ink: #FFFFFF; --on-ink: var(--navy-600); --ink-secondary: var(--on-ink-secondary); --ink-faint: var(--on-ink-secondary); --rule: var(--rule-on-ink); --rule-strong: var(--rule-on-ink); --control-border: var(--control-border-on-ink); --signal: var(--signal-on-ink); --signal-hover: #E8A26D; --focus: var(--signal-on-ink); } /* 中文排版微調（沿用舊版理由：中文筆畫密度高，同尺寸辨識度較低， 字距為拉丁大寫設計，套到中文上只會讓字散開）。 */ :lang(zh-Hant-TW) { --text-micro: 0.875rem; --ls-label: 0.08em; --ls-mono: 0.05em; }