/* ============================================================ FIBROMET — дизайн-система Цвета и размеры приходят из content.json (блок :root в ). Здесь только структура. Правьте цифры в редакторе, не тут. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* --scale — общий масштаб: 1 = как есть, 0.8 = всё на 20% мельче. Меняем размер корневого шрифта, поэтому вместе с текстом пропорционально уменьшаются ВСЕ размеры в rem — заголовки, отступы, скругления. Размеры в px (ширина колонки, высота шапки, размер текста) множатся отдельно в build.py, потому что приходят из настроек. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: calc(100% * var(--scale)); } body { margin: 0; font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: var(--body-size); line-height: 1.6; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; } /* ---------- Типографика ---------- */ h1, h2, h3, h4, h5, .h1, .h2, .h3 { font-family: "Inter Tight", "Noto Sans", -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; color: var(--dark); text-wrap: balance; margin: 0 0 .6em; /* Длинные слова (СЕРТИФИЦИРОВАННЫЕ, İSTEHSALINDA) не должны вылезать за экран. Переносы по слогам НЕ включаем: вместе с text-wrap:balance браузер рвал слово даже когда оно помещалось целиком («РЕФРИЖЕРА-ТОРНЫЙ»). */ overflow-wrap: break-word; } /* Размер зависит и от ширины, и от ВЫСОТЫ окна: на широком, но невысоком экране ноутбука заголовок в 104px занимал весь первый экран и выдавливал кнопки вниз. */ h1, .h1 { font-size: clamp(2.05rem, min(5.8vw, 10.5vh), var(--h1-max)); line-height: .92; /* Межбуквенный просвет у заголовков отрицательный — вместе с буквами сжимается и пробел, и слова читаются как одно. Возвращаем пробелу ширину отдельно, не трогая плотность самих букв. */ word-spacing: .14em; } h2, .h2 { font-size: clamp(2.2rem, 4vw, var(--h2-max)); line-height: .94; } h3, .h3 { font-size: clamp(1.45rem, 5.4vw, var(--h3-size)); line-height: .98; } h4 { font-size: 1.15rem; line-height: 1.15; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } .eyebrow { font-family: "Inter Tight", "Noto Sans", sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); flex: none; } .eyebrow.is-center { justify-content: center; } .lead { font-size: 1.14em; color: var(--muted); max-width: 62ch; } /* ---------- Раскладка ---------- */ .row { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .row--narrow { width: min(100% - 2.5rem, 900px); margin-inline: auto; } section { padding-block: calc(var(--section-space) * var(--dense)); } section.tight { padding-block: calc(var(--section-space) * .55 * var(--dense)); } .surface { background: var(--surface); } .dark-band { background: var(--dark); color: #fff; } .dark-band h2, .dark-band h3 { color: #fff; } /* Ограничение по ширине держим на АБЗАЦЕ, а не на всём блоке: 68ch считается по мелкому шрифту body (~595px), и крупный заголовок раздела влезал в эту узкую колонку в три строки, хотя места вокруг было вдвое больше. Та же ошибка, что когда-то была у героя с 60ch — см. раздел 4, грабли №3. */ .section-head { max-width: 100%; margin-bottom: calc(3.5rem * var(--dense)); } .section-head > p { max-width: 68ch; } /* Ширину заголовка ограничиваем в em — то есть по его СОБСТВЕННОМУ кеглю, а не по мелкому шрифту body. Тогда длинный заголовок ложится в две строки на любой ширине, а не растягивается на весь экран в одну. */ .section-head h2 { max-width: 16em; } .section-head.is-center h2 { margin-inline: auto; } .section-head.is-center { margin-inline: auto; text-align: center; } .section-head.is-center > p { margin-inline: auto; } .grid { display: grid; gap: calc(1.5rem * var(--dense)); } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.7rem; font-family: "Inter Tight", "Noto Sans", sans-serif; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; border: 2px solid transparent; border-radius: calc(var(--radius) * .65); cursor: pointer; transition: 160ms ease all; white-space: nowrap; } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: #b30004; } .btn--dark { background: var(--dark); color: #fff; } .btn--dark:hover { background: var(--accent); } .btn--ghost { background: transparent; color: var(--dark); border-color: var(--line); } .btn--ghost:hover { border-color: var(--dark); background: var(--dark); color: #fff; } .btn--onimage { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); } .btn--onimage:hover { background: #fff; color: var(--dark); border-color: #fff; } .btn--sm { padding: .6rem 1.1rem; font-size: .84rem; } .arrow-link { display: inline-flex; align-items: center; gap: .45rem; font-family: "Inter Tight", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .88rem; color: var(--accent); } .arrow-link::after { content: "→"; transition: transform 160ms ease; } .arrow-link:hover::after { transform: translateX(4px); } /* ---------- Шапка ---------- */ .header { position: sticky; top: 0; z-index: 60; height: var(--header-h); background: #fff; border-bottom: 1px solid var(--line); } .header__inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } .header__logo { flex: 0 0 auto; display: block; } .header__logo img { height: calc(var(--header-h) * .40); width: auto; max-width: 200px; object-fit: contain; } .header__nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; } .header__nav a { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dark); padding-block: .4rem; border-bottom: 2px solid transparent; white-space: nowrap; } .header__nav a:hover, .header__nav a[aria-current="page"] { border-bottom-color: var(--accent); } .header__actions { display: flex; align-items: center; gap: .9rem; } .header__phone { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: .95rem; color: var(--dark); white-space: nowrap; } .header__phone:hover { color: var(--accent); } .langs { display: flex; gap: .15rem; } .langs a { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .5rem; border-radius: 6px; color: var(--muted); } .langs a[aria-current="true"] { background: var(--dark); color: #fff; } .langs a:hover { color: var(--accent); } .burger { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; padding: 0; align-items: center; justify-content: center; } .burger span { display: block; width: 24px; height: 2px; background: var(--dark); position: relative; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--dark); } .burger span::before { top: -7px; } .burger span::after { top: 7px; } /* ---------- Герой ---------- */ .hero { position: relative; display: grid; align-items: end; min-height: calc(var(--hero-h) * 1vh); color: #fff; overflow: hidden; } .hero__bg { position: absolute; inset: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12,34,50,.90) 0%, rgba(12,34,50,.62) 42%, rgba(12,34,50,.18) 72%, rgba(12,34,50,.05) 100%), linear-gradient(180deg, rgba(12,34,50,.30) 0%, rgba(12,34,50,calc(var(--hero-overlay) / 160)) 55%, rgba(12,34,50,.88) 100%); } .hero h1, .hero__subtitle { text-shadow: 0 2px 24px rgba(12,34,50,.45); } /* Отступы героя сжимаются на невысоких окнах, чтобы кнопки не уезжали за нижний край */ .hero__inner { position: relative; width: min(100% - 2.5rem, var(--container)); margin-inline: auto; padding-block: calc(clamp(2rem, 6vh, 4.5rem) * var(--dense-soft)) calc(clamp(1.75rem, 5vh, 4rem) * var(--dense-soft)); } /* Заголовок героя занимает всю ширину контейнера — как у образца. Раньше здесь было 60ch (≈480px, ch считался по мелкому шрифту body), потом 780px: и то и другое зажимало заголовок, и на широком экране он занимал 4 строки, выдавливая кнопки за нижний край. Ограничение осталось только у подзаголовка. */ .hero__content { max-width: 100%; } .hero h1 { color: #fff; } .hero .eyebrow { color: #fff; } .hero .eyebrow::before { background: var(--accent); width: 40px; height: 3px; } .hero__subtitle { font-size: 1.15rem; color: rgba(255,255,255,.86); max-width: 56ch; margin-bottom: calc(2rem * var(--dense-soft)); } .hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; } .hero--page { min-height: 52vh; } .hero--page h1 { font-size: clamp(1.85rem, min(4.3vw, 8vh), calc(var(--h1-max) * .74)); } /* Длину заголовка ограничиваем в em — по его СОБСТВЕННОМУ кеглю. Иначе на широком, но НИЗКОМ окне срабатывал 8vh: шрифт чуть уменьшался, вся строка помещалась целиком и заголовок растягивался на всю ширину (94–100%), хотя на высоком окне он лежал в две строки на 58%. ЭТО НЕ ТО ЖЕ, что старая ошибка с 60ch на .hero__content: ch считается по мелкому шрифту body и не масштабируется, em — масштабируется вместе с заголовком, поэтому доля ширины остаётся ровной на всех размерах. */ .hero h1 { max-width: 17em; } /* ---------- Полоса статистики ---------- */ .stats { background: var(--dark); color: #fff; } .stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .stats__item { padding: calc(3rem * var(--dense)) 1.5rem; border-left: 1px solid rgba(255,255,255,.14); } .stats__item:first-child { border-left: 0; } .stats__value { font-family: "Inter Tight", sans-serif; font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: #fff; margin-bottom: .4rem; } .stats__label { font-size: .92rem; color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .05em; } /* ---------- Модуль «картинка + текст» ---------- */ .module { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .module + .module { margin-top: calc(var(--section-space) * var(--dense)); } .module__media { border-radius: var(--radius); overflow: hidden; background: var(--surface); } .module__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .module.is-reversed .module__media { order: 2; } .module__body p { color: var(--muted); } /* ---------- Карточки продуктов ---------- */ .cards { display: grid; grid-template-columns: repeat(var(--product-cols), minmax(0, 1fr)); gap: calc(1.75rem * var(--dense)); } .card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: 180ms ease all; } .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12,34,50,.13); border-color: transparent; } .card__media { background: var(--surface); overflow: hidden; } .card__media img { width: 100%; aspect-ratio: var(--card-ratio); object-fit: cover; transition: transform 400ms ease; } .card:hover .card__media img { transform: scale(1.04); } .card__body { padding: calc(1.6rem * var(--dense-soft)) 1.5rem calc(1.7rem * var(--dense-soft)); display: flex; flex-direction: column; flex: 1; gap: .7rem; } .card__tag { font-family: "Inter Tight", sans-serif; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); } .card__title { font-size: 1.28rem; line-height: 1.05; margin: 0; } .card__text { font-size: .95rem; color: var(--muted); margin: 0; } .card__body .arrow-link { margin-top: auto; padding-top: .8rem; } /* ---------- Полоса «Все кузова» под карточками на главной ---------- */ /* Была обычная кнопка слева под карточками — заказчик её не замечал и решил, что кузовов всего шесть. Теперь это полоса во всю ширину с числом кузовов. */ .see-all { display: flex; align-items: center; justify-content: center; gap: clamp(.8rem, 2vw, 1.4rem); margin-top: calc(2.5rem * var(--dense)); padding: calc(1.45rem * var(--dense-soft)) 1.5rem; background: var(--dark); color: #fff; border-radius: var(--radius); font-family: "Inter Tight", "Noto Sans", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(1.05rem, 2.4vw, 1.5rem); line-height: 1.1; text-align: center; transition: background 180ms ease; } .see-all:hover { background: var(--accent); } .see-all b { flex: none; font-size: .78em; line-height: 1; padding: .4em .7em; border-radius: 999px; background: rgba(255,255,255,.16); } .see-all::after { content: "\2192"; flex: none; font-size: 1.05em; transition: transform 180ms ease; } .see-all:hover::after { transform: translateX(7px); } /* ---------- Сетка «иконка + текст» ---------- */ .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2.5rem * var(--dense)) 2rem; } .feature__icon { width: 52px; height: 52px; margin-bottom: calc(1.1rem * var(--dense-soft)); display: grid; place-items: center; border-radius: 12px; background: var(--accent); color: #fff; } .feature__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; } .feature h4 { font-family: "Inter Tight", sans-serif; font-weight: 800; text-transform: uppercase; color: var(--dark); margin: 0 0 .5rem; } .feature p { font-size: .95rem; color: var(--muted); margin: 0; } /* ---------- Шаги процесса ---------- */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(2.5rem * var(--dense)) 2.5rem; } .step__num { font-family: "Inter Tight", sans-serif; font-weight: 800; font-size: 3.4rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--accent); margin-bottom: .8rem; } .step h3 { font-size: 1.35rem; margin-bottom: .5rem; } .step p { color: var(--muted); font-size: .96rem; margin: 0; } /* ---------- Логотипы ---------- */ .logos { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .logos__item { background: #fff; flex: 1 1 150px; display: grid; place-items: center; padding: calc(1.8rem * var(--dense-soft)) 1.2rem; min-height: calc(118px * var(--dense-soft)); } .logos__item img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .62; transition: 200ms ease all; } .logos__item:hover img { filter: none; opacity: 1; } /* ---------- Отзывы ---------- */ .quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(1.75rem * var(--dense)); } .quote { background: #fff; border-radius: var(--radius); padding: calc(2rem * var(--dense-soft)) 1.9rem; border: 1px solid var(--line); display: flex; flex-direction: column; gap: calc(1.2rem * var(--dense-soft)); } .quote__mark { font-family: "Inter Tight", sans-serif; font-size: 3rem; line-height: .6; color: var(--accent); } .quote p { font-size: 1.03rem; margin: 0; } .quote__author { margin-top: auto; font-family: "Inter Tight", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .86rem; color: var(--dark); } /* ---------- CTA-полоса ---------- */ .cta-band { position: relative; color: #fff; overflow: hidden; } .cta-band__bg { position: absolute; inset: 0; } .cta-band__bg img { width: 100%; height: 100%; object-fit: cover; } .cta-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,34,50,.94) 0%, rgba(12,34,50,.72) 70%, rgba(12,34,50,.55) 100%); } .cta-band__inner { position: relative; width: min(100% - 2.5rem, var(--container)); margin-inline: auto; padding-block: calc(var(--section-space) * var(--dense)); } .cta-band h2 { color: #fff; max-width: 20ch; } .cta-band p { color: rgba(255,255,255,.82); max-width: 54ch; margin-bottom: calc(2rem * var(--dense-soft)); font-size: 1.08rem; } /* ---------- Аккордеон ---------- */ .accordion { border-top: 1px solid var(--line); } .accordion__item { border-bottom: 1px solid var(--line); } .accordion__btn { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: calc(1.6rem * var(--dense-soft)) 3rem calc(1.6rem * var(--dense-soft)) 0; position: relative; font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 1.12rem; color: var(--dark); } .accordion__btn::after { content: "+"; position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); font-size: 1.7rem; font-weight: 400; color: var(--accent); line-height: 1; } .accordion__item.is-open .accordion__btn::after { content: "–"; } .accordion__panel { display: none; padding: 0 3rem calc(1.8rem * var(--dense-soft)) 0; color: var(--muted); } .accordion__item.is-open .accordion__panel { display: block; } /* ---------- Таблица характеристик ---------- */ .specs { width: 100%; border-collapse: collapse; } .specs th { text-align: left; font-family: "Inter Tight", sans-serif; text-transform: uppercase; letter-spacing: .04em; font-size: .84rem; color: var(--muted); font-weight: 700; width: 42%; vertical-align: top; } .specs th, .specs td { padding: calc(1rem * var(--dense-soft)) 0; border-bottom: 1px solid var(--line); vertical-align: top; } .specs td { color: var(--text); } .specs tr:first-child th, .specs tr:first-child td { border-top: 2px solid var(--dark); } /* ---------- Галерея ---------- */ .gallery { display: grid; grid-template-columns: repeat(var(--gallery-cols), minmax(0, 1fr)); gap: calc(1.25rem * var(--dense)); } .gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface); cursor: zoom-in; } .gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 400ms ease; } .gallery figure:hover img { transform: scale(1.05); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(12,34,50,.94); display: none; place-items: center; padding: 2rem; } .lightbox.is-open { display: grid; } .lightbox img { max-width: min(1200px, 92vw); max-height: 88vh; width: auto; border-radius: var(--radius); } .lightbox__close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: 0; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.14); border: 0; color: #fff; font-size: 2rem; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; } .lightbox__nav.prev { left: 1.5rem; } .lightbox__nav.next { right: 1.5rem; } /* ---------- Формы ---------- */ .form { display: grid; gap: calc(1.1rem * var(--dense-soft)); } .field { display: grid; gap: .45rem; } .field label { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .field input, .field select, .field textarea { font: inherit; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: calc(var(--radius) * .5); background: #fff; color: var(--text); width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .field textarea { min-height: 130px; resize: vertical; } .form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; } .form__note { font-size: .9rem; color: var(--muted); } .form__status { padding: .9rem 1.1rem; border-radius: calc(var(--radius) * .5); background: var(--surface); font-size: .95rem; display: none; } .form__status.is-visible { display: block; } .contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .info-list { display: grid; gap: calc(1.6rem * var(--dense-soft)); } .info-list dt { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: .3rem; } .info-list dd { margin: 0; font-size: 1.05rem; } .map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .map iframe { width: 100%; height: 420px; border: 0; display: block; } /* ---------- Подвал ---------- */ .footer { background: var(--dark); color: rgba(255,255,255,.72); padding-block: calc(4.5rem * var(--dense)) 0; } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: calc(2.5rem * var(--dense)) 2.5rem; } .footer h4 { font-family: "Inter Tight", sans-serif; color: #fff; font-size: .86rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 1.2rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .footer a, .footer p, .info-list dd { overflow-wrap: break-word; } .footer a:hover { color: #fff; } .footer__logo img { height: 36px; width: auto; margin-bottom: 1.2rem; } .footer__social { display: flex; gap: .7rem; margin-top: 1.3rem; } .footer__social a { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; display: grid; place-items: center; } .footer__social a:hover { background: var(--accent); border-color: var(--accent); } .footer__social svg { width: 17px; height: 17px; fill: currentColor; } .footer__bottom { margin-top: calc(3.5rem * var(--dense)); padding-block: calc(1.6rem * var(--dense)); border-top: 1px solid rgba(255,255,255,.14); font-size: .87rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; } /* ---------- Плавающая кнопка WhatsApp ---------- */ .wa { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 26px rgba(0,0,0,.24); } .wa svg { width: 28px; height: 28px; fill: currentColor; } .wa:hover { transform: scale(1.06); } /* ---------- Хлебные крошки ---------- */ .crumbs { font-size: .86rem; color: var(--muted); padding-block: calc(1.4rem * var(--dense-soft)); } .crumbs a:hover { color: var(--accent); } .crumbs span { margin-inline: .45rem; opacity: .5; } /* ---------- Вкладки категорий (страница «Кузова») ---------- */ /* Липнут под шапкой, чтобы с любого места страницы можно было перескочить на другую категорию. Высота учтена в scroll-margin ниже. */ .cat-tabs { position: sticky; top: var(--header-h); z-index: 50; background: #fff; border-bottom: 1px solid var(--line); } .cat-tabs__row { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cat-tabs__row::-webkit-scrollbar { display: none; } .cat-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; padding: 1rem .9rem; font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: .84rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dark); border-bottom: 3px solid transparent; white-space: nowrap; } .cat-tab b { font-size: .7rem; line-height: 1; padding: .28rem .45rem; border-radius: 999px; background: var(--surface); color: var(--muted); } .cat-tab:hover { color: var(--accent); border-bottom-color: var(--accent); } .cat-tab:hover b { background: var(--accent); color: #fff; } /* якорь категории не должен уезжать под шапку и вкладки */ main section[id] { scroll-margin-top: calc(var(--header-h) + 3.6rem); } /* ---------- Возврат к категории (страница кузова) ---------- */ .cat-back { padding-bottom: .2rem; } .cat-back__link { display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dark); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .58rem 1.1rem; transition: border-color 160ms ease, color 160ms ease; } .cat-back__link::before { content: "\2190"; color: var(--accent); font-size: 1rem; } .cat-back__link span { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; } .cat-back__link:hover { border-color: var(--accent); color: var(--accent); } /* ---------- Адаптив ---------- */ /* 1280–1100: прячем телефон — меню и кнопка ещё помещаются */ @media (max-width: 1365px) { .header__phone { display: none; } .header__nav { gap: 1.15rem; } .header__nav a { font-size: .82rem; } } /* Меньше 1100: полноценное меню уже не влезает — переходим на бургер. Планшеты (iPad 1024×768 и 1180×820 в альбомной) попадают сюда. */ @media (max-width: 1099px) { /* ниже 1100px строка вкладок точно не помещается — показываем подсказку, что её можно двигать пальцем вбок */ .cat-tabs::after { content: ""; position: absolute; top: 0; right: 0; bottom: 3px; width: 42px; background: linear-gradient(to right, rgba(255,255,255,0), #fff 70%); pointer-events: none; } .burger { display: flex; } .header__nav { position: fixed; inset: var(--header-h) 0 auto 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.25rem 2rem; border-bottom: 1px solid var(--line); transform: translateY(-120%); transition: transform 220ms ease; max-height: calc(100vh - var(--header-h)); overflow: auto; } .header__nav.is-open { transform: translateY(0); } .header__nav a { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; white-space: normal; } .header__actions { margin-left: auto; } } @media (max-width: 1080px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .features, .steps, .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats__item:nth-child(3) { border-left: 0; } .stats__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); } } @media (max-width: 900px) { .module, .contact-grid { grid-template-columns: minmax(0, 1fr); } .module.is-reversed .module__media { order: 0; } .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .see-all { padding: calc(1.1rem * var(--dense-soft)) 1rem; gap: .7rem; letter-spacing: .02em; } .cat-tab { padding: .7rem .7rem; font-size: .76rem; gap: .38rem; } .cat-tab b { font-size: .66rem; padding: .22rem .38rem; } main section[id] { scroll-margin-top: calc(var(--header-h) + 2.9rem); } .cat-back__link { font-size: .74rem; padding: .5rem .9rem; } .cat-back__link span { display: none; } /* Плотнее первый экран, чтобы кнопки не выглядывали наполовину */ .hero .eyebrow { margin-bottom: .6rem; } .hero__subtitle { font-size: 1.02rem; margin-bottom: 1.4rem; } .hero__cta { gap: .7rem; } /* На главной две CTA всегда остаются одной парой: русские подписи длиннее, поэтому распределяем ширину поровну и ужимаем только их мобильную типографику. */ .hero:not(.hero--page) .hero__cta { flex-wrap: nowrap; } .hero:not(.hero--page) .hero__cta .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: .5rem; font-size: clamp(.7rem, 3.25vw, .86rem); letter-spacing: .02em; white-space: nowrap; } .wa { width: 50px; height: 50px; right: 14px; bottom: 14px; } .wa svg { width: 24px; height: 24px; } /* Кнопка с телефоном не помещалась на узких экранах — разрешаем перенос */ .btn { padding: .85rem 1.25rem; white-space: normal; text-align: center; } .header__inner { gap: .6rem; } .header__actions { gap: .5rem; } .header__actions .btn { display: none; } .header__logo img { max-width: 150px; } .langs a { padding: .26rem .38rem; font-size: .72rem; } section { padding-block: calc(var(--section-space) * .62); } .cards, .features, .steps, .quotes, .gallery { grid-template-columns: minmax(0, 1fr); } .form__row { grid-template-columns: minmax(0, 1fr); } .footer__grid { grid-template-columns: minmax(0, 1fr); } .stats__grid { grid-template-columns: minmax(0, 1fr); } .stats__item { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-block: 2rem; } .stats__item:first-child { border-top: 0; } .hero__inner { padding-block: 3rem 2.5rem; } .specs th { width: 45%; font-size: .78rem; } /* ВАРИАНТ «ФОТО ЦЕЛИКОМ» (пробный). Снимок 1600x1200 вытянут вширь, а окно телефона — ввысь. При наложении текста поверх фотографии от кузова остаётся середина: и перед, и корма срезаются. Здесь снимок ложится сверху своим размером, текст уходит под него на тёмное поле — кузов виден целиком. */ /* padding-block гасим: у наложенного варианта он отделял текст от края, а здесь просто отодвигал бы фотографию от шапки пустой полосой. */ .hero:not(.hero--page) { display: block; min-height: 0; background: var(--dark); padding-block: 0; } .hero:not(.hero--page) .hero__bg { position: static; } /* 16:10 вместо родных 4:3 — срезается только небо и асфальт сверху и снизу, кузов по ширине остаётся целым, а первая кнопка помещается на экран. */ .hero:not(.hero--page) .hero__bg img { height: auto; aspect-ratio: 16 / 10; } .hero:not(.hero--page) .hero__bg::after { display: none; } .hero:not(.hero--page) h1, .hero:not(.hero--page) .hero__subtitle { text-shadow: none; } .hero:not(.hero--page) .hero__inner { padding-block: 1.5rem 2.2rem; } .hero:not(.hero--page) .hero__subtitle { margin-bottom: 1.1rem; } } /* Характеристики на телефоне: подпись сверху, значение снизу */ @media (max-width: 560px) { .specs, .specs tbody, .specs tr, .specs th, .specs td { display: block; width: auto; } .specs tr { padding-block: .9rem; border-bottom: 1px solid var(--line); } .specs tr:first-child { border-top: 2px solid var(--dark); } .specs th, .specs td, .specs tr:first-child th, .specs tr:first-child td { border: 0; padding: 0; } .specs th { margin-bottom: .25rem; } } /* ---------- Невысокое окно ---------- Заказчик уменьшал окно по высоте — кнопки первого экрана уходили под нижний край. Шрифт заголовка уже зависит от vh, но подзаголовок и отступы оставались прежними и не давали содержимому сжаться. Здесь сжимаем именно их. */ @media (max-height: 720px) { .hero .eyebrow { margin-bottom: .5rem; font-size: .72rem; } .hero h1 { margin-bottom: .38em; } .hero__subtitle { font-size: 1rem; line-height: 1.5; margin-bottom: 1.1rem; } .hero__cta { gap: .7rem; } .hero__cta .btn { padding: .8rem 1.4rem; } } @media (max-height: 600px) { .hero .eyebrow { display: none; } .hero__subtitle { font-size: .95rem; margin-bottom: .9rem; } } @media print { .header, .footer, .wa, .cta-band, .hero__cta { display: none; } }