/* ========================================================================== KRASAVA BOXING ACADEMY — дизайн-система Собрана 06.08.2026. Единственное место, где живут цвет и шрифт. ОТКУДА ЦВЕТА. Сняты пипеткой с фотографий самого клиента — 24 кадра из instagram.com/krasava.boxing.academy, замер 06.08.2026. У каждого токена в комментарии стоит источник: «фото» = измерено, «решение» = принято нами и почему, «⚠️» = допущение, ждёт подтверждения. Из эталонов взят только УРОВЕНЬ (насколько дорого и сдержанно) — см. референсы/РАЗБОР.md. Ни один цвет из эталона не взят. ========================================================================== */ :root { /* --- ФОН И ПОВЕРХНОСТИ ------------------------------------------------ Зал в среднем тёмно-серый, не чёрный: доминанты по 24 кадрам легли в диапазон #181818–#A8A8A8. Чистый чёрный в зале почти не встречается, поэтому фон — графит, а не #000. Это и отличает от массового бокс-лендинга «чёрный фон + кислотный акцент», который мы не делаем. */ --bg: #151515; /* фото: самый тёмный слой кадров, пол в тени */ --surface: #1E1E1E; /* фото: пол зала общим планом */ --surface-2: #2B2B2B; /* фото: маты, тень на стене */ --surface-3: #3D3D3D; /* фото: шлакоблок в тени, корпус мешка */ --line: #4A4A4A; /* фото: швы шлакоблока — граница по умолчанию */ /* --- ТЕКСТ ------------------------------------------------------------ */ --ink: #F2F0EE; /* решение: белый с тёплым сдвигом — чистый #FFF на тёплой съёмке смотрится синим */ --ink-2: #A8A8A8; /* фото: светлый шлакоблок на свету */ --ink-3: #787878; /* фото: бетон пола на свету — третьестепенное */ /* --- АКЦЕНТ ----------------------------------------------------------- ГЛАВНОЕ ПРАВИЛО ЭТОЙ СИСТЕМЫ. Красный занимает в его зале 1.7% кадра: канаты ринга и полосы на мешках. Не стены, не пол — пятна. В макете красный держим в тех же пределах: кнопка, полоса под заголовком, счёт. Красная секция или красный блок на пол-экрана ломают достоверность — зал так не выглядит. */ --accent: #C23940; /* фото: канаты ринга + полосы мешков TITLE */ --accent-hot: #D8464E; /* решение: +8% светлоты на наведение */ --accent-deep: #8E2A30; /* решение: −25% на нажатие и тени */ /* --- ВТОРОЙ ЦВЕТ: ТЕРРАКОТА ------------------------------------------ Цвет его логотипа. Мягче красного, работает там, где акцент был бы криком: подложки, иконки, рамка портрета. */ --clay: #BC7059; /* фото: круг логотипа в профиле */ --clay-soft: #C29973; /* фото: свет ламп и тёплый отблеск на коже */ /* --- ГОЛУБОЙ — ФЛАГ --------------------------------------------------- Единственный холодный цвет в зале: перчатки и флаг Украины на стене рядом с флагом США. Он украинский тренер, и это часть лица места. Держим редко: подпись о происхождении, значок звания. */ --flag: #74A3CF; /* фото: флаг на стене + синие перчатки */ /* --- СЕМАНТИКА -------------------------------------------------------- */ --ok: #8A9843; /* фото: оливковый из кадров — подтверждение */ --focus: #74A3CF; /* решение: фокус-кольцо = голубой, он один не спорит с красным */ /* --- ШРИФТ: ОДИН НА ВЕСЬ САЙТ И НА ВСЕ ТРИ ЯЗЫКА ---------------------- Решено Eugene 30.08.2026. Montserrat несёт латиницу и кириллицу одними буквами, диапазон 100–900 — значит одним семейством закрываются и чёрные заголовки (900), и текст (400). Больше на сайте шрифтов нет. ⛔ ЧТО БЫЛО И ПОЧЕМУ УБРАНО. Стояли Archivo Black (заголовки) + Barlow (текст). Ни в одном из них нет кириллицы вообще — проверено запросом к Google Fonts, ноль блоков cyrillic. На /ru/ и /ua/ браузер молча подставлял свой запасной шрифт, и сайт менял лицо при переключении языка. Латали подменой `.lang-ru, .lang-ua { --font-display: Oswald }` — латание работало, но давало ровно ту же беду: разные буквы на разных версиях читаются как разные заведения. ⚠️ ЛОВУШКА ПРИ ЗАМЕНЕ. Archivo Black одновесный: в разметке он стоял с font-weight:400 и всё равно выглядел чёрным. У Montserrat 400 — обычный текст. Меняя имя, обязательно поднимать вес до 900 там, где заголовок опирается на --font-display. Иначе весь сайт станет тонким. ⚠️ ПРАВИЛО НА БУДУЩЕЕ. Планируется хоть один нелатинский язык — шрифт проверяется на буквы ДО выбора, а не после: curl -s "https://fonts.googleapis.com/css2?family=<Шрифт>&subset=cyrillic" | grep -c cyrillic Ноль — шрифт не годится, каким бы красивым ни был. */ --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-text: 'Montserrat', -apple-system, 'Segoe UI', sans-serif; /* Шкала. Заголовки текучие: телефон → десктоп без ступенек. Клиенты приходят с телефона — там шкала важнее, чем на мониторе. */ /* Потолок 6.5rem, а не 7: на 1280 «ZHMURKO» в Archivo Black занимал 1054px из 1056 доступных — два пикселя запаса. Любая правка текста ломала строку. */ --t-hero: clamp(2.5rem, 8.5vw, 6.5rem); /* имя на первом экране */ --t-h1: clamp(2rem, 5.5vw, 3.75rem); --t-h2: clamp(1.5rem, 3.5vw, 2.25rem); --t-h3: 1.25rem; --t-body: clamp(1rem, 1.15vw, 1.0625rem); --t-small: 0.875rem; --t-label: 0.75rem; /* капс, разрядка */ --lh-tight: 0.92; /* решение: афишный заголовок стоит плотно */ --lh-normal: 1.55; /* решение: длинный текст читают родители детей */ --track-label: 0.14em; /* решение: разрядка мелких капсов */ /* --- СЕТКА И ВОЗДУХ --------------------------------------------------- Шаг 8px. «Дисциплина сетки» из разбора эталонов — это здесь. */ --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px; --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px; --s-10: 176px; --wrap: 1280px; /* решение: предел контента */ --wrap-text: 68ch; /* решение: предел строки текста */ --gutter: clamp(20px, 5vw, 64px); /* --- УГЛЫ ------------------------------------------------------------- Почти нулевые и это осознанно. «Всё скруглённое» — признак шаблона, а у него в зале бетонный блок, стальная рама и прямой ринг. Единственное круглое на весь сайт — логотип, он такой и есть. */ --r-0: 0; --r-1: 16px; /* кнопки, поля, карточки — как в Telegram */ --r-full: 999px; /* только логотип и аватар */ /* --- ДВИЖЕНИЕ --------------------------------------------------------- «Премиум не суетится» — из разбора эталонов. Долгие мягкие кривые, никаких пружин и подпрыгиваний. */ --e-out: cubic-bezier(0.22, 1, 0.36, 1); --d-fast: 180ms; --d-slow: 640ms; /* --- ТЕНИ ------------------------------------------------------------- В зале свет промышленный и жёсткий: тени короткие и чёрные, а не мягкие серые облака. */ --sh-1: 0 1px 2px rgba(0,0,0,.55); --sh-2: 0 8px 24px rgba(0,0,0,.45); } /* --- РЕСПОНСИВ: ТРИ ТИРА ЯВНО --------------------------------------------- desktop 1200+ · tablet 769–1199 · mobile ≤768. Тач-цели на телефоне не меньше 44px — иначе родитель с телефона промахивается по кнопке записи. */ @media (max-width: 1199px) { :root { --s-8: 72px; --s-9: 96px; --s-10: 120px; } } @media (max-width: 768px) { :root { --s-7: 48px; --s-8: 56px; --s-9: 72px; --s-10: 88px; --lh-tight: 0.98; /* на узком экране плотный заголовок слипается */ } .tap { min-height: 44px; min-width: 44px; } } /* --- УВАЖЕНИЕ К НАСТРОЙКАМ ЧЕЛОВЕКА --------------------------------------- Кто выключил анимацию — получает статику. И об этом на странице пишется вслух, иначе решат, что сломалось. */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 0ms; --d-slow: 0ms; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== ЧЕГО В ЭТОЙ СИСТЕМЕ НЕТ И НЕ БУДЕТ Записано, чтобы не свернуть туда случайно на третьей неделе правок. · фиолетовых градиентов · Inter как основного шрифта · сетки иконок с «преимуществами» · эмодзи вместо иконок · поголовного скругления · тёмного SaaS с кнопкой-пилюлей · кремовой бумаги с серифом и терракотой (это дефолт дизайн-скилла Claude, то есть новый шаблон, а не спасение от старого) · таймеров, «осталось 3 места», всплывающих окон, «первая тренировка бесплатно» четырежды по странице — это массовый бокс-лендинг, прямо противоположный жанр ========================================================================== */