/** * base.css — 設計代幣、reset 與排版基礎。 * * 顏色收斂成兩個色系(熔金橘 + 冷青),是照 1321 張封面的量測結果訂的: * 93% 的成品把有彩色控制在兩個以內,第三個色相開始就會顯髒。 * 原設計的彩虹漸層有三個色相(橘 30°/青 180°/紫 270°),在此收掉。 * * 主題:預設淺色; 切換成暗色。 */ /* ---------- 設計代幣 ---------- */ :root { /* 品牌兩色 */ --brand-warm: #f59022; --brand-cool: #3fb6c8; /* 表面與文字 */ --bg: #f7f5f3; --surface: #ffffff; --surface-soft: #fbfaf9; --line: rgba(24, 20, 16, 0.10); --line-strong: rgba(24, 20, 16, 0.16); --text: #17140f; --text-mid: #56504a; /* ★ 從 #8b8379 加深。原值對白底只有 3.74:1、對 --surface-soft 3.58:1, * 低於 WCAG AA 正文的 4.5:1 —— 而它用在 26 處的說明與標籤上。 * 光把字放大不夠,老花眼同時吃虧在對比。新值最差 4.71:1。 */ --text-dim: #767065; /* 狀態 */ --ok: #2f9e6f; /* 版面 */ --page-max: 1180px; --nav-height: 68px; --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; /* 陰影:淺色用暖調的低透明度,不用純黑 */ --shadow-card: 0 1px 2px rgba(24, 20, 16, 0.05), 0 12px 28px -12px rgba(24, 20, 16, 0.14); --shadow-card-hover: 0 2px 4px rgba(24, 20, 16, 0.06), 0 22px 44px -16px rgba(24, 20, 16, 0.20); /* 主視覺在該主題下的呈現 */ --art-opacity: 1; --art-blend: normal; /* 字級。★ 為 40 歲以上的視力訂的:正文 17px、最小 12.5px。 * 改之前全站 42 處字級硬值裡有 31 處在 13px 以下 —— 老花眼幾乎讀不到。 * 一律走代幣,要再調整就只改這七行。 * hero 大標與 wordmark 不在這套裡(它們是展示字,不是閱讀字)。 */ --fs-2xs: 12.5px; /* 微型:索引標、計數 */ --fs-xs: 13px; /* 標籤、單位 */ --fs-sm: 14.5px; /* 次要說明、提示 */ --fs-md: 15.5px; /* 可點的文字:按鈕、選項 */ --fs-base: 17px; /* 正文、輸入框 */ --fs-lg: 19px; /* 對話框標題 */ --fs-xl: 23px; /* 卡片主標 */ --font-sans: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } :root[data-theme="dark"] { --bg: #100e0c; --surface: #1a1714; --surface-soft: #211d19; --line: rgba(255, 246, 236, 0.10); --line-strong: rgba(255, 246, 236, 0.18); --text: #f6f2ec; --text-mid: #b3aaa0; /* 暗色同理:原值對 --surface-soft 只有 3.97:1。新值最差 4.67:1 */ --text-dim: #8f867b; --ok: #4cc98f; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 32px -14px rgba(0, 0, 0, 0.7); --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.45), 0 26px 52px -18px rgba(0, 0, 0, 0.8); /* 生成的主視覺是暖白底,暗色下用濾色混合只留發光處 */ --art-opacity: 0.78; --art-blend: screen; } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* ★ 作者樣式裡任何一條 display 都會蓋掉瀏覽器預設的 [hidden]{display:none}。 * `.field { display: block }` 就是這樣讓「已經 hidden 的欄位還看得見」—— * 實測 edit.js 把強度欄位設成 hidden,畫面上照樣顯示,使用者拉了一根 * 對 boogu 引擎完全無效的滑桿。用 !important 把它釘回去。 */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; /* 與 body 一起夾住出血元素:只加在 body 的話 html 仍會回報溢出 */ overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.65; -webkit-font-smoothing: antialiased; /* 主題切換時不要硬跳 */ transition: background-color 0.25s ease, color 0.25s ease; /* 出血用的 50vw 含捲軸寬度,會多出幾 px 的水平捲軸。 * 用 clip 而非 hidden —— hidden 會讓 body 變成捲動容器, * 連帶讓 nav 的 position: sticky 失效。 */ overflow-x: clip; } h1, h2, h3, p, ul { margin: 0; } ul { padding: 0; list-style: none; } img { display: block; max-width: 100%; height: auto; } svg { display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--brand-cool); outline-offset: 2px; border-radius: 4px; } /* ---------- 共用元件 ---------- */ .page { max-width: var(--page-max); margin: 0 auto; padding: 0 26px 96px; } .badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--fs-sm); color: var(--text-mid); white-space: nowrap; } .badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); } /* 寬螢幕:容器跟著放寬。 * * 固定 1180px 在 1900px 的螢幕上兩側各留 19% 的空邊距, * 左邊那條會被讀成「版面沒對齊」—— 尤其 hero 主視覺是滿版出血時, * 右邊到底、左邊卻退在裡面,重心就會往右倒。 */ @media (min-width: 1500px) { :root { --page-max: 1360px; } } @media (min-width: 1800px) { :root { --page-max: 1520px; } } /* 減少動態偏好:關掉所有轉場與動畫 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }