/* === Шрифт Manrope у себя (переменный 400..700), без запросов к Google === */ @font-face{ font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/manrope-cyrillic-ext.woff2") format("woff2"); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F } @font-face{ font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116 } @font-face{ font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/manrope-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF } @font-face{ font-family:"Manrope"; font-style:normal; font-weight:400 700; font-display:swap; src:url("fonts/manrope-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD } /* ========================================================================== BAVITEK, общие стили сайта (build2). Один файл на все страницы. Оглавление: 01 Токены 02 Сброс и база 03 Типографика 04 Сетка и секции 05 Кнопки и иконки 06 Шапка 07 Мобильное меню 08 Подвал 09 Хлебные крошки 10 Кадры и подписи 11 Hero (три варианта) 12 Реестр фактов 13 Карточки направлений, чипы, «Подробнее» 14 Лента логотипов 15 Площадки и регионы 16 Шаги, плитки, списки, поля 17 Заявка, CTA-полоса, карточка CRM, тёмная плита, контакт-карточка 18 Полоса пути техники 19 Закреплённая карточка, установка, реквизиты 20 Появление блоков и параллакс 21 Reduced motion 22 Страничные дополнения (дописывают сборщики подстраниц) ========================================================================== */ /* ---------- 01. Токены ---------- */ :root{ /* поверхности */ --bg: #FFFFFF; --bg-2: #F5F6F8; --bg-3: #EDEFF3; --line: #E4E6EB; --line-2: #CFD3DB; /* текст */ --ink: #151821; --ink-2: #5B6170; --ink-3: #6B7080; /* тёмная плита и подвал */ --dark: #1B1F29; --dark-ink: #F2F3F6; --dark-ink-2:#A9AEBB; --dark-line: rgba(255,255,255,.12); --dark-hover:#2A2F3B; /* акцент: только малые элементы */ --accent: #7D1114; --accent-2: #5A090B; /* шрифт */ --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-display: clamp(34px, 5vw, 68px); --fs-h2: clamp(30px, 3.4vw, 46px); --fs-h3: clamp(21px, 1.8vw, 26px); --fs-h4: 18px; --fs-lead: clamp(17px, 1.3vw, 20px); --fs-body: clamp(16px, .35vw + 14.6px, 17px); --fs-small: 14px; --fs-over: 12px; --fs-num: clamp(36px, 4.4vw, 64px); --fs-num-sm: clamp(26px, 2.6vw, 36px); /* сетка и ритм */ --container: 1240px; --pad: 24px; --gutter: 24px; --sec: clamp(56px, 9vw, 128px); --sec-sm: clamp(40px, 6vw, 80px); --head-gap: clamp(32px, 4.5vw, 56px); --nav-h: 72px; /* формы */ --r-sm: 10px; --r: 16px; --r-lg: 20px; --r-plate: 24px; --r-pill: 999px; /* тени */ --sh-hover: 0 12px 32px rgba(21,24,33,.08); --sh-plate: 0 24px 60px rgba(21,24,33,.10); --sh-nav: 0 1px 0 #E4E6EB, 0 8px 24px rgba(21,24,33,.06); --inset: inset 0 0 0 1px rgba(21,24,33,.06); /* движение */ --t-fast: 200ms; --t: 300ms; --t-reveal: 600ms; --ease: cubic-bezier(.2,.7,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); } @media (max-width:768px){ :root{ --gutter:16px } } @media (max-width:640px){ :root{ --nav-h:60px; --pad:20px } } @media (max-width:400px){ :root{ --pad:16px } } /* ---------- 02. Сброс и база ---------- */ *,*::before,*::after{ box-sizing:border-box } html{ background:var(--bg); color-scheme:light; -webkit-text-size-adjust:100%; overflow-x:clip } body{ margin:0; font-family:var(--font); font-size:var(--fs-body); line-height:1.6; color:var(--ink); background:var(--bg); overflow-x:clip; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale } /* блокировка прокрутки при открытом меню: класс ставится и на html, и на body */ html.menu-open, body.menu-open{ overflow:hidden } img{ display:block; max-width:100%; height:auto } svg{ display:block } a{ color:inherit; text-decoration:none } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0 } ul, ol{ margin:0; padding:0 } h1,h2,h3,h4{ margin:0 } p{ margin:0 } p + p{ margin-top:1em } figure{ margin:0 } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px } [id]{ scroll-margin-top:calc(var(--nav-h) + 16px) } .vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap } .skip{ position:absolute; left:16px; top:-48px; z-index:100; padding:10px 14px; background:var(--ink); color:#fff; border-radius:var(--r-sm); font-weight:600 } .skip:focus{ top:12px } .sentinel{ position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none } .sprite{ position:absolute; width:0; height:0; overflow:hidden } /* ---------- 03. Типографика ---------- */ .display{ font-size:var(--fs-display); font-weight:600; line-height:1.04; letter-spacing:-.02em; color:var(--ink); max-width:18ch; text-wrap:balance } .h2{ font-size:var(--fs-h2); font-weight:600; line-height:1.08; letter-spacing:-.015em; color:var(--ink); max-width:22ch; text-wrap:balance } .h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--ink) } .h4{ font-size:var(--fs-h4); font-weight:600; line-height:1.3; color:var(--ink) } .lead{ font-size:var(--fs-lead); font-weight:400; line-height:1.5; color:var(--ink-2); max-width:60ch } .small{ font-size:var(--fs-small); line-height:1.5; color:var(--ink-2) } .overline{ font-size:var(--fs-over); font-weight:600; line-height:1.2; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) } .idx{ font-size:13px; font-weight:600; line-height:1; letter-spacing:.04em; color:var(--accent); font-variant-numeric:tabular-nums } .num{ font-size:var(--fs-num); font-weight:500; line-height:1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums } .overline + .display, .overline + .h2{ margin-top:16px } .overline + .h3, .overline + .h4{ margin-top:10px } .display + .lead, .h2 + .lead{ margin-top:20px } .h3 + p, .h4 + p{ margin-top:8px } .h2 + p:not(.lead), .display + p:not(.lead){ margin-top:16px } .prose{ max-width:68ch } /* текстовые ссылки в абзацах: тонкое подчёркивание, при наведении бордовое */ p > a:not([class]), dd > a, .small a{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; text-decoration-color:var(--line-2); transition:text-decoration-color var(--t-fast) var(--ease) } p > a:not([class]):hover, dd > a:hover, .small a:hover{ text-decoration-color:var(--accent) } /* ---------- 04. Сетка и секции ---------- */ .container{ width:100%; max-width:calc(var(--container) + var(--pad)*2); margin-inline:auto; padding-inline:var(--pad) } .grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter) } /* ширина задаётся концом (span), начало остаётся auto: тогда .c-off-1 может сдвинуть старт, не теряя ширину. Смещение на одну пустую колонку после левого блока = старт с 7-й */ .c-3{ grid-column:auto / span 3 } .c-4{ grid-column:auto / span 4 } .c-5{ grid-column:auto / span 5 } .c-6{ grid-column:auto / span 6 } .c-7{ grid-column:auto / span 7 } .c-8{ grid-column:auto / span 8 } .c-12{ grid-column:auto / span 12 } .c-off-1{ grid-column-start:7 } @media (max-width:900px){ .grid > [class*="c-"]{ grid-column:span 12 } .c-off-1{ grid-column-start:auto } } .section{ padding-block:var(--sec) } .section--sm{ padding-block:var(--sec-sm) } .section--grey{ background:var(--bg-2) } .sec-head{ margin-bottom:var(--head-gap); max-width:760px } .sec-head--row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; max-width:none } .sec-head--row > div{ max-width:760px } .sec-head--row .more{ flex:none; margin-bottom:6px } @media (max-width:900px){ .sec-head--row{ display:block } .sec-head--row .more{ margin-top:16px } } /* ---------- 05. Кнопки и иконки ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:var(--r-sm); font-weight:600; font-size:15px; line-height:1; letter-spacing:.01em; white-space:nowrap; border:1px solid transparent; cursor:pointer; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) } .btn--accent{ background:var(--accent); color:#fff } .btn--accent:hover{ background:var(--accent-2); color:#fff } .btn--dark{ background:var(--ink); color:#fff } .btn--dark:hover{ background:var(--dark-hover); color:#fff } .btn--ghost{ border-color:var(--line-2); color:var(--ink) } .btn--ghost:hover{ background:var(--bg-2) } .btn--light{ background:#fff; color:var(--ink) } .btn--light:hover{ background:var(--bg-3) } .btn--ghost-light{ border-color:rgba(255,255,255,.28); color:var(--dark-ink) } .btn--ghost-light:hover{ background:rgba(255,255,255,.08) } .btn--icon{ width:44px; padding:0 } .btn .ico{ width:16px; height:16px } .ico{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round } .ico--lg{ width:24px; height:24px } .ico--key{ color:var(--accent) } /* только в .crm-card, одна на страницу */ /* ---------- 06. Шапка ---------- */ .site-header{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); transition:box-shadow var(--t-fast) var(--ease) } .site-header.is-scrolled{ box-shadow:var(--sh-nav) } .site-header__in{ display:flex; align-items:center; gap:24px; height:var(--nav-h) } .brand{ display:inline-flex; align-items:center; gap:10px; flex:none; color:var(--ink) } .brand__logo{ width:36px; height:36px; border-radius:50% } .brand__name{ font-weight:700; font-size:15px; line-height:1; letter-spacing:.22em; text-transform:uppercase; color:var(--ink) } .site-nav{ display:flex; gap:24px; margin-inline:auto } .site-nav a{ position:relative; font-size:15px; font-weight:500; color:var(--ink-2); padding:6px 0; white-space:nowrap; transition:color var(--t-fast) var(--ease) } .site-nav a:hover{ color:var(--ink) } .site-nav a[aria-current="page"]{ color:var(--ink) } .site-nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--accent) } .site-header__actions{ display:flex; align-items:center; gap:10px; flex:none; margin-left:auto } .site-nav + .site-header__actions{ margin-left:0 } .site-header .btn{ height:40px } .burger{ display:none } @media (max-width:1240px){ .site-nav{ gap:20px } .site-header .btn{ padding:0 16px } } @media (max-width:1079px){ .site-nav{ display:none } .burger{ display:inline-flex } } @media (max-width:639px){ .site-header .btn{ height:44px } .btn--crm, .btn--mail{ width:44px; padding:0 } .btn--crm .btn__label, .btn--mail .btn__label{ display:none } .site-header__actions{ gap:8px } .site-header__in{ gap:12px } } /* ---------- 07. Мобильное меню ---------- */ .menu{ position:fixed; inset:0; z-index:60 } .menu__backdrop{ position:absolute; inset:0; background:rgba(21,24,33,.32); opacity:0; transition:opacity var(--t-fast) var(--ease) } .menu__panel{ position:absolute; top:0; right:0; bottom:0; width:100%; max-width:480px; background:var(--bg); padding:0 var(--pad) 32px; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateX(100%); transition:transform 280ms var(--ease) } .menu.is-open .menu__backdrop{ opacity:1 } .menu.is-open .menu__panel{ transform:none } .menu:not(.is-open) .menu__panel{ transition-duration:200ms } .menu__top{ display:flex; justify-content:space-between; align-items:center; height:var(--nav-h); margin-bottom:24px } .menu__nav{ display:flex; flex-direction:column; margin:12px 0 32px } .menu__nav a{ display:flex; align-items:baseline; gap:14px; padding:12px 0; font-size:28px; font-weight:600; line-height:1.1; border-bottom:1px solid var(--line); color:var(--ink) } .menu__idx{ font-size:13px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums } .menu__nav a[aria-current="page"] .menu__idx{ color:var(--accent) } .menu__actions{ display:grid; gap:10px; margin:12px 0 24px } .menu__contacts{ list-style:none; margin:0; padding:0 } .menu__contacts li{ display:flex; flex-direction:column; padding:10px 0; border-bottom:1px solid var(--line) } .menu__contacts a{ font-weight:600; text-decoration:none; color:var(--ink) } .menu__contacts span{ font-size:14px; color:var(--ink-2) } .menu .overline{ margin-top:8px } @media (min-width:1080px){ .menu{ display:none } } /* ---------- 08. Подвал ---------- */ .site-footer{ background:var(--dark); color:var(--dark-ink); padding:clamp(56px,7vw,88px) 0 28px; margin-top:0 } .site-footer__top{ display:flex; justify-content:space-between; align-items:center; gap:32px; padding-bottom:32px; border-bottom:1px solid var(--dark-line) } .brand--dark .brand__name{ color:var(--dark-ink) } .brand__disc{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#fff; flex:none } .site-footer__about{ max-width:56ch; color:var(--dark-ink-2) } .site-footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter); padding:40px 0 } .site-footer .overline{ color:var(--dark-ink-2); margin-bottom:14px } .site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px } .site-footer li{ display:flex; flex-direction:column; color:var(--dark-ink) } .site-footer li span{ color:var(--dark-ink-2); font-size:14px } .site-footer li a{ text-decoration:none } .site-footer li a:hover{ text-decoration:underline; text-underline-offset:4px } .site-footer__crm{ display:inline-flex; align-items:center; gap:8px } .site-footer__crm .ico{ width:16px; height:16px } .site-footer__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; padding-top:20px; border-top:1px solid var(--dark-line); font-size:13px; color:var(--dark-ink-2) } .site-footer__legal a:hover{ text-decoration:underline; text-underline-offset:4px } .site-footer :focus-visible{ outline-color:#fff } @media (max-width:900px){ .site-footer__cols{ grid-template-columns:1fr 1fr } .site-footer__top{ flex-direction:column; align-items:flex-start } } @media (max-width:520px){ .site-footer__cols{ grid-template-columns:1fr; gap:28px } } /* ---------- 09. Хлебные крошки ---------- */ .crumbs ol{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-wrap:wrap; gap:8px; font-size:14px; color:var(--ink-3) } .crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--line-2) } .crumbs a{ color:var(--ink-2) } .crumbs a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--accent) } /* ---------- 10. Кадры и подписи ---------- Короткая форма (без параллакса):
Форма с параллаксом:
Внутренняя линия --inset рисуется поверх кадра (у img через outline, у .frame__clip через ::after). */ .frame{ margin:0; min-width:0 } .frame > img{ display:block; width:100%; height:auto; object-fit:cover; border-radius:var(--r); outline:1px solid rgba(21,24,33,.06); outline-offset:-1px } .frame--169 > img{ aspect-ratio:16/9 } .frame--43 > img{ aspect-ratio:4/3 } .frame--34 > img{ aspect-ratio:3/4 } .frame--45 > img{ aspect-ratio:4/5 } .frame--lg > img{ border-radius:var(--r-lg) } .frame__clip{ position:relative; overflow:hidden; overflow:clip; border-radius:var(--r); isolation:isolate; background:var(--bg-3) } .frame__clip::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:var(--inset); pointer-events:none; z-index:2 } .frame--169 .frame__clip{ aspect-ratio:16/9 } .frame--43 .frame__clip{ aspect-ratio:4/3 } .frame--34 .frame__clip{ aspect-ratio:3/4 } .frame--45 .frame__clip{ aspect-ratio:4/5 } .frame--lg .frame__clip{ border-radius:var(--r-lg) } .frame__clip > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; outline:0 } .caption{ display:flex; gap:10px; margin-top:12px; font-size:var(--fs-small); color:var(--ink-3); line-height:1.45 } .caption b{ font-size:12px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.7; flex:none } .frame--empty{ display:grid; place-items:center; background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r); color:var(--line-2) } .frame--empty.frame--43{ aspect-ratio:4/3 } .frame--empty.frame--34{ aspect-ratio:3/4 } .frame--empty.frame--169{ aspect-ratio:16/9 } .frame--empty.frame--45{ aspect-ratio:4/5 } /* полноширинный кадр: прямой потомок main, вне контейнера */ .band{ position:relative; margin:0; width:100% } .band__clip{ position:relative; overflow:hidden; overflow:clip; height:clamp(320px,52vw,640px); background:var(--bg-3) } .band__clip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60% } .band__caption{ position:absolute; left:0; right:0; bottom:0; padding:44px 0 18px; color:#fff; font-size:14px; line-height:1.45; background:linear-gradient(to top, rgba(21,24,33,.25), transparent 45%) } .band__caption .container{ display:flex; gap:10px } .band__caption b{ font-size:12px; font-weight:600; color:#fff; opacity:.85; line-height:1.7; flex:none } /* ---------- 11. Hero ---------- */ .hero{ position:relative } /* Вариант А: белая планка на кадре */ .hero--plate .hero__media{ width:100% } .hero--plate .hero__clip{ position:relative; overflow:hidden; overflow:clip; height:clamp(300px,52vw,640px); background:var(--bg-3) } .hero--plate .hero__clip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover } .hero__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--gutter); align-items:end } .hero__plate{ grid-column:1 / span 7; margin-top:-120px; position:relative; z-index:2; background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-plate); padding:clamp(28px,4vw,48px) } /* подпись к кадру: справа, сразу под фото (120px нахлёста планки + 12px) */ .hero__caption{ grid-column:9 / span 4; align-self:start; margin-top:132px; justify-content:flex-end; text-align:right } .hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px } .hero__phones{ margin-top:16px } .hero__phones a{ font-weight:600; color:var(--ink) } .hero .registry--mini{ margin-top:28px } @media (max-width:1100px){ .hero__plate{ grid-column:1 / span 8 } } @media (max-width:900px){ .hero--plate .hero__clip{ height:auto; aspect-ratio:4/3 } .hero__grid{ align-items:start } .hero__plate{ grid-column:span 12; margin-top:0; box-shadow:none; border-radius:0; padding:28px 0 0 } .hero__caption{ grid-column:span 12; order:-1; margin-top:0; text-align:left; justify-content:flex-start; padding:10px 0 0 } .hero__grid{ row-gap:0 } } /* Вариант Б: сплит, текст слева и кадр справа */ .hero--split{ padding-top:clamp(24px,4vw,56px) } .hero--split .grid{ align-items:center } @media (max-width:900px){ .hero--split .frame{ margin-top:32px } } /* Вариант В: без фото (контакты) */ .hero--text{ padding-top:clamp(24px,4vw,56px) } .hero--text .contact-cards{ margin-top:40px } .hero--text .lines--kv{ margin-top:32px; max-width:760px } /* ---------- 12. Реестр фактов ---------- */ .registry{ list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2) } .registry--6{ grid-template-columns:repeat(6,1fr) } .registry--5{ grid-template-columns:repeat(5,1fr) } .registry--4{ grid-template-columns:repeat(4,1fr) } .registry--3, .registry--mini{ grid-template-columns:repeat(3,1fr) } .registry__cell{ display:flex; flex-direction:column; gap:10px; padding:24px 20px 24px 20px; border-left:1px solid var(--line); min-width:0 } .registry__cell:first-child{ border-left:0; padding-left:0 } .registry__idx{ font-size:12px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1 } .registry .num{ white-space:nowrap } .registry .num small{ font-size:.42em; font-weight:500; color:var(--ink-3); letter-spacing:0 } .registry__label{ font-size:14px; color:var(--ink-2); line-height:1.4 } .registry--mini{ border-top-color:var(--line); border-bottom:0 } .registry--mini .num{ font-size:var(--fs-num-sm) } .registry--mini .registry__cell{ padding:16px 16px 0 16px; gap:6px } .registry--mini .registry__cell:first-child{ padding-left:0 } /* ячейки без индекса и числа: только подпись (условия, города) */ .registry--plain .registry__cell{ gap:4px; font-weight:600; font-size:16px; color:var(--ink) } .registry--plain .registry__cell .h4{ font-size:18px } .registry--plain .registry__label{ font-weight:400 } @media (max-width:900px){ .registry--6, .registry--5{ grid-template-columns:repeat(3,1fr) } .registry--4{ grid-template-columns:repeat(2,1fr) } .registry--6 .registry__cell:nth-child(3n+1), .registry--5 .registry__cell:nth-child(3n+1), .registry--4 .registry__cell:nth-child(2n+1){ border-left:0; padding-left:0 } .registry--6 .registry__cell:nth-child(n+4), .registry--5 .registry__cell:nth-child(n+4), .registry--4 .registry__cell:nth-child(n+3){ border-top:1px solid var(--line) } } @media (max-width:640px){ .registry--6, .registry--5, .registry--4, .registry--3{ grid-template-columns:repeat(2,1fr) } .registry .num{ font-size:32px } .registry__cell{ padding:16px 12px 16px 12px } .registry__cell:first-child{ padding-left:0 } .registry--6 .registry__cell, .registry--5 .registry__cell, .registry--4 .registry__cell, .registry--3 .registry__cell{ border-top:0; border-left:1px solid var(--line); padding-left:12px } .registry--6 .registry__cell:nth-child(2n+1), .registry--5 .registry__cell:nth-child(2n+1), .registry--4 .registry__cell:nth-child(2n+1), .registry--3 .registry__cell:nth-child(2n+1){ border-left:0; padding-left:0 } .registry--6 .registry__cell:nth-child(n+3), .registry--5 .registry__cell:nth-child(n+3), .registry--4 .registry__cell:nth-child(n+3), .registry--3 .registry__cell:nth-child(n+3){ border-top:1px solid var(--line) } .registry--mini{ grid-template-columns:repeat(3,1fr) } .registry--mini .num{ font-size:24px } .registry--mini .registry__cell{ padding:14px 10px 0 10px } .registry--mini .registry__cell:first-child{ padding-left:0 } } @media (max-width:360px){ .registry--mini{ grid-template-columns:1fr 1fr } } /* строковый реестр: категории, автопарк, работы, безопасность */ .registry--rows{ display:block } .registry__row{ display:grid; grid-template-columns:40px minmax(0,1fr) minmax(0,1.4fr) auto; gap:16px 24px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--line) } .registry__row:last-child{ border-bottom:0 } .registry__row .h4 + .small{ margin-top:0 } .registry__right{ font-size:14px; color:var(--ink-2); white-space:nowrap } @media (max-width:768px){ .registry__row{ grid-template-columns:32px minmax(0,1fr); gap:6px 16px } .registry__row .small, .registry__right{ grid-column:2 } } /* ---------- 13. Карточки направлений, чипы, «Подробнее» ---------- */ .dir-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter) } .dir-card{ display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; color:var(--ink); transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) } .dir-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-hover) } .dir-card--grey{ background:var(--bg-2) } .dir-card .frame > img{ border-radius:0; outline:0 } .dir-card__body{ display:flex; flex-direction:column; gap:12px; padding:24px; flex:1 } .dir-card .h3{ margin-top:2px } .dir-card p{ color:var(--ink-2); font-size:15px } .chips{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px } .chips li{ font-size:13px; line-height:1.3; padding:6px 10px; border-radius:var(--r-pill); background:var(--bg-3); color:var(--ink) } .more{ display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:8px; font-weight:600; font-size:15px; color:var(--ink) } .more .ico{ width:16px; height:16px; transition:transform var(--t-fast) var(--ease) } .dir-card:hover .more .ico, .more:hover .ico{ transform:translateX(4px) } .more--sm{ font-size:14px } .more--sm .ico{ width:14px; height:14px } .more--col{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:24px } .more--col .more{ margin-top:0; padding-top:0 } @media (max-width:1100px){ .dir-cards{ grid-template-columns:repeat(2,1fr) } } @media (max-width:640px){ .dir-cards{ grid-template-columns:1fr } } /* ---------- 14. Лента логотипов ---------- */ .partners{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line) } .partners li{ display:grid; place-items:center; height:96px; padding:18px; background:var(--bg); border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0 } .partners img{ max-height:44px; width:auto; max-width:100%; object-fit:contain } @media (max-width:1024px){ .partners{ grid-template-columns:repeat(4,1fr) } } @media (max-width:640px){ .partners{ grid-template-columns:repeat(3,1fr) } .partners li{ height:80px; padding:12px } .partners img{ max-height:36px } } /* ---------- 15. Площадки и регионы ---------- */ .site-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gutter) } .site-card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r); overflow:hidden } .site-card .frame > img{ border-radius:0; outline:0 } .site-card__body{ padding:18px 20px 20px; display:grid; gap:6px; justify-items:start } .site-card__body .h4 + .small{ margin-top:0 } .region-cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gutter) } .region-card{ min-width:0 } .region-card .h4{ margin-top:14px } .region-card .h4 + .small{ margin-top:2px } .region-cards + .small{ margin-top:32px } .site-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; font-size:14px; color:var(--ink-2); line-height:1.4 } .site-list li{ display:flex; gap:6px; align-items:flex-start } .site-list a{ display:inline-grid; place-items:center; width:24px; height:24px; flex:none; color:var(--ink); margin-top:-3px } .site-list a .ico{ width:16px; height:16px } .sites{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; column-gap:var(--gutter) } .sites li{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line) } .sites li:first-child, .sites li:nth-child(2){ border-top:1px solid var(--line) } .sites__city{ font-weight:600 } .sites__addr{ color:var(--ink-2) } .sites .more{ margin-top:0; padding-top:0 } @media (max-width:1100px){ .site-cards{ grid-template-columns:repeat(3,1fr) } .region-cards{ grid-template-columns:repeat(3,1fr) } } @media (max-width:900px){ .sites{ grid-template-columns:1fr } .sites li:nth-child(2){ border-top:0 } } @media (max-width:640px){ .site-cards{ grid-template-columns:repeat(2,1fr) } .site-card__body{ padding:14px } .region-cards{ grid-template-columns:repeat(2,1fr) } .sites li{ grid-template-columns:1fr; gap:4px } } /* ---------- 16. Шаги, плитки, списки, поля ---------- */ .steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gutter); border-top:1px solid var(--line-2) } .steps--3{ grid-template-columns:repeat(3,1fr) } .steps--4{ grid-template-columns:repeat(4,1fr) } .steps--6{ grid-template-columns:repeat(3,1fr) } .steps--col{ grid-template-columns:1fr } .step{ position:relative; padding-top:24px; display:flex; flex-direction:column; gap:10px; min-width:0 } .step::before{ content:""; position:absolute; top:-1px; left:0; width:40px; height:2px; background:var(--ink) } .step__idx{ font-size:13px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums; line-height:1 } .step .h4 + p{ margin-top:0 } .step p{ color:var(--ink-2); font-size:15px } .note-crm{ display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-3); margin-top:auto; padding-top:6px } .note-crm .ico{ width:14px; height:14px; margin-top:3px } .steps--col .step{ padding-top:20px } .steps--col .step + .step{ border-top:1px solid var(--line-2) } @media (max-width:900px){ .steps--4, .steps--6{ grid-template-columns:repeat(2,1fr) } } @media (max-width:640px){ .steps{ grid-template-columns:1fr; gap:20px } .step{ padding-top:18px } } .features{ list-style:none; margin:0; padding:0; display:grid; gap:var(--gutter) } .features--3{ grid-template-columns:repeat(3,1fr) } .features--4{ grid-template-columns:repeat(4,1fr) } .features--5{ grid-template-columns:repeat(5,1fr) } .feature{ display:flex; flex-direction:column; gap:12px; padding:26px 24px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); min-width:0 } .section--grey .feature{ background:var(--bg) } .section:not(.section--grey) .feature{ background:var(--bg-2) } .feature .ico{ color:var(--ink) } .feature .h4 + p{ margin-top:0 } .feature p{ color:var(--ink-2); font-size:15px } .feature ul{ margin:0; padding-left:18px; color:var(--ink-2); font-size:15px; display:grid; gap:4px } .feature .step__idx + .ico{ margin-top:2px } @media (max-width:1100px){ .features--4, .features--5{ grid-template-columns:repeat(2,1fr) } } @media (max-width:900px){ .features--3{ grid-template-columns:repeat(2,1fr) } } @media (max-width:640px){ .features{ grid-template-columns:1fr !important } .feature{ padding:20px } } .lines{ list-style:none; margin:0; padding:0 } .lines li{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line) } .lines li:first-child{ border-top:1px solid var(--line) } .lines .ico{ margin-top:2px; color:var(--ink) } .lines--kv li{ justify-content:space-between; gap:24px } .lines--kv li > span:first-child{ color:var(--ink-2); flex:0 0 40% } .lines--kv li > span:last-child{ text-align:right } .lines--kv a{ font-weight:600; text-decoration:none } .lines--kv a:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--accent) } @media (max-width:640px){ .lines--kv li{ flex-direction:column; gap:4px } .lines--kv li > span:last-child{ text-align:left } .lines--kv li > span:first-child{ flex:none } } .spread{ display:grid; grid-template-columns:3fr 8fr; column-gap:calc(var(--gutter) + (100% - 11*var(--gutter))/12) } .spread__aside{ display:flex; flex-direction:column; gap:20px } .inset{ display:flex; flex-direction:column; gap:6px; padding-left:16px; border-left:1px solid var(--line-2) } .inset .num{ font-size:var(--fs-num-sm) } .inset span{ font-size:14px; color:var(--ink-2) } @media (max-width:900px){ .spread{ grid-template-columns:1fr; row-gap:24px } .spread__aside{ flex-direction:row; flex-wrap:wrap; align-items:flex-start; gap:12px 32px } .spread__aside > .overline{ flex:1 0 100% } } /* ---------- 17. Заявка, CTA-полоса, карточка CRM, тёмная плита, контакт-карточка ---------- */ .request__card{ display:flex; flex-direction:column; gap:14px; padding:clamp(24px,3vw,36px); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); min-width:0 } .request__card > .small{ color:var(--ink-3) } .request__mail{ font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:-.01em; word-break:break-all; line-height:1.15; color:var(--ink) } .request__mail:hover{ text-decoration:underline; text-underline-offset:6px; text-decoration-color:var(--accent); text-decoration-thickness:1px } .request__card .btn{ align-self:flex-start } .request__card .lines{ margin-top:6px } .request__card .lines li:last-child{ border-bottom:0 } @media (max-width:900px){ .request__card{ margin-top:24px } } .cta-strip{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 28px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); margin-top:32px } .cta-strip p{ max-width:70ch } .cta-strip .btn{ flex:none } @media (max-width:768px){ .cta-strip{ flex-direction:column; align-items:flex-start; padding:20px } } .crm-card{ display:flex; flex-direction:column; gap:14px; padding:clamp(24px,3vw,36px); background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg) } .crm-card > .small{ color:var(--ink-3) } .crm-card__host{ font-size:clamp(22px,2.4vw,30px); font-weight:600; line-height:1.15; color:var(--ink) } .crm-card__cta{ display:flex; flex-wrap:wrap; gap:10px } .crm-card .btn--dark .ico--key{ color:#fff } @media (max-width:900px){ .crm-card{ margin-top:24px } } .plate--dark{ background:var(--dark); color:var(--dark-ink); border-radius:var(--r-plate); padding:clamp(28px,4.5vw,64px) } .plate--dark .grid{ align-items:center } .plate--dark .overline, .plate--dark .lead, .plate--dark .small, .plate--dark .caption, .plate--dark .lines li, .plate--dark .step p, .plate--dark .step__idx{ color:var(--dark-ink-2) } .plate--dark .h2, .plate--dark .h3, .plate--dark .h4, .plate--dark .display, .plate--dark .lines span{ color:var(--dark-ink) } .plate--dark .lines li{ border-color:var(--dark-line) } .plate--dark .lines .ico{ color:var(--dark-ink) } .plate--dark .caption b{ color:var(--dark-ink-2) } .plate--dark .step::before{ background:var(--dark-ink) } .plate--dark .steps{ border-top-color:var(--dark-line) } .plate--dark .steps--col .step + .step{ border-top-color:var(--dark-line) } .plate--dark :focus-visible{ outline-color:#fff } .plate--dark .frame > img{ outline:0 } .plate--dark .frame__clip::after{ display:none } .plate--dark .frame__clip, .plate--dark .hero__clip{ background:var(--dark-hover) } .plate__text .lines{ margin-top:28px } .plate__text .lines + .small{ margin-top:16px } .plate__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px } .plate__cta + .small{ margin-top:14px } .plate--dark .small a{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--dark-line); color:var(--dark-ink) } .plate--dark .small a:hover{ text-decoration-color:var(--dark-ink) } .plate--dark p > a:not([class]):hover{ text-decoration-color:var(--dark-ink) } @media (max-width:900px){ .plate--dark .frame{ margin-top:28px } } @media (max-width:640px){ .plate--dark{ border-radius:var(--r) } } .contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter) } .contact-card{ display:flex; flex-direction:column; gap:10px; padding:26px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); min-width:0 } .contact-card__phone{ font-size:clamp(20px,2vw,26px); font-weight:600; letter-spacing:-.01em; word-break:break-all; line-height:1.2; color:var(--ink) } .contact-card .btn{ align-self:flex-start; margin-top:6px } .contact-card .small a{ font-weight:600; color:var(--ink) } @media (max-width:900px){ .contact-cards{ grid-template-columns:1fr } } /* ---------- 18. Полоса пути техники (главная) ---------- */ .path-head{ margin:40px 0 12px } .path{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gutter) } .path a{ display:flex; flex-direction:column; gap:6px; padding:16px 0; border-top:1px solid var(--line); font-weight:600; font-size:var(--fs-h4); color:var(--ink); transition:border-color var(--t-fast) var(--ease) } .path a span{ font-size:12px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums } .path a:hover{ border-top-color:var(--ink) } @media (max-width:640px){ .path{ grid-template-columns:repeat(3,1fr); gap:12px } .path a{ font-size:16px } } /* ---------- 19. Закреплённая карточка, установка приложения, реквизиты ---------- */ .aside-card{ position:sticky; top:calc(var(--nav-h) + 24px); display:flex; flex-direction:column; gap:12px; padding:26px 24px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r) } .aside-card .btn{ align-self:flex-start } .aside-card .h4 + p{ margin-top:0 } @media (max-width:900px){ .aside-card{ position:static; margin-top:24px } } .install{ display:grid; gap:var(--gutter) } .install__card{ display:flex; flex-direction:column; gap:10px; padding:24px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r) } .install__card .btn{ align-self:flex-start; margin-top:4px } .install__card .overline + p{ margin-top:0 } @media (max-width:900px){ .install{ margin-top:24px } } .req{ margin:0 } .req > div{ display:grid; grid-template-columns:180px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px } .req > div:first-child{ border-top:1px solid var(--line) } .req dt{ color:var(--ink-2) } .req dd{ margin:0 } .req a{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line-2) } .req a:hover{ text-decoration-color:var(--accent) } @media (max-width:640px){ .req > div{ grid-template-columns:1fr; gap:2px } } /* ---------- 20. Появление блоков и параллакс ---------- .reveal: скрыт до пересечения с окном, JS ставит .is-in. Каскад через --i (0..5). Параллакс: при поддержке scroll-driven анимаций html получает .sd и работает CSS; иначе JS пишет --vp (0..1) в элемент [data-parallax] из IntersectionObserver + requestAnimationFrame. */ .js .reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay:calc(var(--i,0) * 60ms) } .js .reveal.is-in{ opacity:1; transform:none } .no-io .reveal{ opacity:1; transform:none } html:not(.js) .reveal{ opacity:1; transform:none } [data-parallax] .hero__clip, [data-parallax] .band__clip, [data-parallax] .frame__clip{ overflow:hidden; overflow:clip } [data-parallax] img{ will-change:transform; transform-origin:50% 50% } .js:not(.sd) [data-parallax] img{ transform:translate3d(0, calc((.5 - var(--vp,.5)) * 12%), 0) scale(1.12) } @supports (animation-timeline: view()){ .sd [data-parallax] .hero__clip, .sd [data-parallax] .band__clip, .sd [data-parallax] .frame__clip{ view-timeline-name:--px; view-timeline-axis:block } .sd [data-parallax] img{ animation:parallax linear both; animation-timeline:--px; animation-range:entry 0% exit 100% } @keyframes parallax{ from{ transform:translate3d(0,6%,0) scale(1.12) } to{ transform:translate3d(0,-6%,0) scale(1.12) } } } /* ---------- 21. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ [data-parallax] img{ transform:none !important; animation:none !important; will-change:auto } .reveal{ opacity:1 !important; transform:none !important; transition:none !important } .menu__panel, .menu__backdrop{ transition:none !important } *, *::before, *::after{ transition-duration:0ms !important; animation-duration:0ms !important; scroll-behavior:auto !important } } /* === Страничные дополнения === */ /* Сюда сборщики подстраниц дописывают стили с префиксом класса страницы: .p-stoyanki, .p-perevozki, .p-logistika, .p-servis, .p-platforma, .p-kontakty. Общие блоки выше не менять. */ /* === Логотипы партнёров крупнее, области нажатия шире === */ .partners img{ max-height:54px; max-width:84% } @media (max-width:640px){ .partners img{ max-height:40px } } .lines--kv a, .site-card .more, .hero__phones a, .site-footer__cols a, .site-card__list a{ display:inline-block; padding:5px 0; margin:-5px 0 } .site-card__list{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:6px } .site-card__list li{ display:flex; align-items:center; gap:6px } .site-card__list .ico{ width:14px; height:14px; color:var(--ink) } /* === Форма заявки === */ .request__card--form{ gap:18px } .lead{ display:grid; gap:14px; position:relative } .lead__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px } .field{ display:grid; gap:6px; min-width:0 } .field > span{ font-size:13px; color:var(--ink-2) } .field input, .field select, .field textarea{ width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; background:#fff; color:var(--ink); font:inherit; font-size:15px; line-height:1.4; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease) } .field select{ appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23151821' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px } .field textarea{ resize:vertical; min-height:88px } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:0; border-color:var(--ink); box-shadow:0 0 0 3px rgba(21,24,33,.08) } .field input:user-invalid, .field textarea:user-invalid{ border-color:var(--accent) } .field--wide{ grid-column:1 / -1 } .lead__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 } .check{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--ink-2); cursor:pointer } .check input{ width:18px; height:18px; margin-top:1px; flex:none; accent-color:var(--ink) } .check a{ text-decoration:underline; text-underline-offset:3px } .lead__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px } .lead__note a{ font-weight:600 } .lead__status{ margin:0; padding:10px 12px; border-radius:10px; background:var(--bg-3) } .lead__status:empty{ display:none } .lead__status.is-error{ background:#FBEDEE; color:#7D1114 } .lead__status.is-ok{ background:#EAF6EE; color:#1F5F3B; font-size:15px } .lead__status a{ font-weight:600; text-decoration:underline; text-underline-offset:3px } .lead.is-sent .lead__grid, .lead.is-sent .check, .lead.is-sent .lead__actions, .lead.is-sent .overline{ display:none } .lead.is-busy button{ opacity:.6; pointer-events:none } @media (max-width:520px){ .lead__grid{ grid-template-columns:1fr } } /* === Уведомление о cookie === */ .cookiebar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; max-width:760px; margin:0 auto; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 12px 40px rgba(21,24,33,.14); font-size:14px; line-height:1.45; color:var(--ink-2) } .cookiebar p{ margin:0; flex:1 1 320px } .cookiebar a{ text-decoration:underline; text-underline-offset:3px; color:var(--ink) } .cookiebar .btn{ height:40px; padding:0 18px } @media (max-width:520px){ .cookiebar{ left:8px; right:8px; bottom:8px; padding:12px 14px } } /* === Вопросы и ответы === */ .faq{ border-top:1px solid var(--line); max-width:860px } .faq details{ border-bottom:1px solid var(--line) } .faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px 0; font-weight:600; font-size:17px; line-height:1.35; color:var(--ink) } .faq summary::-webkit-details-marker{ display:none } .faq summary::after{ content:"+"; flex:none; width:24px; height:24px; display:grid; place-items:center; font-weight:400; font-size:22px; line-height:1; color:var(--ink-3); transition:transform var(--t-fast) var(--ease) } .faq details[open] summary::after{ transform:rotate(45deg) } .faq p{ margin:0 0 18px; color:var(--ink-2); max-width:72ch } /* === Текстовые страницы (политика, о компании) === */ .prose{ max-width:78ch } .prose h2{ margin:40px 0 14px; font-size:clamp(20px,2vw,26px); letter-spacing:-.01em } .prose h3{ margin:26px 0 10px; font-size:18px } .prose p, .prose li{ color:var(--ink-2); line-height:1.6 } .prose ul, .prose ol{ padding-left:22px; margin:0 0 16px } .prose li{ margin:6px 0 } .prose strong{ color:var(--ink) } .prose .small{ color:var(--ink-3) } /* === Заголовок текстовых страниц, крупные чипы-ссылки (регионы) === */ .h1{ font-size:clamp(30px,4vw,46px); line-height:1.1; letter-spacing:-.02em; margin:8px 0 18px } .chips--lg{ gap:8px } .chips--lg li{ padding:0; background:var(--bg); border:1px solid var(--line-2) } .chips--lg a{ display:inline-block; padding:10px 16px; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none } .chips--lg a:hover{ text-decoration:underline; text-underline-offset:4px } .step .h4 a{ text-decoration:none } .step .h4 a:hover{ text-decoration:underline; text-underline-offset:4px } .site-footer__cols a.site-footer__crm{ display:inline-flex; align-items:center; gap:8px } /* === Контакты по направлениям === */ .contact-cards--6{ grid-template-columns:repeat(3,1fr) } .contact-card__mail{ font-size:17px; font-weight:600; color:var(--ink); word-break:break-all } .contact-card__phone--mail{ font-size:clamp(18px,1.7vw,22px) } .contact-card__mail:hover, .contact-card__phone:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--accent) } /* === Расширенная заявка: шаги, выбор чипами, адреса, карточка маршрута === */ .vh{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 } .field > label{ font-size:13px; color:var(--ink-2) } .request--wide .sec-head{ max-width:820px } .lead--route{ gap:24px; padding:clamp(20px,3vw,36px); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg) } .lead--route fieldset{ border:0; margin:0; padding:0; min-width:0 } .lead--route .step-pane + .step-pane{ margin-top:28px } .lead--route.is-stepped .step-pane + .step-pane{ margin-top:0 } .lead__layout{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start } .lead__steps{ display:grid; gap:18px; min-width:0 } .lead__nav{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:4px } .lead--route:not(.is-stepped) [data-prev], .lead--route:not(.is-stepped) [data-next]{ display:none } .stepper{ list-style:none; margin:0; padding:0; display:flex; gap:8px; counter-reset:none } .stepper__item{ flex:1 1 0; display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink-3); font-size:14px; font-weight:600; cursor:default; min-width:0; transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease) } .stepper__num{ flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); font-size:12px; font-variant-numeric:tabular-nums } .stepper__label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .stepper__item.is-active{ color:var(--ink); border-color:var(--ink) } .stepper__item.is-active .stepper__num{ background:var(--ink); border-color:var(--ink); color:#fff } .stepper__item.is-done{ color:var(--ink); cursor:pointer } .stepper__item.is-done .stepper__num{ background:var(--bg-3); border-color:var(--bg-3) } .picks{ display:flex; flex-wrap:wrap; gap:8px } .pick{ position:relative; cursor:pointer } .pick input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer } .pick span{ display:inline-flex; align-items:center; min-height:40px; padding:8px 14px; border:1px solid var(--line-2); border-radius:999px; background:#fff; font-size:14px; color:var(--ink); transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease) } .pick:hover span{ border-color:var(--ink) } .pick input:checked + span{ background:var(--ink); border-color:var(--ink); color:#fff } .pick input:focus-visible + span{ box-shadow:0 0 0 3px rgba(21,24,33,.16) } .check.field--wide{ grid-column:1 / -1 } .addr{ position:relative } .addr__list{ position:absolute; z-index:20; left:0; right:0; top:calc(100% + 4px); margin:0; padding:6px; list-style:none; background:#fff; border:1px solid var(--line-2); border-radius:12px; box-shadow:0 16px 40px rgba(21,24,33,.14); max-height:260px; overflow:auto } .addr__list li{ padding:10px 12px; border-radius:8px; font-size:14px; line-height:1.35; color:var(--ink); cursor:pointer } .addr__list li:hover, .addr__list li.is-active{ background:var(--bg-3) } .addr.is-resolved input{ border-color:var(--ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231F5F3B' stroke-width='2'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px } .route-card{ position:sticky; top:calc(var(--nav-h, 72px) + 16px); display:grid; gap:14px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:var(--r); min-width:0 } .route-card__map{ height:240px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg-3); isolation:isolate } .route-card__empty{ margin:0; padding:26px 16px; border:1px dashed var(--line-2); border-radius:12px; text-align:center; color:var(--ink-3); font-size:14px } .route-card__facts{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) } .route-card__facts > div{ padding:14px 0 } .route-card__facts > div + div{ padding-left:16px; border-left:1px solid var(--line) } .route-card__facts dt{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3) } .route-card__facts dd{ margin:6px 0 0; font-size:clamp(24px,2.4vw,32px); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink) } .route-card__path{ margin:0; color:var(--ink-2) } .route-card__note{ margin:0; color:var(--ink-3) } .route-card__contacts li:first-child{ border-top:0 } .route-card.is-loading .route-card__facts dd{ opacity:.35 } @media (max-width:980px){ .lead__layout{ grid-template-columns:1fr } .route-card{ position:static } } @media (max-width:560px){ .stepper__label{ display:none } .stepper__item{ justify-content:center } .stepper__item.is-active .stepper__label{ display:inline } .route-card__map{ height:200px } } .lead--route.is-sent .stepper, .lead--route.is-sent .lead__layout > .lead__steps > fieldset, .lead--route.is-sent .lead__nav{ display:none } /* форма заявки делит имя класса с вводным абзацем .lead: снимаем его ограничения */ form.lead{ max-width:none; font-size:16px; line-height:1.5; color:var(--ink); margin:0 } form.lead--route{ width:100% } /* === Переносы: телефоны, интервалы, числа с единицами не рвутся; заголовки и абзацы переносятся ровнее === */ a[href^="tel:"], .nw, .num, .contact-card__phone{ white-space:nowrap } .display, .h1, .h2, .h3, .h4, h1, h2, h3{ text-wrap:balance } p, li, .lead, .small{ text-wrap:pretty } .lines--kv li{ flex-wrap:wrap } .lines--kv li > span:first-child{ flex:1 1 40% } .lines--kv li > span:last-child{ flex:1 1 auto; min-width:0 } .route-card__contacts li{ flex-direction:column; gap:4px } .route-card__contacts li > span:first-child{ flex:none; font-size:13px } .route-card__contacts li > span:last-child{ text-align:left } .route-card__facts dd{ font-size:clamp(22px,2vw,28px); white-space:nowrap } .route-card__facts > div + div{ padding-left:14px } @media (max-width:1180px) and (min-width:981px){ .route-card__facts dd{ font-size:22px } } /* === Карта Яндекса в карточке маршрута, выбор точки === */ .route-card__map{ height:260px; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--bg-3); isolation:isolate } .route-card__map[hidden]{ display:none } .route-card.is-picking .route-card__map{ outline:2px solid var(--ink); outline-offset:2px; cursor:crosshair } .route-card.is-picking .route-card__map [class*="ymaps"]{ cursor:crosshair } .route-card__hint{ margin:0; color:var(--ink-3) } .addr__pick{ position:absolute; right:0; top:-2px; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px solid var(--line-2); border-radius:999px; background:#fff; color:var(--ink); font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) } .addr__pick .ico{ width:14px; height:14px } .addr__pick:hover{ border-color:var(--ink) } .addr__pick.is-active{ background:var(--ink); border-color:var(--ink); color:#fff } .addr > label{ padding-right:150px } @media (max-width:520px){ .addr__pick{ position:static; margin-top:4px; order:3 } .addr > label{ padding-right:0 } .route-card__map{ height:220px } } /* атрибут hidden сильнее любых display у компонентов */ [hidden]{ display:none !important }