/* ═══════════════════════════════════════════════════════ Neironex — светлая тема. Подключается после main.css и **ничего не делает**, пока на не стоит data-theme="light". То есть файл можно держать в проде безопасно: тёмная тема остаётся по умолчанию. Включить: document.documentElement.dataset.theme = 'light' или сразу в разметке: Внутри — две части: переопределение токенов и заплатки на те места, где цвет захардкожен мимо токенов (шапка, баннер cookie, финальный CTA-блок, тёмные секции contacts/privacy). ═══════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* ─── Поверхности ─────────────────────────────────── */ --bg: #FFFFFF; --bg-1: #F5F6FA; /* чередующиеся секции */ --bg-card: #FFFFFF; --bg-card2: #F7F8FC; --subtle: #EDEFF6; /* ─── Границы ─────────────────────────────────────── */ --border: rgba(16,18,40,0.10); --border-2: rgba(16,18,40,0.20); /* ─── Текст ───────────────────────────────────────── */ --text: #12142A; /* #5A6076 на белом даёт ~6.4:1 — проходит AA и для мелкого текста */ --muted: #5A6076; /* ─── Акценты ─────────────────────────────────────── */ /* Светлее #4A5BE0 на белом уже не читается как ссылка, поэтому акценты здесь темнее, чем в тёмной теме. */ --accent: #4A5BE0; --accent2: #3F4FD4; --cyan: #0E9BC4; --purple: #7C3AED; --green: #0F8A3C; /* Градиент тоже пришлось углубить: исходный #00D4FF на белом почти не виден, особенно в тексте через background-clip. */ --grad: linear-gradient(90deg, #0E9BC4 0%, #4A5BE0 50%, #7C3AED 100%); --grad-135: linear-gradient(135deg, #0E9BC4 0%, #4A5BE0 50%, #7C3AED 100%); } /* ═══ Заплатки на захардкоженные цвета ═════════════════ */ /* Шапка: в main.css фон задан как rgba(8,9,13,0.8). */ :root[data-theme="light"] .nav { background: rgba(255,255,255,0.82); border-bottom-color: rgba(16,18,40,0.10); } /* Выпадающее меню на мобильном — тот же тёмный rgba. */ :root[data-theme="light"] .nav-links.open, :root[data-theme="light"] .nav-links { background: rgba(255,255,255,0.97); } /* Финальный CTA-блок: инлайн-градиент #0C0E1C → #10122A. */ :root[data-theme="light"] #cta { background: linear-gradient(135deg, #F2F4FF 0%, #EAEDFF 100%) !important; border-top-color: rgba(16,18,40,0.10); } /* Тёмные секции на contacts/privacy. */ :root[data-theme="light"] [style*="#0F1018"], :root[data-theme="light"] [style*="#13151F"], :root[data-theme="light"] [style*="#1C1F2E"] { background: var(--bg-1) !important; border-color: var(--border) !important; } /* Баннер cookie: инлайн rgba(13,15,26,0.97). */ :root[data-theme="light"] #cookie-banner { background: rgba(255,255,255,0.97) !important; border-top-color: rgba(16,18,40,0.12) !important; box-shadow: 0 -8px 32px rgba(16,18,40,0.08); } :root[data-theme="light"] #cookie-banner p { color: var(--muted) !important; } :root[data-theme="light"] #cookie-banner [data-consent-decline] { color: var(--muted) !important; border-color: rgba(16,18,40,0.18) !important; } /* ═══ Точечная доводка компонентов ═════════════════════ */ /* Карточки на белом фоне сливаются с секцией — держим их тенью, а не заливкой, иначе граница между секцией и карточкой пропадает. */ :root[data-theme="light"] .prod-card, :root[data-theme="light"] .pricing-card, :root[data-theme="light"] .how-step, :root[data-theme="light"] .faq-item, :root[data-theme="light"] .work-card, :root[data-theme="light"] .demo-card, :root[data-theme="light"] .contact-form-box { box-shadow: 0 1px 2px rgba(16,18,40,0.04), 0 8px 24px rgba(16,18,40,0.06); } /* Свечения рассчитаны на чёрный фон: на белом дают грязные пятна. */ :root[data-theme="light"] .glow, :root[data-theme="light"] .hero-glow, :root[data-theme="light"] .page-hero-glow, :root[data-theme="light"] .hero-visual-glow { opacity: 0.45; } /* Логотип-картинка отрисован под тёмный фон. */ :root[data-theme="light"] .hero-logo-3d { filter: drop-shadow(0 20px 48px rgba(74,91,224,0.22)); } /* Поля формы. */ :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: #FFFFFF; border-color: rgba(16,18,40,0.14); color: var(--text); } :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: #9AA0B4; } /* Полупрозрачные акцентные подложки считались от тёмного фона. */ :root[data-theme="light"] .badge, :root[data-theme="light"] .chip { background: rgba(74,91,224,0.07); border-color: rgba(74,91,224,0.22); } /* Подвал — самая нижняя поверхность, отделяем её от белого полотна. */ :root[data-theme="light"] .footer { background: var(--bg-1); border-top-color: var(--border); } /* Тёмная кнопка в шапке на светлом фоне остаётся тёмной — так она читается как главное действие и не спорит с градиентными кнопками. */ :root[data-theme="light"] .nav-btn { background: var(--text); color: #FFFFFF; border-color: var(--text); } /* Призрачная кнопка: на белом нужна видимая граница. */ :root[data-theme="light"] .btn-ghost, :root[data-theme="light"] .pricing-btn-ghost { border-color: rgba(16,18,40,0.18); color: var(--text); } :root[data-theme="light"] .btn-ghost:hover, :root[data-theme="light"] .pricing-btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* Выделенный тариф. В main.css у него фон захардкожен тёмным градиентом linear-gradient(160deg,#0F1120,#111326) — без этой заплатки карточка остаётся чёрной, а текст в ней нечитаем. */ :root[data-theme="light"] .pricing-card.featured { background: linear-gradient(160deg, #F3F5FF 0%, #ECEFFF 100%); border-color: rgba(74,91,224,0.45); box-shadow: 0 2px 4px rgba(74,91,224,0.08), 0 12px 32px rgba(74,91,224,0.12); } /* Отключённые пункты тарифа. */ :root[data-theme="light"] .pricing-feature.off { color: #A2A8BC; } /* Блок статистики. */ :root[data-theme="light"] .stats { background: var(--bg-1); border-color: var(--border); }