/* * 色票、圓角、間距一律用 design-tokens.css 的變數，這裡不寫死任何 hex * （唯一例外是 QR code 的白底，掃描率優先，不跟著主題走）。 * * 深淺色：表示淺色，深色是預設值——對應 design-tokens.css * 「深色是語意層預設、淺色是 -light 平行變數」的寫法。class 掛在是因為 * 決定主題的那段 script 在裡就要跑完，那時還不存在。 */ html.light { --color-bg: var(--color-bg-light); --color-bg-card: var(--color-bg-card-light); --color-text: var(--color-text-light); --color-text-muted: var(--color-text-muted-light); --color-accent-text: var(--color-accent-text-light); --color-brand-surface: var(--color-brand-surface-light); --color-brand-text: var(--color-brand-text-light); --color-brand-logo: var(--color-brand-logo-light); --color-glow-1: var(--color-glow-1-light); --color-glow-2: var(--color-glow-2-light); --shadow-card: var(--shadow-card-light); /* ⚠️ 淺色模式「整組改走 Secondary」是 Homepage 現行的做法，但線上的 design-tokens.css 還停在舊版（outline/border 仍是 Primary，而且根本沒有 --color-surface-glass-light）。在那份檔案補齊之前，這裡直接從 Secondary primitive 算出來——用 color-mix 而不是寫死 rgba，色階之後改了這裡會跟著動。等 design-tokens.css 同步之後，這一段就可以換回 var(--xxx-light)。 */ --color-accent: var(--secondary-700); --color-outline: var(--secondary-800); --color-outline-hover: color-mix(in srgb, var(--secondary-600) 22%, transparent); --color-border: color-mix(in srgb, var(--secondary-700) 45%, transparent); --color-surface-glass: color-mix(in srgb, var(--secondary-600) 20%, transparent); /* 實心按鈕淺色走 Secondary、深色走 Primary。淺色的每一階都比深色再深一階： Secondary 整條色階比 Primary 亮，直接對調的話白字疊上去過不了 WCAG AA。 */ --btn-face: var(--secondary-500); --btn-face-hover: var(--secondary-600); --btn-edge: var(--secondary-600); --btn-edge-hover: var(--secondary-700); --btn-text: var(--secondary-900); --btn-disabled-face: var(--secondary-200); --btn-disabled-text: var(--secondary-800); color-scheme: light; } :root { --btn-face: var(--primary-700); --btn-face-hover: var(--primary-800); --btn-edge: var(--primary-800); --btn-edge-hover: var(--primary-900); --btn-text: #ffffff; --btn-disabled-face: var(--primary-800); --btn-disabled-text: var(--primary-400); color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* 背景兩顆光暈 + 只長在光暈上的顆粒，跟系列其他專案同一套（比例、noise 參數都一致）。任何全頁容器都不要再上底色，會把光暈整片蓋掉。 */ body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; } body::before { background-image: radial-gradient(ellipse 53% 95% at 30% 5%, var(--color-glow-1) 0%, transparent 100%), radial-gradient(ellipse 53% 95% at 76% 95%, var(--color-glow-2) 0%, transparent 100%); } body::after { opacity: 0.15; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(ellipse 53% 95% at 30% 5%, rgba(0, 0, 0, 0.8) 0%, transparent 100%), radial-gradient(ellipse 53% 95% at 76% 95%, rgba(0, 0, 0, 0.8) 0%, transparent 100%); mask-image: radial-gradient(ellipse 53% 95% at 30% 5%, rgba(0, 0, 0, 0.8) 0%, transparent 100%), radial-gradient(ellipse 53% 95% at 76% 95%, rgba(0, 0, 0, 0.8) 0%, transparent 100%); } h1, h2 { margin: 0; line-height: 1.3; } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } /* ---------- 導覽列 ---------- */ .nav-pill { position: sticky; top: var(--space-2); z-index: 10; margin: var(--space-2) auto 0; width: min(600px, calc(100% - 2rem)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: var(--radius-pill); background: var(--color-surface-glass); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .nav-left, .nav-right { display: flex; align-items: center; gap: var(--space-1); min-width: 0; } .nav-right { flex-shrink: 0; } /* 左上是回系列首頁的品牌鈕。40px 見方跟右側控制項等高，兩邊的導覽列才會對齊。 */ .brand { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--color-brand-surface); transition: background 0.15s ease; } .brand:hover { background: var(--color-outline-hover); } .brand svg { width: 25px; height: 20px; fill: var(--color-brand-logo); } .nav-title { font-weight: 700; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 420px 是量出來的臨界點：導覽列扣掉標誌、規則、語言下拉（此時已縮到 124）、深淺色鈕與間距之後，剛好還能給標題 4 個中文字的寬度。再窄下去只會剩「現…」這種看不出是什麼的殘字，那還不如不顯示——標誌一樣連回首頁，頁面的 h1 也說明了這是什麼工具。 ⚠️ 別把這個值往上調：460px 那種明明還有一百多 px 空間的寬度也會被藏掉。 */ @media (max-width: 420px) { .nav-title { display: none; } } /* 語言下拉：外觀是外框式（透明底 + 描邊 + 跟頁面同色的文字），但**不套 .btn-outline**。 .btn-outline 帶 display: inline-flex，套在