/* ========================================================================== База: масштабирование, сброс поверх Bootstrap, типографика ========================================================================== */ /* --- Масштаб макета ------------------------------------------------------ Все размеры записаны в rem от макета 1920 при font-size: 16px. На десктопе корневой кегль тянется по ширине окна, поэтому вся страница (включая rem-размеры самого Bootstrap) ужимается и растягивается пропорционально: 3000px → 25px, 1920px → 16px, 1440px → 12px, ≤1440px → 12px. Верхний потолок 25px = 0.8333% от 3000px — ровно та ширина, на которой упирается --layout-max (tokens.css). Потолки обязаны совпадать: если кегль перестанет расти раньше контейнера (или наоборот), rem-блоки поедут относительно сетки — так уже было, когда контейнер тянулся выше 1920. Ниже 992px тот же приём, но от мобильного макета 498: 3.2129vw = 16 / 498 × 100 → на 498px ровно 16px, то есть 1:1 с макетом. 320px → 10.28px нижняя граница: уже кегль на самом узком реальном экране, ниже не ужимаем (и переполнения там ещё нет); 623px → 20px верхняя: дальше кегль стоит, ширина макета упирается в --layout-max (31.125rem = 498 × 20/16 = 622.5px) и страница центрируется. Потолки здесь обязаны совпадать ровно так же, как на десктопе. ------------------------------------------------------------------------- */ html { font-size: clamp(10.28px, 3.2129vw, 20px); } @media (min-width: 992px) { html { font-size: clamp(12px, 0.8333vw, 25px); /* 25px = 0.8333vw при 3000px */ } } /* --- Сброс --------------------------------------------------------------- */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Свайп вправо по карусели браузер принимал за жест «назад» и уводил со страницы. contain оставляет горизонтальную прокрутку внутри страницы и не даёт ей всплыть до навигации; вертикальную (pull-to-refresh) не трогает. Ставим и на html, и на body: при overflow-x: hidden у body корневым скроллером может оказаться любой из них. */ html, body { overscroll-behavior-x: contain; } body { background-color: var(--c-bg); color: var(--c-ink); font-family: var(--f-mono); font-size: var(--fs-body); font-weight: 500; line-height: var(--lh-body); letter-spacing: var(--ls-body); text-transform: uppercase; overflow-x: hidden; /* крупная типографика уходит за края макета */ } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: inherit; } ::selection { background: var(--c-accent); color: var(--c-white); } /* --- Типографика --------------------------------------------------------- Заголовки — классы, а не теги: один и тот же уровень

в макете встречается в трёх кеглях. ------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } .t-display-xl, .t-display-l, .t-display-m, .t-display-s, .t-hero { font-family: var(--f-display); font-weight: 500; line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; } .t-hero { font-size: var(--fs-hero); } .t-display-xl { font-size: var(--fs-display-xl); } .t-display-l { font-size: var(--fs-display-l); } .t-display-m { font-size: var(--fs-display-m); line-height: var(--lh-title); } .t-display-s { font-size: var(--fs-display-s); line-height: var(--lh-title); } .t-body { font-size: var(--fs-body); } .t-caption { font-size: var(--fs-caption); } /* Крупный моно-абзац героя. Отдельный класс, а не кегль по месту: на мобилке у него и интерлиньяж, и трекинг свои (21/23, −0.01em), тогда как весь остальной моно на странице идёт 15/15 с −0.05em — то есть от --lh-body и --ls-body, которые под тот, основной кегль и настроены. */ .t-lead { font-size: var(--fs-lead); line-height: 1.1; letter-spacing: -0.01em; } /* Кегль 150 — только мобильный: «наши Клиенты», «Контакты», «5-7 %». На десктопе токен равен --fs-display-xl, поэтому класс там безвреден. */ .t-display-2xl { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-display-2xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; } /* Белые «выбитые» заголовки поверх фона */ .t-white { color: var(--c-white); } /* Ограничение длины моно-абзаца в колонках (в макете строки переносятся вручную — здесь ширину задаёт колонка, но иногда нужен предел) */ .t-measure { max-width: 34ch; } /* --- Кнопка-пилюля «Получить КП» ----------------------------------------- Цельный SVG из макета (пилюля + текст в кривых) — не зависит от того, подключён ли Geist Mono. Размер 283×39 @1920, тянется вместе с макетом. */ .btn-kp { --kp-bg: var(--c-accent); cursor: pointer; display: block; flex: 0 0 auto; width: 17.6875rem; /* 283px */ padding: 0; border: 0; /* в форме это