/**
* Blink 瞬睫管家 - 品牌色主題預設
*
* 使用方式：
* 在 標籤加入 data-brand="主題名稱"
*
* 範例：
* 深灰藍 (專業穩重)
* 暖棕色 (溫馨自然)
* 墨綠色 (清新高雅)
* 深紫灰 (獨特質感)
* 玫瑰粉 (原始預設)
*
* 可與 data-theme="dark" 同時使用
*/
/* ═══════════════════════════════════════════════════════════════
主題 1: 深灰藍 (Slate) - 專業穩重
═══════════════════════════════════════════════════════════════ */
html[data-brand="slate"] {
--brand-primary: #4A5568;
--brand-secondary: #718096;
--brand-accent: #2D3748;
/* 品牌色衍生 */
--brand-primary-light: #4A556820;
--brand-primary-medium: #4A556840;
--brand-primary-dark: #4A5568E0;
/* 舊變數相容 */
--brand-primary-color: var(--brand-primary);
--brand-secondary-color: var(--brand-secondary);
--brand-accent-color: var(--brand-accent);
/* 亮色模式分區線使用品牌色 */
--color-section-line: linear-gradient(90deg, var(--brand-primary) 0%, transparent 100%);
}
/* ═══════════════════════════════════════════════════════════════
主題 2: 暖棕色 (Warm Brown) - 溫馨自然
═══════════════════════════════════════════════════════════════ */
html[data-brand="warm-brown"] {
--brand-primary: #8B7355;
--brand-secondary: #A08B70;
--brand-accent: #6B5344;
/* 品牌色衍生 */
--brand-primary-light: #8B735520;
--brand-primary-medium: #8B735540;
--brand-primary-dark: #8B7355E0;
/* 舊變數相容 */
--brand-primary-color: var(--brand-primary);
--brand-secondary-color: var(--brand-secondary);
--brand-accent-color: var(--brand-accent);
/* 分區線 */
--color-section-line: linear-gradient(90deg, var(--brand-primary) 0%, transparent 100%);
}
/* ═══════════════════════════════════════════════════════════════
主題 3: 墨綠色 (Forest) - 清新高雅
═══════════════════════════════════════════════════════════════ */
html[data-brand="forest"] {
--brand-primary: #2D6A4F;
--brand-secondary: #40916C;
--brand-accent: #1B4332;
/* 品牌色衍生 */
--brand-primary-light: #2D6A4F20;
--brand-primary-medium: #2D6A4F40;
--brand-primary-dark: #2D6A4FE0;
/* 舊變數相容 */
--brand-primary-color: var(--brand-primary);
--brand-secondary-color: var(--brand-secondary);
--brand-accent-color: var(--brand-accent);
/* 分區線 */
--color-section-line: linear-gradient(90deg, var(--brand-primary) 0%, transparent 100%);
}
/* ═══════════════════════════════════════════════════════════════
主題 4: 深紫灰 (Grape) - 獨特質感
═══════════════════════════════════════════════════════════════ */
html[data-brand="grape"] {
--brand-primary: #5C5470;
--brand-secondary: #7C7591;
--brand-accent: #463D52;
/* 品牌色衍生 */
--brand-primary-light: #5C547020;
--brand-primary-medium: #5C547040;
--brand-primary-dark: #5C5470E0;
/* 舊變數相容 */
--brand-primary-color: var(--brand-primary);
--brand-secondary-color: var(--brand-secondary);
--brand-accent-color: var(--brand-accent);
/* 分區線 */
--color-section-line: linear-gradient(90deg, var(--brand-primary) 0%, transparent 100%);
}
/* ═══════════════════════════════════════════════════════════════
主題 5: 玫瑰粉 (Rose) - 原始預設
═══════════════════════════════════════════════════════════════ */
html[data-brand="rose"] {
--brand-primary: #FF6B9D;
--brand-secondary: #FFB6C1;
--brand-accent: #FF1493;
/* 品牌色衍生 */
--brand-primary-light: #FF6B9D20;
--brand-primary-medium: #FF6B9D40;
--brand-primary-dark: #FF6B9DE0;
/* 舊變數相容 */
--brand-primary-color: var(--brand-primary);
--brand-secondary-color: var(--brand-secondary);
--brand-accent-color: var(--brand-accent);
/* 分區線 */
--color-section-line: linear-gradient(90deg, var(--brand-primary) 0%, transparent 100%);
}
/* ═══════════════════════════════════════════════════════════════
主題 6: 海洋藍 (Ocean) - 額外選項
═══════════════════════════════════════════════════════════════ */
html[data-brand="ocean"] {
--brand-primary: #0077B6;
--brand-secondary: #00B4D8;
--brand-accent: #023E8A;
/* 品牌色衍生 */
--brand-primary-light: #0077B620;
--brand-primary-medium: #0077B640;
--brand-primary-dark: #0077B6E0;
/* 舊變數相容 */
--brand-primary-color: var(--brand-primary);
--brand-secondary-color: var(--brand-secondary);
--brand-accent-color: var(--brand-accent);
/* 分區線 */
--color-section-line: linear-gradient(90deg, var(--brand-primary) 0%, transparent 100%);
}
/* ═══════════════════════════════════════════════════════════════
主題 7: 珊瑚橘 (Coral) - 額外選項
═══════════════════════════════════════════════════════════════ */
html[data-brand="coral"] {
--brand-primary: #E07A5F;
--brand-secondary: #F2A285;
--brand-accent: #C45B3E;
/* 品牌色衍生 */
--brand-primary-light: #E07A5F20;
--brand-primary-medium: #E07A5F40;
--brand-primary-dark: #E07A5FE0;
/* 舊變數相容 */
--brand-primary-color: var(--brand-primary);
--brand-secondary-color: var(--brand-secondary);
--brand-accent-color: var(--brand-accent);
/* 分區線 */
--color-section-line: linear-gradient(90deg, var(--brand-primary) 0%, transparent 100%);
}
/* ═══════════════════════════════════════════════════════════════
主題 8: 暗金色 (Gold) - 額外選項
═══════════════════════════════════════════════════════════════ */
html[data-brand="gold"] {
--brand-primary: #B8860B;
--brand-secondary: #DAA520;
--brand-accent: #8B6914;
/* 品牌色衍生 */
--brand-primary-light: #B8860B20;
--brand-primary-medium: #B8860B40;
--brand-primary-dark: #B8860BE0;
/* 舊變數相容 */
--brand-primary-color: var(--brand-primary);
--brand-secondary-color: var(--brand-secondary);
--brand-accent-color: var(--brand-accent);
/* 分區線 */
--color-section-line: linear-gradient(90deg, var(--brand-primary) 0%, transparent 100%);
}
/* ═══════════════════════════════════════════════════════════════
主題 9: 玫瑰金 (Rose Gold) - Landing Page 同款 ⭐ 推薦
與 Landing Page 一致的奢華暖色調
═══════════════════════════════════════════════════════════════ */
html[data-brand="rose-gold"] {
--brand-primary: #D4A574;
--brand-secondary: #C9A9A6;
--brand-accent: #C7A17A;
/* 品牌色衍生 */
--brand-primary-light: #D4A57420;
--brand-primary-medium: #D4A57440;
--brand-primary-dark: #D4A574E0;
/* 舊變數相容 */
--brand-primary-color: var(--brand-primary);
--brand-secondary-color: var(--brand-secondary);
--brand-accent-color: var(--brand-accent);
/* 分區線 */
--color-section-line: linear-gradient(90deg, var(--brand-primary) 0%, transparent 100%);
}