/* ═══════════════════════════════════════════════════════════════════ ЦВЕТА, РАЗМЕРЫ И ДВИЖЕНИЕ — ОДИН ИСТОЧНИК НА ВЕСЬ СЕРВИС ═══════════════════════════════════════════════════════════════════ Почему это отдельный файл. Переменные жили внутри main.css, а main.css подключён только в base.html. Поэтому пульт управления и страницы входа переменных не видели вовсе и красились своими кодами: у пульта собственный набор (--primary: #3b82f6, --success: #10b981), у входа — свой третий. Три палитры на один сервис, и смена оформления доходила до одной. Замеряется это так: python scripts/maintenance/audit_ui.py --colors Файл подключается ПЕРЕД main.css: переменные должны быть объявлены раньше, чем правила начнут их читать. Правило одно: цвет живёт здесь и нигде больше. Шестнадцатеричный код в разметке или в скрипте — это цвет, который не сменится вместе с темой и не найдётся при следующей правке оформления. */ :root { /* ── iOS 26 Light Theme ── */ color-scheme: light; --bg: #f2f2f7; --bg-secondary: #ffffff; --bg-tertiary: #f2f2f7; --label: #000000; --label-secondary: rgba(60,60,67,0.8); --label-tertiary: rgba(60,60,67,0.55); --label-quaternary:rgba(60,60,67,0.3); --separator: rgba(60,60,67,0.29); --separator-opaque:#c6c6c8; --fill: rgba(120,120,128,0.2); --fill-secondary: rgba(120,120,128,0.16); --fill-tertiary: rgba(118,118,128,0.12); --fill-quaternary: rgba(116,116,128,0.08); /* Смысловые цвета светлой темы. * * Были взяты системные цвета iOS как есть. На тёмном фоне они хороши, на * белом — растворяются: измеренный контраст 1.5 у жёлтого, 2.2 у зелёного * и оранжевого, 2.45 у акцента при норме 4.5. А это цвета ГЛАВНЫХ чисел * дашборда: «на 1 месте», «проигрывают», «уперлись в дно». * * Цвета уведены в тень с сохранением тона и насыщенности — зелёный остался * зелёным, просто перестал сливаться с белым. Каждый проверен: не ниже 4.5 * на белой карточке. * * В тёмной теме эти же переменные переопределены ниже своими значениями: * там исходные цвета проходят с запасом, и приглушать их незачем. */ --danger: #d90c00; /* было #ff3b30 — 3.55 */ --warn: #9e5c00; /* было #ff9500 — 2.20 */ --warn-soft: #907300; /* было #ffcc00 — 1.51 */ --ok: #217c38; /* было #34c759 — 2.22 */ --teal: #0b7ea6; /* Поправка после замера на живой странице. Значения выше были подобраны ровно под 4.5 на ЧИСТО БЕЛОЙ карточке. Но тот же цвет стоит текстом на своей бледной плашке, а она делает фон чуть темнее белого — и контраст проваливался под порог: красный 3.95, янтарный 4.00, зелёный 3.97 при норме 4.5 для мелкого текста. Цвета уведены в тень ещё немного. На белом запас вырос до 5.25, на плашке стало 4.6. Измерено в браузере, а не посчитано по значениям: плашка полупрозрачная, и её настоящий фон виден только после наложения. */ /* было #5ac8fa — 1.85 */ --indigo: #4b49b8; --violet: #8e3bb8; /* ── Палитры живого фона ── Три пятна дрейфуют под интерфейсом, и от их оттенков зависит, как читается стекло поверх. Названия — по настроению, а не по цветам: выбирать их человек будет глазами. Новых кодов здесь нет намеренно. Палитры собраны из цветов, которые в проекте уже есть, — иначе к трём оттенкам интерфейса добавились бы ещё три, живущие своей жизнью, и смена темы их бы не касалась. «Сумерки» — как было: зелёный акцент и фиолетовый. «Изумруд» — соседние оттенки вокруг фирменного зелёного. Соседи по кругу читаются спокойнее, чем противоположности. «Индиго» — холодная гамма, зелёного в фоне почти нет. */ --wall-1: var(--accent); --wall-2: var(--violet); --wall-3: var(--accent); /* Liquid Glass материалы — iOS 26 */ /* ── Плотность стекла ── Одно число на весь сервис: панели, окна, боковое меню, шапка. Ставится до первой отрисовки из localStorage (см. utils.js рядом с темой) — иначе панели мигнут значением по умолчанию. Три ступени идут от одной величины, сохраняя прежнее соотношение: тонкое стекло реже основного, плотное — гуще. Двигая ползунок, человек двигает всю шкалу разом, а не ломает её. Светлая тема плотнее тёмной: белое стекло на светлых обоях размывается в молоко раньше, чем тёмное на тёмных. */ --glass: 0.72; --lg-bg: rgba(255,255,255,var(--glass)); --lg-bg-thick: rgba(255,255,255,calc(var(--glass) + 0.13)); --lg-bg-thin: rgba(255,255,255,calc(var(--glass) - 0.27)); --lg-border: rgba(255,255,255,0.9); --lg-border-outer: rgba(0,0,0,0.08); --lg-highlight: rgba(255,255,255,0.95); --lg-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06); --lg-shadow-md: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08); --lg-shadow-lg: 0 20px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.1); /* ── Размытие ── Идёт в паре с плотностью: чем прозрачнее стекло, тем сильнее надо размыть, иначе сквозь панель читается текст под ней. Ползунок двигает обе величины сразу. */ --glass-blur: 20; --lg-blur: blur(calc(var(--glass-blur) * 1px)) saturate(180%); --lg-blur-thick: blur(calc(var(--glass-blur) * 2px)) saturate(200%); --lg-blur-thin: blur(calc(var(--glass-blur) * 0.5px)) saturate(160%); /* Sidebar специфично */ --sidebar-bg: rgba(242,242,247,0.8); --sidebar-item: rgba(60,60,67,0.5); --sidebar-active-bg: rgba(28, 187, 147, 0.12); --sidebar-active: #1cbb93; /* Акцент = GenRate Mint. * * На белом фоне фирменный #1cbb93 даёт контраст 2.45 — как текст он * нечитаем. Здесь он уведён в тень до 4.52, а заливки и свечение * оставлены на исходном тоне: за ними текста нет, и приглушать их значило * бы обесцветить интерфейс без всякой пользы. * * В тёмной теме ниже возвращается исходный #1cbb93: там он даёт 7.73. */ --accent: #14866a; --accent-soft: rgba(28, 187, 147, 0.12); --accent-glow: rgba(28, 187, 147, 0.25); --accent-brand: #1cbb93; /* чистый фирменный: логотип, заливки кнопок */ /* ── Пузыри переписки ── Отдельные токены, а не переиспользование `--lg-bg` и `--accent`. Причина в замерах: пузырь покупателя был залит тем же цветом, что и карточка (`--bg-secondary`), и на фоне страницы давал контраст 1.07 — то есть его не было видно вовсе. Читался только текст, висящий прямо на узоре обоев, и владелец справедливо сказал, что «облачка плохо читаются». Наш пузырь был залит чистым акцентом. Белый текст на нём — 2.45, ниже любой нормы (нужно 4.5), а время при opacity 0.7 — 1.88. При этом сам пузырь был в 8.2 раза светлее страницы: отсюда ощущение «слишком ярко». Цвет тот же фирменный, уведён в тень. `solid` — непрозрачная пара для классической темы: там стекла нет, и альфа ни к чему. В светлой теме белый пузырь на сером фоне даёт 1.10 — те же невидимые границы, но там его спасала заметная рамка. Оставляем рамку и добавляем тень, чтобы правило было одно на обе темы. */ --chat-them-bg: rgba(255,255,255,0.92); --chat-them-solid: #ffffff; --chat-them-border: rgba(60,60,67,0.16); --chat-them-time: rgba(60,60,67,0.8); --chat-me-bg: #14866a; --chat-me-solid: #14866a; --chat-me-border: rgba(20,134,106,0.55); --chat-me-time: rgba(255,255,255,0.92); --chat-bubble-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.07); --chat-bubble-blur: blur(12px) saturate(140%); --font: 'Inter', -apple-system, 'SF Pro Display', BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Courier New', monospace; /* Apple spring easing */ --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --smooth: cubic-bezier(0.4, 0, 0.2, 1); /* ── Длительность ── Было двенадцать значений: .15, .2, .25, .3, .4, .5, .7, 1.5 и те же с ведущим нулём. Три ступени покрывают всё, кроме намеренно долгих (пульсация, мерцание заглушки) — те остаются как есть. */ --t-fast: 0.12s; /* отклик на нажатие, подсветка ячейки */ --t: 0.22s; /* обычный переход */ --t-slow: 0.35s; /* появление окна, разворот панели */ /* Радиусы iOS 26 */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 38px; --r-pill: 9999px; /* ── Фирменный градиент логотипа ── Один на весь сервис: шапка панели, страница входа. Тему не меняет — это подпись, а не элемент интерфейса. */ --brand-a: #0287a5; --brand-b: #70e478; --accent-hover: #0f6e57; /* ── Бледные плашки ── Подсветка строки в таблице, предупреждение внутри карточки. Раньше стояли кодом (#fff3f3, #fff9c4) и в тёмной теме светились белыми пятнами прямо в списке товаров. Здесь они следуют за темой. */ --tint-danger: rgba(237,13,0,0.08); --tint-danger-line: rgba(237,13,0,0.22); --tint-warn: rgba(173,101,0,0.10); --tint-warn-line: rgba(173,101,0,0.24); --tint-ok: rgba(36,136,61,0.10); --tint-ok-line: rgba(36,136,61,0.24); /* ── Полоса «копия для разработки» ── Одинакова в обеих темах: это предупреждение, а не оформление. */ --banner-dev: #8f5d10; /* ── Чужие фирменные цвета ── Принадлежат WhatsApp и Telegram. Меняться вместе с нашей темой не должны: зелёный WhatsApp узнаётся именно этим зелёным. */ --brand-whatsapp: #25d366; --brand-telegram: #0088cc; /* ── Цвета линий на графиках ── Отдельный набор, и вот почему. Цвета интерфейса значат состояние: зелёный — хорошо, красный — плохо, акцент — наше. У линии графика смысла нет, ей нужно ровно одно свойство — отличаться от соседней. Взять сюда цвета интерфейса уже пробовали: --accent объявлен как var(--accent), то есть синего в палитре нет вовсе, и линия «Моя цена» вышла того же мятного цвета, что кнопки и подсветка вокруг. Две из трёх серий на графике стали спорить с оформлением. Порядок важен: 1 и 2 обязаны различаться сильнее всех — это «моя цена» против «цены конкурента» и «вариант А» против «варианта Б». Значения проверены на контраст с подложкой карточки. */ --chart-1: #1f6fd0; /* синий — моя цена, вариант А */ --chart-2: #c2600a; /* рыжий — конкурент, вариант Б */ --chart-3: #8e3bb8; /* лиловый — место в выдаче */ --chart-4: #0b7ea6; /* бирюза */ --chart-5: #b02a52; /* малина */ /* Сиреневая и синяя плашки. Без них значки тарифов «Pro» и «Custom» садились на один и тот же янтарный фон и различались только цветом текста — подложка перестаёт что-либо значить. */ --tint-violet: rgba(142,59,184,0.10); --tint-violet-line: rgba(142,59,184,0.24); --tint-indigo: rgba(75,73,184,0.10); --tint-indigo-line: rgba(75,73,184,0.24); /* Заливка под курсором. Третья ступень той же плашки: покой — наведение — рамка. Без неё правила :hover в main.css красились своими rgba, и это оказалось не мелочью: там сидела ВСЯ старая палитра. Фон значка брался из rgba(52,199,89,…) — зелёного до аудита, — а текст на нём уже из --ok. Один элемент, две палитры. */ --tint-ok-hover: rgba(36,136,61,0.18); --tint-warn-hover: rgba(173,101,0,0.18); --tint-danger-hover: rgba(237,13,0,0.16); --tint-violet-hover: rgba(142,59,184,0.18); --tint-indigo-hover: rgba(75,73,184,0.18); --accent-soft-hover: rgba(28,187,147,0.20); --tint-warn-soft: rgba(144,115,0,0.10); --tint-warn-soft-hover: rgba(144,115,0,0.18); --tint-warn-soft-line: rgba(144,115,0,0.24); /* Затемнение под окном. Одно на весь сервис. */ --scrim: rgba(6,7,10,0.55); /* ── Размер текста ── Панель плотная: основной диапазон 11–13px, не 16. Шкала объявлена здесь, а не рассыпана по разметке: раньше в проекте жили семнадцать разных размеров, и поменять «мелкий текст» значило найти двести сорок четыре места. Имена по роли, а не по числу: смысл в том, чтобы можно было сдвинуть значение, не переименовывая всё вокруг. */ --fs-micro: 10px; /* метаданные, подписи под значками */ --fs-label: 11px; /* подписи, значки состояния */ --fs-body: 12px; /* основной текст панели */ --fs-base: 13px; /* кнопки, ячейки таблицы */ --fs-lead: 14px; /* заголовок карточки */ --fs-head: 16px; /* заголовок раздела */ --fs-title: 22px; /* заголовок страницы */ --fs-hero: 32px; /* главные числа дашборда */ /* Поле ввода и кнопка на отдельных страницах (вход, регистрация, смена пароля). Ровно шестнадцать, и это не про вид: ниже шестнадцати Safari на iPhone увеличивает страницу при фокусе, и после ввода почты человек остаётся на разъехавшейся странице. */ --fs-form: 16px; /* ── Насыщенность ── Ниже 500 не опускаемся: на плотном тексте тоньше уже нечитаемо. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Отступы: четырёхпиксельный ритм ── Было двадцать восемь разных значений. У одного только gap шесть ступеней: 4, 5, 6, 8, 10, 12. Разница в пиксель не читается как замысел — она читается как небрежность, и из неё складывается ощущение, что интерфейс собран из кусков. Половинная ступень оставлена намеренно: ею набраны плашки вида padding: 2px 8px, и удваивать их значило бы раздуть мелкие значки. */ --s-half: 2px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; } /* ── Dark Theme ── */ /* * Палитра общая с витриной genrate.kz (static/css/landing.css). * * Было: чистый чёрный фон, серо-нейтральные разделители и белый текст — * то есть системная тема iOS, взятая как есть. Стало: очень тёмный фон с * холодным отливом, волосяные линии в тон и текст чуть мягче белого. * * Зачем менялось. Продавец приходит с витрины в панель, и переход не * должен выглядеть как переход в другой продукт. Плюс чистый белый на * чистом чёрном бликует: за рабочий день в таблице на девятьсот строк * это утомляет сильнее, чем кажется. * * Менялись ТОЛЬКО переменные. Ни одно правило разметки не трогали — * поэтому шаг обратим целиком: вернуть прежние значения и всё как было. * Светлая тема не тронута вовсе. */ [data-theme="dark"] { color-scheme: dark; --bg: #06070a; /* было #000000 */ --bg-secondary: #0e1116; /* поверхность карточки */ --bg-tertiary: #151a22; /* поверхность внутри карточки */ /* Текст: мягче чистого белого, ступени холоднее прежних серых. */ --label: #e9eef5; --label-secondary: #93a0b1; --label-tertiary: #6f7c8d; --label-quaternary:#4d5867; /* Разделители — волосяные, в тон фону, а не серые поверх него. */ --separator: #1e2631; --separator-opaque:#1e2631; /* Заливки с тем же холодным отливом, что и фон. */ --fill: rgba(120,136,160,0.30); --fill-secondary: rgba(120,136,160,0.24); --fill-tertiary: rgba(118,134,158,0.17); --fill-quaternary: rgba(118,134,158,0.11); /* Тёмное стекло прозрачнее светлого: цвет обоев сквозь него должен проходить, иначе мятные пятна читаются как пятна НА фоне, а не как свет ВНУТРИ панелей. Прежнее значение 0.80 этого не давало. */ --glass: 0.55; --glass-blur: 28; --lg-bg: rgba(14,17,22,var(--glass)); /* Ступень «плотное» была +0.17, то есть 0.72 при ползунке на 0.55. Поверх почти чёрной страницы (rgb 6,7,10) это читается сплошной коробкой: окна и выпадающие списки выглядели «не стеклом», хотя размытие под ними работало. Разброс лестницы уменьшен — стекло осталось стеклом, но сквозь него стало видно. */ --lg-bg-thick: rgba(18,22,29,calc(var(--glass) + 0.10)); --lg-bg-thin: rgba(14,17,22,calc(var(--glass) - 0.22)); --lg-border: rgba(233,238,245,0.10); --lg-border-outer: rgba(233,238,245,0.05); --lg-highlight: rgba(233,238,245,0.07); --lg-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4); --lg-shadow-md: 0 10px 34px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.45); --lg-shadow-lg: 0 24px 64px rgba(0,0,0,0.8), 0 8px 24px rgba(0,0,0,0.55); /* Боковая панель ЖИЛА ОТДЕЛЬНО: 0.88 числом, мимо ползунка. Двигать плотность можно было сколько угодно — панель оставалась почти непрозрачной, и владелец справедливо говорил, что она «как будто бы тёмная». Теперь она на общей шкале и чуть плотнее основного стекла, как и положено опоре интерфейса. */ --sidebar-bg: rgba(10,13,18,calc(var(--glass) + 0.06)); --sidebar-item: #6f7c8d; --sidebar-active-bg: rgba(28, 187, 147, 0.16); --sidebar-active: #1cbb93; /* На тёмном фоне приглушать нечего: измеренный контраст 9.35 у зелёного, 8.60 у оранжевого, 7.73 у акцента. Возвращаем насыщенные. */ --accent: #1cbb93; --ok: #30d158; --warn: #ff9f0a; --warn-soft: #ffd60a; --teal: #64d2ff; --indigo: #7d7aff; --violet: #da8fff; --danger: #ff5a5a; /* Логотип и чужие бренды тему не меняют — переопределять нечего. */ --accent-hover: #35d4ab; /* ── Пузыри переписки ── Отдельные токены, а не переиспользование `--lg-bg` и `--accent`. Причина в замерах: пузырь покупателя был залит тем же цветом, что и карточка (`--bg-secondary`), и на фоне страницы давал контраст 1.07 — то есть его не было видно вовсе. Читался только текст, висящий прямо на узоре обоев, и владелец справедливо сказал, что «облачка плохо читаются». Наш пузырь был залит чистым акцентом. Белый текст на нём — 2.45, ниже любой нормы (нужно 4.5), а время при opacity 0.7 — 1.88. При этом сам пузырь был в 8.2 раза светлее страницы: отсюда ощущение «слишком ярко». Цвет тот же фирменный, уведён в тень. `solid` — непрозрачная пара для классической темы: там стекла нет, и альфа ни к чему. Новые числа: пузырь покупателя к фону 1.41 (у WhatsApp 1.30, у Telegram около 1.5), белый текст на нашем 6.17, наш пузырь к фону 3.27 вместо 8.2. */ --chat-them-bg: rgba(32,43,57,0.86); --chat-them-solid: #202b39; --chat-them-border: rgba(233,238,245,0.10); --chat-them-time: #93a0b1; --chat-me-bg: rgba(15,110,92,0.88); --chat-me-solid: #0f6e5c; --chat-me-border: rgba(28,187,147,0.38); --chat-me-time: #a7e6d4; --chat-bubble-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 6px 18px rgba(0,0,0,0.38); --chat-bubble-blur: blur(12px) saturate(140%); --tint-danger: rgba(255,90,90,0.13); --tint-danger-line: rgba(255,90,90,0.30); --tint-warn: rgba(255,159,10,0.13); --tint-warn-line: rgba(255,159,10,0.30); --tint-ok: rgba(48,209,88,0.13); --tint-ok-line: rgba(48,209,88,0.30); /* Те же линии на тёмной подложке: светлее и чище, порядок тот же. */ --chart-1: #5aa9ff; --chart-2: #ff9f0a; --chart-3: #da8fff; --chart-4: #64d2ff; --chart-5: #ff6482; --tint-violet: rgba(218,143,255,0.13); --tint-violet-line: rgba(218,143,255,0.30); --tint-indigo: rgba(125,122,255,0.13); --tint-indigo-line: rgba(125,122,255,0.30); --tint-ok-hover: rgba(48,209,88,0.22); --tint-warn-hover: rgba(255,159,10,0.22); --tint-danger-hover: rgba(255,90,90,0.22); --tint-violet-hover: rgba(218,143,255,0.22); --tint-indigo-hover: rgba(125,122,255,0.22); --accent-soft-hover: rgba(28,187,147,0.24); --tint-warn-soft: rgba(255,214,10,0.13); --tint-warn-soft-hover: rgba(255,214,10,0.22); --tint-warn-soft-line: rgba(255,214,10,0.30); --scrim: rgba(0,0,0,0.65); } /* ══ Выбор палитры живого фона ══ Ставится отметкой на корне из utils.js, рядом с темой. Без отметки работает набор по умолчанию, объявленный выше. */ html[data-wall="emerald"] { --wall-1: var(--accent); --wall-2: var(--teal); --wall-3: var(--accent); } html[data-wall="indigo"] { --wall-1: var(--teal); --wall-2: var(--indigo); --wall-3: var(--accent); } /* Тёплая гамма — в духе закатных обоев iOS. Собрана из наших же цветов состояний: янтарный, красный и фиолетовый. Под стеклом они читаются не как «ошибка» и «внимание», а как оттенки неба, потому что лежат размытыми пятнами при непрозрачности в треть. */ html[data-wall="sunset"] { --wall-1: var(--warn); --wall-2: var(--danger); --wall-3: var(--violet); } /* Холодная зелень с фиолетовым просветом — ближе всего к тому, что Apple показывает на тёмных обоях: одна доминанта и один далёкий оттенок. */ html[data-wall="aurora"] { --wall-1: var(--accent); --wall-2: var(--indigo); --wall-3: var(--teal); } /* ══ Классическая тема ══ ------------------------------------------------------------------ Стекло выключается НЕ правилами, а токенами: правила остаются те же, значения приходят другие. Так не нужно дублировать сотню селекторов, и новая стеклянная поверхность, добавленная завтра, погаснет в классической теме сама. Отметки на корне нет по умолчанию — значит по умолчанию классическая. Стеклянную ставит utils.js рядом с темой и языком. `backdrop-filter: none` — полноценное значение, а не отсутствие: размытие снимается, а правило остаётся валидным. */ html:not([data-skin="glass"]) { --lg-bg: var(--bg-secondary); /* Пузыри переписки: непрозрачная пара той же темы. Через промежуточный токен, а не литералом, — иначе тёмный пузырь уехал бы и в светлую классическую тему. */ --chat-them-bg: var(--chat-them-solid); --chat-me-bg: var(--chat-me-solid); --chat-bubble-blur: none; --lg-bg-thick: var(--bg-secondary); --lg-bg-thin: var(--bg-secondary); --lg-blur: none; --lg-blur-thick: none; --lg-blur-thin: none; --sidebar-bg: var(--bg-secondary); }