/* ============================================================ EXPERIMENTAL LIGHT MODE THEME v2 Activated via [data-theme="light"] on ============================================================ */ /* ── Global transition for smooth theme toggle ── */ [data-theme="light"] body { transition: background-color 400ms ease; } /* Only add theme-transition to structural containers, never to interactive/animated elements */ /* Note: sections EXCLUDED to prevent interference with sticky/scroll-driven animations */ [data-theme="light"] header, [data-theme="light"] footer, [data-theme="light"] nav { transition: background-color 400ms ease, border-color 400ms ease; } /* ── CSS Variable Overrides ── */ [data-theme="light"], [data-theme="light"]:root { --color-background: #f5f4f0 !important; --color-text: #1a1a1a !important; --color-secondary: #e5e5e0 !important; --color-muted: #71717a !important; --color-text-light: #1a1a1a !important; } /* Cookie banner / privacy modal variable overrides */ [data-theme="light"] .cookie-banner, [data-theme="light"] .cookie-modal { --color-bg: #ffffff; --color-background: #f5f4f0; --color-text: #1a1a1a; --color-muted: #71717a; } [data-theme="light"] .cookie-banner { background: rgba(255,255,255,0.95) !important; border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .cookie-modal { background: rgba(0,0,0,0.3) !important; } [data-theme="light"] .cookie-modal-content { background: #ffffff !important; color: #1a1a1a; border-color: rgba(0,0,0,0.06); } [data-theme="light"] .cookie-banner h3, [data-theme="light"] .cookie-banner p, [data-theme="light"] .cookie-modal-content h3, [data-theme="light"] .cookie-modal-content p { color: #1a1a1a !important; } [data-theme="light"] .cookie-btn-outline { color: #1a1a1a !important; border-color: rgba(0,0,0,0.2) !important; } [data-theme="light"] .cookie-btn-outline:hover { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.3) !important; } /* ── Body ── */ [data-theme="light"] body { background-color: #f5f4f0 !important; color: #1a1a1a; } /* Right-side scrollable content area */ [data-theme="light"] .min-h-screen.w-full.ml-0 { background-color: transparent !important; } /* ── Page section backgrounds — transparent so fixed wave layer is visible ── */ [data-theme="light"] section { background-color: transparent !important; } [data-theme="light"] .bg-\[\#0c0c0c\]:not(.fixed) { background-color: transparent !important; } /* ── Kill the dark vignette in light mode — it was causing the "everything dark" look ── */ [data-theme="light"] .bg-\[radial-gradient\(circle_at_center\,transparent_0\%\,rgba\(0\2c 0\2c 0\2c 0\.8\)_100\%\)\] { display: none !important; } [data-theme="light"] .bg-\[\#0a0a0a\] { background-color: #f0efeb !important; } /* ══════════════════════════════════ BACKGROUND LAYER /* ── Background Layer ── */ [data-theme="light"] .fixed.inset-0.z-\[-50\] { background-color: #f5f4f0; } [data-theme="light"] .fixed.inset-0.z-\[-50\] > .opacity-\[0\.07\] { opacity: 0.02 !important; } /* Wave SVG container — was 0.25 in dark, bump for light mode since dark strokes need more visibility */ [data-theme="light"] .fixed.inset-0.z-\[-50\] .opacity-\[0\.25\] { opacity: 0.18 !important; } [data-theme="light"] .glow-orb-heavy { background: rgba(0,0,0,0.02) !important; filter: blur(80px) !important; opacity: 0.3 !important; } [data-theme="light"] .glow-orb-medium { background: rgba(0,0,0,0.015) !important; filter: blur(60px) !important; opacity: 0.2 !important; } [data-theme="light"] .fixed.inset-0.z-\[-50\] .pointer-events-none.z-\[3\] > div { background-color: rgba(0,0,0,0.08) !important; box-shadow: none !important; } [data-theme="light"] .fixed.inset-0.z-\[-50\] .pointer-events-none.z-\[3\] > div.bg-accent { background-color: rgba(255,48,0,0.2) !important; } /* ── Wave SVG — JS handles the stop-color/stroke swaps in background layer ── */ /* Boost wave companion path opacity in light mode (dark strokes need more visibility) */ [data-theme="light"] .animate-wave-float.opacity-20 { opacity: 0.5 !important; } [data-theme="light"] .animate-wave-float.opacity-30 { opacity: 0.55 !important; } /* Light-mode wave overlay — removed, using original bg layer instead */ /* Hide the dark vignette in light mode */ [data-theme="light"] .bg-\[radial-gradient\(circle_at_center\) { background: none !important; } /* ══════════════════════════════════ ATOMIC CLASSES — GLOBAL OVERRIDES These catch inline Tailwind usages ══════════════════════════════════ */ /* Text colors */ [data-theme="light"] .text-white { color: #1a1a1a !important; } [data-theme="light"] .text-text { color: #1a1a1a !important; } [data-theme="light"] .text-muted { color: #71717a !important; } [data-theme="light"] .text-accent { color: #ff3000 !important; } /* Keep these explicit so accent text stays red */ [data-theme="light"] .text-accent, [data-theme="light"] .bg-accent, [data-theme="light"] .card-tag, [data-theme="light"] .text-\[\#ff3000\], [data-theme="light"] .text-accent { color: #ff3000 !important; } /* text-shadow-sm override */ [data-theme="light"] .text-shadow-sm { text-shadow: 0 0 30px rgba(0,0,0,0.05) !important; } [data-theme="light"] .mega-text:hover.text-shadow-sm { text-shadow: 0 0 30px rgba(255,48,0,0.3) !important; } /* Muted variants */ [data-theme="light"] .text-muted\/80 { color: #71717a !important; } [data-theme="light"] .text-muted\/60 { color: #a1a1aa !important; } [data-theme="light"] .text-muted\/40 { color: #a1a1aa !important; } [data-theme="light"] .text-white\/90 { color: rgba(26,26,26,0.9) !important; } [data-theme="light"] .text-white\/80 { color: rgba(26,26,26,0.8) !important; } [data-theme="light"] .text-white\/70 { color: rgba(26,26,26,0.7) !important; } [data-theme="light"] .text-white\/50 { color: rgba(26,26,26,0.5) !important; } [data-theme="light"] .text-white\/40 { color: rgba(26,26,26,0.4) !important; } [data-theme="light"] .text-white\/30 { color: rgba(26,26,26,0.3) !important; } [data-theme="light"] .text-white\/20 { color: rgba(26,26,26,0.2) !important; } [data-theme="light"] .text-white\/5 { color: rgba(26,26,26,0.05) !important; } /* Override inline rgba(255,255,255,...) used in tailwind arbitrary values */ [data-theme="light"] [class*="text-\\[rgba\\(255\\,255\\,255"] { color: #1a1a1a !important; } [data-theme="light"] [class*="text-\\[rgba(255,255,255"] { color: #1a1a1a !important; } /* Border colors */ [data-theme="light"] .border-white\/10, [data-theme="light"] .border-white\/20, [data-theme="light"] .border-white\/5, [data-theme="light"] .border-white\/\[0\.05\], [data-theme="light"] .border-white\/\[0\.06\] { border-color: rgba(0,0,0,0.08) !important; } /* Background colors */ [data-theme="light"] .bg-white\/\[0\.03\], [data-theme="light"] .bg-white\/\[0\.02\] { background: rgba(0,0,0,0.03) !important; } [data-theme="light"] .bg-white\/\[0\.05\], [data-theme="light"] .bg-white\/5 { background: rgba(0,0,0,0.04) !important; } [data-theme="light"] .bg-white\/\[0\.06\], [data-theme="light"] .bg-white\/\[0\.10\], [data-theme="light"] .bg-white\/\[0\.15\] { background: rgba(0,0,0,0.05) !important; } [data-theme="light"] .border-white\/20, [data-theme="light"] .border-white\/30 { border-color: rgba(0,0,0,0.12) !important; } [data-theme="light"] .bg-white\/15 { background: rgba(0,0,0,0.08) !important; } [data-theme="light"] .bg-black\/50 { background: rgba(0,0,0,0.06) !important; } /* Drop shadows — make them dark instead of light */ [data-theme="light"] .drop-shadow-sm { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08)); } /* ══════════════════════════════════ NAVIGATION ══════════════════════════════════ */ /* Mobile top bar / desktop sidebar */ [data-theme="light"] .fixed.left-0.top-0.z-\[100\] { isolation: isolate; background: rgba(245,244,240,0.08) !important; border-bottom: 1px solid rgba(26,26,26,0.045); transition: background-color 400ms ease-out, border-color 400ms ease-out; } /* Light-mode sidebar fade — soft white/cream veil instead of a dark shadow. */ [data-theme="light"] .fixed.left-0.top-0.z-\[100\]::before { content: '' !important; position: absolute; inset: 0; z-index: 0 !important; pointer-events: none; background: linear-gradient( to right, rgba(255,255,255,0.92) 0%, rgba(250,249,245,0.82) 18%, rgba(245,244,240,0.58) 42%, rgba(245,244,240,0.28) 68%, rgba(245,244,240,0.08) 88%, rgba(245,244,240,0) 100% ) !important; opacity: 1 !important; transition: opacity 400ms ease-out !important; } [data-theme="light"] .fixed.left-0.top-0.z-\[100\]::after { content: none !important; } [data-theme="light"] .fixed.left-0.top-0.z-\[100\] > * { position: relative; z-index: 1; } [data-theme="light"] .fixed.left-0.top-0.z-\[100\]:hover::before { opacity: 0 !important; } [data-theme="light"] .fixed.left-0.top-0.z-\[100\]:hover { background-color: rgba(232,230,222,0.28) !important; border-color: rgba(26,26,26,0.055); } /* Logo */ [data-theme="light"] .logo { color: #1a1a1a !important; text-shadow: none !important; } [data-theme="light"] .group:hover .logo { color: #ff3000 !important; } /* Desktop sidebar */ [data-theme="light"] nav.vertical-nav a { color: #1a1a1a; } [data-theme="light"] nav.vertical-nav a span:first-child { color: #a1a1aa; } [data-theme="light"] nav.vertical-nav a:hover { color: #ff3000 !important; } [data-theme="light"] nav.vertical-nav a.active { color: #ff3000 !important; text-shadow: 0 0 12px rgba(255,48,0,0.32); } [data-theme="light"] nav.vertical-nav a.active span:first-child { color: #ff3000 !important; } [data-theme="light"] nav.vertical-nav a.active::before { box-shadow: 0 0 8px rgba(255,48,0,0.42) !important; } /* Role markers */ [data-theme="light"] .mt-auto .text-xs.text-muted { color: #a1a1aa !important; } [data-theme="light"] .mt-auto .text-xs.text-muted::before { background-color: #d4d4d8 !important; } /* Mobile menu button */ [data-theme="light"] .mobile-menu-button { color: #1a1a1a !important; } /* Mobile nav overlay */ [data-theme="light"] .mobile-nav-overlay { background: rgba(245,244,240,0.97) !important; } [data-theme="light"] .mobile-nav-overlay .font-heading { color: #1a1a1a !important; } [data-theme="light"] .mobile-nav-overlay .text-accent, [data-theme="light"] .mobile-nav-overlay span.text-accent, [data-theme="light"] .mobile-nav-overlay a span:first-child { color: #ff3000 !important; } [data-theme="light"] .mobile-nav-close { color: #1a1a1a !important; } [data-theme="light"] .mobile-nav-close:hover { color: #ff3000 !important; } /* Page counter */ [data-theme="light"] .page-counter { color: #ff3000; } /* Sidebar theme toggle area */ [data-theme="light"] .theme-toggle-wrap { border-top-color: rgba(0,0,0,0.08) !important; } /* ══════════════════════════════════ HERO — SHARED ══════════════════════════════════ */ /* Big title text */ [data-theme="light"] .mega-text { color: #1a1a1a !important; } [data-theme="light"] .mega-text.text-outlined { -webkit-text-stroke-color: #1a1a1a !important; color: transparent !important; } /* Desktop hover — must override the base color with higher specificity */ [data-theme="light"] .mega-text:hover { color: #ff3000 !important; text-shadow: 0 0 30px rgba(255,48,0,0.3) !important; } [data-theme="light"] .mega-text.text-outlined:hover { -webkit-text-stroke-color: #ff3000 !important; color: transparent !important; } /* Mobile hover-accent still works with accent color */ [data-theme="light"] .mega-text.mobile-hover-active { color: #ff3000 !important; text-shadow: 0 0 25px rgba(255,48,0,0.35) !important; } [data-theme="light"] .mega-text.text-outlined.mobile-hover-active { -webkit-text-stroke-color: #ff3000 !important; } /* Background typo — the giant DIGITAL/letters */ [data-theme="light"] .absolute.inset-0.pointer-events-none span { -webkit-text-stroke-color: rgba(0,0,0,0.02) !important; } /* Hero ghost brand — visible, but still secondary to the main headline */ [data-theme="light"] .hero-brand-ghost { opacity: 0.14 !important; } [data-theme="light"] .hero-brand-ghost__text { -webkit-text-stroke-color: rgba(26,26,26,0.72) !important; text-stroke-color: rgba(26,26,26,0.72) !important; color: transparent !important; } /* Section number 01 */ [data-theme="light"] .font-display[class*="text-[clamp(5rem"], [data-theme="light"] .font-display.text-\[5rem\], [data-theme="light"] .font-display.text-\[4rem\], [data-theme="light"] .font-display.text-\[8rem\], [data-theme="light"] .section-number-display, [data-theme="light"] [class*="text-[rgba(255,255,255,0.05)"] { color: rgba(0,0,0,0.04) !important; } /* Hero description */ [data-theme="light"] .hero-description { color: #52525b !important; } /* Micro-stats row */ [data-theme="light"] [class*="text-muted"][class*="uppercase"][class*="tracking"] { color: #71717a !important; } /* Scroll indicator text */ [data-theme="light"] [class*="font-heading"][class*="text-[clamp(0.5rem"] { color: #1a1a1a !important; } /* Scroll progress bar line */ [data-theme="light"] [class*="w-[clamp(50px"] { background: rgba(0,0,0,0.06) !important; } /* Contact panel — hologram base */ [data-theme="light"] .hero-contact-panel { background: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; backdrop-filter: blur(12px); } [data-theme="light"] .hero-contact-panel .text-muted { color: #71717a !important; } [data-theme="light"] .hero-contact-panel .text-white, [data-theme="light"] .hero-contact-panel span:not(.text-muted) { color: #1a1a1a !important; } /* Hero icon buttons */ [data-theme="light"] .hero-icon-btn { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a1a !important; } [data-theme="light"] .hero-icon-btn:hover { background: rgba(0,0,0,0.08) !important; border-color: rgba(255,48,0,0.3) !important; color: #ff3000 !important; } /* Spinning badge SVG text */ [data-theme="light"] svg text { fill: rgba(26,26,26,0.4) !important; } /* Umlaut glyph colors in light mode */ [data-theme="light"] .umlaut-glyph::before { color: #1a1a1a !important; -webkit-text-fill-color: #1a1a1a !important; } [data-theme="light"] .umlaut-char::before { color: #1a1a1a !important; } [data-theme="light"] .mega-text.text-outlined .umlaut-char::before { -webkit-text-fill-color: #1a1a1a !important; } [data-theme="light"] .mega-text.text-outlined .umlaut-glyph::before { -webkit-text-fill-color: #1a1a1a !important; } /* Hero image treatment — reduce grayscale in light mode */ [data-theme="light"] img[alt*="Gorju media"], [data-theme="light"] img[alt*="gorju"] { grayscale: 30%; filter: grayscale(30%) contrast(1.05); box-shadow: 0 15px 50px rgba(0,0,0,0.1) !important; } /* Arrow link (Projekte ansehen, secondary CTA) */ [data-theme="light"] .bg-white { background: #1a1a1a !important; } [data-theme="light"] .border-white { border-color: #1a1a1a !important; } /* ══════════════════════════════════ HERO — MOBILE SPECIFIC ══════════════════════════════════ */ [data-theme="light"] .mobile-hero-shell { color: #1a1a1a; } [data-theme="light"] .mobile-hero-meta-item { color: #71717a; } [data-theme="light"] .mobile-hero-meta-item:first-child { color: #1a1a1a; } [data-theme="light"] .mobile-hero-meta-dot { background: #d4d4d8; } [data-theme="light"] .mobile-hero-stat-value { color: #1a1a1a; } [data-theme="light"] .mobile-hero-stat-label { color: #a1a1aa; } [data-theme="light"] .mobile-hero-stats { border-top-color: rgba(0,0,0,0.06); border-bottom-color: rgba(0,0,0,0.06); } [data-theme="light"] .mobile-hero-stat-sep { background: rgba(0,0,0,0.06); } [data-theme="light"] .mobile-hero-actions-contact { border-top-color: rgba(0,0,0,0.06); } [data-theme="light"] .mobile-hero-secondary { color: #1a1a1a; } [data-theme="light"] .mobile-hero-secondary .bg-white { background: #1a1a1a !important; } [data-theme="light"] .mobile-hero-secondary .border-white { border-color: #1a1a1a !important; } /* Est badge — keep accent BG white text */ [data-theme="light"] .bg-accent { background-color: #ff3000; color: #ffffff !important; } /* Hero image - reduce drop shadow in light mode */ [data-theme="light"] .mobile-hero-image img { filter: grayscale(30%) contrast(1.05) drop-shadow(0 15px 50px rgba(0,0,0,0.08)) !important; } /* Hero spinning badge text */ [data-theme="light"] .mobile-hero-badge svg text { fill: rgba(26,26,26,0.4) !important; } /* ══════════════════════════════════ AI STACK MARQUEE ══════════════════════════════════ */ [data-theme="light"] .ai-stack-line { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.06), transparent); } [data-theme="light"] .ai-stack-name { color: rgba(26,26,26,0.3); } [data-theme="light"] .ai-stack-name:hover { color: rgba(26,26,26,0.65); } [data-theme="light"] .ai-stack-separator { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), transparent); } [data-theme="light"] .ai-stack-minimal::before { background: linear-gradient(90deg, rgba(245,244,240,1) 0%, rgba(245,244,240,0.96) 28%, rgba(245,244,240,0.68) 62%, rgba(245,244,240,0) 100%) !important; } [data-theme="light"] .ai-stack-minimal::after { background: linear-gradient(270deg, rgba(245,244,240,1) 0%, rgba(245,244,240,0.96) 28%, rgba(245,244,240,0.68) 62%, rgba(245,244,240,0) 100%) !important; } /* ══════════════════════════════════ SECTION HEADERS (shared) ══════════════════════════════════ */ [data-theme="light"] h2, [data-theme="light"] h3 { color: #1a1a1a; } [data-theme="light"] .intro-headline { color: #1a1a1a; } [data-theme="light"] .intro-description { color: #52525b; } /* ══════════════════════════════════ WORK / PORTFOLIO ══════════════════════════════════ */ /* Mobile progress bar */ [data-theme="light"] .portfolio-scroll-progress { background: rgba(0,0,0,0.05); } /* Mobile card-spread cards */ [data-theme="light"] .card-spread-card, [data-theme="light"] .card-spread-card-sm { background: #e8e8e4; border-color: rgba(0,0,0,0.05); box-shadow: 0 4px 20px rgba(0,0,0,0.06); } [data-theme="light"] .card-spread-card .card-overlay, [data-theme="light"] .card-spread-card-sm .card-overlay { background: linear-gradient(to top, rgba(245,244,240,0.95) 0%, rgba(245,244,240,0.3) 50%, transparent 100%) !important; } [data-theme="light"] .card-spread-card .card-title, [data-theme="light"] .card-spread-card-sm .card-title { color: #1a1a1a !important; } [data-theme="light"] .card-spread-card .card-tag, [data-theme="light"] .card-spread-card-sm .card-tag { color: #ff3000 !important; } /* Desktop portfolio grid */ [data-theme="light"] .portfolio-item { border-color: rgba(0,0,0,0.06); box-shadow: 0 6px 25px rgba(0,0,0,0.06); } [data-theme="light"] .portfolio-item:hover { border-color: rgba(255,48,0,0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 40px rgba(255,48,0,0.08); } [data-theme="light"] .portfolio-item .absolute.inset-0.bg-gradient-to-t { background: linear-gradient(to top, rgba(245,244,240,0.95) 0%, rgba(245,244,240,0.15) 50%, transparent 100%) !important; } [data-theme="light"] .portfolio-item .project-overlay { background: linear-gradient(to top, rgba(245,244,240,0.97) 0%, transparent 100%) !important; } [data-theme="light"] .portfolio-item h3 { color: #1a1a1a; } [data-theme="light"] .portfolio-item:hover h3 { color: #ff3000; } [data-theme="light"] .portfolio-item p, [data-theme="light"] .portfolio-item .text-white\/70 { color: #52525b !important; } [data-theme="light"] .portfolio-item .text-accent { color: #ff3000; } /* ═══════════════════════════════════ SERVICES SECTION ═══════════════════════════════════ */ /* Mobile service spread cards */ [data-theme="light"] .spread-card { background: rgba(255,255,255,0.96) !important; border-color: rgba(0,0,0,0.06); box-shadow: 0 6px 25px rgba(0,0,0,0.08); } [data-theme="light"] .spread-card-number { color: rgba(0,0,0,0.04); } [data-theme="light"] .spread-card.spread-card-active .spread-card-number { color: rgba(255,48,0,0.1); } [data-theme="light"] .spread-card-title { color: #1a1a1a !important; } [data-theme="light"] .spread-card-icon { background: rgba(255,48,0,0.06) !important; } [data-theme="light"] .spread-card.spread-card-active .spread-card-icon { background: rgba(255,48,0,0.1) !important; box-shadow: 0 0 15px rgba(255,48,0,0.08) !important; } [data-theme="light"] .spread-card-divider { background: rgba(255,48,0,0.3); } [data-theme="light"] .spread-card.spread-card-active .spread-card-divider { background: #ff3000; box-shadow: 0 0 8px rgba(255,48,0,0.2); } [data-theme="light"] .spread-card-features li { color: #52525b; } [data-theme="light"] .spread-card-features li::before { background: #ff3000; } [data-theme="light"] .spread-card .service-cta-premium { color: #71717a; } [data-theme="light"] .spread-card.spread-card-active { border-color: rgba(255,48,0,0.2); box-shadow: 0 12px 35px rgba(0,0,0,0.08), 0 0 15px rgba(255,48,0,0.06) !important; } [data-theme="light"] .services-spread-progress { background: rgba(0,0,0,0.06); } /* Desktop service cards */ [data-theme="light"] .service-card-premium { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,0,0,0.05); box-shadow: 0 6px 25px rgba(0,0,0,0.05); } [data-theme="light"] .service-card-premium::before { background: linear-gradient(135deg, rgba(255,48,0,0) 0%, rgba(255,48,0,0.15) 25%, rgba(255,48,0,0) 50%, rgba(0,0,0,0.05) 75%, rgba(255,48,0,0) 100%); } [data-theme="light"] .service-card-premium::after { background: radial-gradient(ellipse at 50% 0%, rgba(255,48,0,0.04) 0%, transparent 60%); } [data-theme="light"] .service-card-premium:hover, [data-theme="light"] .service-card-premium.is-mobile-hovered { background: rgba(255,255,255,0.98) !important; border-color: rgba(255,48,0,0.25); box-shadow: 0 25px 50px rgba(0,0,0,0.08), 0 0 60px -20px rgba(255,48,0,0.12); } [data-theme="light"] .card-number-watermark { color: rgba(0,0,0,0.02) !important; } [data-theme="light"] .service-card-premium:hover .card-number-watermark, [data-theme="light"] .service-card-premium.is-mobile-hovered .card-number-watermark { color: rgba(255,48,0,0.05) !important; } [data-theme="light"] .service-title-premium { color: #1a1a1a; } [data-theme="light"] .service-title-premium::after { background: linear-gradient(90deg, #ff3000, #ff6a33); } /* Feature list — hover must NOT be white in light mode */ [data-theme="light"] .feature-list-premium li { color: #52525b !important; } [data-theme="light"] .feature-list-premium li::before { background: #ff3000; } [data-theme="light"] .service-card-premium:hover .feature-list-premium li, [data-theme="light"] .service-card-premium.is-mobile-hovered .feature-list-premium li { color: #1a1a1a !important; transform: translateX(5px); } [data-theme="light"] .service-card-premium:hover .feature-list-premium li::before, [data-theme="light"] .service-card-premium.is-mobile-hovered .feature-list-premium li::before { width: 12px; box-shadow: 0 0 10px rgba(255,48,0,0.4); } [data-theme="light"] .service-cta-premium { color: #71717a; } [data-theme="light"] .service-cta-premium:hover { color: #ff3000; } /* Icon glow ring */ [data-theme="light"] .icon-glow-ring { border-color: rgba(255,48,0,0.12); } /* ═══════════════════════════════════ PROCESS TIMELINE ("Unser Prozess") ═══════════════════════════════════ */ /* Background ambiance glow */ [data-theme="light"] .process-ambiance-glow { background: radial-gradient(circle, rgba(255,48,0,0.03) 0%, transparent 70%); } /* Center vertical line */ [data-theme="light"] .process-center-line { background: rgba(0,0,0,0.06); } /* Progress fill line */ [data-theme="light"] .process-progress-line { background: linear-gradient(180deg, transparent, #ff3000, #ff8a00, #ff3000, transparent); } /* Timeline dot */ [data-theme="light"] .process-node-dot { background: #e5e5e0 !important; border-color: rgba(0,0,0,0.15) !important; box-shadow: 0 0 0 6px #f5f4f0 !important; } [data-theme="light"] .process-node.active .process-node-dot { background: #ff3000 !important; border-color: #ff3000 !important; box-shadow: 0 0 0 6px #f5f4f0, 0 0 20px 4px rgba(255,48,0,0.3) !important; } /* The process card itself */ [data-theme="light"] .process-card-content { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,0,0,0.06) !important; box-shadow: 0 6px 25px rgba(0,0,0,0.05); } [data-theme="light"] .process-card-content:hover { border-color: rgba(255,48,0,0.25) !important; box-shadow: 0 15px 40px -10px rgba(0,0,0,0.1), 0 0 30px -5px rgba(255,48,0,0.1) !important; } [data-theme="light"] .process-node.active .process-card-content { border-color: rgba(255,48,0,0.15) !important; } /* Big number watermark */ [data-theme="light"] .process-card-num { color: rgba(0,0,0,0.02) !important; } [data-theme="light"] .process-card-content:hover .process-card-num, [data-theme="light"] .process-node.active .process-card-num { color: rgba(255,48,0,0.04) !important; } /* Card title — gradient text */ [data-theme="light"] .process-card-title { background: linear-gradient(90deg, #1a1a1a, #71717a) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="light"] .process-card-content:hover .process-card-title, [data-theme="light"] .process-node.active .process-card-title { background: linear-gradient(90deg, #ff3000, #ff8a00) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Feature list items */ [data-theme="light"] .process-card-features li { color: #52525b !important; } [data-theme="light"] .process-card-content:hover .process-card-features li, [data-theme="light"] .process-node.active .process-card-features li { color: #3f3f46 !important; } [data-theme="light"] .process-card-features li svg { stroke: #a1a1aa !important; } [data-theme="light"] .process-card-content:hover .process-card-features li svg, [data-theme="light"] .process-node.active .process-card-features li svg { stroke: #ff3000 !important; } /* Visual shape decor rings */ [data-theme="light"] .process-visual-shape { border-color: rgba(0,0,0,0.06); } [data-theme="light"] .process-visual-shape::before { border-color: rgba(255,48,0,0.08); } [data-theme="light"] .process-visual-shape::after { border-color: rgba(0,0,0,0.03); } [data-theme="light"] .process-node.active .process-visual-shape { border-color: rgba(255,48,0,0.2); box-shadow: inset 0 0 30px rgba(255,48,0,0.05); } [data-theme="light"] .process-node.active .process-visual-shape::before { border-color: rgba(255,48,0,0.3); } [data-theme="light"] .process-node.active .process-visual-shape::after { border-color: rgba(0,0,0,0.06); } [data-theme="light"] .process-icon-svg { stroke: rgba(0,0,0,0.15); } [data-theme="light"] .process-node.active .process-icon-svg { stroke: #ff3000; } /* Old process timeline classes (fallback) */ [data-theme="light"] .process-line-track { background: rgba(0,0,0,0.05); } [data-theme="light"] .process-card-spectacular { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.05); } [data-theme="light"] .process-number { border-color: rgba(0,0,0,0.06); color: #71717a; } [data-theme="light"] .process-name { color: #1a1a1a; } [data-theme="light"] .process-desc { color: #52525b; } [data-theme="light"] .floating-accent-line { opacity: 0.12; } /* ══════════════════════════════════ ABOUT SECTION ══════════════════════════════════ */ /* Mobile cinematic */ [data-theme="light"] .about-cinematic-inner { background: #f5f4f0; } [data-theme="light"] .about-cine-image img { filter: grayscale(20%) contrast(1.05); box-shadow: 0 15px 40px rgba(0,0,0,0.08); } [data-theme="light"] .about-cine-gradient { background: linear-gradient(to bottom, transparent 50%, #f5f4f0 96%) !important; } [data-theme="light"] .about-cine-name { color: #1a1a1a !important; } [data-theme="light"] .about-cine-role { color: #71717a !important; } [data-theme="light"] .about-cine-badge { background: rgba(0,0,0,0.03); color: #71717a; } [data-theme="light"] .about-cine-line { background: rgba(0,0,0,0.06); } [data-theme="light"] .about-cine-dot { background: rgba(0,0,0,0.1); } [data-theme="light"] .about-cine-dot.active { background: #ff3000; box-shadow: 0 0 8px rgba(255,48,0,0.4); } /* Mobile bottom text */ [data-theme="light"] .about-mobile-bottom { background: #f5f4f0; } [data-theme="light"] .about-mobile-bottom p { color: #52525b; } [data-theme="light"] .about-mobile-cta { border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.03); color: #1a1a1a; } [data-theme="light"] .about-mobile-cta:active { background: #ff3000; border-color: #ff3000; color: #fff; } /* Desktop about grid */ [data-theme="light"] .about-reveal .overflow-hidden.mb-6 { border-color: rgba(0,0,0,0.06); } [data-theme="light"] .about-reveal .overflow-hidden.mb-6 .absolute.inset-0.bg-gradient-to-t { background: linear-gradient(to top, rgba(245,244,240,0.4), transparent) !important; } /* Caption */ [data-theme="light"] .font-heading.text-\[0\.8rem\].text-muted { color: #71717a; } /* Expertise blocks — transparent on desktop, subtle bg only on mobile */ [data-theme="light"] .expertise-block { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.04); } @media (min-width: 480px) { [data-theme="light"] .expertise-block { background: transparent !important; border-color: transparent !important; } } [data-theme="light"] .expertise-block div:last-child { color: #71717a; } [data-theme="light"] .expertise-block:hover { background: rgba(0,0,0,0.04); border-color: rgba(255,48,0,0.3); box-shadow: 0 10px 20px rgba(0,0,0,0.05); } @media (min-width: 480px) { [data-theme="light"] .expertise-block:hover { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } } /* Signature section */ [data-theme="light"] .border-t.border-white\/10 { border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] a.flex.items-center.justify-center[class*="border-white"] { border-color: rgba(0,0,0,0.1) !important; background: rgba(0,0,0,0.03) !important; color: #1a1a1a !important; } [data-theme="light"] a.flex.items-center.justify-center[class*="border-white"]:hover { background: #ff3000 !important; border-color: #ff3000 !important; color: #ffffff !important; } [data-theme="light"] a.flex.items-center.justify-center svg.fill-current { fill: currentColor; } /* ══════════════════════════════════ TESTIMONIALS SECTION ══════════════════════════════════ */ /* Desktop masonry cards */ [data-theme="light"] .testimonial-card-modern { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.05); box-shadow: 0 6px 25px rgba(0,0,0,0.05); } [data-theme="light"] .testimonial-card-modern:hover { border-color: rgba(255,48,0,0.2); box-shadow: 0 20px 40px rgba(0,0,0,0.06), 0 0 40px -10px rgba(255,48,0,0.1); } [data-theme="light"] .testimonial-card-modern::before { background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,48,0,0.04), transparent 40%); } [data-theme="light"] .quote-watermark { color: rgba(0,0,0,0.02); } [data-theme="light"] .testimonial-card-modern:hover .quote-watermark { color: rgba(255,48,0,0.04); } [data-theme="light"] .testimonial-modern-quote { color: #3f3f46; } [data-theme="light"] .testimonial-modern-quote strong { -webkit-text-fill-color: #1a1a1a; background: linear-gradient(90deg, #1a1a1a, #ff3000); -webkit-background-clip: text; } [data-theme="light"] .testimonial-modern-author { border-top-color: rgba(0,0,0,0.05); } [data-theme="light"] .testimonial-modern-name { color: #1a1a1a; } [data-theme="light"] .testimonial-modern-role { color: #71717a; } [data-theme="light"] .testimonial-modern-avatar img { filter: grayscale(0%); } [data-theme="light"] .testimonial-modern-avatar { border-color: rgba(255,48,0,0.3); } /* Mobile stack cards */ [data-theme="light"] .testimonial-card-stack-item { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.05); box-shadow: 0 8px 30px rgba(0,0,0,0.06); } /* Use double-class specificity to beat component @media rules */ [data-theme="light"] .testimonial-card-stack-item .stack-quote { color: #3f3f46 !important; } [data-theme="light"] .testimonial-card-stack-item .stack-name { color: #1a1a1a !important; } [data-theme="light"] .testimonial-card-stack-item .stack-role { color: #71717a !important; } [data-theme="light"] .testimonial-card-stack-item .stack-badge { color: #ff3000; } [data-theme="light"] .testimonial-card-stack-item .stack-stars svg { fill: #ff3000; } [data-theme="light"] .testimonial-card-stack-item .stack-dot { background: rgba(0,0,0,0.1); } [data-theme="light"] .stack-counter { color: rgba(0,0,0,0.25); } [data-theme="light"] .stack-dots { bottom: 2rem; } /* Desktop cards — same specificity boost with !important to be safe */ [data-theme="light"] .testimonial-card-modern .testimonial-modern-quote { color: #3f3f46 !important; } [data-theme="light"] .testimonial-card-modern .testimonial-modern-quote strong { -webkit-text-fill-color: #1a1a1a; background: linear-gradient(90deg, #1a1a1a, #ff3000); -webkit-background-clip: text; } [data-theme="light"] .testimonial-card-modern .testimonial-modern-name { color: #1a1a1a !important; } [data-theme="light"] .testimonial-card-modern .testimonial-modern-role { color: #71717a !important; } [data-theme="light"] .testimonial-card-modern .testimonial-modern-author { border-top-color: rgba(0,0,0,0.05) !important; } /* Star ratings */ [data-theme="light"] .star-rating-modern svg { fill: #ff3000; } /* Badge dot */ [data-theme="light"] .testimonial-modern-badge::before { background: #ff3000; box-shadow: 0 0 8px rgba(255,48,0,0.6); } /* ══════════════════════════════════ CONTACT SECTION ══════════════════════════════════ */ [data-theme="light"] .contact-hero-title { background: linear-gradient(135deg, #1a1a1a 0%, rgba(26,26,26,0.55) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="light"] .contact-method-row { border-top-color: rgba(0,0,0,0.05); } [data-theme="light"] .contact-method-row:last-child { border-bottom-color: rgba(0,0,0,0.05); } @media (min-width: 1024px) { [data-theme="light"] .contact-method-row:hover { background: linear-gradient(90deg, rgba(0,0,0,0.03) 0%, transparent 100%); } } [data-theme="light"] .contact-row-title { color: #1a1a1a; } [data-theme="light"] .contact-method-row:hover .contact-row-title { color: #ff3000; } [data-theme="light"] .contact-row-icon { color: rgba(0,0,0,0.12); } [data-theme="light"] .contact-method-row:hover .contact-row-icon { color: #ff3000; } [data-theme="light"] .contact-row-desc { color: #71717a !important; } [data-theme="light"] .contact-method-row:hover .contact-row-desc { color: #3f3f46 !important; } [data-theme="light"] .contact-reveal p { color: #52525b; } /* Glass panel (HQ info) */ [data-theme="light"] .contact-glass-panel { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,0,0,0.05) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.05); } [data-theme="light"] .contact-glass-panel::after { background: radial-gradient(circle, rgba(255,48,0,0.06) 0%, transparent 70%); } [data-theme="light"] .contact-glass-panel .text-white, [data-theme="light"] .contact-glass-panel .text-white\/90 { color: #1a1a1a !important; } [data-theme="light"] .contact-glass-panel .text-muted\/80 { color: #71717a !important; } /* Availability box */ [data-theme="light"] [class*="border-white/5"][class*="bg-white"] { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .bg-black\/50 { background: rgba(0,0,0,0.06) !important; } [data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.08) !important; } /* Floating CTA menu gradient divider — via-white/10 needs dark version in light mode */ [data-theme="light"] .contact-menu .via-white\/10 { --tw-gradient-via: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.08); } /* Floating CTA icon buttons (WhatsApp / Email / Phone) — ensure visible bg */ [data-theme="light"] .contact-menu a[class*="bg-white"], [data-theme="light"] .contact-menu button[class*="bg-white"] { background: rgba(0,0,0,0.03) !important; } [data-theme="light"] .contact-menu a[class*="bg-white"]:hover, [data-theme="light"] .contact-menu button[class*="bg-white"]:hover { background-color: rgba(0,0,0,0.06) !important; } /* Onboarding hero card — make it light with accent pop */ [data-theme="light"] .onboarding-card-breathe, [data-theme="light"] [class*="bg-[#0c0c0c]"], [data-theme="light"] .bg-\[\#0c0c0c\]\/80, [data-theme="light"] .rounded-\[20px\].backdrop-blur-xl, [data-theme="light"] .onboarding-card-breathe.onboarding-card-shine { background: #ffffff !important; border-color: rgba(255,48,0,0.15) !important; } [data-theme="light"] .onboarding-card-breathe:hover, [data-theme="light"] .group:hover .onboarding-card-breathe { border-color: rgba(255,48,0,0.35) !important; box-shadow: 0 20px 50px rgba(255,48,0,0.1) !important; } /* Text inside the onboarding card */ [data-theme="light"] #onboarding-hero-card .text-white, [data-theme="light"] #onboarding-hero-card [class*="text-white/"] { color: #1a1a1a !important; } [data-theme="light"] #onboarding-hero-card .text-accent { color: #ff3000 !important; } /* Arrow circle inside onboarding card */ [data-theme="light"] #onboarding-hero-card [class*="border-white"], [data-theme="light"] #onboarding-hero-card [class*="bg-white/5"] { border-color: rgba(0,0,0,0.08) !important; background: rgba(0,0,0,0.03) !important; } /* Sweep shine — make it dark-tinted for light bg */ [data-theme="light"] .onboarding-card-shine::before { background: linear-gradient(to right, transparent, rgba(0,0,0,0.01), rgba(0,0,0,0.03), rgba(0,0,0,0.01), transparent) !important; } /* Map container */ [data-theme="light"] .map-ultra-container { background: #e8e8e4 !important; border-color: rgba(0,0,0,0.08) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important; } [data-theme="light"] .map-ultra-container::after { box-shadow: inset 0 0 30px rgba(0,0,0,0.05) !important; } /* Leaflet popup override */ [data-theme="light"] .leaflet-popup-content-wrapper { background: #ffffff; color: #1a1a1a; box-shadow: 0 8px 25px rgba(0,0,0,0.1); } [data-theme="light"] .leaflet-popup-tip { background: #ffffff; } /* "Klassischer Kontakt" divider */ [data-theme="light"] .bg-gradient-to-r.from-transparent.via-white\/20 { background: linear-gradient(to right, transparent, rgba(0,0,0,0.08), transparent) !important; } [data-theme="light"] .h-\[1px\].bg-gradient-to-r { background: linear-gradient(to right, transparent, rgba(0,0,0,0.06), transparent) !important; } /* Section "Standort Karte" header */ [data-theme="light"] .text-white.font-heading, [data-theme="light"] .font-heading[class*="text-white"] { color: #1a1a1a !important; } /* ══════════════════════════════════ FOOTER ══════════════════════════════════ */ [data-theme="light"] footer { background: #f5f4f0 !important; } [data-theme="light"] footer .absolute.top-0.left-0.right-0.h-px { background: linear-gradient(to right, transparent, rgba(255,48,0,0.25), transparent) !important; } [data-theme="light"] footer .absolute.top-0.left-1\\/4.right-1\\/4.h-px { background: linear-gradient(to right, transparent, rgba(0,0,0,0.04), transparent) !important; } [data-theme="light"] footer .absolute.-top-20 { background: rgba(255,48,0,0.03) !important; } [data-theme="light"] footer .absolute.bottom-0.right-10 { background: rgba(255,48,0,0.04) !important; } [data-theme="light"] footer .absolute.bottom-0.left-10 { background: rgba(0,0,0,0.015) !important; } [data-theme="light"] footer .bg-gradient-to-b { background: linear-gradient(to bottom, rgba(0,0,0,0.015), transparent) !important; border-color: rgba(0,0,0,0.04) !important; } [data-theme="light"] footer .font-display { color: #1a1a1a; } [data-theme="light"] footer .text-muted\/80 { color: #71717a !important; } [data-theme="light"] footer a { color: #a1a1aa; } [data-theme="light"] footer a:hover { color: #1a1a1a; } [data-theme="light"] footer .text-muted\/40 { color: #a1a1aa !important; } [data-theme="light"] footer .absolute.bottom-0.left-0.right-0.h-8 { background: linear-gradient(to top, rgba(245,244,240,0.5), transparent) !important; } /* Footer separator spans */ [data-theme="light"] footer .bg-muted\/20 { background: rgba(0,0,0,0.1) !important; } /* ══════════════════════════════════ FLOATING CTA & MENU ══════════════════════════════════ */ /* Keep the accent circle but fix the popup */ [data-theme="light"] .contact-menu { background: rgba(255,255,255,0.95) !important; border-color: rgba(0,0,0,0.06) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.1) !important; backdrop-filter: blur(20px); } [data-theme="light"] .contact-menu .text-muted { color: #71717a !important; } [data-theme="light"] .contact-menu .text-muted\/60 { color: #a1a1aa !important; } [data-theme="light"] .contact-menu .text-white { color: #1a1a1a !important; } [data-theme="light"] .contact-menu .bg-background\/95 { background: rgba(255,255,255,0.9) !important; } [data-theme="light"] .contact-menu .bg-background\/90 { background: rgba(255,255,255,0.9) !important; } [data-theme="light"] .contact-menu .border-white\/10 { border-color: rgba(0,0,0,0.08) !important; } /* Tooltip */ [data-theme="light"] .bg-background\/90 { background: rgba(255,255,255,0.9) !important; } /* CTA button active state (when menu open) */ [data-theme="light"] .cta-active .bg-white { background: #ffffff !important; } /* ══════════════════════════════════ MOUSE FOLLOWER ══════════════════════════════════ */ [data-theme="light"] .mouse-follower { background: rgba(255,48,0,0.12) !important; } /* ══════════════════════════════════ LOADER ══════════════════════════════════ */ [data-theme="light"] #loader { background-color: #f5f4f0 !important; } [data-theme="light"] #loader .text-accent { color: #ff3000 !important; } [data-theme="light"] #loader .text-muted { color: #71717a !important; } [data-theme="light"] #loader .text-white { color: #1a1a1a !important; } /* ══════════════════════════════════ ONBOARDING MODAL — Light Theme Inverts dark colors to light/cream. ══════════════════════════════════ */ /* Overlay: light bg */ [data-theme="light"] .ob-overlay, [data-theme="light"] .ob-overlay.ob-open { background: #f5f4f0 !important; color: #1a1a1a !important; color-scheme: light !important; } [data-theme="light"] .ob-overlay *, [data-theme="light"] .ob-overlay *::before, [data-theme="light"] .ob-overlay *::after { color-scheme: light !important; } /* Top bar */ [data-theme="light"] .ob-overlay .ob-topbar { background: rgba(245,244,240,0.95) !important; border-bottom-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .ob-overlay .ob-progress-track { background: rgba(0,0,0,0.06) !important; } [data-theme="light"] .ob-overlay .ob-progress-bar { background: linear-gradient(90deg, #ff3000, #ff6b00) !important; } /* Top bar buttons */ [data-theme="light"] .ob-overlay .ob-topbar-btn { color: rgba(0,0,0,0.25) !important; background: none !important; } [data-theme="light"] .ob-overlay .ob-topbar-btn:hover { color: rgba(0,0,0,0.6) !important; background: rgba(0,0,0,0.04) !important; } /* CTA buttons — keep accent gradient */ [data-theme="light"] .ob-overlay .ob-cta { background: linear-gradient(135deg, #ff3000, #ff5500) !important; color: #fff !important; } [data-theme="light"] .ob-overlay .ob-cta-ghost { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.08) !important; color: rgba(0,0,0,0.4) !important; } [data-theme="light"] .ob-overlay .ob-cta-ghost:hover { background: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.7) !important; } /* Typography */ [data-theme="light"] .ob-overlay .ob-title { color: #1a1a1a !important; } [data-theme="light"] .ob-overlay .ob-subtitle, [data-theme="light"] .ob-overlay .ob-input-hint { color: rgba(0,0,0,0.35) !important; } [data-theme="light"] .ob-overlay .ob-tag { color: rgba(255,48,0,0.7) !important; } [data-theme="light"] .ob-overlay .ob-step-label { color: rgba(0,0,0,0.2) !important; } [data-theme="light"] .ob-overlay .ob-success-sub { color: rgba(0,0,0,0.4) !important; } [data-theme="light"] .ob-overlay .ob-content { color: #1a1a1a !important; } /* Inputs */ [data-theme="light"] .ob-overlay input:not([type="checkbox"]):not([type="hidden"]), [data-theme="light"] .ob-overlay textarea { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a1a !important; } [data-theme="light"] .ob-overlay input:not([type="checkbox"]):not([type="hidden"])::placeholder, [data-theme="light"] .ob-overlay textarea::placeholder { color: rgba(0,0,0,0.2) !important; } [data-theme="light"] .ob-overlay input:not([type="checkbox"]):not([type="hidden"]):focus, [data-theme="light"] .ob-overlay textarea:focus { border-color: rgba(255,48,0,0.4) !important; box-shadow: 0 0 20px rgba(255,48,0,0.06) !important; } /* Option cards */ [data-theme="light"] .ob-overlay .ob-opt { background: rgba(0,0,0,0.015) !important; border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .ob-overlay .ob-opt::before { background: linear-gradient(135deg, rgba(255,48,0,0.1), rgba(255,48,0,0.03)) !important; } [data-theme="light"] .ob-overlay .ob-opt:hover { background: rgba(255,48,0,0.04) !important; border-color: rgba(255,48,0,0.25) !important; } [data-theme="light"] .ob-overlay .ob-opt-title { color: rgba(0,0,0,0.8) !important; } [data-theme="light"] .ob-overlay .ob-opt-sub { color: rgba(0,0,0,0.3) !important; } [data-theme="light"] .ob-overlay .ob-opt-flash { border-color: #ff3000 !important; background: rgba(255,48,0,0.06) !important; } /* Pills */ [data-theme="light"] .ob-overlay .ob-pill { background: rgba(0,0,0,0.015) !important; border-color: rgba(0,0,0,0.06) !important; color: rgba(0,0,0,0.55) !important; } [data-theme="light"] .ob-overlay .ob-pill:hover { color: #1a1a1a !important; border-color: rgba(255,48,0,0.3) !important; background: rgba(255,48,0,0.04) !important; } [data-theme="light"] .ob-overlay .ob-pill-flash { border-color: #ff3000 !important; color: #1a1a1a !important; background: rgba(255,48,0,0.06) !important; } /* Tiles */ [data-theme="light"] .ob-overlay .ob-tile { background: rgba(0,0,0,0.015) !important; border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .ob-overlay .ob-tile::before { background: linear-gradient(135deg, rgba(255,48,0,0.1), rgba(255,48,0,0.03)) !important; } [data-theme="light"] .ob-overlay .ob-tile:hover { background: rgba(255,48,0,0.04) !important; border-color: rgba(255,48,0,0.25) !important; } [data-theme="light"] .ob-overlay .ob-tile-label { color: rgba(0,0,0,0.6) !important; } [data-theme="light"] .ob-overlay .ob-tile-flash { border-color: #ff3000 !important; background: rgba(255,48,0,0.06) !important; } /* Submit button */ [data-theme="light"] .ob-overlay .ob-submit { background: linear-gradient(135deg, #ff3000, #ff5500) !important; color: #fff !important; } /* Privacy row */ [data-theme="light"] .ob-overlay .ob-privacy-row { color: rgba(0,0,0,0.3) !important; } [data-theme="light"] .ob-overlay .ob-privacy-row a { color: #ff3000 !important; } /* Summary card */ [data-theme="light"] .ob-overlay .ob-summary-card { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.06) !important; } [data-theme="light"] .ob-overlay .ob-skey { color: rgba(0,0,0,0.3) !important; } [data-theme="light"] .ob-overlay .ob-sval { color: rgba(0,0,0,0.8) !important; } [data-theme="light"] .ob-overlay .ob-summary-row { border-bottom-color: rgba(0,0,0,0.04) !important; } /* Success icon */ [data-theme="light"] .ob-overlay .ob-success-icon { background: linear-gradient(135deg, #ff3000, #ff6b00) !important; } [data-theme="light"] .ob-overlay .ob-check { color: #fff !important; } /* Background orbs */ [data-theme="light"] .ob-overlay .ob-bg-orb-1 { background: rgba(255,48,0,0.03) !important; } [data-theme="light"] .ob-overlay .ob-bg-orb-2 { background: rgba(255,48,0,0.02) !important; } /* Close final */ [data-theme="light"] .ob-overlay .ob-close-final { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.08) !important; color: rgba(0,0,0,0.4) !important; } /* Email form inputs */ [data-theme="light"] .ob-overlay .ob-form-input, [data-theme="light"] .ob-overlay .ob-form-textarea { background: rgba(0,0,0,0.02) !important; border-color: rgba(0,0,0,0.08) !important; color: #1a1a1a !important; } [data-theme="light"] .ob-overlay .ob-form-input::placeholder, [data-theme="light"] .ob-overlay .ob-form-textarea::placeholder { color: rgba(0,0,0,0.18) !important; } [data-theme="light"] .ob-overlay .ob-form-input:focus, [data-theme="light"] .ob-overlay .ob-form-textarea:focus { border-color: rgba(255,48,0,0.4) !important; } /* ══════════════════════════════════ MOBILE LIGHT MODE — COMPREHENSIVE FIXES Elements that were still dark/light-colored in mobile light mode ══════════════════════════════════ */ /* ── Hero: Image fade gradient at bottom ── */ [data-theme="light"] .mobile-hero-visual::after { background: linear-gradient(to bottom, transparent 62%, rgba(245,244,240,0.98) 96%) !important; } /* ── Hero: Meta separator dots ── */ [data-theme="light"] .mobile-hero-meta-sep { background: rgba(0,0,0,0.1) !important; } /* ── Hero: Background "D" letter ── */ [data-theme="light"] .mobile-hero-index { color: rgba(0,0,0,0.03) !important; } /* ── Hero: Arrow line in secondary CTA ── */ [data-theme="light"] .mobile-hero-secondary .arrow-line { background: #1a1a1a !important; } [data-theme="light"] .mobile-hero-secondary .arrow-line::after { border-top-color: #1a1a1a !important; border-right-color: #1a1a1a !important; } /* ── Hero: Mobile hero copy description specificity boost ── */ [data-theme="light"] .mobile-hero-copy .hero-description { color: #52525b !important; } /* ── About Cinematic: Dark overlay on image ── */ [data-theme="light"] .about-cine-overlay { background: #f5f4f0 !important; } /* ── About Cinematic: Stats ── */ [data-theme="light"] .about-cine-stat-num { color: rgba(0,0,0,0.85) !important; } [data-theme="light"] .about-cine-stat-label { color: rgba(0,0,0,0.4) !important; } /* ── About Cinematic: Tagline ── */ [data-theme="light"] .about-cine-tagline { color: #52525b !important; } /* ── Services: Intro headline gradient text ── */ [data-theme="light"] .intro-headline { background: linear-gradient(135deg, #1a1a1a 0%, rgba(26,26,26,0.65) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ── Process: Old title gradient (fallback) ── */ [data-theme="light"] .process-title-spectacular { background: linear-gradient(90deg, #1a1a1a, #71717a) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } [data-theme="light"] .process-card-spectacular:hover .process-title-spectacular { background: linear-gradient(90deg, #ff3000, #ff8a00) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ── Process: Old description text ── */ [data-theme="light"] .process-desc-spectacular { color: #52525b !important; } [data-theme="light"] .process-card-spectacular:hover .process-desc-spectacular { color: #3f3f46 !important; } /* ── Process: Old dot ── */ [data-theme="light"] .process-dot { background: #e5e5e0 !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 0 0 4px #f5f4f0 !important; } [data-theme="light"] .process-card-spectacular:hover .process-dot { background: #ff3000 !important; border-color: #ff3000 !important; } /* ── Testimonials: Stack quote strong gradient fix (high specificity) ── */ [data-theme="light"] .testimonial-card-stack-item .stack-quote strong { background: linear-gradient(90deg, #1a1a1a, #ff3000) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ── Testimonials: Stack author border ── */ [data-theme="light"] .testimonial-card-stack-item .stack-author { border-top-color: rgba(0,0,0,0.06) !important; } /* ── Testimonials: Stack avatar border ── */ [data-theme="light"] .testimonial-card-stack-item .stack-avatar { border-color: rgba(255,48,0,0.3) !important; } /* ── Testimonials: Stack dots (progress indicators) ── */ [data-theme="light"] .testimonial-card-stack-item .stack-dot { background: rgba(0,0,0,0.1) !important; } [data-theme="light"] .stack-dot.stack-dot-active { background: #ff3000 !important; } /* ── Testimonials: Stack counter ── */ [data-theme="light"] .testimonials-stack-inner .stack-counter { color: rgba(0,0,0,0.25) !important; } /* ── Portfolio: Mobile card description fix ── */ [data-theme="light"] .portfolio-card-mobile .card-content .card-tag { color: #ff3000 !important; } /* ══════════════════════════════════ THEME TOGGLE BUTTON Sleek inline track toggle matching sidebar nav language ══════════════════════════════════ */ .theme-toggle-btn { display: flex; align-items: center; gap: 0.85rem; cursor: pointer; border: none; background: none; padding: 0.2rem 0; color: #71717a; font-family: 'Syncopate', sans-serif; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; transition: color 0.3s ease; -webkit-tap-highlight-color: transparent; } .theme-toggle-btn:hover { color: #ff3000; } /* Track — thin pill */ .theme-toggle-track { position: relative; display: inline-block; width: 54px; height: 28px; background: rgba(255,255,255,0.08); border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); flex-shrink: 0; } /* Thumb — accent dot */ .theme-toggle-thumb { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #71717a; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .theme-toggle-btn:hover .theme-toggle-thumb { background: #ff3000; box-shadow: 0 0 6px rgba(255,48,0,0.4); } /* Light mode state — thumb slides right, track lightens */ [data-theme="light"] .theme-toggle-track { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.1); } [data-theme="light"] .theme-toggle-thumb { left: 30px; background: #ff3000; box-shadow: none; } [data-theme="light"] .theme-toggle-btn:hover .theme-toggle-thumb { background: #ff3000; box-shadow: 0 0 6px rgba(255,48,0,0.3); } /* Text label */ .theme-toggle-text { transition: color 0.3s ease; } /* Desktop fallback placement — keeps the toggle available even when sidebar content is compressed */ .desktop-theme-toggle-fixed { display: none; } @media (min-width: 769px) { .desktop-theme-toggle-fixed { position: fixed; left: clamp(2.8rem, 4vw, 4.2rem); bottom: clamp(1.1rem, 2.5vh, 2rem); z-index: 250; display: flex; align-items: center; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,0.08); pointer-events: auto; } .desktop-theme-toggle-fixed .theme-toggle-btn { color: rgba(255,255,255,0.5); } /* Keep sidebar role markers clear of the fixed desktop toggle. */ .fixed.left-0.top-0.z-\[100\] .mt-auto { padding-bottom: clamp(3rem, 6vh, 4.5rem) !important; } .mt-auto > .theme-toggle-wrap:not(.desktop-theme-toggle-fixed), .mt-auto .theme-toggle-wrap:not(.desktop-theme-toggle-fixed) { display: none !important; } } [data-theme="light"] .desktop-theme-toggle-fixed { border-top-color: rgba(0,0,0,0.08) !important; } [data-theme="light"] .desktop-theme-toggle-fixed .theme-toggle-btn { color: rgba(26,26,26,0.52) !important; } [data-theme="light"] .desktop-theme-toggle-fixed .theme-toggle-btn:hover { color: #ff3000 !important; } /* Sidebar theme toggle area */ [data-theme="light"] .theme-toggle-wrap { border-top-color: rgba(0,0,0,0.08) !important; } /* Remove old label/button styles */ .theme-toggle-label { display: none; }