/* VOLZAR: собран автоматически из ds/tokens/*.css и ds/site.css. Руками не править, правку затрёт node build/render.mjs. */ /* VOLZAR - Webfonts Лицензионных файлов шрифтов заказчик не давал. Берём ближайшие с Google Fonts: Montserrat для заголовков, Inter для текста. Обе гарнитуры полноценно закрывают кириллицу. Раньше здесь лежали @font-face с прямыми ссылками на fonts.gstatic.com. Так делать нельзя по двум причинам: 1. Ссылка привязана к версии семейства (v29), при обновлении она умирает. 2. Без unicode-range браузер не знает, какие буквы внутри файла, и тянет его целиком. Montserrat 700 и 800 к тому же указывали на один и тот же файл, то есть ExtraBold фактически не грузился, хотя все заголовки на сайте капсом и по-русски. Теперь шрифты подключаются одной ссылкой в , см. build/lib/layout.mjs. Google отдаёт нужный формат под конкретный браузер и раскладывает семейство по unicode-range, поэтому латинская часть для русской страницы не скачивается вовсе. Если заказчик пришлёт лицензионные файлы: положить их в site/ds/assets/fonts/, вернуть сюда @font-face со своими путями и убрать ссылку на Google из layout.mjs. Больше ничего менять не нужно, имена семейств в typography.css те же. */ /* VOLZAR — цветовые токены Принцип: высокий контраст, тиловые «острова» на светлом фоне. Без градиентов, без размытых теней. КОНТРАСТ. Фирменный тил #2C9991 с белым текстом даёт 3.46:1 — это ниже порога WCAG AA для обычного текста (4.5:1). Поэтому ramp разведён: --blue-500 #2C9991 — фирменный. Декор: бары, точки, лого, рамки, крупные заголовки от 24px, иконки. --blue-600 #247E77 — рабочий. Любая поверхность с мелким белым текстом: кнопки, тил-острова, шапки таблиц, футер. 4.86:1, AA пройден. Не заливать мелкий белый текст на --blue-500. */ :root { /* ---- Фирменный тил ---- */ --blue-500: #2C9991; /* основной фирменный */ --blue-600: #247E77; /* hover + поверхности с белым текстом */ --blue-700: #1C635E; /* pressed, глубокий, редко */ --blue-100: #DDEEEC; /* тинт-поверхность */ --blue-050: #F1F8F7; /* самый светлый тинт */ /* ---- Нейтральные ---- */ --white: #FFFFFF; --sand-050: #F5F7F7; /* почти белый, холодный */ --sand-100: #ECEFF0; /* холодно-серый фон секций */ --sand-200: #DCE1E3; /* волосяные границы */ --sand-300: #C6CDD0; /* граница поплотнее */ --graphite-900: #1B2024; /* основной текст */ --graphite-700: #3B4348; /* вторичный текст */ --graphite-500: #6B7479; /* подписи, приглушённый */ --graphite-300: #A3ABAF; /* disabled */ /* ---- Тил вторичный (шапки таблиц, мелкие метки) ---- */ --teal-500: #2C9991; --teal-600: #247E77; --teal-100: #DDEEEC; /* ---- Функциональные ---- */ --green-500: #1F9D57; /* экономия, «да» */ --green-100: #E4F5EC; --red-500: #D64545; /* недостаток OEM, «нет» */ --red-100: #FBEAEA; --amber-500: #FFC734; /* акцент: пилюли секций, маркеры буллетов */ --amber-600: #E5AE1C; --amber-100: #FFF4D6; /* ---- Семантические алиасы ---- */ --surface-page: var(--white); --surface-alt: var(--sand-100); /* чередующиеся секции */ --surface-card: var(--white); --surface-island: var(--blue-600); /* тил-блоки: внутри белый текст */ --surface-tint: var(--blue-050); --surface-disabled: var(--sand-100); --text-strong: var(--graphite-900); --text-body: var(--graphite-700); --text-muted: var(--graphite-500); --text-on-blue: var(--white); --text-on-blue-soft: rgba(255,255,255,0.80); --text-link: var(--blue-600); --border-subtle: var(--sand-200); --border-strong: var(--sand-300); --border-on-blue: rgba(255,255,255,0.28); --accent: var(--blue-600); /* кнопки: белый текст, нужен AA */ --accent-hover: var(--blue-700); --accent-contrast: var(--white); --accent-brand: var(--blue-500); /* декор без текста */ --table-head: var(--blue-600); --table-stripe: var(--sand-050); } /* VOLZAR - Typography tokens Display: Montserrat ExtraBold, UPPERCASE, tight tracking. Body: Inter, normal case, line-height 1.4-1.5. Strict hierarchy. */ :root { /* ---- Families ---- */ --font-display: "Montserrat", "Inter", system-ui, sans-serif; /* @kind font */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* @kind font */ /* ---- Weights ---- */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-extra: 800; /* @kind font */ /* ---- Display scale (Montserrat, uppercase) ---- */ --fs-display: clamp(48px, 6vw, 88px); /* @kind font */ --fs-h1: clamp(36px, 4vw, 56px); /* @kind font */ --fs-h2: clamp(28px, 3vw, 40px); /* @kind font */ --fs-h3: 24px; /* @kind font */ --fs-eyebrow: 14px; /* @kind font */ /* ---- Body scale (Inter) ---- */ --fs-lead: 20px; /* @kind font */ --fs-body: 16px; /* @kind font */ --fs-sm: 14px; /* @kind font */ --fs-xs: 12px; /* @kind font */ /* ---- Line heights ---- */ --lh-tight: 1.04; /* @kind font */ --lh-heading: 1.12; /* @kind font */ --lh-snug: 1.3; /* @kind font */ --lh-body: 1.5; /* @kind font */ /* ---- Letter spacing ---- */ --ls-display: -0.01em; /* @kind font */ --ls-heading: 0.01em; /* @kind font */ --ls-caps: 0.08em; /* @kind font */ --ls-caps-wide:0.14em; /* @kind font */ } /* VOLZAR - Spacing, radii, sizing. 4px base grid. */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---- Radii ---- (blue islands ~16-20px; pills fully round) */ --radius-sm: 8px; --radius-md: 12px; /* buttons, inputs */ --radius-lg: 16px; /* cards */ --radius-xl: 20px; /* blue feature islands */ --radius-2xl: 28px; --radius-pill: 999px; /* pill section headers, chips */ /* ---- Layout ---- */ --container: 1200px; --container-wide: 1360px; --gutter: 24px; /* ---- Control sizing ---- */ --control-h-sm: 36px; --control-h: 44px; /* min hit target */ --control-h-lg: 56px; /* ---- Borders ---- */ --border-width: 1px; --border-width-strong: 2px; } /* VOLZAR - Elevation & motion. Brand is flat: NO blur-heavy drop shadows, NO gradients. Depth comes from color blocks and hairline borders. Shadows here are subtle and optional. */ :root { --shadow-none: none; --shadow-hairline: 0 0 0 1px var(--sand-200); --shadow-card: 0 1px 2px rgba(26,26,26,0.06), 0 2px 8px rgba(26,26,26,0.04); --shadow-raised: 0 4px 16px rgba(26,26,26,0.08); /* Motion - restrained, no bounce. Quick functional transitions. */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 180ms; /* @kind other */ --dur-slow: 280ms; /* @kind other */ } /* VOLZAR: глобальные стили и компоненты дизайн-системы. Собрано 28.07.2026 при переходе со сборки в браузере на статику. Раньше эти правила жили инлайновыми стилями внутри JSX, из-за чего медиазапросы к ним не применялись. Теперь всё классами. Токены подключаются отдельно: ds/styles.css. */ /* ============================================================ 1. База ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text-strong); background: var(--white); -webkit-font-smoothing: antialiased; line-height: var(--lh-body); } a { color: inherit; text-decoration: none; } img { max-width: 100%; } ::selection { background: var(--blue-100); } :focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } .wrap { max-width: 1180px; margin: 0 auto; padding-left: clamp(20px, 5vw, 32px); padding-right: clamp(20px, 5vw, 32px); } .num { font-variant-numeric: tabular-nums; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ============================================================ 2. Типографика ============================================================ */ .display { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); color: var(--graphite-900); } .display--light { color: var(--white); } .h1 { font-size: clamp(30px, 4.2vw, 52px); } .h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 14px; } .h3 { font-size: 20px; letter-spacing: 0.02em; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-body); max-width: 60ch; } .lead--light { color: var(--text-on-blue-soft); } .body { font-size: var(--fs-body); line-height: 1.55; color: var(--text-body); } .muted { color: var(--text-muted); } .fine { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); } .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--blue-500); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; } .eyebrow--light { color: var(--text-on-blue-soft); } .summary { border-top: 1px solid var(--border-subtle); padding-top: 18px; margin-top: 26px; } .summary--light { border-top-color: var(--border-on-blue); } .summary__label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 0.05em; color: var(--graphite-900); margin-bottom: 6px; } .summary--light .summary__label { color: var(--white); } .summary__text { font-size: 16px; color: var(--text-body); line-height: 1.5; } .summary--light .summary__text { color: var(--text-on-blue-soft); } /* ============================================================ 3. Секции и сетки ============================================================ */ .sec { padding: clamp(56px, 8vw, 96px) 0; } .sec--tight { padding: clamp(40px, 5vw, 64px) 0; } .sec-sand { background: var(--sand-100); } .sec-white { background: var(--white); } .sec-tint { background: var(--blue-050); } .sec-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .grid-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .grid-split { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ============================================================ 4. Компоненты дизайн-системы ============================================================ */ /* --- Кнопка --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--control-h); padding: 0 22px; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.01em; border: var(--border-width-strong) solid transparent; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; text-decoration: none; box-sizing: border-box; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .btn--sm { height: var(--control-h-sm); padding: 0 16px; font-size: 14px; } .btn--lg { height: var(--control-h-lg); padding: 0 30px; font-size: 17px; } .btn--block { width: 100%; } .btn--primary { background: var(--blue-600); color: var(--white); border-color: var(--blue-600); } .btn--primary:hover { background: var(--blue-700); border-color: var(--blue-700); } .btn--secondary { background: transparent; color: var(--blue-600); border-color: var(--blue-600); } .btn--secondary:hover { background: var(--blue-050); } .btn--ghost { background: transparent; color: var(--graphite-900); border-color: transparent; } .btn--ghost:hover { background: var(--sand-100); } .btn--onblue { background: var(--white); color: var(--blue-600); border-color: var(--white); } .btn--onblue:hover { background: rgba(255,255,255,0.88); } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .btn__arrow { width: 16px; height: 16px; margin-right: -2px; flex: none; } /* --- Карточка --- */ .card { background: var(--white); border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid var(--border-subtle); } .card--sand { background: var(--sand-100); } .card--tint { background: var(--blue-050); } .card--xl { border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 32px); } .card--flush { border: none; } /* --- Тиловый остров --- */ .island { position: relative; background: var(--surface-island); color: var(--text-on-blue); border-radius: var(--radius-xl); padding: var(--space-7); overflow: hidden; } .island--lg { border-radius: var(--radius-lg); } .island--2xl { border-radius: var(--radius-2xl); } .island__arrow { position: absolute; top: var(--space-5); right: var(--space-5); width: 56px; height: 56px; } /* --- Бейдж --- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; background: var(--teal-100); color: var(--teal-600); } .badge--blue { background: var(--blue-100); color: var(--blue-600); } .badge--green { background: var(--green-100); color: var(--green-500); } .badge--red { background: var(--red-100); color: var(--red-500); } .badge--neutral { background: var(--sand-100); color: var(--graphite-700); } .badge--solid { background: var(--blue-600); color: var(--white); } /* --- Метрика --- */ .stat { display: flex; flex-direction: column; gap: 6px; } .stat--center { align-items: center; text-align: center; } .stat__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.5vw, 56px); line-height: 1; letter-spacing: var(--ls-display); color: var(--blue-500); font-variant-numeric: tabular-nums; } .stat--graphite .stat__value { color: var(--graphite-900); } .stat--onblue .stat__value { color: var(--white); } .stat__label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); } .stat--onblue .stat__label { color: var(--text-on-blue-soft); } /* --- Список с маркерами --- */ .bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; } .bullets li { display: flex; gap: 12px; align-items: flex-start; color: var(--graphite-700); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.45; } .bullets--light li { color: var(--white); } .bullets__mark { width: 8px; height: 8px; background: var(--blue-500); margin-top: 7px; flex: none; } .bullets--light .bullets__mark { background: var(--white); } .bullets--dot .bullets__mark { width: 6px; height: 6px; border-radius: 50%; margin-top: 9px; } /* --- Пилюля-заголовок --- */ .pill-head { display: flex; align-items: center; justify-content: center; background: var(--blue-600); color: var(--white); border-radius: var(--radius-pill); padding: 18px 36px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: var(--ls-heading); font-size: clamp(20px, 2.4vw, 30px); line-height: 1.1; } .pill-head--left { justify-content: flex-start; } /* --- Таблица --- */ .dtable { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); } .dtable table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--fs-sm); } .dtable caption { caption-side: top; text-align: left; padding: 0 0 12px; color: var(--text-muted); font-size: var(--fs-sm); } .dtable th { background: var(--teal-600); color: var(--white); text-align: left; padding: 14px 18px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; white-space: nowrap; } .dtable td { padding: 13px 18px; color: var(--text-body); border-top: 1px solid var(--border-subtle); } .dtable tbody tr:nth-child(even) { background: var(--table-stripe); } .dtable td:first-child { font-weight: 500; } .dtable .is-num { text-align: right; font-variant-numeric: tabular-nums; } .dtable th.is-hl { background: var(--blue-600); } .dtable td.is-hl { color: var(--blue-600); font-weight: 600; background: var(--blue-050); } /* --- Поле формы --- */ .field { display: flex; flex-direction: column; gap: 7px; } .field__label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.02em; color: var(--text-strong); } .field__req { color: var(--blue-500); } .field__control { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-strong); background: var(--white); border: 2px solid var(--border-strong); border-radius: var(--radius-md); padding: 0 14px; height: var(--control-h); outline: none; transition: border-color var(--dur-fast) var(--ease-standard); } .field__control:focus { border-color: var(--blue-500); } textarea.field__control { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; } .field__hint { font-size: var(--fs-xs); color: var(--text-muted); } /* ============================================================ 5. Шапка, подвал, навигация ============================================================ */ .ubar { background: var(--graphite-900); color: rgba(255,255,255,.62); font-size: 13px; } .ubar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 40px; } .ubar a { transition: color var(--dur-fast) var(--ease-standard); } .ubar a:hover { color: var(--white); } .ubar__right { display: flex; gap: 24px; align-items: center; } .ubar__phone { color: var(--white); font-weight: 600; } @media (max-width: 760px) { .ubar__left { display: none; } .ubar .wrap { justify-content: center; } } header.site { position: sticky; top: 0; z-index: 60; background: var(--white); border-bottom: 1px solid var(--border-subtle); } .nav { display: flex; align-items: center; height: 74px; gap: 34px; } .nav__logo { display: flex; align-items: center; } .menu { display: flex; gap: 26px; align-items: center; height: 100%; list-style: none; } .menu > li { height: 100%; display: flex; align-items: center; position: relative; } .menu > li > a, .menu > li > button { font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--graphite-700); background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; height: 100%; transition: color var(--dur-fast) var(--ease-standard); } .menu > li > a:hover, .menu > li > button:hover, .menu > li:hover > button, .menu > li:focus-within > button { color: var(--blue-500); } .menu > li[aria-current="page"] > a { color: var(--blue-600); font-weight: 600; } .caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-base) var(--ease-standard); } .menu > li:hover .caret, .menu > li:focus-within .caret { transform: rotate(-135deg) translateY(-1px); } .nav__right { margin-left: auto; display: flex; align-items: center; gap: 18px; } .nav__phone { font-weight: 700; font-size: 15px; white-space: nowrap; transition: color var(--dur-fast); } .nav__phone:hover { color: var(--blue-500); } /* Мега-меню на чистом CSS, без JS */ .mega { position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); min-width: 580px; padding: 22px; box-shadow: var(--shadow-raised); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility var(--dur-base); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; } .menu > li:hover .mega, .menu > li:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); } .mega__head { grid-column: 1 / -1; font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; } .mega a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); transition: background var(--dur-fast) var(--ease-standard); } .mega a:hover { background: var(--sand-100); } .mega a b { font-weight: 600; font-size: 14.5px; color: var(--graphite-900); } .mega a span { font-size: 12.5px; color: var(--text-muted); } .mega a .eq { font-size: 12.5px; color: var(--blue-500); font-weight: 500; letter-spacing: .01em; } .mega__all { grid-column: 1 / -1; } .burger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 10px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } .burger span { width: 24px; height: 2px; background: var(--graphite-900); display: block; } @media (max-width: 1040px) { .menu, .nav__phone { display: none; } .burger { display: flex; } .nav { gap: 14px; height: 64px; } } /* Мобильное меню: чекбокс вместо JS */ .drawer-toggle { position: absolute; opacity: 0; pointer-events: none; } .drawer { position: fixed; inset: 0; background: rgba(26,26,26,.5); z-index: 80; display: none; } .drawer-toggle:checked ~ .drawer { display: block; } .drawer__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(84vw, 360px); background: var(--white); padding: 24px; overflow: auto; } .drawer__link { display: block; padding: 15px 4px; border-bottom: 1px solid var(--sand-200); font-weight: 600; font-size: 16px; color: var(--graphite-900); } .drawer__sub { display: block; padding: 11px 4px 11px 16px; border-bottom: 1px solid var(--sand-200); font-size: 14.5px; color: var(--graphite-700); } .drawer__close { float: right; font-size: 30px; background: none; border: none; cursor: pointer; line-height: 1; color: var(--graphite-700); min-width: 44px; min-height: 44px; } .drawer__head { font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin: 22px 0 6px; } .foot { background: var(--graphite-900); color: rgba(255,255,255,.6); padding: 56px 0 30px; } .foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; } .foot h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--white); font-size: 13px; letter-spacing: 0.1em; margin-bottom: 14px; } .foot a { display: block; padding: 6px 0; font-size: 14px; color: rgba(255,255,255,.7); transition: color var(--dur-fast); } .foot a:hover { color: var(--white); } .foot__about { margin-top: 16px; font-size: 14px; max-width: 34ch; line-height: 1.55; } .foot__legal { border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.4); } .foot__legal span { max-width: 70ch; } @media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .foot__grid { grid-template-columns: 1fr; } } /* ============================================================ 6. Хлебные крошки ============================================================ */ .crumbs { font-size: 13px; color: var(--text-muted); padding: 18px 0; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; } .crumbs a:hover { color: var(--blue-500); } .crumbs li + li::before { content: "/"; margin: 0 9px; color: var(--border-strong); } /* ============================================================ 7. Прикладные блоки ============================================================ */ .hovercard { transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); display: block; } .hovercard:hover { border-color: var(--blue-500); transform: translateY(-3px); box-shadow: var(--shadow-raised); } .trust-band { margin-top: calc(-1 * clamp(28px, 6vw, 64px)); position: relative; z-index: 2; } .trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 18px; } .trust-grid > div { display: flex; flex-direction: column; gap: 6px; } .trust-grid__v { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(18px,1.6vw,24px); color: var(--white); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .trust-grid__l { font-size: 12.5px; color: var(--text-on-blue-soft); line-height: 1.3; } @media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } } .ind-tile { transition: background var(--dur-base) var(--ease-standard); } .ind-tile:hover { background: var(--blue-600); } .ind-tile:hover .ind-tile__name { color: var(--white); } .ind-tile:hover .ind-tile__num, .ind-tile:hover .ind-tile__go { color: rgba(255,255,255,.8); } .ind-tile--off { opacity: .62; } .brandwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sand-200); border: 1px solid var(--sand-200); border-radius: var(--radius-lg); overflow: hidden; } .brandwall__cell { background: var(--white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; min-height: 128px; } .brandwall__cell img { display: block; width: 100%; max-width: 288px; height: auto; opacity: .56; transition: opacity var(--dur-base) var(--ease-standard); } .brandwall__cell:hover img { opacity: 1; } /* Название текстом, а не только в alt: по логотипу-картинке запрос «аналог Warman» на сайт не приходит. */ .brandwall__name { font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: 600; text-align: center; } @media (max-width: 900px) { .brandwall { grid-template-columns: repeat(2, 1fr); } .brandwall__cell { min-height: 112px; padding: 20px 18px; } } @media (max-width: 520px) { .brandwall { grid-template-columns: 1fr; } } /* Параметры: сетка на десктопе, карточки «имя: значение» на телефоне. Горизонтальная прокрутка в таблице характеристик убивает чтение. */ .params { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .params--6 { grid-template-columns: repeat(6, 1fr); } .params__cell { background: var(--white); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; } .params__k { font-size: 12px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .params__v { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--graphite-900); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; } @media (max-width: 1040px) { .params--6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .params, .params--6 { grid-template-columns: 1fr; } .params__cell { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 16px; } .params__v { font-size: 16px; text-align: right; } } /* Таблица соответствий и любая широкая таблица на телефоне */ @media (max-width: 720px) { .dtable--stack thead { display: none; } .dtable--stack tr { display: block; border-top: 1px solid var(--border-subtle); padding: 6px 0; } .dtable--stack tbody tr:nth-child(even) { background: var(--table-stripe); } .dtable--stack td { display: flex; justify-content: space-between; gap: 16px; border: none; padding: 7px 16px; text-align: right; } .dtable--stack td::before { content: attr(data-k); font-weight: 600; color: var(--text-muted); text-align: left; flex: none; } .dtable--stack td:first-child { font-size: 15px; } } /* ============================================================ 8. Липкая нижняя панель, телефон ============================================================ */ .sticky-cta { display: none; } @media (max-width: 760px) { .sticky-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-top: 1px solid var(--border-subtle); } .sticky-cta .btn { width: 100%; height: 48px; font-size: 15px; } body { padding-bottom: 76px; } } /* ============================================================ 9. Формы заявки ============================================================ */ .leadform { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .leadform__wide { grid-column: 1 / -1; } .leadform__note { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); } /* Ссылка на политику: без подчёркивания её не отличить от текста подписи. */ .leadform__note a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 2px; } .leadform__note a:hover { color: var(--blue-700); } .leadform__error { grid-column: 1 / -1; font-size: 13.5px; color: var(--red-500); font-weight: 600; } .leadform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .leadform__ok { padding: 40px 8px; text-align: center; } .leadform__ok-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 22px; color: var(--blue-600); } @media (max-width: 620px) { .leadform { grid-template-columns: 1fr; } } .contacts-line { margin-top: 28px; font-size: 15px; line-height: 2; color: var(--text-body); } .contacts-line strong { color: var(--graphite-900); } /* ============================================================ 10. Печать ============================================================ */ @media print { .ubar, header.site, .sticky-cta, .foot, .drawer { display: none !important; } body { padding-bottom: 0; } } /* ============================================================ КАРТОЧКА СЕРИИ И МЕЛКИЕ ПОВТОРЫ Раньше эти наборы жили в атрибутах style и повторялись по 132 раза на сайт. В атрибут медиазапрос не попадает, поэтому мобильную вёрстку было нечем править. Значения перенесены один в один, внешний вид не изменился. ============================================================ */ .scard__head { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; } .scard__body { display: flex; flex-direction: column; gap: 10px; min-height: 180px; } .scard__desc { font-size: 13.5px; color: var(--text-body); line-height: 1.45; } .scard__meta { margin-top: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-muted); } .scard__more { font-weight: 600; font-size: 13.5px; color: var(--blue-600); } .tile-title { font-weight: 600; font-size: 15.5px; color: var(--graphite-900); } .tile-mini { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border-radius: var(--radius-md); } .muted-sm { font-size: 13px; color: var(--text-muted); } .accent { color: var(--blue-600); font-weight: 700; } .ico { display: block; flex-shrink: 0; } /* На узком экране карточке серии больше не нужна фиксированная высота: она задавалась ради ровной сетки, а в одну колонку сетки нет. */ @media (max-width: 600px) { .scard__body { min-height: 0; } .scard__head { padding: 14px 16px; } }