/** * Hi.AI Design - Theme System * Hybrid Light/Dark Mode with Modern SaaS Styling * * Usage: Add data-theme="light" or data-theme="dark" to * Default: Respects system preference, falls back to dark */ /* ===== CSS Custom Properties for Theming ===== */ :root { /* Brand Colors (consistent across themes) */ --brand-cyan: #00CFFF; --brand-cyan-dark: #0099CC; --brand-green: #39FF14; --brand-green-dark: #2ECC0F; --brand-gold: #FFD700; /* Transition for smooth theme switching */ --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ===== DARK THEME (Default) ===== */ [data-theme="dark"], :root:not([data-theme]) { /* Backgrounds */ --bg-primary: #0A0F1C; --bg-secondary: #111827; --bg-tertiary: #1A2332; --bg-card: rgba(26, 35, 50, 0.8); --bg-card-hover: rgba(26, 35, 50, 0.95); --bg-glass: rgba(10, 15, 28, 0.85); --bg-input: #1A2332; /* Text Colors */ --text-primary: #FFFFFF; --text-secondary: #E0F2FE; --text-muted: #94A3B8; --text-inverse: #0A0F1C; /* Borders */ --border-default: rgba(0, 207, 255, 0.2); --border-hover: rgba(0, 207, 255, 0.5); --border-accent: rgba(57, 255, 20, 0.3); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px rgba(0, 207, 255, 0.3); --shadow-glow-green: 0 0 20px rgba(57, 255, 20, 0.3); /* Navigation */ --nav-bg: rgba(17, 24, 39, 0.95); --nav-text: #FFFFFF; --nav-hover: var(--brand-cyan); /* Hero */ --hero-gradient: linear-gradient(135deg, #0A0F1C 0%, #111827 100%); --hero-text-glow: 0 0 8px var(--brand-cyan), 0 0 16px var(--brand-cyan); /* Cards */ --card-bg: linear-gradient(135deg, rgba(26, 35, 50, 0.4) 0%, rgba(10, 15, 28, 0.6) 100%); --card-border: rgba(0, 207, 255, 0.2); --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Buttons */ --btn-primary-bg: linear-gradient(135deg, var(--brand-cyan), var(--brand-green)); --btn-primary-text: #0A0F1C; --btn-secondary-bg: transparent; --btn-secondary-border: var(--brand-cyan); --btn-secondary-text: #FFFFFF; /* Neon Effects (only in dark mode) */ --neon-opacity: 1; --glow-intensity: 1; } /* ===== LIGHT THEME ===== */ [data-theme="light"] { /* Backgrounds */ --bg-primary: #FFFFFF; --bg-secondary: #F8FAFC; --bg-tertiary: #F1F5F9; --bg-card: rgba(255, 255, 255, 0.9); --bg-card-hover: rgba(255, 255, 255, 1); --bg-glass: rgba(255, 255, 255, 0.9); --bg-input: #FFFFFF; /* Text Colors */ --text-primary: #0F172A; --text-secondary: #334155; --text-muted: #64748B; --text-inverse: #FFFFFF; /* Borders */ --border-default: rgba(0, 0, 0, 0.1); --border-hover: rgba(0, 155, 204, 0.5); --border-accent: rgba(0, 155, 204, 0.3); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15); --shadow-glow: 0 4px 20px rgba(0, 155, 204, 0.15); --shadow-glow-green: 0 4px 20px rgba(46, 204, 15, 0.15); /* Navigation */ --nav-bg: rgba(255, 255, 255, 0.95); --nav-text: #0F172A; --nav-hover: var(--brand-cyan-dark); /* Hero - Light mode gets a gradient white with subtle color */ --hero-gradient: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 50%, #ECFDF5 100%); --hero-text-glow: none; /* Cards */ --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.95) 100%); --card-border: rgba(0, 0, 0, 0.08); --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Buttons - Adjusted for light mode */ --btn-primary-bg: linear-gradient(135deg, var(--brand-cyan-dark), #0099CC); --btn-primary-text: #FFFFFF; --btn-secondary-bg: transparent; --btn-secondary-border: var(--brand-cyan-dark); --btn-secondary-text: var(--brand-cyan-dark); /* Disable neon effects in light mode */ --neon-opacity: 0; --glow-intensity: 0; } /* ===== BASE STYLES ===== */ body { background-color: var(--bg-primary); color: var(--text-primary); transition: var(--theme-transition); } /* ===== NAVIGATION ===== */ .theme-nav { background: var(--nav-bg) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-default); transition: var(--theme-transition); } .theme-nav a { color: var(--nav-text) !important; transition: var(--theme-transition); } .theme-nav a:hover { color: var(--nav-hover) !important; } /* ===== HERO SECTION ===== */ .theme-hero { background: var(--hero-gradient) !important; transition: var(--theme-transition); } [data-theme="light"] .hero-tagline, [data-theme="light"] .hero-subtitle { color: var(--brand-cyan-dark) !important; text-shadow: none !important; -webkit-text-fill-color: var(--brand-cyan-dark) !important; } [data-theme="light"] .hi-text { color: var(--brand-green-dark) !important; text-shadow: none !important; } [data-theme="light"] .ai-text { color: var(--brand-cyan-dark) !important; text-shadow: none !important; } /* ===== CARDS ===== */ .theme-card { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; box-shadow: var(--card-shadow) !important; transition: var(--theme-transition); } .theme-card:hover { background: var(--bg-card-hover) !important; box-shadow: var(--shadow-glow) !important; border-color: var(--border-hover) !important; } /* ===== BUTTONS ===== */ .theme-btn-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; transition: var(--theme-transition); } .theme-btn-secondary { background: var(--btn-secondary-bg) !important; border-color: var(--btn-secondary-border) !important; color: var(--btn-secondary-text) !important; transition: var(--theme-transition); } /* ===== SECTIONS ===== */ .theme-section-alt { background: var(--bg-secondary) !important; transition: var(--theme-transition); } .theme-section-gradient { background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%) !important; transition: var(--theme-transition); } /* ===== TEXT ===== */ .theme-text-primary { color: var(--text-primary) !important; } .theme-text-secondary { color: var(--text-secondary) !important; } .theme-text-muted { color: var(--text-muted) !important; } .theme-text-accent { color: var(--brand-cyan) !important; } [data-theme="light"] .theme-text-accent { color: var(--brand-cyan-dark) !important; } /* ===== INPUTS ===== */ .theme-input { background: var(--bg-input) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: var(--theme-transition); } .theme-input:focus { border-color: var(--brand-cyan) !important; box-shadow: var(--shadow-glow) !important; } .theme-input::placeholder { color: var(--text-muted) !important; } /* ===== NEON EFFECTS (Disabled in Light Mode) ===== */ [data-theme="light"] .neon-glow, [data-theme="light"] .neon-card::before, [data-theme="light"] .spin-sphere { animation: none !important; filter: none !important; box-shadow: var(--shadow-md) !important; } [data-theme="light"] .neon-gradient-text { background: var(--brand-cyan-dark) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: none !important; } /* ===== THEME TOGGLE BUTTON ===== */ .theme-toggle { position: relative; width: 56px; height: 28px; background: var(--bg-tertiary); border-radius: 14px; border: 1px solid var(--border-default); cursor: pointer; transition: var(--theme-transition); display: flex; align-items: center; padding: 2px; } .theme-toggle::before { content: '☀️'; position: absolute; left: 6px; font-size: 12px; opacity: 0.5; } .theme-toggle::after { content: '🌙'; position: absolute; right: 6px; font-size: 12px; opacity: 0.5; } .theme-toggle-knob { width: 22px; height: 22px; background: var(--brand-cyan); border-radius: 50%; transition: transform 0.3s ease, background-color 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 1; } [data-theme="dark"] .theme-toggle-knob { transform: translateX(28px); background: #6366F1; } [data-theme="light"] .theme-toggle-knob { transform: translateX(0); background: var(--brand-cyan-dark); } /* ===== FOOTER ===== */ .theme-footer { background: var(--bg-secondary) !important; border-top: 1px solid var(--border-default); transition: var(--theme-transition); } /* ===== SPECIFIC OVERRIDES FOR EXISTING CLASSES ===== */ /* Service cards and general cards */ [data-theme="light"] .service-card, [data-theme="light"] .card, [data-theme="light"] .gradient-bg { background: var(--bg-card) !important; border: 1px solid var(--border-default) !important; } [data-theme="light"] .service-card:hover, [data-theme="light"] .card:hover { box-shadow: var(--shadow-lg) !important; border-color: var(--brand-cyan-dark) !important; } /* Neon cards in light mode */ [data-theme="light"] .neon-card { background: var(--bg-card) !important; border: 1px solid var(--border-default) !important; } [data-theme="light"] .neon-card::before { display: none; } /* Why Choose cards */ [data-theme="light"] .why-choose-card { background: var(--bg-card) !important; border: 1px solid var(--border-default) !important; } [data-theme="light"] .why-choose-card:hover { border-color: var(--brand-cyan-dark) !important; box-shadow: var(--shadow-lg) !important; } /* Blog cards */ [data-theme="light"] .blog-card { background: var(--bg-card) !important; border: 1px solid var(--border-default) !important; } /* ===== TEXT COLOR OVERRIDES FOR LIGHT MODE ===== */ /* Override all light-colored text classes to be dark in light mode */ /* Using multiple selector syntaxes to ensure compatibility */ [data-theme="light"] .text-white, [data-theme="light"] [class*="text-white"] { color: var(--text-primary) !important; } [data-theme="light"] .text-\[\#E0F2FE\], [data-theme="light"] .text-\[\#e0f2fe\], [data-theme="light"] [class*="text-[#E0F2FE]"], [data-theme="light"] [class*="text-[#e0f2fe]"] { color: var(--text-secondary) !important; } [data-theme="light"] .text-gray-300, [data-theme="light"] [class*="text-gray-300"] { color: var(--text-secondary) !important; } [data-theme="light"] .text-gray-400, [data-theme="light"] [class*="text-gray-400"] { color: var(--text-muted) !important; } [data-theme="light"] .text-\[\#94A3B8\], [data-theme="light"] [class*="text-[#94A3B8]"] { color: var(--text-muted) !important; } /* Accent colors stay but get darker in light mode */ [data-theme="light"] .text-\[\#00CFFF\], [data-theme="light"] [class*="text-[#00CFFF]"] { color: var(--brand-cyan-dark) !important; } [data-theme="light"] .text-\[\#39FF14\], [data-theme="light"] [class*="text-[#39FF14]"] { color: #22c55e !important; /* Darker green for light mode */ } /* Section titles and headings */ [data-theme="light"] .section-title { color: var(--brand-cyan-dark) !important; text-shadow: none !important; } [data-theme="light"] .neon-glow { text-shadow: none !important; animation: none !important; color: var(--text-primary) !important; } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4 { color: var(--text-primary); } /* Card text */ [data-theme="light"] .card p, [data-theme="light"] .service-card p, [data-theme="light"] .neon-card p, [data-theme="light"] .gradient-bg p { color: var(--text-secondary) !important; } [data-theme="light"] .card h3, [data-theme="light"] .service-card h3, [data-theme="light"] .neon-card h3, [data-theme="light"] .gradient-bg h3 { color: var(--brand-cyan-dark) !important; } /* Neon card title and description in light mode */ [data-theme="light"] .neon-card-title { color: var(--text-primary) !important; text-shadow: none !important; } [data-theme="light"] .neon-card-description { color: var(--text-secondary) !important; } /* Gradient text in light mode */ [data-theme="light"] .neon-gradient-text { background: linear-gradient(135deg, #22c55e, var(--brand-cyan-dark)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } /* Supercharge and Growth text in light mode */ [data-theme="light"] .supercharge-text { background: linear-gradient(135deg, #16a34a, #0891b2) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } [data-theme="light"] .growth-text { background: linear-gradient(135deg, #ca8a04, #16a34a) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; filter: none !important; } /* Neon button secondary in light mode */ [data-theme="light"] .neon-button-secondary { color: var(--brand-cyan-dark) !important; border-color: var(--brand-cyan-dark) !important; } /* Philosophy section box in light mode */ [data-theme="light"] .bg-gradient-to-r.from-\[\#0A0F1C\]\/80 { background: var(--bg-tertiary) !important; border-color: var(--border-default) !important; } /* Contact form */ [data-theme="light"] input[type="text"], [data-theme="light"] input[type="email"], [data-theme="light"] textarea, [data-theme="light"] select { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text-muted) !important; } /* List items */ [data-theme="light"] li { color: var(--text-secondary); } /* Links in content */ [data-theme="light"] a:not(.theme-btn-primary):not([class*="bg-"]) { color: var(--brand-cyan-dark); } [data-theme="light"] a:not(.theme-btn-primary):not([class*="bg-"]):hover { color: #22c55e; } /* Cookie banner in light mode */ [data-theme="light"] #cookie-banner, [data-theme="light"] .cookie-banner-theme { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-top: 1px solid var(--border-default) !important; } /* Dark mode cookie banner */ [data-theme="dark"] #cookie-banner, [data-theme="dark"] .cookie-banner-theme { background: #222222 !important; color: #ffffff !important; } /* Cookie banner base styles */ .cookie-banner-theme { background: var(--bg-secondary); color: var(--text-primary); } /* Section titles */ [data-theme="light"] .section-title { color: var(--brand-cyan-dark) !important; text-shadow: none !important; } /* Hero tagline and subtitle */ [data-theme="light"] .hero-tagline { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: var(--brand-cyan-dark) !important; color: var(--brand-cyan-dark) !important; animation: none !important; } [data-theme="light"] .hero-subtitle { color: var(--text-secondary) !important; text-shadow: none !important; } [data-theme="light"] .hero-subtitle strong { color: var(--brand-cyan-dark) !important; } /* Logo glow effects in light mode */ [data-theme="light"] .nav-logo-glow img, [data-theme="light"] .hero-logo-img { box-shadow: 0 4px 20px rgba(0, 155, 204, 0.2) !important; filter: contrast(1.1) brightness(1.0) saturate(1.1) !important; } /* Icon containers */ [data-theme="light"] .neon-icon-container, [data-theme="light"] .why-choose-icon-container { box-shadow: var(--shadow-md) !important; border-color: var(--brand-cyan-dark) !important; background: var(--bg-tertiary) !important; } /* Form inputs */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--text-primary) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text-muted) !important; } /* Highlight card */ [data-theme="light"] .why-choose-highlight-card { background: linear-gradient(135deg, rgba(0, 207, 255, 0.05) 0%, rgba(57, 255, 20, 0.05) 100%) !important; border: 2px solid var(--brand-cyan-dark) !important; animation: none !important; } /* Gradients in light mode */ [data-theme="light"] .bg-gradient-to-r, [data-theme="light"] .bg-gradient-to-b, [data-theme="light"] .bg-gradient-to-br { background: var(--bg-secondary) !important; } /* Code blocks */ [data-theme="light"] pre, [data-theme="light"] code { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; } /* ===== COMPREHENSIVE LIGHT MODE TEXT VISIBILITY FIXES ===== */ /* Ensure all inline color attributes are overridden */ [data-theme="light"] [style*="color: white"], [data-theme="light"] [style*="color:#fff"], [data-theme="light"] [style*="color: #fff"], [data-theme="light"] [style*="color:#FFFFFF"], [data-theme="light"] [style*="color: #FFFFFF"] { color: var(--text-primary) !important; } /* Override inline white text in common elements */ [data-theme="light"] span[style*="color: white"], [data-theme="light"] p[style*="color: white"], [data-theme="light"] h1[style*="color: white"], [data-theme="light"] h2[style*="color: white"], [data-theme="light"] h3[style*="color: white"] { color: var(--text-primary) !important; } /* Glowing divider in light mode */ [data-theme="light"] .glowing-divider { background: linear-gradient(90deg, transparent, var(--brand-cyan-dark), #22c55e, var(--brand-cyan-dark), transparent) !important; box-shadow: 0 2px 8px rgba(0, 155, 204, 0.2) !important; animation: none !important; } /* Footer links and text in light mode */ [data-theme="light"] footer, [data-theme="light"] .footer, [data-theme="light"] .theme-footer { color: var(--text-primary) !important; } [data-theme="light"] footer a, [data-theme="light"] .footer a, [data-theme="light"] .theme-footer a { color: var(--brand-cyan-dark) !important; } /* Cookie banner in light mode */ [data-theme="light"] #cookie-banner, [data-theme="light"] .cookie-banner-theme { background: var(--bg-secondary) !important; color: var(--text-primary) !important; border-top: 1px solid var(--border-default) !important; } /* Dark mode cookie banner */ [data-theme="dark"] #cookie-banner, [data-theme="dark"] .cookie-banner-theme { background: #222222 !important; color: #ffffff !important; } /* Cookie banner base styles */ .cookie-banner-theme { background: var(--bg-secondary); color: var(--text-primary); } /* Results Over Promises card description fix */ [data-theme="light"] .why-choose-card .neon-card-description, [data-theme="light"] .card .neon-card-description { color: var(--text-secondary) !important; } /* Philosophy and "Why AI Agents" section text */ [data-theme="light"] [data-i18n="philosophy.title"], [data-theme="light"] [data-i18n="speakAI.whyTitle"], [data-theme="light"] [data-i18n="philosophy.together.title"] { color: var(--text-primary) !important; text-shadow: none !important; -webkit-text-fill-color: var(--text-primary) !important; } [data-theme="light"] [data-i18n="philosophy.human.description"], [data-theme="light"] [data-i18n="philosophy.ai.description"], [data-theme="light"] [data-i18n="philosophy.together.description"], [data-theme="light"] [data-i18n="speakAI.automate.description"], [data-theme="light"] [data-i18n="speakAI.connect.description"], [data-theme="light"] [data-i18n="speakAI.scale.description"], [data-theme="light"] [data-i18n="speakAI.turnData.description"] { color: var(--text-secondary) !important; } [data-theme="light"] [data-i18n="speakAI.conclusion"] span { color: var(--text-primary) !important; } /* ===== ACCESSIBILITY: Reduced Motion ===== */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } } /* ===== PRINT STYLES ===== */ @media print { :root { --bg-primary: #FFFFFF; --text-primary: #000000; } .theme-toggle, .theme-nav { display: none !important; } }