/* Tokens、字體與基礎可讀性設定。 注意：--oil/--meal/--infra/--equity/--incident/--preventive/--unknown 七個語意色 依規格§3.2 僅能用於對應的資料視覺，本檔案的版面元件一律只用 --paper/--stage/--ink。 */ :root { --paper: #FAF7F1; --stage: #221E19; --ink: #1C1A17; --oil: #E8A825; --meal: #A97C50; --infra: #5E6B70; --equity: #3D5CA8; --incident: #C7402D; --preventive: #C97925; --unknown: #8A8982; /* 非規格保留色：暗面（--stage）上的正文顏色，讓場景視覺內的文字對比 ≥4.5:1。 不在 §3.2 的七個語意色之列，故不受「僅描資料」限制，可用於暗面一般文字。 */ --stage-ink: #F4EFE3; /* Hero 拼貼牆資料卡專用色（版型 v3 §2「莓紅底白字」）：故意不用 --incident （#C7402D）——那顆紅色是全站唯一的「事故／衝突」語意色，紅線是只能用在 scene-5（見 tests/*-visuals.test.mjs 多處「--incident 紅線」斷言）， hero 資料卡不是 scene-5 的事故視覺，另開一個色相偏莓紫、彩度較低的深紅， 肉眼可辨識「這是另一種強調色」而非重複使用事故紅。 */ --hero-alert: #8E2440; --content-width: 76rem; /* 版型 v3（Guardian 式改版，docs/specs/2026-07-23-版型v3-Guardian式改版規格.md §1）： 內文欄 620px、破格圖 820px，兩者是全篇排版的共同基準，故提升到 base.css 的全域 token（原本 --reading-width:34rem 只有 44 那則舊版兩欄骨架在用， v3 起 .story-scene__copy／.interview-block／破格圖都要引用同一組數字）。 */ --reading-width: 620px; --breakout-width: 820px; --copy-ink: #121212; /* 版型 v4（docs/specs/2026-07-27-版型v4-互動層重做規格.md §B.1）：全站視覺 統一 token 表。決策 9 把 Hero 美學（銳角、零陰影、純色塊、紙面報紙感） 定為全站唯一基準，以下 token 是這個決定的具體數值化，story.css 一律 引用、不再出現裸數值（七個語意色──--oil/--meal/--infra/--equity/ --incident/--preventive/--unknown──不在此列，維持上方既有的「只描資料」 紅線）。 */ --paper-tint: color-mix(in srgb, var(--paper) 94%, var(--ink) 6%); --rule: #CCCCCC; --rule-stage: color-mix(in srgb, var(--stage-ink) 28%, transparent); --rule-strong: var(--ink); --radius: 0; --shadow: none; --touch-min: 44px; /* 字級階層（7 階，取代 story.css 原本 37 個相異 font-size 值，§B.1.1）。 --type-number 拆成 hero／一般兩級：單一階撐不住現況數字跨四倍的落差。 */ --type-display: clamp(2rem, 5vw, 3.25rem); --type-number-hero: clamp(4rem, 18vw, 8rem); --type-number: clamp(2.2rem, 6vw, 3.4rem); --type-title: clamp(1.35rem, 3vw, 1.85rem); --type-body: 21px; --type-ui: .95rem; --type-meta: .78rem; /* 字型家族 token（版型 v5，參照「三十年打不開的門」的字型分工規則： 中文標題／敘事正文一律 serif，UI 元件（按鈕、圖卡標籤、圖表軸標） 一律 sans，數字（計數器、大數據展示、圖表座標軸刻度）另立一組獨立 family，不跟中文正文共用同一套字重與造型）。 本站沒有外連 Google Fonts（見 templates/index.html，全站只用系統字型 疊字），--font-display 因此不是參考作品的 Libre Franklin 本尊，而是 挑一個跟它精神一致（工整、克制、少裝飾性襯線）的系統無襯線疊字， 刻意跟 --font-sans 分開宣告——即使目前疊字結果視覺相近，語意上仍是 兩個獨立 token，未來要換字重／個別調整不會牽動 UI 文字。 */ --font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif; --font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; --font-display: -apple-system, "Helvetica Neue", Arial, "Noto Sans TC", sans-serif; /* 間距（4 檔）。 */ --space-1: .5rem; --space-2: 1rem; --space-3: clamp(1.5rem, 4vw, 2.5rem); --space-4: clamp(3rem, 8vw, 5rem); /* 動畫：1 條曲線＋3 檔時長，全站唯一（禁止 bounce/elastic、禁止 infinite 循環、禁止 autoplay——這是版面 token，行為紅線見規格 §B.1「動畫」）。 */ --ease: cubic-bezier(.22, .61, .36, 1); --dur-fast: 120ms; --dur-mid: 320ms; --dur-slow: 640ms; color-scheme: light; font-family: var(--font-sans); } * { box-sizing: border-box; } /* 預設 auto（不平滑），避免帶 #scene-N 深連結進站時，瀏覽器原生錨點跳轉 與 app.js 非同步掛載互動視覺（fetch metrics/network/sources 後才 mount， 見 app.js initStoryVisuals）互相賽跑：平滑捲動動畫進行中版面持續增高， 動畫按開始時算好的固定位移收尾，最終停留點會比目標幕早了一大截。 只有在 app.js 確認初次 hash 已經對齊、互動視覺穩定掛載後，才會在 加上 .is-smooth-scroll-ready（見 app.js），之後使用者在頁內點擊 錨點連結（例如頁首「跳到查詢」）才會有平滑捲動效果。 */ html { scroll-behavior: auto; } html.is-smooth-scroll-ready { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-size: 18px; line-height: 1.8; } @media (max-width: 767px) { body { font-size: 17px; } } h1, h2, h3 { font-family: var(--font-serif); line-height: 1.2; text-wrap: balance; } p { line-height: 1.8; } a { color: inherit; } button, input, select, summary { font: inherit; } button, summary { cursor: pointer; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .eyebrow { margin: 0 0 .5rem; color: var(--unknown); font-size: .8rem; font-weight: 700; letter-spacing: .12em; } .skip-link { position: fixed; z-index: 100; inset: 0 auto auto 0; transform: translateY(-150%); padding: .75rem 1rem; background: var(--ink); color: var(--paper); } .skip-link:focus { transform: none; } /* 螢幕報讀器專用文字：視覺上不可見但仍在無障礙樹裡（標準 clip 手法，不用 display:none／visibility:hidden，那樣報讀器也讀不到）。版型 v4 §E.8 外部查詢工具連結的「（另開新視窗）」提示用這個類別。 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 全站共用按鈕（版型 v4 §B.1「按鈕」）：廢除膠囊與暗面反相配色，改「方框 墨線鈕」——border 用 currentColor 跟隨文字色，radius/shadow 走全站唯一 token。v4 全站只剩三處按鈕：兩個檢查點的「看答案／再猜一次」、證據抽屜 的關閉鈕，另加文末外部查詢工具連結（§E.8）沿用同一套視覺語彙。§B.1 定義 的 .tile--ink（實色深方格）例外樣式留給 Phase B/C 實際套用時再新增， 本檔案目前沒有消費者。 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: var(--touch-min); min-width: var(--touch-min); padding: .625rem 1.125rem; border: 1px solid currentColor; border-radius: var(--radius); box-shadow: var(--shadow); background: transparent; color: inherit; font-weight: 700; font-size: var(--type-ui); letter-spacing: .02em; text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } /* primary＝反相實色鈕（墨底紙字或紙底墨字，依所在表面而定）。currentColor 只負責邊框跟隨文字色；background/color 兩個屬性必須由使用端明確配對 指定（例如 color:var(--paper) 搭 background:var(--ink)），單靠 currentColor 無法同時讓背景填色又保持文字可見，所以這裡不預設 background:currentColor，避免文字被自己的背景蓋掉。 */ .btn--ghost { opacity: .78; } .btn:disabled { opacity: .4; cursor: not-allowed; } .btn:hover, .btn:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); }