Made on
Tilda
.re-coverШрифты, цвета, размеры, отступы, фон, акценты и адаптивное поведение. Полная спецификация для дизайн-системы.
Блок использует два семейства из глобальной системы: одно для основного текста, второе для заголовков и кнопок.
| Переменная | Где используется |
|---|---|
var(--t-text-font) | Базовый шрифт всего блока. Применяется к: .re-cover__head-note, .re-cover__service-desc, .re-cover__adv-text, .re-cover__cta-sub, .re-cover__cta-bonus, .re-cover__cta-bonus-text. |
var(--t-headline-font) | Заголовки и UI-элементы. Применяется к: .re-cover__head-title, .re-cover__head-eyebrow, .re-cover__service-num, .re-cover__service-title, .re-cover__adv-num, .re-cover__adv-title, .re-cover__cta-eyebrow, .re-cover__cta-title, .re-cover__btn-cta, .re-cover__separate-text, .re-cover__separate-btn, .re-cover__bottom-text, .re-cover__bottom-btn, .re-cover__marquee-item. |
Девять направлений — от подготовки объекта до финишной отделки. Полный цикл под ключ или отдельные этапы под ваши задачи и бюджет.
Размеры подобраны по модульной шкале — от 11px (eyebrow преимуществ) до 56px (заголовок CTA).
| Элемент / класс | Size / Weight | Letter-spacing | Семейство |
|---|---|---|---|
__head-title (h2) | 48px / 700 | -1px | headline |
__head-title span (italic) | 48px / 400 | -1px | headline |
__head-eyebrow | 12px / 500 | 4px / UPPER | headline |
__head-note | 16px / 400 | 0 | text |
__marquee-item | 18px / 600 | 1px / UPPER | headline |
__service-num | 13px / 400 | 0.1em | headline |
__service-title (h3) | 20px / 600 | 0 | headline |
__service-desc | 14px / 400 | 0 | text |
__adv-num | 11px / 400 | 0.2em / UPPER | headline |
__adv-title (h3) | 19px / 600 | 0 | headline |
__adv-text | 14px / 400 | 0 | text |
__cta-eyebrow | 12px / 400 | 4px / UPPER | headline |
__cta-title (h2) | 56px / 700 | -1.5px | headline |
__cta-title span (italic) | 56px / 400 | -1.5px | headline |
__cta-sub | 17px / 400 | 0 | text |
__cta-bonus | 14px / 400 | 0 | text |
__cta-bonus strong (italic) | 14px / 600 | 0 | text |
__cta-bonus em (italic) | 14px / 400 | 0 | text |
__btn-cta | 15px / 700 | 1px / UPPER | headline |
__separate-text | 16px / 500 | 0.5px | headline |
__separate-btn | 12px / 700 | 1.2px / UPPER | headline |
__bottom-text | 20px / 500 | 0 | headline |
__bottom-btn | 13px / 700 | 0.5px / UPPER | headline |
Снос старых перегородок и покрытий, возведение новых стен.
Девять направлений — от подготовки объекта до финишной отделки.
vs
Тёмная тёплая база (угольный + древесный уголь) с янтарным акцентом. Все цвета — CSS-переменные на .re-cover.
#ffd24a — где встречается| Где | Как используется |
|---|---|
head-title span | Курсивная акцентная часть заголовка (48px/400 italic) |
head-eyebrow | Цвет маленького лейбла + линия-слева 32px |
marquee-dot | Точки-разделители в бегущей строке |
service-num | Нумерация карточек «01 / 09» |
adv-num | Лейбл категории преимущества «01 — Сложность» |
cta-eyebrow | Лейбл CTA «Следующий шаг» |
cta-title span | Курсивная акцентная часть заголовка CTA (56px/400 italic) |
cta-bonus strong/em | Акцентные слова в бонусной строке |
separate-text span | Акцентная фраза «можно заказать отдельно» |
separate-text ::before | Символ ◇ перед текстом |
btn-cta border | Янтарная обводка 2px на главной кнопке |
bottom-text span | Акцентная фраза «дизайн-проект?» |
bottom-btn ::before | Символ ✦ перед текстом кнопки |
adv-icon | Цвет всех иконок преимуществ |
#f5f3ec — где встречаетсяhead-title, service-title, adv-title, cta-title, separate-text, bottom-text, marquee-item, btn-cta | Основные заголовки и кнопки (по умолчанию через var(--re-text)) |
btn-cta | Текст кнопки до hover (светлый на тёмно-сером фоне с янтарной обводкой) |
rgba(232,230,224,.78) — где встречаетсяhead-note | Пояснительный текст справа от заголовка |
service-desc | Описание услуги в карточке |
adv-text | Описание преимущества |
cta-sub | Подзаголовок CTA |
cta-bonus | Основной текст бонусной строки |
| Элемент | Значение | Назначение |
|---|---|---|
section | padding: 100px 0 | Внутренние секции |
section--first | padding-top: 80px | Первая секция уменьшена сверху |
cta | padding: 120px 0 | CTA — больше воздуха |
bottom | padding: 60px 0 80px | Нижний блок-переход |
container | max-width: 1200px; padding: 0 20px | Контейнер контента |
head | margin-bottom: 64px | Расстояние от заголовка до контента |
head | padding-bottom: 32px | Воздух над разделительной линией |
head gap | 40px | Между колонками заголовка и заметки |
marquee | margin: 0 -20px 48px | Выход за container + отступ снизу |
marquee | padding: 22px 0 | Внутренний воздух бегущей строки |
service | padding: 36px 28px | Внутренние отступы карточки |
service-num | margin-bottom: 56px | Большой «воздух» — номер парит над заголовком |
service-title | margin: 0 0 12px | Расстояние до описания |
advantages | gap: 40px | Между колонками преимуществ |
adv | padding-top: 24px | Воздух сверху (после линии-маркера) |
adv-icon | margin-bottom: 18px | Расстояние от иконки до текста |
adv-title | margin: 0 0 10px | Расстояние до описания |
separate | margin-top: 48px | Отступ от сетки услуг |
separate | padding: 22px 28px | Внутренний воздух плашки |
cta-title | max-width: 760px; margin: 0 auto 20px | Центрирование + max-width |
cta-sub | max-width: 520px; margin: 0 auto 28px | Узкая подложка под заголовком |
cta-row | gap: 32px; max-width: 980px | Горизонтальный ряд бонус + кнопка |
bottom-inner | padding: 32px 36px | Внутренний воздух нижнего блока |
bottom-inner | gap: 40px | Между текстом и кнопкой |
| Секция | Фон |
|---|---|
Базовый .re-cover | background: var(--re-bg) — #1a2128 |
| Section --accent (первая) | linear-gradient(180deg, #232b34 0%, #1a2128 100%) — плавный переход тёмного в основной фон |
| Section --dark (вторая) | background: var(--re-bg-2) — #232b34 (чуть светлее для контраста) |
| CTA (третья) | background: var(--re-bg) + border-top/bottom |
| Bottom (четвёртая) | background: var(--re-bg) |
На всю страницу через .re-cover::before наложена едва заметная SVG-текстура с opacity: 0.04, position: fixed, z-index: 100. Создаёт «бумажную» фактуру фона без шума в DOM.
background: #2a323b (приподнятый фон) + transform: translateY(-2px) + анимированная янтарная линия сверху (32px, scaleX 0 → 1).
| Принцип | Реализация |
|---|---|
| Каждый текст наследует | font-family задан явно на .re-cover и переопределяется на заголовках/кнопках — без этого браузер покажет Times |
| Жирность заголовков | 700 для h2, 600 для h3, 500 для лейблов и текста нижнего блока |
| Курсив только для акцентов | Курсивом выделены слова в заголовках (span), strong и em в бонусе, фраза в bottom-text, accent в marquee |
| Заглавные — UI-элементы | UPPERCASE применяется к: head-eyebrow, cta-eyebrow, btn-cta, separate-btn, bottom-btn, marquee-item, adv-num |
| Разрядка UPPERCASE | 4px для eyebrow, 0.5–1.2px для кнопок, 0.2em для adv-num |
| Line-height | 1.1 для крупных заголовков, 1.3 для h3 в карточках, 1.5–1.6 для основного текста |
| Letter-spacing | −1 / −1.5px для крупных заголовков (визуально «стягивает»), 0 для основного текста |