/* ============================================================================ 港町國際散策聯盟｜設計代幣 Design Tokens ---------------------------------------------------------------------------- 三套主題，用 切換： alliance 母站（首頁、翰品頁） 亞麻米白 ＋ 墨藍 ＋ 一點黃銅 daylight 港町時光列車 暖紙 ＋ 皮革棕 ＋ 港灣深藍 ＋ 赤陶 archive 港町異頻事務所 近黑 ＋ 黃銅 ＋ 檔案紙（沿用夜版已交付的色票） ⚠️ 色票是【方向提案】，不是已核定的品牌設定，隨時可以改。 ✅ 但以下是【硬規則】，改動前請先確認不會破壞無障礙： - 內文對比度 ≥ 4.5:1；大字（≥24px，或 ≥18.66px 且粗體）≥ 3:1 - 內文字級 ≥ 16px、行距 1.6–1.8 - 觸控目標 ≥ 44×44px，相鄰間距 ≥ 8px ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700;900&family=Noto+Sans+TC:wght@400;500;700;900&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* ---------- 字型（三套主題共用，全案不超過 2 套家族＋1 套等寬） ---------- */ --font-display: 'Noto Serif TC', 'Source Han Serif TC', 'Songti TC', serif; --font-body: 'Noto Sans TC', 'Source Han Sans TC', 'Microsoft JhengHei', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; /* ---------- 字級階層（clamp = 手機到桌機自動縮放） ---------- ⚠️ 不要直接照抄拉丁字母網站的字級。 中文是全形方塊字，同樣的 px 視覺重量遠大於拉丁字母。 照搬參考站的 h1 80px，換成中文就是過大。這一階是為中文重新定的。 2026-08-23 整體下修一階，把空間讓給行距與字距。 */ /* ---------- 縮放旋鈕 ---------- 整套字級都是從 --fs 換算出來的。想整體放大縮小，只改 --ui-scale 一個數字。 網址加 ?scale=0.9 可以即時試（會記住），?ui=1 會叫出畫面上的調整面板。 ⚠️ --size-body 有 16px 下限保護：縮放時正文不會低於無障礙門檻。 */ --ui-scale: 1; --fs: calc(16px * var(--ui-scale)); --size-body: max(16px, var(--fs)); --size-small: max(14px, calc(var(--fs) * .92)); --size-label: max(11px, calc(var(--fs) * .74)); --size-lead: clamp(max(16px, var(--fs)), 1.1vw, calc(var(--fs) * 1.12)); --size-h3: clamp(calc(var(--fs) * 1.02), 1.35vw, calc(var(--fs) * 1.14)); --size-h2: clamp(calc(var(--fs) * 1.22), 1.9vw, calc(var(--fs) * 1.44)); --size-h1: clamp(calc(var(--fs) * 1.40), 2.4vw, calc(var(--fs) * 1.75)); --size-display: clamp(calc(var(--fs) * 1.55), 3vw, calc(var(--fs) * 2.25)); --size-stat: clamp(calc(var(--fs) * 1.70), 2.6vw, calc(var(--fs) * 2.00)); /* ---------- 行長上限（中文排版最關鍵的一項） ---------- 一個全形中文字的寬度就是 1em，所以 30em ≒ 30 個中文字。 用 em 不用 px：字級變小時行長會自動跟著收窄。 */ --measure: 30em; --measure-narrow: 22em; /* ---------- 行距與字距 ---------- */ --leading-body: 1.85; --leading-heading: 1.5; --tracking-body: 0.035em; --tracking-heading: 0.04em; --tracking-display: 0.02em; --tracking-label: 0.18em; --tracking-mono: 0.14em; /* ---------- 間距刻度（8px 基準） ---------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; /* 區塊上下留白：手機與桌機不同 */ --section-y: calc(clamp(52px, 7vw, 96px) * var(--ui-scale)); /* ---------- 版面寬度 ---------- */ --w-content: 1140px; /* 對齊 410 的 Bootstrap container（≥1200px 時為 1140） */ --w-wide: 1440px; /* 滿版區塊 */ --w-read: 620px; /* 純閱讀段落，中文 22–30 字/行 */ /* ---------- 圓角與線 ---------- */ --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --hairline: 1px; /* ---------- 動態 ---------- */ --ease: cubic-bezier(.22,.61,.36,1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 640ms; /* ---------- 觸控（硬規則） ---------- */ --tap-min: 44px; /* ---------- z-index ---------- */ --z-nav: 100; --z-sticky: 90; --z-overlay: 200; } /* ========================================================================== 主題 A｜alliance — 母站（首頁、翰品酒店頁） 亞麻米白 ＋ 墨藍 ＋ 一點黃銅 黃銅刻意與夜版 brass-500 同值（#A9814D），做為母站與夜間活動的視覺接點 ========================================================================== */ [data-theme='alliance'] { --linen-50: #FAF7F0; /* 頁面底色（非純白，留住紙感） */ --linen-100: #F3EEE2; /* 次層、卡片底 */ --linen-200: #E6DFCE; /* 分隔線、邊界 */ --navy-900: #14212E; /* 內文字色（非純黑） */ --navy-800: #1B2E45; /* 主色 墨藍 */ --navy-600: #2F4A67; --brass-500: #A9814D; /* 強調色 黃銅：僅用於大字、線條、圖示 */ --brass-600: #8C6A3D; /* 黃銅的「可讀版」：小字一律用這個（4.62:1） */ --slate-600: #5A6672; /* 次要文字（5.49:1） */ --surface-page: var(--linen-50); --surface-card: #FFFDF8; --surface-raised: var(--linen-100); --surface-invert: var(--navy-900); --text-display: var(--navy-900); --text-body: var(--navy-900); --text-muted: var(--slate-600); --text-invert: var(--linen-50); --text-accent: var(--brass-600); --border-default: var(--linen-200); --border-strong: #CFC5AC; --border-accent: var(--brass-500); --accent: var(--brass-500); --accent-strong: var(--brass-600); --btn-primary-bg: var(--navy-800); /* 對 linen-50 = 12.9:1 */ --btn-primary-text: var(--linen-50); --btn-primary-hover:#132539; --focus-ring: 0 0 0 3px rgba(169,129,77,.45); --shadow-card: 0 1px 2px rgba(20,33,46,.05), 0 8px 24px rgba(20,33,46,.06); --image-overlay: rgba(20,33,46,.06); --scheme: light; } /* ========================================================================== 主題 D｜dossier — 母站的「檔案室」版（首頁、翰品酒店頁） 2026-08-22 依參考站 410號檔案室新增。 -------------------------------------------------------------------------- 這一套是把 alliance（亞麻米白）整個翻到近黑。取 410 的三個作法： 1. 近黑基底，但帶墨藍冷調 —— 不是純黑，母站的墨藍血緣留在底色裡 2. 暖白大字 —— 接住原本亞麻米白的紙感，不用刺眼的純白 3. 單一高明度強調色 —— 黃銅提亮到 #C9954E，全站只有它是亮的 ↩ 想換回亮色版：把 index.html 與 chateau.html 第 2 行的 data-theme="dossier" 改回 data-theme="alliance"。這個檔不用動。 ✅ 對比度全部用程式驗過，最低的一組是 .btn--ghost 外框 3.34:1（需 3:1） 文字類最低是警示色 5.16:1，內文 15.00:1。 ========================================================================== */ [data-theme='dossier'] { --ink-950: #101315; /* 頁面底：近黑，帶一點墨藍冷調 */ --ink-900: #161A1D; /* 卡片底 */ --ink-800: #1C2226; /* raised 區塊底 */ --navy-700: #2C4459; /* 墨藍：母站識別，用於結構與活動卡色調 */ --bone-100: #ECE6D9; /* 暖白內文（15.00:1） */ --bone-400: #98A1A8; /* 次要文字（7.10:1） */ --brass-400: #C9954E; /* 強調色 黃銅提亮版（7.01:1） */ --brass-300: #D8A85F; /* 強調色 hover（8.60:1） */ --alert-700: #D0685A; /* 警示（5.16:1） */ /* 大標改粗黑無襯線。410 的大標是粗黑 sans，明體在近黑底上撐不出那個力道。 ↩ 想換回明體大標：把下面這一行整行刪掉即可。 */ --font-display: 'Noto Sans TC', 'Source Han Sans TC', 'Microsoft JhengHei', sans-serif; --surface-page: var(--ink-950); --surface-card: var(--ink-900); --surface-raised: var(--ink-800); --surface-invert: var(--bone-100); --text-display: var(--bone-100); --text-body: var(--bone-100); --text-muted: var(--bone-400); --text-invert: var(--ink-950); --text-accent: var(--brass-400); --border-default: rgba(236,230,217,.14); --border-strong: #5C6A73; /* 3.34:1，按鈕外框看得見 */ --border-accent: var(--brass-400); --accent: var(--brass-400); --accent-strong: var(--brass-300); /* 410 的主 CTA 是深底上唯一的高明度色塊 */ --btn-primary-bg: var(--brass-400); --btn-primary-text: var(--ink-950); /* 7.01:1 */ --btn-primary-hover:var(--brass-300); --focus-ring: 0 0 0 3px rgba(201,149,78,.5); --shadow-card: none; /* 深色底不用外陰影，靠邊框與底色層次 */ --image-overlay: rgba(16,19,21,.30); --scheme: dark; } /* ========================================================================== 主題 B｜daylight — 港町時光列車 依已定案 CIS：02 港口材質編輯感 70% ＋ 01 時刻表現代主義 30% ========================================================================== */ [data-theme='daylight'] { --paper-50: #F8F3E9; --paper-100: #F0E8D7; --paper-200: #E2D7BF; --ink-900: #2A2620; /* 內文（非純黑） */ --leather-700: #6B4E32; /* 主色 皮革／舊紙 */ --harbour-800: #24455C; /* 輔色 冷錨：港、水、鐵件 */ --terracotta-600: #B4552F; /* 強調色（大字／線條用） */ --terracotta-700: #A34A28; /* 強調色的可讀版（小字用，5.28:1） */ --sand-600: #6E6558; /* 次要文字 */ --surface-page: var(--paper-50); --surface-card: #FDFAF3; --surface-raised: var(--paper-100); --surface-invert: var(--harbour-800); --text-display: var(--ink-900); --text-body: var(--ink-900); --text-muted: var(--sand-600); --text-invert: var(--paper-50); --text-accent: var(--terracotta-700); --border-default: var(--paper-200); --border-strong: #CFBE9C; --border-accent: var(--terracotta-600); --accent: var(--terracotta-600); --accent-strong: var(--terracotta-700); --btn-primary-bg: var(--harbour-800); --btn-primary-text: var(--paper-50); --btn-primary-hover:#1B3548; --focus-ring: 0 0 0 3px rgba(180,85,47,.4); --shadow-card: 0 1px 2px rgba(42,38,32,.06), 0 8px 24px rgba(42,38,32,.07); --image-overlay: rgba(42,38,32,.06); --scheme: light; } /* ========================================================================== 主題 C｜archive — 港町異頻事務所 完全沿用「港町頁板預售頁交付」已交付的夜版色票，不另創 ========================================================================== */ [data-theme='archive'] { --abyss-950: #05090A; --signal-900: #0B1214; --port-800: #14272B; --oxidized-600: #30484A; --archive-200: #D2C3A2; --brass-500: #A9814D; --alert-700: #78352F; --text-secondary:#8E958F; --surface-page: var(--abyss-950); --surface-card: var(--signal-900); --surface-raised: var(--port-800); --surface-invert: var(--archive-200); --text-display: var(--archive-200); /* 11.49:1 */ --text-body: var(--archive-200); --text-muted: var(--text-secondary);/* 6.52:1 */ --text-invert: var(--abyss-950); --text-accent: var(--brass-500); /* 5.66:1 */ --border-default: rgba(210,195,162,.22); --border-strong: var(--oxidized-600); --border-accent: var(--brass-500); --accent: var(--brass-500); --accent-strong: #C09A62; --btn-primary-bg: var(--brass-500); --btn-primary-text: var(--abyss-950); /* 4.62:1 */ --btn-primary-hover:#C09A62; --focus-ring: 0 0 0 3px rgba(169,129,77,.55); --shadow-card: none; /* 夜版規範：無外陰影，靠焦點光暈 */ --focus-glow: 0 0 40px rgba(169,129,77,.18); --image-overlay: rgba(5,9,10,.34); --scheme: dark; }