/* ПАЛИТРА ВСЕГО САЙТА — тёмная адриатическая (решение пользователя 2026-08-14: «накатить на морду и все остальные страницы preview 13»). До этого дня палитра жила в трёх местах: инлайном на морде, в ten.css для остальных страниц и своя в админке — один сайт был трёх оттенков. Теперь она ЗДЕСЬ и только здесь; файл подключают все страницы, включая админку. ---------- как устроено переключение тем ---------- Значения объявлены дважды: тёмные — на голом :root, светлые — на :root[data-theme="light"]. Атрибут на и есть переключатель: document.documentElement.dataset.theme = 'light'; // светлая delete document.documentElement.dataset.theme; // тёмная Атрибута сейчас никто не ставит — сайт всегда тёмный (просьба пользователя: «возможность оставить, но сейчас этого не будет»). Светлый набор ГЛАЗАМИ НЕ ПРОВЕРЕН: он снят с семнадцатой песочницы, где обкатан на каталоге, но остальные страницы в нём никто не видел. Включать — только вместе с проверкой на двух версиях (design_check). Чтобы задел не сгнил, правило одно: НИКАКИХ жёстких цветов в правилах сайта — только var(--…) отсюда. Тогда светлая тема заработает сменой одного атрибута, а не переписыванием стилей заново. Песочницы /preview13…17 сюда не смотрят: у них свои классы pal13…pal17 на body, они сильнее :root и перебивают эти значения. */ :root { /* ---------- общее для обеих тем ---------- */ /* бирюза вместо прежнего зелёного и золото эскиза; имена --green* остались прежними — на них завязан весь старый CSS */ --green: #11b5b0; --green-dark: #0d928e; --accent: #c99b3e; --serif13: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif; --sans13: 'Outfit', 'Manrope', 'Segoe UI', system-ui, sans-serif; /* Шрифт ДЛИННОГО ЧТЕНИЯ — текст объявления от продавца. Outfit нарисован для интерфейса: в абзацах на десяток строк он читается хуже системного (замечание пользователя 2026-08-14 — «тут бы я предпочёл шрифт как на боевом»). Стек боевого и берём */ --sans-read: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; --radius: 10px; /* ---------- тёмная: ночная бухта Котора (pal13 эскиза) ---------- */ --ink: #e2dbd0; /* основной текст */ --text: #e2dbd0; /* имя того же цвета в старом app.css */ /* Подписи. Были #7a90a8 — 5,1:1 к карточке: норму держат, а глазом на тёмном тускловаты (замечание пользователя 2026-08-15 «серый текст читается не очень»). Подняты до 7,1:1 — заметно светлее, но всё ещё явно тише основного текста, у того 12,2:1 */ --muted: #95acc5; /* подписи, второстепенное */ --line: rgba(255, 255, 255, .09); --border: rgba(255, 255, 255, .09); /* то же для app.css */ /* Кайма ОРГАНОВ (значки над объявлением, кнопки-квадратики). Обычная --line рисует разделители внутри карточки, ей и положено быть еле заметной; но у отдельно стоящей кнопки она — единственный контур, и на тёмном кнопка пропадала (замечание пользователя 2026-08-15) */ --control-line: rgba(255, 255, 255, .24); --bg: #0b1525; /* фон страницы */ --soft: #172036; /* подложка наведения, поля ввода */ --card13: #111e33; /* карточки, меню, панели */ --card: #111e33; /* то же для app.css */ --teal13: #2fd4cf; /* ссылки — ярче заливочной бирюзы */ /* Бирюза КРУПНОГО текста: цена, цифры ленты, «me» в вывеске. На тёмном это та же бирюза, а на светлом — своя: крупному тексту положено 3:1, а не 4,5, и на этом послаблении он остаётся живым. Одним цветом на всё выходило либо тускло, либо нечитаемо (замечание пользователя 2026-08-15) */ --teal-lg: #2fd4cf; --h1b13: #b9c4d4; /* вторая строка заголовка героя */ --goldink13: #dfb968; /* чернила ярлыка «долгосрочно» */ --seasonink13: #e8a97c; /* сезонная аренда */ --skyink13: #7ab7e0; /* посуточно */ --staleink13: #ef8aa0; /* давно висит */ /* На тёмном мягкая тень не читается — её работу делает подъём светлоты карточки. Тень оставлена глубокой и узкой: она отделяет всплывающее от страницы, а не рисует «объём» */ --shadow: 0 2px 10px rgba(0, 0, 0, .35); --shadow-pop: 0 12px 30px rgba(0, 0, 0, .5); /* текст НА заливке бирюзой и золотом: почти чёрный, не белый — на светлой заливке белый давал 1.9 контраста */ --on-fill: #061018; /* Текст и значки НА ТЁМНОЙ ПОДЛОЖКЕ поверх фотографии (пилюли возраста, счётчик кадров, стрелки просмотрщика, кнопки мессенджеров). Подложка там тёмная в ОБЕИХ темах — снимок под ней светлый, — поэтому значение одно и в светлой теме не меняется */ --on-dark: #ffffff; /* Сердечко «в избранном» — КРАСНОЕ, а не розовое (просьба пользователя 2026-08-15). Замер на карточке: 4,7:1 при норме 3 для значка. У светлых ступеней свой, гуще: яркий красный на белом даёт 3,3, а этот 4,8 */ --fav-ink: #ff3b30; /* ---------- вывеска ---------- «4» золотая, «me» бирюзовое. На тёмной шапке это заливочные цвета как есть; на светлой они выцветают — замер дал 2,2–2,5:1 при норме 3 для крупного текста (ревизия светлых ступеней 2026-08-15). Поэтому у вывески свои чернила, а не общие --accent/--green */ --logo-4-ink: #c99b3e; --logo-me-ink: #11b5b0; /* ---------- пилюли ПОВЕРХ ФОТОГРАФИИ ---------- Возраст объявления, счётчик кадров, сердечко, «на карте», стрелки листания. Раньше были вписаны намертво тёмным стеклом и на светлых ступенях оставались тёмными (замечание пользователя 2026-08-14: «сделай всё по этим палитрам»). Теперь идут за темой: на тёмной — тёмное стекло со светлой надписью, на светлой — светлое с тёмной, как было на боевом. Снимок под ними бывает любой, поэтому стекло плотное: читается и на белом небе, и на чёрной тени */ --photo-glass: rgba(11, 21, 37, .72); --photo-glass-soft: rgba(11, 21, 37, .6); --photo-glass-hard: rgba(11, 21, 37, .9); --photo-ink: #cfd8e3; /* ---------- ОКОШКО НА КАРТЕ ---------- Карта светлая в ЛЮБОЙ теме (решение пользователя 2026-08-13: тёмную примеряли и сняли), значит и всплывающее окно над ней светлое. Свои цвета ему нужны именно поэтому: пока их не было, оно брало чернила темы, и на белом цена бирюзой давала 1,8:1, а место серым 2,3:1 — читать было нечего. Значения одни на обе темы: подложка-то не меняется */ --pop-ink: #16202e; --pop-muted: #5a6a80; /* 5,0:1 на белом */ --pop-link: #077572; /* 5,5:1 на белом */ --pop-line: rgba(15, 23, 42, .18); /* ---------- «БУМАГА»: текст объявления от продавца ---------- Выбор пользователя 2026-08-14 из пяти примерок: длинный чужой текст читается ТЁМНЫМ ПО СВЕТЛОМУ, как на боевом, — светлым по тёмному он бликует и расплывается, сколько ни правь кегль. Заодно светлый лист сам отделяет чужие слова от нашего интерфейса. Замер: текст 14:1, ссылки 4,9:1, сам лист против фона страницы 16,4:1 — виден как отдельный лист */ --paper: #f4f2ee; /* тёплая белая, не бумажно-синяя */ --paper-ink: #1b2430; --paper-muted: #5b6673; --paper-link: #077572; --paper-line: rgba(20, 30, 45, .14); --paper-tint: rgba(20, 30, 45, .05); /* шапки таблиц, код */ /* ---------- ярлыки сделки ---------- Самоцветы эскиза: золото, небо, сиреневый. Одни и те же значения красят и плитки каталога, и страницу объявления — иначе один и тот же факт выглядел бы двумя разными плашками. «Продажа» — пыльная сирень (выбор владельца 2026-08-14 из четырёх показанных): бирюза совпадала в цвет с ценой рядом и читалась её продолжением */ --sale-bg: rgba(158, 132, 196, .16); --sale-ink: #c9b8de; --long-bg: rgba(201, 155, 62, .18); --season-bg: rgba(226, 150, 80, .18); --daily-bg: rgba(74, 144, 196, .2); --stale-bg: rgba(212, 24, 61, .2); /* «спрос» — серый: не предложение, с цветными сделками не путается */ --wanted-bg: rgba(255, 255, 255, .07); /* ---------- ряды графика цен (/prices) ---------- Слот закреплён ЗА ГОРОДОМ навсегда, не за местом в рейтинге (см. price_chart.py): фильтры и рост выборки не перекрашивают линии. Тон города общий у обеих тем, светлота и насыщенность — свои: набор для светлого фона на тёмном проваливал полосу светлоты, а фиолетовый давал контраст 1.95:1 при норме 3:1 (замер валидатором навыка dataviz, 2026-08-14). Тёмный набор проверен по всем пяти счётным правилам на фоне #0b1525: полоса L 0.48–0.67, насыщенность ≥ .10, дальтонизм ΔE 10.3 при норме 8, обычное зрение 19.7 при норме 15, контраст все ≥ 3:1. Менять — только пересчитав заново. */ --chart-1: #3b93ff; /* Будва */ --chart-2: #f65900; /* Бар */ --chart-3: #00af78; /* Тиват */ --chart-4: #c58501; /* Бечичи */ --chart-5: #fe2e95; /* Херцег-Нови */ --chart-6: #01b301; /* Котор */ --chart-7: #887fff; /* Улцинь */ --chart-8: #ff4548; /* Петровац */ /* стекло: полупрозрачная подложка шапки и панелей поверх фото */ --glass: color-mix(in srgb, var(--card13) 94%, transparent); /* красный «снять фильтр» и ошибки — в гамме, не боевой #b3261e */ --danger: #ef8aa0; /* подложка под тёмным изображением-заглушкой */ --img-empty: #16233a; } /* ================== СВЕТЛАЯ ================== Задел под тему и, тем же набором, семнадцатая ступень шкалы светлости в песочнице: это одно и то же, поэтому и объявлено один раз. Всё, что выше в :root, переопределяется ПОИМЁННО — иначе светлая ступень донашивает тёмные значения (так и было до 2026-08-14: розовая «ошибка» на белом 2,4:1, тёмно-синяя заглушка фото на светлой странице, невидимая подложка «спроса»). Каждая пара «чернила на подложке» посчитана, а не подобрана глазом: основной текст 14,9:1, подписи и ссылки 5,0:1 при норме 4,5, ярлыки сделки от 3,4:1 при норме 3. */ :root[data-theme="light"], body.pal17 { --ink: #16202e; --text: #16202e; /* были #64748b и #0b7d79 — 4,5 и 4,2:1, ссылка не дотягивала до нормы; потемнели ровно настолько, чтобы держать 5:1 с запасом */ --muted: #5a6a80; /* ЖИВЫЕ, а не «потемневшие» (замечание пользователя 2026-08-15: «эти цвета не проработаны в светлых темах»). Прежние получались потемнением тёмных при неизменной насыщенности — от этого цвет глохнет. Теперь тон и насыщенность те же, что в тёмной теме, а светлота берётся САМАЯ ВЫСОКАЯ, при которой держится норма: 4,5:1 мелкому тексту, 3:1 крупному. Гнать насыщенность в потолок нельзя — «пыльная сирень» превращалась в электрическую */ --teal13: #007976; /* ссылки, мелкое — 4,8:1 на белом */ --teal-lg: #009894; /* цена, лента цифр, «me» — 3,2:1 */ --line: rgba(15, 23, 42, .13); --border: rgba(15, 23, 42, .13); --control-line: rgba(15, 23, 42, .26); --bg: #ffffff; --soft: #f1f4f8; --card13: #ffffff; --card: #ffffff; --h1b13: #52627a; /* чернила ярлыков — к СВОЕЙ подложке, а не к странице; ярлык набран мелким, значит норма 4,5:1, а не 3 — замер 4,7 */ --goldink13: #8c6805; --seasonink13: #975e32; --skyink13: #336f95; --staleink13: #9d4159; --shadow: 0 1px 3px rgba(17, 24, 39, .10); --shadow-pop: 0 8px 26px rgba(17, 24, 39, .16); /* Надпись на заливке остаётся ТЁМНОЙ и в светлой теме: замер даёт 7,5:1 против 2,5:1 у белой — бирюза и золото сами по себе светлые. Прежнее «белым на светлом» было ошибкой задела */ --on-fill: #061018; --glass: color-mix(in srgb, #ffffff 92%, transparent); --danger: #ab4d64; --img-empty: #eef1f5; --fav-ink: #d92d20; /* вывеска на светлой шапке: золото гуще, «me» той же бирюзой, что цена и лента цифр — 3,2:1 при норме 3 для крупного */ --logo-4-ink: #af821e; --logo-me-ink: #009894; /* стекло пилюль на снимке — светлое, надпись тёмная (как на боевом) */ --photo-glass: rgba(255, 255, 255, .92); --photo-glass-soft: rgba(255, 255, 255, .85); --photo-glass-hard: rgba(255, 255, 255, .98); --photo-ink: #33404f; /* на белом приглушённые самоцветы почти пропадают — берём плотные */ --sale-bg: #f3e8f7; --sale-ink: #716183; --long-bg: #fdf5e3; --season-bg: #fdf0e3; --daily-bg: #e7f0fa; --stale-bg: #f8d7da; --wanted-bg: #eceff1; /* ряды графика для светлого фона — набор, проверенный на #f6f7f5 */ --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #4a3aa7; --chart-8: #e34948; } /* ================== ЛЕСТНИЦА СВЕТЛОСТИ ================== Ступени песочниц /preview13…17 (просьба пользователя: «пока оставим»). Живут ЗДЕСЬ, рядом с палитрой, а не в шаблоне каталога: иначе цвета сайта и цвета ступеней правятся в разных местах и расходятся. Класс на body сильнее :root и перебивает набор темы. Тринадцатой своего набора не нужно — она и есть :root выше. */ /* pal14 — чуть светлее тринадцатой */ body.pal14 { --ink: #e6e0d6; --muted: #a8bed5; --line: rgba(255, 255, 255, .11); --control-line: rgba(255, 255, 255, .26); --bg: #14233c; --soft: #263a5c; --card13: #1d2f4e; --card: #1d2f4e; --teal13: #2fd4cf; --teal-lg: #2fd4cf; --h1b13: #c3cdda; --goldink13: #dfb968; --seasonink13: #e8a97c; --skyink13: #9cc9e8; --fav-ink: #ff3b30; /* 3,8:1 */ --staleink13: #ef8aa0; } /* pal15 — заметно светлее, серо-синие сумерки */ body.pal15 { /* подписи светлее исходных #b0bfd0: на своей же карточке они давали 4,2:1 при норме 4,5 (ревизия ступеней 2026-08-15), теперь 4,7 */ --ink: #f0ece4; --muted: #d6e3f2; --line: rgba(255, 255, 255, .16); --control-line: rgba(255, 255, 255, .3); --bg: #31445f; --soft: #475e82; --card13: #3d5273; --card: #3d5273; --teal13: #52e2dc; --teal-lg: #52e2dc; --h1b13: #d5dce5; --goldink13: #ecc987; --seasonink13: #f2bd96; --skyink13: #a9d2ec; --fav-ink: #ff8a80; /* 3,5:1 — карточка светлее, яркий красный на ней не дотягивал */ --staleink13: #f5a3b4; } /* pal16 — светлая серо-голубая. Набор светлой темы целиком, разница только в подложках; чернила ещё на шаг темнее, потому что фон здесь темнее белого и контраст даётся тяжелее (замер: ссылка 5,1:1) */ body.pal16 { --ink: #16202e; --text: #16202e; --muted: #506076; --teal13: #006f6c; /* мелкое — 4,7:1 */ --teal-lg: #008e8a; /* цена, лента цифр, «me» — 3,2:1 */ --line: rgba(20, 35, 60, .15); --border: rgba(20, 35, 60, .15); --control-line: rgba(20, 35, 60, .28); --bg: #e8edf4; --soft: #dde5ef; --card13: #f8fafc; --card: #f8fafc; --h1b13: #46586e; --goldink13: #8c6805; --seasonink13: #975e32; --skyink13: #336f95; --staleink13: #9d4159; --shadow: 0 1px 3px rgba(17, 24, 39, .10); --shadow-pop: 0 8px 26px rgba(17, 24, 39, .16); --on-fill: #061018; --glass: color-mix(in srgb, #f8fafc 92%, transparent); --danger: #a1445c; --img-empty: #eef1f5; --fav-ink: #d92d20; --logo-4-ink: #a37604; --logo-me-ink: #008e8a; /* стекло пилюль на снимке — светлое, надпись тёмная (как на боевом) */ --photo-glass: rgba(255, 255, 255, .92); --photo-glass-soft: rgba(255, 255, 255, .85); --photo-glass-hard: rgba(255, 255, 255, .98); --photo-ink: #33404f; --sale-bg: #f3e8f7; --sale-ink: #716183; --long-bg: #fdf5e3; --season-bg: #fdf0e3; --daily-bg: #e7f0fa; --stale-bg: #f8d7da; --wanted-bg: #eceff1; --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #4a3aa7; --chart-8: #e34948; }