/* QEdu 設計 Token v1（CHU-953） * 概念：紙＋墨。底色是帶暖調的紙色，文字是墨水深藍，品牌藍是墨墨環，螢光筆黃只用來「標重點」。 * 所有文字／底色組合的對比值見 brand/index.html 與 docs/BRAND.md（皆 ≥ WCAG AA 4.5:1）。 * 用法：，之後只用 var(--q-*)。 */ :root { /* ---- 品牌色 ---- */ --q-blue-50: #EEF4FF; --q-blue-100: #DCE8FF; --q-blue-200: #BCD3FF; --q-blue-300: #8DB3FA; --q-blue-400: #5B8DEF; --q-blue-500: #2F6FE4; /* 大字／圖形用；白字小字請用 600 以上 */ --q-blue-600: #1A56C9; /* 品牌主色：按鈕、連結、LOGO 環 */ --q-blue-700: #1443A0; --q-blue-800: #12347A; /* 墨水深藍（墨墨本體 #26304F 為 ink-700） */ --q-ink-900: #131B33; /* 主要文字 */ --q-ink-800: #1B2543; --q-ink-700: #26304F; /* 墨墨 */ --q-ink-600: #3A4666; /* 輔色：螢光筆黃（標重點、星星、貼紙）、珊瑚（臉頰紅暈、溫暖點綴） */ --q-amber-100: #FFF3D6; --q-amber-300: #F6BB45; /* 只當底色／圖形；上面放深色字 */ --q-amber-700: #7A4E00; /* 黃底上的字 */ --q-coral-100: #FFE8E1; --q-coral-500: #E76F51; --q-coral-700: #C2452D; /* ---- 語意色（提醒不用紅，避免製造焦慮） ---- */ --q-success: #1E7B4F; --q-success-bg: #E3F4EA; --q-remind: #7A4E00; --q-remind-bg: #FFF3D6; /* 「該複習了」用琥珀，不是警告紅 */ --q-error: #B93A32; --q-error-bg: #FDECEA; --q-info: #1443A0; --q-info-bg: #EEF4FF; /* ---- 中性色（微藍灰，配紙色底） ---- */ --q-paper: #FAF8F3; /* 頁面底色 */ --q-surface: #FFFFFF; /* 卡片 */ --q-sunken: #F2EFE7; /* 凹下區塊 */ --q-line: #E3DFD3; /* 分隔線 */ --q-line-strong: #C9C4B4; --q-text: var(--q-ink-900); --q-text-2: #566075; /* 次要文字，在 paper 上 5.95:1 */ --q-on-brand: #FFFFFF; /* ---- 年級帶主題色（低／中／高）---- */ --q-band-low: #F6BB45; --q-band-low-bg: #FFF3D6; --q-band-low-fg: #7A4E00; /* 蜜橙：溫暖、聽得懂 */ --q-band-mid: #1B8A7A; --q-band-mid-bg: #DDF3EE; --q-band-mid-fg: #0F6B5E; /* 青草：清楚、看得到 */ --q-band-high: #26304F; --q-band-high-bg: #E3EAF8; --q-band-high-fg: #12347A; /* 墨藍：沉穩、說得出 */ /* ---- 字型 ---- */ --q-font: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif; --q-font-display: "Noto Serif TC", "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", serif; --q-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace; /* 字級（rem；低年級畫面請套 --q-fs-kid-*） */ --q-fs-xs: .8125rem; /* 13 */ --q-fs-sm: .9375rem; /* 15 */ --q-fs-md: 1rem; /* 16 高年級正文下限 */ --q-fs-lg: 1.125rem; /* 18 中年級正文下限 */ --q-fs-xl: 1.375rem; /* 22 低年級無注音文字下限 */ --q-fs-kid: 1.75rem; /* 28 低年級「帶注音」正文：注音為 .4em ≈ 11–12px，再小就看不清 */ --q-fs-2xl: 1.75rem; --q-fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --q-fs-4xl: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem); --q-lh-tight: 1.25; --q-lh-body: 1.75; --q-lh-kid: 1.9; /* 注音需要更大行高 */ /* ---- 間距（4px 基準）---- */ --q-s-1: 4px; --q-s-2: 8px; --q-s-3: 12px; --q-s-4: 16px; --q-s-5: 24px; --q-s-6: 32px; --q-s-7: 48px; --q-s-8: 72px; --q-s-9: 112px; --q-gutter: 16px; /* 手機左右留白 */ --q-tap: 44px; /* 最小點擊區；低年級用 --q-tap-kid */ --q-tap-kid: 56px; /* ---- 圓角：偏圓，兒童友善但不幼稚 ---- */ --q-r-sm: 8px; --q-r-md: 14px; --q-r-lg: 22px; --q-r-xl: 32px; --q-r-pill: 999px; /* ---- 陰影：帶墨藍色偏，不用純黑 ---- */ --q-shadow-1: 0 1px 2px rgba(19,27,51,.08), 0 1px 1px rgba(19,27,51,.04); --q-shadow-2: 0 6px 18px rgba(19,27,51,.10); --q-shadow-3: 0 18px 44px rgba(19,27,51,.14); --q-focus: 0 0 0 3px var(--q-paper), 0 0 0 6px var(--q-blue-600); /* ---- 動態 ---- */ --q-ease: cubic-bezier(.2, .8, .2, 1); --q-ease-bounce: cubic-bezier(.34, 1.56, .64, 1); /* 墨滴彈一下 */ --q-dur-1: 120ms; --q-dur-2: 220ms; --q-dur-3: 420ms; } /* ---- 深色模式：墨水夜（底色用 ink，不是純黑） ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --q-paper: #0F1530; --q-surface: #171F3F; --q-sunken: #0B1027; --q-line: #2A3560; --q-line-strong: #3C4A80; --q-text: #F3EFE4; --q-text-2: #A9B3D1; --q-blue-600: #6EA0FF; /* 深底上的品牌藍（對 paper 7.4:1）；白字按鈕請改用 --q-btn-bg */ --q-btn-bg: #1A56C9; --q-success: #6FD1A0; --q-success-bg: #12301F; --q-remind: #F6BB45; --q-remind-bg: #33270B; --q-error: #FF9A92; --q-error-bg: #3A1613; --q-info: #8DB3FA; --q-info-bg: #14224A; --q-band-low-bg: #33270B; --q-band-low-fg: #F6BB45; --q-band-mid-bg: #0C2F2A; --q-band-mid-fg: #6FD9C6; --q-band-high-bg: #17224A; --q-band-high-fg: #A9C2FF; --q-shadow-1: 0 1px 2px rgba(0,0,0,.4); --q-shadow-2: 0 6px 18px rgba(0,0,0,.45); --q-shadow-3: 0 18px 44px rgba(0,0,0,.5); --q-focus: 0 0 0 3px var(--q-paper), 0 0 0 6px var(--q-blue-300); } } :root[data-theme="dark"] { --q-paper: #0F1530; --q-surface: #171F3F; --q-sunken: #0B1027; --q-line: #2A3560; --q-line-strong: #3C4A80; --q-text: #F3EFE4; --q-text-2: #A9B3D1; --q-blue-600: #6EA0FF; --q-btn-bg: #1A56C9; --q-success: #6FD1A0; --q-success-bg: #12301F; --q-remind: #F6BB45; --q-remind-bg: #33270B; --q-error: #FF9A92; --q-error-bg: #3A1613; --q-info: #8DB3FA; --q-info-bg: #14224A; --q-band-low-bg: #33270B; --q-band-low-fg: #F6BB45; --q-band-mid-bg: #0C2F2A; --q-band-mid-fg: #6FD9C6; --q-band-high-bg: #17224A; --q-band-high-fg: #A9C2FF; --q-focus: 0 0 0 3px var(--q-paper), 0 0 0 6px var(--q-blue-300); } :root { --q-btn-bg: var(--q-blue-600); } :root[data-theme="light"] { --q-btn-bg: var(--q-blue-600); } /* ---- 年級帶：在容器上加 data-band="low|mid|high"，元件只讀 --band-* ---- */ [data-band="low"] { --band: var(--q-band-low); --band-bg: var(--q-band-low-bg); --band-fg: var(--q-band-low-fg); --fs: var(--q-fs-kid); --lh: var(--q-lh-kid); --tap: var(--q-tap-kid); --radius: var(--q-r-xl); } [data-band="mid"] { --band: var(--q-band-mid); --band-bg: var(--q-band-mid-bg); --band-fg: var(--q-band-mid-fg); --fs: var(--q-fs-lg); --lh: var(--q-lh-body); --tap: var(--q-tap); --radius: var(--q-r-lg); } [data-band="high"] { --band: var(--q-band-high); --band-bg: var(--q-band-high-bg); --band-fg: var(--q-band-high-fg); --fs: var(--q-fs-md); --lh: var(--q-lh-body); --tap: var(--q-tap); --radius: var(--q-r-md); } /* ---- 基礎重設（選用） ---- */ .q-base { margin: 0; background: var(--q-paper); color: var(--q-text); font-family: var(--q-font); font-size: var(--q-fs-md); line-height: var(--q-lh-body); -webkit-text-size-adjust: 100%; } .q-base *, .q-base *::before, .q-base *::after { box-sizing: border-box; } .q-base :focus-visible { outline: none; box-shadow: var(--q-focus); border-radius: var(--q-r-sm); } /* ---- 尊重減少動態：所有動態都要走這個開關 ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }