/* ========================================================================== База: сброс, типографика, общие примитивы вёрстки ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Якорные ссылки не должны заезжать под липкую шапку. */ scroll-padding-top: calc(var(--header-h) + var(--sp-4)); -webkit-text-size-adjust: 100%; } body { font-family: var(--f-body); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--c-text); background: var(--c-white); -webkit-font-smoothing: antialiased; overflow-x: clip; /* страховка: одна широкая карусель не должна двигать всю страницу */ } /* Обёртка всей страницы. Раньше сеткой была сама , но теперь у неё появился второй ребёнок — ниша мобильного меню (05-drawer.css), и он стал бы лишней строкой. Сетка переехала сюда, к тем же трём элементам. */ .page-shell { /* Подвал прижат к низу окна. Три строки: шапка по содержимому, main забирает остаток, подвал по содержимому. На короткой странице (404, «спасибо за заявку») подвал раньше вставал сразу под текстом и под ним оставалась белая простыня. В поток входят ровно эти трое: skip-link абсолютный, плавающая кнопка записи — fixed, они строк не создают. */ min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; /* Одна колонка, но обязательно minmax(0, 1fr), а не auto. Колонка `auto` не сжимается уже своего min-content: одна широкая карусель внутри — и колонка растягивается на её ширину, а вместе с ней и вся страница. На 390 px главная разъехалась до 1240: карточки услуг шириной 612 вылезали за экран, и `overflow-x: clip` выше просто отрезал им правый край, поэтому даже полосы прокрутки не было видно. */ grid-template-columns: minmax(0, 1fr); } h1, h2, h3, h4, h5, h6 { font-family: var(--f-head); font-weight: 900; line-height: var(--lh-tight); letter-spacing: -.5px; color: var(--c-navy); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -.3px; } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg, video { max-width: 100%; display: block; } img { height: auto; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } /* Видимый фокус для клавиатуры — но не рамка вокруг всего от мыши. */ :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* ── Служебные ───────────────────────────────────────────────────────────── */ /* Текст только для скринридеров. */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Раскладка ───────────────────────────────────────────────────────────── */ .l-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .l-wrap--narrow { max-width: var(--wrap-narrow); } .l-section { padding-block: var(--section-y); } .l-section--light { background: var(--c-bg-light); } .l-section--navy { background: var(--c-navy); color: var(--c-white); } .l-section--navy h2, .l-section--navy h3 { color: var(--c-white); } /* Появление блоков при прокрутке. Ставит класс скрипт через IntersectionObserver — библиотека для этого не нужна. */ .js-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .9, .3, 1); } .js-reveal.is-visible { opacity: 1; transform: none; } /* Без JS ничего не должно остаться невидимым. */ .no-js .js-reveal { opacity: 1; transform: none; }