/* ========================================== MIDC Property - Theme Color Options Change your brand color easily! ========================================== HOW TO USE: 1. Choose a theme class below 2. Add it to or tag in your HTML files 3. Example: AVAILABLE THEMES: - theme-blue (default) - theme-emerald (green - growth/prosperity) - theme-gold (orange/gold - premium/luxury) - theme-purple (innovation/tech) - theme-rose (red/pink - energy/passion) - theme-teal (modern/clean) */ /* ========================================== 1. EMERALD GREEN THEME Perfect for: Growth, prosperity, nature ========================================== */ .theme-emerald { --primary: #10b981; --primary-600: #059669; --ring: #047857; --bg-accent-1: #065f46; --bg-accent-2: #34d399; --bg-accent-3: #047857; } .theme-emerald .card:hover { box-shadow: 0 20px 60px rgba(16,185,129,0.25), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); border-color: rgba(16,185,129,0.4); } .theme-emerald .btn { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 4px 15px rgba(16,185,129,0.3), 0 2px 4px rgba(0,0,0,0.1); } .theme-emerald .btn:hover { box-shadow: 0 8px 25px rgba(16,185,129,0.4), 0 4px 8px rgba(0,0,0,0.15); } .theme-emerald .nav a::after { background: linear-gradient(90deg, #10b981, #059669); } /* ========================================== 2. GOLD/ORANGE THEME Perfect for: Premium, luxury, warmth ========================================== */ .theme-gold { --primary: #f59e0b; --primary-600: #d97706; --ring: #b45309; --bg-accent-1: #78350f; --bg-accent-2: #fbbf24; --bg-accent-3: #92400e; } .theme-gold .card:hover { box-shadow: 0 20px 60px rgba(245,158,11,0.25), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); border-color: rgba(245,158,11,0.4); } .theme-gold .btn { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 4px 15px rgba(245,158,11,0.3), 0 2px 4px rgba(0,0,0,0.1); } .theme-gold .btn:hover { box-shadow: 0 8px 25px rgba(245,158,11,0.4), 0 4px 8px rgba(0,0,0,0.15); } .theme-gold .nav a::after { background: linear-gradient(90deg, #f59e0b, #d97706); } /* ========================================== 3. PURPLE THEME Perfect for: Innovation, tech, creativity ========================================== */ .theme-purple { --primary: #8b5cf6; --primary-600: #7c3aed; --ring: #6d28d9; --bg-accent-1: #4c1d95; --bg-accent-2: #a78bfa; --bg-accent-3: #5b21b6; } .theme-purple .card:hover { box-shadow: 0 20px 60px rgba(139,92,246,0.25), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); border-color: rgba(139,92,246,0.4); } .theme-purple .btn { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); box-shadow: 0 4px 15px rgba(139,92,246,0.3), 0 2px 4px rgba(0,0,0,0.1); } .theme-purple .btn:hover { box-shadow: 0 8px 25px rgba(139,92,246,0.4), 0 4px 8px rgba(0,0,0,0.15); } .theme-purple .nav a::after { background: linear-gradient(90deg, #8b5cf6, #7c3aed); } /* ========================================== 4. ROSE/RED THEME Perfect for: Energy, passion, urgency ========================================== */ .theme-rose { --primary: #f43f5e; --primary-600: #e11d48; --ring: #be123c; --bg-accent-1: #881337; --bg-accent-2: #fb7185; --bg-accent-3: #9f1239; } .theme-rose .card:hover { box-shadow: 0 20px 60px rgba(244,63,94,0.25), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); border-color: rgba(244,63,94,0.4); } .theme-rose .btn { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); box-shadow: 0 4px 15px rgba(244,63,94,0.3), 0 2px 4px rgba(0,0,0,0.1); } .theme-rose .btn:hover { box-shadow: 0 8px 25px rgba(244,63,94,0.4), 0 4px 8px rgba(0,0,0,0.15); } .theme-rose .nav a::after { background: linear-gradient(90deg, #f43f5e, #e11d48); } /* ========================================== 5. TEAL/CYAN THEME Perfect for: Modern, clean, professional ========================================== */ .theme-teal { --primary: #14b8a6; --primary-600: #0d9488; --ring: #0f766e; --bg-accent-1: #134e4a; --bg-accent-2: #2dd4bf; --bg-accent-3: #115e59; } .theme-teal .card:hover { box-shadow: 0 20px 60px rgba(20,184,166,0.25), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); border-color: rgba(20,184,166,0.4); } .theme-teal .btn { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); box-shadow: 0 4px 15px rgba(20,184,166,0.3), 0 2px 4px rgba(0,0,0,0.1); } .theme-teal .btn:hover { box-shadow: 0 8px 25px rgba(20,184,166,0.4), 0 4px 8px rgba(0,0,0,0.15); } .theme-teal .nav a::after { background: linear-gradient(90deg, #14b8a6, #0d9488); } /* ========================================== 6. INDIGO (Classic Blue) Your current default theme ========================================== */ .theme-blue { --primary: #5b8cff; --primary-600: #3d6df0; --ring: #2746a6; --bg-accent-1: #1f2a6b; --bg-accent-2: #0ea5e9; --bg-accent-3: #312e81; } .theme-blue .card:hover { box-shadow: 0 20px 60px rgba(91,140,255,0.25), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); border-color: rgba(91,140,255,0.4); } .theme-blue .btn { background: linear-gradient(135deg, #5b8cff 0%, #3d6df0 100%); box-shadow: 0 4px 15px rgba(91,140,255,0.3), 0 2px 4px rgba(0,0,0,0.1); } .theme-blue .btn:hover { box-shadow: 0 8px 25px rgba(91,140,255,0.4), 0 4px 8px rgba(0,0,0,0.15); } .theme-blue .nav a::after { background: linear-gradient(90deg, #5b8cff, #3d6df0); } /* ========================================== SCROLLBAR COLORS FOR EACH THEME ========================================== */ .theme-emerald ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #10b981 0%, #059669 100%); } .theme-gold ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); } .theme-purple ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%); } .theme-rose ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%); } .theme-teal ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%); } .theme-blue ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5b8cff 0%, #3d6df0 100%); }