/** * BANOO Website V2 - Theme Definitions * Each theme overrides the CSS custom properties defined in :root (main.css) * Active theme is set by adding data-theme attribute to element */ /* ============================================= THEME: Purple Blossom (Default) Warm purple/pink gradient - creative, approachable ============================================= */ [data-theme="purple-blossom"] { --primary: #8b5cf6; --primary-dark: #7c3aed; --primary-light: #a78bfa; --secondary: #ec4899; --secondary-dark: #db2777; --secondary-light: #f472b6; --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); --gradient-light: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 100%); --gradient-hero: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%); } /* ============================================= THEME: Ocean Breeze Deep teal/cyan - calm, trustworthy, educational ============================================= */ [data-theme="ocean-breeze"] { --primary: #0d9488; --primary-dark: #0f766e; --primary-light: #2dd4bf; --secondary: #0284c7; --secondary-dark: #0369a1; --secondary-light: #38bdf8; --gradient-primary: linear-gradient(135deg, #0d9488 0%, #0284c7 100%); --gradient-light: linear-gradient(135deg, #f0fdfa 0%, #f0f9ff 100%); --gradient-hero: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(2, 132, 199, 0.1) 100%); } /* ============================================= THEME: Sunset Warmth Amber/orange - energetic, warm, inviting ============================================= */ [data-theme="sunset-warmth"] { --primary: #d97706; --primary-dark: #b45309; --primary-light: #fbbf24; --secondary: #dc2626; --secondary-dark: #b91c1c; --secondary-light: #f87171; --gradient-primary: linear-gradient(135deg, #d97706 0%, #dc2626 100%); --gradient-light: linear-gradient(135deg, #fffbeb 0%, #fef2f2 100%); --gradient-hero: linear-gradient(135deg, rgba(217, 119, 6, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%); } /* ============================================= THEME: Rose Garden Soft rose/mauve - elegant, feminine, gentle ============================================= */ [data-theme="rose-garden"] { --primary: #e11d48; --primary-dark: #be123c; --primary-light: #fb7185; --secondary: #a21caf; --secondary-dark: #86198f; --secondary-light: #d946ef; --gradient-primary: linear-gradient(135deg, #e11d48 0%, #a21caf 100%); --gradient-light: linear-gradient(135deg, #fff1f2 0%, #fdf4ff 100%); --gradient-hero: linear-gradient(135deg, rgba(225, 29, 72, 0.1) 0%, rgba(162, 28, 175, 0.1) 100%); } /* ============================================= THEME: Forest Canopy Deep green/emerald - natural, growth, harmony ============================================= */ [data-theme="forest-canopy"] { --primary: #059669; --primary-dark: #047857; --primary-light: #34d399; --secondary: #4f46e5; --secondary-dark: #4338ca; --secondary-light: #818cf8; --gradient-primary: linear-gradient(135deg, #059669 0%, #4f46e5 100%); --gradient-light: linear-gradient(135deg, #ecfdf5 0%, #eef2ff 100%); --gradient-hero: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(79, 70, 229, 0.1) 100%); } /* ============================================= THEME: Midnight Blue Dark navy/indigo - professional, serious, focused ============================================= */ [data-theme="midnight-blue"] { --primary: #4f46e5; --primary-dark: #4338ca; --primary-light: #818cf8; --secondary: #7c3aed; --secondary-dark: #6d28d9; --secondary-light: #a78bfa; --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --gradient-light: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%); --gradient-hero: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%); }