/* ========================================================================== Дизайн-токены «Идея в чашке» Всё, что снято с макета Figma (1920 × 24011, фрейм 564:2). Правится только здесь — секции токены не переопределяют. ========================================================================== */ /* --- Шрифты ------------------------------------------------------------- Файлы лежат в assets/fonts/. В вёрстке шрифты берутся только через --f-display / --f-mono, напрямую по имени семейства не обращаемся. Coolvetica Condensed Rg — сборка с кириллицей от OnlineWebFonts (лицензия: assets/fonts/LICENSE-coolvetica.txt). Кириллица (U+0400–045F) есть во всех начертаниях — проверено fc-query. Исходные ttf лежат в assets/fonts/src/, woff2 пересобирается из них: npx ttf2woff2 < assets/fonts/src/GeistMono-Medium.ttf > assets/fonts/geist-mono-500.woff2 ------------------------------------------------------------------------- */ @font-face { font-family: 'Coolvetica Condensed'; src: url('../assets/fonts/coolvetica-condensed-400.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../assets/fonts/geist-mono-400.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../assets/fonts/geist-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } :root { /* --- Цвета ----------------------------------------------------------- */ --c-bg: #E0E0E0; /* фон страницы */ --c-ink: #101010; /* основной текст, тёмная типографика */ --c-white: #FFFFFF; /* «выбитые» крупные заголовки поверх фона */ --c-accent: #3600BF; /* кнопка «Получить КП», индиго */ /* Цвет ВСЕХ линий страницы — один, ровно как в макете (border: 1.5px solid rgba(16,16,16,0.15)): сетка колонок в 3, 4 и 6 блоках, вертикали «кто мы», разделители FAQ и подчёркивания полей формы. Раньше сетка стояла на #C7C7C7 (199 при фоне 224), а контент — на полупрозрачной (192), и на стыке перемычки с сеткой была видна ступенька по тону. Токен один, чтобы такое не повторилось: было два синонима (--c-line и --c-line-soft) с одинаковым значением — ровно та развилка, на которой тона и разъезжаются. Толщина — --line-w ниже. */ --c-line: rgba(16, 16, 16, 0.15); /* --- Семейства ------------------------------------------------------- */ /* фолбэки — только узкие гротески: обычный sans-serif вдвое шире Coolvetica Condensed, и строки заголовков наезжают друг на друга */ --f-display: 'Coolvetica Condensed', 'Oswald', 'Arial Narrow', 'Liberation Sans Narrow', 'Nimbus Sans Narrow', sans-serif; --f-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', 'Roboto Mono', monospace; /* --- Сетка ------------------------------------------------------------ Макет: ширина 1920, поля 24, 12 колонок по 156 px без промежутков. 1920 − 24×2 = 1872 = 12 × 156. ---------------------------------------------------------------------- */ --layout-max: 3000px; /* потолок раскладки; шире — контейнер центрируется. Связан с потолком clamp() в base.css: корневой кегль обязан упереться ровно там же, где перестаёт расти контейнер, иначе rem-размеры разъедутся с сеткой. */ --layout-pad: 24px; /* боковые поля макета */ --container-pad: 32px; /* фактические боковые поля .custom-container. Вынесено в токен, чтобы абсолютные слои (карточки 8 блока, форма CTA) могли встать на линию контента, а не подгонялись числом в трёх местах. */ --grid-inset: 0px; /* поджатие полноширинных блоков внутрь крайних линий сетки; нужно только мобильному макету (см. ниже) */ --layout-cols: 12; --line-cols: 12; /* сколько колонок рисует .has-lines. Отдельно от --layout-cols, потому что на мобилке колонок макета три, а разметка остаётся на 12 бутстраповских (одна колонка макета = четыре бутстраповские). */ --line-w: 1.5px; /* толщина декоративных линий */ /* Ширина правого блока: фото ростера в герое и хвост шапки («контакты» + кнопка) стоят на одной вертикали. Одна переменная на оба — иначе они выравниваются только на 1920 (px против rem, см. header.css). */ --media-w: 34.25rem; /* 548px @1920 */ /* Оптические отступы текста от линии колонки (в макете текст не липнет к линии вплотную, у разных кеглей разный вынос) */ --in-display: 7px; /* заголовки xl / l */ --in-title: 12px; /* заголовки m / s */ --in-text: 15px; /* моно-текст */ /* Вынос текста от линии сетки там, где колонки лежат по линиям вплотную (блоки 3 и 4). В rem — иначе на широком экране прижмётся к линии. */ --in-line: 0.875rem; /* 14px @1920 */ /* Вертикальный ритм: ряд = половина интерлиньяжа заголовка s */ --rh: 2.6875rem; /* 43px @1920 */ /* --- Типографика: десктоп (значения px из макета 1920, записаны в rem, корневой font-size тянется по ширине — см. base.css) --------------- */ --fs-display-2xl: 20.625rem; /* только мобилка (150px): «наши Клиенты», «Контакты», «5-7 %». На десктопе эти три стоят кеглем xl, поэтому здесь значение xl — токен ничего не меняет, пока не сработает мобильный медиазапрос. */ --fs-display-xl: 20.625rem; /* 330px — «Кто стоит за проектом» */ --fs-display-l: 14.375rem; /* 230px — «Кто мы такие?» */ --fs-display-m: 11.25rem; /* 180px — «Коста Рика» в слайдере */ --fs-display-s: 6.875rem; /* 110px — заголовки пунктов блока 3 */ --fs-hero: 21.25rem; /* 340px — логотип «ИДЕЯ В ЧАШКЕ», уточнить по рендеру */ --fs-lead: 1.5rem; /* 24px — абзац героя, крупнее остального моно */ --fs-body: 1.125rem; /* 18px — вообще весь текст */ --fs-caption: 0.875rem; /* 14px — мелкие подписи */ --lh-display: 0.72; --lh-title: 0.76; --lh-body: 1.1; --ls-display: -0.02em; --ls-body: -0.01em; /* --- Вертикальные интервалы секций ----------------------------------- */ --sp-section: 12.5rem; /* 200px — между секциями */ --sp-block: 6.25rem; /* 100px — между блоками внутри секции */ --sp-item: 2.5rem; /* 40px — между пунктами списка */ } /* --- Мобилка ------------------------------------------------------------- Свой макет: Figma FWIbdZ7l12BlY9SwPyr8fn, фрейм 823:987 mobile_main, 498 × 17165. Все замеры и порядок сверки — MOBILE.md. Значения в rem от макета при font-size: 16px, как на десктопе. Корневой кегль тянется по ширине окна (base.css), поэтому на 498px страница выходит 1:1 с макетом, а по сторонам ужимается/растягивается пропорционально. ------------------------------------------------------------------------- */ @media (max-width: 991.98px) { :root { /* --- Сетка --------------------------------------------------------- 15 + 3 × 156 + 15 = 498. Модуль колонки тот же, что на десктопе (156px), меняется только их число: 12 → 3. В Bootstrap одна колонка макета = 4 бутстраповские, поэтому --layout-cols остаётся 12 для разметки, а линиям сетки нужен свой счётчик — --line-cols. ------------------------------------------------------------------ */ --layout-pad: 0.9375rem; /* 15px */ --container-pad: 0.9375rem; /* 15px */ --line-cols: 3; --line-w: 1.5px; /* линия не масштабируется: волосяная и есть */ /* В макете два разных края. Текст встаёт от ЛИНИИ колонки плюс оптика (29 / 185 / 341), а блоки во всю ширину — фото героя, вордмарк, кнопка, разделители FAQ и формы — идут 30…468, то есть на 15 внутрь от крайних линий (15 и 483). Отсюда отдельный токен: контейнер держит линии, а полноширинные блоки поджимаются им. */ --grid-inset: 0.9375rem; /* 15px */ /* Потолок раскладки = ширина макета. Выше него (при корневом кегле, упёршемся в потолок clamp) страница не растягивается, а центрируется — ровно как --layout-max на десктопе. */ --layout-max: 31.125rem; /* 498px */ /* Оптический вынос текста от линии колонки: в макете текст стоит на x = 29 / 185 / 341, то есть линия + 14. Один на все кегли, в отличие от десктопа. */ --in-display: 0.875rem; /* 14px */ --in-title: 0.875rem; --in-text: 0.875rem; --in-line: 0.875rem; /* --- Типографика --------------------------------------------------- Кегли сняты МНК по ширинам текстовых нод макета, интерлиньяжи — по высотам нод. Вышли ровные 150 / 100 / 70 / 50, а отношения 0.72 и 0.76 совпали с десктопными --lh-display / --lh-title, поэтому те не трогаем. Классы t-display-* на мобилке частично схлопываются: xl и l дают один кегль 100. Три заголовка выбиваются наверх (150) и переопределяются в своих секциях через --fs-display-2xl. ------------------------------------------------------------------ */ --fs-display-2xl: 9.375rem; /* 150px / 108 — «наши Клиенты», «Контакты», «5-7 %» */ --fs-display-xl: 6.25rem; /* 100px / 72 — заголовки блоков */ --fs-display-l: 6.25rem; /* 100px / 72 — они же */ --fs-display-m: 4.375rem; /* 70px / 53 — «Продажа и обжарка», «Установка…» */ --fs-display-s: 3.125rem; /* 50px / 38 — заголовки пунктов */ --fs-hero: 6.25rem; /* Моно. Весь текст страницы — 15/15, кроме абзаца героя (21/23). Трекинг у них разный, поэтому --ls-body переопределён под основной кегль, а лид держит свой (см. .t-lead в base.css). */ --fs-lead: 1.25rem; /* 20px — абзац героя: шаг моно в макете ровно 11.80px = 0.6 × 20 − 0.01em */ --fs-body: 0.9375rem; /* 15px — весь остальной моно */ --fs-caption: 0.9375rem; /* 15px — подписи того же кегля */ --lh-body: 110%; /* шаг строк ровно 15px */ --ls-body: -1%; /* Вертикальный ритм: ряд = половина интерлиньяжа заголовка s (38 / 2) */ --rh: 1.1875rem; /* 19px */ --sp-section: 5rem; --sp-block: 3rem; --sp-item: 1.5rem; } }