/* ============================================ */ /* THEME SYSTEM (shared across all Lowai pages) */ /* ============================================ */ :root, [data-theme="dark"] { --bg: #0a0a0a; --bg-1: #0f0f10; --bg-2: #151517; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --text: #fafafa; --text-dim: #8b8b92; --text-faint: #4a4a52; --accent: #c8102e; --accent-soft: rgba(200, 16, 46, 0.08); --accent-glow: rgba(200, 16, 46, 0.3); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1); --radius: 12px; --radius-lg: 20px; --container: 1200px; --nav-bg: rgba(10, 10, 10, 0.72); --surface-1: rgba(255, 255, 255, 0.02); --surface-2: rgba(255, 255, 255, 0.04); --surface-3: rgba(255, 255, 255, 0.08); --surface-strong: rgba(255, 255, 255, 0.14); } [data-theme="light"] { --bg: #fafafa; --bg-1: #f2f2f3; --bg-2: #e8e8ea; --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.16); --text: #0a0a0a; --text-dim: #5a5a62; --text-faint: #9a9aa2; --accent: #c8102e; --accent-soft: rgba(200, 16, 46, 0.06); --accent-glow: rgba(200, 16, 46, 0.2); --nav-bg: rgba(250, 250, 250, 0.78); --surface-1: rgba(0, 0, 0, 0.025); --surface-2: rgba(0, 0, 0, 0.05); --surface-3: rgba(0, 0, 0, 0.09); --surface-strong: rgba(0, 0, 0, 0.16); } /* Smooth theme transitions (global) */ html, body, .nav-inner, .work-card, .service, .opt, .check, .field input, .field textarea, .testimonial, .side-card, .faq-item, .btn, .btn-step, .mock-browser, .info-grid, .article-section, .toc { transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease); } /* Prevent flash of untranslated content (FOUC) body is hidden until theme-lang.js applies the correct language, at which point it adds .lowai-ready to . If JS is disabled, the body becomes visible after 200ms fallback. */ html:not(.lowai-ready) body { visibility: hidden; } html.lowai-ready body { visibility: visible; animation: lowaiFadeIn 0.3s var(--ease); } @keyframes lowaiFadeIn { from { opacity: 0; } to { opacity: 1; } } /* JS-disabled fallback: body must be visible */ html.no-js body, html.no-js:not(.lowai-ready) body { visibility: visible !important; } /* ============================================ */ /* NAV TOGGLES (theme + language buttons) */ /* ============================================ */ .nav-tools { display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--border); } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; background: transparent; border: 0; border-radius: 100px; color: var(--text-dim); cursor: pointer; font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; transition: color 0.2s var(--ease), background 0.2s var(--ease); } .nav-toggle:hover { color: var(--text); background: var(--surface-2); } .nav-toggle svg { width: 14px; height: 14px; } .nav-lang { min-width: 34px; } .nav-lang .lang-active { color: var(--text); } .nav-theme { position: relative; width: 34px; height: 30px; } .nav-theme .icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .nav-theme .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); } .nav-theme .icon-moon { opacity: 1; transform: rotate(0) scale(1); } [data-theme="light"] .nav-theme .icon-sun { opacity: 1; transform: rotate(0) scale(1); } [data-theme="light"] .nav-theme .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }