/* ================================================ LUX PROMO — Theme System (light theme override) Active when: Default (no attribute) = dark theme (existing site) ================================================ */ /* ---------- 1. Variable overrides ---------- */ :root[data-theme="light"] { --black: #FFFFFF; --white: #0A0A0F; /* основной текст: 19:1 на белом — AAA */ --cream: #1A1A22; /* вторичный текст: 16:1 — AAA */ /* Лайм #C8FF00 нечитаем на белом (1.6:1). Меняем accent на тёмную зелень (#3D5A1A) — контраст 8.2:1 (AAA для normal). Где accent используется как фон кнопок — перебиваем обратно на лайм через explicit-rules ниже. */ --accent: #3D5A1A; --accent2: #00695C; /* контраст 7.5:1 — AAA */ --dim: #4A4A52; /* контраст 8.7:1 — AAA для normal text */ --card-bg: #F7F6F1; --border: rgba(0,0,0,0.14); /* lux-widget tokens — переопределяем здесь чтобы не трогать lux-widget.css */ --lw-bg: #FFFFFF; --lw-bg2: #F7F6F1; --lw-bg3: #EFEDE5; --lw-border: rgba(0,0,0,0.14); --lw-text: #0A0A0F; /* контраст 19:1 — AAA */ --lw-text-muted: #4A4A52; /* контраст 8.7:1 — AAA */ --lw-text-dim: #5A5A60; /* контраст 7.1:1 — AAA */ } /* ---------- 2. Hardcoded color overrides ---------- */ :root[data-theme="light"] body { background: #FFFFFF; color: #0A0A0F; } /* Тёмные секции (var(--black) на тёмной = чёрный, на светлой = белый — но section'ы #how/#markets/#tech/#pain жёстко #080810) */ :root[data-theme="light"] #how, :root[data-theme="light"] #markets, :root[data-theme="light"] #tech, :root[data-theme="light"] #pain { background: #F2F0E8 !important; } /* Inline style="background:#080810" на section#reviews и подобных */ :root[data-theme="light"] section[style*="#080810"] { background: #F2F0E8 !important; } /* Hover карточек (хардкод #111118) */ :root[data-theme="light"] .agent-card:hover, :root[data-theme="light"] .pain-card:hover, :root[data-theme="light"] .market-card:hover { background: #EFEDE5 !important; } /* Navbar fade rgba(5,5,8,0.7) → светлая полупрозрачная */ :root[data-theme="light"] nav { background: rgba(255,255,255,0.78) !important; border-bottom-color: rgba(0,0,0,0.08) !important; } /* Mobile nav menu backdrop rgba(5,5,8,0.98) */ :root[data-theme="light"] #navMenu { background: rgba(255,255,255,0.96) !important; } :root[data-theme="light"] #navMenu a { border-bottom-color: rgba(0,0,0,0.08) !important; } /* Lang dropdown background rgba(15,15,20,0.98) */ :root[data-theme="light"] .lang-dropdown { background: rgba(255,255,255,0.98) !important; border-color: rgba(0,0,0,0.10) !important; } :root[data-theme="light"] .lang-current { border-color: rgba(0,0,0,0.10); color: #6B6B72; } :root[data-theme="light"] .lang-dropdown-item { color: #6B6B72; } :root[data-theme="light"] .lang-dropdown-item:hover { background: rgba(200,255,0,0.18); color: #0A0A0F; } /* Footer (часто #030306, var(--black)) */ :root[data-theme="light"] footer { background: #ECEAE2 !important; } :root[data-theme="light"] footer * { border-color: rgba(0,0,0,0.10) !important; } /* CTA gradient: linear-gradient(180deg, var(--black), #0a0a12) */ :root[data-theme="light"] .page-cta, :root[data-theme="light"] #cta { background: linear-gradient(180deg, #FFFFFF, #F2F0E8) !important; } /* Scrollbar */ :root[data-theme="light"] ::-webkit-scrollbar-track { background: #FFFFFF; } :root[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); } :root[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); } /* Hero glow / grid (на белом резкие — приглушаем) */ :root[data-theme="light"] .hero-grid { background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px) !important; } :root[data-theme="light"] .hero-glow { background: radial-gradient(circle, rgba(200,255,0,0.18) 0%, transparent 70%) !important; } :root[data-theme="light"] .hero-glow2 { background: radial-gradient(circle, rgba(0,201,166,0.14) 0%, transparent 70%) !important; } /* Hero stroke (text-stroke rgba(255,255,255,0.3) теряется на белом). Делаем заполнение тёмным вместо transparent — контраст 16:1. */ :root[data-theme="light"] .hero-title .stroke, :root[data-theme="light"] .stroke { -webkit-text-stroke: 0 !important; color: #1A1A22 !important; } /* Syntax highlighting в demo код-блоках — темные читабельные цвета */ :root[data-theme="light"] .code-cm, :root[data-theme="light"] .code-comment { color: #6B6B72 !important; } /* комментарии — серый */ :root[data-theme="light"] .code-kw, :root[data-theme="light"] .code-keyword { color: #5C2E91 !important; } /* keywords — пурпур, контраст 9:1 */ :root[data-theme="light"] .code-fn, :root[data-theme="light"] .code-function { color: #A04200 !important; } /* функции — тёмный оранж, 7:1 */ :root[data-theme="light"] .code-str, :root[data-theme="light"] .code-string { color: #00695C !important; } /* строки — тёмный циан, 7.5:1 */ :root[data-theme="light"] .code-num, :root[data-theme="light"] .code-number { color: #B71C1C !important; } /* числа — тёмный красный, 7:1 */ :root[data-theme="light"] .code-op, :root[data-theme="light"] .code-operator { color: #1A1A22 !important; } :root[data-theme="light"] .code-prop, :root[data-theme="light"] .code-property { color: #0D47A1 !important; } /* properties — тёмный синий, 9:1 */ /* ============================================================ READABILITY ENFORCEMENT — каждое слово читаемо (WCAG AAA) Override для всех типичных classes которые в тёмной теме используют rgba(245,243,238,0.x) или rgba(255,255,255,0.x) ============================================================ */ /* Hero и section-вступления */ :root[data-theme="light"] .hero-sub, :root[data-theme="light"] .hero-eyebrow, :root[data-theme="light"] .section-sub, :root[data-theme="light"] .section-eyebrow, :root[data-theme="light"] .page-sub, :root[data-theme="light"] .page-hero-sub, :root[data-theme="light"] .breadcrumb, :root[data-theme="light"] .breadcrumb a, :root[data-theme="light"] .breadcrumb span { color: #1A1A22 !important; } /* Карточки услуг/агентов/боли/рынков/фич */ :root[data-theme="light"] .agent-desc, :root[data-theme="light"] .agent-meta, :root[data-theme="light"] .pain-text, :root[data-theme="light"] .pain-desc, :root[data-theme="light"] .market-text, :root[data-theme="light"] .market-meta, :root[data-theme="light"] .feature-desc, :root[data-theme="light"] .feature-text, :root[data-theme="light"] .step-text, :root[data-theme="light"] .step-desc, :root[data-theme="light"] .integration-desc, :root[data-theme="light"] .industry-desc, :root[data-theme="light"] .usecase-desc, :root[data-theme="light"] .tech-desc, :root[data-theme="light"] .review-text, :root[data-theme="light"] .review-author, :root[data-theme="light"] .stat-label, :root[data-theme="light"] .stat-sub { color: #1A1A22 !important; } /* Demo / showcase / прочие subtitle классы */ :root[data-theme="light"] .demo-sub, :root[data-theme="light"] .demo-text, :root[data-theme="light"] .demo-desc, :root[data-theme="light"] .showcase-sub, :root[data-theme="light"] .lead-sub, :root[data-theme="light"] .services-desc, :root[data-theme="light"] .markets-desc, :root[data-theme="light"] .pain-desc, :root[data-theme="light"] .reviews-desc, :root[data-theme="light"] .tech-desc, :root[data-theme="light"] .how-desc, :root[data-theme="light"] .faq-desc { color: #1A1A22 !important; } /* Списки задач внутри карточек агентов */ :root[data-theme="light"] .task-item, :root[data-theme="light"] .agent-task, :root[data-theme="light"] .agent-tasks li, :root[data-theme="light"] .agent-tasks div { color: #1A1A22 !important; } /* Pain card "→ результат" блоки — лайм accent на бледно-лайм фоне */ :root[data-theme="light"] .pain-result, :root[data-theme="light"] .pain-solution, :root[data-theme="light"] .pain-quote { background: rgba(61,90,26,0.08) !important; color: #3D5A1A !important; border-color: rgba(61,90,26,0.25) !important; } /* Featured agent card (тёмный градиент в тёмной теме) */ :root[data-theme="light"] .agent-card.featured { background: linear-gradient(135deg, #F2F4E0 0%, #F7F6F1 100%) !important; background-image: linear-gradient(135deg, #F2F4E0 0%, #F7F6F1 100%) !important; color: #0A0A0F !important; border: 1px solid rgba(61,90,26,0.20) !important; } :root[data-theme="light"] .agent-card.featured *, :root[data-theme="light"] .agent-card.featured h3, :root[data-theme="light"] .agent-card.featured .agent-name { color: #0A0A0F !important; } :root[data-theme="light"] .agent-card.featured .task-item, :root[data-theme="light"] .agent-card.featured .agent-task { color: #1A1A22 !important; } /* Demo code block — обычные строки кода (не подсвеченные) */ :root[data-theme="light"] .code-line, :root[data-theme="light"] .code-block .code-line, :root[data-theme="light"] pre.demo-code, :root[data-theme="light"] .demo-code .code-line { color: #1A1A22 !important; } /* Orbit rings в .how-visual — слабо видны на белом */ :root[data-theme="light"] .orbit, :root[data-theme="light"] .orbit-1, :root[data-theme="light"] .orbit-2, :root[data-theme="light"] .orbit-3 { border-color: rgba(61,90,26,0.30) !important; } :root[data-theme="light"] .how-visual { background: linear-gradient(135deg, #F7F6F1 0%, #EFEDE5 100%) !important; } :root[data-theme="light"] .orbit-center { color: inherit !important; } /* Tags / badges на market cards */ :root[data-theme="light"] .tag, :root[data-theme="light"] .badge, :root[data-theme="light"] .market-tag, :root[data-theme="light"] .agent-tag { background: rgba(61,90,26,0.06) !important; border-color: rgba(61,90,26,0.30) !important; color: #3D5A1A !important; } /* Виджет: "Мы онлайн" green text — усиление контраста (был 1.74) */ :root[data-theme="light"] .lux-online-text { color: #15803D !important; } :root[data-theme="light"] .lux-online-dot { background: #15803D !important; box-shadow: 0 0 6px rgba(21,128,61,0.5) !important; } /* Article body / blog content */ :root[data-theme="light"] .article-body, :root[data-theme="light"] .article-body p, :root[data-theme="light"] .article-body li, :root[data-theme="light"] .article-body td, :root[data-theme="light"] .article-body th, :root[data-theme="light"] .article-body blockquote, :root[data-theme="light"] .article-meta, :root[data-theme="light"] .article-date, :root[data-theme="light"] .article-tag { color: #1A1A22 !important; } /* Footer */ :root[data-theme="light"] .footer-desc, :root[data-theme="light"] .footer-col a, :root[data-theme="light"] .footer-col p, :root[data-theme="light"] .footer-bottom, :root[data-theme="light"] .footer-copyright, :root[data-theme="light"] footer p, :root[data-theme="light"] footer a { color: #1A1A22 !important; } :root[data-theme="light"] footer a:hover { color: #3D5A1A !important; } /* FAQ / details */ :root[data-theme="light"] details summary, :root[data-theme="light"] details p, :root[data-theme="light"] .faq-question, :root[data-theme="light"] .faq-answer { color: #1A1A22 !important; } /* Hero-sub конкретно (rgba(245,243,238,0.65)) */ :root[data-theme="light"] .hero-sub { color: #1A1A22 !important; } /* Catch-all для распространённых rgba text-цветов через inline style */ :root[data-theme="light"] [style*="rgba(245,243,238"], :root[data-theme="light"] [style*="rgba(245, 243, 238"] { color: #1A1A22 !important; } /* Brand-coloured CTA buttons: оставляем лайм #C8FF00 как фон (фирменный), тёмный текст поверх — отлично читаемо (контраст 14:1). */ :root[data-theme="light"] .btn-primary, :root[data-theme="light"] .nav-cta, :root[data-theme="light"] .btn-demo, :root[data-theme="light"] .btn-cta, :root[data-theme="light"] .form-submit, :root[data-theme="light"] .cta-actions a.btn-primary, :root[data-theme="light"] .page-actions a.btn-primary { background: #C8FF00 !important; color: #0A0A0F !important; } :root[data-theme="light"] .form-submit:hover { background: #B8EE00 !important; color: #0A0A0F !important; } :root[data-theme="light"] .btn-primary:hover, :root[data-theme="light"] .btn-demo:hover, :root[data-theme="light"] .btn-cta:hover { background: #B8EE00 !important; color: #0A0A0F !important; } :root[data-theme="light"] .nav-cta:hover { background: #00897B !important; color: #FFFFFF !important; } /* nav links hover (color: var(--accent)) — тёмно-оливковый достаточно контрастный */ :root[data-theme="light"] nav ul a:hover { color: #4A7A19 !important; } /* Active states в lang-switcher — тоже тёмно-оливковый */ :root[data-theme="light"] .lang-current.open, :root[data-theme="light"] .lang-current:hover, :root[data-theme="light"] .lang-dropdown-item.active { color: #4A7A19 !important; } :root[data-theme="light"] .lang-current.open, :root[data-theme="light"] .lang-current:hover { border-color: #4A7A19 !important; } /* Theme toggle hover */ :root[data-theme="light"] .theme-toggle:hover { border-color: #4A7A19; color: #4A7A19; } /* Form inputs (тёмные backgrounds в формах) */ :root[data-theme="light"] .form-input, :root[data-theme="light"] input[type="text"], :root[data-theme="light"] input[type="tel"], :root[data-theme="light"] input[type="email"], :root[data-theme="light"] textarea { background: rgba(0,0,0,0.04) !important; color: #0A0A0F !important; border-color: rgba(0,0,0,0.10) !important; } :root[data-theme="light"] .form-input::placeholder, :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: rgba(10,10,15,0.45) !important; } /* Article body / blockquote (rgba(245,243,238,0.7)) */ :root[data-theme="light"] .article-body { color: #0A0A0F; } :root[data-theme="light"] .article-body blockquote { color: rgba(10,10,15,0.75) !important; border-left-color: var(--accent); } :root[data-theme="light"] .article-body code { background: rgba(0,0,0,0.06); color: #0A0A0F; } /* Modal */ :root[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.45) !important; } :root[data-theme="light"] .modal { background: #FFFFFF !important; color: #0A0A0F !important; } /* FAQ details/summary */ :root[data-theme="light"] details summary { color: #0A0A0F !important; } /* lux-widget extras (shadow поверх selectors которые есть в lux-widget.css) */ :root[data-theme="light"] #lux-widget { box-shadow: 0 0 0 1px rgba(200,255,0,0.18), 0 0 32px rgba(200,255,0,0.12), 0 16px 48px rgba(0,0,0,0.12) !important; } :root[data-theme="light"] #lux-float-btn { box-shadow: 0 0 24px rgba(200,255,0,0.30), 0 4px 16px rgba(0,0,0,0.18) !important; } :root[data-theme="light"] .lux-msg-operator .lux-bubble { background: #EFEDE5 !important; color: #0A0A0F !important; } :root[data-theme="light"] .lux-msg-visitor .lux-bubble { color: #0A0A0F !important; } :root[data-theme="light"] .lux-brand-lux { color: #0A0A0F !important; } /* Виджет: лайм text на светлом нечитаем — переключаем на тёмный олива (контраст 8:1) */ :root[data-theme="light"] .lux-brand-promo { color: #3D5A1A !important; } :root[data-theme="light"] .lux-sf-title { color: #3D5A1A !important; } :root[data-theme="light"] .lux-sf-cb-link { color: #3D5A1A !important; } :root[data-theme="light"] .lux-close { color: #3D5A1A !important; } :root[data-theme="light"] .lux-sf-close:hover { color: #3D5A1A !important; } :root[data-theme="light"] .lux-welcome { background: #F7F6F1 !important; } :root[data-theme="light"] .lux-side-badge { background: #FFFFFF !important; } :root[data-theme="light"] .lux-msg-area { background: #F7F6F1 !important; border-top-color: rgba(0,0,0,0.08) !important; } :root[data-theme="light"] #lux-sticky-form { background: #F7F6F1 !important; border-top-color: rgba(200,255,0,0.40) !important; } :root[data-theme="light"] .lux-sf-input { background: #FFFFFF !important; color: #0A0A0F !important; } :root[data-theme="light"] .lux-typing-bubble { background: #EFEDE5 !important; } :root[data-theme="light"] .lux-send-btn { background: rgba(200,255,0,0.20); border-color: rgba(200,255,0,0.50); } /* ---------- 3. Theme toggle button ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; background: transparent; border: 1px solid rgba(255,255,255,0.08); color: #8A8A8A; cursor: pointer; padding: 0; margin-right: 6px; transition: border-color 0.2s, color 0.2s; font-family: inherit; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } /* В тёмной теме (default) показываем sun (то что получишь при клике) */ .theme-toggle .theme-icon-sun { display: block; } .theme-toggle .theme-icon-moon { display: none; } /* В светлой теме показываем moon */ :root[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; } :root[data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,0.12); color: #6B6B72; } :root[data-theme="light"] .theme-toggle:hover { border-color: var(--accent); color: #0A0A0F; } /* RTL */ [dir="rtl"] .theme-toggle { margin-right: 0; margin-left: 6px; } /* ---------- 4. Mobile (≤900px) — fixed top-right left of lang-switcher ---------- */ @media (max-width: 900px) { .theme-toggle { position: fixed; top: 16px; right: 64px; z-index: 101; margin-right: 0; } } [dir="rtl"] { /* on RTL screens переключатель языков стоит на left:16px, theme-toggle ставим на left:64px */ } @media (max-width: 900px) { [dir="rtl"] .theme-toggle { right: auto; left: 64px; } } @media (max-width: 390px) { .theme-toggle { width: 28px; height: 24px; } .theme-toggle svg { width: 14px; height: 14px; } } /* ---------- 5. Override fixed-mode на index.html (где есть burger) ---------- */ @media (max-width: 768px) { body:has(.burger-btn) .theme-toggle { position: static; margin-right: 6px; } body:has(.burger-btn) [dir="rtl"] .theme-toggle, [dir="rtl"] body:has(.burger-btn) .theme-toggle { margin-right: 0; margin-left: 6px; } }