/* ================================================================ Board Sea Technology — 01-tokens.css :root token 層 ＋ @font-face ＋ 四斷點覆寫。**全站唯一的 token 來源。** Dawa 原本的硬約束 ⑨ 是「單一 styles.css、單一 :root、不拆檔」，用意是防止 多頁之間的視覺漂移。2026-08-20 依 daniel 指示改成分檔（好維護好擴充）， 但**那個保證的機制是「只有一個 token 來源」，不是「只有一個檔案」** —— 所以本檔維持單一 :root，保證仍在。 ⚠️ 四個斷點的 token 覆寫**必須留在本檔、緊接 :root 之後**。它們是重新宣告 custom property 的 @media 區塊，搬到別的檔案就會踩到層疊順序。 ⚠️ 硬約束 ① 仍然有效：:root 以外禁止字面 hex / rgb() / hsl() / 非階梯 px。 缺 token 就停下來回報，不要就地發明一個數字。 ── 本檔是 styles.css（4,118 行）拆檔的第 1/5 段 ── 拆檔只切不搬：五個檔案**依序串接回去逐位元組等於原檔**，層疊結果不變。 由 includes/_head.php 依 01→05 的順序載入，**順序不可調換**。 來源 banner 邊界見 git 歷史（2026-08-20 拆檔 commit）。 ================================================================ */ /* ================================================================ Board Sea Technology 形象網站 （原文為「site-b — BroadSea Technology 形象網站（提案Ｂ mockup）」。 品牌字串以報價單為準寫 Board Sea；她的 DESIGN.md 硬約束 ⑧ 自己也註明 BroadSea 是「客戶正式確認前之暫定寫法」。docs/ 與 index.html 原件裡的 寫法暫不動，當史料保留。） TOKEN LAYER + MINIMAL BASE — Unit 1 of 2 單一真相源：/Users/dawa/博洋興業有限公司/site-b/DESIGN.md （含檔尾「待套用的連帶修正清單」，已套用 E1／F 組，見檔尾說明） 佐證資料：/Users/dawa/博洋興業有限公司/site-b/docs/figma-spec.md 本檔範圍：只有三塊——① :root token（原始 → 語意別名／角色） ② 四斷點 media query 覆寫（覆寫 :root 變數本身，不在別處 hardcode 斷點值） ③ 最小 reset / base。 不含任何元件樣式（nav / hero / button / card / footer 留給 Unit 2）。 confidence 標記（沿用 DESIGN.md，僅作註解、非 CSS 語法一部分）： figma-exact > figma-panel-verified > figma-measured-from-image > derived > UNVERIFIED_PENDING_PNG > UNVERIFIED 本檔絕大多數值為 figma-exact／figma-panel-verified／derived， 個別 UNVERIFIED_PENDING_PNG／quarantined 值另行標註，不得移除限制。 硬規則（DESIGN.md 交接契約第 4 條）：色值／間距／字級／圓角／動畫時長 只能 var(--token)；:root 以外不得出現 hex／rgb()／hsl()／非階梯 px； Marcellus 禁 faux bold（font-synthesis: none，見本檔 base 區）。 ================================================================ */ :root { /* ── COLOR — primitive：4 軸 × 10 階（source: DESIGN.md `color`） ── */ /* neutral（純灰軸，figma-exact 階為 100/200/300/500/700/950，其餘 derived） */ --color-neutral-100: #FFFFFF; --color-neutral-200: #F3F3F3; --color-neutral-300: #E8E8E8; --color-neutral-400: #C6C6C6; --color-neutral-500: #A4A4A4; --color-neutral-600: #767676; /* derived：最淺可用正文灰地板，對白 4.54:1，不得再淺 */ --color-neutral-700: #616161; --color-neutral-800: #313131; --color-neutral-900: #191919; --color-neutral-950: #000000; /* brand（深藍結構軸：figma-exact 900，其餘依 R2 hue218 明度階梯 derived） */ --color-brand-100: #EBF2FF; --color-brand-200: #CADDFF; --color-brand-300: #8FB8FF; --color-brand-400: #3D84FF; --color-brand-500: #0055E7; --color-brand-600: #0047C2; --color-brand-700: #003899; --color-brand-800: #00276B; --color-brand-900: #00173E; --color-brand-950: #000D24; /* accent（亮藍互動軸：figma-exact 200/500，其餘依 R2 hue210 明度階梯 derived） */ --color-accent-100: #EBF5FF; --color-accent-200: #CAE5FF; --color-accent-300: #8FC7FF; --color-accent-400: #3D9EFF; --color-accent-500: #0073E7; --color-accent-600: #0061C2; /* 本案所有 ≤13px 藍字一律用此階：6.02:1(白) / 5.42:1(#F3F3F3) */ --color-accent-700: #004D99; --color-accent-800: #00366B; --color-accent-900: #001F3E; --color-accent-950: #001224; /* reserved：隔離中，本輪不指派任何用途，要用須先回報（DESIGN.md color.reserved） */ --color-reserved-dark-brown: #443F3B; /* quarantined — 暖色，混入純灰軸會破壞單一色溫，禁直接使用 */ /* ── COLOR — semantic alias（frontend 只准引用這層，不准直接摸階數） ── */ --surface-page: var(--color-neutral-100); --surface-subtle: var(--color-neutral-200); --surface-inverse: var(--color-brand-900); --border-hairline: var(--color-neutral-300); /* 純裝飾分隔線，對白僅 1.22:1，禁承載文字/功能邊框 */ --border-functional: var(--color-neutral-600); /* 需承載狀態的邊框，≥3:1 (WCAG 1.4.11) */ --border-interactive: var(--color-accent-600); /* 全站微動態規格新增：與 --text-link 同值(#0061C2)、不同語意—— 兩者分離承載，日後調其一不會誤動其二，這正是 semantic_alias 層存在的理由 */ --text-primary: var(--color-neutral-950); --text-body: var(--color-neutral-800); /* 長段正文，13.0:1，非純黑降光暈 */ --text-secondary: var(--color-neutral-700); --text-on-inverse: var(--color-neutral-100); --text-link: var(--color-accent-600); /* ≤13px 藍字一律用此階 */ --text-link-large: var(--color-accent-500); /* 僅限 ≥18px 或 ≥14px/700 */ --text-link-inverse: var(--color-accent-200); --focus-ring-on-light: var(--color-accent-500); --focus-ring-on-dark: var(--color-accent-200); /* 2026-08-19 header stuck-glass（D32）：70% 白玻璃疊在深底時合成亮度落在中間調 （L 0.448–1.000），既有 on-light(accent.500)／on-dark(accent.200) 兩端在最壞情況 下皆不達 WCAG 1.4.11 的 3:1（實測 2.16:1／1.62:1）。加深一階到 accent.700 後 全區間 3.95–8.33:1 達標。僅適用於 .site-header.is-stuck 內部，不影響其餘元件。 */ --focus-ring-on-glass: var(--color-accent-700); --text-link-on-glass: var(--color-accent-700); --decorative-only: var(--color-neutral-500); /* 對白僅 2.49:1，禁用於任何文字或功能邊框 */ /* ── TYPE — font family（source: DESIGN.md `font`，self-host，@font-face 未建，見檔尾說明） ── */ --font-family-heading: "Marcellus", Georgia, "Times New Roman", serif; --font-family-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif; --font-family-mono-ui: "Inter", "Helvetica Neue", Arial, sans-serif; /* ── TYPE — weight primitive ── */ /* Marcellus 僅發行 400（禁 faux bold）；Albert Sans 400/500/700； Inter 僅 700（原 500 唯一用途 type.label 已整級刪除，見修正清單 E1） */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; /* ── TYPE — scale primitive：8 階 × 4 斷點（下方為 base=1024–1440 欄， tablet/mobile/wide 於各自 media block 完整覆寫，floor_guard 只覆寫 h1/h2 size） letter-spacing 為 em、隨字級自動縮放，四斷點同值不覆寫（source: DESIGN.md type_scale） ── */ --type-scale-h1-size: 76px; /* c: figma-panel-verified；本輪備而不用，見 DESIGN.md h1._unassigned */ --type-scale-h1-line-height: 84px; --type-scale-h1-letter-spacing: -0.01em; /* ls_c: derived，沿用同族 h2 值 */ --type-scale-h1-family: var(--font-family-heading); --type-scale-h2-size: 56px; --type-scale-h2-line-height: 64px; --type-scale-h2-letter-spacing: -0.01em; --type-scale-h2-family: var(--font-family-heading); --type-scale-h3-size: 42px; --type-scale-h3-line-height: 56px; --type-scale-h3-letter-spacing: 0.01em; --type-scale-h3-family: var(--font-family-heading); --type-scale-h4-size: 24px; --type-scale-h4-line-height: 36px; --type-scale-h4-letter-spacing: 0.01em; --type-scale-h4-family: var(--font-family-heading); --type-scale-h5-size: 18px; --type-scale-h5-line-height: 36px; --type-scale-h5-letter-spacing: 0.01em; --type-scale-h5-family: var(--font-family-body); --type-scale-h6-size: 13px; --type-scale-h6-line-height: 22px; --type-scale-h6-letter-spacing: 0.01em; --type-scale-h6-family: var(--font-family-body); --type-scale-body-size: 15px; --type-scale-body-line-height: 24px; --type-scale-body-letter-spacing: 0.01em; --type-scale-body-family: var(--font-family-body); /* 原 type.body_sm（15px）已取消：15px 即本階 base 值，不獨立成級（deviations.D5 撤銷） */ --type-scale-caption-size: 13px; --type-scale-caption-line-height: 22px; --type-scale-caption-letter-spacing: 0.01em; --type-scale-caption-family: var(--font-family-body); /* type_outside_scale：不受四斷點響應式系統管的特例（各自理由見 DESIGN.md） */ /* 2026-08-18 QA 修正（qaA 溢出 FAIL，1024px 撐出 31px、與鄰欄墨水重疊 19.34px）：原始 `clamp(48px,14vw,72px)` 在 viewport≥514px 就已頂到 72px 上限，這個「何時頂滿」的門檻與「4 欄版面何時真的容得下 72px 數字」（欄寬需求≈909px container、對應 viewport≈1149px）完全脫鉤—— 514px 遠早於 1149px，中間 1024–1149px 這段變成「4 欄擠不下、但字級 仍鎖 72px」的空窗。改用 min(14vw, 30cqw)：14vw 那支保留原本窄螢幕 （<514px）壓縮到 48px 的既有視覺設計不變（純改 cqw 會讓 320px 手機版 數字從 48px 跳大到 72px，是不必要的副作用）；30cqw 那支相對 `.stat` 自身欄寬（見下方 `.stat` 新增 container-type:inline-size）取值， 在 4 欄擠壓的窗口正確隨欄寬縮小，且在 tablet(2欄)/mobile(1欄) 欄寬 寬裕時自然算出遠大於 72 而被 clamp 頂掉、等同沒變化，不需要另外用 斷點覆寫。係數 30（非精算的臨界值 32.98）刻意保留安全餘裕，抵銷 字型渲染次像素差異。不影響 tnum：font-feature-settings 未變動。 */ --type-scale-stat-huge-size: clamp(48px, 30cqw, 72px); /* 2026-08-19 uiux S6 reshoot C3：移除 14vw 安全網（2026-08-18 QA 修正遺留），改純 cqw。原 hybrid 在 mobile/floor_guard 單欄範圍（14vw 相對窄視口偏小）會把數字壓到遠低於 72px 上限，未達 Figma 參考圖視覺意圖；純 cqw 在全部 7 個驗收寬度實算不溢出（V4），詳見任務報告 */ --type-scale-stat-huge-line-height: 1.167; /* 比值，非絕對 px：系統外特例未變數化 */ --type-scale-stat-huge-letter-spacing: -0.04em; --type-scale-stat-huge-weight: var(--font-weight-bold); --type-scale-stat-huge-family: var(--font-family-mono-ui); --type-scale-stat-huge-font-feature-settings: "tnum"; /* In-numbers 4 欄需 tabular figures 對齊 */ --type-scale-logo-wordmark-size: 28px; /* 區域值，不入字階系統、不隨斷點縮放 */ --type-scale-logo-wordmark-family: var(--font-family-heading); --type-scale-logo-wordmark-weight: var(--font-weight-regular); --type-scale-logo-wordmark-transform: uppercase; --type-scale-logo-subline-size: 11px; /* 區域值，同上 */ --type-scale-logo-subline-family: var(--font-family-body); --type-scale-logo-subline-weight: var(--font-weight-medium); --type-scale-logo-subline-letter-spacing: 0.02em; /* local 值，不受全站 1% 規則約束 */ /* ── TYPE — role（語意層，frontend 只准引用這層，不准直接摸 type-scale 階數） source: DESIGN.md `type_role`；weight/max-width 已內含各角色裁決 ── */ --type-role-hero-title-size: var(--type-scale-h2-size); --type-role-hero-title-line-height: var(--type-scale-h2-line-height); --type-role-hero-title-letter-spacing: var(--type-scale-h2-letter-spacing); --type-role-hero-title-family: var(--type-scale-h2-family); --type-role-hero-title-weight: var(--font-weight-regular); /* 這就是本站唯一的 HTML

：使用 h2 階是 Figma 實際綁定，非降級 */ --type-role-hero-subtitle-size: var(--type-scale-h5-size); --type-role-hero-subtitle-line-height: var(--type-scale-h5-line-height); --type-role-hero-subtitle-letter-spacing: var(--type-scale-h5-letter-spacing); --type-role-hero-subtitle-family: var(--type-scale-h5-family); --type-role-hero-subtitle-weight: var(--font-weight-bold); /* 限 HERO 的 1–2 行副標；多行段落一律 paragraph role */ --type-role-section-title-size: var(--type-scale-h2-size); --type-role-section-title-line-height: var(--type-scale-h2-line-height); --type-role-section-title-letter-spacing: var(--type-scale-h2-letter-spacing); --type-role-section-title-family: var(--type-scale-h2-family); --type-role-section-title-weight: var(--font-weight-regular); /* ── page-title：內頁大標（2026-08-20 新增）───────────────────────────── 內頁的

。首頁的

（HERO 標題）用的是 h2 階，這一階比它高一級。 ⚠️ 這不是發明新字級。h1 階早就在 primitive 層定義好、四斷點齊全， 且 DESIGN.md 的 h1._unassigned 明文寫著：「登錄為合法階、備而不用。 **日後新增更高一層標題（例如 9 頁中某內頁的大標）時直接引用**， 不需回頭改本檔。」——這裡就是那個「日後」。 ⚠️ 走 role 別名而不是讓元件直接引用 --type-scale-h1-*： DESIGN.md「frontend 只准引用 type_role，type_scale 是為了與 Variables 面板 1:1 可回溯而保留的 primitive 層」。 別名的好處是四斷點的 scale 覆寫會自動跟著走，不必重寫響應式。 */ --type-role-page-title-size: var(--type-scale-h1-size); --type-role-page-title-line-height: var(--type-scale-h1-line-height); --type-role-page-title-letter-spacing: var(--type-scale-h1-letter-spacing); --type-role-page-title-family: var(--type-scale-h1-family); --type-role-page-title-weight: var(--font-weight-regular); /* ── breadcrumb：麵包屑（2026-08-20 新增）──────────────────────────── 與 meta 同階（caption），但語意不同：meta 是內容的附屬資訊， breadcrumb 是導覽。分開命名，日後要各自調整才不會互相牽動。 */ --type-role-breadcrumb-size: var(--type-scale-caption-size); --type-role-breadcrumb-line-height: var(--type-scale-caption-line-height); --type-role-breadcrumb-letter-spacing: var(--type-scale-caption-letter-spacing); --type-role-breadcrumb-family: var(--type-scale-caption-family); --type-role-breadcrumb-weight: var(--font-weight-regular); --type-role-card-title-size: var(--type-scale-h4-size); --type-role-card-title-line-height: var(--type-scale-h4-line-height); --type-role-card-title-letter-spacing: var(--type-scale-h4-letter-spacing); --type-role-card-title-family: var(--type-scale-h4-family); --type-role-card-title-weight: var(--font-weight-regular); --type-role-eyebrow-size: var(--type-scale-caption-size); --type-role-eyebrow-line-height: var(--type-scale-caption-line-height); --type-role-eyebrow-letter-spacing: var(--type-scale-caption-letter-spacing); --type-role-eyebrow-family: var(--type-scale-caption-family); --type-role-eyebrow-weight: var(--font-weight-bold); --type-role-eyebrow-transform: none; /* 2x 圖目視為句首大寫，非全大寫 */ --type-role-paragraph-size: var(--type-scale-body-size); --type-role-paragraph-line-height: var(--type-scale-body-line-height); --type-role-paragraph-letter-spacing: var(--type-scale-body-letter-spacing); --type-role-paragraph-family: var(--type-scale-body-family); --type-role-paragraph-weight: var(--font-weight-regular); --type-role-paragraph-max-width: 36em; /* ≈72 字元/行，取代 deviations.D5 */ --type-role-card-body-size: var(--type-scale-body-size); --type-role-card-body-line-height: var(--type-scale-body-line-height); --type-role-card-body-letter-spacing: var(--type-scale-body-letter-spacing); --type-role-card-body-family: var(--type-scale-body-family); --type-role-card-body-weight: var(--font-weight-regular); --type-role-card-body-max-width: 36em; --type-role-meta-size: var(--type-scale-caption-size); --type-role-meta-line-height: var(--type-scale-caption-line-height); --type-role-meta-letter-spacing: var(--type-scale-caption-letter-spacing); --type-role-meta-family: var(--type-scale-caption-family); --type-role-meta-weight: var(--font-weight-regular); --type-role-nav-item-size: var(--type-scale-h6-size); --type-role-nav-item-line-height: var(--type-scale-h6-line-height); --type-role-nav-item-letter-spacing: var(--type-scale-h6-letter-spacing); --type-role-nav-item-family: var(--type-scale-h6-family); /* 2026-08-18 派工單 Unit 3：用戶「nav 的 font weight:400 就好」——桌機 header 那條 nav。此 role token 現在只剩 .primary-nav__list a 一個消費者 （.nav-overlay__list a 已在 Unit 2 改直接引用 --type-scale-body-*，不再 透過本 role token，見該規則旁註解），故在此改動不會波及面板導覽項 （面板原稿量測是粗體，維持不變，兩者已拆開）。 */ --type-role-nav-item-weight: var(--font-weight-regular); --type-role-button-label-size: var(--type-scale-caption-size); --type-role-button-label-line-height: var(--type-scale-caption-line-height); --type-role-button-label-letter-spacing: var(--type-scale-caption-letter-spacing); --type-role-button-label-family: var(--type-scale-caption-family); --type-role-button-label-weight: var(--font-weight-bold); --type-role-tag-label-size: var(--type-scale-caption-size); --type-role-tag-label-line-height: var(--type-scale-caption-line-height); --type-role-tag-label-letter-spacing: var(--type-scale-caption-letter-spacing); --type-role-tag-label-family: var(--type-scale-caption-family); --type-role-tag-label-weight: var(--font-weight-regular); --type-role-stat-number-size: var(--type-scale-stat-huge-size); --type-role-stat-number-line-height: var(--type-scale-stat-huge-line-height); --type-role-stat-number-letter-spacing: var(--type-scale-stat-huge-letter-spacing); --type-role-stat-number-family: var(--type-scale-stat-huge-family); --type-role-stat-number-weight: var(--type-scale-stat-huge-weight); --type-role-stat-number-font-feature-settings: var(--type-scale-stat-huge-font-feature-settings); /* giant_wordmark 角色不在此列：其 size 僅定義於 DESIGN.md `component.giant_wordmark` （footer 專屬裝飾字），屬 Unit 2 footer 範圍，本輪不建 token，見回報缺口清單 */ /* ── SPACE — 12 級（4px base / 8px 優先，source: DESIGN.md `space`） ── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 60px; --space-10: 80px; --space-11: 120px; /* 間距階梯第 11 級。容器左緣語意已於 2026-08-19 移交 --inset-x（現值 space-9=60px）；本階現有 3 個消費點：--footer-inset-x／--giant-marquee-gap／--giant-marquee-fade（2026-08-20 grep 覆核修正：原註解誤植「唯一消費點為 --giant-marquee-fade」，實為三者共用非唯一） */ /* ── LAYOUT — 版面尺寸（base=1024–1440 欄；tablet/mobile 於各自 media block 覆寫， wide 與 base 相同不重複宣告。source: DESIGN.md `layout`， responsive 觸發寬度已套用修正清單 F 組：<=960→<=1023、<=420 刪除改 mobile 流體值） ── */ --container-max-width: 1680px; --header-max-width: var(--container-max-width); /* header 專屬上限，方向 E（2026-08-19）。預設綁定 container（結構上隨其變動，不會因日後改其一而漂移），≥1441 於下方 wide media block 覆寫為 1680px。唯一消費點：.site-header__bar。source: DESIGN.md layout.header_max_width */ /* container 公式（Unit 2 建 .container 時使用，非本檔輸出的 class）： width: min(100% - 2 * var(--inset-x), var(--container-max-width)); margin-inline: auto; */ --min-width: 320px; --inset-x: var(--space-9); --section-padding-block: 60px; --header-height: 102px; /* tablet/mobile 覆寫為 58px（2026-08-19 客戶 logo 換裝：Board Sea wordmark 高 34 + py space.3×2），wide 同 base 102px 本輪未動（figma-exact 源自舊 logo 塊，見 DESIGN.md layout.header_height，無公式可套新 logo，待 uiux 複核） */ --header-height-compact: 64px; /* 2026-08-19 B1 浮島第 3 段：72px→64px（base/wide）。 48(menu-toggle/logo layout box) + space.2(8)×2 = 64，與精簡態 padding-block 同步由 space.3(12)→space.2(8)（見 .site-header.is-stuck .site-header__bar 規則）。tablet/mobile 已恰好落在此下界（見各自 media block），四斷點精簡態高度自此統一為 64px。 */ --hero-height: min(800px, calc(100vh - var(--header-height))); --hero-height: min(800px, calc(100svh - var(--header-height))); /* svh 優先，上一行為不支援 svh 的 fallback */ --hero-text-padding: 120px var(--container-gutter-inline) 80px; /* F1（docs/spec-hero-carousel.md §2.10）：40px 原定義是「文字區↔控制區」 間距（此 token 名稱本義），非「標題↔副標」——後者現改用新 token --hero-title-gap（見下方 Unit 2 hero carousel token 區塊）。歸位後 本 token 消費點是 .hero__row 的 gap（.hero__slides 與 .hero__controls 之間），不再是 .hero__content 的 gap。 */ --hero-text-gap: var(--space-7); /* 2026-08-18 派工單 Unit 5：修 1024px 水平溢出（hero 輪播支順手發現，已用 git diff 排除非其造成，屬既有缺陷）。原固定 583px 577px：base(1024–1440) container = min(100vw − 2×120, 1200)，遠低於兩欄+gap 的固定需求 583+577+40=1200px，導致溢出——推算範圍不只 1024 這一點，整個 1024–1440 皆溢出（如 1300px 仍溢出約 140px），只有 ≥1441（container 封頂 1200，與 需求 1200 相等）才不溢出。改 583fr 577fr：≥1441 時可用寬度剛好等於 1160(=583+577)，等比分配後與原字面值逐 px 相同（wide 視覺零變化，非 僅「相近」）；1024–1440 隨可用寬度等比縮窄，不再溢出。.split > * 已有 min-width:0（見 .split 規則），fr track 的 auto 最小值不受內容撐開， 不需疊加 minmax(0, …fr)。tablet(≤1023) 既有 --split-columns:1fr 單欄 覆寫不受影響。 2026-08-18 追加（同日，S4 限制解除後）：--news-columns 有同型 bug （360px+800px+40=1200，同一公式），原本因「不得動 S4」未修；限制解除 後用同一招修正（360fr 800fr），理由與驗證方式同上，不重複展開。 .news > * 已有 min-width:0（見 .news 規則），同 .split 的安全網。 2026-08-20 追記（premise 後續變化，結論未重新驗證）：上方「≥1441 container 封頂 1200」的前提已隨 --container-max-width 後改為 1680 而變化——封頂點現落在視口 ≥1800（=1680+2×60）附近，≥1441 時 container 尚未封頂（例如 1441 下實際約 1321px，非 1200px）。這是 否代表本段「逐 px 相同」的結論在 1441–1799 區間不再成立，本次 註解修訂範圍內未實測驗證，僅忠實記錄前提已變動，留待另行確認。 */ --split-columns: 583fr 577fr; /* S2/S3 圖文雙欄；欄間 gap 為 space-7(40px)，非獨立 token */ --split-media-ratio: 3 / 2; --news-columns: 360fr 800fr; /* News 標題/清單雙欄；欄間 gap 亦為 space-7(40px) */ --news-row-height: 168px; --card-row-scroll-width: 380px; /* Services 捲動卡片寬，tablet 320px／mobile 280px */ --card-row-scroll-gap: var(--space-5); --rail-drag-threshold: var(--space-2); /* 8px。S5 卡片列滑鼠拖曳捲動門檻（2026-08-19 uiux drag-to-scroll 規格 §改什麼 A）：4px grid 上緣對齊主流 touch-slop 8–10px，取 上緣因整卡為 stretched-link（.card__cta::after 撐滿整卡），誤觸成本是整頁跳轉。 四斷點單一值，無 media query 覆寫。唯一消費點：site.js S5 rail IIFE（經 getComputedStyle 讀取，沿用 --hero-autoplay-interval 既有先例，非另存 JS 常數）。 */ /* D39（docs/spec-s5-carousel-2026-08-19.md §2 缺陷 1/2）：.card-rail 右側出血用 padding 錨定，取代主規格 ④「邊界」列出、但兩個都已被 實測推翻的候選手法（margin-right:calc(50%-50vw) 因 scrollbar-gutter: stable 恆定溢出 7.5px；負 margin 在 1920 差 232.5px 到不了視口邊緣）。 --container-gutter-inline 是 .container 公式 width:min(100% - 2*inset, cap) 的代數補數，全程零 vw、零負水平 margin，四斷點自動成立；唯一前提是消費端（.card-rail）與 .container 共用同一個 containing block，即 .card-rail 必須是 .section 直接 子元素（不再收在 .container 內），見下方 .card-rail 規則與 HTML。 --rail-trailing-inline 取代主規格 V10（該驗收點字面實作需要隨視口 連續變動的 padding，1440 下 925px、1920 下 1165px，技術上無法 token 化也視覺上是壞設計），改判「末卡右緣距視口右緣 = --inset-x」。 2026-08-20 追記：--rail-trailing-inline 現已改指向 --container-gutter-inline（見下方 token 定義，非本段原述的 --inset-x 直接值）——兩者僅在容器未封頂（視口寬度未達 --container-max-width 上限）時數值相等；容器封頂後 --container-gutter-inline 依 max() 公式變大以貼齊容器右緣，「末卡右緣距視口右緣 = --inset-x」僅在未 封頂視口下成立，非全斷點恆等，上段原意保留供沿革參考。 */ --container-gutter-inline: max(var(--inset-x), (100% - var(--container-max-width)) / 2); --rail-trailing-inline: var(--container-gutter-inline); --card-row-grid-columns: 4; /* In-numbers 4 欄，tablet 2 欄／mobile 1 欄 */ --card-row-grid-gap: var(--space-3); --footer-inset-x: var(--space-11); --footer-inset-block: var(--space-10); --footer-columns: minmax(320px, 1fr) auto auto; /* 2026-08-18 修正 1024px 6px 溢出：原 120px/190px 固定欄寬改 auto（content-based track，天然貼合最長字串「Observability & Monitoring」不換行，且比原固定值窄，釋出的寬度剛好消除短缺，見 agent 回報計算）。tablet/mobile 行為見 rwd_behavior，未給literal覆寫值，Unit 2 建 footer 時實作 */ --footer-columns-gap: var(--space-10); /* z-index（source: DESIGN.md layout.z_index，全斷點恆定） */ --z-header: 100; --z-skip-link: 1000; --z-hero-scrim: 1; --z-hero-text: 2; /* ── RADIUS — primitive：4 階 × 4 斷點（下方為 base 欄， tablet/mobile/wide 於各自 media block 完整覆寫，非單調不可靠繼承） source: DESIGN.md `radius`，figma-panel-verified ── */ --radius-small: 12px; --radius-medium: 16px; --radius-large: 24px; --radius-max: 999px; /* 四斷點恆為 999，不覆寫 */ --radius-none: 0; /* 恆為 0，不覆寫 */ /* ── RADIUS — alias（frontend 只准引用這層，不准直接摸階名） ── */ --radius-alias-control: var(--radius-max); /* 所有控件：按鈕/chevron/tag/carousel */ --radius-alias-media: var(--radius-medium); /* 短邊 ≥133px 的攝影媒體 */ --radius-alias-media-sm: var(--radius-small); /* 短邊 <133px 的攝影媒體（如 news 縮圖） */ --radius-alias-panel: var(--radius-large); /* 浮層／面板：mobile menu 展開面板 */ --radius-alias-flush: var(--radius-none); /* full-bleed 區帶、hairline、頁面容器 */ /* ── ELEVATION — Figma 變數集零陰影 → hairline 語言（source: DESIGN.md `elevation`） ── */ --elevation-level0: none; --elevation-level1: 0 0 0 1px var(--border-hairline); --elevation-level2: var(--elevation-level0); /* 已依修正清單 D-g 收斂：2x 圖目視卡片/News 灰底上無可見投影 */ /* level3（D34，2026-08-19 header stuck-glass）：解除 UNVERIFIED_PENDING_PNG 佔位。 全站第一個 box-shadow 宣告，授權來源為用戶 2026-08-19 直接指示「帶一點自然的陰影」。 兩層：接觸陰影（0 1px 2px，α.06，邊緣定義）+ 投射陰影（0 10px 24px -8px，α.14， 負 spread 使可見範圍收在下方約 14px）。色相 rgb(0,23,62) = color.brand.900 RGB 三元組，非純黑——淺色/玻璃表面上純黑陰影讀成髒灰，跟隨品牌深色軸才是同一條色溫紀律。 blast radius：本輪唯一消費點 .site-header__bar::before（2026-08-19 B1 第 2 段已將此選擇器 由 .site-header::before 搬遷至此），不得套用 nav-overlay panel 或卡片。 */ --elevation-level3: 0 1px 2px rgba(0, 23, 62, 0.06), 0 10px 24px -8px rgba(0, 23, 62, 0.14); --elevation-text-shadow-hero: 0 2px 2px rgba(0, 0, 0, 0.5); /* 原稿硬寫值，不計入對比達標 */ --elevation-backdrop-blur-header: blur(20px); /* A2 第 4 段（2026-08-19，D40）：10px→20px， 唯一消費點為下方 --header-stuck-backdrop（已 grep 確認全檔僅此一處消費），覆寫原 figma-exact 來源值 10px（Menu backdrop-blur-[10px]），授權來源見 DESIGN.md D40 */ /* ── MOTION（source: DESIGN.md `motion`，Figma motion context 未取得，皆為 derived） ── */ --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1); --motion-easing-carousel: cubic-bezier(0.22, 0.61, 0.36, 1); --motion-easing-linear: linear; /* 全站微動態規格 §1.3：僅 footer marquee 循環位移用此曲線 */ --motion-easing-glass: var(--motion-easing-standard); /* D45（2026-08-19）：具名別名， 值＝--motion-easing-standard，cubic-bezier(0.4, 0, 0.2, 1)。本 token 曾短暫定義為 cubic-bezier(0.34, 1.56, 0.64, 1)（overshoot 實際 9.78%，非原估 8%），用戶實測回報 「彈過頭，看起來很像故障」後撤回。機械根因：反向動畫（離開 stuck）時 padding-block-start 與 border-radius 的值域下限為 0，overshoot 目標為負值，被 CSS clamp 到 0——280ms 動畫中有 176.6ms（63%）完全凍結，同時 min-height／logo scale 仍在越界回彈，兩者不同步讀成故障。永久禁令：禁止再將本 token 定義為任何 y 控制點 超出 [0,1] 的曲線（含 overshoot／back-ease 系）。保留獨立 token（而非直接引用 --motion-easing-standard）是為了 header 精簡態曲線可單獨調整，不必同動 5 條消費 規則。 */ --motion-duration-hover: 160ms; --motion-duration-press: 120ms; --motion-duration-menu: 280ms; --motion-duration-slide: 240ms; /* 補落地：DESIGN.md L584 已定義 motion.dur_slide，此前 :root 缺漏；底線劃出／方向性形變用 */ --motion-duration-carousel: 480ms; --motion-duration-kenburns: 9000ms; /* D45（2026-08-19 hero motion pass）：Ken Burns 一輪時長， 超出既有動效階梯(120/160/240/280/400/480/2000)，見 spec-hero-motion-2026-08-19 §2.11.2 ——刻意 > autoplay 週期(6500ms)，Ken Burns 走 72.2% 就被換掉，讀成「持續的」而非 「有始有終的」。reduce 下於下方 reduce block 歸零為 0.01ms。 */ --motion-duration-enter: 400ms; --motion-duration-count: 2000ms; /* D29 減速（2026-08-19，原 1200ms）。 = 5 × --motion-duration-enter(400ms)，維持落在動效階梯整數倍。 總時長 = 3×--motion-stagger(180) + 400 + 2000 = 2580ms < 5000ms → WCAG 2.2.2 免除維持，不需暫停鍵。 ⚠️ 硬上限 4420ms（總時長 5000ms）；工程上限 4000ms（留 420ms 餘裕）。 越過即必須加暫停控制項，見 docs/spec-s6-stat-motion.md §2-A。 */ --motion-stagger: 60ms; --motion-transform-enter: translateY(12px); --motion-press-offset: 1px; /* 全站微動態規格 §1.4：active 按下位移，統一 token 化；prefers-reduced-motion 下於安全網歸零為 0 */ /* ── BORDER / FOCUS RING — 全站恆定值，原散落於每個元件的 5 態定義中， 在此集中為 token（值未變，僅去重複；source: DESIGN.md 各 component.*.focus 一致寫法 與「極端對比規則」第 5 條「:focus-visible 一律 3px ring + 2px offset」） ── */ --border-width-hairline: 1px; --focus-ring-width: 3px; --focus-ring-offset: 2px; /* ── COMPONENT TOKEN — added by Unit 2 (nav/header/hero). Single addition, appended inside the existing :root block per DESIGN.md 交接契約 硬約束⑨ (single styles.css / single :root — not a second :root block). Value is a literal spec value from DESIGN.md `component.footer.column_heading` (uppercase label letter-spacing), not derived from an existing token. Reused here by the nav-overlay "Services" eyebrow (same role as the future footer SERVICES column heading — see Unit 2 report 觀察 for why). ── */ --letter-spacing-label-wide: 0.08em; /* HERO 遮罩 gradient——2026-08-19 用戶急件覆寫（原 DESIGN.md「極端對比 規則」字面公式 linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.70) 38%, rgba(0,0,0,0) 62%) 已停用，非刪除，見下）。 用戶原話「Hero 做這樣是要幹嘛 完整放不就好了」——原公式是滿版垂直 漸層，從底部 88% 黑一路到 62% 高度都還有明顯黑，全寬覆蓋，導致下半 部整片看不清圖。改為 bottom-left 錨定的橢圓 radial-gradient：只在 文字所在的左下角加深，右側／上方留給圖本身。峰值透明度也從 0.88 降 到 0.75、中段從 0.70 降到 0.40，退場停點從 62% 提早到 70%（橢圓半 徑百分比，非滿版高度百分比，實際覆蓋面積遠小於原案）。 ⚠️ 與 DESIGN.md「極端對比規則」字面公式已不一致，需回寫 DESIGN.md （見 frontend 報告的 SCOPE-DELTA／需回寫清單），本檔不動 DESIGN.md。 對比度未經量測（UNVERIFIED，需 QA 覆核 AA）。 */ /* 2026-08-19 用戶原話「你Hero做這樣是要幹嘛 完整放不就好了」：原值 ellipse 90% 80% 幾乎罩滿整個 hero，底圖下半部被洗成一片黑。收緊為 只覆蓋左下文字塊的範圍，讓底圖完整可見；α 起點微升補償縮小的覆蓋 面積，標題仍有遮罩保護。對比未量測（UNVERIFIED，待 QA 覆核 AA）。 */ /* 2026-08-20（daniel）：桌機改用與小螢幕**相同**的滿版線性漸層。 原因：桌機原本是錨在左下角的橢圓 radial，右半邊底緣 α=0，所以 hero 底緣 與下方 S2（實測背景 rgb(0,0,0)）之間是**硬邊**；≤1023px 因為換成滿版 linear 才剛好有過渡，變成大小螢幕不一致。 ⚠️ 本檔原註解記載 2026-08-19「用戶急件覆寫」否決了滿版 linear （原話「Hero 做這樣是要幹嘛 完整放不就好了」）。daniel 2026-08-20 澄清 那不是**客戶**的意見，是 Dawa 那邊的內部稱呼，不構成約束——故改回滿版。 原 radial 的值保留在 git 歷史（本 commit 之前）。 值與 ≤1023px 的覆寫**逐字相同**，所以跨越 1024px 斷點時不會有跳動。 ≤768px 仍有自己的一組（停點 55%/80%），那是為了直幅版位另外調過的。 */ --hero-scrim-gradient: linear-gradient( to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.70) 45%, rgba(0, 0, 0, 0) 70% ); /* HERO 底圖 focal position —— object-position 錨點。 F4/D20（docs/spec-hero-carousel.md §2.10, §6 YAML `hero_bg_position`）： 舊值錨定已作廢的單張 plexus 素材裁切座標（docs/hero-bg-spec.md 該碼自 己已標失效）。D20 把 art-direction 由 4 家族收斂為 2 家族（L 1.80:1／ P 0.67:1，object-position 取代裁切差異）后，四階改為置中值：wide 用 50% 85%（3.2:1 框由 1.8:1 圖 cover，垂直裁 44%，85% 延續原 wide 組 「取下半段、排除上方尖峰亮區」意圖，非 100% 是避免底緣切齊產生硬邊）； base/tablet/mobile 皆置中（各自的裁切幅度小或資產本身已是目標比例， 見規格 D20 附表逐項理由）。三張 slide 共用同一組值；若個別 slide 的 C4 驗收失敗，用 .hero__slide-media[data-slide="N"] 覆寫，禁 inline style（規格 assets.hero_bg_position._per_slide_override）。 */ --hero-bg-position-wide: 50% 85%; --hero-bg-position-base: 50% 50%; --hero-bg-position-tablet: 50% 50%; --hero-bg-position-mobile: 50% 50%; /* ================================================================ COMPONENT TOKEN — HERO CAROUSEL（Unit 2, 2026-08-18） source: docs/spec-hero-carousel.md §6 YAML + §7 token 表，逐字轉錄。 新增 9 個：chevron 3 + surface-on-dark-subtle 3 + title-gap + controls-gap + counter-width。動效沿用既有 --motion-* token（見下方 COMPONENT LAYER 區塊消費處），不新建同義 duration/easing token—— 規格自己標註未親眼confirm過那組變數名（UNVERIFIED），本檔核對後確認 實際名稱為 --motion-duration-{hover,press,carousel,enter}／ --motion-easing-{standard,exit}／--motion-stagger／ --motion-transform-enter（皆已存在於本檔上方 MOTION 區塊）。 ================================================================ */ --hero-chevron-width: 72px; /* D18：72×72 figma-exact 與 2x 圖目視橫向膠囊互斥， 套 D7 先例（漢堡 48×40→48×48）取交集：寬留 72，高抬到觸控地板 44 */ --hero-chevron-height: 44px; --hero-chevron-icon-size: 16px; --surface-on-dark-subtle: rgba(255, 255, 255, 0.10); /* chevron default bg */ --surface-on-dark-subtle-hover: rgba(255, 255, 255, 0.20); --surface-on-dark-subtle-active: rgba(255, 255, 255, 0.28); --hero-title-gap: var(--space-3); /* F1：標題↔副標，2x 圖目視 9-14px（±5px）， 修正現行誤用 --hero-text-gap(40px) 的缺陷 */ --hero-controls-gap: var(--space-5); /* 計數器 ↔ chevron 對之間 */ --hero-kenburns-from: 1.02; /* Ken Burns 起點 scale（zoom-in 組）／終點（zoom-out 組）， spec-hero-motion-2026-08-19 §2.11.1。兩端都 >1.0 是刻意的——終點取 1.0 會讓 object-fit: cover 的邊界與元素 box 貼齊，次像素捨入可能露 1px 底色縫。reduce 下於 reduce block 歸零為 1。 */ --hero-kenburns-to: 1.06; --hero-autoplay-interval: 5000ms; /* 自動切換週期（每張停留時間，不含轉場時長），行為參數非 motion duration。site.js 用 getComputedStyle 讀本 token（而非另存 JS 常數），避免兩處數字 漂移。2026-08-19 用戶原話「Hero每隔5秒自動輪播」明確指定 5000ms，取代原 6500ms（舊值來源 spec-hero-carousel.md，本次未回寫該 spec，見任務報告 SCOPE-DELTA）。 */ --hero-counter-width: 7ch; /* 固定寬，數字更換不得推擠版面 */ --hero-video-load-timeout: 8000ms; /* docs/spec-hero-video-2026-08-20.md §2.9：8 秒內未進 playing 視為 unavailable。行為參數非 motion duration，沿用 --hero-autoplay-interval 既有先例—— site.js 用 getComputedStyle 讀本 token，不在 JS 裡寫魔術數字。不得進 reduce block 歸零。 */ /* ================================================================ COMPONENT TOKEN — Batch B1 addition (S2–S6 + Footer 共用 atom 層) source: docs/spec-s2-s6-components.md §A-5（uiux 2026-08-18 產出）， 逐字轉錄，未重新推導／未「優化」任何值。追加於既有 :root 尾端， 未開第二個 :root（DESIGN.md 交接契約 硬約束⑩）。 誠實揭露：規格 VERDICT / TOKENS / ENDPOINTS 三處皆自稱「新增 41 個 token」，但下方 A-5 原始 css 區塊逐條實數為 47 個（逐類重新加總： 1+3+1+3+13+4+4+3+4+5+2+4 = 47，非 41）。判斷為規格自己的加總誤差， 不是缺值待發明——每條都有完整推導依據與實測比值。故全部 47 條照抄 不砍，差異已於本批回報顯著標出，不靜默吞掉。 ── */ /* ── surface（新，補 DESIGN.md 只有一個 inverse 的缺口）── */ --surface-inverse-deep: var(--color-neutral-950); /* S2 黑帶；UNVERIFIED，若 quality 取樣證實為 #00173E， 改引用既有 --surface-inverse、刪本 token；frontend 不得自行改，回報。 */ /* ── on-inverse 文字階層（新）── */ --text-secondary-on-inverse: var(--color-neutral-400); /* 11.75:1 對 #00173E、13.8:1 對 #000000。 表面鎖定：對白底僅 1.42:1 —— 只准用在 .section--dark / .section--navy 內， 淺底使用即為驗收失敗（DESIGN.md 交接契約 硬約束⑧，驗收點 2）。 */ --text-eyebrow: var(--color-accent-600); /* 6.02:1 白 / 5.42:1 #F3F3F3 */ --text-eyebrow-on-inverse: var(--color-accent-200); /* 16.2:1 對黑 / 13.6:1 對 navy */ /* ── hairline on dark（新）── */ --border-hairline-on-inverse: rgba(255, 255, 255, 0.10); /* 1.32:1 對 navy、1.21:1 對黑，與淺底 1.22:1 同級。 不可直接用 #E8E8E8：對 #00173E 是 14.57:1，那是一條白線不是分隔線。 */ /* ── section 節奏（新）── */ --section-head-gap: var(--space-4); /* eyebrow→title 16px */ --section-head-space-after: var(--space-9); /* head→內容 60px，與 section padding 同數字 */ --prose-stack-gap: var(--space-5); /* title→段落→CTA 24px */ /* ── button（新，13 個）── */ --btn-padding-block: var(--space-3); /* 12，硬下限（mobile 44px 觸控餘裕 0），不得再減 */ --btn-padding-inline: var(--space-5); /* 24 */ --btn-gap: var(--space-2); --btn-radius: var(--radius-alias-control); --btn-icon-size: 16px; --btn-primary-bg: var(--color-brand-900); --btn-primary-bg-hover: var(--color-brand-800); /* 13.97:1 */ --btn-primary-bg-active: var(--color-brand-950); --btn-primary-fg: var(--color-neutral-100); --btn-on-inverse-bg: var(--color-neutral-100); --btn-on-inverse-bg-hover: var(--color-accent-100); /* 16.19:1 */ --btn-on-inverse-bg-active: var(--color-accent-200); /* 13.75:1 */ --btn-on-inverse-fg: var(--color-brand-900); /* ── media（新，4 個）── */ --media-ratio: var(--split-media-ratio); /* 3/2，複用既有值不另立數字 */ --media-radius: var(--radius-alias-media); --media-radius-sm: var(--radius-alias-media-sm); --media-fallback-bg: var(--surface-subtle); /* ── media--1x1（新，1 個，D37 S5 專用，docs/spec-s5-redesign.md §8.5）── 單一消費點 .media--1x1 的 --media-ratio 覆寫；不直接覆寫 --media-ratio 本身（全站僅 :root 定義一次、零覆寫的既有先例），改用具名 token 供 .media--1x1 間接指向，維持規格宣告的 token 名可追溯。 */ --card-media-aspect: 1 / 1; /* ── tag（新，4 個）── */ --tag-bg: var(--color-accent-100); --tag-fg: var(--color-accent-700); /* 7.55:1 */ --tag-padding-block: var(--space-1); --tag-padding-inline: var(--space-3); /* Figma 原稿 10 為 off-ladder → snap 到 4px grid */ /* ── badge（新，3 個）── */ --badge-bg: var(--color-neutral-100); --badge-fg: var(--color-brand-900); /* 17.6:1 */ --badge-padding-inline: var(--space-3); /* ── news row（新，4 個）── */ --news-thumb-width: 180px; /* derived：168 列高 − space.5×2 = 120 高 → 3:2 得 180 */ --news-row-padding-block: var(--space-5); --news-row-gap: var(--space-5); --news-arrow-size: 20px; /* ── card / index 浮水印（新，5 個）── */ --card-stack-gap: var(--space-3); --card-media-space-after: var(--space-5); /* 2026-08-18 QA 修正（qaB a11y FAIL，1.03:1）歷史脈絡：舊 --card-index-* 三個 token（實心 64/56/48px、rgba(255,255,255,0.40)、單一 inset）與 這段對比反解過程，已隨 2026-08-19 S5 重新設計（D38， docs/spec-s5-redesign.md §4 + §9）整批撤回——左下實心浮水印改為 右下空心描邊，對比機制從「填色 alpha vs 照片像素」換成「描邊 alpha vs §3 素材亮度門檻的 3:1 反解」，舊推導不再適用，新推導見規格 §3。 新 6 個 token 如下。 */ --card-ordinal-size: 88px; /* wide/base 同值；tablet 74 / mobile 64，見下方兩個既有 media block 覆寫 */ --card-ordinal-stroke-width: 2px; /* ≥769；mobile 覆寫 1.5px，見下方 mobile media block */ --card-ordinal-stroke: rgba(255, 255, 255, 0.55); --card-ordinal-fallback-fill: rgba(255, 255, 255, 0.18); /* @supports 不支援 -webkit-text-stroke 時的實心分支 */ --card-ordinal-inset-inline-start: 77%; --card-ordinal-inset-block-end: var(--space-1); --card-ordinal-scrim-gradient: linear-gradient(to top left, rgba(0, 0, 0, 0.45), transparent 55%); /* D38 §3 逃生口專用，.media--ordinal-scrim 消費，硬約束①禁止 :root 外 hardcode */ /* ── stat（新，2 個）── */ --stat-padding-block: var(--space-3); /* 2026-08-19 uiux S6 reshoot C4：32→12px，分隔線長度精確等於參考圖「內容+24px」，見任務報告 */ --stat-value-space-after: var(--space-3); /* ── stat 新增（本 pass，3 個，source: uiux S6 reshoot spec §7-A）── */ --stat-value-fg: var(--color-accent-200); /* C2：參考圖數字為淺藍，對 #00173E 實算 13.55:1（大字門檻 3:1 ✓） */ --stat-label-space-after: var(--space-4); /* C6：label→badge 獨立為 16px，與 value→label 12px 分層 */ --stat-label-min-block-size: calc(2 * var(--type-role-meta-line-height)); /* C5：鎖兩行高（44px@base），四欄 badge 底緣恆對齊 */ /* ── footer（新，4 個）── */ --footer-column-gap-block: var(--space-4); /* 22 行高 + 16 = 38px 節奏，由 .link-list（C13）消費 */ --footer-statement-max-width: 384px; /* figma-exact，Frame 3464 實測寬 */ --giant-wordmark-size: clamp(64px, 5.5vw, 88px); /* spec-footer-marquee-revision-2026-08-19 §7 T2 裁決值；mobile 覆寫見下方既有 media block */ --giant-wordmark-color: var(--text-primary); --giant-wordmark-letter-spacing: -0.01em; /* 修正方向錯誤：88px 曾比 56px 的 h2 還鬆（DESIGN.md type_scale.h1.ls_rule） */ --giant-wordmark-line-height: 1.15; /* 取代舊 .giant-wordmark 的字面 line-height:1（垂直捲軸根因之一） */ /* ── giant-marquee（跑馬燈動效，新，6 個）：duration/copies 為 8 句標語版 重算值，與 spec-footer-marquee-revision-2026-08-19.md D42-D44（單句×5份） 不同——用戶第三次原話「上面放一些適合的標語」（複數）推翻單句重複的 架構，Dispatcher 裁決 frontend 直接依同一公式重算，非規格原文數字， 推導見交接報告。mobile 覆寫見下方既有 media block。 ── */ --giant-marquee-duration: 98s; /* 8句串接後單位寬 ÷ 83px/s（原檔錨定速度，沿用不變） */ --giant-marquee-gap: var(--space-11); --giant-marquee-copies: 3; /* (N-2)×單位寬 ≥ 3440 視口，N=2 時 0 恆不成立，N=3 起才成立 */ --giant-marquee-fade: var(--space-11); --giant-marquee-step: calc(-100% / var(--giant-marquee-copies)); /* ── nav-overlay 右側面板（2026-08-18 派工單：用戶回報彈出選單應為右側面板、 非全螢幕；寬度 372px 為用戶直接裁決值，非 Figma/量測值——原稿 nav-overlay.png 面板寬度本身標 UNVERIFIED（單張截圖無面板外像素可供 判定左緣位置，見任務報告 §1），無法從圖片精算，此數字由用戶口頭裁定。 獨立成一個字面 px token，不套用 --space-* 階梯（372 非 4px grid 倍數， 屬本元件專屬值），比照既有 --news-thumb-width / --card-row-scroll-width 等 LAYOUT 區 literal px 慣例。 ── */ --nav-overlay-panel-width: 372px; --nav-panel-inset-x: var(--space-6); /* 32px — 面板自有左緣，與頁面 --inset-x 解耦（Nav toggle 規格 §2.1）； ≤768 面板滿寬時改回全站唯一左緣，見下方 @media (max-width: 768px) 覆寫 */ /* ── Nav toggle 形變（source: docs/spec-nav-toggle.md §3，逐字轉錄，三數值不得四捨五入） ── */ --icon-hamburger-stroke: #443F3B; /* DESIGN.md color.reserved.dark_brown — 用戶 2026-08-17 就此用途裁示通過。 刻意保留獨立字面值、不改指向 --color-reserved-dark-brown：該 token 本身仍標記 quarantined 禁直接使用，此處是「已核准的單一用途」，非解除整體隔離 */ --menu-toggle-bar-shift: 6px; /* 兩線各自 y=13.5 / 25.5 收攏到共同光學中心 19.5，各走 6px */ --menu-toggle-bar-angle: 17.354deg; /* atan(7.5/24) = 17.3540°，與 menu-close.svg 的 matrix 反解斜率完全相同 */ --menu-toggle-bar-stretch: 1.0477; /* 50.2892/48，讓線旋轉後水平投影仍佔滿 48 */ /* Dispatcher 裁決 2026-08-18，非原稿量測值（原稿 nav-overlay.png 整張截圖 皆為面板內部，無面板以外像素可供量測 backdrop 有無/顏色/透明度，見任務 報告 §3）。命名比照既有 --surface-on-dark-subtle 慣例（語意型 surface 別名，非 component 前綴），供 nav-overlay backdrop 使用，值為 drawer backdrop 通用值。 */ --surface-scrim: rgba(0, 0, 0, 0.5); /* D38（docs/spec-s5-redesign.md §4 + spec-s5-carousel-2026-08-19.md）： 原「S5 服務卡左下 scrim」token（2026-08-18 追加授權，供 `.card > .media::before` 消費）已隨數字浮水印從左下實心搬到右下空心 描邊、原消費規則整條移除而一併撤除——理由與新逃生口位置見 .media--ordinal-scrim（定義於 .media--1x1 旁）。 */ /* ================================================================ COMPONENT TOKEN — HEADER STUCK-SCROLL GLASS（2026-08-19 派工單） source: uiux 回傳原文 §3-C／§3-G C7。用戶原話：「NAV 滾到下面才彈出 高度比較短的 NAV Logo也變小 NAV 背景 70%白的 液態玻璃 帶一點自然的陰影」 ================================================================ */ --header-stuck-bg: rgba(255, 255, 255, 0.70); /* D31：用戶裁決值 70%，不得改動 */ --header-stuck-backdrop: var(--elevation-backdrop-blur-header) saturate(1.8); /* saturate 非裝飾：70% 白只讓底下 30% 色度穿透，玻璃會讀成白紗覆蓋而非透視。原值 1.4 把感知色度補回約 42% 穿透水準；對比地板不受影響（最壞底 #000000 為無彩，saturate 對 無彩恆等變換），此性質不隨數值改變而改變。⚠️ WebKit bug 289800（backdrop-filter 吃不到 var()，至 2026-07-02 skill 查核仍 NEW 未修）——2026-08-19 第 1 段派工單已於 .site-header.is-stuck::before 改直寫字面值（DESIGN.md D36 例外條文；該選擇器已於 第 2 段搬遷為 .site-header.is-stuck .site-header__bar::before，字面值隨遷未變），此 token 仍為單一真相源，異動時須同步手動更新該處字面值。真機 iOS 渲染驗證仍待 quality（見驗收 G2），非本 token 定義本身的缺口。 2026-08-19 A2 第 4 段（D40）：1.4→1.8，隨主模糊 10px→20px 同步加大，數值為 uiux 規格 §3 方向 A2 直接給定（非本檔重新推導 42% 穿透公式），下方兩行字面值已同步更新。 */ --header-logo-scale-compact: 0.75; /* D35：transform:scale 而非改 width，避免 reflow 與 space-between 下 nav 橫移；transform-origin:left center 保左緣零位移（D1） */ /* 2026-08-19 用戶當面裁決撤回浮島（派工單「Header 去藥丸化」）：--header-stuck-detach （8px 脫離上緣）與 --header-stuck-tray-bg（D46 滿版托盤層 35% 白）兩個 token 與其 唯一消費規則已刪除。用戶原話：「網頁往下滾 就置頂寬度滿版就好 你想太多了 我沒有要 藥丸狀」。玻璃層歸位為單一滿版層（見 .site-header::before 規則），數值不變。 2026-08-19 用戶裁決簡化（P1-6 修復批，取代上一版 A2「漸層模糊 + 邊緣高光 + 厚度梯度」）： 原本這裡的 4 個 token（--header-glass-blur-edge／--header-glass-edge-mask／ --header-glass-specular／--header-glass-sheen）與其消費規則已移除，玻璃收斂為單層： 70% 白 + 字面值 blur(20px) saturate(1.8)。DESIGN.md 對應條目已成孤兒，待負責 DESIGN.md 的 agent 清理，見任務報告。 */ /* ================================================================ COMPONENT TOKEN — S4 NEWS ROW HOVER（2026-08-19 uiux pass） 授權來源：用戶原話「hover也太醜」。 具名參考：Stripe 清單列 hover（整列升到更高一階表面 + 內容有內距 + 不加投影） + Swiss rule-as-structure（線長 = 被標示內容的寬度）。 硬約束：本組禁任何帶 blur/offset 的 box-shadow —— --elevation-level3 的 blast radius 明文限定 .site-header::before（見本檔 :363-369）， --elevation-level2 已收斂為 none。下方 ring 為 0 0 0 1px， 零模糊零位移，屬 hairline 語言，不是 elevation。 ================================================================ */ --news-row-bg: var(--surface-subtle); /* #F3F3F3，＝ S4 .section--subtle 底色 */ --news-row-padding-inline: var(--space-5); /* 24px；≤768 覆寫為 space-4(16px)，見下方 media block */ --media-scale-hover: 1.04; /* 2026-08-19 用戶當面裁決極簡化 hover（派工單「NEWS hover 極簡化」）：用戶原話「news 的 Hover 這樣太 奇怪 圖片放大 箭頭 微動就好」。 --news-row-bg-hover／--news-row-radius／--news-row-ring-hover／--news-row-ring-rest 四個 token 與其消費規則（背景變色/圓角/外框 ring）已刪除。本 token 為新增的圖片 放大效果，4% 落在建議區間 3–5% 中段；沿用既有 --motion-duration-hover(160ms) + --motion-easing-standard，與同列箭頭 translateX 同一手勢同步（不用派工單建議的 280ms，因箭頭效果已用 160ms，同一 hover 手勢不宜拆兩個時長）。消費點： .news-row__media .media__img（見下方規則）。 */ } /* ================================================================ @FONT-FACE — 三支自託管字型（source: DESIGN.md font, loading_policy） 相對路徑，禁 CDN；latin subset；Marcellus 僅 400（單一字重，faux bold 由下方 base 區 html{font-synthesis:none} 統一擋下）；Albert Sans 三個 字重共用同一份 variable 字型檔（wght 軸，DESIGN.md font.body.files 首選方案，非靜態三檔 fallback，src 相同、font-weight 各自宣告，由瀏覽器 依 wght 軸插值渲染，Google Fonts 對 variable 字族的標準服務手法）； Inter 僅 700（stat_huge 專用，靜態單檔，見修正清單 E1）。 file:// 協定下相對路徑一樣可解析，見 DESIGN.md loading_policy.v。 ================================================================ */ @font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/marcellus-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Albert Sans — 一份 variable 檔，三個 @font-face 各自宣告離散 font-weight， 驗證見 U4 report（document.fonts 三態載入 + 視覺量測）。 */ @font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/albert-sans-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/albert-sans-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/albert-sans-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter — 僅 700，stat_huge 專用。tnum 特性須保留於字型檔本身（未經 pyftsubset 裁切，Google latin 分割不動 GSUB/layout 表）；實際 font-feature-settings 套用在 --type-scale-stat-huge-font-feature-settings token（本檔 :root 區塊已定義），於 stat_huge 元件建立時引用——該元件 不在本次範圍，本檔只確保字型檔支援 tnum（見 U4 驗證）。 */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/inter-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ================================================================ BREAKPOINT OVERRIDES — desktop-first + 單一 min-width（wide） source: DESIGN.md breakpoints._cascade。四個模式各自完整宣告 radius 與 type，不依賴繼承（tablet 低於 mobile，非單調）。 ================================================================ */ /* ── TABLET：769–1023（source: DESIGN.md breakpoints.tablet / rwd_behavior.tablet） ── */ @media (max-width: 1023px) { :root { /* type_scale — 完整覆寫，不得只寫「有變的」 */ --type-scale-h1-size: 72px; --type-scale-h1-line-height: 78px; --type-scale-h2-size: 48px; --type-scale-h2-line-height: 62px; --type-scale-h3-size: 34px; --type-scale-h3-line-height: 48px; --type-scale-h4-size: 22px; --type-scale-h4-line-height: 32px; --type-scale-h5-size: 17px; --type-scale-h5-line-height: 27px; --type-scale-h6-size: 13px; --type-scale-h6-line-height: 21px; --type-scale-body-size: 14px; --type-scale-body-line-height: 23px; --type-scale-caption-size: 12px; --type-scale-caption-line-height: 21px; /* radius — 完整覆寫（三階皆低於 mobile 欄，刻意非單調，照抄不修正） */ --radius-small: 10px; --radius-medium: 14px; --radius-large: 20px; /* layout（觸發寬度已套用修正清單 F 組：原 <=960 → <=1023） */ --inset-x: var(--space-9); --section-padding-block: 48px; --header-height: 58px; /* 2026-08-19 客戶 logo 換裝：34(wordmark) + space.3(12)×2，見 :root 同名 token 註解 */ --header-height-compact: 64px; /* 2026-08-19 header stuck-glass：48 + space.2(8)×2 = 64，恰等於 min-height */ --hero-height: min(640px, calc(100vh - var(--header-height))); --hero-height: min(640px, calc(100svh - var(--header-height))); --hero-text-padding: 80px var(--container-gutter-inline) 56px; /* D21（docs/spec-hero-carousel.md §2.6/§2.10）：加控制列後文字塊頂緣 上移，實算距 hero 底 37%，原 38% 透明停點是骰邊緣 → 移到 70% 取得 餘裕。α 值本身未動（頂緣仍 0.88、中段仍 0.70），只動停點百分比， hero-bg-spec §4 硬約束 2/3 未被違反。 */ --hero-scrim-gradient: linear-gradient( to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.70) 45%, rgba(0, 0, 0, 0) 70% ); --split-columns: 1fr; /* 單欄，圖先文後，取消鏡射 */ --news-columns: 1fr; --card-row-scroll-width: 320px; --card-row-grid-columns: 2; /* D38（docs/spec-s5-redesign.md §7）：Services 卡片數字，tablet 階降級。 原 Batch B1 的 --card-index-size 已隨 D38 撤回，改為 --card-ordinal-size。 */ --card-ordinal-size: 74px; /* 2026-08-19 S4 news-row hover pass（R6）：斷點完整宣告慣例，不依賴繼承 */ --news-row-padding-inline: var(--space-5); } } /* ── MOBILE：375–768（source: DESIGN.md breakpoints.mobile / rwd_behavior.mobile） ── */ @media (max-width: 768px) { :root { /* type_scale — 完整覆寫 */ --type-scale-h1-size: 66px; --type-scale-h1-line-height: 72px; --type-scale-h2-size: 50px; --type-scale-h2-line-height: 58px; --type-scale-h3-size: 26px; --type-scale-h3-line-height: 44px; --type-scale-h4-size: 20px; --type-scale-h4-line-height: 23px; --type-scale-h5-size: 16px; --type-scale-h5-line-height: 24px; --type-scale-h6-size: 12px; --type-scale-h6-line-height: 20px; --type-scale-body-size: 14px; --type-scale-body-line-height: 22px; --type-scale-caption-size: 12px; --type-scale-caption-line-height: 20px; /* radius — 必須顯式重設，不能繼承 tablet 的 10/14/20 */ --radius-small: 12px; --radius-medium: 16px; --radius-large: 24px; /* layout（修正清單 F 組：原 <=768:40px/<=420:24px 兩段階梯 → 單一流體 clamp） */ --inset-x: clamp(24px, 6.4vw, 40px); --nav-panel-inset-x: var(--inset-x); /* 面板滿寬時回到全站唯一左緣（DESIGN.md D1）。 僅此斷點覆寫——@media (max-width: 1023px) 不得加此行，tablet 面板仍是 372px 浮層 */ --section-padding-block: clamp(32px, 8.5vw, 40px); --header-height: 58px; /* 2026-08-19 客戶 logo 換裝，同 tablet 值：34(wordmark) + space.3(12)×2 */ --header-height-compact: 64px; /* 2026-08-19 header stuck-glass：同 tablet 值，比照專案「四斷點各自完整覆寫」慣例顯式重複 */ --hero-height: min(560px, calc(100vh - var(--header-height))); --hero-height: min(560px, calc(100svh - var(--header-height))); --hero-text-padding: 64px var(--container-gutter-inline) 40px; /* D21：加控制列後（此斷點控制列另起一行，文字塊頂緣升更多）實算距 hero 底 54%，原 62% 停點處 α 已歸零，標題實質無遮罩保護 → 移到 80% 取得餘裕。α 值未動，同上。 */ --hero-scrim-gradient: linear-gradient( to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.70) 55%, rgba(0, 0, 0, 0) 80% ); --news-row-height: auto; /* 圖上文下 */ --card-row-scroll-width: 280px; --card-row-grid-columns: 1; /* D38（docs/spec-s5-redesign.md §7）：Services 卡片數字，mobile 階降級； 描邊寬同階降級為 1.5px（≥769 為 2px，見上方 base 定義）。原 Batch B1 的 --card-index-size 已隨 D38 撤回，改為 --card-ordinal-size。 */ --card-ordinal-size: 64px; --card-ordinal-stroke-width: 1.5px; --giant-wordmark-size: clamp(48px, 12vw, 64px); /* spec-footer-marquee-revision §7 T2 mobile 值 */ --giant-marquee-duration: 144s; /* 8句串接後單位寬 ÷ 34px/s（原檔錨定速度，沿用不變） */ --giant-marquee-gap: var(--space-8); /* 2026-08-19 S4 news-row hover pass（R6）：mobile 降一階避免 375px 下內容區過窄 */ --news-row-padding-inline: var(--space-4); } } /* ── FLOOR GUARD：≤374（非 Figma 模式，320–374 的安全層，職權嚴格限縮） source: DESIGN.md breakpoints.floor_guard。只覆寫 h1/h2 size， 其餘一律照 mobile 模式，不得在此層改任何佈局/間距/圓角/元件規格。 ── */ @media (max-width: 374px) { :root { --type-scale-h1-size: 44px; --type-scale-h2-size: 44px; } } /* ── WIDE：≥1441（source: DESIGN.md breakpoints.wide / rwd_behavior.wide） 內容容器與 base 完全相同（container 仍封頂 1680（2026-08-20 由 1200 上修，見下方 LAYOUT 小節），不在此新增覆寫—— 交接契約硬約束①），type 與 radius 升一級；header 專屬上限另外覆寫 （方向 E，2026-08-19，見下方 LAYOUT 小節），NAV 因此可比內容容器寬。 ── */ @media (min-width: 1441px) { :root { --type-scale-h1-size: 82px; --type-scale-h1-line-height: 92px; --type-scale-h2-size: 64px; --type-scale-h2-line-height: 68px; --type-scale-h3-size: 50px; --type-scale-h3-line-height: 70px; --type-scale-h4-size: 26px; --type-scale-h4-line-height: 40px; --type-scale-h5-size: 20px; --type-scale-h5-line-height: 40px; --type-scale-h6-size: 14px; --type-scale-h6-line-height: 22px; --type-scale-body-size: 16px; --type-scale-body-line-height: 25px; --type-scale-caption-size: 14px; --type-scale-caption-line-height: 24px; --radius-small: 14px; --radius-medium: 18px; --radius-large: 28px; /* ── LAYOUT — header 專屬上限（方向 E，2026-08-19）。用戶在 headerCap 1680 / 1440 二選一中拍板 1680。落差公式 (headerCap−1200)/2＝240px 為理論值（滿視口寬），封頂後不隨視口 線性擴大——1920 與 2560 兩個視口的落差須完全相同，這是驗收點 1 的關鍵回歸判準。--container-max-width 本身不在此新增覆寫（交接契約硬約束①，現值 1680，見下方 2026-08-20 追記）。source: DESIGN.md layout.header_max_width 2026-08-20 追記：--container-max-width 之後已由 1200 改為 1680 （用戶顯性推翻 DESIGN.md D28 對方向 D 的否決，見上方 :root 定義）， 與 --header-max-width 現值相等。上方 (headerCap−1200)/2＝240px 的 落差公式與其理論值僅為歷史紀錄——header／container 現共用同一個 cap（1680）與同一條公式，四斷點左緣逐 px 相等，落差恆為 0（可由 本檔 :root 兩個 token 現值直接驗證）。 ── */ --header-max-width: 1680px; /* 2026-08-19 S4 news-row hover pass（R6）：斷點完整宣告慣例，不依賴繼承 */ --news-row-padding-inline: var(--space-5); } }