/* ═══════════════════════════════════════════════════════════════════════════ ОБЩИЙ ЯЗЫК ОФОРМЛЕНИЯ — цвета и размеры. Один файл на четыре проекта. Klivox · «Пульт» · Фулфилмент · МП Кабинет. Заведён 10.08.2026. Источник значений — Klivox (klivox/src/app/globals.css). ЧТО ЗДЕСЬ ЛЕЖИТ: только ЗНАЧЕНИЯ. Готовые детали интерфейса — в components.css. Образец всех деталей — vitrina.html. Как подключать — README.md. ── ДВА СЛОЯ ПЛОТНОСТИ ────────────────────────────────────────────────────── Слой задаётся ОДНОЙ пометкой на корне страницы, и третьего значения у неё нет: — сайт Klivox, лендинги, страницы для покупателей — кабинеты, таблицы, «Пульт», фулфилмент Не указано — считается "rabota" (рабочих экранов у нас больше). Разница ТОЛЬКО в толщине линий, тенях и заглавных буквах. Цвета одни и те же. Правило одной строкой: жирная рамка и жёсткая тень — это УДАРЕНИЕ, а ударение работает, только пока оно редкое. ── ТЕМЫ ──────────────────────────────────────────────────────────────────── Поддержаны все три способа, которыми наши проекты переключают тему: 1. системная настройка компьютера (prefers-color-scheme) — сама по себе; 2. класс .dark на корне — так делает Klivox; 3. атрибут data-theme="dark" / "light" — так делают «Пульт» и фулфилмент. Явный выбор человека ВСЕГДА старше системной настройки. ВНИМАНИЕ: Ни один цвет не имеет единственного определения внутри тёмного набора — иначе в светлой теме он не применится вовсе. Стережёт prove_yazyk.py. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── СВЕТЛЫЙ НАБОР — базовый. Здесь определены ВСЕ цвета до единого ─── */ :root { /* Основа: песок */ --c-bg: #f5f1e6; /* фон страницы */ --c-bg-2: #eae4d2; /* фон утопленных участков */ --c-surface: #ffffff; /* плита: карточка, таблица, окно */ --c-surface-2: #efe9dd; /* плита второго уровня: шапка таблицы, боковая колонка */ /* Текст: три степени, дальше не дробить */ --c-text: #0a0a0a; /* основной */ --c-text-2: #3d3d3d; /* пояснение */ --c-text-3: #6e6e6e; /* подпись, единица измерения, «когда» */ /* Линии */ --c-border: #0a0a0a; /* жёсткая рамка витрины и ударений */ --c-line: #ddd5c2; /* тихая линия рабочего слоя */ --c-line-strong: #bdb29a; /* линия, которую надо заметить: рамка поля, кнопки */ /* Главный цвет и его пара */ --c-primary: #ffd21e; /* жёлтый: главное действие, активная вкладка */ --c-primary-hover: #f5c400; --c-primary-ink: #14161a; /* текст НА жёлтом */ --c-primary-soft: #fff3bf; /* жёлтая подсветка без заливки */ /* Чернильная плита: белый текст на жёлтом не читается, поэтому «фирменное» — чёрное */ --c-ink: #0a0a0a; --c-ink-text: #f5f1e6; /* Акценты. ЗАПРЕТ: КРАСНОГО НЕТ НИГДЕ — решение Юрия. Тревога кораллом. */ --c-accent: #e0745c; /* коралл: опасное действие */ --c-accent-soft: #ffe1d9; --c-acid: #c8ff00; /* кислотно-зелёный: ТОЛЬКО деньги покупателя (кэшбек) */ --c-acid-ground: #0a0a0a; /* и только на чёрной подложке */ /* ── Четыре состояния. Их ровно четыре, пятого не заводить ── в порядке · отстаёт · сломано · НЕ ЗНАЕМ. «Не знаем» — полноправное состояние: молчание не равно здоровью. */ --s-ok-bg: #dcf0d8; --s-ok-ink: #256b2a; --s-ok-mark: #2f7a34; --s-warn-bg: #fbeecb; --s-warn-ink: #7a5200; --s-warn-mark: #b8860b; --s-bad-bg: #ffe1d9; --s-bad-ink: #a8382a; --s-bad-mark: #c8503a; --s-off-bg: #e8e2d3; --s-off-ink: #6e6e6e; --s-off-mark: #9c9584; /* Чужие площадки — их фирменные цвета, свои не выдумываем */ --c-wb: #cb11ab; --c-ozon: #005bff; /* ── Шрифт ── Гротеск один на всё. Вшивание самого файла шрифта делает каждый проект у себя: на сервере внешние шрифты заблокированы правилами безопасности (обожглись 09.08.2026), поэтому ссылок наружу здесь нет и быть не должно. */ --f-zagolovok: "Manrope", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; --f-tekst: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --f-ekran: "Segoe UI", system-ui, -apple-system, sans-serif; /* плотные рабочие экраны */ /* Размеры текста */ --t-xs: 11px; /* подпись шапки таблицы, метка */ --t-sm: 12.5px; /* кнопка, пояснение */ --t-base: 13.5px; /* строка таблицы, рабочий текст */ --t-md: 15px; /* заголовок раздела на рабочем экране */ --t-lg: 18px; --t-xl: 22px; /* крупная цифра плитки */ --t-2xl: 30px; /* показатель прибора */ /* Отступы — шаг 4 пикселя, между значениями не изобретать */ --o-1: 4px; --o-2: 8px; --o-3: 12px; --o-4: 16px; --o-5: 20px; --o-6: 24px; --o-8: 32px; --o-10: 40px; /* Плотность строки: рабочий слой держит 32–36 пикселей */ --vysota-stroki: 34px; --vysota-knopki: 30px; /* ЗАПРЕТ: Прямые углы везде. Скругления в этом языке нет вообще — единственное исключение точка состояния, она круглая по смыслу. */ --skruglenie: 0px; /* ── ЗНАЧЕНИЯ СЛОЯ. Ниже переопределяются под витрину. ── По умолчанию — рабочий слой. */ --sloy-ramka: 2px; /* толщина рамки плиты */ --sloy-ramka-cvet: var(--c-line); /* цвет рамки плиты */ --sloy-ten: none; /* тень плиты */ --sloy-ten-udar: 2px 2px 0 var(--c-border); /* тень УДАРЕНИЯ: главная кнопка, активное поле */ --sloy-ten-sloy: 4px 4px 0 var(--c-border); /* тень поднятого слоя: окно, меню, подсказка */ --sloy-caps: none; /* заглавные в заголовках */ --sloy-ves: 800; /* насколько тяжёлый заголовок */ --sloy-otstup: var(--o-3); /* внутренний отступ плиты */ } /* ─── ВИТРИНА: те же цвета, но линии жирные и заголовки капсом ─── */ :root[data-sloy="vitrina"] { --sloy-ramka: 3px; --sloy-ramka-cvet: var(--c-border); --sloy-ten: 6px 6px 0 var(--c-border); --sloy-ten-udar: 4px 4px 0 var(--c-border); --sloy-ten-sloy: 10px 10px 0 var(--c-border); --sloy-caps: uppercase; --sloy-ves: 900; --sloy-otstup: var(--o-5); --vysota-stroki: 44px; --vysota-knopki: 40px; } /* ─── ТЁМНЫЙ НАБОР: тон «Кофе». Переопределяются ТОЛЬКО цвета. ─── Три блока подряд — это не дублирование, а три способа включить тему. Правило порядка: системная настройка -> потом явный выбор, он старше. */ /* 1. Системная настройка компьютера. Явный светлый выбор её перебивает. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { --c-bg:#3a312a; --c-bg-2:#463a31; --c-surface:#4e4238; --c-surface-2:#57493d; --c-text:#f7f0e9; --c-text-2:#c9c2b2; --c-text-3:#b0a897; --c-border:#f7f0e9; --c-line:#63544a; --c-line-strong:#8a7767; --c-primary:#ffd21e; --c-primary-hover:#ffdd52; --c-primary-ink:#14161a; --c-primary-soft:#4a3d0c; --c-ink:#f7f0e9; --c-ink-text:#3a312a; --c-accent:#f0917a; --c-accent-soft:#54423c; --c-acid-ground:#000000; --s-ok-bg:#3d4a30; --s-ok-ink:#a9d488; --s-ok-mark:#8fbf6a; --s-warn-bg:#4a3d0c; --s-warn-ink:#f0cf6a; --s-warn-mark:#e3b23c; --s-bad-bg:#54423c; --s-bad-ink:#f0917a; --s-bad-mark:#f0917a; --s-off-bg:#463a31; --s-off-ink:#b0a897; --s-off-mark:#8a7767; --c-wb:#f13fd0; --c-ozon:#4d90ff; } } /* 2. Класс .dark на корне — так переключает Klivox. */ :root.dark { --c-bg:#3a312a; --c-bg-2:#463a31; --c-surface:#4e4238; --c-surface-2:#57493d; --c-text:#f7f0e9; --c-text-2:#c9c2b2; --c-text-3:#b0a897; --c-border:#f7f0e9; --c-line:#63544a; --c-line-strong:#8a7767; --c-primary:#ffd21e; --c-primary-hover:#ffdd52; --c-primary-ink:#14161a; --c-primary-soft:#4a3d0c; --c-ink:#f7f0e9; --c-ink-text:#3a312a; --c-accent:#f0917a; --c-accent-soft:#54423c; --c-acid-ground:#000000; --s-ok-bg:#3d4a30; --s-ok-ink:#a9d488; --s-ok-mark:#8fbf6a; --s-warn-bg:#4a3d0c; --s-warn-ink:#f0cf6a; --s-warn-mark:#e3b23c; --s-bad-bg:#54423c; --s-bad-ink:#f0917a; --s-bad-mark:#f0917a; --s-off-bg:#463a31; --s-off-ink:#b0a897; --s-off-mark:#8a7767; --c-wb:#f13fd0; --c-ozon:#4d90ff; } /* 3. Атрибут data-theme="dark" — так переключают «Пульт», фулфилмент и МП Кабинет. */ :root[data-theme="dark"] { --c-bg:#3a312a; --c-bg-2:#463a31; --c-surface:#4e4238; --c-surface-2:#57493d; --c-text:#f7f0e9; --c-text-2:#c9c2b2; --c-text-3:#b0a897; --c-border:#f7f0e9; --c-line:#63544a; --c-line-strong:#8a7767; --c-primary:#ffd21e; --c-primary-hover:#ffdd52; --c-primary-ink:#14161a; --c-primary-soft:#4a3d0c; --c-ink:#f7f0e9; --c-ink-text:#3a312a; --c-accent:#f0917a; --c-accent-soft:#54423c; --c-acid-ground:#000000; --s-ok-bg:#3d4a30; --s-ok-ink:#a9d488; --s-ok-mark:#8fbf6a; --s-warn-bg:#4a3d0c; --s-warn-ink:#f0cf6a; --s-warn-mark:#e3b23c; --s-bad-bg:#54423c; --s-bad-ink:#f0917a; --s-bad-mark:#f0917a; --s-off-bg:#463a31; --s-off-ink:#b0a897; --s-off-mark:#8a7767; --c-wb:#f13fd0; --c-ozon:#4d90ff; } /* ─── СОВМЕСТИМОСТЬ С KLIVOX ─── В Klivox на именах --tk-* и --c-* сидят десятки готовых экранов. Ниже старые имена получают значения из нового набора: подключил файл — экраны переоделись сами, вёрстку править не надо. Новые экраны старыми именами НЕ пользуются. */ :root { --background: var(--c-bg); --foreground: var(--c-text); --tk-yellow: var(--c-primary); --tk-yellow-hover: var(--c-primary-hover); --tk-yellow-ink: var(--c-primary-ink); --tk-text: var(--c-text); --tk-text-secondary: var(--c-text-2); --tk-text-tertiary: var(--c-text-3); --tk-surface: var(--c-surface); --tk-surface-raised: var(--c-surface-2); --tk-border: var(--c-border); --tk-border-strong: var(--c-border); --tk-muted: var(--c-bg-2); --tk-success: var(--s-ok-mark); --tk-success-muted: var(--s-ok-bg); --tk-brand: var(--c-ink); --tk-wb: var(--c-wb); --tk-ozon: var(--c-ozon); --c-primary-ink: var(--c-primary-ink); --c-cashback: var(--c-acid); --c-cashback-soft: var(--c-acid-ground); --c-warn: var(--c-accent); --tk-radius-sm: var(--skruglenie); --tk-radius: var(--skruglenie); --tk-radius-lg: var(--skruglenie); --tk-radius-xl: var(--skruglenie); --bw: var(--sloy-ramka); --tk-shadow-sm: var(--sloy-ten-udar); --tk-shadow: var(--sloy-ten); --tk-shadow-lg: var(--sloy-ten-sloy); }