/* ─── THEME (LIGHT MODE OVERRIDES) ─────────── */ /* Variables below override the dark defaults declared inline on each page when is set by theme.js. */ html[data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f6f8fc; --bg-tertiary: #eef2f8; --bg-card: #ffffff; --bg-card-hover: #f4f7fb; --bg-light: #0a0e17; --bg-light-alt: #111827; --text-primary: #0a0e17; --text-secondary: #4a5568; --text-muted: #6b7280; --text-dark: #ffffff; --text-dark-secondary: #d1d5db; --accent: #00a685; --accent-bright: #00c39d; --accent-dim: #007a63; --accent-warm: #c2721c; --accent-warm-bright: #d88528; --border: rgba(10, 14, 23, 0.09); --border-accent: rgba(0, 166, 133, 0.3); --border-hover: rgba(0, 166, 133, 0.55); --shadow-sm: 0 1px 3px rgba(10, 14, 23, 0.06); --shadow-md: 0 4px 16px rgba(10, 14, 23, 0.08); --shadow-lg: 0 12px 40px rgba(10, 14, 23, 0.12); --shadow-glow: 0 0 24px rgba(0, 166, 133, 0.18); } /* Smooth transition when toggling */ html.theme-ready body, html.theme-ready body * { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* ─── COMPONENT FIXES ──────────────────────── */ /* Nav scrolled bg is hardcoded dark in nav.css — invert for light. */ html[data-theme="light"] .nav.scrolled { background: rgba(255, 255, 255, 0.88); box-shadow: 0 1px 0 var(--border), var(--shadow-sm); } /* Nav-link hover uses rgba(255,255,255,0.04) — invisible on white. */ html[data-theme="light"] .nav-link:hover { background: rgba(10, 14, 23, 0.04); } /* Logo SVG mixes #ffffff (disc + text) and #000000 (arrow cut-outs). A plain invert() flips both: disc → black, cut-outs → white (invisible on the white page background, so they read as cut-outs — correct). */ html[data-theme="light"] .nav-logo-img { filter: invert(1); } /* Client logos are rendered white via an feColorMatrix inside each SVG, then the page CSS applies `filter: brightness(0) invert(1)` to keep them white. In light mode we want them dark, so cancel the invert() and bump opacity. */ html[data-theme="light"] .clients-track img { filter: brightness(0) !important; opacity: 0.55; } html[data-theme="light"] .clients-track img:hover { opacity: 0.95; } /* Dropdown hover bg is faint teal — keep, but fine-tune for clarity. */ html[data-theme="light"] .nav-dropdown a:hover, html[data-theme="light"] .nav-mobile-dropdown a:hover { background: rgba(0, 166, 133, 0.08); } /* contact-form.css uses a hardcoded rgba(255,255,255,0.15) on form-back hover */ html[data-theme="light"] .form-back:hover { border-color: rgba(10, 14, 23, 0.18); } /* Noise overlay: slightly stronger on light to keep texture visible. */ html[data-theme="light"] body::before { opacity: 0.04; mix-blend-mode: multiply; } /* Hamburger lines: use text-primary (already themed), but ensure border is visible. */ html[data-theme="light"] .nav-hamburger { border-color: var(--border); } /* Many pages duplicate .nav.scrolled inline with a hardcoded rgba(10,14,23,...) background. Use an even more specific selector as a safety net so light mode always wins regardless of where the inline rule lives. */ html[data-theme="light"] body .nav.scrolled { background: rgba(255, 255, 255, 0.88); } /* Floating image overlay badges used across landing pages. Inline CSS often reads `background: rgba(10,14,23,0.8)`. Flip to a translucent white panel. */ html[data-theme="light"] .hero-image-badge, html[data-theme="light"] .collage-badge, html[data-theme="light"] [class*="image-badge"] { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(10, 14, 23, 0.08) !important; color: var(--text-primary) !important; } /* Dark fade overlays over hero collages. Recolor fades to the light bg. */ html[data-theme="light"] .hero-collage-overlay, html[data-theme="light"] [class*="collage-overlay"] { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.35) 100%), linear-gradient(135deg, rgba(0, 166, 133, 0.05) 0%, transparent 50%) !important; } /* Images often have brightness(0.92) filter that darkens them further. Disable that in light mode so images look natural on a white page. */ html[data-theme="light"] .hero-image-wrapper img { filter: none !important; } /* Footer / section backgrounds that use --bg-primary nested gradients: the inline CSS often uses hardcoded hex like #0a0e17 for subtle stripes. Nothing generic to fix there, but callsites referencing the CSS vars adapt automatically. */ /* ─── THEME TOGGLE BUTTON ──────────────────── */ .nav-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 8px; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; flex-shrink: 0; } .nav-theme-toggle:hover { color: var(--accent); border-color: var(--border-accent); background: rgba(0, 166, 133, 0.06); } html[data-theme="light"] .nav-theme-toggle:hover { background: rgba(0, 166, 133, 0.08); } .nav-theme-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Show sun in dark mode (click → switch to light), moon in light mode */ .nav-theme-toggle .icon-sun, .nav-mobile-theme-btn .icon-sun { display: block; } .nav-theme-toggle .icon-moon, .nav-mobile-theme-btn .icon-moon { display: none; } html[data-theme="light"] .nav-theme-toggle .icon-sun, html[data-theme="light"] .nav-mobile-theme-btn .icon-sun { display: none; } html[data-theme="light"] .nav-theme-toggle .icon-moon, html[data-theme="light"] .nav-mobile-theme-btn .icon-moon { display: block; } /* Mobile: place the toggle inside the mobile menu as a full-width row */ .nav-mobile-theme { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 15px; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border); } .nav-mobile-theme-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color 0.2s, border-color 0.2s; } .nav-mobile-theme-btn:hover { color: var(--accent); border-color: var(--border-accent); } .nav-mobile-theme-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 768px) { .nav-theme-toggle { display: none; } }