/* =================================== THEME SYSTEM Switch between themes by changing the data-theme attribute on or Example: or =================================== */ /* =================================== THEME: OCEAN BREEZE (Default) Blue-green gradient =================================== */ :root, [data-theme="ocean-breeze"] { /* Base Brand Colors */ --brand-bg: #0A1F3D; /* Slightly darker than #0D4C92 for better contrast */ --brand-glow: #59C1BD; /* Medium Turquoise - Primary accent */ --accent-secondary: #A0E4CB; /* Light Teal - Secondary accent */ --interactive: #59C1BD; /* Medium Turquoise - Links/highlights */ --brand-accent: #CFF5E7; /* Soft Mint - Tertiary accent */ --brand-light: #F8F9FA; --brand-muted: #B8D4E8; /* Light blue-gray */ /* Glass Surfaces */ --brand-glass: rgba(13, 76, 146, 0.75); /* Using #0D4C92 with transparency */ --brand-glass-border: rgba(207, 245, 231, 0.2); /* Soft mint border */ --surface-global-glass-deep: rgba(13, 76, 146, 0.85); --surface-global-glass-medium: rgba(13, 76, 146, 0.6); /* Borders */ --border-global-glass-soft: rgba(160, 228, 203, 0.2); /* Light teal */ /* Shadows */ --shadow-global-soft: rgba(0, 0, 0, 0.3); --shadow-global-dark: rgba(0, 0, 0, 0.55); --shadow-global-medium: rgba(0, 0, 0, 0.4); --shadow-global-strong: rgba(0, 0, 0, 0.7); /* White Overlays */ --overlay-global-white-light: rgba(255, 255, 255, 0.08); --overlay-global-white-medium: rgba(255, 255, 255, 0.2); --overlay-global-white-strong: rgba(255, 255, 255, 0.3); /* Primary Accents & Glows */ --accent-primary-strong: rgba(89, 193, 189, 0.85); /* Medium Turquoise */ --accent-primary-bright: rgba(89, 193, 189, 0.9); /* Bright primary */ --border-primary-bright: #A0E4CB; /* Light Teal */ --overlay-glow-primary: rgba(89, 193, 189, 0.35); --overlay-glow-primary-strong: rgba(89, 193, 189, 0.6); --overlay-primary-soft: rgba(89, 193, 189, 0.2); --overlay-primary-light: rgba(89, 193, 189, 0.3); --overlay-primary-medium: rgba(89, 193, 189, 0.5); --shadow-glow-primary-strong: rgba(160, 228, 203, 0.8); /* Light Teal glow */ /* Secondary Accents */ --accent-secondary-bright: rgba(160, 228, 203, 0.9); --shadow-secondary-light: rgba(160, 228, 203, 0.3); --shadow-secondary-medium: rgba(160, 228, 203, 0.5); /* White Overlays (Additional) */ --overlay-white-subtle: rgba(255, 255, 255, 0.03); --overlay-white-soft: rgba(255, 255, 255, 0.05); --overlay-white-weak: rgba(255, 255, 255, 0.1); --border-white-soft: rgba(255, 255, 255, 0.15); --text-white-bright: rgba(255, 255, 255, 0.95); --text-white-muted: rgba(255, 255, 255, 0.7); /* Dark Overlays (Additional) */ --overlay-dark-soft: rgba(0, 0, 0, 0.2); --overlay-dark-deep: rgba(0, 0, 0, 0.7); /* Background Variations */ --bg-dark-strong: rgba(10, 31, 61, 0.8); --bg-dark-deep: rgba(10, 31, 61, 0.92); --bg-glass-medium: rgba(13, 76, 146, 0.5); --bg-glass-strong: rgba(13, 76, 146, 0.7); /* Hero Section */ --overlay-hero-primary: rgba(10, 31, 61, 0.85); --overlay-hero-gradient-start: rgba(10, 31, 61, 0.3); --overlay-hero-gradient-mid: rgba(10, 31, 61, 0.7); --overlay-hero-gradient-end: rgba(10, 31, 61, 0.95); /* Testimonials */ --accent-testimonials-stars: #FFD23F; /* Services Neumorphic */ --shadow-services-neumorphic-light: rgba(89, 193, 189, 0.2); /* Body & Focus Effects */ --overlay-body-gradient: rgba(89, 193, 189, 0.3); --shadow-focus-ring: rgba(89, 193, 189, 0.1); } /* =================================== THEME: CYBER NIGHT (Original) Electric purple and cyber pink =================================== */ [data-theme="cyber-night"] { /* Base Brand Colors */ --brand-bg: #050214; --brand-glow: #7C3AED; /* Electric Purple */ --accent-secondary: #F021B5; /* Cyber Pink - Secondary accent */ --interactive: #00F5D4; /* Mint Teal - Links/highlights */ --brand-accent: #9D5CFF; /* Purple Accent */ --brand-light: #F8F7FF; --brand-muted: #A89BCE; /* Glass Surfaces */ --brand-glass: rgba(17, 9, 48, 0.75); --brand-glass-border: rgba(255, 255, 255, 0.1); --surface-global-glass-deep: rgba(17, 9, 48, 0.85); --surface-global-glass-medium: rgba(17, 9, 48, 0.6); /* Borders */ --border-global-glass-soft: rgba(168, 155, 206, 0.15); /* Shadows */ --shadow-global-soft: rgba(0, 0, 0, 0.3); --shadow-global-dark: rgba(0, 0, 0, 0.55); /* White Overlays */ --overlay-global-white-light: rgba(255, 255, 255, 0.08); --overlay-global-white-medium: rgba(255, 255, 255, 0.2); --overlay-global-white-strong: rgba(255, 255, 255, 0.3); /* Primary Accents & Glows */ --accent-primary-strong: rgba(124, 58, 237, 0.85); --accent-primary-bright: rgba(124, 58, 237, 0.9); --border-primary-bright: #9D5CFF; --overlay-glow-primary: rgba(124, 58, 237, 0.35); --overlay-glow-primary-strong: rgba(124, 58, 237, 0.6); --overlay-primary-soft: rgba(124, 58, 237, 0.2); --overlay-primary-light: rgba(124, 58, 237, 0.3); --overlay-primary-medium: rgba(124, 58, 237, 0.5); --shadow-glow-primary-strong: rgba(157, 92, 255, 0.8); /* Secondary Accents */ --accent-secondary-bright: rgba(240, 33, 181, 0.9); --shadow-secondary-light: rgba(240, 33, 181, 0.3); --shadow-secondary-medium: rgba(240, 33, 181, 0.5); /* White Overlays (Additional) */ --overlay-white-subtle: rgba(255, 255, 255, 0.03); --overlay-white-soft: rgba(255, 255, 255, 0.05); --overlay-white-weak: rgba(255, 255, 255, 0.1); --border-white-soft: rgba(255, 255, 255, 0.15); --text-white-bright: rgba(255, 255, 255, 0.95); --text-white-muted: rgba(255, 255, 255, 0.7); /* Dark Overlays (Additional) */ --overlay-dark-soft: rgba(0, 0, 0, 0.2); --overlay-dark-deep: rgba(0, 0, 0, 0.7); /* Background Variations */ --bg-dark-strong: rgba(5, 2, 20, 0.8); --bg-dark-deep: rgba(5, 2, 20, 0.92); --bg-glass-medium: rgba(17, 9, 48, 0.5); --bg-glass-strong: rgba(17, 9, 48, 0.7); /* Hero Section */ --overlay-hero-primary: rgba(5, 2, 20, 0.85); --overlay-hero-gradient-start: rgba(5, 2, 20, 0.3); --overlay-hero-gradient-mid: rgba(5, 2, 20, 0.7); --overlay-hero-gradient-end: rgba(5, 2, 20, 0.95); /* Testimonials */ --accent-testimonials-stars: #FFD700; /* Services Neumorphic */ --shadow-services-neumorphic-light: rgba(30, 20, 60, 0.3); /* Body & Focus Effects */ --overlay-body-gradient: rgba(99, 102, 241, 0.3); --shadow-focus-ring: rgba(0, 245, 212, 0.1); } /* =================================== THEME: BOLD AMBITION Navy foundation with vibrant coral =================================== */ [data-theme="bold-ambition"] { /* Base Brand Colors */ --brand-bg: #1E2B45; /* Deep Navy */ --brand-glow: #E55F3F; /* Vibrant Coral - Primary accent */ --accent-secondary: #F1A845; /* Warm Gold - Secondary accent */ --interactive: #f7d811; /* Royal Blue - Links/highlights */ --brand-accent: #A9C6D9; /* Soft Sky Blue - Tertiary accent */ --brand-light: #F8F9FA; --brand-muted: #A9C6D9; /* Soft Sky Blue for text */ /* Glass Surfaces */ --brand-glass: rgba(30, 43, 69, 0.75); /* Using #1E2B45 with transparency */ --brand-glass-border: rgba(169, 198, 217, 0.2); /* Soft sky blue border */ --surface-global-glass-deep: rgba(30, 43, 69, 0.85); --surface-global-glass-medium: rgba(30, 43, 69, 0.6); /* Borders */ --border-global-glass-soft: rgba(169, 198, 217, 0.2); /* Soft sky blue */ /* Shadows */ --shadow-global-soft: rgba(0, 0, 0, 0.3); --shadow-global-dark: rgba(0, 0, 0, 0.55); --shadow-global-medium: rgba(0, 0, 0, 0.4); --shadow-global-strong: rgba(0, 0, 0, 0.7); /* White Overlays */ --overlay-global-white-light: rgba(255, 255, 255, 0.08); --overlay-global-white-medium: rgba(255, 255, 255, 0.2); --overlay-global-white-strong: rgba(255, 255, 255, 0.3); /* Primary Accents & Glows */ --accent-primary-strong: rgba(229, 95, 63, 0.85); /* Vibrant Coral */ --accent-primary-bright: rgba(229, 95, 63, 0.9); --border-primary-bright: #F1A845; /* Warm Gold */ --overlay-glow-primary: rgba(229, 95, 63, 0.35); --overlay-glow-primary-strong: rgba(229, 95, 63, 0.6); --overlay-primary-soft: rgba(229, 95, 63, 0.2); --overlay-primary-light: rgba(229, 95, 63, 0.3); --overlay-primary-medium: rgba(229, 95, 63, 0.5); --shadow-glow-primary-strong: rgba(241, 168, 69, 0.8); /* Warm Gold glow */ /* Secondary Accents */ --accent-secondary-bright: rgba(241, 168, 69, 0.9); --shadow-secondary-light: rgba(241, 168, 69, 0.3); --shadow-secondary-medium: rgba(241, 168, 69, 0.5); /* White Overlays (Additional) */ --overlay-white-subtle: rgba(255, 255, 255, 0.03); --overlay-white-soft: rgba(255, 255, 255, 0.05); --overlay-white-weak: rgba(255, 255, 255, 0.1); --border-white-soft: rgba(255, 255, 255, 0.15); --text-white-bright: rgba(255, 255, 255, 0.95); --text-white-muted: rgba(255, 255, 255, 0.7); /* Dark Overlays (Additional) */ --overlay-dark-soft: rgba(0, 0, 0, 0.2); --overlay-dark-deep: rgba(0, 0, 0, 0.7); /* Background Variations */ --bg-dark-strong: rgba(30, 43, 69, 0.8); --bg-dark-deep: rgba(30, 43, 69, 0.92); --bg-glass-medium: rgba(30, 43, 69, 0.5); --bg-glass-strong: rgba(30, 43, 69, 0.7); /* Hero Section */ --overlay-hero-primary: rgba(30, 43, 69, 0.85); --overlay-hero-gradient-start: rgba(30, 43, 69, 0.3); --overlay-hero-gradient-mid: rgba(30, 43, 69, 0.7); --overlay-hero-gradient-end: rgba(30, 43, 69, 0.95); /* Testimonials */ --accent-testimonials-stars: #F1A845; /* Warm Gold */ /* Services Neumorphic */ --shadow-services-neumorphic-light: rgba(64, 87, 143, 0.2); /* Royal Blue */ /* Body & Focus Effects */ --overlay-body-gradient: rgba(229, 95, 63, 0.3); --shadow-focus-ring: rgba(64, 87, 143, 0.1); }