Руководство по использованию бренда

Используется для главных кнопок, активных элементов, иконок, акцентных слов в заголовках. Большие фоновые плашки — только --primary-light (10% непрозрачности).

Корпоративные секции, статистика, hero-блоки, футер. Текст всегда белый, контейнеры — полупрозрачные белые.

Бордовый #9f1041 и оранжевый #f8a71c существуют только в файле логотипа и в исключительно редких декоративных деталях (печать, особая пометка «Официальный сертификат»). Запрещено: кнопки, ссылки, иконки, фоны секций, графики.

Только для подсветки спец-предложений, премиум-блоков, печатей. Не путать с Star Yellow #ffc107, который применяется исключительно для звёзд рейтинга.

Не использовать #4caf50 в качестве основного — только для индикаторов успеха. Основной зелёный — строго #2f7537.

Montserrat — только для заголовков (H1–H6), цифр в статистике, display-элементов. Helvetica — всё остальное: параграфы, кнопки, таблицы, навигация, подписи. Никогда не использовать Helvetica в заголовках и Montserrat в длинных параграфах.

Только один H1 на страницу — в hero-блоке. H2 — секционные заголовки с акцентным словом цветом --primary. H3 — заголовки карточек.

Используются как декоративные элементы (например, 华铭 в hero и watermark). Шрифт — Montserrat (он содержит CJK fallback) или системный sans-serif. Letter-spacing 2–3px.

Запрещено добавлять Inter, Roboto, Open Sans, PT Sans или любые другие. Только Montserrat + Helvetica. Для моноширинного — 'Courier New', monospace.

Все размеры шрифтов задаются через rem, а не px. Базовый размер html — 16px. На мобильных делать downscale вручную через медиа-запросы.

Градиент linear-gradient(135deg, var(--primary), var(--primary-dark)), белый текст Helvetica 700, тень 0 10px 30px rgba(47,117,55,0.3). При наведении — подъём на 5px и scale 1.03. Только для главного целевого действия экрана: «Записаться», «Регистрация», «Оплатить».

Прозрачный фон, обводка 2px solid var(--primary), текст того же цвета. При наведении — заливка --primary-light. Без тени.

Без рамки и фона, цвет --primary, нижняя граница появляется при ховере. Для ссылок «Подробнее», «Все экзамены», «Назад».

border-radius: 50px. Паддинги: 18px по вертикали, 45px по горизонтали. Между текстом и стрелкой — 14px gap.

Кнопки CTA — на всю ширину контейнера (max-width 350px). Скругление сохраняется.

Все карточки изначально имеют border: 2px solid white. При наведении цвет меняется на --primary-light, чтобы рамка проявилась без скачка ширины.

Использовать @keyframes cardReveal (opacity 0 → 1, translateY 30px → 0). Длительность 0.8s, задержка для каждой следующей карточки в ряду 0.1–0.2s.

Карточки экзаменов (HSK, HSKK, YCT, BCT, CTC) имеют верхнюю градиентную полоску 4px linear-gradient(90deg, var(--primary), var(--primary-dark)) и крупный код экзамена в Montserrat 800.

Цифры в Montserrat 800, размер 3.2rem desktop / 2.4rem mobile. Watermark «华» в правом нижнем углу с opacity 4%.

Кружок 50×50px с градиентом primary, цифра в Montserrat 800. Заголовок шага H4 (Montserrat 700), описание Helvetica 0.92rem.

Шапка --bg-dark, текст шапки uppercase letter-spacing 1.5px Montserrat 600. Дата в первой колонке выделена цветом primary и font-weight 700. Hover строки — фон --bg-light.

Градиент primary, белый текст Helvetica 700, цифры в полупрозрачных плашках (rgba(255,255,255,0.2)). Анимация pulseBadge.

Звёзды — color: #ffc107, font-size 1.5rem, letter-spacing 2px. Никаких других цветов или иконок звёзд.

Допустимы в карточках преимуществ, шагах процесса, контактах (📞, 📬, 📍). Не использовать для функциональных кнопок, форм, табов — там должны быть SVG-иконки или текст.

Базовая функция — cubic-bezier(0.4, 0, 0.2, 1) или ease. Длительность ховеров 0.3–0.4s, появлений 0.6–0.8s.

Плавающие иероглифы — только в hero и FAQ. Не использовать в каждом блоке. Задержка между появлением карточек не более 0.2s.

Для пользователей с предпочтением сниженной анимации — отключать через @media (prefers-reduced-motion: reduce), оставляя только мгновенные переходы.

1100px — 3 колонки → 2 колонки.
968px — Logo construction и font-pair → одноколоночные.
900px — вертикализация статистики, уменьшение отступов.
768px — основная мобильная точка: одноколоночные сетки, заголовки уменьшаются, кнопки на всю ширину.
480px — оптимизация для маленьких экранов.

H1 уменьшается с 3.5rem до 2.6rem, H2 с 3rem до 2.2rem. Body не меняется (1rem). Иерархия сохраняется.

Кнопки CTA на мобильных — width: 100% (max-width 350px). Карточки — одна под другой. Логотип в шапке уменьшается до 120×48px минимум.

Минимум 44×44px для всех интерактивных элементов на мобильных (Apple HIG / Material guidelines).