/* =================================== BRANDBALL — DARK MODE OVERRIDES Activated via [data-theme="dark"] on =================================== */ /* ----- CSS Variable Overrides ----- */ [data-theme="dark"] { --text-primary: #E0E0E0; --text-secondary: #A8A8A8; --text-light: #FFFFFF; --bg-primary: #121212; --bg-white: #1E1E1E; --bg-dark: #0A0A0A; --gradient-hero: linear-gradient(135deg, rgba(255, 69, 0, 0.06) 0%, rgba(135, 206, 235, 0.06) 100%); --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 8px 32px rgba(0, 0, 0, 0.5); --shadow-depth: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.15), 0 16px 32px rgba(0, 0, 0, 0.1); --gradient-mesh: radial-gradient(at 40% 20%, rgba(255, 69, 0, 0.08) 0%, transparent 50%), radial-gradient(at 80% 80%, rgba(135, 206, 235, 0.08) 0%, transparent 50%), radial-gradient(at 0% 50%, rgba(127, 255, 212, 0.08) 0%, transparent 50%); --gradient-mesh-intense: radial-gradient(at 40% 20%, rgba(255, 69, 0, 0.15) 0%, transparent 50%), radial-gradient(at 80% 80%, rgba(135, 206, 235, 0.15) 0%, transparent 50%), radial-gradient(at 0% 50%, rgba(127, 255, 212, 0.15) 0%, transparent 50%); } /* ----- Dark Mode Transition ----- */ [data-theme="dark"] *, [data-theme="dark"] *::before, [data-theme="dark"] *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ----- Toggle Button ----- */ .nav-actions { display: flex; align-items: center; gap: 8px; } .dark-mode-toggle { position: relative; width: 48px; height: 26px; border-radius: 13px; background: #d4d4d4; border: none; cursor: pointer; padding: 0; margin-left: var(--spacing-sm); transition: background 0.3s ease; flex-shrink: 0; } .dark-mode-toggle::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.3s ease, background 0.3s ease; } /* Sun icon (light mode) */ .dark-mode-toggle .toggle-icon-sun, .dark-mode-toggle .toggle-icon-moon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; line-height: 1; transition: opacity 0.3s ease; pointer-events: none; } .dark-mode-toggle .toggle-icon-sun { left: 5px; opacity: 1; } .dark-mode-toggle .toggle-icon-moon { right: 5px; opacity: 0.4; } /* Dark mode active toggle state */ [data-theme="dark"] .dark-mode-toggle { background: var(--primary); } [data-theme="dark"] .dark-mode-toggle::before { transform: translateX(22px); background: #1E1E1E; } [data-theme="dark"] .dark-mode-toggle .toggle-icon-sun { opacity: 0.4; } [data-theme="dark"] .dark-mode-toggle .toggle-icon-moon { opacity: 1; } /* ----- Header ----- */ [data-theme="dark"] .header { background: rgba(18, 18, 18, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } [data-theme="dark"] .header.scrolled { background: rgba(18, 18, 18, 0.98); } /* ----- Hero Section ----- */ [data-theme="dark"] .hero::before { background: radial-gradient(circle, rgba(255, 69, 0, 0.15) 0%, rgba(255, 140, 0, 0.1) 40%, transparent 70%); } [data-theme="dark"] .hero::after { background: radial-gradient(circle, rgba(255, 140, 0, 0.12) 0%, rgba(255, 165, 0, 0.08) 40%, transparent 70%); } [data-theme="dark"] .logo-glow { background: radial-gradient(circle, rgba(255, 69, 0, 0.25) 0%, rgba(135, 206, 235, 0.15) 30%, rgba(127, 255, 212, 0.1) 60%, transparent 100%); } /* ----- Cards & Surfaces (hardcoded whites) ----- */ [data-theme="dark"] .service-card { background: rgba(30, 30, 30, 0.9); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .service-card:hover { border-color: rgba(255, 69, 0, 0.2); } [data-theme="dark"] .stat-card { background: rgba(30, 30, 30, 0.9); } [data-theme="dark"] .contact-form { background: rgba(30, 30, 30, 0.8); border-color: rgba(255, 69, 0, 0.15); } [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea, [data-theme="dark"] .form-select { background: #1a1a1a; border-color: rgba(255, 255, 255, 0.1); color: var(--text-primary); } [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-textarea:focus, [data-theme="dark"] .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.15); } [data-theme="dark"] .form-input::placeholder, [data-theme="dark"] .form-textarea::placeholder { color: #666; } /* ----- Reviews ----- */ [data-theme="dark"] .review-card { background: rgba(30, 30, 30, 0.9); border-color: rgba(255, 69, 0, 0.12); } [data-theme="dark"] .carousel-btn { background: rgba(30, 30, 30, 0.9); } [data-theme="dark"] .carousel-dot { background: rgba(255, 69, 0, 0.25); } /* ----- Success Stories ----- */ [data-theme="dark"] .story-card { background: rgba(30, 30, 30, 0.95); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .story-metrics { border-color: rgba(255, 69, 0, 0.15); } [data-theme="dark"] .story-industry { background: rgba(255, 69, 0, 0.15); } /* ----- Footer (already dark, but adjust for deeper dark) ----- */ [data-theme="dark"] .footer { background: #0A0A0A; } [data-theme="dark"] .footer-bottom { border-color: rgba(255, 255, 255, 0.06); } /* ----- Mobile Nav ----- */ @media (max-width: 768px) { [data-theme="dark"] .nav-links { background: rgba(18, 18, 18, 0.98); } } /* =================================== PHASE 2 FEATURES — DARK OVERRIDES =================================== */ /* Scroll Progress */ [data-theme="dark"] .scroll-progress-container { background: rgba(255, 255, 255, 0.06); } /* Journey Map */ [data-theme="dark"] .journey-stage { background: #1E1E1E; border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .stage-detail { background: #1E1E1E; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .stage-services { background: rgba(255, 69, 0, 0.12); } /* ROI Calculator */ [data-theme="dark"] .roi-calculator { background: linear-gradient(180deg, #1a1410 0%, var(--bg-primary) 100%); } [data-theme="dark"] .roi-container { background: #1E1E1E; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .roi-step { color: #555; border-bottom-color: #333; } [data-theme="dark"] .roi-step span { background: #333; color: #777; } [data-theme="dark"] .roi-step.active span { background: var(--primary); color: #fff; } [data-theme="dark"] .roi-step.completed span { background: #2ecc71; } [data-theme="dark"] .roi-step-ball-track { background: #333; } [data-theme="dark"] .roi-checkbox { border-color: #333; color: var(--text-primary); } [data-theme="dark"] .roi-checkbox:hover { background: rgba(255, 69, 0, 0.08); } [data-theme="dark"] .roi-checkbox:has(input:checked) { background: rgba(255, 69, 0, 0.1); border-color: var(--primary); } [data-theme="dark"] .roi-input, [data-theme="dark"] .roi-select { background: #1a1a1a; border-color: #333; color: var(--text-primary); } [data-theme="dark"] .roi-input:focus { background: #222; border-color: var(--primary); } [data-theme="dark"] .roi-input::placeholder { color: #555; } [data-theme="dark"] .roi-back-btn { border-color: #333; color: var(--text-secondary); } [data-theme="dark"] .roi-back-btn:hover { background: #2a2a2a; } [data-theme="dark"] .roi-gauge-circle::before { background: #1E1E1E; } [data-theme="dark"] .roi-metric-card { background: #1a1a1a; } [data-theme="dark"] .roi-channel-tag { background: rgba(255, 69, 0, 0.12); } [data-theme="dark"] .roi-cta-box { background: linear-gradient(135deg, rgba(255, 69, 0, 0.08), rgba(46, 204, 113, 0.08)); } /* Brand Health Quiz */ [data-theme="dark"] .quiz-container { background: var(--bg-primary); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .quiz-progress { background: #333; } [data-theme="dark"] .quiz-option { background: #1E1E1E; border-color: #333; color: var(--text-primary); } [data-theme="dark"] .quiz-option:hover { background: rgba(255, 69, 0, 0.08); border-color: rgba(255, 69, 0, 0.3); } [data-theme="dark"] .quiz-option.selected { background: rgba(255, 69, 0, 0.12); border-color: var(--primary); } [data-theme="dark"] .quiz-score-circle::before { background: var(--bg-primary); } [data-theme="dark"] .quiz-weak-areas { background: #1E1E1E; } [data-theme="dark"] .quiz-rec-item { background: rgba(255, 69, 0, 0.06); border-left-color: var(--primary); } [data-theme="dark"] .quiz-share-btn, [data-theme="dark"] .quiz-restart-btn { border-color: #333; color: var(--text-secondary); } [data-theme="dark"] .quiz-share-btn:hover, [data-theme="dark"] .quiz-restart-btn:hover { background: #2a2a2a; } /* Flip Cards / Case Studies */ [data-theme="dark"] .story-filter { border-color: #333; color: var(--text-secondary); } [data-theme="dark"] .story-filter:hover { border-color: var(--primary); } [data-theme="dark"] .story-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); } [data-theme="dark"] .story-front { background: #1E1E1E; border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .story-appreciation { background: rgba(255, 69, 0, 0.12); } /* =================================== CHATBOT WIDGET — DARK OVERRIDES =================================== */ [data-theme="dark"] .chat-window { background: #1E1E1E; } [data-theme="dark"] .chat-messages { background: #151515; } [data-theme="dark"] .message-bubble { background: #2a2a2a; color: var(--text-primary); } [data-theme="dark"] .user .message-bubble { color: #fff; } [data-theme="dark"] .mcq-option { background: #1E1E1E; color: var(--text-primary); border-color: var(--primary); } [data-theme="dark"] .mcq-option:hover { background: var(--primary); color: #fff; } [data-theme="dark"] .chat-input-container { background: #1E1E1E; border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .chat-input { border-color: rgba(255, 255, 255, 0.1); background: #151515; color: var(--text-primary); } [data-theme="dark"] .chat-input::placeholder { color: #555; } [data-theme="dark"] .typing-indicator { background: #2a2a2a; } [data-theme="dark"] .chat-logo { background: #1E1E1E; } /* =================================== FLOATING RINGS — DARK OVERRIDES =================================== */ [data-theme="dark"] .floating-obj { opacity: 0.3; } [data-theme="dark"] .floating-obj.scattered { opacity: 0.45; } /* =================================== PARTICLE CANVAS — DARK OVERRIDES =================================== */ [data-theme="dark"] #particleCanvas { opacity: 0.4; } /* =================================== HOVER GLOW — DARK OVERRIDE =================================== */ [data-theme="dark"] .service-card:hover, [data-theme="dark"] .story-card:hover, [data-theme="dark"] .stat-card:hover { animation: subtleGlowDark 2s ease-in-out infinite; } @keyframes subtleGlowDark { 0%, 100% { box-shadow: var(--shadow-md); } 50% { box-shadow: var(--shadow-lg), 0 0 25px rgba(255, 69, 0, 0.2); } } /* =================================== SERVICE PAGE — DARK OVERRIDES =================================== */ [data-theme="dark"] .play-icon { background: rgba(30, 30, 30, 0.95); } [data-theme="dark"] .stat-item { background: rgba(30, 30, 30, 0.9); } [data-theme="dark"] .service-item { background: rgba(30, 30, 30, 0.95); } [data-theme="dark"] .service-item:hover { border-color: rgba(255, 69, 0, 0.2); } [data-theme="dark"] .timeline-content { background: rgba(30, 30, 30, 0.9); } [data-theme="dark"] .testimonial-video-card { background: rgba(30, 30, 30, 0.95); } [data-theme="dark"] .testimonial-video-card:hover { border-color: rgba(255, 69, 0, 0.2); } [data-theme="dark"] .case-study-card { background: rgba(30, 30, 30, 0.95); } [data-theme="dark"] .case-study-card:hover { border-color: rgba(255, 69, 0, 0.2); } [data-theme="dark"] .case-metrics { border-color: rgba(255, 69, 0, 0.15); } [data-theme="dark"] .faq-item { background: rgba(30, 30, 30, 0.95); } [data-theme="dark"] .service-nav-card { background: rgba(30, 30, 30, 0.95); } [data-theme="dark"] .service-nav-card:hover { border-color: rgba(255, 69, 0, 0.2); } [data-theme="dark"] .cta-button-secondary { color: var(--primary-light); border-color: var(--primary-light); }