/* ── brand.css ── */ /* ═══════════════════════════════════════════════════════════ РДКомпани · дизайн-система сайта Построена на фирменном стиле компании (руководство по применению фирменного стиля, 24 с.): цветовая диада, Montserrat, треугольник. ═══════════════════════════════════════════════════════════ */ /* Montserrat (SIL Open Font License 1.1), локальная копия с Google Fonts, 10.10.2026 */ /* cyrillic-ext */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('fonts/montserrat-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('fonts/montserrat-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* знак рубля ₽ (U+20BD): отдельный файл на 2 КБ, иначе из-за одного знака браузер качал весь latin-ext на 68 КБ. Вырезан из montserrat-latin-ext.woff2. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('fonts/montserrat-rub.woff2') format('woff2'); unicode-range: U+20BD; } /* latin-ext (без U+20BD) */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('fonts/montserrat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20BC, U+20BE-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin: оставлены ASCII, знаки пунктуации и типографика (U+0020-007E, U+00A0-00BF, U+2000-206F, €, ™, стрелки, минус). Буквы с диакритикой À-ÿ убраны: на русском сайте их нет, файл легче на 8 КБ. Если понадобятся, вернуть полный файл из Google Fonts. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00BF, U+00D7, U+00F7, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ——— цвет: фирменная диада из брендбука ——— */ --orange: #ef7f1a; /* RGB 239 127 26 · Pantone 1505 C · RAL 2008 */ --orange-700: #d06c11; --orange-soft: rgba(239,127,26,.10); --graphite: #4e565a; /* RGB 78 86 90 · Pantone 4196 C · RAL 7024 */ --graphite-800: #3c4347; --graphite-900: #2c3235; /* затемнение графита для подвала и плашек */ /* производные нейтрали — построены от графита, чтобы не спорить с ним */ --ink: #16191b; --ink-2: #22272a; /* основной текст — почти чёрный, не серый */ --ink-3: #5c656a; /* только подписи, сноски, легенды */ --line: #dfe3e5; --line-2: #edf0f1; --bg: #ffffff; --bg-soft: #f4f6f6; /* ——— типографика: Montserrat, Bold для заголовков, Regular для текста ——— */ --font: "Montserrat", "Verdana", -apple-system, BlinkMacSystemFont, sans-serif; --t-d1: clamp(34px, 3.1vw, 52px); --t-h2: clamp(25px, 2.1vw, 34px); --t-h3: clamp(18px, 1.35vw, 22px); --t-h4: 16px; --t-body: 15.5px; --t-small: 13.5px; --t-micro: 12px; /* ——— сетка и ритм: плотнее, чем в первой версии ——— */ --container: 1380px; --gutter: 40px; --section: clamp(56px, 4.6vw, 84px); --radius: 3px; --radius-lg: 6px; --shadow: 0 1px 2px rgba(35,40,43,.05), 0 10px 30px rgba(35,40,43,.08); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--t-body); font-weight: 400; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; } /* заголовки — Montserrat Bold, как требует брендбук */ h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.16; } h1 { font-size: var(--t-d1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); line-height: 1.25; } h4 { font-size: var(--t-h4); line-height: 1.35; font-weight: 600; } p { margin: 0; } /* ——— раскладка ——— */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section) 0; position: relative; } .section--soft { background: var(--bg-soft); } .section--dark { background: var(--graphite-900); color: #fff; } .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } /* ——— стилеобразующий элемент: равнобедренный прямоугольный треугольник ——— */ .tri { position: absolute; width: 74px; height: 74px; background: var(--orange); pointer-events: none; } .tri--tr { top: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 0); } .tri--tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); } .tri--br { bottom: 0; right: 0; clip-path: polygon(100% 100%, 100% 0, 0 100%); } .tri--bl { bottom: 0; left: 0; clip-path: polygon(0 100%, 0 0, 100% 100%); } .tri--sm { width: 46px; height: 46px; } /* ——— заголовок раздела ——— */ .head { margin-bottom: 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .head__text { max-width: 720px; } .head p { margin-top: 12px; color: var(--ink-2); font-size: 16px; } .head--center { flex-direction: column; align-items: center; text-align: center; } .head--center .head__text { max-width: 760px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-micro); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; } .eyebrow::before { content: ""; width: 13px; height: 13px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .muted { color: var(--ink-3); } .small { font-size: var(--t-small); } .micro { font-size: var(--t-micro); } .lead { font-size: 16.5px; color: var(--ink-2); line-height: 1.62; } /* ——— кнопки ——— */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px; border: 1px solid transparent; border-radius: var(--radius); font-size: var(--t-small); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .16s, color .16s, border-color .16s; white-space: nowrap; } .btn--primary { background: var(--orange); color: #fff; } .btn--primary:hover { background: var(--orange-700); } .btn--dark { background: var(--graphite); color: #fff; } .btn--dark:hover { background: var(--graphite-800); } .btn--outline { border-color: var(--line); color: var(--ink); background: #fff; } .btn--outline:hover { border-color: var(--graphite); } .btn--on-photo { border-color: rgba(255,255,255,.55); color: #fff; } .btn--on-photo:hover { background: rgba(255,255,255,.14); border-color: #fff; } .btn--sm { height: 40px; padding: 0 18px; font-size: var(--t-micro); } .btn--wide { width: 100%; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); font-weight: 600; color: var(--ink); transition: gap .16s, color .16s; } .link-arrow:hover { gap: 13px; color: var(--orange); } /* ——— мелкие элементы ——— */ .chip { display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 100px; background: #fff; border: 1px solid var(--line); font-size: var(--t-micro); font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background .16s, color .16s, border-color .16s; } .chip:hover { border-color: var(--graphite); } .chip.is-active { background: var(--graphite); border-color: var(--graphite); color: #fff; } .badge { display: inline-flex; align-items: center; height: 25px; padding: 0 11px; background: var(--orange-soft); color: var(--orange-700); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .card { background: #fff; border: 1px solid var(--line); } .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── page.css ── */ /* Главная РДКомпани — вёрстка блоков */ /* шапка фиксирована — якорные переходы должны учитывать её высоту */ section[id], footer[id] { scroll-margin-top: 112px; } /* ═══ шапка ═══ Фиксирована и полупрозрачна над первым экраном; при прокрутке уплотняется и выдвигает строку с адресом и телефонами — отдельной контактной полосы над шапкой больше нет. */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: linear-gradient(180deg, rgba(44,50,53,.66) 0%, rgba(44,50,53,.18) 100%); border-bottom: 1px solid rgba(255,255,255,.14); transition: background .28s ease, border-color .28s ease, box-shadow .28s ease; } .header.is-stuck { background: rgba(44,50,53,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.08); box-shadow: 0 10px 32px rgba(0,0,0,.28); } .header__row { display: flex; align-items: center; gap: 36px; height: 78px; transition: height .28s ease; } .header.is-stuck .header__row { height: 64px; } .logo img { height: 40px; width: auto; transition: height .28s ease; } .header.is-stuck .logo img { height: 34px; } .menu { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: var(--t-small); font-weight: 500; } .menu__item { position: relative; } .menu__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 27px 0; color: rgba(255,255,255,.82); transition: color .15s; } .menu__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 22px; height: 2px; background: var(--orange); transition: right .22s ease; } .menu__item:hover .menu__link { color: #fff; } .menu__item:hover .menu__link::after { right: 0; } .menu__link svg { width: 9px; height: 9px; opacity: .6; } /* телефон вместо кнопки: он нужен на виду постоянно, как на rdcompany.ru */ .header__tel { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border: 1px solid rgba(255,255,255,.42); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; transition: border-color .16s, background .16s; } .header__tel:hover { border-color: var(--orange); background: var(--orange); } .header.is-stuck .header__tel { height: 40px; } .dropdown { position: absolute; top: 100%; left: -16px; min-width: 272px; padding: 6px; background: rgba(44,50,53,.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; } .menu__item:hover .dropdown { opacity: 1; visibility: visible; transform: none; } .dropdown a { display: block; padding: 11px 14px; font-size: var(--t-small); color: rgba(255,255,255,.76); } .dropdown a:hover { background: rgba(239,127,26,.16); color: #fff; } /* ═══ Г-1 первый экран ═══ Затемнение равномерное, но у каждого кадра своё: величина посчитана по 95-му процентилю яркости в той зоне, где лежит текст, и взята наименьшая, при которой текст ещё читается. Прежде на всех кадрах стояло одно значение по худшему из них, и тёмные снимки гасились зря. Второе: слова услуг больше не полупрозрачные. Приглушённому тексту нужно вдвое больше вуали, чем сплошному белому (0,58 против 0,36 на светлом кадре), поэтому активная услуга выделена оранжевой чертой и кеглем, а цвет у всех один. */ .hero { position: relative; min-height: 720px; display: flex; align-items: center; color: #fff; overflow: hidden; } .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* величину задаёт слайдер: --veil меняется вместе с кадром. Форма — виньетка с чистым ядром: правая половина кадра не тронута вовсе, плотность нарастает к левому краю ПОЛОГО, без видимой границы: по горизонтали 1,00 → 0,95 → 0,82 → 0,68 → 0,48 → 0,28 → 0,10 → 0 к 67%. Резкий переход владелец забраковал, поэтому спад растянут на полкадра, а пики снижены — текст держится за счёт тени. */ .hero__veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(86% 195% at 92% 46%, rgba(10,13,15,0) 0%, rgba(10,13,15,0) 34%, rgba(10,13,15, calc(var(--veil, .4) * .30)) 50%, rgba(10,13,15, calc(var(--veil, .4) * .68)) 68%, rgba(10,13,15, calc(var(--veil, .4) * .94)) 86%, rgba(10,13,15, var(--veil, .4)) 100%); transition: background 1s ease; } /* низ кадра: под подписью объекта и миниатюрами нужна своя плотность */ .hero__veil::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, rgba(10,13,15,0) 0%, rgba(10,13,15,.42) 60%, rgba(10,13,15,.72) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; padding: 34px 0 0; } .hero__tag { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.88); margin-bottom: 20px; } .hero__tag::before { content: ""; width: 12px; height: 12px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } /* четыре услуги — четыре строки, цвет один, активная помечена чертой */ .hero__services { display: flex; flex-direction: column; gap: 2px; font-weight: 700; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.55); } .hero__services .svc-word { position: relative; display: block; padding-left: 26px; white-space: nowrap; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.2; color: rgba(255,255,255,.9); transition: color .45s ease, font-size .45s ease; } .hero__services .svc-word::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 2px; background: currentColor; opacity: .5; transition: all .45s ease; } .hero__services .svc-word.is-live { color: #fff; font-size: clamp(29px, 2.7vw, 42px); } .hero__services .svc-word.is-live::before { background: var(--orange); opacity: 1; height: 3px; width: 16px; top: .5em; } .hero__services .sep { display: none; } .hero__sub { margin-top: 18px; max-width: 52ch; font-size: 20px; line-height: 1.5; color: rgba(255,255,255,.94); text-shadow: 0 2px 16px rgba(0,0,0,.62); } .hero__cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; } .usp { position: relative; z-index: 2; margin-top: clamp(38px, 4.6vw, 64px); border-top: 1px solid rgba(255,255,255,.22); } .usp__row { display: grid; grid-template-columns: repeat(5, 1fr); } .usp__item { padding: 20px 22px 26px; border-right: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; gap: 11px; } .usp__item:first-child { padding-left: 0; } .usp__item:last-child { border-right: 0; padding-right: 0; } .usp__icon { width: 24px; height: 24px; color: var(--orange); } .usp__text { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.9); } /* Переход от тёмного первого экрана к белому листу был слишком резким, поэтому блок маршрута лежит на почти белой подложке. */ #uslugi { background: #f4f6f7; } .route { box-shadow: 0 1px 0 rgba(16,19,22,.04); } /* ═══ Г-2 маршрут проекта: колонки пропорциональны срокам, стройка выделена ═══ */ /* min-width:0 обязателен: иначе длинное название этапа распирает колонку и шапка расходится со строками */ .route { border: 1px solid var(--line); background: #fff; } .route__head, .route__row { display: grid; grid-template-columns: 196px 9fr 11fr 13fr 11fr 10fr 26fr 13fr; } .route__head > *, .route__row > * { min-width: 0; } .route__head { border-bottom: 1px solid var(--line); background: var(--bg-soft); } .route__corner { padding: 12px 16px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-right: 1px solid var(--line); display: flex; align-items: center; } .route__stage { position: relative; padding: 12px 12px 22px; border-right: 1px solid var(--line); border-top: 3px solid transparent; cursor: pointer; transition: background .16s; } .route__stage:hover { background: #fff7ef; } .route__stage.is-picked { background: #fdf0e2; } /* постоянный признак, что за этапом спрятана расшифровка */ .route__more { position: absolute; left: 12px; bottom: 7px; width: 15px; height: 15px; border-radius: 50%; background: rgba(239,127,26,.12); opacity: .75; transition: opacity .16s, background .16s, transform .16s; } .route__more::after { content: ""; position: absolute; left: 4.5px; top: 4px; width: 5px; height: 5px; border-right: 1.5px solid var(--orange); border-bottom: 1.5px solid var(--orange); transform: rotate(45deg); } .route__stage:hover .route__more, .route__stage.is-picked .route__more { opacity: 1; background: rgba(239,127,26,.24); transform: translateY(1px); } .route__stage:last-child { border-right: 0; } .route__stage-n { font-size: 10.5px; font-weight: 700; color: var(--orange); letter-spacing: .06em; } .route__stage-t { margin-top: 3px; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); hyphens: none; } /* строительство: самый длинный и дорогой этап — тёплая заливка и оранжевая черта */ .route__stage--key { background: #fdf3e9; border-top-color: var(--orange); } .route__stage--key .route__stage-t { font-weight: 700; } .route__cell--key { background: #fefaf6; } .route__row { border-bottom: 1px solid var(--line); } .route__row:last-child { border-bottom: 0; } .route__row:hover { background: #fafbfb; } .route__svc { padding: 11px 16px; border-right: 1px solid var(--line); display: flex; align-items: center; } .route__svc-name { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.25; } .route__cell { border-right: 1px solid var(--line); min-height: 40px; display: grid; place-items: center; } .route__cell:last-child { border-right: 0; } .route__bar { height: 11px; width: calc(100% - 12px); background: #e8ebec; } .route__cell.on .route__bar { background: var(--orange); } .route__cell.part .route__bar { background: repeating-linear-gradient(90deg, var(--orange) 0 4px, rgba(239,127,26,.3) 4px 8px); } .route__legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--ink-2); } .route__legend i { display: inline-block; width: 18px; height: 8px; margin-right: 6px; vertical-align: middle; } /* ═══ Г-3 услуги: фото слева, содержание справа — раскладка прототипа ═══ */ /* ═══ Г-4 конфигурации: гибкость ═══ */ .configs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); } .config { padding: 24px 20px 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; background: #fff; transition: background .18s; } .config:last-child { border-right: 0; } .config:hover { background: var(--bg-soft); } .config__blocks { display: flex; gap: 4px; } .config__blocks i { height: 26px; flex: 1; background: var(--line-2); } .config__blocks i.on { background: var(--orange); } .config__blocks i.half { background: repeating-linear-gradient(90deg, var(--orange) 0 4px, rgba(239,127,26,.25) 4px 8px); } .config__name { font-size: 14.5px; font-weight: 700; line-height: 1.3; } .config__desc { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.5; } .config__note { grid-column: 1 / -1; padding: 18px 22px; background: var(--graphite-900); color: rgba(255,255,255,.88); font-size: var(--t-small); display: flex; gap: 14px; align-items: flex-start; } .config__note b { color: #fff; } /* ═══ Г-5 опыт и профессионализм ═══ */ .proof { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; border: 1px solid var(--line); } .proof__left { padding: 36px 38px; border-right: 1px solid var(--line); } .proof__right { padding: 36px 38px; background: var(--bg-soft); } .proof__list { display: grid; gap: 0; margin-top: 22px; } .proof__item { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); } .proof__item:first-child { border-top: 0; padding-top: 0; } .proof__item svg { width: 22px; height: 22px; color: var(--orange); margin-top: 2px; } .proof__item h4 { margin-bottom: 4px; } .proof__item p { font-size: var(--t-small); color: var(--ink-2); } .norms { display: grid; gap: 9px; margin-top: 18px; } .norm { display: flex; gap: 12px; align-items: baseline; font-size: var(--t-small); padding: 10px 14px; background: #fff; border: 1px solid var(--line); } .norm b { font-weight: 700; white-space: nowrap; font-size: 12.5px; } .norm span { color: var(--ink-2); font-size: 12.5px; } /* ═══ Г-6 команда ═══ */ .team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); } .team__cell { padding: 26px 22px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .team__cell:last-child { border-right: 0; } .team__role { font-size: 15px; font-weight: 700; } .team__what { font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; } .team__num { font-size: 26px; font-weight: 800; color: var(--orange); letter-spacing: -.02em; line-height: 1; } .team__bar { height: 3px; background: var(--orange); width: 34px; } /* ═══ Г-7 цифры ═══ */ .figures { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); } .figure { padding: 26px 20px 28px; border-right: 1px solid var(--line); background: #fff; } .figure:last-child { border-right: 0; } .figure__v { font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; } .figure__l { margin-top: 9px; font-size: var(--t-micro); color: var(--ink-3); line-height: 1.45; } .figure--accent { background: var(--orange); } .figure--accent .figure__v { color: #fff; } .figure--accent .figure__l { color: rgba(255,255,255,.9); } /* ═══ точки входа ═══ */ .entries { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .entry { padding: 22px 20px 24px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange); display: flex; flex-direction: column; gap: 10px; } .entry__when { font-size: 14.5px; font-weight: 700; line-height: 1.3; } .entry__do { font-size: var(--t-micro); color: var(--ink-2); line-height: 1.5; } .entry__in { margin-top: auto; padding-top: 12px; font-size: 11.5px; font-weight: 600; color: var(--orange-700); text-transform: uppercase; letter-spacing: .04em; } /* ═══ клиенты ═══ */ .client:hover span { color: var(--graphite); } /* ═══ призыв ═══ */ .cta-band { position: relative; overflow: hidden; } .cta-band__media { position: absolute; inset: 0; } .cta-band__media img { width: 100%; height: 100%; object-fit: cover; } /* тот же приём, что на первом экране: равномерная вуаль под этот кадр. Склад светлый — по замеру зоны текста нужно 36%, бокового градиента нет */ .cta-band__media::after { content: ""; position: absolute; inset: 0; background: rgba(10,13,15,.42); } .cta-band__body { position: relative; z-index: 2; padding: clamp(36px, 4vw, 60px); color: #fff; max-width: 700px; } .cta-band__body p { margin-top: 12px; color: rgba(255,255,255,.94); text-shadow: 0 1px 12px rgba(0,0,0,.5); } .cta-band__row { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .cta-band__row span { color: rgba(255,255,255,.88); text-shadow: 0 1px 10px rgba(0,0,0,.5); } /* ═══ объекты ═══ */ /* ═══ вопросы ═══ */ .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: start; } .faq__col { border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { width: 100%; background: none; border: 0; padding: 20px 46px 20px 0; text-align: left; cursor: pointer; position: relative; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.4; font-family: inherit; } .faq__q::before, .faq__q::after { content: ""; position: absolute; right: 6px; top: 50%; background: var(--orange); transition: transform .22s, opacity .22s; } .faq__q::before { width: 15px; height: 2px; margin-top: -1px; } .faq__q::after { width: 2px; height: 15px; margin-top: -7.5px; right: 12.5px; } .faq__item.is-open .faq__q::after { transform: rotate(90deg); opacity: 0; } .faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq__a > div { padding: 0 34px 22px 0; color: var(--ink-2); font-size: var(--t-small); } .faq__a p + p { margin-top: 10px; } /* ═══ контакты ═══ */ .contacts { display: grid; grid-template-columns: 1.1fr .9fr; border: 1px solid var(--line); } .contacts__map { position: relative; min-height: 540px; background: var(--bg-soft); } .contacts__map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.92) brightness(1.03); } .contacts__card { position: absolute; left: 28px; bottom: 28px; width: 314px; padding: 24px; background: #fff; box-shadow: var(--shadow); } .contacts__card dt { font-size: 11px; color: var(--ink-3); margin-top: 15px; letter-spacing: .06em; text-transform: uppercase; } .contacts__card dt:first-child { margin-top: 0; } .contacts__card dd { margin: 4px 0 0; font-size: 14.5px; font-weight: 500; } .contacts__form { padding: clamp(28px, 3vw, 44px); background: #fff; } .field { display: flex; flex-direction: column; gap: 6px; margin-top: 15px; } .field label { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; } .field input, .field textarea { height: 48px; padding: 0 15px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: 14.5px; color: var(--ink); background: #fff; transition: border-color .16s; } .field textarea { height: auto; min-height: 88px; padding: 13px 15px; resize: vertical; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--graphite); } .field input::placeholder, .field textarea::placeholder { color: #b0b8bb; } .agree { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; } .agree input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; accent-color: var(--orange); } .form-ok { display: none; padding: 16px; background: var(--orange-soft); border: 1px solid rgba(239,127,26,.3); font-size: var(--t-small); } form.is-sent .form-ok { display: block; } form.is-sent .form-body { display: none; } /* ═══ SEO и подвал ═══ */ .seo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; color: var(--ink-3); font-size: var(--t-small); line-height: 1.7; } .seo p { margin: 0; } .seo .micro { grid-column: 1 / -1; margin-top: 16px; } .footer { background: var(--graphite-900); color: rgba(255,255,255,.66); padding: 36px 0 0; position: relative; } .footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1.3fr; gap: 28px; padding-bottom: 26px; } .footer__col-title { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 11px; font-weight: 700; } .footer__links { display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.35; } .footer__links a:hover { color: #fff; } .footer__logo img { height: 32px; width: auto; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 14px 0 18px; display: flex; justify-content: space-between; gap: 24px; font-size: 11.5px; flex-wrap: wrap; } /* ═══ адаптив ═══ */ @media (max-width: 1360px) { .route__head, .route__row { grid-template-columns: 190px repeat(7, 1fr); } .configs { grid-template-columns: repeat(3, 1fr); } .config:nth-child(3) { border-right: 0; } .config:nth-child(n+4) { border-top: 1px solid var(--line); } .entries { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1180px) { .letters { grid-template-columns: repeat(3, 1fr); } .team { grid-template-columns: repeat(2, 1fr); } .team__cell:nth-child(2n) { border-right: 0; } .team__cell:nth-child(n+3) { border-top: 1px solid var(--line); } .figures { grid-template-columns: repeat(3, 1fr); } .figure:nth-child(3n) { border-right: 0; } .figure:nth-child(n+4) { border-top: 1px solid var(--line); } .footer__grid { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 1024px) { .contacts, .faq { grid-template-columns: 1fr; } .usp__row { grid-template-columns: repeat(2, 1fr); } .usp__item { border-right: 1px solid rgba(255,255,255,.15) !important; padding: 18px 18px 22px !important; } .proof__left { border-right: 0; border-bottom: 1px solid var(--line); } .seo { grid-template-columns: 1fr; gap: 12px; } .menu { display: none; } .route { overflow-x: auto; } .route__head, .route__row { min-width: 1060px; } } /* ═══ Г-2 · раскрытие работ по этапу (приём Severin) ═══ */ .route__stage[data-stage] { cursor: pointer; transition: background .16s; } .route__stage[data-stage]:hover { background: #eef1f2; } .route__stage--key[data-stage]:hover { background: #fbe9d9; } .route__stage.is-picked { background: #fceadb; border-top-color: var(--orange); } .route__stage.is-picked .route__stage-t { color: var(--ink); font-weight: 700; } /* подсветка строки услуги — из матрицы и из блока услуг */ .route__row.is-lit { background: #fff8f2; } .route__row.is-lit .route__svc-name { color: var(--orange-700); } .route__row.is-dim { opacity: .34; } .route__invite { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); } .route__invite-i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: rgba(239,127,26,.14); position: relative; } .route__invite-i::after { content: ""; position: absolute; left: 6px; top: 6px; width: 6px; height: 6px; border-right: 1.6px solid var(--orange); border-bottom: 1.6px solid var(--orange); transform: rotate(45deg); } /* панель выезжает поверх легенды: страница под ней не должна прыгать */ .route-zone { position: relative; } .works { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; border: 1px solid var(--line); background: #fff; box-shadow: 0 18px 44px rgba(16,19,22,.16); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .works.is-open { opacity: 1; visibility: visible; transform: none; } .works__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .works__num { font-size: 30px; font-weight: 800; color: var(--orange); line-height: 1; letter-spacing: -.02em; } .works__title { font-size: 20px; } .works__hint { font-size: 12px; color: var(--ink-3); } .works__list { display: grid; grid-template-columns: repeat(4, 1fr); } .works__col { padding: 18px 22px 22px; border-right: 1px solid var(--line); } .works__col:last-child { border-right: 0; } .works__col.is-empty { background: #fbfcfc; } .works__svc { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; display: flex; align-items: center; gap: 7px; } .works__svc::before { content: ""; width: 10px; height: 10px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); flex: 0 0 10px; } .works__col.is-empty .works__svc { color: var(--ink-3); } .works__col.is-empty .works__svc::before { background: #cfd5d7; } .works__items { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .works__items li { font-size: 13px; color: var(--ink-2); line-height: 1.45; padding-left: 14px; position: relative; } .works__items li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1.5px; background: var(--orange); } .works__none { font-size: 12.5px; color: var(--ink-3); font-style: italic; } /* ═══ Г-3 · мини-шкала этапов в карточке услуги ═══ */ /* ═══ Г-9 · логотипы клиентов и отзыв цитатой (приём Severin) ═══ */ /* 82,5% — самая важная цифра блока: набрана как заголовок, а не подписью. Своих стилей у неё не было вовсе, показывалась дефолтным . */ .trust-fig { display: flex; align-items: baseline; gap: 16px; } .trust-fig b { font-size: clamp(38px, 3.5vw, 56px); font-weight: 800; letter-spacing: -.03em; color: var(--orange); line-height: .95; white-space: nowrap; } .trust-fig b i { font-style: normal; font-size: .6em; margin-left: 1px; } .trust-fig span { font-size: 15px; line-height: 1.4; color: var(--ink-2); max-width: 21ch; } /* Логотипы без рамок и разделителей, как на rdcompany.ru: сетка шире, знаки мельче — так их помещается больше. */ .clients { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 0; margin-top: 28px; } .client { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 8px 12px; } .client img { max-width: 118px; max-height: 58px; width: auto; height: auto; object-fit: contain; transition: transform .22s; } .client:hover img { transform: scale(1.06); } /* первый знак в ряду прижат к той же линии, что и блок отзыва выше */ .client:nth-child(7n+1) { justify-content: flex-start; padding-left: 0; } .client:nth-child(7n) { justify-content: flex-end; padding-right: 0; } /* отзыв — часть той же рамки, не отдельная тёмная плашка */ @media (max-width: 1100px) { .clients { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 620px) { .clients { grid-template-columns: repeat(3, 1fr); } } /* ═══ Г-14 · карта объектов и контакты ═══ */ .geo { display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: stretch; } .geo__side { display: flex; flex-direction: column; gap: 20px; } .geo__card { background: #fff; border: 1px solid var(--line); padding: 24px; } .geo__card dt { font-size: 11px; color: var(--ink-3); margin-top: 15px; letter-spacing: .06em; text-transform: uppercase; } .geo__card dt:first-child { margin-top: 0; } .geo__card dd { margin: 4px 0 0; font-size: 14.5px; font-weight: 500; } .geo__form { background: #fff; border: 1px solid var(--line); padding: 26px; flex: 1; } @media (max-width: 1180px) { .geo { grid-template-columns: 1fr; } } /* Список объектов по городам под картой: наведение подсвечивает точку на карте */ /* Г-12: цифры из документов рядом с письмами — их читают те, кто не будет открывать сканы */ .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 26px; } .fact { background: #fff; padding: 20px 22px 22px; position: relative; } .fact::before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0; border-left: 12px solid var(--orange); border-bottom: 12px solid transparent; } .fact__n { font-size: clamp(19px, 1.5vw, 25px); font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.1; } .fact__t { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); } .fact__t b { color: var(--ink); font-weight: 700; } @media (max-width: 980px) { .facts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .facts { grid-template-columns: 1fr; } } /* ═══ Первый экран: слайдер объектов с миниатюрами (вариант 3) ═══ */ .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; } .hero__media img.is-on { opacity: 1; } .hero__caption { position: absolute; left: 0; bottom: 42px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 0; } .hero__caption i { width: 11px; height: 11px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); flex: 0 0 11px; } .hero__caption b { font-size: 13.5px; font-weight: 700; color: #fff; } .hero__caption span { font-size: 11.5px; color: rgba(255,255,255,.62); } .hero__thumbs { position: absolute; right: 40px; bottom: 42px; z-index: 3; display: flex; gap: 10px; } .hero__thumb { width: 118px; border: 0; padding: 0; background: none; cursor: pointer; opacity: .5; transition: opacity .2s; text-align: left; } .hero__thumb img { width: 118px; height: 66px; object-fit: cover; display: block; border: 2px solid transparent; transition: border-color .2s; } .hero__thumb span { display: block; margin-top: 5px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero__thumb.is-on { opacity: 1; } .hero__thumb.is-on img { border-color: var(--orange); } .hero__thumb:hover { opacity: .85; } @media (max-width: 1100px) { .hero__thumbs { display: none; } .hero__caption { bottom: 34px; } } /* ═══ Г-3: состав работ вместо трёх общих фраз ═══ */ @media (max-width: 880px) { } /* ═══ Г-14: карта регионов работы ═══ Три уровня насыщенности: базовые регионы, регионы оказания услуг (ЮФО, ЦФО, СКФО, ПФО) и точки реализованных объектов — они мельче меток городов с офисами, чтобы одно не спорило с другим. */ .geo__map { position: relative; background: #fff; border: 1px solid var(--line); padding: 20px 22px 16px; display: flex; flex-direction: column; } .rf-map { width: 100%; height: auto; display: block; } .geo__sum { position: absolute; left: 24px; top: 22px; z-index: 2; display: flex; gap: 26px; padding: 14px 20px; background: rgba(255,255,255,.94); border: 1px solid var(--line); } .geo__sum-i { display: flex; align-items: baseline; gap: 9px; } .geo__sum-i b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--orange); } .geo__sum-i span { font-size: 11.5px; line-height: 1.35; color: var(--ink-2); } @media (max-width: 900px) { .geo__sum { position: static; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 14px; } } /* Четыре ступени присутствия: чем плотнее тон, тем больше нас в регионе. Между ступенями держим заметный разрыв по светлоте, иначе на глаз соседние уровни сливаются. */ .reg--world path { fill: #e7ebec; stroke: #fff; stroke-width: .6; } .reg path { fill: #f1f4f5; stroke: #fff; stroke-width: .7; stroke-linejoin: round; transition: fill .18s; } .reg--srv path { fill: #fdeeda; stroke: #fff; stroke-width: .7; } .reg--srv:hover path { fill: #fadcb8; } .reg--obj path { fill: #f8c48a; stroke: #fff; stroke-width: .8; } .reg--obj:hover path { fill: #f5b26a; } .reg--base path { fill: #f2913c; stroke: #fff; stroke-width: .9; } .reg--base:hover path { fill: var(--orange); } .pin__core { fill: var(--graphite-900); } .pin__halo { fill: var(--orange); opacity: .2; } .pin__t { font: 700 13px "Montserrat", sans-serif; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3.8px; stroke-linejoin: round; pointer-events: none; } /* реализованные объекты — намеренно мельче городов с офисами */ .site circle { fill: #8d3f08; stroke: #fff; stroke-width: .9; } .site:hover circle { fill: var(--graphite-900); } .site--far circle { fill: var(--orange); } .site__halo { fill: var(--orange); stroke: none; opacity: .28; animation: pulse 2.8s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: .2; } 50% { opacity: .46; } } .inset__box { fill: #fff; stroke: var(--line); stroke-width: 1; } .inset__t { font: 700 12.5px "Montserrat", sans-serif; fill: var(--ink); } .inset__s { font: 500 10.5px "Montserrat", sans-serif; fill: var(--ink-3); } .inset__c { font: 700 10.5px "Montserrat", sans-serif; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; } .inset__n { font: 600 10.5px "Montserrat", sans-serif; fill: var(--ink-2); } .geo__legend { display: flex; gap: 18px 24px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 16px; font-size: 12.5px; color: var(--ink-2); } .geo__legend span { display: inline-flex; align-items: center; } .geo__i { display: inline-block; width: 15px; height: 11px; margin-right: 8px; background: #fde8d2; border: 1px solid #f1d3b3; } .geo__i--big { background: #f2913c; border-color: #dd8130; } .geo__i--obj { background: #f8c48a; border-color: #eeb173; } .geo__i--dot { width: 9px; height: 9px; border-radius: 50%; background: #8d3f08; border: 0; margin-right: 8px; } .geo__i--pin { width: 12px; height: 12px; border-radius: 50%; background: var(--graphite-900); border: 0; box-shadow: 0 0 0 4px rgba(239,127,26,.22); margin-right: 10px; } /* ═══ Г-3: услуги плитками — виньетка, как на первом экране ═══ Кадр чистый в верхней трети и плавно уходит в плотное к низу, где лежит текст. Величина своя у каждого снимка: деловому центру хватает 68%, контейнерам 70%, 3D 82%, а белому чертежу нужно 92% — на нём белые буквы держатся только так. Числа посчитаны по 95-му процентилю яркости в текстовой зоне, скрипт — ЧЕРНОВИКИ/скрипты/vign_svc.py */ .svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); border: 1px solid var(--line); } .svc { position: relative; min-height: 384px; display: flex; align-items: flex-end; overflow: hidden; background: var(--graphite-900); text-decoration: none; } .svc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: .84; transition: transform .5s ease, opacity .3s; } .svc:hover .svc__bg { transform: scale(1.045); opacity: .94; } .svc::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,17,20,.20) 0%, rgba(14,17,20,.02) 28%, rgba(14,17,20,0) 50%, rgba(14,17,20,.08) 100%); } /* подложка идёт по самому тексту, а не по всему кадру: снимок остаётся светлым, а список работ лежит на плотном и читается на любом фоне */ .svc__in { position: relative; z-index: 2; width: 100%; padding: 66px 30px 30px; color: #fff; background: linear-gradient(180deg, rgba(14,17,20,0) 0%, rgba(14,17,20,.40) 34%, rgba(14,17,20,.58) 64%, rgba(14,17,20,.66) 100%); } .svc__n { font-size: 12.5px; font-weight: 800; letter-spacing: .17em; color: var(--orange); text-shadow: 0 1px 12px rgba(0,0,0,.8); } .svc__t { text-shadow: 0 2px 16px rgba(0,0,0,.85); margin: 11px 0 15px; font-size: clamp(26px, 2.15vw, 34px); font-weight: 700; line-height: 1.12; letter-spacing: -.016em; color: #fff; } .svc__l { margin: 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.22); } .svc__l li { position: relative; padding: 0 0 8px 19px; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.94); text-shadow: 0 1px 12px rgba(0,0,0,.8); } .svc__l li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .svc__go { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; font-size: 14.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.8); } .svc__go::after { content: ""; width: 11px; height: 11px; background: var(--orange); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .2s; } .svc:hover .svc__go::after { transform: translateX(4px); } .svc__cap { position: absolute; right: 18px; top: 16px; z-index: 2; max-width: 52%; text-align: right; padding: 5px 10px; background: rgba(14,17,20,.44); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.88); } @media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } .svc { min-height: 320px; } } @media (max-width: 560px) { .svc__in { padding: 22px 20px 24px; } .svc__cap { position: static; text-align: left; max-width: none; padding: 0 20px; } } /* ═══ Г-8: цифры поверх кадра изнутри объекта ═══ Плотность лежала на .band__in, а он шириной с контейнер — отсюда были вертикальные обрывы слева и справа. Теперь затемнение идёт отдельным слоем во всю ширину блока и гаснет к краям кадра. */ .band { position: relative; margin-top: 30px; min-height: 420px; display: flex; align-items: center; background: var(--graphite-900); overflow: hidden; } .band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; } .band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,20,.34) 0%, rgba(14,17,20,.1) 24%, rgba(14,17,20,.12) 72%, rgba(14,17,20,.34) 100%), radial-gradient(120% 100% at 50% 50%, rgba(14,17,20,.72) 0%, rgba(14,17,20,.62) 42%, rgba(14,17,20,.38) 74%, rgba(14,17,20,.22) 100%); } .band__cap { position: absolute; left: 50%; bottom: 0; z-index: 3; transform: translateX(-50%); width: min(1300px, calc(100% - 48px)); padding: 11px 0; font-size: 12px; color: rgba(255,255,255,.78); } .band__in { position: relative; z-index: 2; padding: 54px 0 62px; } .band__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--orange); } .band__eyebrow::before { content: ""; width: 13px; height: 13px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .band__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 26px; margin-top: 30px; } .fig__i { width: 34px; height: 34px; --ic: rgba(255,255,255,.72); } .fig__v { margin-top: 12px; font-size: clamp(25px, 2.1vw, 34px); font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.05; text-shadow: 0 2px 16px rgba(0,0,0,.5); } .fig__l { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.86); text-shadow: 0 1px 10px rgba(0,0,0,.55); } .fig:last-child .fig__v { color: var(--orange); } @media (max-width: 1080px) { .band__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .band__grid { grid-template-columns: repeat(2, 1fr); } } /* ═══ Г-10: объекты — фильтр слева, сетка 4 в ряд ═══ */ .objs { display: grid; grid-template-columns: 236px 1fr; gap: 40px; align-items: start; } .objf { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 96px; } .objf__b { text-align: left; padding: 9px 12px 9px 0; border: 0; background: none; cursor: pointer; font: 500 14px "Montserrat", sans-serif; color: var(--ink-2); line-height: 1.4; transition: color .16s; } .objf__b:hover { color: var(--ink); } .objf__b.is-on { color: var(--orange); font-weight: 700; } .objs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 24px; } .obj { display: flex; flex-direction: column; } .obj.is-hidden { display: none; } .obj__photo { aspect-ratio: 4 / 3; overflow: hidden; background: #eef1f2; } .obj__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .obj:hover .obj__photo img { transform: scale(1.04); } .obj__t { margin: 14px 0 7px; font-size: 15.5px; line-height: 1.32; font-weight: 700; letter-spacing: -.005em; } .obj__a { font-size: 13px; line-height: 1.45; color: var(--ink-2); } .obj__meta { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-2); } .obj__meta b { font-weight: 700; color: var(--ink); } .obj__kind { margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--ink); } .objs__more { margin-top: 34px; text-align: center; } @media (max-width: 1180px) { .objs__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .objs { grid-template-columns: 1fr; gap: 20px; } .objf { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; } .objs__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .objs__grid { grid-template-columns: 1fr; } } /* ═══ Г-9: отзыв — прямая речь крупно, письмо-источник рядом ═══ Прежде цитата читалась как подпись к логотипу: мелкий кегль, длинные строки, скан размером с иконку. Теперь письмо занимает левую треть, цитата набрана крупно узкой колонкой, а свободное поле справа заняли миниатюры остальных писем — они же и переключатели. */ .revs { display: grid; grid-template-columns: 1fr 300px; background: #fff; border: 1px solid var(--line); } .revs__stage { position: relative; min-width: 0; } .rev { display: none; grid-template-columns: 330px 1fr; height: 100%; } .rev.is-on { display: grid; } .rev__scan { position: relative; display: block; overflow: hidden; background: #eef0f1; border-right: 1px solid var(--line); text-decoration: none; } .rev__scan img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .rev__zoom { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 16px; background: rgba(20,23,25,.8); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; opacity: 0; transition: opacity .2s; } .rev__scan:hover .rev__zoom { opacity: 1; } .rev__body { padding: 44px 44px 36px; display: flex; flex-direction: column; } .rev__q { position: relative; margin: 0; padding-left: 44px; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.45; letter-spacing: -.012em; color: var(--ink); max-width: 42ch; } .rev__q::before { content: "\00AB"; position: absolute; left: 0; top: -8px; font-size: 62px; line-height: 1; color: var(--orange); font-weight: 700; } .rev__q::after { content: "\00BB"; color: var(--orange); font-weight: 700; } .rev__who { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding-left: 44px; } .rev__logo { width: 110px; height: auto; display: block; } .rev__brand { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; } .rev__who b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); } .rev__who span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); } .rev__meta { margin-top: auto; padding: 22px 0 0 44px; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; } .rev__obj { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .rev__obj i { width: 9px; height: 9px; flex: 0 0 9px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .rev__num { font-size: 12.5px; color: var(--ink-3); } /* Письма ровной сеткой 3 × 3. Прежняя раскладка 2 × 3 читалась грубо: клетки разной высоты и жирная оранжевая подпись. Клетки выровнены, подпись спокойная, активное письмо отмечено тонкой рамкой. */ .revs__nav { border-left: 1px solid var(--line); background: #fff; padding: 14px; } .revs__ths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-content: start; } .rev__th { position: relative; display: block; padding: 0; border: 1px solid var(--line); background: #fff; cursor: pointer; overflow: hidden; aspect-ratio: 3 / 4; } .rev__th img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(.9); opacity: .55; transition: opacity .2s, filter .2s; } .rev__th span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 5px; background: rgba(255,255,255,.94); color: var(--ink-2); font-size: 8.5px; line-height: 1.2; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rev__th:hover img { opacity: .86; } .rev__th.is-on { border-color: var(--orange); } .rev__th.is-on img { filter: none; opacity: 1; } .rev__th.is-on span { color: var(--ink); } @media (max-width: 1080px) { .band__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .band__grid { grid-template-columns: repeat(2, 1fr); } } /* ═══ Г-10: объекты — фильтр слева, сетка 4 в ряд ═══ */ .objs { display: grid; grid-template-columns: 236px 1fr; gap: 40px; align-items: start; } .objf { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 96px; } .objf__b { text-align: left; padding: 9px 12px 9px 0; border: 0; background: none; cursor: pointer; font: 500 14px "Montserrat", sans-serif; color: var(--ink-2); line-height: 1.4; transition: color .16s; } .objf__b:hover { color: var(--ink); } .objf__b.is-on { color: var(--orange); font-weight: 700; } .objs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 24px; } .obj { display: flex; flex-direction: column; } .obj.is-hidden { display: none; } .obj__photo { aspect-ratio: 4 / 3; overflow: hidden; background: #eef1f2; } .obj__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .obj:hover .obj__photo img { transform: scale(1.04); } .obj__t { margin: 14px 0 7px; font-size: 15.5px; line-height: 1.32; font-weight: 700; letter-spacing: -.005em; } .obj__a { font-size: 13px; line-height: 1.45; color: var(--ink-2); } .obj__meta { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-2); } .obj__meta b { font-weight: 700; color: var(--ink); } .obj__kind { margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--ink); } .objs__more { margin-top: 34px; text-align: center; } @media (max-width: 1180px) { .objs__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .objs { grid-template-columns: 1fr; gap: 20px; } .objf { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; } .objs__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .objs__grid { grid-template-columns: 1fr; } } /* ═══ Г-9: отзыв — прямая речь крупно, письмо-источник рядом ═══ Прежде цитата читалась как подпись к логотипу: мелкий кегль, длинные строки, скан размером с иконку. Теперь письмо занимает левую треть, цитата набрана крупно узкой колонкой, а свободное поле справа заняли миниатюры остальных писем — они же и переключатели. */ .revs { display: grid; grid-template-columns: 1fr 300px; background: #fff; border: 1px solid var(--line); } .revs__stage { position: relative; min-width: 0; } .rev { display: none; grid-template-columns: 330px 1fr; height: 100%; } .rev.is-on { display: grid; } .rev__scan { position: relative; display: block; overflow: hidden; background: #eef0f1; border-right: 1px solid var(--line); text-decoration: none; } .rev__scan img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .rev__zoom { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 16px; background: rgba(20,23,25,.8); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; opacity: 0; transition: opacity .2s; } .rev__scan:hover .rev__zoom { opacity: 1; } .rev__body { padding: 44px 44px 36px; display: flex; flex-direction: column; } .rev__q { position: relative; margin: 0; padding-left: 44px; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.45; letter-spacing: -.012em; color: var(--ink); max-width: 42ch; } .rev__q::before { content: "\00AB"; position: absolute; left: 0; top: -8px; font-size: 62px; line-height: 1; color: var(--orange); font-weight: 700; } .rev__q::after { content: "\00BB"; color: var(--orange); font-weight: 700; } .rev__who { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding-left: 44px; } .rev__logo { width: 110px; height: auto; display: block; } .rev__brand { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; } .rev__who b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); } .rev__who span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); } .rev__meta { margin-top: auto; padding: 22px 0 0 44px; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; } .rev__obj { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .rev__obj i { width: 9px; height: 9px; flex: 0 0 9px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .rev__num { font-size: 12.5px; color: var(--ink-3); } @media (max-width: 1080px) { .band__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .band__grid { grid-template-columns: repeat(2, 1fr); } } /* ═══ Г-10: объекты — фильтр слева, сетка 4 в ряд ═══ */ .objs { display: grid; grid-template-columns: 236px 1fr; gap: 40px; align-items: start; } .objf { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 96px; } .objf__b { text-align: left; padding: 9px 12px 9px 0; border: 0; background: none; cursor: pointer; font: 500 14px "Montserrat", sans-serif; color: var(--ink-2); line-height: 1.4; transition: color .16s; } .objf__b:hover { color: var(--ink); } .objf__b.is-on { color: var(--orange); font-weight: 700; } .objs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 24px; } .obj { display: flex; flex-direction: column; } .obj.is-hidden { display: none; } .obj__photo { aspect-ratio: 4 / 3; overflow: hidden; background: #eef1f2; } .obj__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .obj:hover .obj__photo img { transform: scale(1.04); } .obj__t { margin: 14px 0 7px; font-size: 15.5px; line-height: 1.32; font-weight: 700; letter-spacing: -.005em; } .obj__a { font-size: 13px; line-height: 1.45; color: var(--ink-2); } .obj__meta { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-2); } .obj__meta b { font-weight: 700; color: var(--ink); } .obj__kind { margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--ink); } .objs__more { margin-top: 34px; text-align: center; } @media (max-width: 1180px) { .objs__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .objs { grid-template-columns: 1fr; gap: 20px; } .objf { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; } .objs__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .objs__grid { grid-template-columns: 1fr; } } /* ═══ Г-9: отзыв — прямая речь крупно, письмо-источник рядом ═══ Прежде цитата читалась как подпись к логотипу: мелкий кегль, длинные строки, скан размером с иконку. Теперь письмо занимает левую треть, цитата набрана крупно узкой колонкой, а свободное поле справа заняли миниатюры остальных писем — они же и переключатели. */ .revs { display: grid; grid-template-columns: 1fr 300px; background: #fff; border: 1px solid var(--line); } .revs__stage { position: relative; min-width: 0; } .rev { display: none; grid-template-columns: 330px 1fr; height: 100%; } .rev.is-on { display: grid; } .rev__scan { position: relative; display: block; overflow: hidden; background: #eef0f1; border-right: 1px solid var(--line); text-decoration: none; } .rev__scan img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .rev__zoom { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 16px; background: rgba(20,23,25,.8); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; opacity: 0; transition: opacity .2s; } .rev__scan:hover .rev__zoom { opacity: 1; } .rev__body { padding: 44px 44px 36px; display: flex; flex-direction: column; } .rev__q { position: relative; margin: 0; padding-left: 44px; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.45; letter-spacing: -.012em; color: var(--ink); max-width: 42ch; } .rev__q::before { content: "\00AB"; position: absolute; left: 0; top: -8px; font-size: 62px; line-height: 1; color: var(--orange); font-weight: 700; } .rev__q::after { content: "\00BB"; color: var(--orange); font-weight: 700; } .rev__who { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding-left: 44px; } .rev__logo { width: 110px; height: auto; display: block; } .rev__brand { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; } .rev__who b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); } .rev__who span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); } .rev__meta { margin-top: auto; padding: 22px 0 0 44px; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; } .rev__obj { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .rev__obj i { width: 9px; height: 9px; flex: 0 0 9px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .rev__num { font-size: 12.5px; color: var(--ink-3); } /* Письма ровной сеткой 3 × 3. Прежняя раскладка 2 × 3 читалась грубо: клетки разной высоты и жирная оранжевая подпись. Клетки выровнены, подпись спокойная, активное письмо отмечено тонкой рамкой. */ .revs__nav { border-left: 1px solid var(--line); background: #fff; padding: 14px; } .revs__ths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; align-content: start; } .rev__th { position: relative; display: block; padding: 0; border: 1px solid var(--line); background: #fff; cursor: pointer; overflow: hidden; aspect-ratio: 3 / 4; } .rev__th img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(.9); opacity: .55; transition: opacity .2s, filter .2s; } .rev__th span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 5px; background: rgba(255,255,255,.94); color: var(--ink-2); font-size: 8.5px; line-height: 1.2; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rev__th:hover img { opacity: .86; } .rev__th.is-on { border-color: var(--orange); } .rev__th.is-on img { filter: none; opacity: 1; } .rev__th.is-on span { color: var(--ink); } @media (max-width: 1080px) { .band__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .band__grid { grid-template-columns: repeat(2, 1fr); } } /* ═══ Г-10: объекты — фильтр слева, сетка 4 в ряд ═══ */ .objs { display: grid; grid-template-columns: 236px 1fr; gap: 40px; align-items: start; } .objf { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 96px; } .objf__b { text-align: left; padding: 9px 12px 9px 0; border: 0; background: none; cursor: pointer; font: 500 14px "Montserrat", sans-serif; color: var(--ink-2); line-height: 1.4; transition: color .16s; } .objf__b:hover { color: var(--ink); } .objf__b.is-on { color: var(--orange); font-weight: 700; } .objs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 24px; } .obj { display: flex; flex-direction: column; } .obj.is-hidden { display: none; } .obj__photo { aspect-ratio: 4 / 3; overflow: hidden; background: #eef1f2; } .obj__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .obj:hover .obj__photo img { transform: scale(1.04); } .obj__t { margin: 14px 0 7px; font-size: 15.5px; line-height: 1.32; font-weight: 700; letter-spacing: -.005em; } .obj__a { font-size: 13px; line-height: 1.45; color: var(--ink-2); } .obj__meta { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ink-2); } .obj__meta b { font-weight: 700; color: var(--ink); } .obj__kind { margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--ink); } .objs__more { margin-top: 34px; text-align: center; } @media (max-width: 1180px) { .objs__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .objs { grid-template-columns: 1fr; gap: 20px; } .objf { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; } .objs__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .objs__grid { grid-template-columns: 1fr; } } /* ═══ Г-9: отзыв — прямая речь крупно, письмо-источник рядом ═══ Прежде цитата читалась как подпись к логотипу: мелкий кегль, длинные строки, скан размером с иконку. Теперь письмо занимает левую треть, цитата набрана крупно узкой колонкой, а свободное поле справа заняли миниатюры остальных писем — они же и переключатели. */ .revs { display: grid; grid-template-columns: 1fr 300px; background: #fff; border: 1px solid var(--line); } .revs__stage { position: relative; min-width: 0; } .rev { display: none; grid-template-columns: 330px 1fr; height: 100%; } .rev.is-on { display: grid; } .rev__scan { position: relative; display: block; overflow: hidden; background: #eef0f1; border-right: 1px solid var(--line); text-decoration: none; } .rev__scan img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .rev__zoom { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 16px; background: rgba(20,23,25,.8); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; opacity: 0; transition: opacity .2s; } .rev__scan:hover .rev__zoom { opacity: 1; } .rev__body { padding: 44px 44px 36px; display: flex; flex-direction: column; } .rev__q { position: relative; margin: 0; padding-left: 44px; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.45; letter-spacing: -.012em; color: var(--ink); max-width: 42ch; } .rev__q::before { content: "\00AB"; position: absolute; left: 0; top: -8px; font-size: 62px; line-height: 1; color: var(--orange); font-weight: 700; } .rev__q::after { content: "\00BB"; color: var(--orange); font-weight: 700; } .rev__who { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding-left: 44px; } .rev__logo { width: 110px; height: auto; display: block; } .rev__brand { font-size: 14px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; } .rev__who b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); } .rev__who span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); } .rev__meta { margin-top: auto; padding: 22px 0 0 44px; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; } .rev__obj { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); } .rev__obj i { width: 9px; height: 9px; flex: 0 0 9px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .rev__num { font-size: 12.5px; color: var(--ink-3); } /* колонка справа: миниатюры самих писем — видно, что их много, и это переключатели */ .revs__nav { border-left: 1px solid var(--line); background: var(--bg-soft); display: flex; flex-direction: column; } .revs__nav-t { padding: 14px 16px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); } /* Миниатюры тянутся на всю высоту колонки — вровень с письмом слева. Раньше высоту задавало aspect-ratio 3/4, и сетка обрывалась выше письма, оставляя под собой пустое поле. Теперь три ряда делят высоту поровну, а сам скан показывается по верхней кромке — там шапка с логотипом. */ .revs__nav { display: flex; flex-direction: column; } .revs__ths { flex: 1; grid-template-rows: repeat(3, 1fr); align-content: stretch; } .rev__th { aspect-ratio: auto; height: 100%; min-height: 0; } @media (max-width: 1080px) { .revs { grid-template-columns: 1fr; } .rev { grid-template-columns: 1fr; } .rev__scan { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); } .rev__body { padding: 30px 24px 28px; } .rev__q, .rev__who, .rev__meta { padding-left: 34px; } .revs__nav { border-left: 0; border-top: 1px solid var(--line); } .revs__ths { grid-template-columns: repeat(5, 1fr); grid-template-rows: none; } .rev__th { min-height: 92px; height: auto; aspect-ratio: 3 / 4; } } /* Форма занимала больше места, чем карта, и задавала высоту всему блоку. Поля стали ниже, отступы меньше — смысл и порядок полей не тронуты. */ .geo__card { padding: 20px 22px; } .geo__card dt { margin-top: 12px; font-size: 10.5px; } .geo__card dd { font-size: 14px; } .geo__tel { margin-top: 7px !important; } .geo__tel a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .geo__tel a:hover { color: var(--orange); border-color: currentColor; } .geo__form { padding: 20px 22px; } .geo__form h3 { font-size: 17px; } .geo__form > p { margin-top: 8px; font-size: 13px; line-height: 1.45; } .geo__form label { margin-top: 12px; font-size: 10.5px; } /* Только поля ввода: правило без .field ловило и флажок согласия — он получал высоту 40 px и уезжал вниз относительно своей подписи. */ .geo__form .field input, .geo__form .field textarea { height: 40px; padding: 0 13px; font-size: 14px; } .geo__form textarea { height: 64px; padding: 10px 13px; } .geo__form .btn { height: 46px; margin-top: 14px; } .geo__note { margin-top: 10px; font-size: 12.5px; line-height: 1.45; } .geo__agree { margin-top: 12px; font-size: 12.5px; line-height: 1.4; } /* Колонки блока контактов выравниваются по высоте: карта задаёт её слева, форма дотягивается до низа справа. Раньше правая колонка была длиннее и её низ висел под картой. */ .geo__map { display: flex; flex-direction: column; } .geo__map .rf-map { flex: 1; min-height: 0; } .geo__side { display: flex; flex-direction: column; gap: 20px; } .geo__form { flex: 1; display: flex; flex-direction: column; } .geo__form .form-body { flex: 1; display: flex; flex-direction: column; } .geo__form .form-body > :last-child { margin-top: auto; } /* головной город подразделений — крупнее остальных */ .geo__city { font-size: 17px !important; font-weight: 700 !important; } /* ─── Г-14 · блок контактов ниже на четверть ────────────── Высоту задавала правая колонка: карточка контактов и форма шли стопкой, карта лишь дотягивалась до их низа. Ужимаем правую — и карта садится вместе с ней. Всё только на широком экране: с 1180 px блок и так раскладывается в одну колонку. */ @media (min-width: 1181px) { /* Карта упёрлась в собственную пропорцию: при ширине 880 ниже 890 px она стать не может. Поэтому сужаем её колонку — заодно форме достаётся больше ширины и она тоже садится. */ #kontakty .geo { grid-template-columns: minmax(0, 700px) 1fr; } #kontakty .geo__card { padding: 18px 20px; } #kontakty .geo__card dt { margin-top: 11px; } /* В широкой колонке контакты идут в две полосы: адрес с телефонами слева, почта и подразделения справа. В одну они занимали 400 px высоты и тянули за собой карту. */ #kontakty .geo__card dl { columns: 2; column-gap: 26px; } #kontakty .geo__card dt, #kontakty .geo__card dd { break-inside: avoid; } #kontakty .geo__card dt:first-child { margin-top: 0; } #kontakty .geo__form { padding: 18px 20px; } #kontakty .geo__form .form-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-content: start; } #kontakty .geo__form .form-body > h3, #kontakty .geo__form .form-body > p, #kontakty .geo__form .form-body > .agree, #kontakty .geo__form .form-body > button, #kontakty .geo__form .field:has(textarea), #kontakty .geo__form .field:has([type="email"]) { grid-column: 1 / -1; } #kontakty .geo__form .form-body > p.small { margin-top: 7px !important; font-size: 12.5px; } #kontakty .geo__form textarea { height: 76px; min-height: 0; } #kontakty .geo__form button { margin-top: 14px !important; } #kontakty .geo__form .micro { margin-top: 9px !important; } /* Плашка с цифрами сидела на карте шириной 880; в суженной колонке её три столбца стали по 170 px и текст рвался на три строки. */ #kontakty .geo__sum { left: 20px; right: 20px; top: 18px; gap: 14px; padding: 11px 14px; justify-content: space-between; } #kontakty .geo__sum-i { gap: 7px; } #kontakty .geo__sum-i b { font-size: 21px; } #kontakty .geo__sum-i span { font-size: 10.5px; line-height: 1.3; } #kontakty .geo__legend { gap: 8px 18px; font-size: 12px; } } /* ── page-service.css ── */ /* ═══════════════════════════════════════════════════════════ Страницы услуг · блоки, которых нет на главной Дизайн-система и общие блоки берутся из brand.css и page.css — здесь только то, что появляется впервые: первый экран услуги, направления работы, перечень функций, типы объектов, результат, этапы, соседние услуги, вопросы. ═══════════════════════════════════════════════════════════ */ /* Шапка на странице услуги лежит не на тёмном кадре, а на светлой секции, поэтому белый логотип и меню на ней тонут. Держим её плотной с самого верха, не дожидаясь прокрутки. */ .page-service .header { background: rgba(44,50,53,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.08); } /* ─── У-1 · первый экран ─────────────────────────────────── Не фотография во всю ширину, а светлая секция: текст слева, кадр справа. Так в прототипе, и так правильнее — на странице услуги текста поверх кадра слишком много, никакое затемнение не даёт ему читаемость, не убив при этом сам снимок (замер: нужна вуаль 0,78–1,00). */ .shero { padding: 96px 0 26px; background: var(--bg-soft); } .shero__grid { display: grid; grid-template-columns: 1fr 500px; gap: 40px; align-items: center; } .crumbs { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 12.5px; color: var(--ink-3); } .crumbs a { color: var(--ink-3); border-bottom: 1px solid transparent; } .crumbs a:hover { color: var(--orange); border-bottom-color: currentColor; } .crumbs i { font-style: normal; color: var(--line); } .crumbs span { color: var(--ink); } .shero__t { max-width: 20ch; font-size: clamp(30px, 3.1vw, 46px); font-weight: 700; letter-spacing: -.022em; line-height: 1.1; } .shero__lead { margin-top: 13px; max-width: 58ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); } .shero__facts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 26px; } .shero__facts span { position: relative; padding-left: 17px; font-size: 13.5px; color: var(--ink-2); } .shero__facts span::before { content: ""; position: absolute; left: 0; top: .48em; width: 8px; height: 8px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .shero__cta { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; } .shero__pic { position: relative; margin: 0; } .shero__pic img { width: 100%; height: 360px; object-fit: cover; display: block; } .shero__pic figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 14px; background: rgba(14,17,20,.62); font-size: 11.5px; color: rgba(255,255,255,.9); } /* ─── У-2 · направления работы ─────────────────────────────── */ .page-service .shero + .section { padding-top: 0; } /* секции на страницах услуг короче, чем на главной: блоков много, и при обычном ритме страница расползается пустотой */ .page-service .section { padding: 34px 0; } .page-service .head { margin-bottom: 18px; } .page-service .section h2 { font-size: clamp(23px, 1.85vw, 30px); } .sdirs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); } .sdir { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: #fff; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--ink); } .sdir__i { flex: 0 0 11px; width: 11px; height: 11px; margin-top: 4px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } /* ─── У-4 · смысловой разворот ─────────────────────────────── */ .sturn { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; font-size: 16px; line-height: 1.6; color: var(--ink-2); } .sturn p { margin: 0; } .sturn a { color: var(--ink); border-bottom: 1px solid var(--orange); } .sturn a:hover { color: var(--orange); } /* ─── У-5 · перечень функций ───────────────────────────────── Была сплошная сетка мелких клеток — владелец назвал её недорогой и плохо читаемой. Теперь это отдельные карточки с воздухом между ними, текст крупнее, маркер вынесен наверх. */ .sfun { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; } .sfun__c { display: flex; flex-direction: column; gap: 9px; padding: 15px 17px 17px; background: #fff; border: 1px solid var(--line); transition: border-color .16s, transform .16s; } .sfun__c:hover { border-color: var(--orange); transform: translateY(-2px); } .sfun__i { width: 18px; height: 18px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .sfun__t { font-size: 15.5px; font-weight: 500; line-height: 1.4; color: var(--ink); } .sfun__c:last-child:nth-child(3n+1) { grid-column: span 3; } .sfun__c:last-child:nth-child(3n+2) { grid-column: span 2; } /* ─── У-6 · типы объектов ────────────────────────────────── Пустые плашки с треугольником опыт не показывают. В каждой карточке — наш объект этого назначения и его название: назначение доказывается фотографией, а не словом. */ .stypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); } .stype { position: relative; margin: 0; overflow: hidden; background: var(--graphite-900); } .stype img { width: 100%; height: 236px; object-fit: cover; display: block; transition: transform .5s ease; } .stype:hover img { transform: scale(1.04); } .stype figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 18px 14px; color: #fff; background: linear-gradient(180deg, rgba(14,17,20,0) 0%, rgba(14,17,20,.62) 42%, rgba(14,17,20,.88) 100%); } .stype figcaption b { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-shadow: 0 1px 12px rgba(0,0,0,.6); } .stype figcaption span { display: block; margin-top: 5px; font-size: 12.5px; color: rgba(255,255,255,.82); text-shadow: 0 1px 10px rgba(0,0,0,.6); } /* ─── У-7 · что получает заказчик ────────────────────────── Тоже отдельные карточки, а рядом — пример проекта: так в прототипе, и так обещание сразу подкреплено объектом. */ .sgains-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; } .sgains { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .sgain { padding: 16px 18px 18px; background: #fff; border: 1px solid var(--line); transition: border-color .16s; } .sgain:hover { border-color: var(--orange); } .sgain__t { position: relative; padding-left: 21px; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; } .sgain__t::before { content: ""; position: absolute; left: 0; top: .4em; width: 12px; height: 12px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .sgain__d { margin-top: 7px; padding-left: 21px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .sgains__case { background: #fff; border: 1px solid var(--line); } .sgains__case .obj__photo { aspect-ratio: 4 / 3; overflow: hidden; } .sgains__case .obj__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .sgains__case-in { padding: 13px 16px 16px; } .sgains__case-l { display: inline-block; margin-bottom: 9px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); } /* ─── У-8 · этапы ────────────────────────────────────────── Не три независимые карточки, а последовательность: номера нанизаны на одну линию, между ними видно движение слева направо. */ .ssteps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } .ssteps__line { position: absolute; left: 19px; right: 19px; top: 18px; height: 2px; background: var(--line); } .sstep { position: relative; } .sstep__mark { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--orange); color: #fff; } .sstep__n { font-size: 16px; font-weight: 800; letter-spacing: .02em; color: #fff; } .sstep__body { padding-top: 12px; } .sstep__t { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.3; } .sstep__d { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .sstep-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .sstep-note span { flex: 0 0 11px; width: 11px; height: 11px; margin-top: 4px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } /* ─── У-9 · призыв ─────────────────────────────────────────── */ .scta { padding: 28px 32px 32px; background: #fff; border: 1px solid var(--line); text-align: center; } .scta h2 { font-size: clamp(24px, 2.1vw, 32px); } .scta p { margin: 9px auto 18px; max-width: 64ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); } /* ─── У-10 · объекты ───────────────────────────────────────── */ .sobjs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 18px; } /* ─── У-11 · соседние услуги ─────────────────────────────── Как в прототипе: широкая карточка, слева фотография, справа описание, тезисы и две кнопки. */ .sneighs { display: flex; flex-direction: column; gap: 12px; } .sneigh { display: grid; grid-template-columns: 300px 1fr; gap: 0; background: #fff; border: 1px solid var(--line); overflow: hidden; } .sneigh__pic { overflow: hidden; background: var(--bg-soft); } .sneigh__pic img { width: 100%; height: 100%; min-height: 165px; object-fit: cover; display: block; transition: transform .5s ease; } .sneigh:hover .sneigh__pic img { transform: scale(1.035); } .sneigh__body { padding: 18px 22px 20px; } .sneigh__t { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; } .sneigh__d { margin-top: 10px; max-width: 86ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); } .sneigh__l { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 22px; margin: 12px 0 0; padding: 11px 0 0; list-style: none; border-top: 1px solid var(--line); } .sneigh__l li { position: relative; padding: 0 0 0 18px; font-size: 14px; line-height: 1.4; color: var(--ink-2); } .sneigh__l li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .sneigh__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } /* ─── У-12 · вопросы ───────────────────────────────────────── */ .sfaq { border-top: 1px solid var(--line); } .sfaq .q { border-bottom: 1px solid var(--line); } .sfaq .q__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 20px 0; background: none; border: 0; cursor: pointer; text-align: left; } .sfaq .q__q { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); } .sfaq .q__i { position: relative; flex: 0 0 14px; width: 14px; height: 14px; } .sfaq .q__i::before, .sfaq .q__i::after { content: ""; position: absolute; background: var(--orange); transition: transform .2s, opacity .2s; } .sfaq .q__i::before { left: 0; top: 6px; width: 14px; height: 2px; } .sfaq .q__i::after { left: 6px; top: 0; width: 2px; height: 14px; } .sfaq .q.is-open .q__i::after { transform: scaleY(0); opacity: 0; } .sfaq .q__a { max-height: 0; overflow: hidden; transition: max-height .28s ease; } .sfaq .q.is-open .q__a { max-height: 460px; } .sfaq .q__a p { padding: 0 0 22px; max-width: 108ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); } /* ─── У-13 · форма ─────────────────────────────────────────── */ /* ─── адаптив ──────────────────────────────────────────────── */ @media (max-width: 1180px) { .sdirs { grid-template-columns: repeat(3, 1fr); } .stypes { grid-template-columns: repeat(3, 1fr); } .sobjs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 980px) { .sfun { grid-template-columns: repeat(2, 1fr); } .sgains { grid-template-columns: repeat(2, 1fr); } .sneighs { grid-template-columns: 1fr; } .sturn { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 620px) { .shero { min-height: 420px; padding: 100px 0 40px; } .sdirs, .sfun, .sgains { grid-template-columns: 1fr; } .stypes { grid-template-columns: repeat(2, 1fr); } .sobjs { grid-template-columns: 1fr; } .shero__cap { position: static; display: inline-block; margin: 14px 0 0 var(--gutter); } } /* ═══════════════════════════════════════════════════════════ Варианты оформления страницы услуги А — плотный светлый (без доп. класса) Б — с тёмными полосами: функции и этапы на графите, полоса цифр В — фото-ведущий: полоса цифр на кадре, типы объектов крупнее ═══════════════════════════════════════════════════════════ */ /* ─── полоса цифр (варианты Б и В) ─────────────────────────── */ .sband { position: relative; overflow: hidden; background: var(--graphite-900); } .sband__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .66; } /* было .5 — осветлено по замечанию 08.10 */ .sband__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,20,.6) 0%, rgba(14,17,20,.44) 50%, rgba(14,17,20,.68) 100%); } .sband__in { position: relative; z-index: 2; padding: 24px 0 26px; } .sfigs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } .sfig b { display: block; font-size: clamp(22px, 1.9vw, 30px); font-weight: 800; letter-spacing: -.02em; color: var(--orange); line-height: 1.05; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .sfig span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.88); text-shadow: 0 1px 10px rgba(0,0,0,.5); } /* ─── вариант Б: тёмные смысловые блоки ────────────────────── */ .v-b [data-screen-label^="У-5"] { background: var(--graphite-900); } .v-b [data-screen-label^="У-5"] h2 { color: #fff; } .v-b .sfun { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); } .v-b .sfun li { background: #262c30; color: rgba(255,255,255,.94); } .v-b [data-screen-label^="У-8"] { background: var(--graphite-900); } .v-b [data-screen-label^="У-8"] h2 { color: #fff; } .v-b [data-screen-label^="У-8"] .head p { color: rgba(255,255,255,.76); } .v-b .ssteps { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); } .v-b .sstep { background: #262c30; } .v-b .sstep__t { color: #fff; } .v-b .sstep__d { color: rgba(255,255,255,.82); } .v-b .sstep-note { background: #262c30; border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.86); } /* ─── вариант В: фотография ведёт, блоки крупнее ───────────── */ .v-c .stypes { grid-template-columns: repeat(3, 1fr); } .v-c .stype img { height: 215px; } .v-c .stype figcaption b { font-size: 19px; } .v-c .sdirs { grid-template-columns: repeat(5, 1fr); } .v-c .sdir { padding: 16px 18px; font-size: 14.5px; } .v-c .shero__pic img { height: 330px; } .v-c .sgains { grid-template-columns: repeat(2, 1fr); } .v-c .sgain { padding: 18px 20px 20px; } .v-c .sgain__t { font-size: 17.5px; } .v-c .sgain__d { font-size: 15px; } @media (max-width: 1100px) { .sfigs { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .sfigs { grid-template-columns: repeat(2, 1fr); } } /* Блок логотипов на странице услуги идёт после этапов и набран плотнее: высота ячейки меньше, сам знак не уменьшается. */ .sclients .clients { margin-top: 0; gap: 2px 0; } .sclients .client { min-height: 62px; padding: 2px 12px; } /* Страница получалась длинной: сжимаем воздух, а не содержание. Кегль текста не трогаем — его подняли по замечанию владельца. */ .page-service .faq__q { padding: 15px 46px 15px 0; } .page-service .faq__a > div { padding: 0 34px 16px 0; } .page-service .clients { margin-top: 0; } /* Заголовок смыслового блока ломался на две строки из-за общего ограничения ширины у .head__text — на странице услуги он должен идти одной строкой. */ .page-service .sturn-head .head__text { max-width: none; } /* nowrap здесь опасен: у строительного контроля заголовок длиннее и вылезал бы за экран горизонтальной прокруткой. Снятого ограничения ширины достаточно — заголовок идёт одной строкой, пока помещается. */ .page-service .sturn-head h2 { text-wrap: balance; } /* Колонки текста выключены по ширине: рваный правый край в двух узких колонках читается как недоделанная вёрстка. */ .sturn p { text-align: justify; hyphens: auto; } /* Карточки результата и пример проекта — одной высоты, разрывы одинаковые. Раньше пример был короче колонки и висел, а промежуток до него отличался от промежутка между карточками. */ .sgains-wrap { gap: 10px; align-items: stretch; } .sgains { align-content: stretch; } .sgains__case { display: flex; flex-direction: column; } .sgains__case .obj__photo { aspect-ratio: auto; flex: 1 1 auto; min-height: 150px; } .sgains__case-in { flex: 0 0 auto; } /* Блок «Что вы получаете» и пример проекта — ниже: карточки поджаты, у примера фотография занимает фиксированную полосу, а не тянется по остатку высоты. */ .page-service .sgain { padding: 14px 16px 15px; } .page-service .sgain__t { font-size: 16px; } .page-service .sgain__d { margin-top: 6px; font-size: 14px; line-height: 1.45; } .sgains__case .obj__photo { flex: 0 0 auto; height: 160px; min-height: 0; } .sgains__case-in { padding: 11px 14px 13px; } .sgains__case .obj__t { margin: 0 0 5px; font-size: 14.5px; } .sgains__case .obj__a { font-size: 12.5px; } .sgains__case .obj__meta { margin-top: 7px; font-size: 12.5px; } .sgains__case .obj__kind { margin-top: 6px; font-size: 12.5px; } /* Блок «Что вы получаете» — по содержимому, а не в растяжку. Карточки тянулись до высоты примера проекта и внизу каждой оставалась пустая треть; заметно это только на собранной странице, в отдельном блоке пропорция выглядит нормальной. */ .page-service .sgains-wrap { align-items: start; } .page-service .sgains { align-content: start; } .page-service .sgains__case { align-self: stretch; } .page-service .sgains__case .obj__photo { flex: 1 1 auto; height: auto; min-height: 160px; } /* ─── У-13 · контакты с картой ─────────────────────────── Владелец попросил тот же блок, что на главной, но вдвое ниже: карта ужата по высоте, контакты и форма встали рядом, а не стопкой. */ .geo--slim { grid-template-columns: minmax(0, 385px) 1fr; gap: 12px; align-items: stretch; } .geo--slim .geo__map { display: flex; flex-direction: column; justify-content: center; padding: 12px 14px 8px; overflow: hidden; } .geo--slim .rf-map { width: auto; height: auto; max-height: 360px; max-width: 100%; margin: 0 auto; } .geo--slim .geo__sum { display: none; } /* те же цифры уже стоят в У-2а */ .geo--slim .geo__legend { margin-top: 8px; gap: 6px 16px; font-size: 11.5px; } .geo--slim .geo__side { flex-direction: row; gap: 12px; } .geo--slim .geo__card { flex: 0 0 250px; padding: 16px 18px; } .geo--slim .geo__card dt { margin-top: 10px; } .geo--slim .geo__form { flex: 1 1 auto; padding: 16px 18px; } @media (max-width: 1100px) { .geo--slim { grid-template-columns: 1fr; } .geo--slim .geo__side { flex-direction: column; } .geo--slim .geo__card { flex: 0 0 auto; } } /* Форма в компактном блоке: короткие поля встают в ряд, а не стопкой — в вертикальном виде она одна задавала высоту всему блоку. */ .geo--slim .geo__form .form-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; } .geo--slim .geo__form .form-body > h3, .geo--slim .geo__form .form-body > .agree, .geo--slim .geo__form .form-body > button, .geo--slim .geo__form .form-body > .micro, .geo--slim .geo__form .field:has(textarea) { grid-column: 1 / -1; } .geo--slim .geo__form .form-body > p.small { display: none; } .geo--slim .geo__form textarea { height: 64px; min-height: 0; } .geo--slim .geo__form button { margin-top: 14px !important; } .geo--slim .geo__form .micro { margin-top: 9px !important; } @media (max-width: 1100px) { .geo--slim .geo__form .form-body { grid-template-columns: 1fr; } } /* ═══ Проектирование, правки владельца 08.10.2026 ═══════════════════ */ /* звёздочка у «Предпроектной проработки» и сноска под разворотом */ sup.ast { margin-left: 1px; font-size: .8em; font-weight: 700; color: var(--orange); vertical-align: super; line-height: 0; } .sturn--one { grid-template-columns: 1fr; max-width: 92ch; } .sturn--one p { text-align: left; } .sturn-note { margin-top: 16px; padding-top: 14px; max-width: 92ch; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--ink-3); } .sturn-note sup.ast { margin: 0 4px 0 0; } .sturn-note a { color: var(--ink-2); border-bottom: 1px solid var(--orange); } .sturn-note a:hover { color: var(--orange); } /* переключатель вариантов — только на время выбора */ .vswitch { position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px; background: #2C3235; box-shadow: 0 8px 28px rgba(0,0,0,.28); } .vswitch a { padding: 9px 14px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.78); white-space: nowrap; } .vswitch a:hover { color: #fff; } .vswitch a.on { background: var(--orange); color: #fff; } /* общее: «вы получаете» и нижние плашки */ .rnotes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; } .rnote { display: flex; flex-direction: column; gap: 5px; padding: 14px 18px; background: var(--bg-soft); border-left: 3px solid var(--orange); } .rnote b { font-size: 15.5px; font-weight: 700; color: var(--ink); } .rnote span { font-size: 14px; line-height: 1.5; color: var(--ink-2); } .rcase { display: flex; flex-direction: column; } .page-service .rcase .obj__photo { flex: 1 1 auto; height: auto; min-height: 170px; } /* А · таблица: строки этапов, справа пример проекта во всю высоту таблицы */ .rA { display: grid; grid-template-columns: 1fr 300px; gap: 10px; align-items: stretch; } .rA__main { border: 1px solid var(--line); background: #fff; } .rA__head, .rrow { display: grid; grid-template-columns: 54px 1.25fr 1fr; } .rA__head span { padding: 10px 18px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-soft); } .rrow { border-top: 1px solid var(--line); transition: background .15s; } .rrow:hover { background: #fbfaf8; } .rrow__n { display: flex; justify-content: center; padding-top: 16px; font-size: 15px; font-weight: 800; color: var(--orange); } .rrow__do { padding: 14px 18px 15px 0; } .rrow__do h3 { margin: 0 0 5px; font-size: 16.5px; font-weight: 700; line-height: 1.3; } .rrow__do p { font-size: 14px; line-height: 1.5; color: var(--ink-2); } .rrow__get { padding: 14px 18px 15px; border-left: 1px solid var(--line); } .rrow__get span, .rB__get span, .rV__get span { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); } .rrow__get p { font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--ink); } /* Б · линия этапов, результат прижат к низу каждой колонки */ .rB { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .rB__col { display: flex; flex-direction: column; } .rB__col h3 { margin: 12px 0 7px; font-size: 16.5px; font-weight: 700; line-height: 1.3; } .rB__col > p { flex: 1 1 auto; font-size: 14px; line-height: 1.5; color: var(--ink-2); } .rB__get { margin-top: 12px; padding: 11px 13px; background: var(--bg-soft); border-top: 2px solid var(--orange); font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink); } .rB__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; align-items: stretch; } .rnotes--col { grid-template-columns: 1fr; margin-top: 0; } .rcase--wide { flex-direction: row; } .page-service .rcase--wide .obj__photo { flex: 0 0 46%; min-height: 0; } .rcase--wide .sgains__case-in { align-self: center; } /* В · вкладки: список этапов, панель, пример проекта — одна высота */ .rV { display: grid; grid-template-columns: 300px 1fr 280px; gap: 10px; align-items: stretch; } .rV__tabs { display: flex; flex-direction: column; gap: 2px; background: var(--line); border: 1px solid var(--line); } .rV__tab { flex: 1 1 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; background: #fff; text-align: left; cursor: pointer; font: inherit; transition: background .15s, color .15s; } .rV__n { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--orange); } .rV__t { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); } .rV__tab.on { background: var(--orange); } .rV__tab.on .rV__n, .rV__tab.on .rV__t { color: #fff; } .rV__panes { position: relative; background: #fff; border: 1px solid var(--line); } .rV__pane { display: none; padding: 24px 28px; } .rV__pane.on { display: flex; flex-direction: column; height: 100%; } .rV__step { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } .rV__pane h3 { margin: 6px 0 10px; font-size: 22px; font-weight: 700; line-height: 1.25; } .rV__pane > p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); } .rV__get { margin-top: auto; padding: 14px 16px; background: var(--bg-soft); border-left: 3px solid var(--orange); } .rV__get p { font-size: 15.5px; font-weight: 500; line-height: 1.45; color: var(--ink); } @media (max-width: 1100px) { .rA, .rV { grid-template-columns: 1fr; } .rB { grid-template-columns: repeat(2, 1fr); } .rB .ssteps__line { display: none; } .rB__foot, .rnotes { grid-template-columns: 1fr; } } @media (max-width: 640px) { .rA__head { display: none; } .rrow { grid-template-columns: 40px 1fr; } .rrow__get { grid-column: 2; border-left: 0; padding: 0 18px 15px 0; } .rB { grid-template-columns: 1fr; } .rcase--wide { flex-direction: column; } .vswitch { left: 8px; right: 8px; transform: none; overflow-x: auto; } } /* поправки после просмотра вариантов */ .rA__head span:nth-child(2) { padding-left: 0; } .rrow__get span { display: none; } /* в А подпись уже в шапке таблицы */ .rrow__get { padding-top: 16px; } /* Б: заголовки, тексты и плашки результата стоят на одних линиях во всех колонках */ .rB { grid-template-rows: auto auto 1fr auto; row-gap: 0; } .rB__col { display: grid; grid-row: span 4; grid-template-rows: subgrid; } .rB .ssteps__line { grid-row: 1; } .rcase--wide .sgains__case-in { flex: 1 1 auto; min-width: 0; } .sturn--one, .sturn-note { max-width: 960px; } .sturn--one p { hyphens: manual; } /* круг 2, 08.10: пять реальных объектов в ряд; подпись источника фото */ .sobjs--5 { grid-template-columns: repeat(5, 1fr); gap: 20px 14px; } @media (max-width: 1100px) { .sobjs--5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .sobjs--5 { grid-template-columns: 1fr 1fr; } } .rcase__credit { margin-top: 6px; font-size: 11px; color: var(--ink-3); } .rnotes .rnote:only-child { grid-column: 1 / -1; } /* этапы списком (08.10) */ .rlist { margin: 0 0 18px; padding: 0; list-style: none; } .rlist li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .rlist li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } /* все панели в одной ячейке: высота блока = самый длинный этап, страница не прыгает */ .rV__panes { display: grid; } .rV__pane, .rV__pane.on { grid-area: 1 / 1; display: flex; flex-direction: column; visibility: hidden; } .rV__pane.on { visibility: visible; } .rnote span a { color: var(--ink); border-bottom: 1px solid var(--orange); } .rnote span a:hover { color: var(--orange); } /* пример проекта с составом работ (предпроект, 08.10) */ .rcase__list { margin: 6px 0 0; padding: 0; list-style: none; } .rcase__list li { position: relative; padding-left: 13px; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); } .rcase__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } /* ── uslugi-pravki.css ── */ /* Правки владельца 09.10.2026 для страниц услуг (ТЗ, СК, проектирование, предпроект): шапка, полоса цифр, подвал. Главную не затрагивает — на ней этот файл не подключён. Подключён одной строкой в каждой странице; убрать строку — вернуть как было. */ /* 1. Шапка полупрозрачная — и вверху страницы, и при прокрутке */ .page-service .header, .page-service .header.is-stuck { /* подобрано так, чтобы поверх светлой страницы цвет совпадал с подвалом #363d41 */ background: rgba(33,41,45,.85); /* прозрачность 15 % (09.10) */ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* 2. Полоса цифр — фон светлее на 10 % */ .sband__bg { opacity: .74; } .sband__veil { background: linear-gradient(180deg, rgba(14,17,20,.54) 0%, rgba(14,17,20,.38) 50%, rgba(14,17,20,.62) 100%); } /* 3. Подвал ниже и немного светлее; строка © / ОГРН / ИНН убрана из разметки */ .footer { background: #363d41; padding-top: 24px; } .footer__grid { padding-bottom: 16px; gap: 24px; } .footer__col-title { margin-bottom: 8px; } .footer__links { gap: 5px; } .footer__bottom { padding: 10px 0 12px; } /* 4. Блок «Работаем с объектами различного назначения»: затемнение под подписями меньше на 5 % (было .62 / .88 — стало .59 / .84). Сначала принято на ТЗ, затем перенесено на все услуги. */ .stype figcaption { background: linear-gradient(180deg, rgba(14,17,20,0) 0%, rgba(14,17,20,.59) 42%, rgba(14,17,20,.84) 100%); } /* ── pages.css ── */ /* ═══════════════════════════════════════════════════════════ Остальные страницы сайта (10.10.2026): О компании, Услуги, Наши объекты, Документы и награды, Контакты, FAQ, юридические страницы, реквизиты, 404. Подключается только на них — принятые страницы этот файл не видят. Токены и приёмы — те же, что на принятых страницах: графит, оранжевый треугольник, Montserrat, карточки с тонкой рамкой. ═══════════════════════════════════════════════════════════ */ /* текущий раздел в меню — та же оранжевая черта, что при наведении */ .menu__link.is-current { color: #fff; } .menu__link.is-current::after { right: 0; } /* первый экран без фотографии: крошки, заголовок, подзаголовок */ .shero--plain { padding: 108px 0 30px; } .shero--plain .shero__t { max-width: 24ch; } .shero--plain .shero__lead { max-width: 70ch; } .page-inner .shero + .section { padding-top: 34px; } /* на принятых услугах там 0 — здесь заголовок липнет к шапке */ /* лента цифр из «О компании» главной — та же яркость, что принята для главной */ .page-inner .band__bg { opacity: .87; } .page-inner .band::after { background: linear-gradient(180deg, rgba(14,17,20,.31) 0%, rgba(14,17,20,.09) 24%, rgba(14,17,20,.11) 72%, rgba(14,17,20,.31) 100%), radial-gradient(120% 100% at 50% 50%, rgba(14,17,20,.67) 0%, rgba(14,17,20,.57) 42%, rgba(14,17,20,.35) 74%, rgba(14,17,20,.2) 100%); } /* ─── навигация по разделам страницы ─────────────────────── */ .doctabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .doctabs--flush { margin-top: 0; } .doctabs__a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border: 1px solid var(--line); background: #fff; font-size: var(--t-small); font-weight: 600; color: var(--ink); transition: border-color .16s, color .16s; } .doctabs__a:hover { border-color: var(--orange); color: var(--orange-700); } /* ─── документы: превью листа + подпись ─────────────────── */ .docs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .docs--3 { grid-template-columns: repeat(3, minmax(0, 300px)); } .doc { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); padding: 12px 12px 14px; transition: border-color .16s, transform .16s; } .doc:hover { border-color: var(--orange); transform: translateY(-2px); } .doc__pic { display: block; aspect-ratio: 210 / 297; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line-2); } .doc__pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .doc__t { margin-top: 12px; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--ink); } .doc__s { margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); } .doc__l { margin-top: auto; padding-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); } /* ─── реквизиты на странице контактов ────────────────────── */ .kreq { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 22px 26px; border: 1px solid var(--line); background: #fff; } .kreq h2 { font-size: clamp(20px, 1.6vw, 24px); } .kreq p { margin-top: 6px; font-size: var(--t-small); color: var(--ink-3); } /* ─── страница реквизитов ───────────────────────────────── */ .rekv { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; } .rekv__t { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); } .rekv__t th, .rekv__t td { padding: 12px 18px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; font-size: 14.5px; line-height: 1.45; } .rekv__t th { width: 34%; font-weight: 600; color: var(--ink-3); } .rekv__t td { color: var(--ink); font-weight: 500; } .rekv__t tr:last-child th, .rekv__t tr:last-child td { border-bottom: 0; } .rekv__side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 90px; } /* ─── юридический текст ─────────────────────────────────── */ .legal { max-width: 860px; font-size: 15px; line-height: 1.65; color: var(--ink-2); } .legal h2 { margin: 34px 0 12px; font-size: 19px; letter-spacing: 0; text-transform: none; color: var(--ink); } .legal h2:first-child { margin-top: 0; } .legal p { margin: 0 0 12px; } .legal ul { margin: 0 0 14px; padding-left: 0; list-style: none; } .legal li { position: relative; padding-left: 18px; margin-bottom: 6px; } .legal li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--orange); clip-path: polygon(0 100%, 0 0, 100% 100%); } .legal__more { display: flex; flex-wrap: wrap; gap: 8px 22px; max-width: 860px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--t-small); } .legal__more span { color: var(--ink-3); } .legal__more a { color: var(--ink); border-bottom: 1px solid var(--orange); } .legal__more a:hover { color: var(--orange-700); } /* ─── 404 ───────────────────────────────────────────────── */ .page-service .nf { padding: 170px 0 110px; background: var(--bg-soft); } .nf__in { max-width: 640px; margin: 0 auto; text-align: center; } .nf__code { font-size: clamp(90px, 12vw, 150px); font-weight: 800; line-height: 1; color: var(--orange); letter-spacing: -.04em; } .nf h1 { margin-top: 10px; font-size: clamp(24px, 2.2vw, 32px); } .nf p { margin-top: 12px; color: var(--ink-2); } .nf__cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; } @media (max-width: 1100px) { .docs { grid-template-columns: repeat(3, 1fr); } .rekv { grid-template-columns: 1fr; } .rekv__side { position: static; } } @media (max-width: 640px) { .shero--plain { padding: 96px 0 22px; } .docs, .docs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rekv__t th, .rekv__t td { display: block; width: 100%; padding: 8px 14px; } .rekv__t th { padding-bottom: 0; border-bottom: 0; } .page-service .nf { padding: 130px 0 80px; } } /* Телефон и планшет — общие правила для всех страниц сайта перенесены в setka.css (12.10.2026): на принятых страницах те же блоки тоже были шире экрана. */ /* ── setka.css ── */ /* ═══════════════════════════════════════════════════════════ Сетка и переносы строк — весь сайт (12.10.2026) Подключается последним на всех 16 страницах. Здесь только выравнивание по сетке контейнера и правила переноса: цвета, кегли, тексты и состав блоков не меняются. Убрать подключение файла — вернётся прежняя вёрстка. Сетка: контейнер 1380 px, поле 40 px — при ширине окна 1440 текст идёт от 70 до 1370 px, на телефоне 390 px — от 40 до 350 px. ═══════════════════════════════════════════════════════════ */ /* ─── 1. Полосы с цифрами: главная (Г-8), «О компании», услуги (У-2а) ─── .band__in и .sband__in стоят на .container, но их padding «54px 0 62px» обнулял боковое поле контейнера: цифры начинались на 40 px левее сетки, а на телефоне прилипали к краю экрана. */ .band__in, .sband__in { padding-left: var(--gutter); padding-right: var(--gutter); } /* подпись к кадру — по тем же краям, что и контейнер (было «100% − 48 px») */ .band__cap { width: min(calc(var(--container) - 2 * var(--gutter)), calc(100% - 2 * var(--gutter))); } /* ─── 2. Переносы строк ─────────────────────────────────────────────── Заголовки и короткие подписи — выровненными строками, без одного слова на последней. Абзацы и пункты — без одинокого слова в конце. Висячие предлоги и союзы сняты в тексте неразрывными пробелами (скрипт typograf.py), здесь — только то, что зависит от ширины. Браузер без поддержки text-wrap переносит строки как раньше. */ h1, h2, h3, h4, figcaption, .fig__l, .fig__v, .sfig span, .stype figcaption b, .obj__t, .obj__a, .doc__t, .doc__s, .sfun__c, .sdir, .faq__q, .sneigh__t, .sgain__t, .sstep__t, .route__stage-t, .geo__card, .crumbs, .footer__col-title { text-wrap: balance; } p, li, dd, td, th, blockquote, .faq__a, .legal { text-wrap: pretty; } /* текст с выключкой по ширине («Разворот» на услугах) — обычный перенос: pretty там раздувает пробелы между словами */ .sturn p { text-wrap: wrap; } /* ─── 3. Планшет и телефон ───────────────────────────────────────────── На узком экране часть блоков не помещалась и уходила за правый край: страница услуги была шириной 900–970 px вместо 390. Широкий экран эти правила не задевают — все они внутри @media. */ /* направления услуг: вариант «В» держал 5 колонок на любой ширине */ @media (max-width: 1180px) { .v-c .sdirs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 620px) { .v-c .sdirs { grid-template-columns: minmax(0, 1fr); } } /* типы объектов: вариант «В» держал 3 колонки на любой ширине */ @media (max-width: 980px) { .v-c .stypes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .v-c .stypes { grid-template-columns: minmax(0, 1fr); } .v-c .stype img { height: 200px; } } @media (max-width: 980px) { /* первый экран услуги: фото под текстом, а не справа на 500 px */ .shero__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } .shero__pic img, .v-c .shero__pic img { height: auto; aspect-ratio: 16 / 9; } /* результат и пример проекта — друг под другом */ .sgains-wrap { grid-template-columns: minmax(0, 1fr); } /* другие услуги: фото над описанием */ .sneigh { grid-template-columns: minmax(0, 1fr); } .sneigh__pic img { min-height: 0; aspect-ratio: 16 / 9; } .sneigh__l { grid-template-columns: minmax(0, 1fr); } .sfun, .sgains, .v-c .sgains { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* последняя карточка функций добирала ряд из трёх колонок — в двух колонках она добирает ряд из двух */ .sfun__c:last-child:nth-child(3n+1), .sfun__c:last-child:nth-child(3n+2) { grid-column: auto; } .sfun__c:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 760px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } .client { min-height: 70px; padding: 6px 8px; justify-content: center; } .client img { max-width: 100%; } /* отзывы: письмо над цитатой, миниатюры под ними */ .revs { grid-template-columns: minmax(0, 1fr); } .rev.is-on { grid-template-columns: minmax(0, 1fr); } .rev__body { min-width: 0; padding: 24px 20px; } .rev__q { font-size: 18px; } .rev__who { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .rev__scan { max-height: 320px; } .revs__nav { border-left: 0; border-top: 1px solid var(--line); } /* подвал: две колонки, первая — во всю ширину */ .footer__grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; } .footer__grid > div:first-child { grid-column: 1 / -1; } } @media (max-width: 620px) { .sfun, .sgains, .v-c .sgains { grid-template-columns: minmax(0, 1fr); } .sfun__c:last-child:nth-child(odd) { grid-column: auto; } /* подпись к фото услуги на главной: была во всю ширину плюс поля */ .svc__cap { box-sizing: border-box; max-width: 100%; } } @media (max-width: 420px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } } /* ── adaptiv.css ── */ /* ═══════════════════════════════════════════════════════════════════ РДКомпани — телефон и планшет для принятых страниц (главная, услуги). Подключается сборщиком build_prod.py последним. Всё — только внутри @media (max-width: …): на десктопе согласованные страницы не меняются. Единственное исключение — форма в компактном блоке контактов (ниже, в конце): в Safari и Firefox на 1280 px она была шире колонки на 19 px. Главная причина поломки: правила варианта оформления «В» (.v-c …) записаны без привязки к ширине и сильнее мобильных правил page-service.css — колонки оставались десктопными на любом экране. Исправления повторяют то, что pages.css уже делает для новых страниц (.page-inner), но для всех страниц. ═══════════════════════════════════════════════════════════════════ */ /* элементы сеток не растягивают колонку своим минимальным содержимым */ @media (max-width: 1180px) { .geo > *, .shero__grid > *, .sgains-wrap > *, .rekv > * { min-width: 0; } .v-c .sdirs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 980px) { /* последняя карточка «Функций» растянута на 3 колонки — в сетке из двух и одной колонки это создавало лишние колонки и вылезало за экран */ .sfun .sfun__c:last-child:nth-child(n) { grid-column: auto; } .sfun .sfun__c:last-child:nth-child(2n+1) { grid-column: 1 / -1; } .shero__grid { grid-template-columns: 1fr; gap: 22px; } .shero__pic img, .v-c .shero__pic img { height: auto; aspect-ratio: 16 / 9; } .sgains-wrap { grid-template-columns: 1fr; } .sneigh { grid-template-columns: 1fr; } .sneigh__pic img { min-height: 0; aspect-ratio: 16 / 9; } .sneigh__l { grid-template-columns: 1fr; } } @media (max-width: 760px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } .client, .sclients .client { min-height: 70px; padding: 6px 8px; justify-content: center; } .client:nth-child(7n+1) { justify-content: center; padding-left: 8px; } .client img { max-width: 100%; } .revs { grid-template-columns: 1fr; } .rev.is-on { grid-template-columns: minmax(0, 1fr); } .rev__body { min-width: 0; padding: 24px 20px; } .rev__q { font-size: 18px; } .rev__who { grid-template-columns: 1fr; display: grid; gap: 8px; } .rev__scan { max-height: 320px; } .revs__nav { border-left: 0; border-top: 1px solid var(--line); } .footer__grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; } .footer__grid > div:first-child { grid-column: 1 / -1; } } @media (max-width: 620px) { .sfun .sfun__c:last-child:nth-child(n) { grid-column: auto; } .v-c .sdirs, .v-c .sgains { grid-template-columns: 1fr; } .v-c .stypes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v-c .stype img { height: 150px; } .rekv__t td { overflow-wrap: anywhere; } /* телефоны и флажок согласия — палец попадает с первого раза */ .geo__card dd a { display: inline-block; padding: 6px 0; } .agree input { width: 20px; height: 20px; flex-basis: 20px; } } @media (max-width: 420px) { .footer__grid { grid-template-columns: 1fr; } .v-c .stypes { grid-template-columns: 1fr; } } /* ═══ Правки по чек-листу 28.10.2026 (проверка на телефонах) ═══════════ */ /* п.2: первый экран главной — «Предпроектный консалтинг» не помещался в строку на телефоне (white-space: nowrap при 26–29 px) и обрезался справа. Решение 28.10 (размер по ширине экрана, 21 px на 390) заменено 31.10: см. «п.6» в конце файла — 26 px и перенос длинных названий. */ /* п.7: ссылки в подвале, хлебные крошки и ссылки под юридическими текстами были высотой 18–23 px — палец промахивался. Область нажатия увеличена до 28–30 px без изменения вида: отступ компенсирован отрицательным полем. */ @media (max-width: 1024px) { .footer__links a, .crumbs a, .legal__more a { display: inline-block; padding: 5px 0; margin: -5px 0; } } /* п.2: подписи миниатюр в блоке «Нам доверяют» обрезались многоточием: на телефоне «ТЕХНОНИК…», «Светлогор…», на компьютере «ПРС Тихорецк…». Теперь длинная подпись переносится на вторую строку на любой ширине. */ .rev__th span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; hyphens: auto; } /* п.6: на телефоне подписи были 8,5 px, не прочитать. */ @media (max-width: 760px) { .rev__th span { font-size: 10px; line-height: 1.15; } } /* Firefox: после загрузки Яндекс Метрики номера телефонов в шапке и подвале бледнели справа. Метрика оборачивает каждый знак номера во вложенные с убывающей opacity (0.93, 0.87, 0.8 …), в Chrome и Safari этого нет. Воспроизведено 28.10.2026 на исходной сборке, без Метрики не проявляется. Правило с !important перекрывает инлайн-стиль Метрики и возвращает непрозрачность. */ a[href^="tel:"] small, a[href^="tel:"] small small { opacity: 1 !important; } /* Safari и Firefox: поля формы шире, чем в Chrome, и три поля в ряд не помещались в колонку на 1280 px. В Chrome вид не меняется. */ .geo--slim .geo__form .form-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } .geo--slim .field input, .geo--slim .field textarea { min-width: 0; } /* ═══ Меню на телефоне и планшете ═══════════════════════════════════ В прототипе на ширине до 1024 px меню просто скрывалось — перейти в раздел можно было только через подвал. Кнопка и панель добавляются сборщиком; на десктопе их нет (.burger и .menu__tel скрыты). */ .burger, .menu__tel { display: none; } @media (max-width: 1024px) { .header__tel { margin-left: auto; } /* align-items: stretch — в Chrome до ~2024 у кнопок в стилях браузера align-items: flex-start, и пустые полоски сжимались до нулевой ширины: на Android с Chrome 113 кнопка меню была пустой (эмулятор, 02.11) */ .burger { display: inline-flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 5px; width: 44px; height: 44px; padding: 0 11px; margin-left: -24px; background: none; border: 1px solid rgba(255,255,255,.42); cursor: pointer; } .header.is-stuck .burger { height: 40px; width: 40px; padding: 0 10px; } .burger span { display: block; height: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; } .menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-open .burger span:nth-child(2) { opacity: 0; } .menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .menu-open { overflow: hidden; } .menu-open .header { background: var(--graphite-900, #2c3235); z-index: 1000; } .menu-open .menu { display: flex; position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 6px var(--gutter) 32px; margin: 0; background: var(--graphite-900, #2c3235); font-size: 17px; } .menu-open .menu__link { display: flex; width: 100%; padding: 16px 0; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); } .menu-open .menu__link::after, .menu-open .menu__link svg { display: none; } .menu-open .dropdown { position: static; min-width: 0; padding: 4px 0 10px 14px; margin: 0; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .menu-open .dropdown a.is-dup, .menu-open .dropdown.is-empty { display: none; } .menu-open .dropdown a { padding: 10px 0; font-size: 15.5px; color: rgba(255,255,255,.78); } .menu-open .menu__tel { display: block; margin-top: 24px; font-size: 20px; font-weight: 700; color: #fff; } } @media (max-width: 560px) { /* длинное слово (название компании в карточке письма) переносится, а не выталкивает страницу вбок */ h1, h2, h3, h4, p, li, dd, dt, td, .doc__t, .doc__s { overflow-wrap: break-word; } /* поля по краям 40 px съедали четверть ширины телефона */ :root { --gutter: 20px; } .header__row { gap: 12px; } .burger { margin-left: 0; } .logo img { height: 32px; } .header.is-stuck .logo img { height: 30px; } /* номер в шапке — иконкой трубки; сам номер есть в панели меню */ .header__tel { width: 44px; padding: 0; justify-content: center; font-size: 0; } .header.is-stuck .header__tel { width: 40px; } .header__tel::before { content: ""; width: 18px; height: 18px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; } } /* ═══ Правки по замечаниям заказчика от 30.10.2026 ═══════════════════ */ /* п.1: на телефоне плашка cookie (z-index 1000, стоит в конце страницы) лежала поверх нижних пунктов открытого меню: касание попадало в плашку. Пока меню открыто, плашка скрыта; после закрытия меню она на месте. */ @media (max-width: 1024px) { .menu-open .cookie-bar { display: none; } } /* п.4: флажок согласия 20×20 px — мелкая цель для пальца. Флажок лежит внутри