/* ==================== CSS ПЕРЕМЕННЫЕ ==================== */ :root { /* Цвета */ --color-black: #000101; --color-white: #ffffff; --color-primary: #000101; --color-accent: #fab601; --color-bg: #e0e0e0; --color-surface: #f7f7f7; --color-error: #e02d2d; /* Контейнер */ --container-width: 1920px; --container-padding: 30px; /* Типографика */ --font-family: "Rubik", sans-serif; /* Заголовки — Artegra Sans Extended SC Bold из макета, Unbounded подстрахует */ --font-family-title: "Artegra Sans Extended SC", "Unbounded", sans-serif; /* Цифры-факты — Bicubik из макета */ --font-family-number: "Bicubik", sans-serif; --font-weight-default: 400; --font-size-default: 20px; --line-height-default: 1.2; } /* ==================== СБРОС ==================== */ *, *::before, *::after { box-sizing: border-box; padding: 0; margin: 0; } html { height: 100%; } body { min-height: 100%; } img, video { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } input, button, textarea, select { font: inherit; /* браузерная рамка полей ломает срезы clip-path — снимаем */ border: none; } button { cursor: pointer; background-color: transparent; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* ==================== ШРИФТЫ ==================== */ /* Rubik — вариативный, один файл на подмножество, веса 300–900 */ @font-face { font-family: "Rubik"; src: url("../font/Rubik-Cyrillic.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Rubik"; src: url("../font/Rubik-Latin.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Artegra Sans Extended SC — заголовочный шрифт из макета. Свои метрики у него 1.518em (ascent 1.375 + descent 0.143), а строка при line-height: 1 высотой 1em. Браузер ставит базовую линию по ascent, а не по font-size, поэтому текст садился на 0.27em ниже своего бокса, и последняя строка налезала на следующий блок. Переопределяем: 85 + 15 = 100%, базовая линия на 0.85em — так заглавные (высота 0.696em) встают ровно по центру. Те же цифры у запасного Unbounded, чтобы на подмене шрифта ничего не прыгало */ @font-face { font-family: "Artegra Sans Extended SC"; src: url("../font/ArtegraSansExSCBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 85%; descent-override: 15%; line-gap-override: 0%; } /* Unbounded — запасной для заголовков, вариативный, веса 200–900 */ @font-face { font-family: "Unbounded"; src: url("../font/Unbounded-Cyrillic.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; ascent-override: 85%; descent-override: 15%; line-gap-override: 0%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; src: url("../font/Unbounded-Latin.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; ascent-override: 85%; descent-override: 15%; line-gap-override: 0%; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Bicubik — шрифт цифр из макета */ @font-face { font-family: "Bicubik"; src: url("../font/Bicubik.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Safari ≤16 и старые вебвью не знают *-override: там заголовки по-прежнему рисуются на 0.27em ниже своего бокса и налезают на следующий блок. Класс вешает инлайн-скрипт в — через @supports дескриптор @font-face не проверить (CSS.supports("ascent-override", "85%") возвращает false даже в Chrome, который его поддерживает). Поднимаем текст через relative/top: margin-top у части заголовков занят (.for-whom__cta-title — auto), а transform на слабых устройствах мылит текст на дробном сдвиге */ ._no-font-metrics .section-head__title, ._no-font-metrics .hero__title, ._no-font-metrics .for-whom__cta-title, ._no-font-metrics .cases-slider__name, ._no-font-metrics .banner__title, ._no-font-metrics .roadmap__title, ._no-font-metrics .case__title, ._no-font-metrics .popup__title { position: relative; top: -0.27em; } /* ==================== ГЛОБАЛЬНЫЕ СТИЛИ ==================== */ body { font-family: var(--font-family); color: var(--color-primary); font-weight: var(--font-weight-default); font-size: var(--font-size-default); line-height: var(--line-height-default); letter-spacing: -0.05em; background: var(--color-bg); } body._disable-scroll { overflow: hidden; touch-action: none; -ms-touch-action: none; } .wrapper { display: flex; flex-direction: column; min-height: 100%; position: relative; overflow: clip; } main { flex: 1; position: relative; } .container { max-width: var(--container-width); width: 100%; padding-inline: var(--container-padding); margin-inline: auto; } .swiper { width: 100%; } /* Единый вертикальный ритм между секциями. Полноэкранные секции (.banner) отступ получают маржином — иначе фон растянется на паддинг */ main > section + section:not(._full) { padding-top: 150px; } main > section + section._full { margin-top: 150px; } /* ==================== КНОПКИ ==================== */ /* Фирменная форма: срезы по левому верхнему и правому нижнему углам */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding-inline: 26px; background-color: var(--color-accent); color: var(--color-primary); line-height: 1.1; text-align: center; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); } /* Контурная кнопка с жёлтой обводкой */ .btn._outline { position: relative; background-color: var(--color-accent); } .btn._outline::before { content: ""; position: absolute; inset: 1px; background-color: var(--color-bg); clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px); } .btn__text { position: relative; font-size: inherit; line-height: inherit; letter-spacing: inherit; } /* ==================== ИКОНКИ В ПЛАШКЕ ==================== */ .icon-box { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 80px; height: 60px; background-color: var(--color-accent); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); } .icon-box::before { content: ""; position: absolute; inset: 1px; background-color: var(--color-surface); clip-path: polygon(21px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 21px); } .icon-box__icon { position: relative; width: 35px; height: 35px; object-fit: contain; } /* иконки, экспортированные вместе с габаритами плашки */ .icon-box__icon._plate { width: 80px; height: 60px; } .icon-box__num { position: relative; font-family: var(--font-family-number); line-height: 1.1; letter-spacing: -0.01em; color: var(--color-accent); } .icon-box._sm { width: 70px; height: 50px; clip-path: polygon(17px 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%, 0 17px); } .icon-box._sm::before { clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); } /* ==================== ТЕГИ ==================== */ /* Плашка с обводкой и срезами. Заливки нет — середина прозрачная, поэтому плашка одинаково ложится на любую подложку */ .tag { position: relative; display: inline-flex; align-items: center; justify-content: center; /* fit-content, иначе в колоночном флексе тег растягивается на всю ширину */ width: fit-content; min-width: 160px; min-height: 40px; padding-inline: 16px; line-height: 1.1; } /* Рамка одним контуром: обходим внешний периметр по часовой, возвращаемся в стартовую точку, уходим внутрь и обходим внутренний против часовой — середина остаётся дыркой. Шов туда-обратно лежит на одной линии, поэтому не виден. Кольцо рисуем на ::before, а не на самом теге: clip-path на .tag срезал бы и текст внутри */ .tag::before { content: ""; position: absolute; inset: 0; background-color: #535353; clip-path: polygon( 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px, 12px 0, 12px 1px, 1px 12px, 1px calc(100% - 1px), calc(100% - 12px) calc(100% - 1px), calc(100% - 1px) calc(100% - 12px), calc(100% - 1px) 1px, 12px 1px ); } .tag__text { position: relative; letter-spacing: -1px; } .tag._muted::before { background-color: #a0a0a0; } .tag._muted .tag__text { color: #535353; } /* тег на тёмной подложке */ .tag._on-dark .tag__text { color: rgba(160, 160, 160, 0.7); } .tag._lg { padding-inline: 35px; } .tag._lg .tag__text { font-size: calc(14px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.006944 * clamp(0px, 100vw - 768px, 1152px)); } /* ==================== ЗАГОЛОВОК СЕКЦИИ ==================== */ .section-head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; } .section-head__title { max-width: 1120px; font-family: var(--font-family-title); font-weight: 700; font-size: calc(28px + 0.020356 * clamp(0px, 100vw - 375px, 393px) + 0.024306 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1; letter-spacing: -0.03em; } .section-head__text { max-width: 642px; font-size: calc(18px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.003472 * clamp(0px, 100vw - 768px, 1152px)); letter-spacing: -1.2px; } .section-head._left { align-items: flex-start; text-align: left; } /* ==================== HOVER ==================== */ /* Единая формула анимаций по проекту */ a, button, .btn, .tag, .icon-box, .nav__prev, .nav__next, .burger__line, .mobile-panel, .products__card, .callback__checkbox, .tech__chevron { transition: all 0.3s ease 0s; } /* Ссылки подсвечиваются акцентом */ a:hover { color: var(--color-accent); } /* У кнопок акцент — фон, поэтому им меняем прозрачность, а не цвет */ .btn:hover { opacity: 0.8; color: var(--color-primary); } .nav__prev:hover, .nav__next:hover { background-color: var(--color-accent); } /* ==================== НАВИГАЦИЯ СЛАЙДЕРОВ ==================== */ .nav { display: flex; gap: 10px; flex-shrink: 0; } /* Обводка — тем же приёмом, что и у .tag */ .nav__prev, .nav__next { position: relative; display: flex; align-items: center; justify-content: center; width: 80px; height: 60px; background-color: #a0a0a0; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); } .nav__prev.swiper-button-lock, .nav__next.swiper-button-lock { display: none; } .nav__prev::before, .nav__next::before { content: ""; position: absolute; inset: 1px; background-color: var(--color-bg); clip-path: polygon(21px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 21px); } .nav__prev img, .nav__next img { position: relative; } .nav__prev.swiper-button-disabled, .nav__next.swiper-button-disabled { opacity: 0.4; cursor: default; } .nav__prev.swiper-button-disabled:hover, .nav__next.swiper-button-disabled:hover { background-color: #a0a0a0; } /* ==================== ШАПКА ==================== */ /* Шапка зафиксирована сразу. Именно fixed, а не sticky: sticky занял бы место в потоке и сдвинул главный экран вниз — логотип перестал бы попадать на его чёрную ступеньку, пришлось бы гасить высоту отрицательным margin */ .header { position: fixed; top: 0; left: 0; z-index: 20; width: 100%; transition: all 0.3s ease 0s; } /* Со второго экрана — серая плашка поверх контента и слой выше */ .header._is-fixed { z-index: 30; padding-bottom: 32px; background-color: var(--color-bg); } /* На первом экране логотип лежит на чёрной ступеньке — там он светлый, на серой плашке нужен тёмный */ .header__logo-dark { display: none; } /* _on-light — страницы без тёмного экрана под шапкой (кейсы) */ .header._is-fixed .header__logo-light, .header._on-light .header__logo-light { display: none; } .header._is-fixed .header__logo-dark, .header._on-light .header__logo-dark { display: block; } .header__wrapper { display: flex; align-items: center; gap: 20px; padding-top: 32px; padding-inline: 30px; } .header__logo { flex-shrink: 0; max-width: 264px; width: 100%; padding-top: 20px; } .header__logo img { width: 100%; height: auto; } .header__nav { display: flex; flex-shrink: 1; min-width: 0; gap: 30px; margin-left: auto; padding-top: 13px; } .header__phone { flex-shrink: 0; min-width: 240px; min-height: 45px; margin-left: 105px; clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); } .header__call { display: none; flex-shrink: 0; width: 60px; min-width: 60px; min-height: 45px; padding-inline: 0; clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); } /* ==================== ПОДВАЛ ==================== */ .footer { position: relative; padding-top: 40px; /* запас снизу под крупный логотип: в макете между ним и копирайтом 40px */ padding-bottom: 180px; overflow: clip; background-color: var(--color-black); color: var(--color-white); } .footer__decor { position: absolute; top: 0; left: 50%; width: 2547px; height: auto; margin-left: -1587px; pointer-events: none; } .footer__container, .footer__wrapper { position: relative; } .footer__wrapper { display: flex; flex-direction: column; align-items: center; } .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; line-height: 1.1; } /* Меню разбито на две группы, потому что в макете они верстаются по-разному: на десктопе одна строка, на планшете две строки 5+4, на мобильном две колонки. display: contents распускает группы обратно в один ряд */ .footer__nav-group { display: contents; } .footer__contacts { display: flex; flex-direction: column; align-items: center; margin-top: 60px; max-width: 392px; text-align: center; } .footer__address { line-height: 1.1; display: flex; flex-direction: column; gap: 8px; } .footer__socials { display: flex; align-items: center; gap: 10px; margin-top: 20px; } .footer__socials a { display: flex; } .footer__phone { margin-top: 48px; min-width: 270px; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); } .footer__site { margin-top: 48px; line-height: 1.1; } .footer__site a { text-decoration: underline; } .footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 65px; line-height: 1.1; color: rgba(255, 255, 255, 0.6); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin-top: 50px; line-height: 1.1; } .footer__author a { text-decoration: underline; } /* Логотип уходит за нижний край, как в макете */ .footer__wordmark { position: absolute; bottom: -9px; left: 50%; width: 96.6%; height: auto; transform: translateX(-50%); pointer-events: none; } /* ==================== БУРГЕР ==================== */ .burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; width: 60px; height: 45px; background-color: var(--color-black); clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); } .burger__line { width: 25px; height: 3px; border-radius: 1.5px; background-color: var(--color-accent); transition: all 0.3s ease 0s; } .burger._is-active .burger__line:first-child { transform: translateY(3.5px) rotate(45deg); } .burger._is-active .burger__line:last-child { transform: translateY(-3.5px) rotate(-45deg); } /* ==================== МОБИЛЬНОЕ МЕНЮ ==================== */ .mobile-panel { position: fixed; inset: 0; /* выше прилипшей шапки, иначе та перекроет открытое меню */ z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 24px 80px; overflow: hidden auto; background-color: var(--color-black); color: var(--color-white); /* закрытое состояние — уводим за правый край */ transform: translateX(100%); visibility: hidden; transition: all 0.3s ease 0s; } .mobile-panel._is-show { transform: translateX(0); visibility: visible; } .mobile-panel__close { position: absolute; top: 7px; right: 24px; display: flex; align-items: center; justify-content: center; width: 60px; height: 45px; background-color: #535353; clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); } .mobile-panel__nav { display: flex; flex-direction: column; align-items: center; gap: 30px; font-size: 32px; line-height: 1.2; } .mobile-panel__link._is-active { color: var(--color-accent); } .mobile-panel__contacts { display: flex; flex-direction: column; align-items: center; margin-top: 60px; text-align: center; } .mobile-panel__address { font-size: 18px; } .mobile-panel__socials { display: flex; align-items: center; gap: 10px; margin-top: 20px; } .mobile-panel__socials a { display: flex; } .mobile-panel__phone { margin-top: 30px; min-width: 240px; min-height: 45px; clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px); } .mobile-panel__site { margin-top: 30px; line-height: 1.1; } .mobile-panel__site a { text-decoration: underline; } .mobile-panel__wordmark { width: 100%; height: auto; margin-top: 60px; } /* ==================== ТЕКУЧАЯ ТИПОГРАФИКА ==================== */ /* Размеры шрифтов не переключаются ступеньками по медиазапросам, а тянутся между значениями макетов. Раньше, например, .section-head__title был 36px на 1023 и сразу 64px на 1024 — на всех промежуточных ширинах размер не соответствовал ни одному макету. Формула — кусочно-линейная функция от ширины окна, собранная из слагаемых: font-size: calc( 28px <- значение на 375px и уже + 0.020356 * clamp(0px, 100vw - 375px, 393px) <- участок 375..768 + 0.024306 * clamp(0px, 100vw - 768px, 1152px)<- участок 768..1920 ); Каждый clamp() даёт 0 левее своего участка, растёт линейно внутри и упирается в потолок правее — так слагаемые не мешают друг другу. Коэффициент — прирост размера на пиксель ширины: (S2 - S1) / (W2 - W1). Участок с нулевым приростом просто не выписан. За пределами 320 и 1920 размер замирает, отдельные min/max не нужны. Точки взяты там, где значение объявлено, и привязаны к ширине макета, а не к границе медиазапроса: база = 1920, @media 1919 = 1440, 1439 = 1024, 1023 = 768, 767 = 480, 479 = 375 (мобильный макет нарисован на 375, а не на 320 — иначе на 375 значение уже успевало подрасти). Поэтому старые значения на самих ширинах макетов сохранены точь-в-точь, а новое появилось только между ними. Правится размер по-прежнему в одном месте — здесь, в main.css; из media.css font-size убран */ /* ==================== СРЕЗЫ УГЛОВ ==================== */ /* Ступеньки и срезы взяты картинкой из макета — img/mask/*.svg, по файлу на форму. Раньше их резал clip-path, и к каждому polygon() шёл дубль на shape() ради скругления под ступенькой; теперь блоку хватает одной строки mask-image, а сама геометрия лежит в SVG и правится там же, где рисуется. SVG нарочно без viewBox: тогда его единица равна CSS-пикселю маски, и при mask-size: 100% 100% ничего не тянется — радиус остаётся радиусом на блоке любой пропорции (у hero это 1860x1020 на десктопе и 374x748 на мобильном). Вырез прибит к краю вложенным , поэтому едет за блоком сам. Наружные углы по-прежнему даёт border-radius — маска их не трогает */ .hero__wrapper, .about__card, .cases-slider__info, .brands__card, .design-3d-slider__item, .for-whom__card, .for-whom__image { mask-size: 100% 100%; mask-repeat: no-repeat; } /* ==================== ГЛАВНАЯ СТРАНИЦА ==================== */ /* ── Главный экран ── */ .hero { padding-top: 30px; } .hero__wrapper { mask-image: url("../img/mask/notch-hero.svg"); position: relative; display: flex; flex-direction: column; min-height: 1020px; padding: 322px 30px 30px; border-radius: 20px; background-color: var(--color-black); color: var(--color-white); overflow: clip; } .hero__decor { position: absolute; top: 38px; left: -807px; width: 1800px; height: 1800px; pointer-events: none; } .hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; /* 49% ≈ 880px на 1920 — колонка всегда остаётся левее фото (фото 47.85%) */ max-width: 49%; margin-bottom: 90px; } .hero__subtitle { max-width: 606px; font-weight: 500; font-size: calc( 20px - 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.007813 * clamp(0px, 100vw - 768px, 256px) + 0.004464 * clamp(0px, 100vw - 1024px, 896px) ); line-height: 1.1; letter-spacing: -1.2px; } .hero__accent { color: var(--color-accent); } .hero__title { font-family: var(--font-family-title); font-weight: 700; font-size: calc( 32px + 0.020356 * clamp(0px, 100vw - 375px, 393px) + 0.03125 * clamp(0px, 100vw - 768px, 256px) + 0.008929 * clamp(0px, 100vw - 1024px, 896px) ); line-height: 1; letter-spacing: -0.03em; } .hero__list { display: flex; flex-direction: column; gap: 13px; max-width: 539px; font-size: calc( 16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.007813 * clamp(0px, 100vw - 768px, 256px) + 0.004464 * clamp(0px, 100vw - 1024px, 896px) ); } .hero__item { position: relative; padding-left: 36px; letter-spacing: -1.2px; } .hero__item::before { content: ""; position: absolute; top: 0.5em; left: 16px; width: 5px; height: 5px; border-radius: 50%; background-color: currentColor; } /* до кнопки 32px — 20px даёт gap колонки, 12px добирает маржин */ .hero__btn { margin-top: 12px; min-width: 370px; } .hero__btn._mobile { display: none; } .hero__image { position: absolute; top: 90px; right: 30px; width: 47.85%; aspect-ratio: 890 / 910; border-radius: 20px; overflow: hidden; } .hero__image img { width: 100%; height: 100%; object-fit: cover; } .hero__bonus { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; /* auto прижимает блок к низу главного экрана — это не отступ, а позиционирование */ margin-top: auto; } .hero__bonus-title { font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: -1.2px; } .hero__bonus-list { display: flex; gap: 20px; } .hero__bonus-item { display: flex; align-items: flex-start; gap: 5px; width: 271px; /* 16 на 375, 18 на 768, 20 на 1024 и выше — значения макетов */ font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.007813 * clamp(0px, 100vw - 768px, 256px)); color: rgba(255, 255, 255, 0.7); } .hero__bonus-item img { flex-shrink: 0; } /* ── О компании, цифры ── */ .about__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .about__card { mask-image: url("../img/mask/notch-about.svg"); position: relative; display: flex; flex-direction: column; justify-content: space-between; /* в макете между плашкой и цифрой 20px: на мобильной карточке 160px контент занимает её целиком и space-between уже ничего не раздвигает */ gap: 20px; min-height: 280px; padding: 20px; border-radius: 20px; background-color: var(--color-surface); } .about__fact { display: flex; flex-direction: column; gap: 10px; max-width: 284px; } .about__number { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-family-number); font-size: calc( 40px + 0.061068 * clamp(0px, 100vw - 375px, 393px) - 0.03125 * clamp(0px, 100vw - 768px, 256px) + 0.026786 * clamp(0px, 100vw - 1024px, 896px) ); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; } .about__unit { font-family: var(--font-family); font-weight: 500; font-size: calc(24px - 0.003082 * clamp(0px, 100vw - 375px, 649px) + 0.011161 * clamp(0px, 100vw - 1024px, 896px)); line-height: 1; letter-spacing: -0.96px; } .about__text { font-size: calc(16px + 0.010179 * clamp(0px, 100vw - 375px, 393px) + 0.004464 * clamp(0px, 100vw - 1024px, 896px)); } /* ── Для кого ── */ .for-whom .section-head__title { line-height: 0.9; } .for-whom__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; } .for-whom__card { mask-image: url("../img/mask/cut-50.svg"); position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 440px; padding: 20px; border-radius: 20px; background-color: var(--color-surface); } /* Тег живёт в той же текстовой колонке, что и заголовок: без потолка длинные подписи вроде «Государственные учреждения» на 1440 упирались в фото — у .tag width: fit-content, а padding-inline у _lg ещё и 35px с каждой стороны. Ниже 480 фото скрыто, и потолок снимается — там тег снова в одну строку */ .for-whom__card > .tag { max-width: 47%; /* однострочные теги центрирует justify-content, перенесённым нужен свой */ text-align: center; } .for-whom__title { /* 47% — доля текстовой колонки в макете (430 из 912); в px ломалось на 1440-1919, где карточка уже 672, а фото оставалось 430 и лезло на текст */ max-width: 47%; font-weight: 500; font-size: calc(20px + 0.010179 * clamp(0px, 100vw - 375px, 393px) + 0.006944 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1; letter-spacing: -1.6px; } /* У фото свой срез, меньше карточного: иначе его подрезает маска карточки и между ними пропадает отступ, который есть в макете. 48px, а не 45 как в макете: в самих JPEG срез угла уже запечён — исходник 860x800 это ровно 2x от бокса, и запечённые 90px ложатся точно в наши 45px. JPEG без альфы, поэтому срез там чёрный, и по диагонали вылезала тёмная полоска. Лишние 3px её съедают. Правильное решение — перевыгрузить фото без среза, тогда сюда вернутся 45px */ .for-whom__image { mask-image: url("../img/mask/cut-48.svg"); position: absolute; top: 20px; right: 20px; /* доли вместо px по той же причине: 430x400 из карточки 912x440 */ width: 47%; height: calc(100% - 40px); border-radius: 20px; object-fit: cover; } .for-whom__card._cta { background-color: var(--color-black); background-image: url("../img/main/for-whom-cta.jpg"); background-position: center; background-size: cover; color: var(--color-white); } .for-whom__mark { width: 60px; height: 64px; } .for-whom__cta-title { margin-top: auto; max-width: 665px; font-family: var(--font-family-title); font-weight: 700; font-size: calc(24px + 0.020356 * clamp(0px, 100vw - 375px, 393px) + 0.024306 * clamp(0px, 100vw - 768px, 1152px)); line-height: 0.9; letter-spacing: -0.03em; } .for-whom__btn { align-self: flex-start; margin-top: 40px; min-width: 270px; font-size: calc(16px + 0.006944 * clamp(0px, 100vw - 768px, 1152px)); } /* ── Кейсы ── */ .cases__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .cases-slider { margin-top: 40px; } .cases-slider__item { position: relative; height: 650px; border-radius: 20px; overflow: hidden; background-color: var(--color-white); } /* Вся карточка — ссылка на страницу кейса */ .cases-slider__link { display: block; height: 100%; color: inherit; } .cases-slider__link:hover { color: inherit; } .cases-slider__link:hover .cases-slider__name { color: var(--color-accent); } .cases-slider__image { width: 100%; height: 100%; object-fit: cover; object-position: bottom; } /* Кнопка появляется только на мобильном, где слайдер становится списком */ .cases__more { display: none; } .cases-slider__info { /* нижние углы скругляет .cases-slider__item со своим overflow */ mask-image: url("../img/mask/notch-cases.svg"); position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; min-height: 191px; /* сверху 48, а не 30: ступенька выреза съедает 28px, и плашка с городом упиралась в неё. Контент прижат к низу, так что на широких экранах, где он короткий, лишний отступ ничего не двигает */ padding: 35px 20px 30px; border-radius: 20px 20px 0px 0px; background-color: var(--color-white); } .cases-slider__place .tag__text { display: flex; align-items: center; gap: 5px; } .cases-slider__name { font-family: var(--font-family-title); font-weight: 700; font-size: calc(24px + 0.030535 * clamp(0px, 100vw - 375px, 393px) + 0.003472 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1; letter-spacing: -0.03em; } .cases-slider__meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: calc(18px + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; } /* ── Баннер «350+ проектов» ── */ .banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 820px; padding: 60px 30px; overflow: clip; background-color: var(--color-black); color: var(--color-white); } .banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .banner__decor { position: absolute; width: 1520px; height: 684px; pointer-events: none; } .banner__decor._left { top: -53px; left: -760px; } .banner__decor._right { top: 193px; right: -760px; transform: scaleX(-1); } .banner__content { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 1155px; text-align: center; } .banner__mark { width: 60px; height: 64px; } .banner__title { font-family: var(--font-family-title); font-weight: 700; font-size: calc(24px + 0.030535 * clamp(0px, 100vw - 375px, 393px) + 0.024306 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1; letter-spacing: -0.03em; } .banner__text { margin-top: 20px; max-width: 959px; font-size: calc(18px + 0.003883 * clamp(0px, 100vw - 375px, 1545px)); letter-spacing: -1.2px; } .banner__btn { margin-top: 40px; min-width: 321px; font-size: calc(16px + 0.005178 * clamp(0px, 100vw - 375px, 1545px)); } /* ── Детали ── */ .details .section-head__title { max-width: none; line-height: 0.9; } .details .section-head__text { max-width: 1021px; } .details__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .details__card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 225px; padding: 20px; border-radius: 20px; background-color: var(--color-surface); } .details__text { font-size: calc(20px - 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.012153 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1; letter-spacing: -1.6px; } .details__more { display: none; } /* ── Дорожная карта ── */ .roadmap__wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .roadmap__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 740px; padding: 20px; border-radius: 20px; overflow: clip; background-color: var(--color-black); color: var(--color-white); } .roadmap__decor { position: absolute; top: 0; left: 0; width: 1229px; height: 830px; pointer-events: none; } .roadmap__head, .roadmap__title, .roadmap__text, .roadmap__note, .roadmap__btn { position: relative; } .roadmap__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; width: 100%; } .roadmap__mark { position: absolute; bottom: 20px; left: 20px; width: 60px; height: 64px; } .roadmap__title { margin-top: 20px; max-width: 900px; font-family: var(--font-family-title); font-weight: 700; font-size: calc(32px + 0.010179 * clamp(0px, 100vw - 375px, 393px) + 0.024306 * clamp(0px, 100vw - 768px, 1152px)); line-height: 0.9; letter-spacing: -0.03em; } .roadmap__text { margin-top: 20px; max-width: 806px; font-size: calc(18px + 0.015267 * clamp(0px, 100vw - 375px, 393px) + 0.006944 * clamp(0px, 100vw - 768px, 1152px)); letter-spacing: -1.6px; } .roadmap__note { margin-top: 40px; max-width: 548px; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1; letter-spacing: -1.2px; } .roadmap__btn { margin-top: 20px; min-width: 370px; font-size: calc(16px + 0.005178 * clamp(0px, 100vw - 375px, 1545px)); } .roadmap__list { display: flex; flex-direction: column; gap: 10px; } .roadmap__item { display: flex; align-items: flex-start; gap: 10px; min-height: 140px; padding: 14px 20px; border-radius: 20px; background-color: var(--color-surface); } .roadmap__num { flex-shrink: 0; width: 70px; font-family: var(--font-family-number); font-size: calc(20px + 0.010179 * clamp(0px, 100vw - 375px, 393px) + 0.006944 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; letter-spacing: -0.01em; text-align: center; color: var(--color-accent); } .roadmap__item-title { font-weight: 500; font-size: calc(20px + 0.010179 * clamp(0px, 100vw - 375px, 393px) + 0.013889 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; letter-spacing: -2px; } .roadmap__content { display: flex; flex-direction: column; gap: 10px; } .roadmap__item-text { font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); letter-spacing: -1.2px; max-width: 616px; } /* ── Почему выбирают ── */ .why .section-head__title { max-width: 1270px; } .why__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .why__card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 325px; padding: 20px; border-radius: 20px; background-color: var(--color-surface); } .why__num { font-size: calc(16px + 0.010179 * clamp(0px, 100vw - 375px, 393px) + 0.008681 * clamp(0px, 100vw - 768px, 1152px)); } .why__title { font-weight: 600; font-size: calc(24px + 0.006944 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; letter-spacing: -1.6px; } .why__content { display: flex; flex-direction: column; gap: 10px; } .why__text { font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.001736 * clamp(0px, 100vw - 768px, 1152px)); } .why__more { display: none; } /* ── Популярные модели ── */ .products .section-head__title { max-width: 773px; } .products__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .products__card { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 500px; padding: 20px; border-radius: 20px; overflow: clip; background-color: var(--color-surface); background-image: none; transition: all 0.3s ease 0s; position: relative; z-index: 1; } .products__card::after { content: ""; position: absolute; bottom: 0; right: 0; width: 450px; height: 500px; background: url("/img/main/product-decor.svg") no-repeat center / contain; pointer-events: none; opacity: 0; z-index: -1; transition: opacity 0.3s ease 0s; } .products__card:hover::after { opacity: 1; } .products__card::before { content: ""; background-image: radial-gradient( ellipse 120% 120% at 54% 62%, #f7f7f7 0%, #b9baba 25%, #7c7c7c 50%, #3e3f3f 75%, rgba(0, 1, 1, 0.74) 100% ); position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.3s ease 0s; } .products__card:hover::before { opacity: 1; } .products__card:hover { color: var(--color-primary); } .products__type { font-size: calc(16px + 0.003472 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; } .products__name { margin-top: 5px; font-weight: 600; font-size: calc(24px + 0.006944 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; letter-spacing: -1.6px; } .products__image { display: flex; align-items: center; justify-content: center; height: 260px; } .products__image img { max-height: 100%; width: auto; object-fit: contain; } .products__brand { width: 150px; height: auto; } /* ── Разработки ── */ .tech .section-head__title { max-width: 1182px; } .tech__panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 790px; margin-top: 40px; padding: 20px; border-radius: 20px; overflow: clip; background-color: var(--color-black); color: var(--color-white); /* Двойной срез нижнего правого угла взят маской из макета (1860x790): по ширине тянется процентом, по высоте и выносу справа привязан к px — панель выше макетной, потому что русский текст длиннее, и проценты по высоте резали бы футер сильнее. Все четыре стыка скруглены на 20px */ mask-image: url("../img/mask/notch-tech.svg"); mask-size: 100% 100%; mask-repeat: no-repeat; } .tech__decor { position: absolute; inset: 0; overflow: clip; pointer-events: none; } .tech__decor-ring { position: absolute; top: 50%; right: -8%; width: 44%; height: auto; opacity: 0.1; } .tech__decor-ring._a { transform: translateY(-52%) rotate(4.48deg); } .tech__decor-ring._b { transform: translateY(-52%); right: -6%; width: 42%; } .tech__decor-shield { position: absolute; right: 1%; width: 14%; height: auto; opacity: 0.1; } .tech__decor-shield._a { top: 16%; } .tech__decor-shield._b { top: 7%; } .tech__head { display: grid; grid-template-columns: 577fr 606fr 577fr; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 20px; line-height: 1.1; color: rgba(255, 255, 255, 0.4); padding-right: 20px; } .tech__head span:last-child { text-align: right; } .tech-slider__item { height: auto; } .tech__row { display: grid; grid-template-columns: 577fr 606fr 577fr; gap: 20px; align-items: start; padding-block: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-right: 20px; } .tech__trigger { display: block; width: 100%; text-align: left; color: inherit; cursor: default; } .tech__name { font-weight: 600; font-size: calc(24px + 0.013889 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; color: var(--color-accent); letter-spacing: -2px; } .tech__chevron { display: none; } /* на десктопе описание и колонка «где» — прямые ячейки сетки строки */ .tech__body { display: contents; } .tech__desc { font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); letter-spacing: -1.2px; } .tech__where { font-size: calc(16px + 0.003472 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; letter-spacing: -1px; text-align: right; } .tech__where-label { display: none; } /* В макете счётчик слева, стрелки — по центру панели. Раскладка сеткой, а не space-between: иначе стрелки прижимаются к правому краю и попадают в срез нижнего угла */ .tech__footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: flex-end; gap: 20px; } .tech__footer .tech-nav { grid-column: 2; } .tech__pagination { font-family: var(--font-family-number); font-size: 32px; line-height: 1.1; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.4); } /* Swiper's own .swiper-pagination class (added by JS to this element) sets position:absolute + left:0 + width:100%, which pulls it out of the footer's flex flow and breaks the layout of the nav/mark next to it — override back to static so it behaves like an ordinary flex item */ .tech__footer .tech__pagination { position: static; width: auto; text-align: left; bottom: auto; transform: none; } .tech__pagination .swiper-pagination-current { color: var(--color-white); } .tech-nav .nav__prev::before, .tech-nav .nav__next::before { background-color: var(--color-black); } /* ── Контакты, форма ── */ /* В макете между низом секции и подвалом 60px */ .callback { padding-bottom: 60px; } .callback__wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; } .callback__content { display: flex; flex-direction: column; gap: 40px; } .callback .section-head__title { max-width: 557px; } .callback .section-head__text { max-width: 459px; } .callback__form { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; } /* Обёртка поля: держит подпись ошибки, поэтому позиционированная */ .callback__field { position: relative; width: 100%; } /* Ловушка для ботов: настоящий пользователь этого поля не видит */ .callback__trap { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* Поле повторяет фирменную форму со срезами, как и кнопка */ .callback__input { width: 100%; min-height: 70px; padding-inline: 20px; background-color: var(--color-surface); font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); color: var(--color-primary); letter-spacing: -1.2px; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); } .callback__input::placeholder { color: #a0a0a0; letter-spacing: inherit; font-size: inherit; line-height: inherit; } .callback__input:focus { outline: none; } /* Ошибка: красная подложка на 1px больше поля. Само поле непрозрачное и лежит сверху, поэтому из-под него видна ровная рамка — со срезами углов включительно. Через outline так не выйдет: clip-path поля его срезает */ .callback__field._is-error::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background-color: var(--color-error); clip-path: polygon(19px 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%, 0 19px); } .callback__field._is-error .callback__input { position: relative; } .callback__agree { position: relative; display: flex; align-items: flex-start; gap: 10px; max-width: 560px; font-size: calc(16px + 0.006944 * clamp(0px, 100vw - 768px, 1152px)); cursor: pointer; letter-spacing: -1.2px; } .callback__agree._is-error .callback__checkbox { border-color: var(--color-error); } .callback__checkbox { position: relative; flex-shrink: 0; width: 20px; height: 20px; margin-top: 4px; border: 1px solid #a0a0a0; border-radius: 5px; appearance: none; cursor: pointer; transition: all 0.3s ease 0s; } /* Галочка лежит в поле всегда и только проявляется — иначе background-image не анимируется и она возникает рывком на фоне плавной заливки */ .callback__checkbox::before { content: ""; position: absolute; inset: 0; opacity: 0; background-image: url("../img/icon/icon-check.svg"); background-repeat: no-repeat; background-position: center; background-size: 14px 14px; transition: all 0.3s ease 0s; } .callback__checkbox:checked { background-color: var(--color-accent); border-color: var(--color-accent); } .callback__checkbox:checked::before { opacity: 1; } /* браузерная чёрная рамка фокуса ломает вид — заменяем на фирменную */ .callback__checkbox:focus { outline: none; } .callback__checkbox:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .callback__agree a { font-weight: 700; } /* 15px даёт gap формы, ещё 25px — до макетных 40px */ .callback__btn { margin-top: 17px; min-width: 270px; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); } /* В макете фото начинается на уровне заголовка, а не плашки-тега */ .callback__image { width: 100%; height: 820px; margin-top: 60px; border-radius: 20px; object-fit: cover; } /* ── Отзывы ── */ .reviews__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .reviews .section-head__title { max-width: none; } .reviews-slider { margin-top: 30px; } .reviews-slider__item { display: flex; flex-direction: column; gap: 32px; height: auto; padding: 30px; border-radius: 20px; background-color: var(--color-surface); } .reviews-slider__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .reviews-slider__author { display: flex; align-items: flex-start; gap: 10px; } .reviews-slider__avatar { flex-shrink: 0; width: 70px; height: 70px; border-radius: 10px; object-fit: cover; } .reviews-slider__name { font-weight: 500; line-height: 1.1; } .reviews-slider__info { display: flex; flex-direction: column; gap: 5px; } .reviews-slider__position { line-height: 1.1; } .reviews-slider__quote { flex-shrink: 0; width: 41px; height: 32px; } /* В макете длинный отзыв обрезан по высоте, полный текст — в попапе */ .reviews-slider__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); letter-spacing: -1.2px; } .reviews-slider__more { align-self: flex-start; border-bottom: 1px solid #a0a0a0; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; color: #a0a0a0; letter-spacing: -1.2px; } /* ── Карта объектов ── */ .geo__card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 1080px; padding: 20px; border-radius: 20px; overflow: clip; background-color: var(--color-surface); } .geo__head { position: relative; z-index: 1; } .geo .section-head__title { max-width: 800px; } .geo .section-head__text { max-width: 520px; } /* карта заходит под текстовую колонку — её левая часть прозрачная */ .geo__map { position: absolute; top: 19%; right: 0; width: 74.7%; height: auto; pointer-events: none; } .geo__stats { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 30px; max-width: 420px; } .geo__number { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-family-number); font-size: calc(60px + 0.040712 * clamp(0px, 100vw - 375px, 393px) + 0.003472 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1; letter-spacing: -0.03em; color: var(--color-accent); white-space: nowrap; } .geo__unit { font-family: var(--font-family); font-weight: 500; font-size: calc(32px + 0.005178 * clamp(0px, 100vw - 375px, 1545px)); line-height: 1; color: var(--color-primary); letter-spacing: -0.96px; } .geo__stat { display: flex; flex-direction: column; gap: 10px; } .geo__text { font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); letter-spacing: -1.2px; } /* ── 3D-проектирование ── */ .design-3d .section-head__title { max-width: 1170px; } .design-3d .section-head__text { display: none; } .design-3d__image { width: 100%; height: 600px; margin-top: 40px; border-radius: 20px; object-fit: cover; } .design-3d-slider { margin-top: 20px; } .design-3d-slider__item { mask-image: url("../img/mask/notch-3d.svg"); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; height: auto; min-height: 325px; padding: 20px; border-radius: 20px; background-color: var(--color-surface); } .design-3d-slider__num { font-size: calc(16px + 0.010179 * clamp(0px, 100vw - 375px, 393px) + 0.008681 * clamp(0px, 100vw - 768px, 1152px)); } .design-3d-slider__title { font-weight: 600; font-size: calc(20px + 0.010179 * clamp(0px, 100vw - 375px, 393px) + 0.013889 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; letter-spacing: -2px; } .design-3d-slider__text { margin-top: 10px; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.001736 * clamp(0px, 100vw - 768px, 1152px)); max-width: 354px; letter-spacing: -1px; } /* На десктопе в макете только кнопка по центру: все четыре шага видны сразу, листать нечего. Стрелки появляются на планшете, точки — на мобильном */ .design-3d__footer { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; } .design-3d-nav, .design-3d__pagination { display: none; } /* Swiper вешает сюда свой .swiper-pagination с position: absolute и width: 100% — элемент выпадает из флекса футера. Возвращаем в поток, как у .tech__pagination */ .design-3d__pagination.swiper-pagination { position: static; width: auto; bottom: auto; transform: none; } .design-3d__pagination .swiper-pagination-bullet { width: 12px; height: 12px; margin: 0; border-radius: 3px; background-color: #a0a0a0; opacity: 1; } .design-3d__pagination .swiper-pagination-bullet-active { background-color: var(--color-accent); } .design-3d__btn { display: flex; width: fit-content; min-width: 380px; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); } /* ── Бренды ── */ .brands .section-head__title { max-width: 1201px; } .brands .section-head__text { max-width: 839px; } .brands__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; } .brands__card { mask-image: url("../img/mask/notch-brands.svg"); position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 560px; padding: 20px; border-radius: 20px; overflow: clip; background-color: var(--color-surface); } .brands__watermark { position: absolute; top: 25px; right: -14%; width: 64%; height: auto; opacity: 0.05; pointer-events: none; } .brands__logo, .brands__text, .brands__features { position: relative; } .brands__text { margin-top: 35px; max-width: 640px; font-size: calc(18px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); letter-spacing: -1.2px; } .brands__features { display: flex; flex-direction: column; gap: 20px; } .brands__feature { display: flex; align-items: center; gap: 10px; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; letter-spacing: -1.2px; } .brands__check { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 12px; background-color: var(--color-accent); } .products__btn { display: flex; width: fit-content; margin-top: 40px; margin-inline: auto; min-width: 270px; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); } /* ==================== СТРАНИЦА КЕЙСА ==================== */ /* Шапка абсолютная, поэтому верхний отступ задаёт сама секция */ .case { padding-top: 95px; padding-bottom: 40px; } /* Плашка «назад» — та же форма со срезами, что у стрелок слайдеров */ .case__back { position: relative; display: flex; align-items: center; justify-content: center; width: 50px; height: 30px; background-color: #a0a0a0; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); } .case__back::before { content: ""; position: absolute; inset: 1px; background-color: var(--color-bg); clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); } .case__back img { position: relative; width: 8px; height: 16px; } .case__body { display: flex; gap: 20px; margin-top: 11px; } /* В макете галерея слева, описание справа, но в разметке описание идёт первым: на планшете и мобильном оно и стоит выше галереи */ .case__gallery { order: -1; flex: 1 1 auto; min-width: 0; } .case__info { display: flex; flex-direction: column; justify-content: space-between; flex-shrink: 0; width: 32.63%; } /* растягивать нечего: у .tag уже width: fit-content, остальное тянется на всю ширину */ .case__intro { display: flex; flex-direction: column; gap: 20px; } .case__tag { min-width: 185px; } .case__tag .tag__text { color: var(--color-primary); } .case__title { font-family: var(--font-family-title); font-weight: 700; font-size: calc(28px + 0.020356 * clamp(0px, 100vw - 375px, 393px) + 0.024306 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1; letter-spacing: -0.03em; } .case__specs { display: flex; flex-direction: column; gap: 10px; } .case__spec { display: flex; flex-direction: column; gap: 5px; } .case__spec-name { color: #535353; font-size: calc(16px + 0.006944 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; } .case__spec-value { font-weight: 500; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; } .case__about-title { font-weight: 500; font-size: 24px; line-height: 1.1; } /* В макете текст обрезан по высоте блока, полный текст — в попапе */ .case__about-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin-top: 5px; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.1; } .case__more { display: inline-block; margin-top: 20px; border-bottom: 1px solid #a0a0a0; color: #a0a0a0; font-size: calc(18px + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); line-height: 1.2; } .case-gallery__image { display: block; width: 100%; height: auto; aspect-ratio: 1233 / 789; object-fit: cover; border-radius: 20px; } .case-thumbs { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .case-thumbs__slider { min-width: 0; } .case-thumbs__item { width: 150px; opacity: 0.3; cursor: pointer; } .case-thumbs__item.swiper-slide-thumb-active { opacity: 1; } .case-thumbs__image { display: block; width: 100%; height: 115px; object-fit: cover; border-radius: 10px; } /* На ПК в ряд помещаются все миниатюры — стрелки нужны только на планшете и мобильном */ .case-thumbs__prev, .case-thumbs__next { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 27px; height: 14px; } .case-thumbs__prev img, .case-thumbs__next img { width: 14px; height: 27px; } .case-thumbs__prev.swiper-button-disabled, .case-thumbs__next.swiper-button-disabled { opacity: 0.4; cursor: default; } /* ==================== ФОРМЫ ==================== */ /* Попапы лежат в скрытом контейнере .popups[hidden]; Fancybox переносит нужный из него в свой слой, где он и показывается */ .popup { display: flex; flex-direction: column; gap: 20px; width: 920px; max-width: 100%; padding: 20px; border-radius: 20px; background-color: var(--color-bg); } .popup__head { display: flex; flex-direction: column; gap: 20px; } .popup__title { font-family: var(--font-family-title); font-weight: 700; font-size: calc(24px + 0.030535 * clamp(0px, 100vw - 375px, 393px) + 0.010417 * clamp(0px, 100vw - 768px, 1152px)); line-height: 0.9; letter-spacing: -0.03em; } .popup__text { max-width: 838px; font-size: calc(16px + 0.005089 * clamp(0px, 100vw - 375px, 393px) + 0.005208 * clamp(0px, 100vw - 768px, 1152px)); } .popup__text a { font-weight: 700; } .popup__mark { width: 60px; height: 64px; } .popup._center { align-items: center; width: 720px; padding: 40px; text-align: center; } .popup._review { width: 720px; padding: 30px; background-color: var(--color-surface); } /* до текста отзыва 32px: 20px даёт gap попапа, 12px добирает маржин */ .popup__review-text { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; font-size: calc(16px + 0.002589 * clamp(0px, 100vw - 375px, 1545px)); }