/* ========================================================================== АРТДОМ — стили лендинга Все числа взяты из PSD (см. PROJECT.md). Эталонная ширина макета 1920. Геометрия резиновая: --k масштабирует макетный пиксель под ширину экрана. Типографика на clamp(), чтобы не схлопнуться на узком и не раздуться на широком. ========================================================================== */ /* --- Шрифты: подрезанные Inter из системы, ровно те, что в макете ---------- */ @font-face { font-family: "Inter18"; src: url("../fonts/inter18-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter18"; src: url("../fonts/inter18-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Inter18"; src: url("../fonts/inter18-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter28"; src: url("../fonts/inter28-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Масштаб: 1 макетный пиксель в CSS-пикселях текущего экрана */ --k: calc(100vw / 1920); --dp: 1px; /* --- Цвет (истинные значения из PSD) --- */ --c-ink: #000003; --c-ink-soft: #202023; --c-muted: #6a6d81; --c-accent: #4d6dd9; --c-surface: #edeff4; --c-chip: #edeef4; --c-white: #ffffff; --c-black: #000000; --c-rule: #d9dae0; --c-rule-soft: #e6e5ea; --c-track: #dfdfe4; --c-scrim: rgba(43, 46, 51, .35); --c-accent-dark: #7595ff; /* акцент на тёмном: 7.50:1, тогда как #4d6dd9 даёт ровно 4.50 */ /* Доступные варианты — включаются классом .a11y на . Замеры: серый 4.43 -> 4.57, акцент-как-текст 4.05 -> 4.51 (PROJECT.md §7) */ --c-muted-aa: #686b7f; --c-accent-aa: #4866cc; /* --- Типографика --- */ --f-body: "Inter18", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --f-ui: "Inter28", var(--f-body); --t-h1: clamp(34px, calc(70 * var(--k)), 92px); --t-h2: clamp(26px, calc(40 * var(--k)), 53px); --t-lead: clamp(17px, calc(21 * var(--k)), 27px); --t-num: clamp(46px, calc(90 * var(--k)), 118px); --t-title: clamp(20px, calc(28 * var(--k)), 37px); --t-mid: clamp(16px, calc(18 * var(--k)), 23px); --t-body: clamp(15px, calc(16 * var(--k)), 21px); --t-nav: clamp(15px, calc(16 * var(--k)), 20px); --t-chip: clamp(13px, calc(14 * var(--k)), 18px); --t-mail: clamp(18px, calc(24 * var(--k)), 31px); /* --- Геометрия --- */ --gutter: max(20px, calc(44 * var(--k))); --gap-card: max(16px, calc(46 * var(--k))); --pad-top: max(40px, calc(39 * var(--k))); /* чернила H2 садятся на 46, как в макете */ --pad-bot: max(48px, calc(54 * var(--k))); --r-btn: max(6px, calc(9 * var(--k))); /* 291x90: скруглены ЛВ и ПН, два других прямые */ --r-btn-sm: 999px; /* 213x43: полная пилюля */ --r-chip: 3px; /* замер по PSD: 128x33, R=2..3 */ /* --- Движение --- */ --ease: cubic-bezier(.16, 1, .3, 1); --dur: .55s; } @media (min-width: 2400px) { :root { --k: calc(2400px / 1920); } } .a11y { --c-muted: var(--c-muted-aa); --c-accent: var(--c-accent-aa); } /* --- Сброс ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--f-body); font-size: var(--t-body); line-height: 1.5; color: var(--c-ink); background: var(--c-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --- Контейнер ------------------------------------------------------------ */ .wrap { padding-inline: var(--gutter); } .sec { padding-block: var(--pad-top) var(--pad-bot); } .sec--surface { background: var(--c-surface); } .sec--white { background: var(--c-white); } /* --- Типографические роли ------------------------------------------------- */ .h1 { font-size: var(--t-h1); line-height: 1.03; font-weight: 600; letter-spacing: normal; } .h2 { font-size: var(--t-h2); line-height: 1.1; font-weight: 400; letter-spacing: normal; } .h2--big { font-size: var(--t-h1); line-height: 1.03; font-weight: 600; text-align: center; letter-spacing: normal; } .lead { font-size: var(--t-lead); line-height: 1.33; } .muted { color: var(--c-muted); } .body { font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); } /* --- Кнопки --------------------------------------------------------------- */ .btn { --btn-bg: var(--c-accent); --btn-fg: var(--c-white); display: inline-flex; align-items: center; gap: max(14px, calc(24 * var(--k))); min-height: 48px; padding: max(14px, calc(22 * var(--k))) max(18px, calc(26 * var(--k))); background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--r-btn) 0 var(--r-btn) 0; /* по диагонали, как в макете */ font-size: var(--t-mid); line-height: 1.22; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .btn__arrow { flex: none; position: relative; display: block; width: calc(23 * var(--k)); min-width: 18px; height: calc(6 * var(--k)); min-height: 5px; overflow-x: clip; overflow-y: visible; } .btn__arrow svg { position: absolute; inset-block: 0; inset-inline-start: 0; width: 100%; height: 100%; transition: transform .55s var(--ease); } .btn__arrow svg:nth-child(2) { transform: translateX(-165%); } .btn:hover .btn__arrow svg:nth-child(1) { transform: translateX(165%); } .btn:hover .btn__arrow svg:nth-child(2) { transform: translateX(0); } .btn:active { transform: translateY(1px); } .btn--sm { padding: max(10px, calc(11 * var(--k))) max(16px, calc(20 * var(--k))); font-size: var(--t-body); gap: max(12px, calc(16 * var(--k))); border-radius: var(--r-btn-sm); } .btn--wide { width: calc(291 * var(--k)); min-width: 232px; height: calc(90 * var(--k)); min-height: 48px; justify-content: space-between; padding: max(18px, calc(26 * var(--k))) max(20px, calc(27 * var(--k))) max(18px, calc(26 * var(--k))) max(20px, calc(25 * var(--k))); } .btn--ghost { --btn-bg: var(--c-white); --btn-fg: var(--c-accent); } /* --- Шапка ---------------------------------------------------------------- */ .hdr { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 20; padding-block: calc(38 * var(--k)); color: var(--c-white); pointer-events: none; /* пустая полоса не должна глотать клики */ } .hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .hdr__in > * { pointer-events: auto; } .logo { display: inline-flex; align-items: center; gap: calc(13 * var(--k)); color: inherit; min-height: 48px; margin-block: calc((40 * var(--k) - 48px) / 2); } .logo__mark { width: calc(38 * var(--k)); min-width: 26px; height: auto; } .logo__word { width: calc(141 * var(--k)); min-width: 96px; height: auto; } .hdr__right { display: flex; align-items: center; gap: calc(60 * var(--k)); pointer-events: auto; } .nav { display: flex; align-items: center; gap: calc(34 * var(--k)); } .nav a, .hdr__tel { font-family: var(--f-ui); font-size: var(--t-nav); line-height: 1; min-height: 48px; display: inline-flex; align-items: center; padding-inline: 8px; margin-inline: -8px; margin-block: calc((1.5em - 48px) / 2); transition: opacity var(--dur) var(--ease); } .nav a, .hdr__tel { position: relative; } .nav a::after, .hdr__tel::after { content: ""; position: absolute; inset-inline: 8px; inset-block-start: 50%; margin-block-start: .62em; height: var(--dp); background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease); } .nav a:hover::after, .hdr__tel:hover::after { transform: scaleX(1); } .hdr__burger { display: none; } /* --- Hero ----------------------------------------------------------------- */ .hero { position: relative; min-height: calc(1040 * var(--k)); display: flex; align-items: flex-end; overflow: hidden; } .hero__bg { position: absolute; inset: 0; } .hero__bg img, .hero__bg video { width: 100%; height: 100%; object-fit: cover; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--c-scrim); } .hero__in { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(580 * var(--k))); gap: calc(80 * var(--k)); align-items: end; padding-block-end: calc(56 * var(--k)); color: var(--c-white); } @keyframes heroIn { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .hero__title { max-width: calc(760 * var(--k)); animation: heroIn 1s var(--ease) both; } .hero__aside { display: flex; flex-direction: column; align-items: flex-start; gap: calc(48 * var(--k)); animation: heroIn 1s var(--ease) .15s both; } .hero__aside .lead { max-width: calc(533 * var(--k)); } /* --- Услуги / аккордеон ---------------------------------------------------- */ .services__in { display: grid; grid-template-columns: 710fr 412fr 710fr; align-items: start; } .services__col { grid-column: 1; } .services__media { grid-column: 3; grid-row: 1; } .services__media img { width: 100%; height: auto; } .services__head { max-width: calc(600 * var(--k)); margin-block-end: calc(48 * var(--k)); } .services__head .body { margin-block-start: calc(14 * var(--k)); } .acc { border-block-start: var(--dp) solid var(--c-rule); } .acc__item { border-block-end: var(--dp) solid var(--c-rule); } .acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding-block: calc(18 * var(--k)); text-align: start; font-size: var(--t-mid); font-weight: 500; color: var(--c-ink-soft); transition: color var(--dur) var(--ease); } .acc__btn:hover { color: var(--c-accent); } .acc__btn:hover .acc__icon { transform: rotate(90deg); } .acc__icon { flex: none; width: calc(38 * var(--k)); min-width: 30px; aspect-ratio: 1; border-radius: 50%; background: var(--c-accent); display: grid; place-items: center; color: var(--c-white); transition: background-color var(--dur) var(--ease), transform .5s var(--ease); } .acc__icon svg { width: 42%; } .acc__item[data-open="true"] .acc__icon { display: none; } /* в макете у открытого пункта иконки нет */ .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); } .acc__item[data-open="true"] .acc__panel { grid-template-rows: 1fr; } .acc__panelIn { overflow: hidden; } .acc__body { padding-block-end: calc(34 * var(--k)); max-width: calc(620 * var(--k)); } .acc__body .btn { margin-block-start: calc(30 * var(--k)); } /* --- Заголовок секции с кнопкой справа ------------------------------------ */ .sechead { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(40 * var(--k)); margin-block-end: calc(42 * var(--k)); } .sechead__text { max-width: calc(620 * var(--k)); } .sechead__text .body { margin-block-start: calc(14 * var(--k)); } /* --- Слайдер (объекты и отзывы) ------------------------------------------- */ .slider { position: relative; } .slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gap-card)) / 3); gap: var(--gap-card); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; /* работает и без скриптов */ scrollbar-width: none; } .slider__track::-webkit-scrollbar { display: none; } .slider__track > * { scroll-snap-align: start; } .slider.is-drag .slider__track { scroll-snap-type: none; cursor: grabbing; } /* Когда скрипт взял ленту на себя, родную доводку отключаем: иначе она тянет к своей цели одновременно с нашей анимацией, и движение выходит рваным. На тач-устройствах оставляем родную — там инерция системная и она лучше. */ .slider.has-js .slider__track { scroll-snap-type: none; } @media (pointer: coarse) { .slider.has-js .slider__track { scroll-snap-type: x mandatory; } } .slider__bar { margin: calc(66 * var(--k)) auto 0; width: calc(626 * var(--k)); max-width: 70%; height: 4px; border-radius: 2px; background: var(--c-track); overflow: hidden; } .slider__thumb { height: 100%; border-radius: 2px; background: var(--c-accent); transform-origin: left center; will-change: transform; } /* --- Карточка объекта ------------------------------------------------------ */ .card { display: flex; flex-direction: column; } .card__media { position: relative; aspect-ratio: 580 / 395; overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); } .card:hover .card__media img { transform: scale(1.04); } .card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-start: calc(24 * var(--k)); } .chip { font-size: var(--t-chip); line-height: 1; color: var(--c-muted); padding: max(6px, calc(9 * var(--k))) max(11px, calc(16 * var(--k))); border-radius: var(--r-chip); background: var(--c-chip); } .card__title { font-size: var(--t-title); line-height: 1.15; margin-block-start: calc(24 * var(--k)); } .roll { display: block; position: relative; overflow-y: clip; overflow-x: visible; padding-block: .14em; margin-block: -.14em; } .card__title .roll { transition: color var(--dur) var(--ease); } .roll__a, .roll__b { display: block; transition: transform .6s var(--ease); } .roll__b { position: absolute; inset-block-start: .14em; inset-inline-start: 0; width: 100%; transform: translateY(calc(100% + .3em)); } .card:hover .roll__a, .btn:hover .roll__a { transform: translateY(calc(-100% - .3em)); } .card:hover .roll__b, .btn:hover .roll__b { transform: translateY(0); } a[draggable="false"], img { -webkit-user-drag: none; } /* НЕ наследуется: картинке нужно своё */ .card:hover .card__title .roll { color: var(--c-accent); } .card__media { display: block; } .card__facts { display: flex; align-items: center; margin-block-start: calc(20 * var(--k)); font-size: var(--t-body); } .card__facts li + li { border-inline-start: var(--dp) solid var(--c-rule); margin-inline-start: calc(20 * var(--k)); padding-inline-start: calc(20 * var(--k)); } .card__text { margin-block-start: calc(18 * var(--k)); } .card__price { font-size: var(--t-title); line-height: 1.15; margin-block-start: calc(24 * var(--k)); } .card__price sup { font-size: .6em; vertical-align: super; } .card .btn { align-self: flex-start; margin-block-start: calc(26 * var(--k)); } /* Вертикальные линейки между карточками */ .objects .slider__track > * + *, .reviews .slider__track > * + * { position: relative; } .objects .slider__track > * + *::before, .reviews .slider__track > * + *::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(-1 * var(--gap-card) / 2); width: var(--dp); background: var(--c-rule-soft); } .rule { height: var(--dp); background: var(--c-rule-soft); margin-block-end: calc(24 * var(--k)); } /* --- О компании ------------------------------------------------------------ */ .about__in { margin-block-start: calc(72 * var(--k)); max-width: calc(1407 * var(--k)); margin-inline: auto; /* в макете 249..1656 */ display: grid; grid-template-columns: calc(505 * var(--k)) minmax(0, calc(902 * var(--k))); align-items: start; } .about__side { grid-column: 1; } .about__main { grid-column: 2; } .about__portrait { width: calc(181 * var(--k)); min-width: 96px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; } .about__portrait img { width: 100%; height: 100%; object-fit: cover; } .about__quote { margin-block-start: calc(38 * var(--k)); max-width: calc(373 * var(--k)); font-size: var(--t-title); line-height: 1.2; } .about__who { margin-block-start: calc(36 * var(--k)); font-size: clamp(17px, calc(21 * var(--k)), 26px); } .about__role { display: block; font-size: var(--t-body); color: var(--c-muted); margin-block-start: calc(6 * var(--k)); } .about__main .body { font-size: var(--t-mid); line-height: 1.556; } /* 18/28 по PSD */ .about__main p + p { margin-block-start: calc(26 * var(--k)); } .about__main .btn { margin-block-start: calc(44 * var(--k)); } /* --- Гарантии: закреплённая сцена ------------------------------------------ Каркас высотой в три экрана, сцена внутри липкая. У CSS-липкости нет собственного диапазона: она держит блок ровно пока каркас в кадре, и отпускает сама — досчитывать конец не нужно. */ .guaranty { position: relative; height: 300svh; } .guaranty__stage { position: sticky; inset-block-start: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; } .guaranty__bg { position: absolute; inset: 0; } .guaranty__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease), transform 1.6s var(--ease); transform: scale(1.06); } .guaranty__bg img[data-on="true"] { opacity: 1; transform: scale(1); } /* Затемнение одно на все слои, иначе на перекрёстном переходе оно удваивается */ .guaranty__bg::after { content: ""; position: absolute; inset: 0; background: var(--c-scrim); } /* Мягкое пятно под заголовком: на светлом кадре белый текст падал до 2.23:1 в самых ярких 5% площади. Радиальный градиент вместо filter: blur — тот рисует целый слой, а градиент браузеру ничего не стоит. На тёмных кадрах его не видно, зато текст читается на любой фотографии. */ .guaranty__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 68% 42% at 50% 50%, rgba(18, 20, 24, .40) 0%, rgba(18, 20, 24, .28) 45%, rgba(18, 20, 24, 0) 72%); } .guaranty__text { position: relative; z-index: 2; width: 100%; display: grid; place-items: center; } .guaranty__title { grid-area: 1 / 1; margin: 0; color: var(--c-white); text-align: center; opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .guaranty__title[data-on="true"] { opacity: 1; transform: none; } .guaranty__steps { position: absolute; z-index: 2; inset-block-end: calc(48 * var(--k)); display: flex; gap: 10px; } .guaranty__steps span { width: 34px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .35); transition: background-color .5s var(--ease); } .guaranty__steps span[data-on="true"] { background: var(--c-white); } @media (max-width: 860px) { .guaranty__steps { inset-block-end: 28px; } .guaranty__steps span { width: 26px; } } /* --- Цифры ------------------------------------------------------------------ */ .stats-sec { padding-block: calc(65 * var(--k)) calc(59 * var(--k)); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); } .stats__item { border-inline-start: var(--dp) solid var(--c-rule); padding-inline: calc(42 * var(--k)); display: flex; flex-direction: column; min-height: calc(348 * var(--k)); } .stats__item:last-child { border-inline-end: var(--dp) solid var(--c-rule); } .stats__num { font-size: var(--t-num); line-height: .8; font-weight: 500; color: var(--c-accent); letter-spacing: normal; } .stats__label { margin-block-start: auto; font-size: var(--t-mid); line-height: 1.44; color: var(--c-muted); } /* --- Отзывы ------------------------------------------------------------------ */ .rating { display: flex; align-items: center; gap: calc(8 * var(--k)); margin-block-start: calc(12 * var(--k)); font-size: var(--t-body); } .stars { display: inline-flex; gap: 2px; color: var(--c-accent); } .stars svg { width: 1em; height: 1em; } .review__top { display: flex; align-items: center; gap: calc(20 * var(--k)); } .review__ava { flex: none; width: calc(89 * var(--k)); min-width: 56px; aspect-ratio: 1; border-radius: 50%; background: var(--c-white); display: grid; place-items: center; font-size: var(--t-title); line-height: 1; } .review__name { font-size: var(--t-title); line-height: 1.1; } .review__src { font-size: var(--t-body); color: var(--c-muted); margin-block-start: calc(4 * var(--k)); } .review .stars { margin-block-start: calc(26 * var(--k)); font-size: calc(var(--t-title) * .85); } .review__text { margin-block-start: calc(22 * var(--k)); } /* --- Футер -------------------------------------------------------------------- */ .ftr { background: var(--c-black); color: var(--c-white); padding-block: calc(52 * var(--k)) calc(44 * var(--k)); } .ftr__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(60 * var(--k)); } .ftr__cta .body { color: var(--c-white); max-width: calc(570 * var(--k)); margin-block-start: calc(16 * var(--k)); } .ftr__cta .btn { margin-block-start: calc(38 * var(--k)); } .ftr__rule { height: var(--dp); background: rgba(255, 255, 255, .3); margin-block: calc(48 * var(--k)); } .ftr__mid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(60 * var(--k)); } .ftr a.ftr__tel { display: flex; width: fit-content; font-size: var(--t-h2); line-height: 1.1; } .ftr a.ftr__mail { display: flex; width: fit-content; font-size: var(--t-mail); line-height: 1.3; margin-block-start: calc(10 * var(--k)); } .ftr__addr { font-size: var(--t-mid); line-height: 1.4; margin-block-start: calc(14 * var(--k)); } .ftr__soc { margin-block-start: calc(40 * var(--k)); display: grid; gap: 0; justify-items: start; } .ftr__nav a { margin-block: 0; } /* в макете строки и так по 48.5 */ /* Списки в подвале: цель по высоте строки, БЕЗ отрицательного маргина. С ним соседние цели налезали друг на друга на 18px — палец у границы попадал в чужую ссылку. Приём с маргином годится для одиночной ссылки в тексте, но не для стопки. 30px проходит минимум WCAG 2.5.8 (24px). */ .ftr__soc a, .ftr__legal a { min-height: 30px; margin-block: 0; } .ftr__nav { display: grid; gap: 0; justify-items: start; font-size: clamp(17px, calc(21 * var(--k)), 26px); } .ftr__legal { margin-block-start: calc(54 * var(--k)); display: grid; gap: 0; justify-items: start; font-family: var(--f-ui); font-size: var(--t-nav); } /* :where() обнуляет специфичность аргумента, поэтому правило весит всего (0,1,0) и его перебивает ЛЮБОЕ именное правило для отдельной ссылки. Без этого общее .ftr a = (0,1,1) молча выигрывало у .ftr__soc a и у .btn--wide — в этом проекте я наступил на это трижды. */ .ftr :where(a:not(.btn)) { min-height: 48px; min-width: 44px; display: inline-flex; align-items: center; padding-inline: 8px; margin-inline: -8px; margin-block: calc((1.5em - 48px) / 2); /* цель 48, а ритм считается по шрифту */ transition: color var(--dur) var(--ease); } /* Ховер в подвале — цветом, а не подчёркиванием: в макете он и показан так, голубым WhatsApp. Оттенок осветлён под тёмный фон: 7.50:1 против ровно 4.50 у фирменного #4d6dd9, то есть у акцента на каждой подложке своя роль. */ .ftr :where(a:not(.btn)):hover { color: var(--c-accent-dark); } .ftr a.ftr__tel, .ftr a.ftr__mail { transition: color var(--dur) var(--ease); } .ftr__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--f-ui); font-size: var(--t-nav); } .cursor { position: fixed; inset-block-start: 0; inset-inline-start: 0; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; background: var(--c-accent); color: var(--c-white); display: grid; place-items: center; pointer-events: none; z-index: 60; scale: 0; opacity: 0; transition: scale .45s var(--ease), opacity .45s var(--ease); } .cursor[data-on="true"] { scale: 1; opacity: 1; } .cursor svg { width: 30px; } .has-cursor [data-cursor] { cursor: none; } /* прячем системный только когда свой реально поднялся */ @media (hover: none), (pointer: coarse) { .cursor { display: none; } } /* Контакты и цены копируют — оставляем выделяемыми явно */ .selectable { user-select: text; } /* --- Появление при прокрутке ------------------------------------------------- */ .js [data-rise]:not([data-rise="shutter"]) { opacity: 0; transform: translateY(22px); } .js [data-rise="shutter"] { clip-path: inset(0 0 100% 0); } .js [data-rise]:not([data-rise="shutter"]).is-in, html.rise-failsafe.rise-failsafe [data-rise]:not([data-rise="shutter"]) { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); } .js [data-rise="shutter"].is-in, html.rise-failsafe.rise-failsafe [data-rise="shutter"] { clip-path: inset(0); transition: clip-path .95s var(--ease); } /* ========================================================================== Адаптив ========================================================================== */ @media (max-width: 1180px) { .services__in { grid-template-columns: 1fr; gap: calc(48 * var(--k)); } .services__col, .services__media { grid-column: 1; } .services__media { grid-row: auto; } .about__in { grid-template-columns: 1fr; gap: calc(56 * var(--k)); } .about__side, .about__main { grid-column: 1; } .slider__track { grid-auto-columns: calc((100% - var(--gap-card)) / 2); } .stats { grid-template-columns: repeat(2, 1fr); } .stats__item:nth-child(2), .stats__item:nth-child(4) { border-inline-end: var(--dp) solid var(--c-rule); } } @media (max-width: 860px) { :root { --k: calc(1180px / 1920); --pad-top: 48px; --pad-bot: 56px; --gutter: 20px; --gap-card: 20px; } .hdr { padding-block: 18px; } .hdr__right { display: none; } .hdr__burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-inline-end: -8px; pointer-events: auto; } .hdr__burger svg { width: 26px; } .hero { min-height: 88svh; } .hero__in { grid-template-columns: 1fr; gap: 32px; padding-block-end: 40px; } .hero__title { max-width: none; } .sechead { flex-direction: column; } .slider__track { grid-auto-columns: 100%; } /* один объект на экран целиком, без огрызков */ .slider__bar { max-width: 100%; } .objects .slider__track > * + *::before, .reviews .slider__track > * + *::before { display: none; } .stats { grid-template-columns: 1fr; } .stats__item { border-inline: none; border-block-start: var(--dp) solid var(--c-rule); min-height: 0; padding-inline: 0; } .stats__item:last-child { border-inline-end: none; border-block-end: var(--dp) solid var(--c-rule); } .stats__label { margin-block-start: 12px; } /* Экспертные решения: сперва основной текст, портрет с цитатой под ним */ .about__main { order: 1; } .about__side { order: 2; margin-block-start: 40px; } .about__quote { max-width: none; } /* Цифры: линейка не должна лежать вплотную к числу и подписи */ .stats__item { padding-block: 28px 30px; } .ftr__cta, .ftr__mid { grid-template-columns: 1fr; gap: 44px; } .ftr__bottom { flex-direction: column; align-items: flex-start; gap: 8px; } } /* --- Меню на телефоне --------------------------------------------------------- */ .menu { position: fixed; inset: 0; z-index: 40; background: var(--c-black); color: var(--c-white); display: grid; align-content: center; gap: 10px; padding: 24px var(--gutter); transform: translateY(-100%); transition: transform .5s var(--ease), visibility .5s; visibility: hidden; } .menu[data-open="true"] { transform: none; visibility: visible; } /* Меню WordPress приходит обёрнутым в nav — display:contents возвращает его пункты в сетку .menu прямыми детьми, как было в статике. */ /* Меню WordPress приходит голыми
  • внутри