/* ╔══════════════════════════════════════════════════════════════════╗ ║ assets/theme.css ║ ║ Airtutor Academy — 全站設計 token（單一顏色來源） ║ ╚══════════════════════════════════════════════════════════════════╝ 點解要有呢個檔（2026-09-02） ────────────────────────────────────────────────────────────────── 數過：生產環境嘅 *.html + components/*.jsx 一共用咗 **268 個唔同 嘅顏色值**，全部寫死喺標籤同 JSX inline style 入面。Claude Design 交嚟嗰 18 個設計稿再多 154 個。兩邊加埋，同一個「淺藍灰邊框」就有 十一個唔同寫法（#E2E8F0 / #E6ECF4 / #E1E8F2 / #E3EAF4 / #E3EAF5 / #DEE8F6 / #EEF3FB / #EEF2FB / #EDF1F7 / #EFF3F8 / #F1F5FB）。 後果唔係「唔靚」，係「改唔郁」——老闆話要換個主色，就要喺幾百處 逐個搵。呢個檔就係要令佢變成改一次。 ⚠️ 點用 ────────────────────────────────────────────────────────────────── ① HTML 度加一行： ② CSS 入面寫 var(--at-brand)，唔好再寫 #071C68。 ③ JSX inline style 都用得： style={{ color:'var(--at-brand)' }} 唔使改結構，可以逐個 component 慢慢搬。 ⚠️ 唔准做嘅嘢 ────────────────────────────────────────────────────────────────── · **唔准喺呢度加「某一版專用」嘅色。** 一加就唔再係 token，係雜物房。 一版自己嘅色寫喺嗰版度。 · **唔准剷走下面任何一個變數。** 全部都係現時生產環境真係用緊嘅 值，剷咗就等於偷偷改咗某一版嘅外觀。 · **改一個值 = 全站一齊變。** 改之前諗清楚，改完要逐版睇一次。 命名：--at-<用途>-<深淺>。全部加 `at-` 前綴，避免同 KaTeX、Babel 或者將來引入嘅任何 CSS 撞名。 ============================================================ */ /* ── 品牌字型：Handel Gothic ────────────────────────────────────── 2026-09-03 全站改用「Airtutor Academy」字樣嗰陣搬咗嚟呢度。 本來每一版自己寫一次 @font-face —— home／login／signup／privacy／ learn／add 有寫，React 個 shell 嗰廿幾版冇。所以同一句 「Airtutor Academy」，首頁出 Handel Gothic，登入之後靜靜跌返 Inter，兩個款。放喺 theme.css 就全站一致（每版都 link 咗呢個檔）。 ⚠️ Handel Gothic 冇中文字，淨係用喺 logo 字樣，唔准攞去做標題 —— 中文會跌返後備字體，同一行中英文唔同款。 */ @font-face { font-family: 'Handel Gothic'; src: url('HandelGothic-Regular.ttf') format('truetype'); font-display: swap; } :root { /* ── 品牌色 ──────────────────────────────────────────────────── 深藍 #071C68 係全站品牌藍，標題、主要按鈕用佢。 ⚠️ 2026-09-03 換牌冇改呢隻色 —— 改咗就要逐處覆檢成二百幾個色值。 #1258A9 係連結同次要強調。兩隻都係現時生產環境用得最多嘅 品牌色（分別出現 103 次同 157 次）。 */ --at-brand: #071C68; /* 主色：標題、主按鈕底、logo 字 */ --at-brand-hover: #0E2978; /* 主按鈕 hover（生產現行值） */ --at-link: #1258A9; /* 連結、次要強調、圖表主線 */ --at-link-hover: #071C68; --at-brand-wash: #EEF2FB; /* 主色淺底：選中項、標籤底 */ --at-brand-line: #CFDCEF; /* 主色淺邊框 */ /* ── 「Airtutor Academy」字樣色 ──────────────────────────────── 2026-09-03 換牌，老闆喺三隻藍入面揀咗呢隻（就係舊 RK 字樣嗰隻）。 ⚠️ 全站每一個出「Airtutor Academy」字樣嘅位都要行呢個變數，唔好 再逐版寫死 —— 換牌之前七個位有六隻唔同嘅藍。 */ --at-wordmark: #0E6EB8; /* 品牌字樣專用，唔好攞去做第二樣 */ /* ── 文字 ────────────────────────────────────────────────────── 由深到淺四級。⚠️ --at-ink-4 對白底只有約 2.6:1 對比，**唔可以 攞去寫正文**，淨係用嚟寫已經有其他線索嘅次要字（例如已經有圖示 嘅標籤）。正文最淺只可以去到 --at-ink-3。 */ --at-ink: #0F172A; /* 正文、數字 */ --at-ink-2: #334155; /* 次要正文 */ --at-ink-3: #64748B; /* 說明文字、表頭 */ --at-ink-4: #94A3B8; /* 最淡：時間、單位、佔位 */ /* ── 底色同框線 ──────────────────────────────────────────────── --at-ground 係成版嘅底，--at-surface 係卡同表嘅面。 兩層底色（ground / ground-2）夠用，唔好再開第三層。 */ --at-ground: #F6F8FC; /* 頁面底 */ --at-ground-2: #F1F5F9; /* 分區底、表頭底 */ --at-surface: #FFFFFF; /* 卡、表、輸入框 */ --at-surface-2: #FAFBFD; /* 卡入面再淺一層（例如程式碼格）*/ --at-line: #E2E8F0; /* 標準框線（生產用得最多） */ --at-line-2: #CBD5E1; /* 較明顯嘅分隔線 */ /* ── 狀態色 ──────────────────────────────────────────────────── 三個狀態，每個一對「深字 + 淺底」。⚠️ 呢三對唔准攞去做裝飾 —— 見到綠就係「有貨／啱」，見到黃就係「整理中」，見到紅就係「錯／ 逾期」。學生已經學識咗呢套對應，用錯咗會誤導。 */ --at-ok: #15803D; /* 啱、已完成、有內容 */ --at-ok-wash: #DCFCE7; --at-warn: #B45309; /* 整理中、要留意 */ --at-warn-wash: #FEF3C7; --at-bad: #B91C1C; /* 錯、逾期、失敗 */ --at-bad-wash: #FEE2E2; /* ── 錢包（EXP／Credits）───────────────────────────────────── WalletPills.jsx 用緊嘅兩隻色。EXP 用琥珀、Credits 用青。 ⚠️ 兩隻色特登唔同 —— 學生要一眼分得出「賺返嚟嘅分」同 「用得幾多次 AI」係兩回事。 */ --at-exp: #B45309; --at-exp-wash: #FEF3C7; --at-exp-line: #FCD34D; --at-credit: #0E7490; --at-credit-wash: #ECFEFF; --at-credit-line: #A5F3FC; /* ── 未推出（SOON）────────────────────────────────────────── ⚠️ 呢一對特登係灰，唔可以用狀態色。「未做好」唔係「錯」， 用紅色會嚇親人；用綠色又會令人以為撳得。 */ --at-soon: #B6C0CE; --at-soon-wash: #F1F5F9; /* ── 角色 chrome（老師／管理員）───────────────────────────────── 2026-09-02 改。之前： teacher primary #6D28D9 ← 紫，全站冇第二處用，孤兒色 admin primary #B91C1C ← 就係下面 --at-bad，「錯／逾期／失敗」嗰隻紅 即係成個管理員後台由頭到尾漆住錯誤色 —— 同上面「見到紅就係錯」 嗰條規矩自打嘴巴，而且管理員每日睇住一版紅，真係有錯嗰陣反而 突顯唔到。 而家：**兩個角色個 chrome 都用返品牌深藍，角色靠個徽章分。** 徽章得一粒細細嘅，紅色仍然講到「你而家係管理員，做嘢小心啲」， 但唔會令成版變成警示。設計稿嗰兩版管理員畫面都係咁做 （深藍 80 處，紅色一處都冇）。 ⚠️ 徽章嗰兩隻色**唔准攞去做第二樣嘢** —— 佢哋淨係「角色標記」， 唔係狀態。狀態色喺上面 --at-ok / --at-warn / --at-bad。 */ --at-role-chrome: var(--at-brand); --at-role-chrome-wash: var(--at-brand-wash); --at-role-teacher: #6D28D9; /* 老師徽章字色（只此一處） */ --at-role-teacher-wash: #F5F3FF; /* 老師徽章底 */ --at-role-admin: #B91C1C; /* 管理員徽章字色（只此一處）*/ --at-role-admin-wash: #FEE2E2; /* 管理員徽章底 */ /* ── 圓角 ──────────────────────────────────────────────────── */ --at-r-sm: 6px; /* 標籤、細掣 */ --at-r: 10px; /* 輸入框、一般按鈕 */ --at-r-lg: 14px; /* 卡 */ --at-r-pill: 999px; /* 藥丸形（錢包、數量徽章） */ /* ── 陰影 ────────────────────────────────────────────────────── 只有兩級。⚠️ 唔好加第三級 —— 三級以上冇人分得出，只會令每一版 自己揀一個。 */ --at-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -14px rgba(7,28,104,.35); --at-shadow-lg: 0 2px 4px rgba(15,23,42,.05), 0 32px 64px -28px rgba(7,28,104,.32); /* ── 字體 ────────────────────────────────────────────────────── ⚠️ 'Handel Gothic' 淨係用喺 logo 字樣（Airtutor Academy）， 唔准攞去做標題 —— 佢冇中文字，中文標題會靜靜跌返落後備字體， 令同一行中英文唔同款。 ⚠️ 後備字體一定要包 'PingFang HK' 同 'Noto Sans TC/SC'， 唔係簡體介面會出咗日文字形。 */ --at-font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'PingFang HK', 'Noto Sans TC', 'Noto Sans SC', sans-serif; --at-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --at-font-mark: 'Handel Gothic', 'Inter', sans-serif; /* ── 版面尺寸 ────────────────────────────────────────────────── ⚠️ --at-header-h 由 110px 改咗做 60px（2026-08-31 頂欄併成一行）。 CourseRail 同 notes.html 兩處 sticky 定位讀住呢個數。改之前 搵齊所有 `top:60` / `calc(100vh - 60px)`。 */ --at-header-h: 60px; --at-rail-w: 238px; /* 左欄展開闊度 */ --at-rail-w-collapsed: 48px; /* 左欄摺埋淨返圖示 */ } /* ── 鍵盤焦點 ──────────────────────────────────────────────────── ⚠️ 唔准寫 `outline:none` 就算數。用鍵盤／讀屏嘅人靠呢個知自己 撳到邊。賣入學校嗰陣無障礙係採購清單上嘅硬指標。 用 :focus-visible 而唔係 :focus —— 用滑鼠撳唔會出框，只有鍵盤 操作先出。 */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--at-link); outline-offset: 2px; border-radius: var(--at-r-sm); } /* ── 減少動態效果 ──────────────────────────────────────────────── 有啲人（前庭功能障礙、偏頭痛）喺系統設定揀咗「減少動態效果」。 要照做，唔係一個裝飾動畫可以令佢頭暈。 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }