/* ═══════════════════════════════════════════════════════════ ВЫГОДНЫЕ СДЕЛКИ — Переключатель темы (тёмная ↔ светлая) Работает через атрибут data-theme на . Лендинг (index) — светлый по умолчанию, ЛК/кабинет — тёмный. Пользовательский выбор сохраняется в localStorage (vs_theme). ═══════════════════════════════════════════════════════════ */ /* Депфолт любой страницы задаётся в . Блок ниже — единое хранилище переменных для ТЁМНОЙ темы. */ [data-theme="dark"] { color-scheme: dark; } /* ═══ СВЕТЛЫЕ страницы (лендинг) → ТЁМНАЯ тема ═══ Лендинг построен на CSS-переменных :root — переопределяем их. */ [data-theme="dark"] { --gold: #C9A27C; --gold-light: #B98A5E; --gold-deep: #8A653F; --cream: #16130F; --beige: #1D1813; --beige-dark: #D8CFC0; --almost-black:#ECE4D8; --ink: #F6F0E6; --mist: rgba(22, 19, 15, 0.6); --glass-bg: rgba(24, 20, 16, 0.72); --glass-border:rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); --soft-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } [data-theme="dark"] body { background: radial-gradient(900px 500px at 10% -10%, rgba(15, 118, 110, 0.28) 0%, transparent 60%), radial-gradient(800px 500px at 100% 0%, rgba(219, 167, 125, 0.18) 0%, transparent 55%), radial-gradient(900px 700px at 50% 110%, rgba(124, 58, 237, 0.14) 0%, transparent 60%), linear-gradient(180deg, #0D0B0A 0%, #120F0C 60%, #0D0B0A 100%); } [data-theme="dark"] .blob-1 { background: radial-gradient(circle at 30% 30%, rgba(20,184,166,0.55), rgba(13,118,110,0.25)); opacity: 0.6; } [data-theme="dark"] .blob-2 { background: radial-gradient(circle at 70% 40%, rgba(236,208,111,0.40), rgba(219,167,125,0.18)); opacity: 0.5; } [data-theme="dark"] .blob-3 { background: radial-gradient(circle at 50% 60%, rgba(124,58,237,0.4), rgba(88,28,135,0.18)); opacity: 0.5; } [data-theme="dark"] .nav-links .nav-link { color: #E2E8F0; } [data-theme="dark"] .nav-links .nav-link:hover { background: rgba(255,255,255,0.08); } [data-theme="dark"] .nav-cta { background: rgba(255, 255, 255, 0.07); color: #F6F0E6 !important; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); } [data-theme="dark"] .nav-cta:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(45, 212, 191, 0.45); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .hero-pill { color: #E8DFC8; border-color: rgba(236,208,111,0.28); background: rgba(13, 118, 110, 0.25); box-shadow: 0 6px 22px rgba(20,184,166,0.15), inset 0 0 20px rgba(20,184,166,0.08); } [data-theme="dark"] .hero h1 .accent { background: linear-gradient(120deg, #2DD4BF 0%, #4ADE80 45%, #ECD06F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="dark"] .hero p.lead { color: rgba(236, 232, 220, 0.72); } [data-theme="dark"] .utp-item strong, [data-theme="dark"] .utp-item div > span { color: #E8E2D4; } [data-theme="dark"] .utp-item div > span { color: rgba(236,232,220,0.6); } [data-theme="dark"] .section-eyebrow { color: #2DD4BF; } [data-theme="dark"] .section-title { color: #F2EDE2; } [data-theme="dark"] .glass-strong { background: rgba(24, 20, 16, 0.72); border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); } /* Тёмная тема: читаемость карточек и футера лендинга */ [data-theme="dark"] .glass, [data-theme="dark"] .utp-item, [data-theme="dark"] .hero-trust, [data-theme="dark"] .news-card, [data-theme="dark"] .trust-card { background: rgba(24, 20, 16, 0.66) !important; border-color: rgba(255,255,255,0.10) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important; } [data-theme="dark"] .news-card h3, [data-theme="dark"] .trust-card h3 { color: #F2EDE2; } [data-theme="dark"] .news-card p, [data-theme="dark"] .trust-card p { color: rgba(236,232,220,0.66); } [data-theme="dark"] .news-card .date, [data-theme="dark"] .tag { color: #E8DFC8; } [data-theme="dark"] .read-more { color: #2DD4BF; } [data-theme="dark"] .metric .label, [data-theme="dark"] .metric .num { color: #F2EDE2; } [data-theme="dark"] .footer { background: rgba(10, 8, 6, 0.9); border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .footer p, [data-theme="dark"] .footer a { color: rgba(236,232,220,0.7); } [data-theme="dark"] .footer h4 { color: #F2EDE2; } [data-theme="dark"] .footer-bottom { color: rgba(236,232,220,0.65); border-top-color: rgba(255,255,255,0.12); } [data-theme="dark"] .lm-label { color: rgba(236,232,220,0.7); } [data-theme="dark"] .lm-value { color: #F2EDE2; } [data-theme="dark"] .lm-updated { color: rgba(236,232,220,0.5); } /* Тёмная тема: кнопки фильтров карты — яркие и контрастные */ [data-theme="dark"] .map-tabs { background: rgba(24, 20, 16, 0.7); border-color: rgba(255,255,255,0.14); box-shadow: 0 10px 26px rgba(0,0,0,0.45); } [data-theme="dark"] .map-tab { color: #E8E2D4; } [data-theme="dark"] .map-tab:not(.active) { color: rgba(236,232,220,0.55); } [data-theme="dark"] .map-tab:not(.active):hover { background: rgba(45,212,191,0.14); } [data-theme="dark"] .map-chip { background: rgba(24, 20, 16, 0.7); border-color: rgba(45,212,191,0.4); color: #2DD4BF; } [data-theme="dark"] .map-chip:not(.active):hover { background: rgba(45,212,191,0.14); border-color: rgba(45,212,191,0.7); } [data-theme="dark"] .map-chip.active { background: linear-gradient(135deg, #DBA77D 0%, #F0C9A6 55%, #ECD06F 100%); color: #21150A; box-shadow: 0 6px 20px rgba(236,208,111,0.35); } [data-theme="dark"] .map-count { color: #2DD4BF; } [data-theme="dark"] .nav { background: rgba(22, 19, 15, 0.7); } [data-theme="dark"] .nav-links.open { background: rgba(18, 15, 12, 0.96); border-bottom-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .nav.is-scrolled { background: rgba(13, 11, 10, 0.94); border-bottom-color: rgba(255, 255, 255, 0.12); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .footer { background: rgba(22, 19, 15, 0.6); } /* ═══ ТЁМНЫЕ страницы (ЛК, кабинет, визитка, auth — style.css) → СВЕТЛАЯ тема ═══ */ [data-theme="light"] .nav-cta { background: #0F766E; color: #fff !important; border-color: #0F766E; box-shadow: 0 6px 18px rgba(15, 118, 110, 0.25); } [data-theme="light"] .nav-cta:hover { background: #0C5F59; border-color: #0C5F59; box-shadow: 0 10px 24px rgba(15, 118, 110, 0.32); } [data-theme="light"] body { background: #F6F5F3; color: #1C1C1C; } [data-theme="light"] .navbar { background: #FFFFFF; border-color: #E5E2DD; } [data-theme="light"] .logo { color: #0F766E; } [data-theme="light"] .nav-links a { color: #555; } [data-theme="light"] .nav-user { color: #0F766E; } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 { color: #111; } [data-theme="light"] .welcome { color: #555; } [data-theme="light"] .dashboard { background: #F6F5F3; } [data-theme="light"] .dash-card, [data-theme="light"] .form-card, [data-theme="light"] .card { background: #FFFFFF; border-color: #E5E2DD; } [data-theme="light"] .card p, [data-theme="light"] .about p { color: #555; } [data-theme="light"] .card h3 { color: #0F766E; } [data-theme="light"] .slot-item { background: #FFFFFF; border-color: #E5E2DD; } [data-theme="light"] .empty { color: #888; } [data-theme="light"] .ev-desc { color: #555; } [data-theme="light"] .slot-price small { color: #888; } [data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .inp { background: #FFFFFF; border-color: #DDD; color: #1C1C1C; } [data-theme="light"] textarea { background: #FFFFFF !important; border-color: #DDD !important; color: #1C1C1C !important; } [data-theme="light"] .form-group select option { background: #FFFFFF; } [data-theme="light"] .form-group label { color: #555; } [data-theme="light"] .form-subtitle, [data-theme="light"] .form-footer { color: #888; } [data-theme="light"] .bookings-table th { color: #666; border-color: #E5E2DD; } [data-theme="light"] .bookings-table td { border-color: #E5E2DD; } [data-theme="light"] .bookings-table tr:nth-child(even) td { background: #FAF9F7; } [data-theme="light"] .price-split { background: rgba(15, 118, 110, 0.08); border-color: rgba(15, 118, 110, 0.25); color: #0F766E; } [data-theme="light"] .price-split b { color: #0F766E; } [data-theme="light"] .slot-price { color: #0F766E; } [data-theme="light"] .error-message { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.3); color: #B91C1C; } /* Ссылки в формах: в светлой теме — тёмный изумруд (неоновые #4ade80/#2DD4BF на белом не читаются) */ [data-theme="light"] .form-footer a, [data-theme="light"] .form-card .form-link { color: #0F766E; } [data-theme="light"] .form-card .form-link:hover { color: #115E59; } /* Уведомления: переменные с тёмными фолбэками (--card/--ink) в светлой теме не переопределены — карточка оставалась тёмной, а текст становился тёмным → тёмный на тёмном */ [data-theme="light"] .notif { background: #FFFFFF; border-color: #E5E2DD; } [data-theme="light"] .notif .t { color: #1A1A1A; } [data-theme="light"] .notif .x, [data-theme="light"] .notif .when { color: #667085; } [data-theme="light"] .notif-head h1 { color: #1A1A1A; } [data-theme="light"] .back-link, [data-theme="light"] .mark-all { color: #0F766E; } [data-theme="light"] .notif.unread { border-left-color: #0F766E; } /* Кнопка-тумблер темы */ #themeToggle { background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 4px 10px; font-size: 15px; cursor: pointer; line-height: 1.4; color: currentColor; } /* Светлая тема: фото-круг должен быть светлым, а не чёрным. ВАЖНО: НЕ использовать shorthand `background:` — он обнуляет background-image (загруженное фото аватара), т.к. JS ставит фото именно как background-image. Только background-COLOR. */ [data-theme="light"] .avatar-preview, [data-theme="light"] #avatarPreview { background-color: #f0efec !important; border-color: #ddd !important; color: #aaa !important; } /* ═══ Попап на карте: в тёмной теме подложка Leaflet оставалась белой, а текст (--ink) становился светлым → имя агента не читалось. Делаем попап тёмным стеклом с читаемым текстом. ═══ */ [data-theme="dark"] .leaflet-popup-content-wrapper { background: rgba(26, 22, 17, 0.94) !important; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.14); } [data-theme="dark"] .leaflet-popup-tip { background: rgba(26, 22, 17, 0.94) !important; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.14); } [data-theme="dark"] .sd-popup-name { color: #F6F0E6; } [data-theme="dark"] .sd-popup-meta { color: rgba(246, 240, 230, 0.72); } [data-theme="dark"] .sd-popup-cta { color: #5EEAD4; } /* ═══ Живой рынок (курсы валют): фон карточки ВСЕГДА тёмно-изумрудный, поэтому заголовок/тег/подпись должны быть светлыми в ЛЮБОЙ теме, иначе теряется контраст (светлая тема красит заголовок тёмным → нечитаемо). ═══ */ .news-card.live-market .lm-title, .news-card.live-market .tag.market, .news-card.live-market .tag { color: #FFFFFF !important; border-color: rgba(255,255,255,0.35) !important; } .news-card.live-market .tag.market { background: rgba(255,255,255,0.14) !important; color: #ECFDF5 !important; } .news-card.live-market .lm-updated { color: rgba(213, 235, 228, 0.85) !important; } .news-card.live-market .lm-label { color: rgba(255,255,255,0.78) !important; } .news-card.live-market .lm-value { color: #FFFFFF !important; } .news-card.live-market .lm-mortgage .lm-value { color: #FDE68A !important; } /* ═══ Контрол зума Leaflet (кнопки «+ / −»): в landing.css цвет иконок задан как var(--ink), который в тёмной теме становится светлым → иконки сливались с белым фоном контрола. Делаем тёмный контрол со светлыми иконками. ═══ */ [data-theme="dark"] .leaflet-control-zoom { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .leaflet-control-zoom a { background: rgba(34, 29, 24, 0.9) !important; color: #F6F0E6 !important; border-color: rgba(255, 255, 255, 0.18) !important; } [data-theme="dark"] .leaflet-control-zoom a:hover { background: rgba(45, 212, 191, 0.92) !important; color: #0D0B0A !important; } /* Светлая тема — явно белый контрол с тёмными иконками */ [data-theme="light"] .leaflet-control-zoom a { background: rgba(255, 255, 255, 0.95) !important; color: #1C1C1C !important; } /* Светлая тема: палитра эмодзи в «Лента» */ [data-theme="light"] .emoji-pick button { background: #F6F5F3; border-color: #DDD; } [data-theme="light"] .emoji-pick button:hover { background: rgba(45, 212, 191, 0.18); } /* ═══ ЛК (dashboard) в светлой теме: сайдбар слева оставался тёмным (fallback var(--card)) → тёмная панель + тёмный текст = нечитаемо. Делаем светлую панель с контрастными ссылками. ═══ */ [data-theme="light"] .dash-sidebar { background: #FFFFFF; border-color: #E5E2DD; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); } [data-theme="light"] .dash-nav a { color: #2A2A2A; font-weight: 600; } [data-theme="light"] .dash-nav a span { opacity: 1; } [data-theme="light"] .dash-nav a:hover { background: rgba(13, 148, 136, 0.12); color: #0F766E; } [data-theme="light"] .dash-nav a.active { background: linear-gradient(120deg, #0d9488, #0f766e); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25); } [data-theme="light"] .dash-acc-arrow { color: #4B5563; border-color: #D4D8DE; } /* ═══ Сайдбар в светлой теме: убираем backdrop-blur (мылит текст/буквы — отсюда «нечёткие шрифты») и делаем непрозрачным белым. ═══ */ [data-theme="light"] .dash-sidebar { background: #FFFFFF; border-color: #E5E2DD; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Заголовки и приветствие — темнее для контраста */ [data-theme="light"] .dash-card h2 { color: #111827; } [data-theme="light"] .welcome { color: #374151; } /* ═══ Аватар (фото профиля) в светлой теме: светлый фон-заглушка, но РЕАЛЬНОЕ фото остаётся (background-image не трогаем). ═══ */ [data-theme="light"] #avatarPreview, [data-theme="light"] .avatar-preview { background-color: #F0EFEC !important; background-size: cover !important; background-position: center !important; } [data-theme="light"] #avatarSilhouette circle, [data-theme="light"] #avatarSilhouette path { fill: #A8A8A8; } [data-theme="light"] #avatarCross { color: #6B7280; background-color: rgba(255, 255, 255, 0.4) !important; } [data-theme="light"] .photo-card span[style*="font-size:12px"] { color: #6B7280; } /* Контраст: подписи «hint» в светлой теме темнее */ [data-theme="light"] .hint { color: #5B6472; } /* ═══ Светлая тема ЛК: СОБЫТИЯ и КНОПКИ — контраст на белом. Зелёный #4ade80 / золотой #ECD06F / серый #999 на белом не читаются. Приводим к фирменному тёмно-изумрудному Выгодных Сделок. ═══ */ [data-theme="light"] .ev-title { color: #111827; } [data-theme="light"] .ev-tag { color: #0F766E !important; /* перебивает inline-цвет (золото цены объекта) */ background: rgba(15, 118, 110, 0.10) !important; font-weight: 600; } [data-theme="light"] .event-row .ev-when, [data-theme="light"] .ev-when { color: #4B5563; } [data-theme="light"] .event-row .ev-desc { color: #6B7280; } /* Кнопки событий: фирменный изумруд вместо бледно-зелёного */ [data-theme="light"] .event-actions .btn, [data-theme="light"] .btn { background: #0F766E; color: #FFFFFF; font-weight: 600; } [data-theme="light"] .event-actions .btn:hover, [data-theme="light"] .btn:hover { background: #115E59; } [data-theme="light"] .event-actions .del-event, [data-theme="light"] .del-event { background: #B91C1C !important; color: #fff !important; } [data-theme="light"] .event-actions .del-event:hover { background: #991B1B !important; } /* Имя пользователя в шапке: ровно цвет логотипа «Выгодные Сделки» (#0F766E), чтобы не выделялось светлым туркоизом на белом. Нужен !important: dash.css ставит .nav-user { color: var(--accent,#2DD4BF) !important }, где #2DD4BF — светлый бирюзовый fallback (в светлой теме --accent не задан). */ [data-theme="light"] .nav-user { color: #0F766E !important; font-weight: 700; font-size: 14px; letter-spacing: 0.2px; } /* ═══ Светлая тема: убираем декоративные размытые пятна (blobs) на лендинге. Они дают «тушевание-замутнение» в середине нижней части экрана и мешают. В тёмной теме blobs остаются (там они — задуманный фон-орбы). ═══ */ [data-theme="light"] .blob { display: none !important; }