/* =================================================== MIG THEME SYSTEM — Dark (default) + Light Mode Toggle via [data-theme="light"] on =================================================== */ /* ── LIGHT MODE OVERRIDES ─────────────────────────── */ html[data-theme="light"] { --bg: #fafafa; --bg-2: #f2f2f4; --bg-card: #ffffff; --border: rgba(0,0,0,0.08); --text: #0a0a0a; --text-muted: rgba(10,10,10,0.6); --text-dim: rgba(10,10,10,0.35); --blue-dim: rgba(41,141,255,0.1); --blue-glow: rgba(41,141,255,0.25); } html[data-theme="light"] body { background: var(--bg); color: var(--text); } /* Hero grid + gradient adapt to light */ html[data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); } html[data-theme="light"] .hero-gradient { background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(41,141,255,0.10) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 20%, rgba(41,141,255,0.05) 0%, transparent 60%); } /* Buttons: primary stays blue/black text; ghost adapts */ html[data-theme="light"] .btn-ghost { border-color: rgba(0,0,0,0.12); color: var(--text); } html[data-theme="light"] .btn-ghost:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.2); } /* Nav scrolled state */ html[data-theme="light"] #nav.scrolled { background: rgba(250,250,250,0.92); } html[data-theme="light"] .site-nav { background: rgba(250,250,250,0.92); } /* Cards / mini-cards / service rows hover */ html[data-theme="light"] .mini-card:hover, html[data-theme="light"] .why-item:hover { background: #ffffff; box-shadow: 0 4px 24px rgba(0,0,0,0.06); } html[data-theme="light"] .service-row:hover { background: rgba(0,0,0,0.025); } html[data-theme="light"] .project-card, html[data-theme="light"] .stats-card, html[data-theme="light"] .service-card, html[data-theme="light"] .contact-form-wrap, html[data-theme="light"] .sector-item { box-shadow: 0 2px 12px rgba(0,0,0,0.04); } html[data-theme="light"] .project-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.1); } /* Project image placeholders */ html[data-theme="light"] .project-img { background: linear-gradient(135deg, #eef2f7 0%, #dde6f2 100%); } /* Form inputs */ html[data-theme="light"] .form-group input, html[data-theme="light"] .form-group textarea, html[data-theme="light"] .form-group select { background-color: #f5f6f8; color: var(--text); border-color: rgba(0,0,0,0.1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; } /* Client tags / marquee */ html[data-theme="light"] .client-tag { border-color: rgba(0,0,0,0.1); } /* Footer */ html[data-theme="light"] .footer { background: var(--bg-2); } /* Scale section */ html[data-theme="light"] .scale-section, html[data-theme="light"] .sectors-section { background: var(--bg-2); } /* Globe rings adapt */ html[data-theme="light"] .globe-ring { border-color: rgba(41,141,255,0.2); } html[data-theme="light"] .globe-dot { background: var(--bg); } /* Scroll line / page indicator */ html[data-theme="light"] .scroll-line { background: rgba(0,0,0,0.1); } html[data-theme="light"] .page-indicator { background: rgba(250,250,250,0.95); } /* CTA section glow */ html[data-theme="light"] .cta-section::before { background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(41,141,255,0.08) 0%, transparent 70%); } /* Loader stays dark always (brand moment) — no override needed */ /* Cursor adapts subtly */ html[data-theme="light"] #cursor { background: var(--blue); } html[data-theme="light"] #cursor-follower { border-color: rgba(41,141,255,0.4); } /* Mobile nav */ html[data-theme="light"] .nav-mobile { background: rgba(250,250,250,0.98); } /* ── THEME TOGGLE BUTTON ──────────────────────────── */ .theme-toggle { position: relative; width: 52px; height: 28px; border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; padding: 3px; margin-left: 16px; flex-shrink: 0; transition: background 0.3s, border-color 0.3s; } html[data-theme="light"] .theme-toggle { background: rgba(0,0,0,0.06); } .theme-toggle-thumb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #5bbef5, #1a6bb3); display: flex; align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); transform: translateX(0); box-shadow: 0 0 8px rgba(41,141,255,0.4); } html[data-theme="light"] .theme-toggle-thumb { transform: translateX(24px); background: linear-gradient(135deg, #ffd76a, #ff9f3f); box-shadow: 0 0 8px rgba(255,180,60,0.4); } .theme-toggle-icon { width: 12px; height: 12px; position: relative; } .theme-icon-moon, .theme-icon-sun { position: absolute; inset: 0; transition: opacity 0.25s, transform 0.25s; } .theme-icon-sun { opacity: 0; transform: scale(0.5) rotate(-90deg); } html[data-theme="light"] .theme-icon-moon { opacity: 0; transform: scale(0.5) rotate(90deg); } html[data-theme="light"] .theme-icon-sun { opacity: 1; transform: scale(1) rotate(0deg); } .theme-icon-moon { opacity: 1; transform: scale(1) rotate(0deg); } /* Mobile toggle placement */ .theme-toggle-mobile { margin: 16px 0 0; align-self: flex-start; } @media (max-width: 768px) { .theme-toggle { margin-left: auto; margin-right: 12px; } } /* ── ADDITIONAL LIGHT MODE POLISH ─────────────────── */ /* Ticker stays legible */ html[data-theme="light"] .hero-ticker { background: var(--bg); border-top-color: var(--border); } /* Clients marquee border lines */ html[data-theme="light"] .clients-marquee { border-color: var(--border); } /* Page hero radial glow softer in light */ html[data-theme="light"] .page-hero::before { background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(41,141,255,0.07) 0%, transparent 70%); } /* Form success check */ html[data-theme="light"] .form-success p { color: var(--text-muted); } /* Hours badge */ html[data-theme="light"] .hours-badge { background: var(--bg-card); border-color: var(--border); } /* Social links */ html[data-theme="light"] .social-link:hover { background: rgba(41,141,255,0.06); } /* Service card border glow on hover */ html[data-theme="light"] .service-card:hover { background: #fcfcfd; } /* Globe center box */ html[data-theme="light"] .globe-center { background: rgba(41,141,255,0.08); } /* Smooth theme transition on all key elements */ body, .nav-inner, .site-nav, #nav, .hero-bg, .stats-section, .overview-section, .services-section, .clients-section, .scale-section, .sectors-section, .cta-section, .footer, .mini-card, .why-item, .service-row, .service-card, .project-card, .contact-form-wrap, .form-group input, .form-group textarea, .form-group select, .client-tag, .page-hero, .stats-card, .sector-item { transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }