/* AIRatings.ru — Светлая тема (overrides) ============================== * * Этот файл — ДУБЛЬ стилей под светлую тему. Тёмная тема (main.css) не * меняется. Файл подключён всегда, но все правила заскоуплены под * `html.theme-white`, поэтому без класса они не действуют. Класс вешает * ранний скрипт в base.html по значению cookie `theme=white`, * а кнопка-переключатель в шапке (toggleTheme()) его ставит/снимает. * * Принцип: фон становится светлым, текст — тёмным, а цветовая гамма * (оценки red→orange→green, акцентный emerald, логотип-градиент, * звёзды) — СОХРАНЯЕТСЯ. Менять цветовую шкалу оценок запрещено * (CLAUDE.md §9), поэтому grade-badge / star-stack здесь не трогаем. * * Большая часть вёрстки использует inline-утилиты Tailwind * (text-slate-*, bg-white/*, border-white/*, bg-ink-*). Здесь они * переопределяются под светлую палитру; кастомные компоненты * (.card, .nav-link, .inp, .form-card …) — тоже. * ===================================================================== */ /* ───────────────────────────────────────────────────────────────────── * Кнопка-переключатель темы: какая иконка видна (правила не заскоуплены — * они нужны в обеих темах, файл всё равно всегда подключён). * ───────────────────────────────────────────────────────────────────── */ .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: inline-block; } html.theme-white .theme-toggle .icon-sun { display: none; } html.theme-white .theme-toggle .icon-moon { display: inline-block; } /* ═══════════════════════════════════════════════════════════════════════ * БАЗА: фон страницы и основной текст * ═══════════════════════════════════════════════════════════════════════ */ html.theme-white body { background: #f7f8fb; color: #1e293b; } html.theme-white .site-bg { background-color: #f7f8fb; background-image: radial-gradient(900px 520px at 8% -8%, rgba(16, 185, 129, 0.10), transparent 60%), radial-gradient(700px 400px at 100% 0%, rgba(245, 158, 11, 0.07), transparent 60%), radial-gradient(1000px 600px at 50% 120%, rgba(239, 68, 68, 0.06), transparent 60%); } /* ═══════════════════════════════════════════════════════════════════════ * ТЕКСТОВЫЕ УТИЛИТЫ slate-* (в тёмной теме — светлый текст) → тёмные * ═══════════════════════════════════════════════════════════════════════ */ html.theme-white .text-white { color: #0f172a !important; } html.theme-white .text-slate-100 { color: #0f172a !important; } html.theme-white .text-slate-200 { color: #1e293b !important; } html.theme-white .text-slate-300 { color: #334155 !important; } html.theme-white .text-slate-400 { color: #475569 !important; } html.theme-white .text-slate-500 { color: #64748b !important; } html.theme-white .text-slate-600 { color: #94a3b8 !important; } /* hover-варианты текста (иначе hover:text-white даст белый текст на белом) */ html.theme-white .hover\:text-white:hover { color: #0f172a !important; } html.theme-white .hover\:text-slate-200:hover { color: #1e293b !important; } html.theme-white .hover\:text-slate-300:hover { color: #334155 !important; } /* Акцентный emerald-текст: светло-зелёный плохо читается на белом → темнее */ html.theme-white .text-emerald-200 { color: #047857 !important; } html.theme-white .text-emerald-300 { color: #047857 !important; } html.theme-white .text-emerald-400 { color: #059669 !important; } html.theme-white .hover\:text-emerald-200:hover { color: #047857 !important; } html.theme-white .hover\:text-emerald-300:hover { color: #047857 !important; } html.theme-white .link-accent { color: #059669; } html.theme-white .link-accent:hover { color: #047857; } /* Светло-indigo текст тоже притемняем для контраста */ html.theme-white .text-indigo-300 { color: #4f46e5 !important; } html.theme-white .text-indigo-400 { color: #4f46e5 !important; } /* ═══════════════════════════════════════════════════════════════════════ * ФОНОВЫЕ УТИЛИТЫ: white-alpha (в тёмной — лёгкая подсветка) → тёмная-alpha * ═══════════════════════════════════════════════════════════════════════ */ html.theme-white .bg-white\/5 { background-color: rgba(15, 23, 42, 0.04) !important; } html.theme-white .bg-white\/8 { background-color: rgba(15, 23, 42, 0.06) !important; } html.theme-white .bg-white\/10 { background-color: rgba(15, 23, 42, 0.07) !important; } html.theme-white .hover\:bg-white\/5:hover { background-color: rgba(15, 23, 42, 0.06) !important; } html.theme-white .hover\:bg-white\/8:hover { background-color: rgba(15, 23, 42, 0.08) !important; } html.theme-white .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.09) !important; } /* ink-* фоны (солидные и прозрачные) → светлые */ html.theme-white .bg-ink-950\/70 { background-color: rgba(255, 255, 255, 0.80) !important; } html.theme-white .bg-ink-950\/80 { background-color: rgba(255, 255, 255, 0.85) !important; } html.theme-white .bg-ink-950\/50 { background-color: rgba(255, 255, 255, 0.60) !important; } html.theme-white .bg-ink-850\/95 { background-color: #ffffff !important; } html.theme-white .bg-ink-800\/95 { background-color: #ffffff !important; } html.theme-white .bg-ink-800 { background-color: #ffffff !important; } /* ═══════════════════════════════════════════════════════════════════════ * ГРАНИЦЫ: white-alpha → тёмная-alpha * ═══════════════════════════════════════════════════════════════════════ */ html.theme-white .border-white\/5 { border-color: rgba(15, 23, 42, 0.08) !important; } html.theme-white .border-white\/8 { border-color: rgba(15, 23, 42, 0.10) !important; } html.theme-white .border-white\/10 { border-color: rgba(15, 23, 42, 0.12) !important; } html.theme-white .hairline { border-color: rgba(15, 23, 42, 0.10) !important; } /* ═══════════════════════════════════════════════════════════════════════ * ИНЛАЙН-ФОНЫ через style="" (перебиваем через attribute-селектор + !important) * ═══════════════════════════════════════════════════════════════════════ */ /* Выпадашка автодополнения поиска (и переключателя валют). Селектор по классу .search-pop, а не по inline-style: Alpine при x-show пересобирает атрибут style (добавляет пробелы), из-за чего attribute-селектор по подстроке с фоном перестаёт совпадать. */ html.theme-white .search-pop, html.theme-white [style*="rgba(15, 18, 32, 0.98)"], html.theme-white [style*="rgba(15,18,32,0.98)"] { background: #ffffff !important; border-color: rgba(15, 23, 42, 0.12) !important; box-shadow: 0 16px 40px -16px rgba(15, 23, 42, 0.25) !important; } /* Подсвеченные emerald-карточки-CTA (style="...background:rgba(16,44,32,0.4)") */ html.theme-white [style*="rgba(16,44,32"] { background: rgba(16, 185, 129, 0.08) !important; border-color: rgba(16, 185, 129, 0.30) !important; } /* ═══════════════════════════════════════════════════════════════════════ * КАСТОМНЫЕ КОМПОНЕНТЫ * ═══════════════════════════════════════════════════════════════════════ */ /* Карточки */ html.theme-white .card { background-color: #ffffff; border: 1px solid rgba(15, 23, 42, 0.10); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.18); } html.theme-white .card:hover { border-color: rgba(16, 185, 129, 0.50); background-color: #ffffff; box-shadow: 0 20px 40px -20px rgba(16, 185, 129, 0.35), 0 8px 20px -12px rgba(245, 158, 11, 0.15); } /* Строки таблиц */ html.theme-white .row:hover { background-color: rgba(16, 185, 129, 0.10); } html.theme-white .row-compare:hover { background-color: rgba(16, 185, 129, 0.06); } html.theme-white .row-active { background-color: rgba(99, 102, 241, 0.08) !important; } html.theme-white .card-active { border-color: rgba(99, 102, 241, 0.5) !important; background-color: rgba(99, 102, 241, 0.06) !important; } /* Навигация */ html.theme-white .nav-link { color: #475569; } html.theme-white .nav-link:hover, html.theme-white .nav-link.active { color: #0f172a; } /* Кнопка-«призрак» */ html.theme-white .btn-ghost { background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.12); color: #334155; } html.theme-white .btn-ghost:hover { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.45); color: #047857; } /* Stat-карточки */ html.theme-white .stat-card { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.10); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } html.theme-white .stat-card:hover { border-color: rgba(16, 185, 129, 0.45); background: #ffffff; box-shadow: 0 16px 30px -16px rgba(16, 185, 129, 0.35); } html.theme-white .stat-lbl { color: #64748b; } /* emoji-плитка */ html.theme-white .emoji-tile { background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(245, 158, 11, 0.12) 100%); border: 1px solid rgba(15, 23, 42, 0.08); } /* Кнопка «Попробовать» (компактная) */ html.theme-white .btn-try { background: rgba(16, 185, 129, 0.10); border: 1px solid rgba(16, 185, 129, 0.40); color: #047857; } html.theme-white .btn-try:hover { color: #ffffff; } /* Плашка «бесплатно» */ html.theme-white .pill-free { background: rgba(16, 185, 129, 0.12); color: #047857; border: 1px solid rgba(16, 185, 129, 0.30); } /* svc-avatar — тень мягче на светлом */ html.theme-white .svc-avatar { box-shadow: 0 4px 10px -4px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.06) inset; } /* Плейсхолдер картинок */ html.theme-white .img-placeholder { background-image: linear-gradient(135deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.10) 50%, rgba(239, 68, 68, 0.08) 50%, rgba(239, 68, 68, 0.08) 100%); background-color: #eef2f7; } /* ═══════════════════════════════════════════════════════════════════════ * ФОРМЫ (UGC, дайджест, поиск) * ═══════════════════════════════════════════════════════════════════════ */ html.theme-white .form-card { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.10); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 30px 60px -30px rgba(16, 185, 129, 0.18), 0 18px 40px -24px rgba(15, 23, 42, 0.12); } html.theme-white .field-label { color: #1e293b; } html.theme-white .field-hint { color: #64748b; } html.theme-white .inp, html.theme-white .txt { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.14); color: #1e293b; } html.theme-white .inp::placeholder, html.theme-white .txt::placeholder { color: #94a3b8; } html.theme-white .inp:hover, html.theme-white .txt:hover { border-color: rgba(16, 185, 129, 0.40); } html.theme-white .inp:focus, html.theme-white .txt:focus { border-color: rgba(16, 185, 129, 0.60); background: rgba(16, 185, 129, 0.04); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); } /* Таб-группа (тип отзыв/кейс) */ html.theme-white .tabgroup { background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.10); } html.theme-white .tabgroup button { color: #64748b; } html.theme-white .tabgroup button:hover { color: #1e293b; } /* .active — оставляем как в тёмной (emerald-градиент с тёмным текстом) */ /* Звёзды-оценка в форме */ html.theme-white .rate-stars button { background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.12); } html.theme-white .rate-stars button svg { fill: rgba(15, 23, 42, 0.20); } /* Кастомный чекбокс */ html.theme-white .ck { border: 1.5px solid rgba(15, 23, 42, 0.25); background: #ffffff; } /* ═══════════════════════════════════════════════════════════════════════ * ПРОЧЕЕ * ═══════════════════════════════════════════════════════════════════════ */ /* Скроллбар */ html.theme-white ::-webkit-scrollbar-track { background: #eef2f7; } html.theme-white ::-webkit-scrollbar-thumb { background: #c7cedb; border: 2px solid #eef2f7; } html.theme-white ::-webkit-scrollbar-thumb:hover { background: #aab3c5; } /* Тултип (.tip) — оставляем тёмным: контрастная подсказка на светлом фоне * читается хорошо, специально не светлим. */