/* * theme-toggle.css — af theme * * Dark theme is the default (body has no class). * Light theme is activated by adding data-theme="light" to . * * Architecture: * - All colour overrides are done via CSS custom properties on [data-theme="light"] * - Component overrides use attribute selectors so specificity stays flat * - The toggle button (.theme-toggle) lives in the navbar and mobile menu * - Smooth cross-fade on all colour transitions via a global transition rule */ /* ============================================================ GLOBAL TRANSITION — smooth colour swap on theme change ============================================================ */ *, *::before, *::after { transition-property: background-color, border-color, color, box-shadow, opacity, fill, stroke; transition-duration: 0.25s; transition-timing-function: ease; } /* Don't animate transforms / layout — only colours */ /* (existing transitions defined in styles.css still win for specific props) */ /* ============================================================ LIGHT THEME TOKENS ============================================================ */ [data-theme="light"] { --purple: #7c3aed; /* slightly deeper purple for contrast on white */ --purple-hover: #6d28d9; --bg-dark: #f4f4f8; /* page background */ --bg-section: #ebebf0; /* section alternating bg */ --text-muted: #5a5870; } /* ============================================================ BODY & GLOBAL ============================================================ */ [data-theme="light"] body { background: var(--bg-dark); color: #16131f; } [data-theme="light"] ::selection { background: var(--purple); color: #fff; } /* ============================================================ NAVBAR ============================================================ */ [data-theme="light"] nav { border-bottom-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] nav.solid, [data-theme="light"] nav.scrolled { background: rgba(232, 229, 245, 0.9); backdrop-filter: blur(20px); border-bottom-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .nav-links a { color: rgba(22, 19, 31, 0.7); } [data-theme="light"] .nav-links a:hover { color: #16131f; } [data-theme="light"] .nav-lang { background: rgba(0, 0, 0, 0.07); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .nav-lang svg path, [data-theme="light"] .nav-logo svg path { fill: #000!important; } [data-theme="light"] .nav-lang:hover { background: rgba(0, 0, 0, 0.11); } [data-theme="light"] .nav-lang span { color: #16131f; } [data-theme="light"] .nav-lang .chevron { color: rgba(22, 19, 31, 0.45); } [data-theme="light"] .nav-lang-wrapper.open .nav-lang { background: rgba(0, 0, 0, 0.11); border-color: rgba(124, 58, 237, 0.4); } [data-theme="light"] .nav-lang-dropdown { background: rgba(240, 238, 250, 0.97); border-color: rgba(124, 58, 237, 0.2); } [data-theme="light"] .nav-lang-dropdown a { color: rgba(22, 19, 31, 0.65); } [data-theme="light"] .nav-lang-dropdown a:hover { background: rgba(124, 58, 237, 0.1); color: #16131f; } [data-theme="light"] .btn-hamburger { color: rgba(22, 19, 31, 0.75); } [data-theme="light"] .btn-hamburger:hover { color: #16131f; } /* ============================================================ MOBILE MENU OVERLAY ============================================================ */ [data-theme="light"] .mobile-menu { background: #f0eefa; } [data-theme="light"] .mobile-menu-footer { border-top-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .mobile-nav-links a { color: rgba(22, 19, 31, 0.8); } [data-theme="light"] .mobile-nav-links a:hover { color: var(--purple); } [data-theme="light"] .btn-close { color: rgba(22, 19, 31, 0.55); } [data-theme="light"] .btn-close:hover { color: #16131f; } /* ============================================================ HERO SECTION (index.html) ============================================================ */ [data-theme="light"] .hero-h1 { color: #16131f; } [data-theme="light"] .hero-p { color: var(--text-muted); } [data-theme="light"] .hero-input-box { background: rgba(255, 255, 255, 0.75); border-color: rgba(0, 0, 0, 0.1); } [data-theme="light"] .hero-input-box input { color: #16131f; } [data-theme="light"] .hero-input-box input::placeholder { color: rgba(22, 19, 31, 0.35); } /* ============================================================ SHARED SECTIONS ============================================================ */ [data-theme="light"] section { background: var(--bg-section); } [data-theme="light"] .section-title { color: #16131f; } [data-theme="light"] .section-subtitle { color: var(--text-muted); } /* Results */ [data-theme="light"] .result-card { background: rgba(124, 58, 237, 0.06); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .result-icon { background:rgba(255,255,255,0.20) } [data-theme="light"] .result-card h3 { color: #16131f; } [data-theme="light"] .result-card p { color: var(--text-muted); } /* Portfolio */ [data-theme="light"] .project-title { color: #16131f; } /* Process */ [data-theme="light"] .process-num-bg { background: rgba(124, 58, 237, 0.12); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .process-step-body h3 { color: #16131f; } [data-theme="light"] .process-step-body p { color: var(--text-muted); } /* Benefits */ [data-theme="light"] .benefit-card { background: rgba(124, 58, 237, 0.06); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .benefit-icon { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .benefit-card h3 { color: #16131f; } [data-theme="light"] .benefit-card p { color: var(--text-muted); } /* Team */ [data-theme="light"] .team-name { color: #16131f; } [data-theme="light"] .team-desc { color: var(--text-muted); } /* ============================================================ CONTACT BOX ============================================================ */ [data-theme="light"] .contact-box { background: #fff; border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .contact-form-side { background: #fff; } [data-theme="light"] .contact-form-header h2 { color: #16131f; } [data-theme="light"] .contact-form-header p { color: var(--text-muted); } [data-theme="light"] .form-group label { color: rgba(22, 19, 31, 0.7); } [data-theme="light"] .form-group input, [data-theme="light"] .form-group textarea, [data-theme="light"] .form-group select { background: #f5f4fb; border-color: rgba(0, 0, 0, 0.1); color: #16131f; } [data-theme="light"] .form-group input::placeholder, [data-theme="light"] .form-group textarea::placeholder { color: rgba(22, 19, 31, 0.3); } [data-theme="light"] .form-group input:focus, [data-theme="light"] .form-group textarea:focus, [data-theme="light"] .form-group select:focus { border-color: rgba(124, 58, 237, 0.5); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08); } [data-theme="light"] .contact-note { color: rgba(22, 19, 31, 0.4); } [data-theme="light"] .contact-right-side { background: rgba(124, 58, 237, 0.04); border-left-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .contact-trust-label { color: var(--text-muted); } [data-theme="light"] .contact-divider { background: rgba(0, 0, 0, 0.07); } [data-theme="light"] .contact-badge { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .contact-badge-icon { background: rgba(124, 58, 237, 0.08); } [data-theme="light"] .contact-badge-text { color: rgba(22, 19, 31, 0.6); } /* Map side pin */ [data-theme="light"] .contact-pin { background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .contact-pin-text .city { color: #16131f; } [data-theme="light"] .contact-map-gradient { background: linear-gradient(to right, #fff, transparent); } /* ============================================================ CASE HERO (single-cases.php / case.html) ============================================================ */ [data-theme="light"] .case-hero { background: #dcdcdc; } [data-theme="light"] .breadcrumbs a { color: rgba(22, 19, 31, 0.45); } [data-theme="light"] .breadcrumbs-sep { color: rgba(22, 19, 31, 0.25); } [data-theme="light"] .breadcrumbs-current { color: rgba(22, 19, 31, 0.65); } [data-theme="light"] .case-h1 { color: #16131f; } [data-theme="light"] .case-lead { color: var(--text-muted); } [data-theme="light"] .case-meta { background: rgba(124, 58, 237, 0.05); border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .case-meta-item { border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .case-meta-label { color: rgba(22, 19, 31, 0.4); } [data-theme="light"] .case-meta-value { color: #16131f; } /* Case content */ [data-theme="light"] .case-content { background: var(--bg-section); } [data-theme="light"] .case-section h2 { color: #16131f; } [data-theme="light"] .case-section p { color: var(--text-muted); } [data-theme="light"] .case-section-label { color: var(--purple); } [data-theme="light"] .case-section-label::after { background: rgba(124, 58, 237, 0.15); } [data-theme="light"] .result-chip { background: rgba(124, 58, 237, 0.06); border-color: rgba(124, 58, 237, 0.15); } [data-theme="light"] .result-chip-icon { background: rgba(124, 58, 237, 0.1); } [data-theme="light"] .result-chip-num { color: #16131f; } [data-theme="light"] .result-chip-desc { color: var(--text-muted); } /* Gallery */ [data-theme="light"] .gallery-section { background: var(--bg-dark); } [data-theme="light"] .gallery-header h2 { color: #16131f; } [data-theme="light"] .gallery-header p { color: var(--text-muted); } /* ============================================================ FOOTER ============================================================ */ [data-theme="light"] footer { background: var(--bg-dark); border-top-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .footer-brand { color: #16131f; } [data-theme="light"] .footer-tagline { color: rgba(22, 19, 31, 0.4); } [data-theme="light"] .footer-links a { color: rgba(22, 19, 31, 0.55); } [data-theme="light"] .footer-links a:hover { color: var(--purple); } [data-theme="light"] .footer-copy { color: rgba(22, 19, 31, 0.25); } /* ============================================================ 404 PAGE ============================================================ */ [data-theme="light"] .error404-page { background: var(--bg-hero); } [data-theme="light"] .e404-sub { color: var(--text-muted); } [data-theme="light"] .e404-links__label { color: rgba(22, 19, 31, 0.35); } [data-theme="light"] .e404-links li a { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.07); color: rgba(22, 19, 31, 0.55); } [data-theme="light"] .e404-links li a:hover { background: rgba(124, 58, 237, 0.08); border-color: rgba(124, 58, 237, 0.25); color: #16131f; } [data-theme="light"] .e404-divider__line { background: linear-gradient(to var(--side, right), rgba(124, 58, 237, 0.4), transparent); } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 41px; height: 41px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.15); cursor: pointer; color: #fff; flex-shrink: 0; /* override the global colour transition for this button only */ transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.12); } .theme-toggle:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; } /* Icon swap via opacity */ .theme-toggle .icon-moon, .theme-toggle .icon-sun { position: absolute; transition: opacity 0.2s ease, transform 0.3s ease !important; } /* Dark mode (default) → show moon */ .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); } /* Light mode → show sun */ [data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); } [data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } /* Light mode button colours */ [data-theme="light"] .theme-toggle { background: rgba(0, 0, 0, 0.07); border-color: rgba(0, 0, 0, 0.08); color: #16131f; } [data-theme="light"] .theme-toggle:hover { background: rgba(0, 0, 0, 0.11); } /* ---- Mobile menu variant — wider, with label ---- */ .theme-toggle--mobile { width: auto; padding: 0 20px; gap: 12px; font-size: 18px; font-family: var(--font-geo); font-weight: 300; letter-spacing: -0.3px; border-radius: 12px; height: 52px; justify-content: flex-start; } .theme-toggle--mobile .icon-moon, .theme-toggle--mobile .icon-sun { position: static; /* flow normally so the label sits next to it */ flex-shrink: 0; } /* For the mobile variant we switch between two text nodes via JS */ .theme-toggle--mobile .toggle-label { /* label text set by JS */ } [data-theme="light"] .theme-toggle--mobile { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.07); color: #16131f; }