/* ============================================================================ Boostlock — дизайн-система нового макета (финал.psd и соседние файлы). Макеты нарисованы на холсте 2560 px, то есть @2x к 1280 CSS-пикселям: все размеры ниже — уже поделённые пополам значения из PSD, поэтому на десктопе вёрстка совпадает с макетом пиксель в пиксель. Файл подключается ПОСЛЕ deadboost.css и делает две вещи: 1) задаёт токены и примитивы нового дизайна (префикс .bl-); 2) переопределяет переменные старой палитры, чтобы страницы, которые ещё не переверстаны (профиль, чат, кошелёк), сразу перекрасились в новую гамму и получили новый шрифт. ========================================================================== */ /* ── Шрифт TT Firs Neue ──────────────────────────────────────────────────── */ @font-face { font-family: 'TT Firs Neue'; src: url('../fonts/TTFirsNeue-Thin.woff2') format('woff2'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('../fonts/TTFirsNeue-ExtraLight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('../fonts/TTFirsNeue-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('../fonts/TTFirsNeue-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('../fonts/TTFirsNeue-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('../fonts/TTFirsNeue-DemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('../fonts/TTFirsNeue-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('../fonts/TTFirsNeue-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Firs Neue'; src: url('../fonts/TTFirsNeue-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* ── Токены ──────────────────────────────────────────────────────────────── */ :root { /* Цвета сняты пипеткой с макета, не подобраны на глаз. */ --bl-bg-top: #0B0813; --bl-bg-mid: #140D22; --bl-bg-bottom: #1C1231; --bl-header-top: #231742; --bl-header-bottom: #19122D; --bl-header: rgba(31, 23, 57, 0.72); --bl-footer: #2A1C49; --bl-violet: #8A5CF5; --bl-violet-deep: #4C3386; --bl-violet-mid: #6745B7; --bl-violet-bright: #8357E9; --bl-green: #40CE1A; --bl-red: #E51A2E; --bl-ink: #0D0F16; /* тёмная заливка полей и «пилюль» */ --bl-field: #14161F; --bl-text: #ffffff; --bl-surface: #1B1430; --bl-text-dim: rgba(255, 255, 255, 0.62); --bl-text-faint: rgba(255, 255, 255, 0.38); --bl-hairline: rgba(255, 255, 255, 0.14); --bl-grad-primary: linear-gradient(90deg, #4C3386 0%, #6745B7 50%, #8357E9 100%); --bl-grad-ghost: linear-gradient(90deg, #a69eb9 0%, #B9B8B8 50%, #c2bdcf 100%); --bl-grad-card: linear-gradient(135deg, #8458E9 0%, #6B41C8 100%); /* Сетка: контент в макете идёт от x=112 до x=2448 при холсте 2560, то есть 1168 px с полями по 56 при окне 1280. */ --bl-container: 1168px; --bl-gutter: 56px; --bl-header-h: 80px; /* Типографика — кегли посчитаны из матриц трансформации текстовых слоёв. */ --bl-font: 'TT Firs Neue', 'Segoe UI', system-ui, -apple-system, sans-serif; --bl-fs-nav: 19px; --bl-fs-hero-kicker: 19px; --bl-fs-hero-1: 45px; --bl-fs-hero-2: 97px; --bl-fs-hero-lead: 12.7px; /* матрица текстового слоя даёт ровно 12,69 */ --bl-fs-section: 40px; --bl-fs-btn: 20px; --bl-fs-card-title: 40px; --bl-fs-card-text: 17px; --bl-fs-card-price: 35px; --bl-fs-step-title: 27px; --bl-fs-step-text: 20px; --bl-fs-step-num: 47px; --bl-fs-service: 49px; --bl-fs-review: 16px; --bl-fs-footer: 13px; --bl-radius-card: 34px; --bl-radius-pill: 999px; --bl-radius-field: 999px; --bl-radius-modal: 30px; } /* ── Перекраска старой палитры ──────────────────────────────────────────── Страницы, до которых редизайн ещё не дошёл, используют переменные deadboost.css. Переопределяем их здесь — и они переезжают на новый шрифт и новую гамму без правки самой разметки. */ :root { --bg: var(--bl-bg-top); --bg2: var(--bl-bg-mid); --surface: #1B1430; --accent: var(--bl-violet); --accent2: var(--bl-green); --accent3: var(--bl-violet-deep); --text: var(--bl-text); --yellow: var(--bl-violet); --yellow-dark: var(--bl-violet-mid); --yellow-transparent: rgba(138, 92, 245, 0.12); --dark: var(--bl-bg-top); --card-bg: #1B1430; --card-bg2: #221838; --gray: var(--bl-bg-mid); --light-gray: var(--bl-text); --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(138, 92, 245, 0.45); --muted: rgba(255, 255, 255, 0.45); --font: var(--bl-font); --navbar-height: var(--bl-header-h); } /* ── База ────────────────────────────────────────────────────────────────── */ /* Базовый тон: почти чёрный #0B0813 сразу под шапкой, к низу страницы очень медленно теплеющий до #1C1231 — цвета сняты пипеткой по левому краю финал.psd. Ровной темнотой фон при этом не является: в макете поверх этого градиента лежат засвеченные фотографии (группа «Фон», режим «осветление основы»), но они стоят по центру и к краям сходят на нет, поэтому по левому краю их и не видно. Сами картинки — .bl-hero::before и .bl-backdrop в bl-landing.css. Градиент растянут на всю высоту документа (не fixed) — иначе на длинной странице он повторялся бы в каждом экране. */ body { font-family: var(--bl-font); color: var(--bl-text); min-height: 100vh; background: linear-gradient(180deg, var(--bl-bg-top) 0%, var(--bl-bg-bottom) 100%) no-repeat; background-color: var(--bl-bg-top); } /* Масштаб страницы. Макет нарисован под окно 1280×702 (шапка 80 + первый экран 622). На 1920 и на 2К та же вёрстка занимала две трети и половину экрана — сайт выглядел на каждом мониторе по-своему. Поэтому страница масштабируется целиком: zoom, а не transform — он участвует в раскладке, поэтому не ломает прокрутку и прилипшую шапку. tan(atan2(a, b)) — способ поделить длину на длину и получить число: в calc такое деление запрещено. Масштаб считается ТОЛЬКО по ширине. Тогда ширина раскладки всегда ровно 1280 (с точностью до полосы прокрутки), и подложки макета, нарисованные на 1280, ложатся от края до края — по бокам нечему появиться. Дважды пробовали добавить сюда второе слагаемое, по высоте окна (min(…, tan(atan2(100vh, 702px)))): первый экран макета 1280×702, и на широком низком окне масштаб по ширине уводит кнопки за нижний край. Оба раза откатывали по одной причине: как только высота начинает ограничивать, раскладка становится шире 1280 — на окне 1536×740 это 1447, — и по краям остаются поля, где подложки уже нет. Даже сведённые тон в тон, они читаются как переход: рисунок дыма кончается, дальше ровная заливка. Владельцу это важнее целого первого экрана (2026-08-20, второй откат). Первый экран на низком окне просто не влезает целиком — как и любая длинная страница. clamp: не мельче 0,9375 (это 1200/1280 — на такой ширине включается планшетная раскладка, мельче незачем) и не крупнее 3 (выше 4К не раздуваем). Нижняя граница нужна для окон 1200–1280: раньше там масштаб упирался в 1, раскладка была уже макетной и подложка вылезала за края. 100vw включает полосу прокрутки, поэтому ширина раскладки выходит не 1280, а ~1270 — ровно столько же, сколько было в окне 1280. Правило только для десктопа: ниже 1200 работает своя, резиновая раскладка, и масштабировать её нельзя — телефон получил бы уменьшенный десктоп. */ @media (min-width: 1200px) { body { zoom: clamp(.9375, tan(atan2(100vw, 1280px)), 3); } } /* Главная — на 8% мельче остальных страниц: владелец попросил поля по бокам. Раскладка при этом не 1280, а 1391, и по 55 px с каждой стороны остаётся вне макетных подложек. Кромкой это не читается: у обеих подложек края сведены в прозрачность прямо в файле, а тон до края экрана продолжают полоски hero-backdrop-edge и page-backdrop-edge (см. .bl-hero::before и .bl-backdrop в bl-landing.css) — ровно тот случай, ради которого они и были нарисованы. Секции привязаны к центру через .bl-container, поэтому от полей они не разъезжаются. Виндж — уже нет: владелец попросил прижать её к самому краю окна, см. .bl-hero__artbox в bl-landing.css. Множитель, а не другой знаменатель: 0,92 читается как «на 8% мельче», границы clamp — прежние 0,9375 и 3, умноженные на него же. Только главная. На профиле подложка стоит background-position: 100% 0, а арт — right: 0, то есть оба прижаты к правому краю секции: лишние поля увели бы их от карточки и оголили левый край сцены. */ @media (min-width: 1200px) { body.bl-home { zoom: clamp(.8625, tan(atan2(100vw, 1280px)) * .92, 2.76); } } /* Кастомный скроллбар из макета: узкий тёмный трек, фиолетовый ползунок. В PSD трек 14 px, ползунок 8 px — здесь те же значения. */ * { scrollbar-width: thin; scrollbar-color: var(--bl-violet) #120e1b; } ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: #120e1b; } ::-webkit-scrollbar-thumb { background: var(--bl-violet); border: 3px solid #120e1b; border-radius: var(--bl-radius-pill); } ::-webkit-scrollbar-thumb:hover { background: #9d78f7; } /* Внутренняя ширина обязана равняться 1168 — на этой сетке построены все секции макета, поэтому боковые поля прибавляются к max-width, а не съедают её. */ .bl-container { width: 100%; max-width: calc(var(--bl-container) + 32px); margin-inline: auto; padding-inline: 16px; } /* Заголовок секции — «Что мы предлагаем -», «Процесс -» и т.д. Дефис в макете нарисован частью строки, поэтому он в разметке, не в ::after. */ .bl-section-title { font-size: var(--bl-fs-section); font-weight: 900; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 80px; } /* ── Кнопки ──────────────────────────────────────────────────────────────── */ .bl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--bl-radius-pill); font-family: var(--bl-font); font-size: var(--bl-fs-btn); font-weight: 400; line-height: 1; color: var(--bl-text); text-decoration: none; cursor: pointer; transition: filter .18s ease, transform .18s ease, box-shadow .18s ease; } .bl-btn:hover { filter: brightness(1.12); color: var(--bl-text); } .bl-btn:active { transform: translateY(1px); } .bl-btn:focus-visible { outline: 2px solid var(--bl-violet); outline-offset: 3px; } .bl-btn[disabled], .bl-btn.is-disabled { opacity: .45; pointer-events: none; } .bl-btn--primary { background: var(--bl-grad-primary); } .bl-btn--primary:hover { box-shadow: 0 8px 26px rgba(131, 87, 233, .38); } .bl-btn--ghost { background: var(--bl-grad-ghost); } .bl-btn--dark { background: #16141F; } .bl-btn--lg { height: 39px; padding: 0 34px; } .bl-btn--xl { height: 59px; padding: 0 42px; font-size: 24px; font-weight: 600; } .bl-btn--block { display: flex; width: 100%; } /* ── Поля ────────────────────────────────────────────────────────────────── */ .bl-field { width: 100%; height: 47px; padding: 0 24px; border: 0; border-radius: var(--bl-radius-field); background: var(--bl-field); color: var(--bl-text); font-family: var(--bl-font); font-size: 16px; font-weight: 300; outline: none; transition: box-shadow .18s ease; } .bl-field::placeholder { color: var(--bl-text-faint); } .bl-field:focus { box-shadow: 0 0 0 2px var(--bl-violet); } .bl-field.is-invalid { box-shadow: 0 0 0 2px var(--bl-red); } .bl-label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 500; } .bl-hint { margin-top: 6px; font-size: 12px; font-weight: 200; color: var(--bl-text-dim); } .bl-error { margin-top: 6px; font-size: 13px; color: #FF6B7A; } /* ── Карточка и модалка ──────────────────────────────────────────────────── */ .bl-card { border-radius: var(--bl-radius-card); background: var(--bl-grad-card); overflow: hidden; } /* Окна из макетов входа/регистрации/заказа: полупрозрачная фиолетовая подложка с тонкой светлой рамкой и размытием фона под ней. */ .bl-modal-backdrop { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 5, 16, .72); backdrop-filter: blur(6px); } .bl-modal-backdrop.is-open { display: flex; } .bl-modal { position: relative; width: 100%; max-height: calc(100vh - 48px); overflow-y: auto; padding: 34px 40px 40px; border-radius: var(--bl-radius-modal); border: 1px solid rgba(160, 130, 255, .45); background: linear-gradient(150deg, rgba(60, 42, 105, .96) 0%, rgba(44, 30, 80, .96) 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); } .bl-modal--narrow { max-width: 470px; } .bl-modal--wide { max-width: 870px; } .bl-modal-close { position: absolute; top: 18px; right: 18px; width: 35px; height: 35px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--bl-red); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; transition: filter .15s ease; } .bl-modal-close:hover { filter: brightness(1.15); } .bl-modal-brand { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: var(--bl-fs-nav); font-weight: 800; } .bl-modal-brand img { width: 28px; height: 28px; } .bl-modal-title { margin: 6px 0 0; text-align: center; font-size: 30px; font-weight: 500; line-height: 1.2; } /* ── Мелочи ──────────────────────────────────────────────────────────────── */ .bl-price { color: var(--bl-green); font-weight: 900; } .bl-muted { color: var(--bl-text-dim); } /* Чекбокс из макетов регистрации и оплаты — фиолетовый квадрат со скруглением. */ .bl-check { appearance: none; width: 22px; height: 22px; flex: 0 0 22px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .18); cursor: pointer; transition: background .15s ease; } .bl-check:checked { background: var(--bl-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M6.2 11.6 3 8.4l1.1-1.1 2.1 2.1 5.7-5.7L13 4.8z'/%3E%3C/svg%3E") center/14px no-repeat; } .bl-check:focus-visible { outline: 2px solid var(--bl-violet); outline-offset: 2px; } /* ── Шапка ─────────────────────────────────────────────────────────────── Разметка осталась бутстраповской (.navbar / .navbar-collapse) — на ней висит бургер и скрипт, считающий --nav-h. Меняем только оформление. Порядок правого блока — как в макете: «Вход/Регистрация» упирается в правый край контейнера (её чернила кончаются на 1223 при краю 1224). Переключатель языка в макете спрятан — на его месте нарисована та же «Вход/Регистрация», — поэтому он вставлен перед ней. Из-за этого четыре пункта меню стоят левее макетных на ширину пилюли с отступами; сами размеры и зазоры макетные. */ /* Полоса шапки. В макете это не заливка, а картинка: фиолетовый градиент (сверху #231742, к низу #19122D) с еле различимым обломком арта в правой половине. Градиент оставлен подложкой — пока картинка не пришла, полоса всё равно выглядит как полоса. Под полосой — блик из макета (::after ниже). По ширине картинка тянется: текстура абстрактная, растяжение на широких экранах на ней не видно. Важно: последние 14 строк картинки (28 в @2x) намеренно сведены к цвету первой строки блика над фоном страницы (#0B0813) — иначе на стыке остаётся ступенька в 3–4 единицы, а она на такой темноте отлично видна. Если полосу пересобирать из PSD, этот стык надо посчитать заново. */ .navbar.site-nav { height: var(--bl-header-h); padding: 0; /* Картинка занимает ровно полосу: на телефоне бургер-меню раскрывается внутри