/* * Voxel Child Theme — Design System (CSS Custom Properties) * * 通用 Voxel 子主題設計系統，提供一組中性灰階 design tokens * 與深淺色（light / dark）切換機制。各站台可在後台「色彩 Tokens」 * 面板或自訂 CSS 中覆寫，無須改動本檔。 * * 內容： * 1. 淺色模式 tokens（:root） * 2. 深色模式覆寫（[data-theme="dark"]） * 3. 系統自動深色 fallback（@media prefers-color-scheme） * 4. 全域過渡動畫 * 5. 輔助 utility classes * * 字型預設使用系統字體堆疊；若站台以 Elementor kit 載入指定字型， * 可於後台覆寫 --vx-font-* 變數。 * * @version 1.0.0 */ /* ──────────────────────────────────────── 淺色模式 Design Tokens ──────────────────────────────────────── */ :root { /* 主色系（中性灰，作為品牌色佔位，請於後台覆寫） */ --vx-primary: #555555; --vx-primary-dk: #333333; --vx-primary-lt: #999999; --vx-accent: #777777; /* 背景系 */ --vx-bg: #F7F7F7; --vx-bg-warm: #EFEFEF; --vx-bg-deep: #E0E0E0; --vx-surface: #FFFFFF; /* 文字系 */ --vx-text: #1A1A1A; --vx-text-mid: #4D4D4D; --vx-text-muted: #808080; --vx-text-light: #B3B3B3; /* 功能色 */ --vx-success: #5E8C61; --vx-warning: #C99A4E; --vx-error: #C25A52; /* 字型（系統字體堆疊；可於後台覆寫） */ --vx-font-serif: Georgia, 'Times New Roman', serif; --vx-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --vx-font-display: Georgia, 'Times New Roman', serif; /* 間距 */ --vx-space-1: 0.25rem; --vx-space-2: 0.5rem; --vx-space-3: 0.75rem; --vx-space-4: 1rem; --vx-space-6: 1.5rem; --vx-space-8: 2rem; --vx-space-12: 3rem; --vx-space-16: 4rem; /* 圓角 */ --vx-radius-sm: 2px; --vx-radius-md: 6px; --vx-radius-lg: 12px; --vx-radius-full: 999px; /* 陰影（中性黑） */ --vx-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06); --vx-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10); --vx-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.14); /* 過渡動畫 */ --vx-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --vx-duration-fast: 150ms; --vx-duration-base: 300ms; --vx-duration-slow: 600ms; } /* ──────────────────────────────────────── 深色模式 Tokens 觸發： ──────────────────────────────────────── */ [data-theme="dark"] { /* 主色系（深色版，提亮一階） */ --vx-primary: #B0B0B0; --vx-primary-dk: #888888; --vx-primary-lt: #D0D0D0; --vx-accent: #A0A0A0; /* 背景系（深灰系列，非純黑） */ --vx-bg: #121212; --vx-bg-warm: #1A1A1A; --vx-bg-deep: #242424; --vx-surface: #1E1E1E; /* 文字系 */ --vx-text: #ECECEC; --vx-text-mid: #B8B8B8; --vx-text-muted: #808080; --vx-text-light: #555555; /* 功能色（降低飽和度） */ --vx-success: #5E8C61; --vx-warning: #B88E45; --vx-error: #B05049; /* 陰影（加深） */ --vx-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35); --vx-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45); --vx-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55); } /* ──────────────────────────────────────── 系統深色模式自動套用（未手動切換時） ──────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vx-primary: #B0B0B0; --vx-primary-dk: #888888; --vx-primary-lt: #D0D0D0; --vx-accent: #A0A0A0; --vx-bg: #121212; --vx-bg-warm: #1A1A1A; --vx-bg-deep: #242424; --vx-surface: #1E1E1E; --vx-text: #ECECEC; --vx-text-mid: #B8B8B8; --vx-text-muted: #808080; --vx-text-light: #555555; --vx-success: #5E8C61; --vx-warning: #B88E45; --vx-error: #B05049; --vx-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35); --vx-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45); --vx-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55); } } /* ──────────────────────────────────────── 全域過渡（主題切換時的平滑動畫） 注意：不使用 * 通用選擇器以避免效能問題 ──────────────────────────────────────── */ body, .vx-transition-target { transition: background-color var(--vx-duration-base) var(--vx-ease), color var(--vx-duration-base) var(--vx-ease), border-color var(--vx-duration-base) var(--vx-ease); } /* ──────────────────────────────────────── 輔助 utility classes（供 template 使用） ──────────────────────────────────────── */ .vx-font-serif { font-family: var(--vx-font-serif); } .vx-font-sans { font-family: var(--vx-font-sans); } .vx-font-display { font-family: var(--vx-font-display); } .vx-color-primary { color: var(--vx-primary); } .vx-color-text { color: var(--vx-text); } .vx-color-text-mid { color: var(--vx-text-mid); } .vx-bg-surface { background: var(--vx-surface); } .vx-bg-warm { background: var(--vx-bg-warm); }