/* 04.09.2026 (п.30 списка Никиты): цвета переведены на переменные с фолбэком. */
/* =========================================================
nd-split-hybrid.css — вынесено из new-catalog.css 04.09.2026 (п.35 аудита Никиты).
Причина: new-catalog.css весил 731 КБ и грузился на ВСЕХ страницах нового
дизайна, хотя правила ниже привязаны к одному body-классу .nd-hybrid
и на остальных страницах сработать не могут.
Правила перенесены БЕЗ изменений и в исходном порядке; ничего не удалено.
Подключается в header.php сразу после new-catalog.css (до nd-fix-*.css),
поэтому порядок относительно других файлов не меняется. Правила, перенос
которых мог бы изменить победителя каскада (равная специфичность с более
поздним правилом ядра), намеренно оставлены в new-catalog.css.
========================================================= */
/* панель: селекты в стиле полей эталона + кнопки */
body.nd-hybrid #filters select {
width: 100%; height: 44px; border: 1px solid var(--line, #ececf0); border-radius: 12px;
background: #fff; padding: 0 12px; font-size: 13.5px; font-family: inherit; cursor: pointer;
}
body.nd-hybrid #filters select:disabled { background: var(--bg, #f7f7f9); color: #A0A0A8; cursor: not-allowed; }
body.nd-hybrid #filters input[type="month"] {
width: 100%; height: 44px; border: 1px solid var(--line, #ececf0); border-radius: 12px;
background: #fff; padding: 0 12px; font-size: 13.5px; font-family: inherit;
}
/* подписи фото в карточках мини-каталогов не показываем (как на корее) */
body.nd-hybrid .c-photo-tag { display: none; }
/* month-инпуты «Дата регистрации» наезжали на соседнюю ячейку */
body.nd-hybrid #filters .range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.nd-hybrid #filters .range .ctrl { min-width: 0; }
body.nd-hybrid #filters .range input { width: 100%; min-width: 0; box-sizing: border-box; }
/* чекбоксы «особенностей» наследовали капс от легаси-лейблов */
body.nd-hybrid #filters .fcheck { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* CTA «Консультация» в панели карточки лота/байка — была голым текстом:
.c-btn-* стили живут в new-catalog.css, а тут своя панель .pd-order */
body.nd-hybrid .pd-order .js-consult-form {
display: flex; width: 100%; min-height: 52px;
align-items: center; justify-content: center; gap: 8px;
background: var(--ink, #0E0E12); color: #fff;
border: none; border-radius: 14px; cursor: pointer;
font-size: 15px; font-weight: 700; font-family: inherit;
margin: 8px 0 10px; transition: background .15s ease;
}
body.nd-hybrid .pd-order .js-consult-form:hover { background: var(--accent, #E11D2E); }
/* 12.08 круг 5: у аукциона/байков теперь СВОЙ hero с крошками и H1 (nd_mini_hero,
как на корее) — легаси-крошки и легаси-H1 снова скрыты штатными правилами
new-design-catalog выше. Возвращавшие их правила круга 2 удалены. */
/* чекбосы-«особенности» — полоса .fchecks как на корее, не таблетки */
body.nd-hybrid #filters .fchecks { grid-column: 1 / -1; }
/* ==== 12.08.2026: /faq/ (гибрид нового дизайна, тело nd-faq-body.php) ====
Скоуп body.nd-hybrid .ndfaq-* — чужие правила не трогаем. Аккордеоны/чипы/кнопки
берут готовые классы (.faq, .chip, .c-btn-*), тут только раскладка страницы. */
body.nd-hybrid .ndfaq-section { padding: 8px 0 80px; }
body.nd-hybrid .ndfaq-intro { max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--ink-3); margin: 0 0 20px; }
body.nd-hybrid .ndfaq-pane { display: none; }
body.nd-hybrid .ndfaq-pane.active { display: block; }
body.nd-hybrid .ndfaq-pane-title { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin: 20px 0 14px; }
body.nd-hybrid .ndfaq-list { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
body.nd-hybrid .ndfaq-list .faq-body p { margin: 0 0 10px; }
body.nd-hybrid .ndfaq-list .faq-body ol,
body.nd-hybrid .ndfaq-list .faq-body ul { margin: 0 0 10px; padding-left: 20px; }
body.nd-hybrid .ndfaq-list .faq-body a { color: var(--accent); text-decoration: underline; }
body.nd-hybrid .ndfaq-more { margin-top: 16px; }
body.nd-hybrid .ndfaq-more .c-btn-sec { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--line); }
body.nd-hybrid .ndfaq-cta {
margin-top: 48px; padding: 26px 28px; max-width: 900px;
border: 1px solid var(--line); border-radius: var(--radius-md); background: #FFF;
display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
body.nd-hybrid .ndfaq-cta-h { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
body.nd-hybrid .ndfaq-cta-txt p { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; }
body.nd-hybrid .ndfaq-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
body.nd-hybrid .ndfaq-cta-btns .c-btn-pri,
body.nd-hybrid .ndfaq-cta-btns .c-btn-sec { flex: 0 0 auto; min-width: 180px; border: 1px solid var(--line); cursor: pointer; }
@media (max-width: 719px) {
body.nd-hybrid .ndfaq-cta { padding: 20px; }
body.nd-hybrid .ndfaq-cta-btns { width: 100%; flex-direction: column; }
body.nd-hybrid .ndfaq-cta-btns .c-btn-pri,
body.nd-hybrid .ndfaq-cta-btns .c-btn-sec { width: 100%; }
body.nd-hybrid .ndfaq-pane-title { font-size: 18px; }
}
/* ============ 12.08.2026: /calculator/ — тело страницы в новом дизайне (staging) ============ */
/* Скоуп body.nd-hybrid .ndcalc* — только страница калькулятора, чужие правила не трогаем.
Легаси-CSS (template.css) на гибридных страницах остаётся загружен, поэтому размеры
текста/отступы заданы явно (легаси даёт p=2rem, h2 margin 5.2rem, label-капс и т.п.).
Разметка: local/templates/encarrus_v2_staging/includes/nd-calc-body.php */
body.nd-hybrid .ndcalc-lead { padding: 6px 0 4px; }
body.nd-hybrid .ndcalc-leadtext { max-width: 780px; font-size: 15px; line-height: 1.6; color: var(--ink-3, #3d3d48); margin: 0 0 14px; }
body.nd-hybrid .ndcalc-leadtext a { text-decoration: underline; text-underline-offset: 3px; }
body.nd-hybrid .ndcalc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.nd-hybrid .ndcalc-chips .chip { cursor: default; }
body.nd-hybrid .ndcalc { padding: 20px 0 8px; }
body.nd-hybrid .ndcalc-presets { margin-bottom: 16px; }
body.nd-hybrid .ndcalc-presets-label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #6E6E76); margin-bottom: 10px; }
body.nd-hybrid .ndcalc-preset-list { display: flex; flex-wrap: wrap; gap: 8px; }
body.nd-hybrid .ndcalc-preset-list .chip { cursor: pointer; font-family: inherit; }
body.nd-hybrid .ndcalc-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-items: start; }
body.nd-hybrid .ndcalc-h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 18px; line-height: 1.25; }
body.nd-hybrid .ndcalc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.nd-hybrid .ndcalc-span2 { grid-column: 1 / -1; }
/* инпуты/селекты: страховка от легаси-правил формы (как body.nd-hybrid #filters select у аукциона) */
body.nd-hybrid .ndcalc-grid .ctrl { background: #fff; min-width: 0; }
body.nd-hybrid .ndcalc-grid .ctrl input, body.nd-hybrid .ndcalc-grid .ctrl select {
width: 100%; min-width: 0; height: 44px; box-sizing: border-box;
border: none; outline: none; background: transparent;
font-size: 14px; font-weight: 600; color: var(--ink, #0e0e12); font-family: inherit;
padding: 0 13px; border-radius: 10px;
}
body.nd-hybrid .ndcalc-grid .ctrl:focus-within { border-color: var(--ink, #0e0e12); }
/* радио «Импортёр» — свои таблетки (НЕ .fcheck: js-фоллбек .on в new-catalog.js «залипает» на радио) */
body.nd-hybrid .ndcalc-radios { display: flex; flex-wrap: wrap; gap: 8px; }
body.nd-hybrid .ndcalc-radio { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-elev, #ffffff); border: 1px solid var(--line, #E4E4DE); border-radius: var(--radius-pill, 999px); font-size: 13px; font-weight: 600; color: var(--ink-3, #3d3d48); cursor: pointer; text-transform: none; letter-spacing: 0; user-select: none; transition: all .15s ease; margin: 0; }
body.nd-hybrid .ndcalc-radio input { display: none; }
body.nd-hybrid .ndcalc-radio .fbox { width: 16px; height: 16px; border: 1.5px solid var(--line-2, #D6D6CE); border-radius: 999px; background: #fff; flex: none; transition: all .15s ease; }
body.nd-hybrid .ndcalc-radio:has(input:checked) { background: var(--ink, #0e0e12); color: #fff; border-color: var(--ink, #0e0e12); }
body.nd-hybrid .ndcalc-radio:has(input:checked) .fbox { border-color: #fff; box-shadow: inset 0 0 0 3px var(--ink, #0e0e12); background: #fff; }
body.nd-hybrid .ndcalc-submit { margin-top: 18px; }
body.nd-hybrid .ndcalc-submit .c-btn-pri { width: 100%; padding: 14px 20px; font-size: 15px; border: none; cursor: pointer; font-family: inherit; border-radius: 12px; }
body.nd-hybrid .ndcalc-error { display: none; color: var(--accent, #E11D2E); font-size: 14px; margin-top: 10px; }
/* карточка результата */
body.nd-hybrid .ndcalc-empty { color: var(--muted, #6E6E76); font-size: 14px; line-height: 1.6; }
body.nd-hybrid .ndcalc-empty ul { margin: 12px 0 0; padding-left: 18px; }
body.nd-hybrid .ndcalc-empty li { margin-bottom: 8px; font-size: 14px; }
body.nd-hybrid .ndcalc-age { display: none; font-size: 13px; color: var(--ink-3, #3d3d48); background: var(--bg, #f0f0f3); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.5; }
body.nd-hybrid .ndcalc-res .ckr-rows { display: none; width: 100%; border-collapse: collapse; }
body.nd-hybrid .ndcalc-res .ckr-rows td { padding: 9px 4px; border-bottom: 1px solid var(--line, #E4E4DE); font-size: 14px; }
body.nd-hybrid .ndcalc-res .ckr-rows td:last-child { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
body.nd-hybrid .ndcalc-res .ckr-total td { border-bottom: 0; padding-top: 14px; font-size: 19px; font-weight: 800; }
body.nd-hybrid .ndcalc-res .ckr-total td:last-child { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndcalc-note { font-size: 12.5px; color: var(--muted, #6E6E76); margin: 12px 0 0; line-height: 1.5; }
body.nd-hybrid .ndcalc-note a { text-decoration: underline; text-underline-offset: 3px; }
body.nd-hybrid .ndcalc-cta { gap: 10px; flex-wrap: wrap; margin-top: 14px; }
body.nd-hybrid .ndcalc-cta .c-btn-pri, body.nd-hybrid .ndcalc-cta .c-btn-sec { padding: 13px 18px; font-size: 14px; border-radius: 12px; }
body.nd-hybrid .ndcalc-cta .c-btn-sec { border: 1px solid var(--line, #E4E4DE); background: #fff; }
/* три шага: сетка на 3, стрелки-соединители пятишаговой сетки не нужны */
body.nd-hybrid .ndcalc-how { padding: 36px 0 10px; }
body.nd-hybrid .ndcalc-how .sec-h2 { margin: 0; font-size: 34px; }
body.nd-hybrid .ndcalc-steps { grid-template-columns: repeat(3, 1fr); }
body.nd-hybrid .ndcalc-steps .step:not(:last-child)::after { display: none; }
/* низовые SEO-тексты (перенесены как есть со старой страницы) */
body.nd-hybrid .ndcalc-seo { padding: 28px 0 64px; }
body.nd-hybrid .ndcalc-seo h2 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 34px 0 12px; line-height: 1.2; }
body.nd-hybrid .ndcalc-seo .shell > h2:first-child { margin-top: 0; }
body.nd-hybrid .ndcalc-seo h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; line-height: 1.3; }
body.nd-hybrid .ndcalc-seo p { font-size: 14.5px; line-height: 1.65; color: var(--ink-3, #3d3d48); margin: 0 0 12px; max-width: 900px; }
body.nd-hybrid .ndcalc-tblwrap { overflow-x: auto; margin: 12px 0 18px; max-width: 900px; }
body.nd-hybrid .ndcalc-seo table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; margin: 0; }
body.nd-hybrid .ndcalc-seo th, body.nd-hybrid .ndcalc-seo td { border: 1px solid var(--line, #E4E4DE); padding: 9px 12px; text-align: left; font-size: 13.5px; }
body.nd-hybrid .ndcalc-seo th { background: var(--bg, #f0f0f3); font-weight: 700; }
body.nd-hybrid .ndcalc-hl { background: var(--accent-soft, #f7f7f9); border-left: 4px solid var(--accent, #E11D2E); border-radius: 0 12px 12px 0; padding: 14px 16px; margin: 16px 0; font-size: 14.5px; line-height: 1.6; max-width: 900px; }
@media (max-width: 960px) {
body.nd-hybrid .ndcalc-wrap { grid-template-columns: 1fr; }
body.nd-hybrid .ndcalc-steps { grid-template-columns: 1fr; }
body.nd-hybrid .ndcalc-how .sec-h2 { font-size: 26px; }
}
@media (max-width: 640px) {
body.nd-hybrid .ndcalc-grid { grid-template-columns: 1fr; }
body.nd-hybrid .fpanel-inner.ndcalc-form, body.nd-hybrid .fpanel-inner.ndcalc-res { padding: 18px 16px; }
body.nd-hybrid .ndcalc-cta .c-btn-pri, body.nd-hybrid .ndcalc-cta .c-btn-sec { width: 100%; flex: none; }
}
/* ============ /calculator/ конец блока ============ */
/* ответ аккордеона: единый контейнер в колонке 1fr грида .faq-body */
body.nd-hybrid .ndfaq-a { font-size: 15px; line-height: 1.62; color: var(--ink-3); max-width: 62ch; overflow-wrap: break-word; }
body.nd-hybrid .ndfaq-a p { margin: 0 0 10px; }
body.nd-hybrid .ndfaq-a p:last-child { margin-bottom: 0; }
body.nd-hybrid .ndfaq-a ol,
body.nd-hybrid .ndfaq-a ul { margin: 0 0 10px; padding-left: 20px; }
body.nd-hybrid .ndfaq-a a { color: var(--accent); text-decoration: underline; }
body.nd-hybrid .ndfaq-a img { max-width: 100%; height: auto; }
/* Плюс-минус аккордеона: легаси-копия в new-catalog-after.css (грузится позже)
ломает ::after (width:2px + bottom) -> вместо плюса точка 2x2. Тот же фикс,
что для korea (см. блок body.new-design-catalog .faq-right выше), но в скоупе /faq/. */
body.nd-hybrid .ndfaq-list .faq-plus::before,
body.nd-hybrid .ndfaq-list .faq-plus::after {
top: 50%; bottom: auto; left: 3px; right: 3px;
width: auto; height: 2px;
}
body.nd-hybrid .ndfaq-list .faq-plus::after { transform: translateY(-50%) rotate(90deg); }
body.nd-hybrid .ndfaq-list .faq[open] .faq-plus::after { transform: translateY(-50%) rotate(0deg); }
/* Мобильный разворот тела ответа — как у эталона (grid 44px/1fr/32px слишком узкий на 375px) */
@media (max-width: 700px) {
body.nd-hybrid .ndfaq-list .faq-body { display: block; padding: 0 16px 14px; }
body.nd-hybrid .ndfaq-list summary { padding: 13px 14px; }
}
/* ============================================================
18.08.2026 (Ivan: «страница отзывов не адаптирована под мобилку… слишком крупный шрифт»).
Причина не в самой странице: правило `html, body { font-size: 14px }` (@media ≤860px)
поднимает КОРЕНЬ документа с боевых max(11px, 2.78vw) до 14px. Новые блоки свёрстаны в px
и этого не замечают, а легаси-тела (отзывы, о компании, контакты) целиком в rem —
у них всё вырастает на 27-40%: h1 27.5 -> 35px, рейтинг 48 -> 62px, чипы 17.6 -> 22.4px.
На страницах-гибридах (класс nd-hybrid = новая шапка + БОЕВОЕ тело) возвращаем корень
к боевому значению; страницы полностью нового дизайна (new-design-home/catalog/product)
не задеты — там 14px и остаётся.
============================================================ */
@media (max-width: 1000px) {
html:has(body.nd-hybrid) { font-size: max(11px, 1.3888888889vw); }
}
@media (max-width: 720px) {
html:has(body.nd-hybrid) { font-size: max(11px, 2.7777777778vw); }
}
/* ============================================================
18.08.2026 (Ivan: «страницу /forma/ привести к новому дизайну»).
Тело формы боевое (Bitrix + ajax /ajax/car-selection.php) — разметку и имена полей
НЕ трогаем, иначе поломается отправка лида. Меняем только оформление, скоуп body.nd-hybrid
(класс есть только на staging).
============================================================ */
body.nd-hybrid .bg-style-car-select { background: var(--bg, #F7F7F9); padding: 28px 0 56px; }
body.nd-hybrid .request-form-wrapper {
background: #FFF; border: 1px solid var(--line, #E4E4DE); border-radius: 18px;
padding: 32px; max-width: 860px; margin: 0 auto;
box-shadow: 0 18px 50px -30px rgba(14,14,16,.16);
}
body.nd-hybrid .request-form-wrapper h1 {
font-family: 'Montserrat', sans-serif; font-weight: 700;
font-size: 34px; line-height: 1.1; letter-spacing: -.02em;
color: var(--ink, #0E0E12); margin: 0 0 10px;
}
body.nd-hybrid .request-form--sub {
font-size: 15px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 0 0 26px; max-width: 620px;
}
/* шаг: номер чёрной плашкой + вопрос обычным цветом (было «N шаг» красной рамкой + красный вопрос) */
body.nd-hybrid .request-form--section { padding: 22px 0 0; border-top: 1px solid var(--line, #E4E4DE); margin-top: 22px; }
body.nd-hybrid .request-form--sections-list > .request-form--section:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
body.nd-hybrid .request-form--section-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
body.nd-hybrid .request-form--section--step {
flex: none; display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 28px; padding: 0 8px; border: 0; border-radius: 9px;
background: var(--ink, #0E0E12); color: #FFF;
font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
body.nd-hybrid .request-form--section--title {
font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink, #0E0E12) !important;
}
/* варианты выбора — кликабельные плитки вместо нативных радиокнопок */
body.nd-hybrid .request-form--section-body { display: flex; flex-direction: column; gap: 8px; }
body.nd-hybrid .request-form--section--input-radio {
display: flex; align-items: center; gap: 10px;
padding: 13px 15px; border: 1px solid var(--line, #E4E4DE); border-radius: 12px;
background: #FFF; cursor: pointer; transition: border-color .12s ease, background .12s ease;
margin: 0;
}
body.nd-hybrid .request-form--section--input-radio:hover { border-color: #C9C9C2; }
body.nd-hybrid .request-form--section--input-radio:has(input:checked) {
border-color: var(--ink, #0E0E12); background: var(--bg, #f7f7f9);
}
body.nd-hybrid .request-form--section--input-radio .fake-radio {
width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C9C9C2; flex: none; position: relative;
}
body.nd-hybrid .request-form--section--input-radio:has(input:checked) .fake-radio { border-color: var(--accent, #E11D2E); }
body.nd-hybrid .request-form--section--input-radio:has(input:checked) .fake-radio::after {
content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent, #E11D2E);
}
body.nd-hybrid .request-form--section--input-label--text { font-size: 14.5px; font-weight: 600; color: var(--ink, #0E0E12); }
/* текстовые поля — как в модалке нового дизайна */
body.nd-hybrid .request-form--section--input { display: block; position: relative; margin: 0; max-width: 520px; }
body.nd-hybrid .request-form--section--input input,
body.nd-hybrid .request-form--section--input textarea {
width: 100%; box-sizing: border-box; min-height: 52px; padding: 16px 14px;
border: 1px solid var(--line, #E4E4DE); border-radius: 12px; background: #FFF;
font-family: 'Montserrat', sans-serif; font-size: 15px; color: var(--ink, #0E0E12);
transition: border-color .15s;
}
body.nd-hybrid .request-form--section--input input:focus,
body.nd-hybrid .request-form--section--input textarea:focus { outline: none; border-color: var(--ink, #0E0E12); }
body.nd-hybrid .request-form--section--input--text { font-size: 11.5px; color: var(--muted, #6E6E76); margin-top: 6px; }
/* кнопка отправки и согласия */
body.nd-hybrid .request-form-wrapper button[type="submit"],
body.nd-hybrid .request-form-wrapper input[type="submit"],
body.nd-hybrid .request-form-wrapper .btn {
width: 100%; max-width: 520px; height: 54px; border: 0; border-radius: 12px;
background: var(--accent, #E11D2E); color: #FFF !important;
font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer;
transition: background .15s;
}
body.nd-hybrid .request-form-wrapper button[type="submit"]:hover { background: var(--accent-2, #B8152B); }
@media (max-width: 860px) {
body.nd-hybrid .bg-style-car-select { padding: 18px 0 40px; }
body.nd-hybrid .request-form-wrapper { padding: 20px 16px 24px; border-radius: 14px; }
body.nd-hybrid .request-form-wrapper h1 { font-size: 24px; }
body.nd-hybrid .request-form--sub { font-size: 14px; margin-bottom: 20px; }
body.nd-hybrid .request-form--section { padding-top: 18px; margin-top: 18px; }
body.nd-hybrid .request-form--section--title { font-size: 16px; }
body.nd-hybrid .request-form--section--input { max-width: none; }
body.nd-hybrid .request-form-wrapper button[type="submit"] { max-width: none; }
}
/* 18.08.2026, добивка: боевые стили красили текст в плашке шага красным (на чёрном фоне
нечитаемо) и держали фиксированную ширину полей ~277px. */
body.nd-hybrid .request-form--section--step { color: #FFF !important; }
body.nd-hybrid .request-form--section--input input,
body.nd-hybrid .request-form--section--input textarea { width: 100% !important; max-width: none !important; }
body.nd-hybrid .request-form--section--input { width: 100%; }
/* ============================================================
18.08.2026 — страница заявки /forma/ в новом дизайне (staging, body.nd-hybrid).
Разметка формы своя (includes/nd-forma-body.php), но имена полей и класс .ajax-form
те же, что в боевой версии — обработчик /ajax/car-selection.php не тронут.
============================================================ */
body.nd-hybrid .ndf-page { padding: 26px 0 56px; background: var(--bg, #F7F7F9); }
body.nd-hybrid .ndf-head { max-width: 760px; margin: 0 0 26px; }
body.nd-hybrid .ndf-h1 {
font-family: 'Montserrat', sans-serif; font-weight: 700;
font-size: 40px; line-height: 1.08; letter-spacing: -.022em;
color: var(--ink, #0E0E12); margin: 10px 0 12px;
}
body.nd-hybrid .ndf-h1 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; color: var(--accent, #E11D2E); }
body.nd-hybrid .ndf-lead { font-size: 16px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 0 0 18px; }
/* быстрые каналы */
body.nd-hybrid .ndf-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
body.nd-hybrid .ndf-quick-t { font-size: 13px; color: var(--muted, #6E6E76); margin-right: 4px; }
body.nd-hybrid .ndf-qbtn {
display: inline-flex; align-items: center; gap: 7px;
height: 38px; padding: 0 14px; border-radius: 11px;
font-size: 13px; font-weight: 700; color: #FFF !important; text-decoration: none; white-space: nowrap;
}
body.nd-hybrid .ndf-qbtn-tel { background: var(--ink, #0E0E12); }
body.nd-hybrid .ndf-qbtn-mx { background: linear-gradient(135deg,#1F7AE0,#4E3DF0); }
body.nd-hybrid .ndf-qbtn-tg { background: #29A9EB; }
body.nd-hybrid .ndf-qbtn-wa { background: #25D366; }
/* сетка: форма + боковая колонка */
body.nd-hybrid .ndf-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 24px; align-items: start; }
body.nd-hybrid .ndf-form {
background: #FFF; border: 1px solid var(--line, #E4E4DE); border-radius: 18px; padding: 26px;
box-shadow: 0 18px 50px -34px rgba(14,14,16,.18);
}
/* прогресс */
body.nd-hybrid .ndf-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
body.nd-hybrid .ndf-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line, #ececf0); overflow: hidden; }
body.nd-hybrid .ndf-progress-bar i { display: block; height: 100%; background: var(--accent, #E11D2E); transition: width .25s ease; }
body.nd-hybrid .ndf-progress-t { font-size: 12px; color: var(--muted, #6E6E76); white-space: nowrap; }
body.nd-hybrid .ndf-progress-t b { color: var(--ink, #0E0E12); }
/* блоки-вопросы */
body.nd-hybrid .ndf-block { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line, #E4E4DE); }
body.nd-hybrid .ndf-form > .ndf-block:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
body.nd-hybrid .ndf-block-h {
display: flex; align-items: center; gap: 10px;
font-size: 17px; font-weight: 700; color: var(--ink, #0E0E12); margin-bottom: 12px;
}
body.nd-hybrid .ndf-block-n {
flex: none; width: 26px; height: 26px; border-radius: 8px;
background: var(--ink, #0E0E12); color: #FFF;
font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
/* плитки выбора */
body.nd-hybrid .ndf-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
body.nd-hybrid .ndf-tile { position: relative; margin: 0; cursor: pointer; }
body.nd-hybrid .ndf-tile input { position: absolute; opacity: 0; pointer-events: none; }
body.nd-hybrid .ndf-tile span {
display: inline-flex; align-items: center; height: 44px; padding: 0 16px;
border: 1px solid var(--line, #E4E4DE); border-radius: 12px; background: #FFF;
font-size: 14px; font-weight: 600; color: var(--ink, #0E0E12);
transition: border-color .12s ease, background .12s ease, color .12s ease;
}
body.nd-hybrid .ndf-tile:hover span { border-color: #C9C9C2; }
body.nd-hybrid .ndf-tile input:checked + span { background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12); color: #FFF; }
body.nd-hybrid .ndf-tile-sm span { height: 38px; padding: 0 13px; font-size: 13px; }
/* поля */
body.nd-hybrid .ndf-field { position: relative; display: block; margin: 0 0 10px; }
body.nd-hybrid .ndf-field input, body.nd-hybrid .ndf-field textarea {
width: 100%; box-sizing: border-box; height: 56px; padding: 22px 14px 8px;
border: 1px solid var(--line, #E4E4DE); border-radius: 12px; background: #FFF;
font-family: 'Montserrat', sans-serif; font-size: 15px; color: var(--ink, #0E0E12);
transition: border-color .15s;
}
body.nd-hybrid .ndf-field textarea { height: auto; min-height: 104px; padding-top: 24px; resize: vertical; }
body.nd-hybrid .ndf-field input:focus, body.nd-hybrid .ndf-field textarea:focus { outline: none; border-color: var(--ink, #0E0E12); }
body.nd-hybrid .ndf-field-l {
position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
font-size: 14.5px; color: #A0A0A8; pointer-events: none;
transition: top .15s ease, font-size .15s ease, transform .15s ease;
}
body.nd-hybrid .ndf-field-l i { color: var(--accent, #E11D2E); font-style: normal; }
body.nd-hybrid .ndf-field-area .ndf-field-l { top: 18px; transform: none; }
body.nd-hybrid .ndf-field input:focus + .ndf-field-l,
body.nd-hybrid .ndf-field input:not(:placeholder-shown) + .ndf-field-l,
body.nd-hybrid .ndf-field textarea:focus + .ndf-field-l,
body.nd-hybrid .ndf-field textarea:not(:placeholder-shown) + .ndf-field-l {
top: 9px; transform: none; font-size: 11.5px; color: var(--muted, #6E6E76);
}
body.nd-hybrid .ndf-hint { font-size: 12px; color: var(--muted, #6E6E76); margin-top: -2px; }
body.nd-hybrid .ndf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.nd-hybrid .ndf-ch-t { font-size: 13px; font-weight: 600; color: var(--ink, #0E0E12); margin: 14px 0 8px; }
/* «уточнить детали» */
body.nd-hybrid .ndf-more { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line, #E4E4DE); }
body.nd-hybrid .ndf-more summary {
cursor: pointer; list-style: none; font-size: 14.5px; font-weight: 700; color: var(--ink, #0E0E12);
display: flex; align-items: center; gap: 8px;
}
body.nd-hybrid .ndf-more summary::-webkit-details-marker { display: none; }
body.nd-hybrid .ndf-more summary::before {
content: '+'; width: 24px; height: 24px; border-radius: 8px; background: var(--line-2, #f0f0f3);
display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none;
}
body.nd-hybrid .ndf-more[open] summary::before { content: '–'; }
body.nd-hybrid .ndf-more summary span { font-weight: 500; font-size: 12px; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndf-more .ndf-field { margin-top: 12px; }
/* кнопка и согласия */
body.nd-hybrid .ndf-submit {
width: 100%; height: 56px; margin-top: 16px; border: 0; border-radius: 12px;
background: var(--accent, #E11D2E); color: #FFF;
font-family: 'Montserrat', sans-serif; font-size: 15.5px; font-weight: 700; line-height: 56px; padding: 0;
cursor: pointer; transition: background .15s;
}
body.nd-hybrid .ndf-submit:hover { background: var(--accent-2, #B8152B); }
body.nd-hybrid .ndf-under { font-size: 12px; color: var(--muted, #6E6E76); text-align: left; margin-top: 10px; }
body.nd-hybrid .ndf-policy { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
body.nd-hybrid .ndf-policy input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent, #E11D2E); flex: none; }
body.nd-hybrid .ndf-policy span { font-size: 11.5px; line-height: 1.45; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndf-policy a { color: var(--muted, #6E6E76); text-decoration: underline; }
/* боковая колонка */
body.nd-hybrid .ndf-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; }
body.nd-hybrid .ndf-side-card { background: #FFF; border: 1px solid var(--line, #E4E4DE); border-radius: 14px; padding: 16px; }
body.nd-hybrid .ndf-side-rate { font-size: 14px; font-weight: 700; color: var(--ink, #0E0E12); margin-bottom: 10px; }
body.nd-hybrid .ndf-side-star { color: #F5A623; }
body.nd-hybrid .ndf-side-rate a { color: var(--muted, #6E6E76); font-weight: 500; text-decoration: underline; }
body.nd-hybrid .ndf-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.nd-hybrid .ndf-side-list li { font-size: 13px; color: #5A5A64; line-height: 1.4; }
body.nd-hybrid .ndf-side-list b { color: var(--ink, #0E0E12); }
body.nd-hybrid .ndf-side-h { font-size: 14px; font-weight: 700; color: var(--ink, #0E0E12); margin-bottom: 10px; }
body.nd-hybrid .ndf-steps { list-style: none; margin: 0; padding: 0; counter-reset: ndfs; display: grid; gap: 10px; }
body.nd-hybrid .ndf-steps li { counter-increment: ndfs; display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; }
body.nd-hybrid .ndf-steps li::before {
content: counter(ndfs); width: 22px; height: 22px; border-radius: 7px; background: var(--line-2, #f0f0f3);
font-size: 11.5px; font-weight: 800; color: var(--ink, #0E0E12);
display: inline-flex; align-items: center; justify-content: center;
}
body.nd-hybrid .ndf-steps b { display: block; font-size: 13px; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndf-steps span { display: block; font-size: 12px; color: var(--muted, #6E6E76); line-height: 1.4; margin-top: 2px; }
body.nd-hybrid .ndf-side-note { font-size: 12.5px; line-height: 1.5; color: var(--muted, #6E6E76); background: var(--bg, #f7f7f9); }
/* результат отправки */
body.nd-hybrid .ndf-form .form__success-title { font-size: 20px; font-weight: 700; color: var(--ink, #0E0E12); margin-bottom: 8px; }
body.nd-hybrid .ndf-form .form__success-text { font-size: 14px; color: var(--muted, #6E6E76); line-height: 1.55; }
@media (max-width: 1000px) {
body.nd-hybrid .ndf-grid { grid-template-columns: 1fr; }
body.nd-hybrid .ndf-side { position: static; order: 2; }
}
@media (max-width: 700px) {
body.nd-hybrid .ndf-page { padding: 18px 0 40px; }
body.nd-hybrid .ndf-h1 { font-size: 27px; }
body.nd-hybrid .ndf-lead { font-size: 14px; }
body.nd-hybrid .ndf-quick-t { width: 100%; margin-bottom: 2px; }
body.nd-hybrid .ndf-qbtn { height: 36px; padding: 0 12px; font-size: 12.5px; }
body.nd-hybrid .ndf-form { padding: 18px 16px 22px; border-radius: 14px; }
body.nd-hybrid .ndf-block-h { font-size: 15.5px; }
body.nd-hybrid .ndf-two { grid-template-columns: 1fr; }
body.nd-hybrid .ndf-tile span { height: 42px; font-size: 13.5px; }
/* липкая кнопка: она всегда под рукой, дубль в форме прячем */
body.nd-hybrid .ndf-sticky {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.96); border-top: 1px solid var(--line, #E4E4DE);
backdrop-filter: blur(8px);
}
body.nd-hybrid .ndf-sticky button {
width: 100%; height: 52px; border: 0; border-radius: 12px;
background: var(--accent, #E11D2E); color: #FFF; font-family: 'Montserrat', sans-serif;
font-size: 15px; font-weight: 700;
}
}
/* ============================================================
18.08.2026 (Ivan: «на ПК всё разбегается»). Причины:
1) форма несёт боевой класс .request-form-wrapper, а ему в старом CSS задан
max-width: 115rem + margin: auto — карточка центрировалась внутри своей колонки
и «отъезжала» от заголовка;
2) страница занимала всю ширину .shell (1520), из-за чего поля растягивались
на 1000+px, а правая колонка жалась;
3) в боковой колонке текст шагов падал в узкую колонку и рвался по слову.
Приводим всё к одной сетке 1180px: заголовок, каналы, форма и сайдбар по одной линии.
============================================================ */
@media (min-width: 1001px) {
body.nd-hybrid .ndf-page .shell { max-width: 1180px; margin: 0 auto; }
body.nd-hybrid .ndf-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
}
body.nd-hybrid .ndf-form {
max-width: none !important; width: 100% !important; margin: 0 !important; float: none !important;
}
body.nd-hybrid .ndf-head { max-width: none; }
body.nd-hybrid .ndf-lead { max-width: 640px; }
/* быстрые каналы — одной строкой */
body.nd-hybrid .ndf-quick { gap: 7px; }
body.nd-hybrid .ndf-qbtn { height: 36px; padding: 0 12px; font-size: 12.5px; }
/* боковая колонка: текст не должен рваться по слову */
body.nd-hybrid .ndf-side-card { padding: 15px 16px; }
body.nd-hybrid .ndf-steps li { grid-template-columns: 22px minmax(0, 1fr); }
body.nd-hybrid .ndf-steps span,
body.nd-hybrid .ndf-side-list li { overflow-wrap: normal; word-break: normal; hyphens: none; }
/* поля формы не должны растягиваться на всю карточку */
body.nd-hybrid .ndf-block > .ndf-field,
body.nd-hybrid .ndf-more .ndf-field { max-width: 560px; }
body.nd-hybrid .ndf-two { max-width: 560px; }
body.nd-hybrid .ndf-submit { max-width: 560px; }
/* 18.08.2026 (Ivan) — быстрые каналы /forma/: подпись стала длиннее («позвоните или напишите»),
поэтому уводим её на отдельную строку — кнопки всегда остаются одним рядом и не переносятся. */
body.nd-hybrid .ndf-quick-t { width: 100%; margin: 0 0 7px; }
/* шаги сайдбара: ::before занимает первую колонку, b — вторую, а span без явной колонки
падал обратно в первую (22px) и текст рвался по слову */
body.nd-hybrid .ndf-steps span { grid-column: 2; }
/* ============================================================
18.08.2026 — /partner/ в новом дизайне (только staging, body.nd-hybrid).
Раскладка и типографика те же, что на главной и /forma/: светлый фон,
белые карточки с мягкой рамкой, Montserrat, красный акцент.
============================================================ */
body.nd-hybrid .ndp-page { background: #FFF; }
body.nd-hybrid .ndp-page .shell { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { body.nd-hybrid .ndp-page .shell { padding: 0 32px; } }
body.nd-hybrid .ndp-page,
body.nd-hybrid .ndp-page h1,
body.nd-hybrid .ndp-page h2,
body.nd-hybrid .ndp-page b,
body.nd-hybrid .ndp-page input,
body.nd-hybrid .ndp-page button { font-family: 'Montserrat', sans-serif; }
/* ---- шапка ---- */
body.nd-hybrid .ndp-hero { padding: 34px 0 8px; background: #FFF; }
body.nd-hybrid .ndp-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 24px; align-items: center; }
body.nd-hybrid .ndp-eyebrow {
display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent, #E11D2E); margin-bottom: 14px;
}
body.nd-hybrid .ndp-h1 {
font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em;
color: var(--ink, #0E0E12); margin: 0 0 14px;
}
body.nd-hybrid .ndp-h1 em {
font-family: 'PT Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--accent, #E11D2E);
}
body.nd-hybrid .ndp-lead { font-size: 15.5px; line-height: 1.55; color: var(--muted, #6E6E76); max-width: 560px; margin: 0 0 20px; }
body.nd-hybrid .ndp-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
body.nd-hybrid .ndp-btn-pri,
body.nd-hybrid .ndp-btn-sec {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 50px; padding: 0 22px; border-radius: 12px; text-decoration: none;
font-size: 14.5px; font-weight: 700; white-space: nowrap;
}
body.nd-hybrid .ndp-btn-pri { background: var(--accent, #E11D2E); color: #FFF; }
body.nd-hybrid .ndp-btn-pri:hover { background: var(--accent-2, #B8152B); color: #FFF; }
body.nd-hybrid .ndp-btn-sec { background: #29A9EB; color: #FFF; }
body.nd-hybrid .ndp-btn-sec:hover { background: #1E93D1; color: #FFF; }
body.nd-hybrid .ndp-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
body.nd-hybrid .ndp-facts li {
background: var(--line-2, #f0f0f3); border-radius: 999px; padding: 8px 14px;
font-size: 12.5px; color: var(--muted, #6E6E76);
}
body.nd-hybrid .ndp-facts b { color: var(--ink, #0E0E12); font-weight: 800; }
body.nd-hybrid .ndp-hero-pic { display: flex; justify-content: flex-end; }
body.nd-hybrid .ndp-hero-pic img { width: 100%; max-width: 480px; height: auto; }
body.nd-hybrid .ndp-note {
margin: 22px 0 0; padding: 16px 20px; border-radius: 14px; background: var(--line-2, #f0f0f3);
font-size: 14px; line-height: 1.55; color: var(--ink-3, #3d3d48);
}
body.nd-hybrid .ndp-note b { color: var(--ink, #0E0E12); font-weight: 700; }
/* ---- общая секция ---- */
body.nd-hybrid .ndp-sec { padding: 46px 0; }
body.nd-hybrid .ndp-sec-gray { background: var(--bg, #f7f7f9); }
body.nd-hybrid .ndp-sec-head { margin-bottom: 22px; }
body.nd-hybrid .ndp-h2 {
font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
color: var(--ink, #0E0E12); margin: 0 0 8px;
}
body.nd-hybrid .ndp-sec-sub { font-size: 14.5px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 0; max-width: 620px; }
body.nd-hybrid .ndp-grid { display: grid; gap: 14px; }
body.nd-hybrid .ndp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ---- карточки выгод ---- */
body.nd-hybrid .ndp-card {
background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 16px; padding: 20px;
display: flex; flex-direction: column; gap: 8px;
}
body.nd-hybrid .ndp-card-n {
width: 28px; height: 28px; border-radius: 9px; background: var(--ink, #0E0E12); color: #FFF;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 800; margin-bottom: 2px;
}
body.nd-hybrid .ndp-card-t { font-size: 15px; font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndp-card-x { font-size: 13.5px; line-height: 1.5; color: var(--muted, #6E6E76); }
/* ---- шаги ---- */
body.nd-hybrid .ndp-steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
body.nd-hybrid .ndp-steps li {
background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 16px; padding: 20px;
display: flex; flex-direction: column; gap: 10px;
}
body.nd-hybrid .ndp-step-n {
width: 34px; height: 34px; border-radius: 11px; background: var(--bg, #f7f7f9); color: var(--accent, #E11D2E);
display: inline-flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 800;
}
body.nd-hybrid .ndp-step-t { font-size: 14px; line-height: 1.5; color: var(--ink, #0E0E12); }
/* ---- почему мы ---- */
body.nd-hybrid .ndp-why {
background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 16px; padding: 20px;
display: flex; flex-direction: column; gap: 12px;
}
body.nd-hybrid .ndp-why img { width: 34px; height: 34px; object-fit: contain; }
body.nd-hybrid .ndp-why-t { font-size: 13.5px; line-height: 1.5; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndp-why-t b { color: var(--ink, #0E0E12); font-weight: 700; }
/* ---- заявка ---- */
body.nd-hybrid .ndp-sec-form { background: var(--bg, #f7f7f9); }
body.nd-hybrid .ndp-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: start; }
body.nd-hybrid .ndp-contacts { display: grid; gap: 8px; margin-top: 20px; max-width: 420px; }
body.nd-hybrid .ndp-cn {
display: flex; align-items: center; gap: 12px; text-decoration: none;
background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 14px; padding: 12px 14px;
}
body.nd-hybrid .ndp-cn:hover { border-color: #DCDCD8; }
body.nd-hybrid .ndp-cn-i {
width: 34px; height: 34px; border-radius: 11px; flex: none; color: #FFF;
display: inline-flex; align-items: center; justify-content: center;
}
body.nd-hybrid .ndp-cn-tel { background: var(--ink, #0E0E12); }
body.nd-hybrid .ndp-cn-max { background: linear-gradient(135deg, #1F7AE0, #4E3DF0); }
body.nd-hybrid .ndp-cn-tg { background: #29A9EB; }
body.nd-hybrid .ndp-cn-wa { background: #25D366; }
body.nd-hybrid .ndp-cn-ml { background: var(--muted, #6E6E76); }
body.nd-hybrid .ndp-cn b { display: block; font-size: 14px; font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndp-cn i { display: block; font-style: normal; font-size: 12px; color: var(--muted, #6E6E76); margin-top: 1px; }
body.nd-hybrid .ndp-form-card {
background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 18px; padding: 24px;
box-shadow: 0 2px 14px rgba(14, 14, 18, .04);
}
body.nd-hybrid .ndp-form-t { font-size: 19px; font-weight: 800; color: var(--ink, #0E0E12); margin-bottom: 6px; }
body.nd-hybrid .ndp-form-x { font-size: 13px; line-height: 1.5; color: var(--muted, #6E6E76); margin-bottom: 16px; }
/* поля боевой веб-формы приводим к виду нового дизайна, разметку не трогаем */
body.nd-hybrid .ndp-form-card .form__title,
body.nd-hybrid .ndp-form-card .form__subtitle { display: none; }
body.nd-hybrid .ndp-form-card .form { width: 100%; max-width: none; padding: 0; background: none; box-shadow: none; border: 0; }
body.nd-hybrid .ndp-form-card .form__input,
body.nd-hybrid .ndp-form-card input[type="text"],
body.nd-hybrid .ndp-form-card input[type="tel"],
body.nd-hybrid .ndp-form-card textarea {
width: 100%; height: 52px; border: 1px solid #E3E3DF; border-radius: 12px;
padding: 0 15px; font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--ink, #0E0E12);
background: #FFF; box-sizing: border-box;
}
body.nd-hybrid .ndp-form-card textarea { height: 92px; padding: 14px 15px; resize: vertical; }
body.nd-hybrid .ndp-form-card input:focus,
body.nd-hybrid .ndp-form-card textarea:focus { outline: none; border-color: var(--ink, #0E0E12); }
body.nd-hybrid .ndp-form-card .form__submit,
body.nd-hybrid .ndp-form-card button[type="submit"],
body.nd-hybrid .ndp-form-card input[type="submit"] {
width: 100%; height: 54px; line-height: 54px; padding: 0 20px; border: 0; border-radius: 12px;
background: var(--accent, #E11D2E); color: #FFF; font-family: 'Montserrat', sans-serif;
font-size: 15px; font-weight: 700; cursor: pointer; text-align: center;
}
body.nd-hybrid .ndp-form-card .form__submit:hover,
body.nd-hybrid .ndp-form-card button[type="submit"]:hover { background: var(--accent-2, #B8152B); }
/* ---- планшет ---- */
@media (max-width: 1100px) {
body.nd-hybrid .ndp-hero-in { grid-template-columns: minmax(0, 1fr) 360px; }
body.nd-hybrid .ndp-h1 { font-size: 36px; }
body.nd-hybrid .ndp-grid-4,
body.nd-hybrid .ndp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.nd-hybrid .ndp-form-grid { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* ---- телефон ---- */
@media (max-width: 860px) {
body.nd-hybrid .ndp-page .shell { padding: 0 16px; }
body.nd-hybrid .ndp-hero { padding: 22px 0 4px; }
body.nd-hybrid .ndp-hero-in { grid-template-columns: 1fr; gap: 16px; }
body.nd-hybrid .ndp-hero-pic { order: -1; justify-content: center; }
body.nd-hybrid .ndp-hero-pic img { max-width: 320px; }
body.nd-hybrid .ndp-h1 { font-size: 27px; }
body.nd-hybrid .ndp-lead { font-size: 14px; }
body.nd-hybrid .ndp-btn-pri,
body.nd-hybrid .ndp-btn-sec { height: 46px; font-size: 13.5px; flex: 1 1 100%; }
body.nd-hybrid .ndp-sec { padding: 30px 0; }
body.nd-hybrid .ndp-h2 { font-size: 22px; }
body.nd-hybrid .ndp-grid-4,
body.nd-hybrid .ndp-steps { grid-template-columns: 1fr; }
body.nd-hybrid .ndp-form-grid { grid-template-columns: 1fr; gap: 20px; }
body.nd-hybrid .ndp-contacts { max-width: none; }
body.nd-hybrid .ndp-form-card { padding: 18px 16px; }
}
/* 18.08.2026 — доводка /partner/: hero без готового баннера «Поставка автомобилей»
(он из старого оформления и выбивался из новой страницы), поэтому шапка в одну колонку.
И у боевой веб-формы своя подпись .form__description — она дублировала нашу, прячем. */
body.nd-hybrid .ndp-hero-in { grid-template-columns: minmax(0, 1fr); }
body.nd-hybrid .ndp-hero-text { max-width: 760px; }
body.nd-hybrid .ndp-form-card .form__description { display: none; }
/* ============================================================
18.08.2026 — /faq/ в две колонки (Ivan: «адаптируй под новый дизайн»).
Было: аккордеоны max-width 900px внутри .shell 1520px — контент жался влево,
справа пустое поле в половину экрана, а блок «Не нашли ответ?» лежал под всеми
вопросами и на ПК его никто не видел. Стало: вопросы слева, помощь справа липкой
колонкой; ширина страницы приведена к /forma/ и /partner/.
============================================================ */
@media (min-width: 1001px) {
body.nd-hybrid .ndfaq-section .shell { max-width: 1240px; margin: 0 auto; }
}
body.nd-hybrid .ndfaq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
body.nd-hybrid .ndfaq-main { min-width: 0; }
body.nd-hybrid .ndfaq-list { max-width: none; }
body.nd-hybrid .ndfaq-side { position: sticky; top: 84px; display: grid; gap: 12px; }
body.nd-hybrid .ndfaq-side-card { background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 16px; padding: 18px; }
body.nd-hybrid .ndfaq-side-h { font-size: 17px; font-weight: 800; color: var(--ink, #0E0E12); margin-bottom: 6px; }
body.nd-hybrid .ndfaq-side-p { font-size: 13px; line-height: 1.5; color: var(--muted, #6E6E76); margin: 0 0 14px; }
body.nd-hybrid .ndfaq-side-btn {
width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--accent, #E11D2E); color: #FFF;
font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 700; cursor: pointer;
}
body.nd-hybrid .ndfaq-side-btn:hover { background: var(--accent-2, #B8152B); }
body.nd-hybrid .ndfaq-side-tel {
display: flex; align-items: center; justify-content: center; height: 44px; margin-top: 8px;
border: 1px solid #E3E3DF; border-radius: 12px; text-decoration: none;
font-size: 14.5px; font-weight: 700; color: var(--ink, #0E0E12);
}
body.nd-hybrid .ndfaq-side-tel:hover { border-color: #C9C9C4; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndfaq-side-msg { display: flex; gap: 6px; margin-top: 10px; }
body.nd-hybrid .ndfaq-msg:hover { color: #FFF; opacity: .9; }
body.nd-hybrid .ndfaq-msg-max { background: linear-gradient(135deg, #1F7AE0, #4E3DF0); }
body.nd-hybrid .ndfaq-msg-tg { background: #29A9EB; }
body.nd-hybrid .ndfaq-msg-wa { background: #25D366; }
body.nd-hybrid .ndfaq-side-h2 { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6E6E76); margin-bottom: 10px; }
body.nd-hybrid .ndfaq-side-links a {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 10px 0; border-bottom: 1px solid var(--line, #ececf0); text-decoration: none;
font-size: 14px; font-weight: 600; color: var(--ink, #0E0E12);
}
body.nd-hybrid .ndfaq-side-links a:last-child { border-bottom: 0; padding-bottom: 0; }
body.nd-hybrid .ndfaq-side-links a:hover { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndfaq-side-links svg { flex: none; color: #B9B9B4; }
@media (max-width: 1000px) {
body.nd-hybrid .ndfaq-grid { grid-template-columns: 1fr; gap: 20px; }
body.nd-hybrid .ndfaq-side { position: static; }
}
/* ============================================================
20.08.2026 — блок «Процесс заказа» на страницах-гибридах.
Новый дизайн описывает карточки шагов классами .steps/.step (css/pages/new-catalog.css:1670),
и эти же имена носит СТАРЫЙ блок из компонента news.list/steps. В итоге на /china/,
/kazakhstan/ и /catalog/ секция превращалась в сетку из пяти колонок, восемь карточек
ужимались до 54-69px и текст переносился по одной букве.
Возвращаем старому блоку его раскладку: он опознаётся по обёртке .box-steps--style--1
и внутреннему списку .steps__list, которых в новом дизайне нет.
============================================================ */
body.nd-hybrid .box-steps--style--1 .steps {
display: block;
grid-template-columns: none;
gap: 0;
}
body.nd-hybrid .box-steps--style--1 .step {
background: none;
border: 0;
border-radius: 0;
padding: 0;
display: block;
box-shadow: none;
transition: none;
flex-shrink: 0;
width: 25%;
}
body.nd-hybrid .box-steps--style--1 .step:hover {
transform: none;
box-shadow: none;
border-color: transparent;
}
/* пунктирные разделители исходного блока: у нового дизайна на этом же псевдоэлементе
рисуется стрелка-уголок, возвращаем прежний вертикальный пунктир */
@media (min-width: 1001px) {
body.nd-hybrid .box-steps--style--1 .step:not(:last-child)::after {
content: "";
position: absolute;
top: 0; right: 0; left: auto;
width: 1px; height: 100%;
border: 0;
border-right: 1px dashed #d6a7af;
transform: none;
z-index: 1;
}
}
@media (max-width: 1000px) {
body.nd-hybrid .box-steps--style--1 .step { width: 100%; }
}
/* ============================================================
20.08.2026 — старый блок контактов на страницах-гибридах.
Внизу /sklad/, /china/, /kazakhstan/, /bikes/ и /korea---old/ выводится
/include/box/contacts/contacts.php: карта, список офисов и форма «Обратная связь»
в прежнем оформлении (поля без рамок, красная кнопка старого скругления).
Всё это уже есть в новом подвале — телефон, «Заказать звонок», мессенджеры,
поэтому на страницах нового дизайна блок только дублирует и выбивается стилем.
Файл общий с боевым сайтом, править его нельзя — скрываем стилем в скоупе nd-hybrid,
боевой сайт (без этого класса) остаётся как был.
Страница /contacts/ этот файл не использует, её контакты не задеты.
============================================================ */
body.nd-hybrid section.box:has(.box-contacts) { display: none !important; }
body.nd-hybrid .box-contacts { display: none !important; }
/* ============================================================
20.08.2026 — /reviews/: два заголовка про видео подряд.
Свой заголовок «Видео-отзывы клиентов» стоит в reviews/index.php (строка 83),
а компонент слайдера рисует собственный «Видео отзывы» (.box-slider__title .title_h2).
Получалось два заголовка об одном и том же с пустой полосой между ними.
Прячем заголовок компонента и приводим свой к размеру заголовков нового дизайна.
Файл reviews/index.php общий с боевым сайтом, поэтому правим только стилем
в скоупе nd-hybrid — на боевом сайте всё остаётся как было.
============================================================ */
body.nd-hybrid #video-reviews {
font-size: 30px !important;
line-height: 1.2;
font-weight: 800;
letter-spacing: -.02em;
margin: 48px 0 4px !important;
}
/* (правило скрытия заголовка компонента снято — он оставлен как единственный) */
@media (max-width: 860px) {
body.nd-hybrid #video-reviews { font-size: 22px !important; margin-top: 32px !important; }
}
/* 20.08.2026, поправка к предыдущему блоку: скрыть заголовок компонента через :has не вышло
(секция слайдера — не сосед нашего заголовка). Делаем наоборот и проще: оставляем ОДИН
заголовок — тот, что рисует компонент, приводим его к размеру нового дизайна, а свой
превращаем в невидимую якорную метку (ссылка «Видео отзывы» на него по-прежнему ведёт). */
body.nd-hybrid #video-reviews {
font-size: 0 !important;
line-height: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
body.nd-hybrid .box-slider__title .title_h2 {
font-size: 30px !important;
line-height: 1.2;
font-weight: 800;
letter-spacing: -.02em;
}
@media (max-width: 860px) {
body.nd-hybrid .box-slider__title .title_h2 { font-size: 22px !important; }
}
/* ============================================================
20.08.2026 — /news/ на страницах-гибридов.
Список новостей выводился полосами во всю ширину: карточка 1436x162 без картинки,
основную площадь занимала пустота, шесть заголовков подряд читались как таблица.
Заголовок страницы («Автомобильные новости» в чёрной плашке) начинался с 14px,
то есть левее всей остальной сетки.
Раскладываем карточки в сетку и подтягиваем заголовок к общей левой линии.
Разметку и тексты не трогаем — всё из админки, правки только оформительские.
============================================================ */
body.nd-hybrid .collections__list.news-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
body.nd-hybrid .collections__list.news-list .collection__item {
background: #FFF;
border: 1px solid var(--line, #ececf0);
border-radius: 16px;
padding: 20px;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color .2s ease, box-shadow .2s ease;
}
body.nd-hybrid .collections__list.news-list .collection__item:hover {
border-color: #DCDCD8;
box-shadow: 0 2px 14px rgba(14, 14, 18, .06);
}
/* заголовок новости — основной вес карточки */
body.nd-hybrid .collections__list.news-list .collection__item a {
font-size: 16px;
line-height: 1.35;
font-weight: 700;
color: var(--ink, #0E0E12);
}
body.nd-hybrid .collections__list.news-list .collection__item a:hover { color: var(--accent, #E11D2E); }
@media (max-width: 1100px) {
body.nd-hybrid .collections__list.news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
body.nd-hybrid .collections__list.news-list { grid-template-columns: 1fr; gap: 12px; }
body.nd-hybrid .collections__list.news-list .collection__item { padding: 16px; }
body.nd-hybrid .collections__list.news-list .collection__item a { font-size: 15px; }
}
/* ============================================================
20.08.2026 — /contacts/: форма обратной связи и типографика.
Верх страницы, карточки каналов, рейтинги площадок и блок офисов с картами уже сделаны
в новом дизайне (блок офисов появляется по прокрутке — это штатная анимация ct-reveal,
не дефект). Оставались прежними форма внизу и размер заголовка:
поля 50,6px со шрифтом 12,7px и без скругления, кнопка со скруглением 7px старого
красного оттенка, системные квадратики согласия.
Приводим к стандарту нового дизайна: поле 56px / шрифт 14px / скругление 12px / рамка
светло-серая, кнопка 54px того же скругления, согласия — с фирменным цветом галочки.
Разметку не трогаем: страница общая с боевым сайтом, все правки — стилем в скоупе nd-hybrid.
============================================================ */
body.nd-hybrid .ct-bottom__form input[type="text"],
body.nd-hybrid .ct-bottom__form input[type="tel"],
body.nd-hybrid .ct-bottom__form input[type="email"],
body.nd-hybrid .ct-bottom__form textarea {
height: 56px;
padding: 0 16px;
border: 1px solid #E3E3DF !important;
border-radius: 12px !important;
background: #FFF !important;
font-family: 'Montserrat', sans-serif;
font-size: 14px !important;
color: var(--ink, #0E0E12);
box-sizing: border-box;
transition: border-color .18s ease;
}
body.nd-hybrid .ct-bottom__form textarea {
height: 96px;
padding: 15px 16px;
resize: vertical;
}
body.nd-hybrid .ct-bottom__form input:focus,
body.nd-hybrid .ct-bottom__form textarea:focus {
outline: none;
border-color: var(--ink, #0E0E12) !important;
}
body.nd-hybrid .ct-bottom__form ::placeholder { color: #9A9AA2; }
body.nd-hybrid .ct-bottom__form button[type="submit"],
body.nd-hybrid .ct-bottom__form input[type="submit"],
body.nd-hybrid .ct-bottom__form .btn {
height: 54px;
line-height: 54px;
padding: 0 22px;
border: 0;
border-radius: 12px !important;
background: var(--accent, #E11D2E) !important;
color: #FFF;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background .18s ease;
}
body.nd-hybrid .ct-bottom__form button[type="submit"]:hover,
body.nd-hybrid .ct-bottom__form input[type="submit"]:hover { background: var(--accent-2, #B8152B) !important; }
/* согласия: системные квадратики -> фирменные */
body.nd-hybrid .ct-bottom__form input[type="checkbox"] {
width: 17px;
height: 17px;
accent-color: var(--accent, #E11D2E);
margin-top: 1px;
flex: none;
}
body.nd-hybrid .ct-bottom__form label {
font-size: 12.5px;
line-height: 1.45;
color: var(--muted, #6E6E76);
}
/* заголовок страницы — по шкале нового дизайна */
body.nd-hybrid .ct h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.02em; }
@media (max-width: 860px) {
body.nd-hybrid .ct h1 { font-size: 27px; }
body.nd-hybrid .ct-bottom__form input[type="text"],
body.nd-hybrid .ct-bottom__form input[type="tel"],
body.nd-hybrid .ct-bottom__form input[type="email"] { height: 52px; }
}
/* поля формы держали собственную ширину ~320px внутри колонки 700px — справа оставалась
пустота в половину блока. Растягиваем на всю колонку, как в формах нового дизайна. */
body.nd-hybrid .ct-bottom__form form { display: block; }
body.nd-hybrid .ct-bottom__form input[type="text"],
body.nd-hybrid .ct-bottom__form input[type="tel"],
body.nd-hybrid .ct-bottom__form input[type="email"],
body.nd-hybrid .ct-bottom__form textarea,
body.nd-hybrid .ct-bottom__form button[type="submit"],
body.nd-hybrid .ct-bottom__form input[type="submit"] {
width: 100% !important;
max-width: 520px;
margin-bottom: 10px;
}
body.nd-hybrid .ct-bottom__form label { max-width: 520px; }
/* белая карточка формы (div.form) держала 386px внутри колонки 700px — справа пустовала
половина блока. Растягиваем карточку по колонке и оформляем как карточки нового дизайна. */
body.nd-hybrid .ct-bottom__form .form {
width: 100% !important;
max-width: none !important;
border-radius: 18px;
border: 1px solid var(--line, #ececf0);
box-shadow: 0 2px 14px rgba(14, 14, 18, .04);
box-sizing: border-box;
}
body.nd-hybrid .ct-bottom__form .form__group { width: 100% !important; max-width: 520px; }
/* ============================================================
20.08.2026 — список новостей в новом дизайне (/news/, только staging).
Заменяет прежний вид: полосы во всю ширину без картинок, чёрная плашка заголовка
левее сетки, сырая навигация «Начало | Пред. | 1 2 3 4 5 | След. | Конец».
============================================================ */
body.nd-hybrid .ndn-page { padding: 8px 0 72px; }
body.nd-hybrid .ndn-page .shell { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { body.nd-hybrid .ndn-page .shell { padding: 0 32px; } }
body.nd-hybrid .ndn-head { margin: 0 0 26px; }
body.nd-hybrid .ndn-eyebrow {
font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
color: var(--accent, #E11D2E); margin-bottom: 12px;
}
body.nd-hybrid .ndn-h1 {
font-family: 'Montserrat', sans-serif;
font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em;
color: var(--ink, #0E0E12); margin: 0 0 10px; background: none; padding: 0;
}
body.nd-hybrid .ndn-lead { font-size: 15px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 0; max-width: 720px; }
/* ---- сетка карточек ---- */
body.nd-hybrid .ndn-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
body.nd-hybrid .ndn-card {
display: flex; flex-direction: column;
background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 16px; overflow: hidden;
text-decoration: none; color: inherit;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.nd-hybrid .ndn-card:hover {
border-color: #DCDCD8; box-shadow: 0 6px 22px rgba(14, 14, 18, .08); transform: translateY(-2px);
}
body.nd-hybrid .ndn-card-pic { aspect-ratio: 16 / 9; background: var(--line-2, #f0f0f3); overflow: hidden; }
body.nd-hybrid .ndn-card-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.nd-hybrid .ndn-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
body.nd-hybrid .ndn-card-meta {
display: flex; align-items: center; gap: 12px;
font-size: 12px; color: var(--muted, #6E6E76);
}
body.nd-hybrid .ndn-card-views { display: inline-flex; align-items: center; gap: 4px; }
body.nd-hybrid .ndn-card-t {
font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--ink, #0E0E12);
}
body.nd-hybrid .ndn-card:hover .ndn-card-t { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndn-card-x { font-size: 13.5px; line-height: 1.5; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndn-card-go {
margin-top: auto; padding-top: 6px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700; color: var(--accent, #E11D2E);
}
/* ---- постраничная навигация ---- */
body.nd-hybrid .ndn-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 32px 0 10px; }
body.nd-hybrid .ndn-pg {
min-width: 40px; height: 40px; padding: 0 12px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid #E3E3DF; border-radius: 11px; background: #FFF;
font-size: 14px; font-weight: 600; color: var(--ink, #0E0E12); text-decoration: none;
transition: border-color .18s ease, background .18s ease;
}
body.nd-hybrid .ndn-pg:hover { border-color: #C9C9C4; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndn-pg.is-cur { background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12); color: #FFF; }
body.nd-hybrid .ndn-pg-arrow { color: var(--muted, #6E6E76); }
body.nd-hybrid .ndn-pg-dots { display: inline-flex; align-items: center; padding: 0 4px; color: #B9B9B4; }
body.nd-hybrid .ndn-count { text-align: center; font-size: 12.5px; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndn-empty { padding: 60px 0; text-align: center; color: var(--muted, #6E6E76); }
/* ---- планшет и телефон ---- */
@media (max-width: 1100px) {
body.nd-hybrid .ndn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.nd-hybrid .ndn-h1 { font-size: 32px; }
}
@media (max-width: 700px) {
body.nd-hybrid .ndn-page { padding: 4px 0 44px; }
body.nd-hybrid .ndn-page .shell { padding: 0 16px; }
body.nd-hybrid .ndn-grid { grid-template-columns: 1fr; gap: 14px; }
body.nd-hybrid .ndn-h1 { font-size: 26px; }
body.nd-hybrid .ndn-lead { font-size: 14px; }
body.nd-hybrid .ndn-card-t { font-size: 15.5px; }
body.nd-hybrid .ndn-card-body { padding: 14px 16px 16px; }
}
/* ============================================================
20.08.2026 — этапы заказа (блок nd_steps_korea).
Показывается на /faq/ над вопросами и на /faq/korea-used/ (там раскрытым).
До этого этапы жили только на отдельной странице в узкой колонке 800px старого вида
с красными бейджами «#1…#10».
============================================================ */
body.nd-hybrid .ndst { margin: 0 0 44px; }
body.nd-hybrid .ndst-head { margin-bottom: 18px; }
body.nd-hybrid .ndst-eyebrow {
font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
color: var(--accent, #E11D2E); margin-bottom: 10px;
}
body.nd-hybrid .ndst-h2 {
font-family: 'Montserrat', sans-serif;
font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
color: var(--ink, #0E0E12); margin: 0 0 8px;
}
body.nd-hybrid .ndst-lead { font-size: 14.5px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 0; max-width: 720px; }
body.nd-hybrid .ndst-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
body.nd-hybrid .ndst-item { margin: 0; }
body.nd-hybrid .ndst-det {
background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 16px;
transition: border-color .18s ease, box-shadow .18s ease;
}
body.nd-hybrid .ndst-det[open] { border-color: #DCDCD8; box-shadow: 0 2px 14px rgba(14, 14, 18, .05); }
body.nd-hybrid .ndst-det:hover { border-color: #DCDCD8; }
body.nd-hybrid .ndst-sum {
display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; align-items: center; gap: 14px;
padding: 16px 18px; cursor: pointer; list-style: none;
}
body.nd-hybrid .ndst-sum::-webkit-details-marker { display: none; }
body.nd-hybrid .ndst-num {
width: 34px; height: 34px; border-radius: 11px;
background: var(--ink, #0E0E12); color: #FFF;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800;
}
body.nd-hybrid .ndst-det[open] .ndst-num { background: var(--accent, #E11D2E); }
body.nd-hybrid .ndst-t { font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndst-chev { color: #B9B9B4; display: inline-flex; transition: transform .2s ease; }
body.nd-hybrid .ndst-det[open] .ndst-chev { transform: rotate(180deg); }
body.nd-hybrid .ndst-body {
padding: 0 18px 18px 66px;
font-size: 14px; line-height: 1.65; color: var(--ink-3, #3d3d48);
}
body.nd-hybrid .ndst-body p { margin: 0 0 10px; }
body.nd-hybrid .ndst-body b, body.nd-hybrid .ndst-body strong { color: var(--ink, #0E0E12); }
body.nd-hybrid .ndst-body a { color: var(--accent, #E11D2E); text-decoration: underline; }
body.nd-hybrid .ndst-body ol, body.nd-hybrid .ndst-body ul { margin: 0 0 10px; padding-left: 20px; }
body.nd-hybrid .ndst-body li { margin-bottom: 5px; }
/* старые кнопки «Оставить заявку» внутри текстов этапов */
body.nd-hybrid .ndst-body .btn,
body.nd-hybrid .ndst-body [class*="button"] {
display: inline-flex; align-items: center; justify-content: center;
height: 46px; padding: 0 20px; border-radius: 12px;
background: var(--accent, #E11D2E); color: #FFF; font-weight: 700; font-size: 14px; text-decoration: none;
}
body.nd-hybrid .ndst-more { margin-top: 16px; }
body.nd-hybrid .ndst-more-link {
display: inline-flex; align-items: center; gap: 8px;
height: 46px; padding: 0 18px; border: 1px solid #E3E3DF; border-radius: 12px;
font-size: 14px; font-weight: 700; color: var(--ink, #0E0E12); text-decoration: none;
transition: border-color .18s ease;
}
body.nd-hybrid .ndst-more-link:hover { border-color: #C9C9C4; color: var(--ink, #0E0E12); }
@media (max-width: 700px) {
body.nd-hybrid .ndst { margin-bottom: 32px; }
body.nd-hybrid .ndst-h2 { font-size: 22px; }
body.nd-hybrid .ndst-lead { font-size: 13.5px; }
body.nd-hybrid .ndst-sum { grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 10px; padding: 14px; }
body.nd-hybrid .ndst-num { width: 28px; height: 28px; border-radius: 9px; font-size: 12.5px; }
body.nd-hybrid .ndst-t { font-size: 15px; }
body.nd-hybrid .ndst-body { padding: 0 14px 14px 14px; font-size: 13.5px; }
}
/* 20.08.2026 (Ivan: «слишком широкие вопросы»): блок этапов на /faq/ стоит до сетки страницы
и растягивался на всю ширину, тогда как вопросы ниже идут колонкой 828px — строки выходили
слишком длинными. Держим блок в той же колонке, что и вопросы. */
@media (min-width: 1001px) {
body.nd-hybrid .ndfaq-section .ndst { max-width: 828px; }
}
/* 20.08.2026 (Ivan: «на /faq/ дублируется то, что есть на /faq/korea-used/»).
Компактный перечень этапов: только названия шагов, каждый — ссылка на свой пункт
подробной страницы. Полные тексты живут в одном месте. */
body.nd-hybrid .ndst-list.is-compact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.nd-hybrid .ndst-list.is-compact .ndst-item { list-style: none; }
body.nd-hybrid .ndst-sum-link {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border: 1px solid var(--line, #ececf0); border-radius: 12px; background: #FFF;
text-decoration: none; color: inherit;
transition: border-color .18s ease, box-shadow .18s ease;
}
body.nd-hybrid .ndst-sum-link:hover { border-color: #DCDCD8; box-shadow: 0 2px 12px rgba(14,14,18,.06); }
body.nd-hybrid .ndst-sum-link .ndst-t { font-size: 14px; font-weight: 600; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndst-sum-link:hover .ndst-t { color: var(--accent, #E11D2E); }
@media (max-width: 700px) {
body.nd-hybrid .ndst-list.is-compact { grid-template-columns: 1fr; }
}
/* ============================================================
20.08.2026 — /faq/: переходы на описания процесса по направлениям.
Повторяем порядок боевой страницы: сверху выходы на «Как проходит заказ» по каждому
направлению, ниже частые вопросы. Сами этапы живут на своих страницах — здесь только
переходы, чтобы один и тот же материал не повторялся по двум адресам.
============================================================ */
body.nd-hybrid .ndfaq-routes { margin: 0 0 30px; }
body.nd-hybrid .ndfaq-routes-eyebrow {
font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
color: var(--accent, #E11D2E); margin-bottom: 8px;
}
body.nd-hybrid .ndfaq-routes-lead { font-size: 14.5px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 0 0 16px; max-width: 640px; }
body.nd-hybrid .ndfaq-routes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.nd-hybrid .ndfaq-route {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 14px;
text-decoration: none; color: inherit;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.nd-hybrid .ndfaq-route:hover {
border-color: #DCDCD8; box-shadow: 0 4px 16px rgba(14, 14, 18, .07); transform: translateY(-1px);
}
body.nd-hybrid .ndfaq-route-ico {
width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--line-2, #f0f0f3);
display: inline-flex; align-items: center; justify-content: center; color: var(--muted, #6E6E76);
}
body.nd-hybrid .ndfaq-route-ico img { display: block; width: 22px; height: auto; }
body.nd-hybrid .ndfaq-route-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.nd-hybrid .ndfaq-route-t { font-size: 15px; font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndfaq-route:hover .ndfaq-route-t { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndfaq-route-n { font-size: 12.5px; line-height: 1.4; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndfaq-route-go { margin-left: auto; flex: none; color: #B9B9B4; }
body.nd-hybrid .ndfaq-route:hover .ndfaq-route-go { color: var(--accent, #E11D2E); }
@media (max-width: 700px) {
body.nd-hybrid .ndfaq-routes-grid { grid-template-columns: 1fr; }
body.nd-hybrid .ndfaq-routes { margin-bottom: 22px; }
}
/* 20.08.2026 (Ivan: «цифры прилипают»): у вопросов на /faq/ сетка summary задана без боковых
отступов (grid 44px/1fr/32px, padding 24px 0), поэтому номер «01» упирался в край карточки,
а между ним и текстом зияла дыра в 44px. Делаем как в остальных блоках вопросов на сайте:
номер отступает от края, колонка под него по размеру самого номера. */
body.nd-hybrid .ndfaq-list .faq summary {
grid-template-columns: 30px minmax(0, 1fr) 24px;
gap: 14px;
padding: 20px 22px;
align-items: start;
}
body.nd-hybrid .ndfaq-list .faq-num { padding-top: 3px; }
body.nd-hybrid .ndfaq-list .faq-body { padding: 0 22px 20px; }
@media (max-width: 700px) {
body.nd-hybrid .ndfaq-list .faq summary { grid-template-columns: 24px minmax(0, 1fr) 22px; gap: 10px; padding: 16px; }
body.nd-hybrid .ndfaq-list .faq-body { padding: 0 16px 16px; }
}
/* 20.08.2026: на /guarantee/ появился H1 «Гарантия на автомобили из Кореи», а внутри карточки
остался прежний заголовок «Гарантия» — получалось два заголовка подряд об одном и том же.
Прячем внутренний: он ничего не добавляет, а H1 теперь есть у страницы. */
body.nd-hybrid h2.process-info--inner { display: none; }
/* ============================================================
20.08.2026 — подсказка прокрутки у горизонтальных лент.
Ряд карточек условий на /credit/ и таблица на /hybrids/ прокручиваются вбок
(overflow-x: auto), но выглядят обрезанными: последняя карточка и последняя колонка
упираются в край без всякого признака, что там есть продолжение. Отсюда впечатление
«данные не влезли». Добавляем мягкое затухание правого края — видно, что лента едет дальше.
============================================================ */
body.nd-hybrid .cr-conditions__scroll,
body.nd-hybrid .ht-table {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent 100%);
mask-image: linear-gradient(to right, #000 calc(100% - 42px), transparent 100%);
scroll-behavior: smooth;
}
/* когда лента домотана до конца, затухание убираем — иначе край выглядит выцветшим */
body.nd-hybrid .cr-conditions__scroll.is-end,
body.nd-hybrid .ht-table.is-end {
-webkit-mask-image: none;
mask-image: none;
}
/* ============================================================
20.08.2026 — текстовые страницы: колонка была прижата к левому краю.
На /guarantee/ и /delivery/ содержимое сидело в блоке ~810px с margin 0, то есть
у левого края, а справа оставалось больше 600px пустоты. Рядом с широкой шапкой
нового дизайна это выглядело как недовёрстанная страница.
Центрируем колонку и даём ей чуть больше воздуха — длина строки остаётся удобной
для чтения (около 90 знаков), но блок больше не «висит» слева.
Юридические страницы (/policy/, /agreement/) не трогаем: там своя колонка,
она уже отцентрована.
============================================================ */
@media (min-width: 1001px) {
body.nd-hybrid .process-container,
body.nd-hybrid .delivery-desc .page__box {
max-width: 920px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* заголовок и крошки этих страниц — по той же оси, что и колонка */
body.nd-hybrid .delivery-desc,
body.nd-hybrid .process-container-wrap { display: block; }
}
/* На /guarantee/ заголовок лежит в своём контейнере рядом с колонкой текста — центрируем
его по той же оси, иначе H1 висит слева, а содержимое посередине. Признак страницы —
соседство контейнера с блоком .process-container, поэтому правило не задевает другие. */
@media (min-width: 1001px) {
body.nd-hybrid main.content > .container:has(> h1):has(~ * .process-container),
body.nd-hybrid main.content > .container:has(> h1) + * .process-container-head {
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
}
/* ============================================================
20.08.2026 — список подборок (/collections/, только staging).
У подборок в базе нет ни картинок, ни анонсов (проверено по всем 103), поэтому карточка
строится на заголовке, дате и просмотрах — без пустого места под изображение.
Навигация переиспользует стили постраничной навигации новостей (.ndn-pager).
============================================================ */
body.nd-hybrid .ndc-page { padding: 8px 0 72px; }
body.nd-hybrid .ndc-page .shell { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { body.nd-hybrid .ndc-page .shell { padding: 0 32px; } }
body.nd-hybrid .ndc-head { margin: 0 0 24px; }
body.nd-hybrid .ndc-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #E11D2E); margin-bottom: 12px; }
body.nd-hybrid .ndc-h1 { font-family: 'Montserrat', sans-serif; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #0E0E12); margin: 0 0 10px; background: none; padding: 0; }
body.nd-hybrid .ndc-lead { font-size: 15px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 0; max-width: 720px; }
body.nd-hybrid .ndc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.nd-hybrid .ndc-card {
display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
min-height: 130px; padding: 18px 20px;
background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 16px;
text-decoration: none; color: inherit;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body.nd-hybrid .ndc-card:hover { border-color: #DCDCD8; box-shadow: 0 6px 20px rgba(14,14,18,.07); transform: translateY(-2px); }
body.nd-hybrid .ndc-card-t { font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndc-card:hover .ndc-card-t { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndc-card-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndc-card-views { display: inline-flex; align-items: center; gap: 4px; }
body.nd-hybrid .ndc-card-go { margin-left: auto; color: #B9B9B4; display: inline-flex; }
body.nd-hybrid .ndc-card:hover .ndc-card-go { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndc-empty { padding: 60px 0; text-align: center; color: var(--muted, #6E6E76); }
@media (max-width: 1100px) {
body.nd-hybrid .ndc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.nd-hybrid .ndc-h1 { font-size: 32px; }
}
@media (max-width: 700px) {
body.nd-hybrid .ndc-page .shell { padding: 0 16px; }
body.nd-hybrid .ndc-grid { grid-template-columns: 1fr; gap: 12px; }
body.nd-hybrid .ndc-h1 { font-size: 26px; }
body.nd-hybrid .ndc-card { min-height: 0; padding: 16px; }
}
/* 20.08.2026 (Ivan: «подложка серая не очень»): секции нового тела попадали под старое правило
«каждая нечётная секция страницы — серая» (var(--bg, #f7f7f9)) и уезжали в серый фон, из-за чего белые
карточки на сером выглядели тускло. Задаём белый фон явно — как на остальных страницах
нового дизайна. */
body.nd-hybrid .ndc-page,
body.nd-hybrid .ndn-page { background: #FFF !important; }
/* 20.08.2026 (Ivan: «выровнять по левому краю на уровне хлебных крошек»): новые тела стояли
в колонке 1240px по центру (контент с 162px), а крошки и вся остальная сетка сайта —
с 32px. Приводим к общей сетке: те же 1520px и те же боковые отступы, что у крошек. */
body.nd-hybrid .ndc-page .shell,
body.nd-hybrid .ndn-page .shell {
max-width: 1520px;
padding-left: 24px;
padding-right: 24px;
}
@media (min-width: 1280px) {
body.nd-hybrid .ndc-page .shell,
body.nd-hybrid .ndn-page .shell { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1600px) {
body.nd-hybrid .ndc-page .shell,
body.nd-hybrid .ndn-page .shell { padding-left: 40px; padding-right: 40px; }
}
/* на широкой сетке помещается больше колонок */
@media (min-width: 1400px) {
body.nd-hybrid .ndc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.nd-hybrid .ndn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 20.08.2026 (Ivan: «вот этого фона не должно быть, всё должно быть на белом»).
Фон секции я перебил на белый раньше, но от того же старого правила осталась ВНУТРЕННЯЯ ТЕНЬ
(inset 0 10px 20px -7px rgba(0,0,0,.1)) — она и давала серую вуаль сверху блока,
особенно заметную на широких экранах. Снимаем и её. */
body.nd-hybrid .ndc-page,
body.nd-hybrid .ndn-page { box-shadow: none !important; }
/* ============================================================
20.08.2026 — /history/ («История продаж») в новом дизайне.
Страница на своей вёрстке (history/index.php) и своих стилях (include/history/history.css,
789 строк). Разметку и данные не трогаем — переопределяем оформление в скоупе nd-hybrid:
• тёмный сине-фиолетовый герой с градиентом -> светлая шапка нового дизайна;
• колонка 1013px по центру -> общая сетка сайта (как крошки, 32px слева);
• поля фильтра высотой 40px без рамок -> поля нового стандарта со скруглением;
• красная кнопка старого скругления -> кнопка нового дизайна;
• карточка -> белая с рамкой и скруглением 16px, шрифты Montserrat нормального размера;
• на телефоне отзыв больше не срезается молча — показывается целиком.
============================================================ */
/* ---- сетка и общий фон ---- */
body.nd-hybrid .sh-page {
padding-bottom: 64px;
background: #FFF;
box-shadow: none;
}
body.nd-hybrid .sh-catalog > .container,
body.nd-hybrid .sh-catalog .container {
max-width: 1520px;
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
@media (min-width: 1280px) {
body.nd-hybrid .sh-catalog > .container,
body.nd-hybrid .sh-catalog .container { padding: 0 32px; }
}
@media (min-width: 1600px) {
body.nd-hybrid .sh-catalog > .container,
body.nd-hybrid .sh-catalog .container { padding: 0 40px; }
}
/* ---- шапка страницы ---- */
body.nd-hybrid .sh-header {
text-align: left;
margin-bottom: 22px;
padding-top: 4px;
background: none;
}
body.nd-hybrid .sh-header h1,
body.nd-hybrid .sh-catalog h1 {
font-family: 'Montserrat', sans-serif;
font-size: 40px;
line-height: 1.1;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ink, #0E0E12);
background: none !important;
-webkit-text-fill-color: currentColor;
padding: 0;
margin: 0 0 10px;
text-align: left;
}
body.nd-hybrid .sh-header__subtitle {
font-size: 15px;
line-height: 1.55;
color: var(--muted, #6E6E76);
margin: 0 0 12px;
max-width: 720px;
text-align: left;
}
body.nd-hybrid .sh-header__count {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--line-2, #f0f0f3);
color: var(--ink, #0E0E12);
border-radius: 999px;
padding: 8px 14px;
font-size: 12.5px;
font-weight: 700;
margin: 0;
}
/* ---- фильтр ---- */
body.nd-hybrid .sh-filter {
background: #FFF;
border: 1px solid var(--line, #ececf0);
border-radius: 16px;
padding: 16px;
margin-bottom: 18px;
box-shadow: none;
}
body.nd-hybrid .sh-filter__row { gap: 10px; }
body.nd-hybrid .sh-filter__select,
body.nd-hybrid .sh-filter__input {
height: 48px;
border: 1px solid #E3E3DF;
border-radius: 12px;
padding: 0 14px;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
color: var(--ink, #0E0E12);
background-color: #FFF;
box-sizing: border-box;
width: 100%;
}
body.nd-hybrid .sh-filter__select:focus,
body.nd-hybrid .sh-filter__input:focus { outline: none; border-color: var(--ink, #0E0E12); }
body.nd-hybrid .sh-filter__sep { color: #B9B9B4; font-size: 14px; }
body.nd-hybrid .sh-filter__submit {
height: 48px;
padding: 0 26px;
border: 0;
border-radius: 12px;
background: var(--accent, #E11D2E);
color: #FFF;
font-family: 'Montserrat', sans-serif;
font-size: 14.5px;
font-weight: 700;
cursor: pointer;
}
body.nd-hybrid .sh-filter__submit:hover { background: var(--accent-2, #B8152B); }
body.nd-hybrid .sh-filter__reset {
height: 48px;
display: inline-flex;
align-items: center;
padding: 0 16px;
border-radius: 12px;
color: var(--muted, #6E6E76);
font-size: 13.5px;
text-decoration: none;
}
body.nd-hybrid .sh-filter__reset:hover { color: var(--accent, #E11D2E); }
/* ---- сортировка ---- */
body.nd-hybrid .sh-sort { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
body.nd-hybrid .sh-sort__label { font-size: 12.5px; color: var(--muted, #6E6E76); }
body.nd-hybrid .sh-sort a {
padding: 8px 14px;
border: 1px solid #E3E3DF;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--ink, #0E0E12);
text-decoration: none;
background: #FFF;
}
body.nd-hybrid .sh-sort a:hover { border-color: #C9C9C4; color: var(--ink, #0E0E12); }
body.nd-hybrid .sh-sort a.is-active,
body.nd-hybrid .sh-sort a.active {
background: var(--ink, #0E0E12);
border-color: var(--ink, #0E0E12);
color: #FFF;
}
/* ---- карточка сделки ---- */
body.nd-hybrid .sh-list { display: grid; gap: 14px; }
body.nd-hybrid .sh-card {
background: #FFF;
border: 1px solid var(--line, #ececf0);
border-radius: 16px;
overflow: hidden;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
body.nd-hybrid .sh-card:hover { border-color: #DCDCD8; box-shadow: 0 4px 18px rgba(14, 14, 18, .06); }
body.nd-hybrid .sh-card__photo { background: var(--line-2, #f0f0f3); }
body.nd-hybrid .sh-card__photo img { object-fit: cover; }
body.nd-hybrid .sh-card__title {
font-family: 'Montserrat', sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--ink, #0E0E12);
line-height: 1.3;
}
body.nd-hybrid .sh-card__price {
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-weight: 800;
color: var(--accent, #E11D2E);
letter-spacing: -.01em;
}
body.nd-hybrid .sh-card__price-label { font-size: 12px; color: var(--muted, #6E6E76); }
body.nd-hybrid .sh-card__economy {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--line-2, #f0f0f3);
color: #1B7F3B;
border-radius: 999px;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 700;
}
body.nd-hybrid .sh-card__specs { display: flex; flex-wrap: wrap; gap: 6px; }
body.nd-hybrid .sh-card__spec {
background: var(--line-2, #f0f0f3);
border-radius: 8px;
padding: 5px 10px;
font-size: 12.5px;
color: var(--ink-3, #3d3d48);
}
body.nd-hybrid .sh-card__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--muted, #6E6E76); }
body.nd-hybrid .sh-card__review {
background: var(--bg, #f7f7f9);
border: 1px solid var(--line, #ececf0);
border-radius: 12px;
padding: 12px 14px;
font-size: 13.5px;
line-height: 1.55;
color: var(--ink-3, #3d3d48);
}
body.nd-hybrid .sh-card__btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
padding: 0 20px;
border-radius: 12px;
background: var(--accent, #E11D2E);
color: #FFF;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
body.nd-hybrid .sh-card__btn:hover { background: var(--accent-2, #B8152B); color: #FFF; }
/* ---- постраничная навигация ---- */
body.nd-hybrid .sh-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; }
body.nd-hybrid .sh-pagination__num,
body.nd-hybrid .sh-pagination__prev,
body.nd-hybrid .sh-pagination__next {
min-width: 40px;
height: 40px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #E3E3DF;
border-radius: 11px;
background: #FFF;
font-size: 14px;
font-weight: 600;
color: var(--ink, #0E0E12);
text-decoration: none;
}
body.nd-hybrid .sh-pagination__num:hover { border-color: #C9C9C4; }
body.nd-hybrid .sh-pagination__num.is-active,
body.nd-hybrid .sh-pagination__num.active {
background: var(--ink, #0E0E12);
border-color: var(--ink, #0E0E12);
color: #FFF;
}
body.nd-hybrid .sh-pagination__dots { display: inline-flex; align-items: center; padding: 0 4px; color: #B9B9B4; }
/* ---- телефон ---- */
@media (max-width: 700px) {
body.nd-hybrid .sh-catalog > .container,
body.nd-hybrid .sh-catalog .container { padding: 0 16px; }
body.nd-hybrid .sh-header h1,
body.nd-hybrid .sh-catalog h1 { font-size: 26px; }
body.nd-hybrid .sh-header__subtitle { font-size: 14px; }
body.nd-hybrid .sh-filter { padding: 12px; }
body.nd-hybrid .sh-filter__select,
body.nd-hybrid .sh-filter__input,
body.nd-hybrid .sh-filter__submit { height: 46px; }
body.nd-hybrid .sh-card__title { font-size: 16px; }
body.nd-hybrid .sh-card__price { font-size: 18px; }
/* отзыв больше не срезается молча: раньше на телефоне терялись 2-3 строки без возможности раскрыть */
body.nd-hybrid .sh-card__review {
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
max-height: none;
}
}
/* 20.08.2026: карточки сделок шли полосами во всю ширину (1436px) — фото маленькое слева,
справа много пустоты. Ставим в две колонки на больших экранах, на планшете и телефоне — одну. */
@media (min-width: 1100px) {
body.nd-hybrid .sh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1700px) {
body.nd-hybrid .sh-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 20.08.2026 (Ivan: «зачем этот водяной знак на фото?»): у .sh-card__photo::after задана
SVG-заглушка «нет фото», но она рисовалась ВСЕГДА — и поверх нормально загруженного снимка.
Оставляем её только там, где изображения действительно нет. */
body.nd-hybrid .sh-card__photo:has(img)::after { content: none !important; }
/* 20.08.2026 (Ivan: «приведи в порядок» /partner/):
• контент шёл колонкой 1240px (с 162px), а крошки и сетка сайта — с 32px;
• секции чередовались серым фоном, хотя остальной новый дизайн держим на белом. */
body.nd-hybrid .ndp-page .shell {
max-width: 1520px;
padding-left: 24px;
padding-right: 24px;
}
@media (min-width: 1280px) { body.nd-hybrid .ndp-page .shell { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1600px) { body.nd-hybrid .ndp-page .shell { padding-left: 40px; padding-right: 40px; } }
body.nd-hybrid .ndp-sec-gray,
body.nd-hybrid .ndp-sec-form { background: #FFF !important; box-shadow: none !important; }
/* разделяем секции тонкой линией вместо заливки */
body.nd-hybrid .ndp-sec + .ndp-sec { border-top: 1px solid var(--line, #ececf0); }
/* на широком экране карточки выгод и «почему» не растягиваем сверх меры */
@media (min-width: 1500px) {
body.nd-hybrid .ndp-grid-4 { gap: 16px; }
}
/* значки блока «Почему выбирают» — в кружке, как иконки контактов */
body.nd-hybrid .ndp-why-ico {
width: 38px; height: 38px; border-radius: 11px; background: var(--line-2, #f0f0f3);
display: inline-flex; align-items: center; justify-content: center; color: var(--accent, #E11D2E);
}
/* ============================================================
21.08.2026 (Ivan: «приведи в нормальный вид» /calculator/):
• заголовок был 30px на ПК и 18px на телефоне — мельче, чем на остальных страницах
нового дизайна (40/26), из-за чего страница выглядела «служебной»;
• поля формы 40px со шрифтом 13px — ниже нового стандарта (48px, 14px);
• секции чередовались серой заливкой, хотя весь новый дизайн держим на белом;
• главное действие «Рассчитать растаможку» было чёрным — приводим к красному,
как остальные основные кнопки сайта.
============================================================ */
body.nd-hybrid .ndcalc h1,
body.nd-hybrid .ndcalc-h1 {
font-family: Montserrat, sans-serif;
font-size: 40px;
line-height: 1.1;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ink, #0E0E12);
margin: 0 0 10px;
}
body.nd-hybrid .ndcalc-lead,
body.nd-hybrid .ndcalc-leadtext { font-size: 15px; line-height: 1.55; color: var(--muted, #6E6E76); }
/* поля и селекты формы расчёта */
body.nd-hybrid .ndcalc .field input,
body.nd-hybrid .ndcalc .field select,
body.nd-hybrid .ndcalc .ctrl input,
body.nd-hybrid .ndcalc .ctrl select,
body.nd-hybrid .ndcalc-form input:not([type=radio]):not([type=checkbox]),
body.nd-hybrid .ndcalc-form select {
height: 48px;
border: 1px solid #E3E3DF;
border-radius: 12px;
padding: 0 14px;
font-family: Montserrat, sans-serif;
font-size: 14px;
color: var(--ink, #0E0E12);
background-color: #FFF;
box-sizing: border-box;
}
body.nd-hybrid .ndcalc-form input:focus,
body.nd-hybrid .ndcalc-form select:focus { outline: none; border-color: var(--ink, #0E0E12); }
/* главное действие — красная кнопка нового дизайна */
body.nd-hybrid .ndcalc-cta .c-btn-pri,
body.nd-hybrid .ndcalc-form button[type="submit"],
body.nd-hybrid .ndcalc .c-btn-pri {
height: 52px;
border-radius: 12px;
background: var(--accent, #E11D2E);
border-color: var(--accent, #E11D2E);
color: #FFF;
font-family: Montserrat, sans-serif;
font-size: 15px;
font-weight: 700;
}
body.nd-hybrid .ndcalc-cta .c-btn-pri:hover,
body.nd-hybrid .ndcalc .c-btn-pri:hover { background: var(--accent-2, #B8152B); border-color: var(--accent-2, #B8152B); }
body.nd-hybrid .how-section + .how-section,
body.nd-hybrid .ndcalc-how + .ndcalc-hl { border-top: 1px solid var(--line, #ececf0); }
@media (max-width: 700px) {
body.nd-hybrid .ndcalc h1,
body.nd-hybrid .ndcalc-h1 { font-size: 26px; }
body.nd-hybrid .ndcalc-lead,
body.nd-hybrid .ndcalc-leadtext { font-size: 14px; }
body.nd-hybrid .ndcalc .field input,
body.nd-hybrid .ndcalc .field select,
body.nd-hybrid .ndcalc-form input:not([type=radio]):not([type=checkbox]),
body.nd-hybrid .ndcalc-form select { height: 46px; }
}
body.nd-hybrid .fpanel-inner,
body.nd-hybrid .ndcalc-form,
body.nd-hybrid .ndcalc-res {
box-shadow: none !important;
border: 1px solid var(--line, #ececf0);
}
/* заголовки таблиц — светлее, без серой заливки в полную силу */
body.nd-hybrid .ndcalc-seo table th {
background: var(--bg, #f7f7f9) !important;
color: var(--ink-3, #3d3d48);
font-weight: 700;
}
/* мелочь: на /reviews/ обёртка контактов залита #fefefe — почти белый, но не белый */
body.nd-hybrid .bg-style-contacts { background: #FFF !important; }
body.nd-hybrid .news-detail-custom .container-custom { width: 100%; }
body.nd-hybrid .news-detail-custom .flex-column-detail-news {
flex-direction: column;
justify-content: flex-end;
width: 100%;
padding-bottom: 22px;
}
body.nd-hybrid .news-detail-custom .page__box--custom {
max-width: none;
width: 100%;
padding: 0;
box-shadow: none;
}
body.nd-hybrid .news-detail-custom .top-detail-meta {
padding: 0 !important;
gap: 18px;
flex-wrap: wrap;
align-items: center;
font-size: 12.5px;
font-weight: 500;
color: rgba(255, 255, 255, .82);
margin-bottom: 14px;
}
body.nd-hybrid .news-detail-custom .top-detail-meta .iportal-date-item,
body.nd-hybrid .news-detail-custom .top-detail-meta .iportal-show-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 !important;
}
body.nd-hybrid .news-detail-custom .top-detail-meta .img-meta-iportal {
width: 14px;
height: 14px;
filter: brightness(0) invert(1);
opacity: .8;
}
body.nd-hybrid .news-detail-custom .preview-detail-txt p { margin: 0; }
body.nd-hybrid .news-detail-custom .detail-news__author-line {
margin: 16px 0 0;
padding: 14px 0 0;
border-top: 1px solid rgba(255, 255, 255, .18);
}
body.nd-hybrid .news-detail-custom .flex-author { padding: 0 !important; }
body.nd-hybrid .news-detail-custom .share-link-block--title {
font-size: 12px;
color: rgba(255, 255, 255, .7);
}
body.nd-hybrid .content-news h4 { font-size: 17px; font-weight: 700; color: var(--ink, #0E0E12); margin: 20px 0 8px; }
/* рубрика над заголовком: h2 и следующий за ним h3 больше не слипаются */
body.nd-hybrid .content-news h2 + h3 { margin-top: 8px; }
body.nd-hybrid .content-news ul,
body.nd-hybrid .content-news ol { margin: 0 0 16px; padding-left: 22px; }
body.nd-hybrid .content-news li { margin-bottom: 8px; line-height: 1.65; }
body.nd-hybrid .content-news a { color: var(--accent, #E11D2E); text-decoration: underline; text-underline-offset: 2px; }
body.nd-hybrid .content-news a:hover { color: var(--accent-2, #B8152B); }
body.nd-hybrid .content-news strong, body.nd-hybrid .content-news b { font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .content-news img { max-width: 100%; height: auto; border-radius: 14px; margin: 6px 0 18px; }
body.nd-hybrid .content-news table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
margin: 8px 0 22px;
display: block;
overflow-x: auto;
}
body.nd-hybrid .content-news th,
body.nd-hybrid .content-news td { border: 1px solid var(--line, #ececf0); padding: 10px 12px; text-align: left; }
body.nd-hybrid .content-news th { background: var(--bg, #f7f7f9); font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .content-news blockquote {
margin: 18px 0;
padding: 14px 18px;
border-left: 3px solid var(--accent, #E11D2E);
background: var(--bg, #f7f7f9);
border-radius: 0 12px 12px 0;
font-size: 16px;
}
/* ---- «Популярные новости» ---- */
body.nd-hybrid .popular-news-container {
margin-top: 8px;
padding-top: 0;
border-top: 1px solid var(--line, #ececf0);
}
body.nd-hybrid .popular-news-item:hover { border-color: #DCDCD8; }
body.nd-hybrid .popular-news-item__img .img-block {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
body.nd-hybrid .popular-news-item__cover {
position: static !important;
background: none !important;
background-image: none !important;
padding: 14px 16px 16px !important;
display: flex;
flex-direction: column;
gap: 10px;
height: auto;
}
body.nd-hybrid .popular-news-item__name {
color: var(--ink, #0E0E12);
font-size: 15.5px;
font-weight: 700;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.nd-hybrid .popular-news-item__meta {
color: var(--muted, #6E6E76);
font-size: 12.5px;
padding: 0 !important;
gap: 14px;
margin-top: auto;
}
body.nd-hybrid .popular-news-item__meta .img-meta-iportal { width: 13px; height: 13px; opacity: .55; }
body.nd-hybrid .popular-news-item__meta .iportal-date-item,
body.nd-hybrid .popular-news-item__meta .iportal-show-item { display: inline-flex; align-items: center; gap: 5px; }
/* 21.08.2026 — в теле статьи есть обёртка .detail-txt с базовым 12.4px: от неё
наследовали списки (14px) и выделения (12.4px), из-за чего перечни и FAQ в конце
выглядели мельче основного текста. Выравниваем всё по одному размеру. */
body.nd-hybrid .content-news .detail-txt,
body.nd-hybrid .content-news ul,
body.nd-hybrid .content-news ol,
body.nd-hybrid .content-news li,
body.nd-hybrid .content-news div { font-size: 16.5px; line-height: 1.72; }
body.nd-hybrid .content-news strong,
body.nd-hybrid .content-news b,
body.nd-hybrid .content-news em,
body.nd-hybrid .content-news span { font-size: inherit; }
body.nd-hybrid .content-news ul { list-style: disc; }
body.nd-hybrid .content-news ol { list-style: decimal; }
@media (max-width: 700px) {
body.nd-hybrid .content-news .detail-txt,
body.nd-hybrid .content-news ul,
body.nd-hybrid .content-news ol,
body.nd-hybrid .content-news li,
body.nd-hybrid .content-news div { font-size: 15.5px; line-height: 1.68; }
}
body.nd-hybrid .bread-navigation .breadcrumbs-car-wrapper { padding: 14px 0 6px; }
body.nd-hybrid .popular-news-item__img .img-block { background-color: transparent; }
/* 21.08.2026: в мете статьи иконка часов (clock.svg) — чёрный круг с белой стрелкой;
на тёмной шапке после инверсии она превращалась в белое пятно. Часы убираем,
пункты разделяем точкой; иконка просмотров (контурный глаз) остаётся. */
body.nd-hybrid .news-detail-custom .top-detail-meta img[src*="clock"] { display: none; }
body.nd-hybrid .news-detail-custom .top-detail-meta > *:not(:first-child)::before {
content: "·";
margin-right: 18px;
color: rgba(255, 255, 255, .45);
}
body.nd-hybrid .news-detail-custom .top-detail-meta { gap: 0; }
body.nd-hybrid .news-detail-custom .top-detail-meta > * { margin-right: 18px; }
@media (max-width: 700px) {
/* на телефоне содержимое шапки выше картинки — мета прилипала к крошкам */
body.nd-hybrid .news-detail-custom .flex-column-detail-news { padding-top: 22px; }
body.nd-hybrid .news-detail-custom .top-detail-meta { font-size: 12px; }
body.nd-hybrid .news-detail-custom .top-detail-meta > * { margin-right: 12px; }
body.nd-hybrid .news-detail-custom .top-detail-meta > *:not(:first-child)::before { margin-right: 12px; }
}
/* 21.08.2026: заголовки новостей занимают 2-3 строки, из-за чего низ соседних карточек
не совпадал. Тянем карточки на всю высоту ряда. */
body.nd-hybrid .popular-news-item-row { align-items: stretch; }
body.nd-hybrid .popular-news-item-col { display: flex; }
body.nd-hybrid .popular-news-item { display: flex; flex-direction: column; width: 100%; }
body.nd-hybrid .popular-news-item__cover { flex: 1 1 auto; }
/* 21.08.2026: таблицы в статьях (ставки утильсбора и т.п.) шли своей узкой шириной
и занимали треть колонки — растягиваем на всю ширину текста. */
body.nd-hybrid .content-news table { width: 100% !important; max-width: 100%; }
body.nd-hybrid .content-news table td,
body.nd-hybrid .content-news table th { white-space: normal; }
/* 21.08.2026: display:block превращал таблицу в блок, и колонки сжимались по содержимому
(таблица ставок занимала треть колонки). Возвращаем таблице табличное поведение,
прокрутку на узком экране отдаём обёртке .table-wrapper (она уже есть в разметке). */
body.nd-hybrid .content-news table { display: table; overflow-x: visible; }
body.nd-hybrid .content-news .table-wrapper,
body.nd-hybrid .content-news .split-container { overflow-x: auto; max-width: 100%; }
/* 21.08.2026: шапку /faq/ и /faq/korea-used/ вернули на общую сетку (крошки с 32px),
а колонка контента оставалась узкой И отцентрованной — из-за этого заголовок начинался
с 32px, а текст под ним с 162px. Узкую колонку прижимаем к левому краю: ширина чтения
сохраняется, левый край совпадает с крошками и заголовком, как на /news/ и /collections/. */
@media (min-width: 1001px) {
body.nd-hybrid .ndfaq-section .shell,
body.nd-hybrid .ndsteps-section .shell,
body.nd-hybrid .ndp-page .shell { margin-left: 0; margin-right: auto; }
}
/* ============================================================
21.08.2026 (Ivan: «нужно как-то ограничить ширину текста в статье»).
Было: колонка текста 880px — 88 знаков в строке, глазу тяжело держать строку,
а справа зияло пустое поле в половину экрана.
Стало: текст ~720px (≈70 знаков — комфортный диапазон для чтения), справа липкая
колонка с оглавлением по разделам статьи и переходом к заявке.
============================================================ */
body.nd-hybrid .news-detail-custom .container > .row {
display: flex;
align-items: flex-start;
gap: 40px;
}
body.nd-hybrid .news-detail-custom .page__box--center {
max-width: 720px;
flex: 1 1 720px;
min-width: 0;
}
body.nd-hybrid .news-detail-custom .col-md-3 {
flex: 0 0 320px;
max-width: 320px;
width: 320px;
padding: 0;
}
body.nd-hybrid .news-detail-custom .right-side-detail-news {
position: sticky;
top: 84px;
display: grid;
gap: 14px;
margin-top: 24px;
}
/* якорь не должен уезжать под шапку */
body.nd-hybrid .content-news h2 { scroll-margin-top: 90px; }
/* ---- оглавление ---- */
body.nd-hybrid .ndart-toc {
border: 1px solid var(--line, #ececf0);
border-radius: 16px;
padding: 16px 18px;
background: #FFF;
}
body.nd-hybrid .ndart-toc-head {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted, #6E6E76);
margin-bottom: 10px;
}
body.nd-hybrid .ndart-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.nd-hybrid .ndart-toc-list li { margin: 0; }
body.nd-hybrid .ndart-toc-list a {
display: block;
padding: 7px 10px;
border-radius: 9px;
font-size: 13.5px;
line-height: 1.4;
color: var(--ink-3, #3d3d48);
text-decoration: none;
border-left: 2px solid transparent;
}
body.nd-hybrid .ndart-toc-list a:hover { background: var(--bg, #f7f7f9); color: var(--ink, #0E0E12); }
body.nd-hybrid .ndart-toc-list a.is-cur {
background: var(--bg, #f7f7f9);
border-left-color: var(--accent, #E11D2E);
color: var(--ink, #0E0E12);
font-weight: 600;
}
/* ---- карточка заявки ---- */
body.nd-hybrid .ndart-cta {
border: 1px solid var(--line, #ececf0);
border-radius: 16px;
padding: 18px;
background: #FFF;
}
body.nd-hybrid .ndart-cta-t { font-size: 15.5px; font-weight: 700; color: var(--ink, #0E0E12); line-height: 1.3; margin-bottom: 6px; }
body.nd-hybrid .ndart-cta-d { font-size: 13px; line-height: 1.5; color: var(--muted, #6E6E76); margin-bottom: 14px; }
body.nd-hybrid .ndart-cta-btn {
display: block;
text-align: center;
height: 44px;
line-height: 44px;
border-radius: 12px;
background: var(--accent, #E11D2E);
color: #FFF;
font-size: 14.5px;
font-weight: 700;
text-decoration: none;
}
body.nd-hybrid .ndart-cta-btn:hover { background: var(--accent-2, #B8152B); color: #FFF; }
body.nd-hybrid .ndart-cta-tel {
display: block;
text-align: center;
margin-top: 10px;
font-size: 15px;
font-weight: 700;
color: var(--ink, #0E0E12);
text-decoration: none;
}
/* ---- узкий экран: боковая колонка уходит вниз, текст на всю ширину ---- */
@media (max-width: 1100px) {
body.nd-hybrid .news-detail-custom .container > .row { display: block; }
body.nd-hybrid .news-detail-custom .page__box--center { max-width: 720px; }
body.nd-hybrid .news-detail-custom .col-md-3 { flex: none; width: 100%; max-width: 720px; }
body.nd-hybrid .news-detail-custom .right-side-detail-news { position: static; margin: 0 0 32px; }
body.nd-hybrid .ndart-toc { display: none; }
}
/* 21.08.2026: у .row старого шаблона стоит justify-content: space-between — текст и боковая
колонка разъезжались к краям, между ними зияло ~400px. Прижимаем колонки друг к другу
и ограничиваем всю связку 1180px: текст 760 (≈65 знаков в строке) + оглавление 340. */
body.nd-hybrid .news-detail-custom .container > .row {
justify-content: flex-start;
max-width: 1180px;
gap: 56px;
}
body.nd-hybrid .news-detail-custom .page__box--center {
max-width: 760px;
flex: 1 1 760px;
}
body.nd-hybrid .news-detail-custom .col-md-3 {
flex: 0 0 340px;
max-width: 340px;
width: 340px;
}
@media (max-width: 1100px) {
body.nd-hybrid .news-detail-custom .page__box--center { max-width: 760px; }
body.nd-hybrid .news-detail-custom .col-md-3 { width: 100%; max-width: 760px; }
}
/* 21.08.2026: у .news-detail-custom стоит overflow:hidden — он делает блок контейнером
прокрутки, из-за чего липкое оглавление не липло, а уезжало вверх вместе с текстом.
overflow:clip обрезает так же, но контейнером прокрутки не становится — sticky работает. */
body.nd-hybrid .news-detail-custom { overflow: clip; }
/* 21.08.2026: липкое оглавление работает только пока его колонка на экране. При
align-items:flex-start колонка была высотой в собственный контент (551px) и оглавление
уезжало вместе с ней. Растягиваем колонку на всю высоту ряда. */
body.nd-hybrid .news-detail-custom .container > .row { align-items: stretch; }
body.nd-hybrid .news-detail-custom .col-md-3 { align-self: stretch; }
/* ---- у блока, который идёт сразу под крошками, свой верхний отступ не нужен:
иначе к нашим 20px прибавляется ещё его собственный ---- */
body.nd-hybrid .legal-page { padding-top: 0; }
body.nd-hybrid .ndn-page,
body.nd-hybrid .ndc-page,
body.nd-hybrid .ndp-page,
body.nd-hybrid .ndf-page,
body.nd-hybrid .fav-section { padding-top: 0; }
/* 21.08.2026: три страницы выбивались из общего ритма своими отступами —
/calculator-utilsbora/ добавлял 30px сверху к блоку калькулятора,
/statistic/ приподнимал шапку на -14px. Обнуляем, чтобы под крошками везде было 20px. */
body.nd-hybrid .utilsbor-calc { margin-top: 0; padding-top: 0; }
body.nd-hybrid .st-hero { margin-top: 0; }
/* 21.08.2026: на телефоне у .news-detail-custom стоит margin-top: -15px — он съедал
нижний отступ крошек, и фото статьи начиналось прямо под ними. */
body.nd-hybrid .news-detail-custom { margin-top: 0 !important; }
/* ---- карточки и полосы, залитые «почти белым» (#f7f8fa, #f6f7f9, #f9f9f9):
в новом дизайне такие блоки — белые с тонкой рамкой ---- */
body.nd-hybrid .ab-why__card,
body.nd-hybrid .legal-card,
body.nd-hybrid .nq-trim,
body.nd-hybrid .mc-trim,
body.nd-hybrid .ks-trim,
body.nd-hybrid .calc-form,
body.nd-hybrid .cr-country-item {
background: #FFF !important;
border: 1px solid var(--line, #ececf0);
box-shadow: none !important;
}
body.nd-hybrid section.nq-gallery,
body.nd-hybrid section.ks-trims,
body.nd-hybrid section.ks-specs,
body.nd-hybrid section.ct-bar,
body.nd-hybrid .nq-specs,
body.nd-hybrid .mc-specs {
background: #FFF !important;
box-shadow: none !important;
}
/* 21.08.2026: остатки «почти белых» подложек после общего сброса —
блок процесса на /about/, карточки офисов на /contacts/, фильтр старого каталога. */
body.nd-hybrid section.ab-process,
body.nd-hybrid .bx-filter-section { background: #FFF !important; }
body.nd-hybrid .ct-office {
background: #FFF !important;
border: 1px solid var(--line, #ececf0);
}
/* 21.08.2026: секции «вопрос-ответ» и галереи на лендингах China, полоса маршрута
на /contacts/, внутренние тени панелей статистики — тот же приём: белый фон, без вуали.
Кнопки (.ct-btn) и подложку под картой не трогаем — там заливка по делу. */
body.nd-hybrid section.nq-faq,
body.nd-hybrid section.ks-faq,
body.nd-hybrid section.mc-faq,
body.nd-hybrid section.mc-gallery,
body.nd-hybrid section.ct-route { background: #FFF !important; }
body.nd-hybrid .st-filters,
body.nd-hybrid .st-table-box {
box-shadow: none !important;
border: 1px solid var(--line, #ececf0);
}
/* ============================================================
21.08.2026 — размер текста в старых телах страниц.
В старом шаблоне размеры заданы в rem, а корневой размер на новом дизайне меньше,
поэтому текст «усох»: на /credit/ и /hybrids/ основной текст выходил 9,8px,
в карточках отзывов 11,3px, в блоках «как мы работаем» 12,7px — при 16px в новых
блоках. Приводим к шкале нового дизайна: основной текст 15,5px, вторичный 14,5px,
подписи 13px. Правим точечно по классам, чтобы не задеть новые блоки.
============================================================ */
/* ---- основной текст старых тел ---- */
body.nd-hybrid .box__text,
body.nd-hybrid .ct-sub,
body.nd-hybrid .credit-page p,
body.nd-hybrid .delivery-desc p,
body.nd-hybrid .advantages__slide-text,
body.nd-hybrid .advantages__list-item,
body.nd-hybrid .step__text {
font-size: 15.5px;
line-height: 1.6;
}
/* ---- вторичный текст: карточки, адреса, подписи под формой ---- */
body.nd-hybrid .rv-card__preview,
body.nd-hybrid .calculation__description,
body.nd-hybrid .ct-office__addr,
body.nd-hybrid .form__description,
body.nd-hybrid .form__success-text,
body.nd-hybrid .table-cell,
body.nd-hybrid .ht-cell {
font-size: 14.5px;
line-height: 1.55;
}
/* ---- заголовки, которые оказались мельче текста ---- */
body.nd-hybrid .ab-video__title {
font-size: 15.5px;
line-height: 1.35;
font-weight: 700;
}
/* ---- бегущая строка на /credit/ была 9,8px ---- */
body.nd-hybrid .cr-marquee__item { font-size: 13px; letter-spacing: .04em; }
/* ---- таблица мощности гибридов: шапка и ячейки ---- */
body.nd-hybrid .ht-table .ht-header .ht-cell { font-size: 13.5px; }
@media (max-width: 700px) {
body.nd-hybrid .box__text,
body.nd-hybrid .ct-sub,
body.nd-hybrid .credit-page p,
body.nd-hybrid .delivery-desc p,
body.nd-hybrid .advantages__slide-text,
body.nd-hybrid .advantages__list-item,
body.nd-hybrid .step__text { font-size: 15px; }
body.nd-hybrid .ht-cell,
body.nd-hybrid .table-cell { font-size: 13.5px; }
}
/* 21.08.2026: остатки мелкого текста после первого прохода — ответы в блоках «вопрос-ответ»
(/credit/, /china/, /delivery/), пометки на /credit/, подписи согласия под формами,
заголовки групп в таблице гибридов, контакты в карточках. */
body.nd-hybrid .faq__item-content,
body.nd-hybrid .faq__item-content p,
body.nd-hybrid .faq__item-content li,
body.nd-hybrid .faq__item-content div,
body.nd-hybrid .contact-item__data-item,
body.nd-hybrid .ct-route__card p {
font-size: 15.5px;
line-height: 1.6;
}
body.nd-hybrid .cr-important__text,
body.nd-hybrid .cr-important__text b { font-size: 15px; line-height: 1.55; }
body.nd-hybrid .form__consent-label,
body.nd-hybrid .form__consent-label a { font-size: 12.5px; line-height: 1.45; }
body.nd-hybrid .ht-table .ht-row > div { font-size: 14.5px; }
body.nd-hybrid .ht-table .ht-group,
body.nd-hybrid .ht-table .ht-row.ht-group > div { font-size: 13.5px; letter-spacing: .04em; }
/* ============================================================
21.08.2026 — сетка старых тел. Крошки и шапка стоят на общей сетке (32px от края),
а содержимое семи страниц жило в старом контейнере 1034px по центру: заголовок
начинался с 233–332px, и страница выглядела «съехавшей». Приводим .container
внутри main к той же сетке, что и весь новый дизайн (1520 / 24-32-40).
Новые тела используют .shell, поэтому их это правило не задевает.
============================================================ */
body.nd-hybrid main.content .container {
width: 100%;
max-width: 1520px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
@media (min-width: 1280px) {
body.nd-hybrid main.content .container { padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1600px) {
body.nd-hybrid main.content .container { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 700px) {
body.nd-hybrid main.content .container { padding-left: 24px; padding-right: 24px; }
}
/* ---- страницы со своей узкой колонкой: прижимаем к левому краю сетки,
ширину чтения сохраняем ---- */
@media (min-width: 1001px) {
body.nd-hybrid .ndf-page .shell { margin-left: 0; margin-right: auto; }
body.nd-hybrid .st { margin-left: 0; margin-right: auto; max-width: 1520px; }
body.nd-hybrid .process-container { margin-left: 0; margin-right: auto; }
}
/* 21.08.2026: часть старых контейнеров держит ширину и отступ жёстко (например,
.container на /guarantee/ имеет margin-left: 290px и max-width: 920px), поэтому
общее правило сетки их не брало. Перебиваем явно. */
body.nd-hybrid main.content > .container,
body.nd-hybrid main.content > div > .container,
body.nd-hybrid main.content .bg-style > .container {
max-width: 1520px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* колонка текста внутри старых тел: свой отступ 42px сдвигал заголовок с 32 на 74 */
body.nd-hybrid main.content .page__box:not(.page__box--center) {
padding-left: 0;
padding-right: 0;
}
/* /statistic/: шапка вынесена за сетку отрицательным отступом */
body.nd-hybrid .st-hero { margin-left: 0; margin-right: 0; }
/* ============================================================
21.08.2026 — страницы подборок (/collections/<адрес>/) в новом дизайне.
Было: колонка 814px, текст 14px, заголовок переносился в три строки, ссылки на авто
серые 13px без подчёркивания — не читались как ссылки.
Стало: та же типографика, что в статье новости.
============================================================ */
body.nd-hybrid .collection-detail,
body.nd-hybrid .collection-detail--process {
font-size: 16.5px;
line-height: 1.7;
color: var(--ink-2, #1e1e24);
max-width: 820px;
}
body.nd-hybrid .collection-detail h1 {
font-family: 'Montserrat', sans-serif;
font-size: 34px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ink, #0E0E12);
margin: 6px 0 16px;
max-width: 900px;
}
body.nd-hybrid .collection-detail h2 { font-size: 24px; font-weight: 800; margin: 30px 0 12px; color: var(--ink, #0E0E12); }
body.nd-hybrid .collection-detail h3 { font-size: 19px; font-weight: 700; margin: 24px 0 10px; color: var(--ink, #0E0E12); }
body.nd-hybrid .collection-detail a {
color: var(--accent, #E11D2E);
font-size: inherit;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
body.nd-hybrid .collection-detail a:hover { color: var(--accent-2, #B8152B); }
body.nd-hybrid .collection-detail img { max-width: 100%; height: auto; border-radius: 14px; margin: 8px 0 16px; }
body.nd-hybrid .collection .page__box { max-width: 900px; }
/* ============================================================
/credit/ — плитка «Простые условия» шла в семь колонок: карточки по 130px,
слова переносились по слогам. Ставим три-четыре в ряд.
============================================================ */
@media (min-width: 1100px) {
body.nd-hybrid .cr-conditions__scroll,
body.nd-hybrid .cr-conditions__grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
overflow: visible !important;
}
body.nd-hybrid .cr-conditions__scroll > * { min-width: 0 !important; width: auto !important; }
}
/* 21.08.2026: серые плитки помельче (крупный обход их не ловил — порог был 400px):
карточки условий и банков на /credit/, плашки географии на /about/.
Переводим на белый с тонкой рамкой — как остальные карточки нового дизайна. */
body.nd-hybrid .cr-cond-card,
body.nd-hybrid .cr-bank-pill,
body.nd-hybrid .cr-hero__stat,
body.nd-hybrid .ab-geo__item {
background: #FFF !important;
border: 1px solid var(--line, #ececf0);
box-shadow: none !important;
}
/* таблица на /kazakhstan/: серая зебра строк -> белые строки с разделителями */
body.nd-hybrid .table-cell { background: #FFF !important; border-bottom: 1px solid var(--line, #ececf0); }
body.nd-hybrid .table-row:first-child .table-cell,
body.nd-hybrid .table-header .table-cell { background: var(--bg, #f7f7f9) !important; font-weight: 700; }
/* 21.08.2026: на /kazakhstan/ заголовок первого уровня был спрятан (display:none, старое
SEO-решение от 15.05). Скрытый текст — плохая практика и страница выглядит безымянной.
Показываем его и оформляем как заголовок страницы нового дизайна. */
body.nd-hybrid main.content > h1[style*="display"] {
display: block !important;
font-family: Montserrat, sans-serif;
font-size: 40px;
line-height: 1.1;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ink, #0E0E12);
max-width: 1520px;
margin: 0 auto 22px;
padding: 0 24px;
box-sizing: border-box;
}
@media (min-width: 1280px) { body.nd-hybrid main.content > h1[style*="display"] { padding: 0 32px; } }
@media (min-width: 1600px) { body.nd-hybrid main.content > h1[style*="display"] { padding: 0 40px; } }
@media (max-width: 700px) {
body.nd-hybrid main.content > h1[style*="display"] { font-size: 26px; padding: 0 24px; margin-bottom: 16px; }
}
/* ============================================================
21.08.2026 — страница «Все города» (/cities/): 2163 города шли сплошной лентой,
найти свой можно было только глазами. Добавили поиск и алфавит (js/nd-cities.js),
список разбит на группы по буквам.
============================================================ */
body.nd-hybrid .ndcity-panel {
position: sticky;
top: 76px;
z-index: 5;
background: #FFF;
padding: 12px 0 14px;
margin-bottom: 6px;
border-bottom: 1px solid var(--line, #ececf0);
}
body.nd-hybrid .ndcity-search {
position: relative;
display: flex;
align-items: center;
gap: 10px;
max-width: 560px;
height: 52px;
padding: 0 16px;
border: 1px solid #E3E3DF;
border-radius: 14px;
background: #FFF;
color: var(--muted, #6E6E76);
}
body.nd-hybrid .ndcity-search:focus-within { border-color: var(--ink, #0E0E12); color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcity-search input {
flex: 1;
border: 0;
outline: none;
background: transparent;
font-family: 'Montserrat', sans-serif;
font-size: 15.5px;
color: var(--ink, #0E0E12);
height: 100%;
}
body.nd-hybrid .ndcity-search input::-webkit-search-cancel-button { display: none; }
body.nd-hybrid .ndcity-clear {
border: 0;
background: var(--line-2, #f0f0f3);
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 17px;
line-height: 1;
color: var(--ink-3, #3d3d48);
cursor: pointer;
}
body.nd-hybrid .ndcity-clear:hover { background: var(--line, #ececf0); }
body.nd-hybrid .ndcity-abc {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 12px;
}
body.nd-hybrid .ndcity-abc-item {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
padding: 0 6px;
border: 1px solid #E3E3DF;
border-radius: 9px;
font-size: 13.5px;
font-weight: 700;
color: var(--ink-3, #3d3d48);
text-decoration: none;
}
body.nd-hybrid .ndcity-abc-item:hover { border-color: var(--ink, #0E0E12); color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcity-count { margin-top: 10px; font-size: 13px; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndcity-count.is-empty { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndcity-group { margin: 18px 0 8px; }
body.nd-hybrid .ndcity-group[hidden] { display: none; }
body.nd-hybrid .ndcity-letter {
font-family: 'Montserrat', sans-serif;
font-size: 19px;
font-weight: 800;
color: var(--ink, #0E0E12);
padding-bottom: 6px;
margin-bottom: 10px;
border-bottom: 1px solid var(--line, #ececf0);
}
body.nd-hybrid .ndcity-list {
list-style: none;
margin: 0;
padding: 0;
columns: 4;
column-gap: 28px;
}
body.nd-hybrid .ndcity-list li { break-inside: avoid; margin: 0 0 6px; }
body.nd-hybrid .ndcity-list li[hidden] { display: none; }
body.nd-hybrid .ndcity-list a {
font-size: 14.5px;
line-height: 1.5;
color: var(--ink-3, #3d3d48);
text-decoration: none;
}
body.nd-hybrid .ndcity-list a:hover { color: var(--accent, #E11D2E); }
@media (max-width: 1100px) { body.nd-hybrid .ndcity-list { columns: 3; } }
@media (max-width: 800px) { body.nd-hybrid .ndcity-list { columns: 2; } }
@media (max-width: 520px) {
body.nd-hybrid .ndcity-list { columns: 1; }
body.nd-hybrid .ndcity-panel { top: 60px; }
body.nd-hybrid .ndcity-search { height: 48px; max-width: none; }
body.nd-hybrid .ndcity-abc-item { min-width: 28px; height: 28px; font-size: 13px; }
}
/* 21.08.2026: /catalog/ — заброшенная страница со старым фильтром Битрикса: синие ссылки
и кнопки, ползунок цены налезал на подписи. Содержимое там тоже не то (заголовок про
Корею, а машины китайские) — вопрос о судьбе страницы вынесен Ивану, пока приводим
фильтр к виду сайта, чтобы страница не выглядела сломанной. */
body.nd-hybrid .bx-filter .bx-filter-parameters-box-title,
body.nd-hybrid .bx-filter .bx-filter-param-label,
body.nd-hybrid .bx-filter a { color: var(--ink, #0E0E12); }
body.nd-hybrid .bx-filter .bx-filter-parameters-box-title { font-weight: 700; font-size: 14px; }
body.nd-hybrid .bx-filter .bx-filter-button-box .btn,
body.nd-hybrid .bx-filter input[type="submit"],
body.nd-hybrid .bx-filter .btn-themes {
background: var(--accent, #E11D2E) !important;
border-color: var(--accent, #E11D2E) !important;
color: #FFF !important;
border-radius: 12px !important;
height: 44px;
padding: 0 22px;
font-weight: 700;
box-shadow: none !important;
}
body.nd-hybrid .bx-filter .bx-filter-parameters-box-container { padding-top: 6px; }
/* ползунок цены: подписи налезали на дорожку */
body.nd-hybrid .bx-filter .bx-ui-slider-track { margin-top: 26px; }
body.nd-hybrid .bx-filter .bx-ui-slider-pricebar-vd,
body.nd-hybrid .bx-filter .bx-ui-slider-pricebar-vn { background: var(--accent, #E11D2E); }
body.nd-hybrid .bx-filter .bx-ui-slider-handle { border-color: var(--accent, #E11D2E); }
body.nd-hybrid .bx-filter input[type="text"] {
height: 42px;
border: 1px solid #E3E3DF;
border-radius: 10px;
padding: 0 12px;
font-size: 14px;
}
/* 21.08.2026: зебра строк в таблице гибридов — светло-серая заливка через строку.
Как и на /kazakhstan/, переводим на белые строки с разделителями. */
body.nd-hybrid .ht-table .ht-cell { background: #FFF !important; border-bottom: 1px solid var(--line, #ececf0); }
body.nd-hybrid .ht-table .ht-header .ht-cell { background: var(--bg, #f7f7f9) !important; }
/* 21.08.2026: поля ввода старого образца (40-51px, скругление 2-7px) — к стандарту
нового дизайна: высота 48, скругление 12, рамка #E3E3DF, фокус — тёмная рамка. */
body.nd-hybrid main.content .calc-form input[type="text"],
body.nd-hybrid main.content .calc-form input[type="number"],
body.nd-hybrid main.content .calc-form select,
body.nd-hybrid main.content .utilsbor-calc input,
body.nd-hybrid main.content .utilsbor-calc select,
body.nd-hybrid main.content .bx-filter input[type="text"] {
height: 48px;
border: 1px solid #E3E3DF;
border-radius: 12px;
padding: 0 14px;
font-family: Montserrat, sans-serif;
font-size: 14.5px;
color: var(--ink, #0E0E12);
background-color: #FFF;
box-sizing: border-box;
}
body.nd-hybrid main.content .calc-form input:focus,
body.nd-hybrid main.content .calc-form select:focus,
body.nd-hybrid main.content .utilsbor-calc input:focus,
body.nd-hybrid main.content .utilsbor-calc select:focus { outline: none; border-color: var(--ink, #0E0E12); }
/* 21.08.2026: снятие зебры сделало белыми и строки-разделители групп («ПОСЛЕДОВАТЕЛЬНЫЕ
ГИБРИДЫ (EREV)» и т.п.) — они пропали. Возвращаем им заливку. */
body.nd-hybrid .ht-table .ht-row.ht-group .ht-cell {
background: var(--accent, #E11D2E) !important;
color: #FFF !important;
font-weight: 700;
border-bottom: 0;
}
body.nd-hybrid .ht-table .ht-row:hover .ht-cell { background: var(--bg, #f7f7f9) !important; }
body.nd-hybrid .ht-table .ht-row.ht-group:hover .ht-cell { background: var(--accent, #E11D2E) !important; }
/* ---- блоки, которые держались на тени: даём им тонкую рамку вместо неё ---- */
body.nd-hybrid .helper-card,
body.nd-hybrid .cr-hero__card,
body.nd-hybrid .cr-conditions__card,
body.nd-hybrid .cr-banks__card,
body.nd-hybrid .cr-countries__card,
body.nd-hybrid .cr-important__card,
body.nd-hybrid .cr-cta__card,
body.nd-hybrid .calculation__item,
body.nd-hybrid .ab-stats__grid,
body.nd-hybrid .box__item,
body.nd-hybrid .step__inline,
body.nd-hybrid .ndp-form-card,
body.nd-hybrid .request-form-wrapper,
body.nd-hybrid .ht-table,
body.nd-hybrid details.faq,
body.nd-hybrid .encv__frame,
body.nd-hybrid .review {
border: 1px solid var(--line, #ececf0);
}
/* 21.08.2026 (Ivan: «слишком большая плавающая шапка поиска города»): липкая панель
занимала 183px — пятую часть экрана. Сжимаем её при прокрутке до строки поиска;
алфавит и счётчик видны, пока страница в самом верху. */
body.nd-hybrid .ndcity-panel.is-compact {
padding: 8px 0 10px;
box-shadow: none;
}
body.nd-hybrid .ndcity-panel.is-compact .ndcity-abc,
body.nd-hybrid .ndcity-panel.is-compact .ndcity-count { display: none; }
body.nd-hybrid .ndcity-panel.is-compact .ndcity-search {
height: 44px;
max-width: 420px;
}
body.nd-hybrid .ndcity-panel.is-compact .ndcity-search input { font-size: 14.5px; }
/* базовый вид тоже чуть компактнее */
body.nd-hybrid .ndcity-search { height: 48px; }
body.nd-hybrid .ndcity-abc { margin-top: 10px; }
body.nd-hybrid .ndcity-abc-item { min-width: 28px; height: 28px; font-size: 13px; }
body.nd-hybrid .ndcity-count { margin-top: 8px; }
/* 21.08.2026: в сжатом виде счётчик прятался — при поиске не было видно, сколько нашли.
Ставим его в одну строку с полем: панель остаётся низкой, а ответ виден. */
body.nd-hybrid .ndcity-panel.is-compact {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
body.nd-hybrid .ndcity-panel.is-compact .ndcity-count {
display: block;
margin-top: 0;
white-space: nowrap;
}
@media (max-width: 700px) {
body.nd-hybrid .ndcity-panel.is-compact .ndcity-search { max-width: none; flex: 1 1 100%; }
body.nd-hybrid .ndcity-panel.is-compact .ndcity-count { display: none; }
}
/* 21.08.2026: на телефоне шапка при прокрутке уезжает, а панель липла на 60px —
в полосе над ней просвечивал прокручивающийся список. Прижимаем к верху экрана. */
@media (max-width: 700px) {
body.nd-hybrid .ndcity-panel { top: 0; }
}
/* 21.08.2026 (Ivan: «буква Я не умещается»): алфавиту нужно 926px, а колонка старого
шаблона на /cities/ ограничена 920px — не хватало шести пикселей, и «Я» переносилась
на вторую строку. Снимаем ограничение колонки на этой странице (список городов и так
идёт на всю ширину) и делаем кнопки чуть компактнее с запасом. */
body.nd-hybrid .ndcity-panel,
body.nd-hybrid .ndcity-groups { max-width: none; }
body.nd-hybrid .delivery-desc:has(.ndcity-groups) .page__box,
body.nd-hybrid .page__box:has(.ndcity-groups) { max-width: none !important; }
/* 29 кнопок по 26px с промежутками занимают 838px — одна строка помещается уже с 880px */
@media (min-width: 880px) {
body.nd-hybrid .ndcity-abc { flex-wrap: nowrap; gap: 3px; }
body.nd-hybrid .ndcity-abc-item { min-width: 26px; height: 28px; padding: 0 3px; font-size: 12.5px; flex: 0 0 auto; }
}
/* 21.08.2026: панель поиска городов — компактнее и в полном виде.
Поле 44px, алфавит 26px, отступы уменьшены: полный вид ~120px вместо 139,
прилипшая строка — 58px. */
body.nd-hybrid .ndcity-panel { padding: 10px 0 12px; }
body.nd-hybrid .ndcity-search { height: 44px; }
body.nd-hybrid .ndcity-search input { font-size: 15px; }
body.nd-hybrid .ndcity-abc { margin-top: 9px; }
body.nd-hybrid .ndcity-abc-item { height: 26px; min-width: 26px; }
body.nd-hybrid .ndcity-count { margin-top: 7px; font-size: 12.5px; }
body.nd-hybrid .ndcity-panel.is-compact { padding: 7px 0 8px; }
body.nd-hybrid .ndcity-panel.is-compact .ndcity-search { height: 42px; }
/* 21.08.2026: в прилипшем виде поле поиска сжималось по содержимому (подсказка обрезалась
на «Начните вводить горс»), а между шапкой и панелью оставалась щель в 7px, куда
просвечивал прокручивающийся список. Фиксируем ширину поля и убираем щель. */
body.nd-hybrid .ndcity-panel { top: 68px; }
body.nd-hybrid .ndcity-panel.is-compact .ndcity-search {
flex: 0 0 340px;
max-width: 340px;
min-width: 260px;
}
@media (max-width: 700px) {
body.nd-hybrid .ndcity-panel { top: 0; }
body.nd-hybrid .ndcity-panel.is-compact .ndcity-search { flex: 1 1 auto; max-width: none; }
}
/* 21.08.2026: на телефоне алфавит занимал три строки — панель вверху страницы выходила
185px (22% экрана). Делаем его одной лентой с прокруткой пальцем. */
@media (max-width: 879px) {
body.nd-hybrid .ndcity-abc {
flex-wrap: nowrap;
overflow-x: auto;
gap: 4px;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
body.nd-hybrid .ndcity-abc::-webkit-scrollbar { display: none; }
body.nd-hybrid .ndcity-abc-item { flex: 0 0 auto; min-width: 28px; height: 28px; }
}
/* ============================================================
21.08.2026 — /kazakhstan/ в новом дизайне (Ivan: «эта стр совсем страшная,
поработай над её редизайном хорошо как крутой дизайнер, авто в наличии бери
со стр в наличии»). Разметка — includes/nd-kazakhstan-body.php.
============================================================ */
body.nd-hybrid .ndkz-hero,
body.nd-hybrid .ndkz-stock,
body.nd-hybrid .ndkz-why,
body.nd-hybrid .ndkz-take { background: #FFF; }
/* ---- общие детали ---- */
body.nd-hybrid .ndkz-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted, #6E6E76);
margin-bottom: 12px;
}
body.nd-hybrid .ndkz-flag { font-size: 15px; letter-spacing: 0; }
body.nd-hybrid .ndkz-sub { font-size: 15.5px; line-height: 1.6; color: var(--muted, #6E6E76); margin: 0 0 20px; max-width: 640px; }
body.nd-hybrid .ndkz-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 26px;
border-radius: 14px;
background: var(--accent, #E11D2E);
color: #FFF;
font-size: 15.5px;
font-weight: 700;
text-decoration: none;
transition: background .16s ease;
}
body.nd-hybrid .ndkz-btn:hover { background: var(--accent-2, #B8152B); color: #FFF; }
body.nd-hybrid .ndkz-btn-ghost {
background: #FFF;
color: var(--ink, #0E0E12);
border: 1px solid #E3E3DF;
}
body.nd-hybrid .ndkz-btn-ghost:hover { background: var(--bg, #f7f7f9); color: var(--ink, #0E0E12); border-color: #C9C9C4; }
body.nd-hybrid .ndkz-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
body.nd-hybrid .ndkz-hero-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.nd-hybrid .ndkz-hero-list li {
position: relative;
padding-left: 26px;
font-size: 15px;
line-height: 1.5;
color: var(--ink-3, #3d3d48);
}
body.nd-hybrid .ndkz-hero-list li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 15px;
height: 9px;
border-left: 2px solid var(--accent, #E11D2E);
border-bottom: 2px solid var(--accent, #E11D2E);
transform: rotate(-45deg);
}
body.nd-hybrid .ndkz-fact-l { font-size: 13.5px; line-height: 1.45; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndkz-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 24px;
}
body.nd-hybrid .ndkz-head .ndkz-sub { margin-bottom: 0; }
body.nd-hybrid .ndkz-head-link {
display: inline-flex;
align-items: center;
gap: 8px;
height: 44px;
padding: 0 18px;
border: 1px solid #E3E3DF;
border-radius: 12px;
font-size: 14.5px;
font-weight: 700;
color: var(--ink, #0E0E12);
text-decoration: none;
white-space: nowrap;
}
body.nd-hybrid .ndkz-head-link:hover { border-color: var(--ink, #0E0E12); color: var(--ink, #0E0E12); }
body.nd-hybrid .ndkz-car {
border: 1px solid var(--line, #ececf0);
border-radius: 18px;
overflow: hidden;
background: #FFF;
display: flex;
flex-direction: column;
transition: border-color .16s ease;
}
body.nd-hybrid .ndkz-car:hover { border-color: #DCDCD8; }
body.nd-hybrid .ndkz-car-photo {
position: relative;
height: 186px;
background: var(--line-2, #f0f0f3) center/cover no-repeat;
}
body.nd-hybrid .ndkz-car-photo.is-empty::after {
content: "фото по запросу";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12.5px;
color: #A8A8B0;
}
body.nd-hybrid .ndkz-badge {
position: absolute;
left: 12px;
top: 12px;
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 11px;
border-radius: 999px;
background: rgba(14, 14, 18, .82);
color: #FFF;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .02em;
}
body.nd-hybrid .ndkz-badge-ok { background: #1B7F3B; }
body.nd-hybrid .ndkz-car-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
body.nd-hybrid .ndkz-car-name {
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(--ink, #0E0E12);
}
body.nd-hybrid .ndkz-car-specs { display: flex; flex-wrap: wrap; gap: 6px; }
body.nd-hybrid .ndkz-car-specs span {
background: var(--bg, #f7f7f9);
border-radius: 7px;
padding: 4px 9px;
font-size: 12.5px;
color: var(--ink-3, #3d3d48);
}
body.nd-hybrid .ndkz-car-price {
font-family: 'Montserrat', sans-serif;
font-size: 21px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ink, #0E0E12);
margin-top: 4px;
}
body.nd-hybrid .ndkz-car-vat { font-size: 12.5px; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndkz-car-btn {
margin-top: auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
border-radius: 12px;
background: var(--ink, #0E0E12);
color: #FFF;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
body.nd-hybrid .ndkz-car-btn:hover { background: var(--accent, #E11D2E); color: #FFF; }
body.nd-hybrid .ndkz-why-card {
border: 1px solid var(--line, #ececf0);
border-radius: 18px;
padding: 24px;
background: #FFF;
}
body.nd-hybrid .ndkz-why-i {
width: 46px;
height: 46px;
border-radius: 14px;
background: var(--ink, #0E0E12);
color: #FFF;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 800;
margin-bottom: 16px;
}
body.nd-hybrid .ndkz-why-t { font-size: 17px; font-weight: 700; color: var(--ink, #0E0E12); line-height: 1.3; margin-bottom: 8px; }
body.nd-hybrid .ndkz-why-d { font-size: 14.5px; line-height: 1.6; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndkz-take-list {
list-style: none;
counter-reset: kz;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
body.nd-hybrid .ndkz-take-list li {
counter-increment: kz;
position: relative;
padding: 16px 18px 16px 60px;
border: 1px solid var(--line, #ececf0);
border-radius: 14px;
font-size: 15px;
line-height: 1.55;
color: var(--ink-3, #3d3d48);
}
body.nd-hybrid .ndkz-take-list li::before {
content: counter(kz);
position: absolute;
left: 18px;
top: 15px;
width: 28px;
height: 28px;
border-radius: 9px;
background: var(--bg, #f7f7f9);
border: 1px solid var(--line, #ececf0);
color: var(--ink, #0E0E12);
font-size: 13px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
body.nd-hybrid .ndkz-take-list b { color: var(--ink, #0E0E12); font-weight: 700; }
/* 21.08.2026: на /kazakhstan/ теперь свой заголовок в шапке нового тела — прежний
(тот, что мы показали из скрытого) больше не нужен, иначе на странице два H1. */
body.nd-hybrid main.content:has(.ndkz-hero) > h1[style*="display"] { display: none !important; }
/* 21.08.2026 — доводка прежних блоков на /kazakhstan/ и /china/ (дилеры, Trade-In,
преимущества): заголовок карточки был чёрной плашкой с белым текстом — приём из старого
макета. Делаем обычный заголовок; плашкой остаётся только карточка-ссылка
(«Сотрудничать с нами», «Сдать авто в Trade-in») — она красной кнопкой. */
body.nd-hybrid .box__item {
border-radius: 16px;
padding: 22px;
}
body.nd-hybrid .box__item .box__name {
background: transparent;
color: var(--ink, #0E0E12);
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
padding: 0;
margin: 0 0 8px;
border-radius: 0;
display: block;
}
body.nd-hybrid .box__item:not(:has(.box__text)) {
display: flex;
align-items: center;
justify-content: center;
}
body.nd-hybrid .box__item:not(:has(.box__text)) .box__name {
background: var(--accent, #E11D2E);
color: #FFF;
border-radius: 12px;
padding: 13px 22px;
margin: 0;
display: inline-flex;
font-size: 15px;
}
body.nd-hybrid .box__item .box__text { color: var(--muted, #6E6E76); font-size: 15px; line-height: 1.6; }
/* заголовки секций — единый размер со страницами нового дизайна */
body.nd-hybrid main.content .box h2 {
font-family: Montserrat, sans-serif;
font-size: 32px;
line-height: 1.14;
font-weight: 800;
letter-spacing: -.025em;
color: var(--ink, #0E0E12);
}
@media (max-width: 700px) {
body.nd-hybrid main.content .box h2 { font-size: 23px; }
}
/* 21.08.2026: карточки-призывы («Сотрудничать с нами», «Сдать авто в Trade-In») стали
настоящими кнопками — см. скрипт в includes/nd-kazakhstan-body.php. */
body.nd-hybrid .box__item.is-action {
border: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
body.nd-hybrid .ndkz-cardbtn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 26px;
border-radius: 14px;
background: var(--accent, #E11D2E);
color: #FFF;
font-family: "Montserrat", sans-serif;
font-size: 15.5px;
font-weight: 700;
text-decoration: none;
text-align: center;
}
body.nd-hybrid .ndkz-cardbtn:hover { background: var(--accent-2, #B8152B); color: #FFF; }
/* 21.08.2026 — блок «Вопрос-ответ» на страницах направлений (/kazakhstan/, /china/ и др.):
был списком строк с плюсиком и линиями, вопрос читался мелко, кнопка внизу растягивалась
красной полосой во всю ширину. Приводим к аккордеону нового дизайна. */
body.nd-hybrid .faq__list { display: grid; gap: 10px; margin-bottom: 22px; }
body.nd-hybrid .faq__item {
border: 1px solid var(--line, #ececf0);
border-radius: 16px;
padding: 4px 20px;
background: #FFF;
transition: border-color .16s ease;
}
body.nd-hybrid .faq__item:hover { border-color: #DCDCD8; }
body.nd-hybrid .faq__item_active { border-color: #DCDCD8; }
body.nd-hybrid .faq__item-title {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 0;
font-family: "Montserrat", sans-serif;
font-size: 17px;
font-weight: 700;
line-height: 1.35;
color: var(--ink, #0E0E12);
cursor: pointer;
border: 0;
}
body.nd-hybrid .faq__item-content {
padding: 0 0 18px;
font-size: 15.5px;
line-height: 1.65;
color: var(--ink-3, #3d3d48);
}
body.nd-hybrid .faq__item-content div { font-size: 15.5px; line-height: 1.65; }
/* индикатор «плюс» -> аккуратный кружок, при раскрытии превращается в минус */
body.nd-hybrid .opened-faq-indicator {
position: relative;
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--bg, #f7f7f9);
border: 1px solid var(--line, #ececf0);
}
body.nd-hybrid .opened-faq-indicator span {
position: absolute;
left: 50%;
top: 50%;
width: 11px;
height: 2px;
margin: -1px 0 0 -5.5px;
background: var(--ink, #0E0E12);
border-radius: 2px;
transition: transform .18s ease;
}
body.nd-hybrid .opened-faq-indicator span:last-child { transform: rotate(90deg); }
body.nd-hybrid .faq__item_active .opened-faq-indicator { background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12); }
body.nd-hybrid .faq__item_active .opened-faq-indicator span { background: #FFF; }
body.nd-hybrid .faq__item_active .opened-faq-indicator span:last-child { transform: rotate(0); }
/* подпись под списком и кнопка */
body.nd-hybrid .faq-info,
body.nd-hybrid .faq__text {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
line-height: 1.5;
color: var(--ink-3, #3d3d48);
margin-bottom: 18px;
}
body.nd-hybrid .faq__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-height: 52px;
padding: 0 26px;
border-radius: 14px;
background: var(--accent, #E11D2E);
color: #FFF;
font-size: 15.5px;
font-weight: 700;
text-decoration: none;
}
body.nd-hybrid .faq__btn:hover { background: var(--accent-2, #B8152B); color: #FFF; }
@media (max-width: 700px) {
body.nd-hybrid .faq__item { padding: 2px 16px; }
body.nd-hybrid .faq__item-title { font-size: 15.5px; gap: 10px; }
body.nd-hybrid .faq__btn { width: 100%; }
}
/* 21.08.2026: индикатор «плюс» в аккордеоне стоял position:absolute из старых стилей —
выпадал из строки заголовка и не был виден. Возвращаем его в поток и перекрашиваем. */
body.nd-hybrid .opened-faq-indicator { position: relative !important; left: auto !important; top: auto !important; right: auto !important; }
body.nd-hybrid .opened-faq-indicator span {
width: 11px !important;
height: 2px !important;
background: var(--ink, #0E0E12) !important;
margin: -1px 0 0 -5.5px !important;
}
body.nd-hybrid .faq__item_active .opened-faq-indicator span { background: #FFF !important; }
/* 21.08.2026: вертикальная палочка «плюса» строилась поворотом горизонтальной и съезжала
на пиксель влево-вверх. Задаём её напрямую; при раскрытии прячем — получается минус. */
body.nd-hybrid .opened-faq-indicator span:last-child {
transform: none !important;
width: 2px !important;
height: 11px !important;
margin: -5.5px 0 0 -1px !important;
transition: opacity .16s ease;
}
body.nd-hybrid .faq__item_active .opened-faq-indicator span:last-child { opacity: 0; }
/* 21.08.2026: палочки «плюса» позиционировались старыми координатами (7,7) и складывались
в «⊥» вместо креста; сам кружок цвета var(--bg, #f7f7f9) на белом был почти не виден. */
body.nd-hybrid .opened-faq-indicator {
background: var(--line-2, #f0f0f3) !important;
border: 1px solid #E3E3DF !important;
}
body.nd-hybrid .opened-faq-indicator span {
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
}
body.nd-hybrid .faq__item_active .opened-faq-indicator {
background: var(--ink, #0E0E12) !important;
border-color: var(--ink, #0E0E12) !important;
}
/* 21.08.2026: старые координаты палочек имели больший вес селектора — центрируем через
transform, это надёжнее отрицательных отступов. */
body.nd-hybrid .faq__item .opened-faq-indicator span {
top: 50% !important;
left: 50% !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
}
body.nd-hybrid .faq__item .opened-faq-indicator span:first-child { width: 11px !important; height: 2px !important; }
body.nd-hybrid .faq__item .opened-faq-indicator span:last-child { width: 2px !important; height: 11px !important; }
body.nd-hybrid .faq__item_active .opened-faq-indicator span:last-child { opacity: 0; }
/* 21.08.2026: у палочек индикатора в старых стилях свои координаты и свойство rotate,
которые продолжали спорить с нашими. Проще нарисовать плюс самим: сами палочки прячем,
крест рисуем псевдоэлементами кружка — тогда он всегда ровно по центру. */
body.nd-hybrid .faq__item .opened-faq-indicator span { display: none !important; }
body.nd-hybrid .faq__item .opened-faq-indicator::before,
body.nd-hybrid .faq__item .opened-faq-indicator::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
background: var(--ink, #0E0E12);
border-radius: 2px;
transform: translate(-50%, -50%);
}
body.nd-hybrid .faq__item .opened-faq-indicator::before { width: 11px; height: 2px; }
body.nd-hybrid .faq__item .opened-faq-indicator::after { width: 2px; height: 11px; transition: opacity .16s ease; }
body.nd-hybrid .faq__item_active .opened-faq-indicator::before { background: #FFF; }
body.nd-hybrid .faq__item_active .opened-faq-indicator::after { opacity: 0; }
/* 24.08.2026 — /sklad/: подписи в карточках были 12–12,5px (комплектация, цена для юрлиц,
характеристики, примечание) — мельче шкалы нового дизайна. Поднимаем до 13,5–14px. */
/* размеры заданы в inc/google-table-cards.php селектором #sklad-cards .sc-* —
поднимаем специфичность, иначе не перебить */
body.nd-hybrid #sklad-cards .sc-trim,
body.nd-hybrid #sklad-cards .sc-specs,
body.nd-hybrid #sklad-cards .sc-specs span,
body.nd-hybrid #sklad-cards .sc-note { font-size: 13.5px; line-height: 1.5; }
body.nd-hybrid #sklad-cards .sc-price-sub { font-size: 13.5px; color: var(--muted, #6E6E76); }
body.nd-hybrid #sklad-cards .sc-title { font-size: 16.5px; }
@media (max-width: 700px) {
body.nd-hybrid #sklad-cards .sc-trim,
body.nd-hybrid #sklad-cards .sc-specs,
body.nd-hybrid #sklad-cards .sc-specs span,
body.nd-hybrid #sklad-cards .sc-note,
body.nd-hybrid #sklad-cards .sc-price-sub { font-size: 13px; }
}
/* характеристики-чипы в карточке склада — тоже 12px */
body.nd-hybrid #sklad-cards .sc-chips span { font-size: 13px; }
/* ---- виджет «Поделиться» Яндекса просит свой YS Text ---- */
body.nd-hybrid .ya-share2,
body.nd-hybrid .ya-share2 * { font-family: 'Montserrat', sans-serif !important; }
body.nd-hybrid .ct-rating { border-radius: 12px; }
/* правила склада заданы через #sklad-cards — перебиваем той же силой */
body.nd-hybrid #sklad-cards select,
body.nd-hybrid #sklad-cards .sc-toolbar select { border-radius: 12px; }
body.nd-hybrid #sklad-cards .sc-cta { border-radius: 10px; }
/* 24.08.2026 (Ivan, снимок /forma/: «в этом месте отступы плохо выглядят»).
В блоке «Что будет дальше» зазор ВНУТРИ пункта (заголовок → описание) был 16px,
а МЕЖДУ пунктами — 10px. Описание оказывалось ближе к следующему заголовку, чем к своему,
и список читался вразнобой. Меняем местами: внутри пары тесно, между пунктами просторно. */
body.nd-hybrid .ndf-steps { gap: 16px; }
body.nd-hybrid .ndf-steps li { row-gap: 2px; column-gap: 9px; }
body.nd-hybrid .ndf-steps span { margin-top: 0; }
/* описание падало во вторую строку ПЕРВОЙ колонки (под номер) и начиналось левее заголовка —
ставим его в колонку с текстом, левый край общий */
body.nd-hybrid .ndf-steps li b { grid-column: 2; }
body.nd-hybrid .ndf-steps li span { grid-column: 2; }
/* 29.08.2026 (Никита, стр. 37): ячейка-действие на /kazakhstan/ была пустой, с одной кнопкой
посередине. Даём ей вид обычной карточки: рамка, заголовок, пояснение, кнопка внизу. */
body.nd-hybrid .box__item.is-action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
background: #FFF;
border: 1px solid var(--line, #ececf0);
border-radius: 14px;
padding: 22px 20px;
}
body.nd-hybrid .ndkz-act-t { font-size: 16px; font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndkz-act-d { font-size: 13.5px; line-height: 1.5; color: var(--muted, #6E6E76); }
body.nd-hybrid .box__item.is-action .ndkz-cardbtn { margin-top: auto; }
/* 29.08.2026 (Никита, стр. 41: «делаем стилизованные значки. Заголовок на одной линии +
он должен быть больше по шрифту, чем текст»). Страница /about/ свёрстана в rem, а в новом
дизайне корневой размер другой — заголовки карточек «Почему мы» выходили мельче описаний.
Задаём явные размеры и красим знаки в фирменный красный. */
body.nd-hybrid .ab-why__icon {
color: var(--accent, #E11D2E);
width: 52px; height: 52px; font-size: 0; margin-bottom: 16px;
}
body.nd-hybrid .ab-why__icon svg { width: 26px; height: 26px; }
body.nd-hybrid .ab-why__card h3 { font-size: 17px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
body.nd-hybrid .ab-why__card p { font-size: 14.5px; line-height: 1.55; }
@media (max-width: 700px) {
body.nd-hybrid .ab-why__icon { width: 46px; height: 46px; }
body.nd-hybrid .ab-why__card h3 { font-size: 16px; }
}
/* 29.08.2026 (Никита, стр. 24: «странный блок» — примечание под списком вопросов
на /kazakhstan/). Строка «Мы работаем строго по договору…» шла с красным квадратом
42x42 и читалась как отмеченный чекбокс формы. Делаем из неё обычную заметку:
маленькая зелёная галочка, серая подложка, текст в один блок. */
body.nd-hybrid .faq .faq__text {
display: flex; align-items: flex-start; gap: 10px;
background: var(--bg, #F7F7F9); border-radius: 12px;
padding: 12px 14px; margin-top: 12px;
font-size: 14px; line-height: 1.5; color: var(--ink-3, #3d3d48);
}
body.nd-hybrid .faq .faq__text svg {
width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--success, #1E8C4A);
}
body.nd-hybrid .faq .faq__text svg path,
body.nd-hybrid .faq .faq__text svg rect { fill: currentColor; }
/* 30.08.2026 (Никита, стр. 27: «/guarantee/ — сплошной текст без графических элементов»).
Страница рендерится компонентом news.list с шаблоном process_new: текст шёл одной колонкой
в половину экрана, 14px, без карточек — правая половина пустовала. Оформляем пункты
карточками, номер — красным кружком, текст до 15.5px. Тот же шаблон используется
на /delivery/ и /credit/, поэтому правка чинит все три страницы разом. */
body.nd-hybrid .process-item {
background: var(--bg, #F7F7F9);
border-radius: 16px;
padding: 22px 24px;
margin-bottom: 12px;
}
body.nd-hybrid .process-item--number {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 30px; padding: 0 10px;
background: var(--accent, #E11D2E);
/* цифра была красной на красном — цвет задан в легаси-стилях, перебиваем */
color: #FFF !important;
border: 0; border-radius: 9px;
font-size: 13px; font-weight: 800; letter-spacing: 0;
white-space: nowrap;
}
body.nd-hybrid .process-item--title { font-size: 18px; font-weight: 700; gap: 12px; align-items: center; }
body.nd-hybrid .process-item--text { font-size: 15.5px; line-height: 1.6; margin-top: 12px; }
body.nd-hybrid .process-item--text p { font-size: 15.5px; line-height: 1.6; }
body.nd-hybrid .process-item--text li { font-size: 15.5px; line-height: 1.55; }
body.nd-hybrid .process-list--wrapper { max-width: 900px; }
/* липкий заголовок слева — не даём ему висеть в пустоте */
body.nd-hybrid .process-info--inner { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
@media (max-width: 700px) {
body.nd-hybrid .process-item { padding: 18px 16px; border-radius: 14px; }
body.nd-hybrid .process-item--title { font-size: 16.5px; }
body.nd-hybrid .process-item--text,
body.nd-hybrid .process-item--text p,
body.nd-hybrid .process-item--text li { font-size: 15px; }
}
/* 30.08.2026 (Никита, стр. 27: «/delivery/ — аналогично», о сплошном тексте без графики).
Страница была простынёй абзацев во всю ширину экрана: строка под 150 знаков, читать тяжело.
Ограничиваем колонку, даём воздух, список документов оформляем карточками с номерами. */
body.nd-hybrid .delivery-desc { max-width: 880px; }
body.nd-hybrid .delivery-desc p {
font-size: 15.5px; line-height: 1.7; margin: 0 0 16px;
}
body.nd-hybrid .delivery-desc ol {
counter-reset: ndd; list-style: none; padding: 0; margin: 18px 0 20px;
display: grid; gap: 10px;
}
body.nd-hybrid .delivery-desc ol > li {
counter-increment: ndd; position: relative;
background: var(--bg, #F7F7F9); border-radius: 14px;
padding: 14px 18px 14px 56px;
font-size: 15px; line-height: 1.5;
}
body.nd-hybrid .delivery-desc ol > li::before {
content: counter(ndd);
position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; border-radius: 9px;
background: var(--accent, #E11D2E); color: #FFF;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
}
body.nd-hybrid .delivery-desc ul { margin: 14px 0 18px; padding-left: 20px; }
body.nd-hybrid .delivery-desc ul > li { font-size: 15px; line-height: 1.55; margin-bottom: 8px; }
@media (max-width: 700px) {
body.nd-hybrid .delivery-desc p { font-size: 15px; }
body.nd-hybrid .delivery-desc ol > li { padding: 12px 14px 12px 50px; font-size: 14.5px; }
}
/* ============================================================
30.08.2026 — /delivery/ в новом дизайне (только staging, body.nd-hybrid).
Задача Ivan'а: три варианта дизайна страницы доставки, выбран вариант Б
(«тёмный первый экран + панель подбора города внахлёст»), карта маршрута
по его просьбе убрана. Разметка — includes/nd-delivery-body.php.
Цифры в панели и таблице — из Highload-блока 8 (тот же источник, что
калькулятор карточки авто), поэтому вёрстка рассчитана на 37 строк.
============================================================ */
body.nd-hybrid .ndd-hero,
body.nd-hybrid .ndd-panelwrap,
body.nd-hybrid .ndd-sec { font-family: 'Montserrat', system-ui, sans-serif; }
body.nd-hybrid .ndd-hero .shell,
body.nd-hybrid .ndd-panelwrap .shell,
body.nd-hybrid .ndd-sec .shell { max-width: 1520px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) {
body.nd-hybrid .ndd-hero .shell,
body.nd-hybrid .ndd-panelwrap .shell,
body.nd-hybrid .ndd-sec .shell { padding: 0 32px; }
}
@media (min-width: 1600px) {
body.nd-hybrid .ndd-hero .shell,
body.nd-hybrid .ndd-panelwrap .shell,
body.nd-hybrid .ndd-sec .shell { padding: 0 40px; }
}
/* --- первый экран --- */
/* !important — потому что общее правило new-catalog.css красит ЛЮБУЮ прямую секцию
main.content > section в белый через !important (чётные и нечётные). Без него
тёмный первый экран отдавал белый фон при белом тексте. */
body.nd-hybrid main.content > section.ndd-hero { background: var(--ink, #0E0E12) !important; color: #FFF; padding: 52px 0 128px; }
body.nd-hybrid .ndd-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #FF5A6A; }
body.nd-hybrid .ndd-hero .ndd-h1 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important;
font-weight: inherit !important; letter-spacing: -.01em; color: #FF5A6A !important; background: none !important; padding: 0 !important; }
body.nd-hybrid .ndd-hb b { color: #FFF; font-weight: 700; }
/* --- панель подбора города (внахлёст на тёмный экран) --- */
/* прозрачный фон + та же специфичность, что у общего правила секций: иначе секция
получает белый !important и закрывает собой тёмный первый экран, на который
панель должна наезжать. */
body.nd-hybrid main.content > section.ndd-panelwrap { background: transparent !important; margin-top: -86px; position: relative; z-index: 2; padding-bottom: 18px; }
body.nd-hybrid .ndd-fld label { display: block; font-size: 12px; font-weight: 700; color: var(--muted, #6E6E76); margin-bottom: 6px; }
body.nd-hybrid .ndd-fld select { width: 100%; height: 48px; min-height: 0; border: 1px solid var(--line, #ECECF0); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 14.5px; background: var(--bg-card, #FFF); color: var(--ink, #0E0E12); }
body.nd-hybrid .ndd-pnote { flex: 1 1 300px; font-size: 12.5px; line-height: 1.5; color: var(--muted, #6E6E76); padding-bottom: 4px; }
body.nd-hybrid .ndd-pgo { flex: none; display: inline-flex; align-items: center; border-radius: 12px; background: var(--accent, #E11D2E); color: #FFF; text-decoration: none; font-weight: 800; font-size: 15px; padding: 15px 26px; min-height: 44px; box-shadow: 0 3px 0 var(--accent-2, #B8152B), 0 10px 24px rgba(225,29,46,.2); transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease); }
body.nd-hybrid .ndd-pgo:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--accent-2, #B8152B), 0 6px 18px rgba(225,29,46,.18); color: #FFF; }
body.nd-hybrid .ndd-ans { background: var(--bg, #F7F7F9); border-radius: 16px; padding: 16px 18px; }
body.nd-hybrid .ndd-ans span { font-size: 12px; color: var(--muted, #6E6E76); display: block; line-height: 1.35; }
body.nd-hybrid .ndd-ans b { font-size: 19px; font-weight: 800; display: block; margin-top: 6px; letter-spacing: -.01em; line-height: 1.2; }
body.nd-hybrid .ndd-ans small { font-size: 12px; color: var(--muted, #6E6E76); display: block; margin-top: 5px; line-height: 1.4; }
body.nd-hybrid .ndd-h2 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; color: var(--accent, #E11D2E); }
body.nd-hybrid .ndd-sp { background: var(--bg-card, #FFF); border: 1px solid var(--line, #ECECF0); border-radius: var(--radius-lg, 20px); padding: 18px; display: flex; flex-direction: column; transition: border-color .18s var(--ease, ease), transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease); }
body.nd-hybrid .ndd-sp:hover { border-color: var(--ink-3, #3D3D48); transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 24px 56px rgba(14,14,16,.10)); }
body.nd-hybrid .ndd-sp b { display: block; font-size: 12px; color: var(--accent, #E11D2E); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
body.nd-hybrid .ndd-sp h3 { font-size: 15px; font-weight: 700; margin: 9px 0 0; }
body.nd-hybrid .ndd-sp p { font-size: 13px; color: var(--muted, #6E6E76); line-height: 1.5; margin: 6px 0 13px; }
body.nd-hybrid .ndd-sp em { align-self: flex-start; margin-top: auto; font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--bg, #f7f7f9); border-radius: 8px; padding: 5px 9px; }
body.nd-hybrid .ndd-cm { background: var(--bg-card, #FFF); border: 1px solid var(--line, #ECECF0); border-radius: var(--radius-lg, 20px); padding: 22px; position: relative; }
body.nd-hybrid .ndd-cm--best { border-color: var(--accent, #E11D2E); }
body.nd-hybrid .ndd-cm--best::after { content: 'чаще всего выбирают'; position: absolute; top: -10px; left: 22px; background: var(--accent, #E11D2E); color: #FFF; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; padding: 4px 9px; }
body.nd-hybrid .ndd-cm h3 { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
body.nd-hybrid .ndd-l { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 9px 0; border-bottom: 1px dashed var(--line, #ececf0); }
body.nd-hybrid .ndd-l:last-of-type { border-bottom: 0; }
body.nd-hybrid .ndd-l span { color: var(--muted, #6E6E76); }
body.nd-hybrid .ndd-l b { font-weight: 700; text-align: right; }
body.nd-hybrid .ndd-cnote { font-size: 12.5px; color: var(--muted, #6E6E76); line-height: 1.5; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-2, #f0f0f3); }
/* --- таблица городов --- */
body.nd-hybrid .ndd-tbl { margin-top: 22px; border: 1px solid var(--line, #ECECF0); border-radius: var(--radius-lg, 20px); overflow: hidden; }
body.nd-hybrid .ndd-tr:last-child { border-bottom: 0; }
body.nd-hybrid .ndd-tr:nth-child(even) { background: var(--bg, #f7f7f9); }
body.nd-hybrid .ndd-tr--h { background: var(--bg, #f7f7f9) !important; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndd-tr span:first-child { font-weight: 700; }
body.nd-hybrid .ndd-tr span:last-child { text-align: right; font-weight: 700; }
body.nd-hybrid .ndd-tr--more { display: none; }
body.nd-hybrid .ndd-tbl--open .ndd-tr--more { display: grid; }
body.nd-hybrid .ndd-more { margin-top: 12px; border: 1px solid var(--line, #ECECF0); background: var(--bg-card, #FFF); border-radius: 12px; min-height: 44px; padding: 0 24px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndd-more:hover { border-color: var(--ink-3, #3D3D48); }
body.nd-hybrid .ndd-strip b { display: block; font-size: 14.5px; font-weight: 700; }
body.nd-hybrid .ndd-strip p { font-size: 13px; color: var(--muted, #6E6E76); margin: 5px 0 0; line-height: 1.5; }
/* --- вопросы --- */
body.nd-hybrid .ndd-faqs { margin-top: 22px; max-width: 900px; }
body.nd-hybrid .ndd-faq { border-bottom: 1px solid var(--line, #ECECF0); }
body.nd-hybrid .ndd-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 700; }
body.nd-hybrid .ndd-faq summary::-webkit-details-marker { display: none; }
body.nd-hybrid .ndd-faq summary i { flex: none; width: 20px; height: 20px; position: relative; }
body.nd-hybrid .ndd-faq summary i::before,
body.nd-hybrid .ndd-faq summary i::after { content: ''; position: absolute; background: var(--ink, #0E0E12); border-radius: 2px; transition: transform .18s ease; }
body.nd-hybrid .ndd-faq summary i::before { left: 0; right: 0; top: 9px; height: 2px; }
body.nd-hybrid .ndd-faq summary i::after { top: 0; bottom: 0; left: 9px; width: 2px; }
body.nd-hybrid .ndd-faq[open] summary i::after { transform: scaleY(0); }
body.nd-hybrid .ndd-faq p { font-size: 14.5px; color: var(--ink-3, #3D3D48); line-height: 1.65; margin: 0 0 18px; max-width: 820px; }
body.nd-hybrid .ndd-ctat p { color: rgba(255,255,255,.66); font-size: 14.5px; line-height: 1.6; margin: 12px 0 0; max-width: 520px; }
body.nd-hybrid .ndd-ctaf { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
body.nd-hybrid .ndd-ctaf span { display: block; color: rgba(255,255,255,.5); font-size: 13px; }
body.nd-hybrid .ndd-ctaf a { display: inline-block; margin-top: 6px; color: #FFF; font-size: 20px; font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
body.nd-hybrid .ndd-form { display: grid; gap: 10px; }
body.nd-hybrid .ndd-form input[type="text"],
body.nd-hybrid .ndd-form input[type="tel"],
body.nd-hybrid .ndd-form select,
body.nd-hybrid .ndd-form textarea { width: 100%; min-height: 0; height: 48px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 14.5px; color: #FFF; }
body.nd-hybrid .ndd-form textarea { height: auto; padding: 13px 14px; line-height: 1.5; resize: vertical; }
body.nd-hybrid .ndd-form select option { color: var(--ink, #0E0E12); }
body.nd-hybrid .ndd-form ::placeholder { color: rgba(255,255,255,.42); }
body.nd-hybrid .ndd-form input:focus,
body.nd-hybrid .ndd-form select:focus,
body.nd-hybrid .ndd-form textarea:focus { outline: none; border-color: rgba(255,255,255,.4); }
body.nd-hybrid .ndd-cons { display: flex; gap: 9px; align-items: flex-start; color: rgba(255,255,255,.55); font-size: 12px; line-height: 1.45; cursor: pointer; }
body.nd-hybrid .ndd-cons input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent, #E11D2E); }
body.nd-hybrid .ndd-cons a { color: rgba(255,255,255,.8); }
body.nd-hybrid .ndd-form button { margin-top: 4px; min-height: 48px; border: 0; border-radius: 12px; background: var(--accent, #E11D2E); color: #FFF; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--accent-2, #B8152B); }
body.nd-hybrid .ndd-form button:hover { background: var(--accent-2, #B8152B); box-shadow: 0 2px 0 var(--accent-2, #B8152B); }
body.nd-hybrid .ndd-form button:disabled { opacity: .6; cursor: default; }
/* блок «спасибо»: канонический .nd-lead-ok заскоуплен на body.new-design-product,
здесь у страницы класс nd-hybrid — нужен свой дубль, иначе текст без оформления */
body.nd-hybrid .nd-lead-ok { padding: 18px 16px; text-align: center; color: #7BE0A4; font-weight: 700; font-size: 14.5px; line-height: 1.5; background: rgba(123,224,164,.08); border: 1px solid rgba(123,224,164,.28); border-radius: 12px; }
body.nd-hybrid .ndg-page .shell { max-width: 1520px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { body.nd-hybrid .ndg-page .shell { padding: 0 32px; } }
@media (min-width: 1600px) { body.nd-hybrid .ndg-page .shell { padding: 0 40px; } }
body.nd-hybrid .ndg-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #E11D2E); }
body.nd-hybrid .ndg-page .ndg-h1 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; letter-spacing: -.01em; color: var(--accent, #E11D2E) !important; background: none !important; padding: 0 !important; }
body.nd-hybrid .ndg-hnotes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
body.nd-hybrid .ndg-hn b { font-weight: 700; }
body.nd-hybrid .ndg-h2 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; color: var(--accent, #E11D2E); }
body.nd-hybrid .ndg-sub { font-size: 13.5px; line-height: 1.6; color: var(--muted, #6E6E76); margin: 12px 0 0; max-width: 640px; }
body.nd-hybrid .ndg-pc:hover { border-color: var(--ink-3, #3D3D48); transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 24px 56px rgba(14,14,16,.10)); }
body.nd-hybrid .ndg-pc-i { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft, #f7f7f9); color: var(--accent, #E11D2E); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
body.nd-hybrid .ndg-pc h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
body.nd-hybrid .ndg-pc > p { font-size: 14px; color: var(--muted, #6E6E76); line-height: 1.55; margin: 8px 0 0; }
body.nd-hybrid .ndg-pc ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
body.nd-hybrid .ndg-pc li { font-size: 14.5px; line-height: 1.5; padding-left: 25px; position: relative; color: var(--ink-2, #1E1E24); }
body.nd-hybrid .ndg-pc li::before { content: ''; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--line-2, #f0f0f3);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E8C4A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 10px; background-repeat: no-repeat; background-position: center; }
body.nd-hybrid .ndg-pc-fix { margin-top: auto; padding-top: 18px; font-size: 11.5px; font-weight: 700; color: var(--muted, #6E6E76); letter-spacing: .05em; text-transform: uppercase; }
body.nd-hybrid .ndg-ck { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; padding: 12px 0; border-bottom: 1px solid var(--line-2, #f0f0f3); color: var(--ink-2, #1E1E24); }
body.nd-hybrid .ndg-ck i { flex: none; width: 23px; height: 23px; border-radius: 7px; background: var(--bg, #f7f7f9); color: var(--ink, #0E0E12); font-style: normal; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
body.nd-hybrid .ndg-rep { background: var(--bg, #F7F7F9); border-radius: 20px; padding: 24px; }
body.nd-hybrid .ndg-rep h4 { font-size: 16.5px; font-weight: 800; margin: 0; }
body.nd-hybrid .ndg-rep p { font-size: 14px; color: var(--ink-3, #3D3D48); line-height: 1.6; margin: 10px 0 0; }
body.nd-hybrid .ndg-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
body.nd-hybrid .ndg-tags span { background: #FFF; border: 1px solid var(--line, #ececf0); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; }
body.nd-hybrid .ndg-rep-note { margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--line, #ececf0); }
body.nd-hybrid .ndg-honest h2 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; color: #FF5A6A !important; background: none !important; padding: 0 !important; }
body.nd-hybrid .ndg-honest-lead { color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.6; margin: 12px 0 0; max-width: 780px; }
body.nd-hybrid .ndg-hi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px; }
body.nd-hybrid .ndg-hi b { display: block; font-size: 15.5px; font-weight: 700; }
body.nd-hybrid .ndg-hi p { font-size: 13.5px; color: rgba(255,255,255,.62); line-height: 1.6; margin: 9px 0 0; }
body.nd-hybrid .ndg-paid-tag { display: inline-block; background: var(--bg, #f7f7f9); border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndg-paid p { font-size: 14.5px; color: var(--ink-3, #3D3D48); line-height: 1.6; margin: 10px 0 0; max-width: 700px; }
body.nd-hybrid .ndg-paid small { display: block; color: var(--muted, #6E6E76); font-size: 12.5px; margin-top: 10px; line-height: 1.5; }
body.nd-hybrid .ndg-paid-btn { background: var(--ink, #0E0E12); color: #FFF; text-decoration: none; font-weight: 700; border-radius: 12px; padding: 13px 22px; font-size: 13.5px; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
body.nd-hybrid .ndg-paid-btn:hover { background: var(--ink-2, #1e1e24); color: #FFF; }
body.nd-hybrid .ndg-dc { background: var(--bg-card, #FFF); border: 1px solid var(--line, #ECECF0); border-radius: var(--radius-lg, 20px); padding: 26px; display: flex; flex-direction: column; }
body.nd-hybrid .ndg-dc h3 { font-size: 18px; font-weight: 800; margin: 0; }
body.nd-hybrid .ndg-dc ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
body.nd-hybrid .ndg-dc li { font-size: 14.5px; padding-left: 20px; position: relative; line-height: 1.5; color: var(--ink-2, #1E1E24); }
body.nd-hybrid .ndg-dc li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #E11D2E); }
body.nd-hybrid .ndg-dc-btn { align-self: flex-start; margin-top: auto; padding-top: 0; display: inline-block; border: 1px solid var(--ink, #0E0E12); border-radius: 12px; padding: 12px 20px; font-size: 14px; font-weight: 700; color: var(--ink, #0E0E12); text-decoration: none; margin-top: 20px; }
body.nd-hybrid .ndg-dc-btn:hover { background: var(--ink, #0E0E12); color: #FFF; }
body.nd-hybrid .ndg-ctat p { font-size: 14.5px; color: rgba(255,255,255,.85); line-height: 1.6; margin: 12px 0 0; max-width: 540px; }
body.nd-hybrid .ndg-ctaf { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.24); }
body.nd-hybrid .ndg-ctaf span { display: block; color: rgba(255,255,255,.72); font-size: 13px; }
body.nd-hybrid .ndg-ctaf a { display: inline-block; margin-top: 6px; color: #FFF; font-size: 20px; font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
body.nd-hybrid .ndg-form { display: grid; gap: 10px; }
body.nd-hybrid .ndg-form input[type="text"],
body.nd-hybrid .ndg-form input[type="tel"],
body.nd-hybrid .ndg-form textarea { width: 100%; min-height: 0; height: 48px; border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.12); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 14.5px; color: #FFF; }
body.nd-hybrid .ndg-form textarea { height: auto; padding: 13px 14px; line-height: 1.5; resize: vertical; }
body.nd-hybrid .ndg-form ::placeholder { color: rgba(255,255,255,.6); }
body.nd-hybrid .ndg-form input:focus, body.nd-hybrid .ndg-form textarea:focus { outline: none; border-color: #FFF; }
body.nd-hybrid .ndg-cons { display: flex; gap: 9px; align-items: flex-start; color: rgba(255,255,255,.8); font-size: 12px; line-height: 1.45; cursor: pointer; }
body.nd-hybrid .ndg-cons input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--ink, #0E0E12); }
body.nd-hybrid .ndg-cons a { color: #FFF; }
body.nd-hybrid .ndg-form button { margin-top: 4px; min-height: 48px; border: 0; border-radius: 12px; background: var(--ink, #0E0E12); color: #FFF; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
body.nd-hybrid .ndg-form button:hover { background: var(--ink-2, #1e1e24); }
body.nd-hybrid .ndg-form button:disabled { opacity: .6; cursor: default; }
body.nd-hybrid .ndg-cta .nd-lead-ok { padding: 18px 16px; text-align: center; color: #FFF; font-weight: 700; font-size: 14.5px; line-height: 1.5; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.3); border-radius: 12px; }
body.nd-hybrid .ndcr-page .shell { max-width: 1520px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { body.nd-hybrid .ndcr-page .shell { padding: 0 32px; } }
@media (min-width: 1600px) { body.nd-hybrid .ndcr-page .shell { padding: 0 40px; } }
body.nd-hybrid .ndcr-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, #E11D2E); }
body.nd-hybrid .ndcr-page .ndcr-h1 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; letter-spacing: -.01em; color: var(--accent, #E11D2E) !important; background: none !important; padding: 0 !important; }
body.nd-hybrid .ndcr-h2 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; color: var(--accent, #E11D2E); }
body.nd-hybrid .ndcr-h2--flat { margin-top: 8px; }
body.nd-hybrid .ndcr-sub { font-size: 13.5px; line-height: 1.6; color: var(--muted, #6E6E76); margin: 12px 0 0; max-width: 640px; }
body.nd-hybrid .ndcr-btn-pri { display: inline-flex; align-items: center; min-height: 44px; padding: 15px 26px; border-radius: 12px; background: var(--accent, #E11D2E); color: #FFF; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 3px 0 var(--accent-2, #B8152B), 0 10px 24px rgba(225,29,46,.2); transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease); }
body.nd-hybrid .ndcr-btn-pri:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--accent-2, #B8152B), 0 6px 18px rgba(225,29,46,.18); color: #FFF; }
body.nd-hybrid .ndcr-btn-sec { display: inline-flex; align-items: center; min-height: 44px; padding: 15px 24px; border-radius: 12px; background: var(--bg-card, #FFF); border: 1px solid var(--line, #ECECF0); color: var(--ink, #0E0E12); font-size: 15px; font-weight: 600; text-decoration: none; }
body.nd-hybrid .ndcr-btn-sec:hover { border-color: var(--ink-3, #3D3D48); color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcr-stats { display: grid; gap: 10px; }
body.nd-hybrid .ndcr-stat span { font-size: 14.5px; font-weight: 700; }
body.nd-hybrid .ndcr-cond { background: var(--bg-card, #FFF); border: 1px solid var(--line, #ECECF0); border-radius: var(--radius-lg, 20px); padding: 22px 20px; transition: border-color .18s var(--ease, ease), transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease); }
body.nd-hybrid .ndcr-cond:hover { border-color: var(--ink-3, #3D3D48); transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 24px 56px rgba(14,14,16,.10)); }
body.nd-hybrid .ndcr-cond i { display: block; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--accent, #E11D2E); }
body.nd-hybrid .ndcr-cond b { display: block; font-size: 16px; font-weight: 700; margin-top: 10px; line-height: 1.25; }
body.nd-hybrid .ndcr-cond p { font-size: 13.5px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 8px 0 0; }
/* 03.09.2026 (аудит 5.2): логотипы шли как есть — у Сбера контурный круг без подложки,
у Локо белый квадрат с рамкой, у Альфы и ВТБ цветная заливка. Даём всем одинаковую
белую площадку одного размера, знак внутри вписывается целиком. */
body.nd-hybrid .ndcr-bank img {
width: 36px; height: 36px; box-sizing: border-box;
object-fit: contain; padding: 4px;
background: #fff; border: 1px solid var(--line, #ececf0); border-radius: 9px;
}
body.nd-hybrid .ndcr-bank { background: var(--bg, #F7F7F9); border-radius: var(--radius-lg, 20px); padding: 24px 22px; display: flex; align-items: center; gap: 14px; }
body.nd-hybrid .ndcr-bank img { width: auto; max-width: 104px; height: 30px; object-fit: contain; object-position: left center; }
body.nd-hybrid .ndcr-bank span { font-size: 14.5px; font-weight: 700; }
body.nd-hybrid .ndcr-geo-i { border: 1px solid var(--line, #ECECF0); border-radius: var(--radius-lg, 20px); padding: 22px 20px; }
body.nd-hybrid .ndcr-geo-i b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
body.nd-hybrid .ndcr-geo-i p { font-size: 13.5px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 9px 0 0; }
body.nd-hybrid .ndcr-notes .ndcr-eyebrow { color: #FF5A6A; }
body.nd-hybrid .ndcr-notes .ndcr-h2 { color: #FFF; }
body.nd-hybrid .ndcr-notes .ndcr-h2 em { color: #FF5A6A; }
body.nd-hybrid .ndcr-notes .ndcr-sub { color: rgba(255,255,255,.6); }
body.nd-hybrid .ndcr-notes-l { display: grid; gap: 12px; }
body.nd-hybrid .ndcr-note span { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.08); color: #FF5A6A; display: flex; align-items: center; justify-content: center; }
body.nd-hybrid .ndcr-note b { display: block; font-size: 15.5px; font-weight: 700; }
body.nd-hybrid .ndcr-note p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.62); margin: 8px 0 0; }
/* --- вопросы --- */
body.nd-hybrid .ndcr-faqs { margin-top: 22px; max-width: 900px; }
body.nd-hybrid .ndcr-faq { border-bottom: 1px solid var(--line, #ECECF0); }
body.nd-hybrid .ndcr-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 700; }
body.nd-hybrid .ndcr-faq summary::-webkit-details-marker { display: none; }
body.nd-hybrid .ndcr-faq summary i { flex: none; width: 20px; height: 20px; position: relative; }
body.nd-hybrid .ndcr-faq summary i::before,
body.nd-hybrid .ndcr-faq summary i::after { content: ''; position: absolute; background: var(--ink, #0E0E12); border-radius: 2px; transition: transform .18s var(--ease, ease); }
body.nd-hybrid .ndcr-faq summary i::before { left: 0; right: 0; top: 9px; height: 2px; }
body.nd-hybrid .ndcr-faq summary i::after { top: 0; bottom: 0; left: 9px; width: 2px; }
body.nd-hybrid .ndcr-faq[open] summary i::after { transform: scaleY(0); }
body.nd-hybrid .ndcr-faq p { font-size: 14.5px; color: var(--ink-3, #3D3D48); line-height: 1.65; margin: 0 0 18px; max-width: 820px; }
body.nd-hybrid .ndcr-ctat p { font-size: 14.5px; color: var(--ink-3, #3D3D48); line-height: 1.6; margin: 12px 0 0; max-width: 540px; }
body.nd-hybrid .ndcr-ctaf { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line, #ECECF0); }
body.nd-hybrid .ndcr-ctaf span { display: block; color: var(--muted, #6E6E76); font-size: 13px; }
body.nd-hybrid .ndcr-ctaf a { display: inline-block; margin-top: 6px; color: var(--ink, #0E0E12); font-size: 20px; font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
body.nd-hybrid .ndcr-form { display: grid; gap: 10px; }
body.nd-hybrid .ndcr-form input[type="text"],
body.nd-hybrid .ndcr-form input[type="tel"],
body.nd-hybrid .ndcr-form textarea { width: 100%; min-height: 0; height: 48px; border: 1px solid var(--line, #ECECF0); background: var(--bg-card, #FFF); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 14.5px; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcr-form textarea { height: auto; padding: 13px 14px; line-height: 1.5; resize: vertical; }
body.nd-hybrid .ndcr-form ::placeholder { color: var(--muted-2, #B4B4BE); }
body.nd-hybrid .ndcr-form input:focus, body.nd-hybrid .ndcr-form textarea:focus { outline: none; border-color: var(--ink-3, #3D3D48); }
body.nd-hybrid .ndcr-cons { display: flex; gap: 9px; align-items: flex-start; color: var(--muted, #6E6E76); font-size: 12px; line-height: 1.45; cursor: pointer; }
body.nd-hybrid .ndcr-cons input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent, #E11D2E); }
body.nd-hybrid .ndcr-cons a { color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcr-form button { margin-top: 4px; min-height: 48px; border: 0; border-radius: 12px; background: var(--accent, #E11D2E); color: #FFF; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--accent-2, #B8152B); }
body.nd-hybrid .ndcr-form button:hover { background: var(--accent-2, #B8152B); box-shadow: 0 2px 0 var(--accent-2, #B8152B); }
body.nd-hybrid .ndcr-form button:disabled { opacity: .6; cursor: default; }
body.nd-hybrid .ndcr-cta .nd-lead-ok { padding: 18px 16px; text-align: center; color: #1F8A4C; font-weight: 700; font-size: 14.5px; line-height: 1.5; background: var(--bg, #f7f7f9); border: 1px solid #CDE9D6; border-radius: 12px; }
body.nd-hybrid .ndcr-disclaimer { margin-top: 28px; font-size: 12px; line-height: 1.6; color: var(--muted-2, #B4B4BE); max-width: 1000px; }
/* ============================================================
31.08.2026 — /collections/ по замечанию Никиты (п. 61): «не хватает графики,
простого заголовка и небольшого описания; 105 подборок очень много — показал бы
топ-5». Добавлены знаки марок на карточках (марка распознаётся по названию
подборки), метки-категории и четыре крупные карточки свежих подборок.
Заодно блок приведён к канону сайта: .shell 1520 вместо 1240, eyebrow 12/600,
заголовки Instrument Serif 36/400 с курсивным акцентом, карточки var(--line)
и var(--radius-lg). Разметка — includes/nd-collections-body.php.
============================================================ */
body.nd-hybrid .ndc-page .shell { max-width: 1520px; }
@media (min-width: 1600px) { body.nd-hybrid .ndc-page .shell { padding: 0 40px; } }
body.nd-hybrid .ndc-head { margin: 0 0 28px; }
body.nd-hybrid .ndc-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--accent, #E11D2E); }
body.nd-hybrid .ndc-page .ndc-h1 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; letter-spacing: -.01em; color: var(--accent, #E11D2E) !important; background: none !important; padding: 0 !important; }
body.nd-hybrid .ndc-lead { font-size: 15px; line-height: 1.6; color: var(--ink-3, #3D3D48); max-width: 780px; }
body.nd-hybrid .ndc-h2 em { font-family: 'Montserrat', system-ui, sans-serif !important; font-style: normal !important; font-weight: inherit !important; color: var(--accent, #E11D2E); }
body.nd-hybrid .ndc-big:hover { border-color: var(--ink-3, #3D3D48); transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 24px 56px rgba(14,14,16,.10)); }
body.nd-hybrid .ndc-big-head { display: flex; align-items: center; gap: 10px; min-height: 34px; }
body.nd-hybrid .ndc-big-logo { width: 52px; height: 34px; border-radius: 9px; background: #FFF; display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px; }
body.nd-hybrid .ndc-big-logo img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
body.nd-hybrid .ndc-big-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndc-big:hover .ndc-big-t { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndc-big-meta { margin-top: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted, #6E6E76); }
/* --- знак марки и метка в обычной карточке --- */
body.nd-hybrid .ndc-grid--gap { margin-top: 0; }
body.nd-hybrid .ndc-card-top { display: flex; align-items: center; gap: 9px; min-height: 26px; }
body.nd-hybrid .ndc-card-logo { width: 44px; height: 26px; border-radius: 7px; background: var(--bg, #F7F7F9); display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; }
body.nd-hybrid .ndc-card-logo img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
body.nd-hybrid .ndc-card { border-color: var(--line, #ECECF0); border-radius: var(--radius-lg, 20px); gap: 12px; }
body.nd-hybrid .ndc-card:hover { border-color: var(--ink-3, #3D3D48); transform: translateY(-3px); box-shadow: var(--shadow-lg, 0 24px 56px rgba(14,14,16,.10)); }
/* п.16 — флаг Казахстана в eyebrow /kazakhstan/ вместо эмодзи 🇰🇿 */
body.nd-hybrid .ndkz-flag { display: inline-flex; vertical-align: -3px; }
body.nd-hybrid .ndkz-flag svg { display: block; }
/* ============================================================
31.08.2026 — /kazakhstan/, первый экран.
Никита, п. 59: «/kazakhstan/ — слабый первый экран, надо добавить графику (фото, видео)».
Что было: две колонки — слева текст, справа четыре коробки с цифрами. Ни одной
картинки; эмодзи-флаг 🇰🇿 в надзаголовке (против п. 10 «цветастые иконки удешевляют»).
Что стало: справа мозаика из трёх живых фото склада (те же кадры /upload/sklad-photos/,
что и на карточках ниже — своих ассетов не заводим), цифры вынесены под шапку в
полосу на тонких линейках, надзаголовок и курсив в H1 приведены к канону.
Если подходящих снимков меньше трёх — мозаика не рисуется, шапка становится
одноколоночной типографской (класс .is-solo).
Разметка — includes/nd-kazakhstan-body.php.
============================================================ */
/* --- надзаголовок по канону: 12px/600, ls .12em, акцент (было 11.5px/700 серым) --- */
body.nd-hybrid .ndkz-eyebrow {
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
color: var(--accent, #E11D2E);
}
/* --- курсивный акцент в H1: Instrument Serif 400, акцентный цвет --- */
body.nd-hybrid main.content h1.ndkz-h1 em {
font-family: 'Montserrat', system-ui, sans-serif !important;
font-style: normal !important;
font-weight: inherit !important;
color: var(--accent, #E11D2E);
}
/* --- колонки шапки: текст и мозаика --- */
body.nd-hybrid .ndkz-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
gap: 56px;
align-items: center;
}
body.nd-hybrid .ndkz-hero-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
body.nd-hybrid .ndkz-hero-grid.is-solo .ndkz-lead { max-width: 720px; }
/* --- мозаика: крупный кадр слева на две строки, два поменьше справа --- */
body.nd-hybrid .ndkz-hero-media { display: grid; gap: 10px; }
body.nd-hybrid .ndkz-shots {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 12px;
}
body.nd-hybrid .ndkz-shot {
position: relative;
display: block;
margin: 0;
min-height: 0;
overflow: hidden;
background: var(--line-2, #f0f0f3);
border: 1px solid var(--line, #ECECF0);
border-radius: var(--radius-lg, 20px);
}
body.nd-hybrid .ndkz-shot-main { grid-row: 1 / 3; aspect-ratio: 4 / 3; }
body.nd-hybrid .ndkz-shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s var(--ease, cubic-bezier(.4, 0, .2, 1));
}
body.nd-hybrid .ndkz-shot:hover img { transform: scale(1.03); }
body.nd-hybrid .ndkz-shot figcaption {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
display: flex;
align-items: baseline;
gap: 8px;
padding: 8px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, .94);
}
body.nd-hybrid .ndkz-shot-main figcaption { left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; }
body.nd-hybrid .ndkz-shot-name {
font-size: 13px;
font-weight: 700;
line-height: 1.25;
color: var(--ink, #0E0E12);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.nd-hybrid .ndkz-shot-main .ndkz-shot-name { font-size: 15px; }
body.nd-hybrid .ndkz-shot-year { flex: none; font-size: 12px; font-weight: 600; color: var(--muted, #6E6E76); }
/* селектор с main.content — иначе перебивает общее `main.content p { font-size: 16px }` */
body.nd-hybrid main.content p.ndkz-media-note {
margin: 0;
font-size: 12.5px;
line-height: 1.45;
color: var(--muted, #6E6E76);
}
/* --- полоса цифр под шапкой (были коробки .ndkz-fact в правой колонке) --- */
body.nd-hybrid .ndkz-figs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 44px;
border-top: 1px solid var(--line, #ECECF0);
}
body.nd-hybrid .ndkz-figs .ndkz-fact {
padding: 22px 28px 0 0;
border: 0;
border-radius: 0;
background: none;
}
body.nd-hybrid .ndkz-figs .ndkz-fact + .ndkz-fact {
padding-left: 28px;
border-left: 1px solid var(--line, #ECECF0);
}
body.nd-hybrid .ndkz-figs .ndkz-fact-n { font-size: 30px; margin-bottom: 6px; }
body.nd-hybrid .ndkz-figs .ndkz-fact-l { max-width: 260px; }
@media (max-width: 1200px) {
/* шапка уже одноколоночная (правило выше по файлу) — фото ставим первым,
чтобы графика была видна сразу, а не после кнопок */
body.nd-hybrid .ndkz-hero-grid { align-items: start; }
body.nd-hybrid .ndkz-hero-media { order: -1; }
body.nd-hybrid .ndkz-shots { max-width: 760px; }
}
@media (max-width: 900px) {
body.nd-hybrid .ndkz-figs {
grid-template-columns: 1fr 1fr;
column-gap: 20px;
row-gap: 14px;
margin-top: 32px;
border-top: 0;
}
body.nd-hybrid .ndkz-figs .ndkz-fact,
body.nd-hybrid .ndkz-figs .ndkz-fact + .ndkz-fact {
padding: 16px 0 0;
border-left: 0;
border-top: 1px solid var(--line, #ECECF0);
}
body.nd-hybrid .ndkz-figs .ndkz-fact-n { font-size: 24px; }
body.nd-hybrid .ndkz-figs .ndkz-fact-l { max-width: none; }
}
@media (max-width: 700px) {
body.nd-hybrid .ndkz-hero-grid { gap: 24px; }
body.nd-hybrid .ndkz-shots {
max-width: none;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 8px;
}
body.nd-hybrid .ndkz-shot { border-radius: var(--radius-md, 14px); }
body.nd-hybrid .ndkz-shot-main { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 10; }
body.nd-hybrid .ndkz-shot-side { aspect-ratio: 4 / 3; }
body.nd-hybrid .ndkz-shot figcaption { left: 8px; right: 8px; bottom: 8px; padding: 6px 9px; border-radius: 10px; }
body.nd-hybrid .ndkz-shot-side figcaption { display: none; }
body.nd-hybrid .ndkz-shot-main .ndkz-shot-name { font-size: 13.5px; }
}
/* ============================================================
31.08.2026 — /about/, блок «7 шагов».
Никита, п. 64: «7 шагов — много текста и скучно выглядит».
Что было: семь карточек .ab-process__step (padding 4rem/3rem, radius 2rem, цифра
6rem водяным знаком) в три колонки + отдельная swiper-карусель с теми же семью
шагами на телефоне; текст в карточках шёл 16px (правило `.ab-wrap p`), блок
занимал больше двух экранов.
Что стало: таймлайн-«рельс» — сплошная тонкая линейка, номер 01…07 акцентным чипом
поверх неё, заголовок 15,5px/700, текст 13,5px. Семь шагов в одну строку на широком
экране, 4 / 2 / 1 колонки дальше; карусель на телефоне больше не нужна.
Разметка — /about/index.php, гейт по HTTP_HOST === test.encarrus.ru.
Контурные значки блока «Почему мы» (правка 29.08) не задеты.
============================================================ */
body.nd-hybrid .ab-process__head { margin-bottom: 34px; }
body.nd-hybrid .ab-steps {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
column-gap: 0;
row-gap: 30px;
counter-reset: abstep;
}
body.nd-hybrid .ab-step {
position: relative;
counter-increment: abstep;
padding: 28px 26px 0 0;
border-top: 1px solid var(--line, #ECECF0);
}
body.nd-hybrid .ab-step::before {
content: counter(abstep, decimal-leading-zero);
position: absolute;
top: -9px;
left: 0;
padding-right: 10px;
background: #FFF;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.4;
color: var(--accent, #E11D2E);
}
/* main.content в селекторе — перебиваем `main.content p { font-size: 16px }` и общий h3 */
body.nd-hybrid main.content .ab-steps h3 {
margin: 0 0 7px;
font-size: 15.5px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -.01em;
color: var(--ink, #0E0E12);
}
body.nd-hybrid main.content .ab-steps p {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--ink-3, #3D3D48);
}
@media (max-width: 1400px) {
body.nd-hybrid .ab-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
body.nd-hybrid .ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
body.nd-hybrid .ab-step { padding-right: 0; }
}
@media (max-width: 600px) {
body.nd-hybrid .ab-steps { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
body.nd-hybrid .ab-step { padding-top: 24px; }
body.nd-hybrid main.content .ab-steps h3 { font-size: 15px; }
}
body.nd-hybrid .rv-header__platform-badge.rv-badge-filter { border: 0; }
body.nd-hybrid .rv-header__platform-badge.rv-badge-filter--on {
background: var(--accent-soft, #f0f0f3);
color: var(--accent, #E11D2E);
}
/* 31.08.2026 — п. 16 Никиты: буквенные коды стран вместо флагов-эмодзи на /about/ */
body.nd-hybrid .ab-geo__flag--code {
display: inline-flex; align-items: center; justify-content: center;
min-width: 46px; height: 32px; padding: 0 10px;
background: var(--bg, #F7F7F9); border-radius: 10px;
font-size: 14px; font-weight: 800; letter-spacing: .06em; color: var(--ink, #0E0E12);
}
body.nd-hybrid .rv-video-emoji svg { display: block; color: var(--accent, #E11D2E); }
body.nd-hybrid .ab-hero__overlay {
background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.22) 100%),
linear-gradient(to right, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 62%);
}
body.nd-hybrid .ab-hero__sub { color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* 4. Акценты в H1 внутренних страниц — те же правила, но со своими цветами
на тёмных экранах (первый экран /delivery/ — светлый текст на чёрном). */
body.nd-hybrid .ndd-hero .ndd-h1 em { color: #FF5A6A !important; }
body.nd-hybrid .ndg-honest h2 em,
body.nd-hybrid .ndcr-notes .ndcr-h2 em { color: #FF5A6A !important; }
/* 31.08.2026 (Ivan: «теперь прижато сильно к низу, надо по центру блока») — текст первого
экрана /about/ стоял по нижнему краю (.ab-hero { align-items: flex-end } + padding-bottom
7rem у .ab-hero__content) и упирался в плашку со статистикой. Ставим по центру фотографии,
нижний отступ оставляем небольшим, чтобы текст не наезжал на плашку с цифрами. */
body.nd-hybrid .ab-hero { align-items: center; }
body.nd-hybrid .ab-hero__content { padding-bottom: 2.5rem; padding-top: 2rem; }
@media (max-width: 900px) {
body.nd-hybrid .ab-hero__content { padding-bottom: 4rem; }
}
/* Название модели в ленте выдач на /kazakhstan/ обрезалось многоточием
(«Hyundai Santa Fe» → 79 px при 126 px текста) — даём перенос на две строки. */
@media (max-width: 860px) {
body.nd-hybrid .ndkz-shot-name {
white-space: normal;
overflow: visible;
line-height: 1.25;
}
}
/* 31.08.2026 — /delivery/, панель подбора на телефоне: flex-basis подписи работал
по высоте после переключения в колонку и давал пустоту ~500px перед кнопкой. */
@media (max-width: 760px) {
body.nd-hybrid .ndd-pnote { flex: 0 0 auto; padding-bottom: 0; }
body.nd-hybrid .ndd-fld { flex: 0 0 auto; }
body.nd-hybrid .ndd-pgo { flex: 0 0 auto; }
}
/* 31.08.2026 — таблицы на /statistic/ и /hybrids/ вылезали за экран на ~6px
(ячейки с nowrap). Разрешаем горизонтальную прокрутку самой таблице и
уменьшаем внутренние отступы ячеек на телефоне. */
@media (max-width: 760px) {
body.nd-hybrid .ht-table-wrap,
body.nd-hybrid .statistic-table-wrap,
body.nd-hybrid main.content table { max-width: 100%; }
body.nd-hybrid main.content table th,
body.nd-hybrid main.content table td { padding-left: 8px; padding-right: 8px; }
body.nd-hybrid .ht-cell { padding-left: 8px; padding-right: 8px; }
body.nd-hybrid main.content table th { font-size: 11.5px; }
}
/* 01.09.2026 (Ivan: «эта стр вон какая широкая» — /partner/, /statistic/, /faq/).
Канон 1520px рассчитан на сетки карточек и каталог. На текстовых страницах в этой
ширине строка тянется на 1430px: читать неудобно, справа пустота. Для них — читаемая
колонка 1240px, остальное без изменений. */
/* 01.09.2026 (Ivan: «проверь на остальных стр чтобы всё было чётко»). Сначала /partner/
и /faq/ получили колонку 1240px — из-за этого их контент стоял на 240px правее шапки.
Правильно: колонка как у всех (1520px через .shell), а длинную строку сдерживаем
ограничением ширины у самих абзацев — читаемость сохраняется, левый край совпадает. */
body.nd-hybrid .ndp-page .ndp-lede,
body.nd-hybrid .ndp-page .ndp-note,
body.nd-hybrid .ndp-page .ndp-sec-head p,
body.nd-hybrid .ndfaq-section .ndfaq-intro,
body.nd-hybrid .ndfaq-section p { max-width: 900px; }
/* 01.09.2026 (Ivan): «статистика по центру, надо чтобы по шапке было». Сначала сняли
ограничение совсем — на широком экране блок уехал шире шапки. Правильно — та же
колонка, что у шапки и остальных страниц: .shell (1520px + паддинги по брейкпоинтам). */
body.nd-hybrid .st { max-width: 1520px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }
@media (min-width: 1280px) { body.nd-hybrid .st { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1600px) { body.nd-hybrid .st { padding-left: 40px; padding-right: 40px; } }
/* 01.09.2026 (Ivan: «эта стр вон как выглядит» — /history/). В новом дизайне список сделок
стал сеткой из трёх колонок, а сама карточка осталась горизонтальной из старого
history.css (`display:flex`, фото `flex: 0 0 38rem`): в колонке 390px фото занимало
380px, тексту доставалось ~10px — названия обрезались в «Merce…», цена ломалась
на три строки. Делаем карточку вертикальной: фото сверху, данные под ним. */
body.nd-hybrid .sh-card { display: flex; flex-direction: column; }
body.nd-hybrid .sh-card__photo {
flex: 0 0 auto; width: 100%; min-height: 0; aspect-ratio: 16 / 10; border-radius: 0;
}
body.nd-hybrid .sh-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.nd-hybrid .sh-card__body {
display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; flex: 1 1 auto; min-width: 0;
}
body.nd-hybrid .sh-card__top { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body.nd-hybrid .sh-card__title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
font-size: 16px; margin: 0;
}
body.nd-hybrid .sh-card__price-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.nd-hybrid .sh-card__price { white-space: nowrap; font-size: 22px; }
body.nd-hybrid .sh-card__price-label { line-height: 1.35; }
body.nd-hybrid .sh-card__economy { align-self: flex-start; }
body.nd-hybrid .sh-card__review {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body.nd-hybrid .sh-card__bottom { margin-top: auto; }
@media (max-width: 760px) {
body.nd-hybrid .sh-list { grid-template-columns: 1fr; }
body.nd-hybrid .sh-card__photo { aspect-ratio: 16 / 9; }
}
/* ============================================================
01.09.2026 — калькулятор утильсбора, новый дизайн (запрос Ivan'а).
Три варианта компоновки (?design=a|b|c) + общие блоки: как считается,
таблица ставок, вопросы, SEO-текст. Токены — из new-catalog.css.
============================================================ */
/* 01.09.2026 (Ivan): «контент по центру, надо сделать по ширине шапки» — колонку
калькулятора не сужаем, страница идёт в общей ширине шаблона (1520px, как шапка). */
body.nd-hybrid section.uc-hero { padding: 26px 0 34px; }
body.nd-hybrid .uc-hero-head { max-width: 760px; }
body.nd-hybrid .uc-h1 {
font-family: 'Montserrat', sans-serif; font-size: 40px; font-weight: 800;
line-height: 1.12; letter-spacing: -.02em; margin: 8px 0 12px; color: var(--ink, #0E0E12);
}
body.nd-hybrid .uc-h1 em {
font-style: normal; color: #FFF; background: var(--accent, #E11D2E);
border-radius: 10px; padding: 0 .16em;
}
body.nd-hybrid .uc-sub { font-size: 14px; line-height: 1.6; color: var(--muted, #6E6E76); margin: 0; max-width: 720px; }
body.nd-hybrid .uc-sub b { color: var(--ink, #0E0E12); font-weight: 700; }
body.nd-hybrid .uc-h2 {
font-family: 'Montserrat', sans-serif; font-size: 30px; font-weight: 800;
line-height: 1.15; letter-spacing: -.02em; margin: 8px 0 14px; color: var(--ink, #0E0E12);
}
/* ---------- общие поля ---------- */
body.nd-hybrid .uc-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.nd-hybrid .uc-f-l { font-size: 12.5px; font-weight: 700; color: var(--ink-3, #3D3D48); }
body.nd-hybrid .uc-f-h { font-size: 11.5px; color: var(--muted, #6E6E76); }
body.nd-hybrid .uc-inp {
width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px;
border: 1px solid var(--line, #ECECF0); background: #FFF;
font: 600 15px/1.2 'Montserrat', sans-serif; color: var(--ink, #0E0E12);
}
body.nd-hybrid .uc-inp:focus { outline: none; border-color: var(--ink, #0E0E12); }
body.nd-hybrid select.uc-inp { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
body.nd-hybrid .uc-btn {
width: 100%; min-height: 52px; border: 0; border-radius: 12px; cursor: pointer;
background: var(--accent, #E11D2E); color: #FFF; font: 800 15px/1 'Montserrat', sans-serif;
box-shadow: 0 3px 0 var(--accent-2, #b8152b), 0 10px 24px rgba(225,29,46,.2);
}
body.nd-hybrid .uc-btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--accent-2, #b8152b); }
/* ---------- вариант A ---------- */
body.nd-hybrid .uc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; margin-top: 22px; align-items: start; }
body.nd-hybrid .uc-form {
background: #FFF; border: 1px solid var(--line, #ECECF0); border-radius: 20px;
padding: 22px; display: flex; flex-direction: column; gap: 16px;
}
body.nd-hybrid .uc-f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.nd-hybrid .uc-f-wide { grid-column: 1 / -1; }
body.nd-hybrid .uc-res { position: sticky; top: 86px; }
body.nd-hybrid .uc-res-in {
background: var(--ink, #0E0E12); color: #FFF; border-radius: 20px; padding: 22px;
display: flex; flex-direction: column; gap: 10px;
}
body.nd-hybrid .uc-res-lbl { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
body.nd-hybrid .uc-res-sum { font: 800 38px/1.05 'Montserrat', sans-serif; letter-spacing: -.02em; }
body.nd-hybrid .uc-res-note { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.65); }
body.nd-hybrid .uc-res-note.is-good { color: #7BE0A0; }
body.nd-hybrid .uc-res-note.is-warn { color: #FFB4A2; }
body.nd-hybrid .uc-res-list { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 8px; }
body.nd-hybrid .uc-res-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: rgba(255,255,255,.6); }
body.nd-hybrid .uc-res-list b { color: #FFF; font-weight: 700; text-align: right; }
body.nd-hybrid .uc-res-cta {
display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
border-radius: 12px; background: var(--accent, #E11D2E); color: #FFF;
font: 800 14px/1 'Montserrat', sans-serif; text-decoration: none; margin-top: 4px;
}
body.nd-hybrid .uc-res-cta:hover { background: var(--accent-2, #b8152b); color: #FFF; }
body.nd-hybrid .uc-res-fine { font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.4); }
/* ---------- вариант B: мастер ---------- */
body.nd-hybrid .uc-wiz { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
body.nd-hybrid .uc-step {
display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start;
background: #FFF; border: 1px solid var(--line, #ECECF0); border-radius: 18px; padding: 18px 20px;
}
body.nd-hybrid .uc-step-n {
width: 34px; height: 34px; border-radius: 50%; background: var(--ink, #0E0E12); color: #FFF;
display: flex; align-items: center; justify-content: center; font: 800 14px/1 'Montserrat', sans-serif;
}
body.nd-hybrid .uc-step-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body.nd-hybrid .uc-step-t { font-size: 16px; font-weight: 800; color: var(--ink, #0E0E12); }
body.nd-hybrid .uc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
body.nd-hybrid .uc-chip { position: relative; }
body.nd-hybrid .uc-chip input { position: absolute; opacity: 0; pointer-events: none; }
body.nd-hybrid .uc-chip span {
display: inline-flex; align-items: center; min-height: 40px; padding: 9px 16px;
border: 1px solid var(--line, #ECECF0); border-radius: 999px; background: #FFF;
font: 700 13.5px/1 'Montserrat', sans-serif; color: var(--ink-3, #3D3D48); cursor: pointer;
}
body.nd-hybrid .uc-chip input:checked + span { background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12); color: #FFF; }
body.nd-hybrid .uc-wiz-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 460px; }
body.nd-hybrid .uc-wiz-res {
background: var(--ink, #0E0E12); color: #FFF; border-radius: 20px; padding: 22px;
display: flex; flex-direction: column; gap: 10px;
}
/* ---------- вариант C: тёмная строка ---------- */
body.nd-hybrid .uc-bar { margin-top: 22px; background: var(--ink, #0E0E12); border-radius: 22px; padding: 22px; color: #FFF; }
body.nd-hybrid .uc-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
body.nd-hybrid .uc-bar-w { font: 800 20px/1.2 'Montserrat', sans-serif; }
body.nd-hybrid .uc-bar-sel { position: relative; display: inline-flex; align-items: center; }
body.nd-hybrid .uc-bar-inp {
min-height: 46px; padding: 10px 34px 10px 14px; border-radius: 12px;
border: 1px solid rgba(255,255,255,.16); background: var(--ink-2, #1e1e24); color: #FFF;
font: 700 15px/1 'Montserrat', sans-serif; appearance: none;
}
body.nd-hybrid .uc-bar-num .uc-bar-inp { width: 120px; padding-right: 46px; }
body.nd-hybrid .uc-bar-num i { position: absolute; right: 14px; font-style: normal; font-size: 12.5px; color: rgba(255,255,255,.5); }
body.nd-hybrid select.uc-bar-inp { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; }
body.nd-hybrid .uc-bar-res { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
body.nd-hybrid .uc-bar-sum { display: flex; flex-direction: column; gap: 2px; }
body.nd-hybrid .uc-bar-sum b { font: 800 34px/1.05 'Montserrat', sans-serif; }
body.nd-hybrid .uc-bar .uc-res-cta { margin-left: auto; padding: 0 20px; }
body.nd-hybrid .uc-bar .uc-res-list { border-top: 1px solid rgba(255,255,255,.12); margin-top: 16px; padding-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
body.nd-hybrid .uc-bar .uc-res-list li { flex-direction: column; gap: 3px; }
body.nd-hybrid .uc-bar .uc-res-list b { text-align: left; }
/* ---------- как считается ---------- */
body.nd-hybrid section.uc-how { padding: 34px 0; }
body.nd-hybrid .uc-how-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
body.nd-hybrid .uc-how-c {
background: #FFF; border: 1px solid var(--line, #ECECF0); border-radius: 16px; padding: 18px;
display: flex; flex-direction: column; gap: 8px;
}
body.nd-hybrid .uc-how-n { font: 800 12px/1 'Montserrat', sans-serif; letter-spacing: .12em; color: var(--accent, #E11D2E); }
body.nd-hybrid .uc-how-c b { font-size: 15.5px; font-weight: 800; color: var(--ink, #0E0E12); }
body.nd-hybrid .uc-how-c p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted, #6E6E76); }
body.nd-hybrid .uc-warn {
margin-top: 14px; background: var(--bg, #f7f7f9); border: 1px solid #FBD5D9; border-radius: 16px;
padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
}
body.nd-hybrid .uc-warn b { font-size: 15px; font-weight: 800; color: var(--ink, #0E0E12); }
body.nd-hybrid .uc-warn span { font-size: 13.5px; line-height: 1.55; color: var(--ink-3, #3D3D48); flex: 1 1 320px; }
body.nd-hybrid .uc-warn-a { font: 800 13.5px/1 'Montserrat', sans-serif; color: var(--accent, #E11D2E); text-decoration: none; white-space: nowrap; }
/* ---------- таблица ставок ---------- */
body.nd-hybrid section.uc-rates { padding: 34px 0; }
body.nd-hybrid .uc-rt-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
body.nd-hybrid .uc-rt-tab {
min-height: 40px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line, #ECECF0); background: #FFF;
font: 700 13px/1 'Montserrat', sans-serif; color: var(--ink-3, #3D3D48);
}
body.nd-hybrid .uc-rt-tab.is-on { background: var(--ink, #0E0E12); border-color: var(--ink, #0E0E12); color: #FFF; }
body.nd-hybrid .uc-rt-scroll { overflow-x: auto; border: 1px solid var(--line, #ECECF0); border-radius: 16px; background: #FFF; }
body.nd-hybrid .uc-rt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
body.nd-hybrid .uc-rt th {
text-align: left; padding: 13px 16px; font: 700 12px/1.2 'Montserrat', sans-serif;
letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6E6E76);
border-bottom: 1px solid var(--line, #ECECF0); white-space: nowrap;
}
body.nd-hybrid .uc-rt td { padding: 12px 16px; border-bottom: 1px solid var(--line-2, #f0f0f3); color: var(--ink-3, #3D3D48); white-space: nowrap; }
body.nd-hybrid .uc-rt tr:last-child td { border-bottom: 0; }
body.nd-hybrid .uc-rt tr.is-benefit td { background: var(--bg, #f7f7f9); color: #14683A; font-weight: 700; }
body.nd-hybrid .uc-rt-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #DCF3E5; font-size: 11.5px; font-weight: 700; }
/* ---------- вопросы ---------- */
body.nd-hybrid section.uc-faq { padding: 34px 0; }
body.nd-hybrid .uc-faq-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
body.nd-hybrid .uc-faq-i { background: #FFF; border: 1px solid var(--line, #ECECF0); border-radius: 14px; padding: 14px 18px; }
body.nd-hybrid .uc-faq-i summary { cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; color: var(--ink, #0E0E12); display: flex; justify-content: space-between; gap: 14px; align-items: center; }
body.nd-hybrid .uc-faq-i summary::-webkit-details-marker { display: none; }
body.nd-hybrid .uc-faq-i summary::after { content: ''; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--muted, #6E6E76); border-bottom: 2px solid var(--muted, #6E6E76); transform: rotate(45deg); margin-top: -4px; transition: transform .18s ease; }
body.nd-hybrid .uc-faq-i[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
body.nd-hybrid .uc-faq-i p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3, #3D3D48); }
/* ---------- SEO-текст ---------- */
body.nd-hybrid section.uc-seo { padding: 30px 0 40px; }
body.nd-hybrid .uc-seo p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.7; color: var(--ink-3, #3D3D48); max-width: 900px; }
body.nd-hybrid .uc-seo p b { font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .uc-seo-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body.nd-hybrid .uc-seo-links a {
display: inline-flex; align-items: center; min-height: 38px; padding: 9px 14px;
border: 1px solid var(--line, #ECECF0); border-radius: 999px; background: #FFF;
font: 700 13px/1 'Montserrat', sans-serif; color: var(--ink, #0E0E12); text-decoration: none;
}
body.nd-hybrid .uc-seo-links a:hover { border-color: var(--ink-3, #3D3D48); }
/* ---------- телефон ---------- */
@media (max-width: 900px) {
body.nd-hybrid .uc-grid { grid-template-columns: 1fr; }
body.nd-hybrid .uc-res { position: static; }
body.nd-hybrid .uc-how-grid { grid-template-columns: 1fr 1fr; }
body.nd-hybrid .uc-bar .uc-res-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
body.nd-hybrid .uc-h1 { font-size: 28px; }
body.nd-hybrid .uc-h2 { font-size: 22px; }
body.nd-hybrid .uc-form, body.nd-hybrid .uc-res-in, body.nd-hybrid .uc-wiz-res, body.nd-hybrid .uc-bar { padding: 16px; border-radius: 16px; }
body.nd-hybrid .uc-f-row, body.nd-hybrid .uc-wiz-inputs { grid-template-columns: 1fr; }
body.nd-hybrid .uc-how-grid { grid-template-columns: 1fr; }
body.nd-hybrid .uc-res-sum, body.nd-hybrid .uc-bar-sum b { font-size: 30px; }
body.nd-hybrid .uc-bar-w { font-size: 16px; }
body.nd-hybrid .uc-bar-row { gap: 8px; }
body.nd-hybrid .uc-bar-num .uc-bar-inp { width: 108px; }
body.nd-hybrid .uc-bar .uc-res-cta { margin-left: 0; width: 100%; }
body.nd-hybrid .uc-step { grid-template-columns: 34px minmax(0,1fr); padding: 14px 16px; gap: 10px; }
body.nd-hybrid .uc-rt th, body.nd-hybrid .uc-rt td { padding: 10px 12px; font-size: 12.5px; }
}
body.nd-hybrid .faq > .box-slider,
body.nd-hybrid .box-slider { padding-left: 0; padding-right: 0; }
body.nd-hybrid section.faq > .shell,
body.nd-hybrid .faq { padding-left: 0; padding-right: 0; }
/* 01.09.2026 — добиваем выравнивание контента по колонке шапки (проверка по всем nd-страницам).
1) /partner/: .shell приклеивало влево общим правилом для ndfaq/ndsteps — возвращаем центрирование.
2) /korea/: описание категории (.catalog-element--desc) центрировалось в 960px и стояло
на 240px правее шапки, хотя весь каталог выровнен по левому краю.
3) /bikes/: легаси-блок контактов шёл от края экрана — даём ему ту же колонку. */
body.nd-hybrid .ndp-page .shell { margin-left: auto; margin-right: auto; }
body.nd-hybrid .contacts__row {
max-width: 1520px; margin-left: auto; margin-right: auto;
padding-left: 24px; padding-right: 24px;
}
@media (min-width: 1280px) { body.nd-hybrid .contacts__row { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1600px) { body.nd-hybrid .contacts__row { padding-left: 40px; padding-right: 40px; } }
/* 01.09.2026 — финальное выравнивание: колонка как у шапки там, где её не было.
/faq/: у .shell внутри .ndfaq-section оставались max-width 1240 и margin-left 0 от общего
правила ndfaq/ndsteps — контент стоял на 240px левее шапки.
/korea/: описание категории (960px) жило прямо в .container без паддингов — прижималось
к краю экрана; даём ему колонку, а читаемую ширину оставляем внутреннему блоку. */
body.nd-hybrid .ndfaq-section .shell,
body.nd-hybrid .ndfaq-hero .shell { max-width: 1520px; margin-left: auto; margin-right: auto; }
/* ============================================================
01.09.2026 — страницы подборок (/collections/...). Было: статья-простыня,
позиции подборки абзацами вперемешку с фотографиями во всю колонку
(8 300px на компьютере, 15 000px на телефоне). Стало: сетка карточек,
текст статьи — свёрнутым блоком под ней. Разбор разметки — js/nd-collection.js.
============================================================ */
body.nd-hybrid .collection .container { max-width: 1520px; }
body.nd-hybrid .collection__description { max-width: none; }
body.nd-hybrid .ndcl { display: flex; flex-direction: column; gap: 18px; }
body.nd-hybrid .ndcl-lede {
margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-3, #3D3D48); max-width: 900px;
}
body.nd-hybrid .ndcl-head {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding-top: 6px; border-top: 1px solid var(--line, #ECECF0);
}
body.nd-hybrid .ndcl-eyebrow {
display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
text-transform: uppercase; color: var(--accent, #E11D2E);
}
body.nd-hybrid .ndcl-count { font: 800 26px/1.1 'Montserrat', sans-serif; color: var(--ink, #0E0E12); letter-spacing: -.02em; }
body.nd-hybrid .ndcl-head-cta {
display: inline-flex; align-items: center; min-height: 46px; padding: 12px 22px; border-radius: 12px;
background: var(--accent, #E11D2E); color: #FFF; text-decoration: none;
font: 800 14px/1 'Montserrat', sans-serif;
box-shadow: 0 3px 0 var(--accent-2, #b8152b), 0 10px 24px rgba(225,29,46,.2);
}
body.nd-hybrid .ndcl-head-cta:hover { color: #FFF; transform: translateY(1px); box-shadow: 0 2px 0 var(--accent-2, #b8152b); }
body.nd-hybrid .ndcl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.nd-hybrid .ndcl-card {
display: flex; flex-direction: column; background: #FFF; overflow: hidden;
border: 1px solid var(--line, #ECECF0); border-radius: 18px;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
body.nd-hybrid .ndcl-card:hover { border-color: #DCDCE2; transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(14,14,18,.25); }
body.nd-hybrid .ndcl-ph { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--line-2, #f0f0f3); overflow: hidden; }
body.nd-hybrid .ndcl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
body.nd-hybrid .ndcl-card:hover .ndcl-ph img { transform: scale(1.04); }
body.nd-hybrid .ndcl-num {
position: absolute; left: 12px; top: 12px; min-width: 28px; height: 28px; padding: 0 9px;
display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
background: rgba(14,14,18,.82); color: #FFF; font: 800 13px/1 'Montserrat', sans-serif;
}
body.nd-hybrid .ndcl-body { display: flex; flex-direction: column; gap: 10px; padding: 16px; flex: 1 1 auto; min-width: 0; }
body.nd-hybrid .ndcl-name {
font: 800 16px/1.3 'Montserrat', sans-serif; color: var(--ink, #0E0E12); text-decoration: none;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.nd-hybrid .ndcl-name:hover { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndcl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.nd-hybrid .ndcl-chip {
background: var(--bg, #F7F7F9); border-radius: 8px; padding: 5px 10px;
font-size: 12.5px; color: var(--ink-3, #3D3D48); white-space: nowrap;
}
body.nd-hybrid .ndcl-price { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
body.nd-hybrid .ndcl-price b { font: 800 22px/1.1 'Montserrat', sans-serif; color: var(--ink, #0E0E12); letter-spacing: -.02em; white-space: nowrap; }
body.nd-hybrid .ndcl-price span { font-size: 12px; color: var(--muted, #6E6E76); }
body.nd-hybrid .ndcl-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
body.nd-hybrid .ndcl-btn, body.nd-hybrid .ndcl-btn2 {
flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
border-radius: 10px; text-decoration: none; font: 700 13px/1 'Montserrat', sans-serif; text-align: center;
}
body.nd-hybrid .ndcl-btn { background: var(--ink, #0E0E12); color: #FFF; }
body.nd-hybrid .ndcl-btn:hover { background: var(--ink-2, #1e1e24); color: #FFF; }
body.nd-hybrid .ndcl-btn2 { border: 1px solid var(--line, #ECECF0); color: var(--ink, #0E0E12); background: #FFF; }
body.nd-hybrid .ndcl-btn2:hover { border-color: var(--ink-3, #3D3D48); color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcl-text { margin-top: 8px; }
body.nd-hybrid .ndcl-h2 { font: 800 24px/1.2 'Montserrat', sans-serif; letter-spacing: -.02em; margin: 0 0 10px; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcl-text-in { position: relative; max-height: 230px; overflow: hidden; max-width: 900px; }
body.nd-hybrid .ndcl-text-in::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
background: linear-gradient(180deg, rgba(255,255,255,0), #FFF 85%);
}
body.nd-hybrid .ndcl-text-in.is-open { max-height: none; }
body.nd-hybrid .ndcl-text-in.is-open::after { display: none; }
body.nd-hybrid .ndcl-text-in p { font-size: 14px; line-height: 1.7; color: var(--ink-3, #3D3D48); margin: 0 0 12px; }
body.nd-hybrid .ndcl-text-in img { max-width: 100%; height: auto; border-radius: 12px; }
body.nd-hybrid .ndcl-more {
display: inline-flex; align-items: center; gap: 6px; min-height: 38px; margin-top: 8px;
padding: 0; border: 0; background: none; cursor: pointer;
font: 700 13px/1 'Montserrat', sans-serif; color: var(--accent, #E11D2E);
}
body.nd-hybrid .ndcl-more::after {
content: ''; width: 7px; height: 7px; margin-top: -3px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform .18s ease;
}
body.nd-hybrid .ndcl-more[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; }
body.nd-hybrid .ndcl-contacts {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
background: var(--bg, #F7F7F9); border-radius: 16px; padding: 16px 18px;
}
body.nd-hybrid .ndcl-contacts-t { font-size: 14px; font-weight: 700; color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcl-contacts-row { display: flex; flex-wrap: wrap; gap: 8px; }
body.nd-hybrid .ndcl-contacts-row a {
display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 9px 14px;
background: #FFF; border: 1px solid var(--line, #ECECF0); border-radius: 10px;
font: 700 13px/1 'Montserrat', sans-serif; color: var(--ink, #0E0E12); text-decoration: none;
}
body.nd-hybrid .ndcl-contacts-row a:hover { border-color: var(--ink-3, #3D3D48); color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcl-note { font-size: 12px; line-height: 1.55; color: var(--muted, #6E6E76); margin: 0; }
/* компактная шапка статьи: дата, номер, просмотры и «поделиться» */
body.nd-hybrid .collection__header { gap: 14px; align-items: center; }
body.nd-hybrid .collection__share .ya-share2__list { gap: 6px; }
body.nd-hybrid .collection__share .ya-share2__badge { border-radius: 10px !important; }
@media (max-width: 1100px) {
body.nd-hybrid .ndcl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
body.nd-hybrid .ndcl-grid { grid-template-columns: 1fr; gap: 12px; }
body.nd-hybrid .ndcl-count { font-size: 22px; }
body.nd-hybrid .ndcl-head-cta { width: 100%; justify-content: center; }
body.nd-hybrid .ndcl-h2 { font-size: 20px; }
body.nd-hybrid .ndcl-contacts-row { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
body.nd-hybrid .ndcl-contacts-row a { justify-content: center; padding: 9px 6px; font-size: 12px; gap: 5px; }
}
/* 01.09.2026 — подборки: перебиваем легаси-стили статьи. Внутри .collection__description
все ссылки красные с подчёркиванием и кеглем 16.875px, а колонка сужена до 820px —
из-за этого карточки шли узкой лентой, а кнопки теряли текст на своём же фоне. */
body.nd-hybrid .collection__description { width: 100%; max-width: none; }
body.nd-hybrid .collection-detail,
body.nd-hybrid .collection .page__box { max-width: none; }
body.nd-hybrid .ndcl a { text-decoration: none; }
body.nd-hybrid .ndcl .ndcl-name { color: var(--ink, #0E0E12); font-size: 16px; }
body.nd-hybrid .ndcl .ndcl-name:hover { color: var(--accent, #E11D2E); }
body.nd-hybrid .ndcl .ndcl-head-cta { color: #FFF; font-size: 14px; }
body.nd-hybrid .ndcl .ndcl-head-cta:hover { color: #FFF; }
body.nd-hybrid .ndcl .ndcl-btn { color: #FFF; font-size: 13px; }
body.nd-hybrid .ndcl .ndcl-btn:hover { color: #FFF; }
body.nd-hybrid .ndcl .ndcl-btn2 { color: var(--ink, #0E0E12); font-size: 13px; }
body.nd-hybrid .ndcl .ndcl-btn2:hover { color: var(--ink, #0E0E12); }
body.nd-hybrid .ndcl .ndcl-contacts-row a { color: var(--ink, #0E0E12); font-size: 13px; }
body.nd-hybrid .ndcl .ndcl-chip { font-size: 12.5px; }
body.nd-hybrid .ndcl .ndcl-price span { font-size: 12px; }
body.nd-hybrid .ndcl .ndcl-lede { font-size: 15px; }
body.nd-hybrid .ndcl .ndcl-more { font-size: 13px; }
/* карточка подборки без фотографии — вместо картинки компактная плашка с номером */
body.nd-hybrid .ndcl-noph {
display: flex; align-items: center; justify-content: center; height: 76px;
background: linear-gradient(135deg, var(--ink-2, #1e1e24), var(--ink-2, #1e1e24)); color: #FFF;
}
body.nd-hybrid .ndcl-noph b { font: 800 22px/1 'Montserrat', sans-serif; opacity: .8; }
body.nd-hybrid .ndcl-card .ndcl-ph + .ndcl-noph { display: none; }
body.nd-hybrid .nd-city-seo__text p { margin: 0 0 12px; }
/* ============================================================
07.09.2026 — ОБЩЕЕ ПРАВИЛО «узкая колонка внутри широкой сетки»
(разбор Никиты, пп. 9, 11, 14 — это один класс проблемы, а не три разных).
Было: старая колонка чтения (карточка этапов заказа на /faq/*-new/, текст статьи
блога, SEO-текст калькулятора утильсбора) сидела в широкой сетке нового дизайна
с жёстким max-width и прижималась к левому краю. Справа оставалась мёртвая полоса:
141-181px на ноутбуке и 260-580px на широком мониторе.
Стало: одна связка «колонка чтения + боковая колонка». Боковая ВСЕГДА у правого
края сетки, а остаток ширины уходит в промежуток между колонками, не в пустоту.
Числа заданы переменными — страница меняет только их, свой костыль не пишет:
--nd-ar-main базовая ширина колонки чтения
--nd-ar-main-mx её предел (длина строки)
--nd-ar-side базовая ширина боковой колонки
--nd-ar-side-mx её предел
--nd-ar-gap минимальный промежуток
Разметка: .nd-aside-row > (.nd-aside-main + .nd-aside-col).
Липкий блок кладётся ВНУТРЬ .nd-aside-col: сама колонка растянута на высоту ряда,
иначе sticky некуда двигаться (тот же приём, что у статьи блога — .col-md-3
растянут, липкий .right-side-detail-news лежит внутри него).
Колонка чтения растёт втрое быстрее боковой (flex-grow 3 против 1) — сначала
заполняется текст, потом боковая; обе упираются в свои пределы, и только тогда
остаток уходит в промежуток (margin-left: auto у боковой).
============================================================ */
@media (min-width: 1101px) {
body.nd-hybrid .nd-aside-row,
body.nd-hybrid .news-detail-custom .container > .row {
--nd-ar-main: 620px;
--nd-ar-main-mx: 880px;
--nd-ar-side: 300px;
--nd-ar-side-mx: 420px;
--nd-ar-gap: 48px;
display: flex;
align-items: stretch;
justify-content: flex-start;
gap: var(--nd-ar-gap);
max-width: none;
}
body.nd-hybrid .nd-aside-main,
body.nd-hybrid .news-detail-custom .page__box--center {
flex: 3 1 var(--nd-ar-main);
max-width: var(--nd-ar-main-mx);
min-width: 0;
}
body.nd-hybrid .nd-aside-col,
body.nd-hybrid .news-detail-custom .col-md-3 {
flex: 1 1 var(--nd-ar-side);
width: auto;
max-width: var(--nd-ar-side-mx);
min-width: 0;
padding: 0;
margin-left: auto; /* прижимаем к правому краю, даже если рост уже упёрся в предел */
}
}
/* узкий экран: колонки в столбик, боковая уходит под текст */
@media (max-width: 1100px) {
body.nd-hybrid .nd-aside-row { display: block; }
body.nd-hybrid .nd-aside-main,
body.nd-hybrid .nd-aside-col { max-width: none; width: auto; }
body.nd-hybrid .nd-aside-col { margin: 28px 0 0; }
body.nd-hybrid .nd-aside-col .ndfaq-side { position: static; }
}
/* ---- п.9: /faq/china-new/ и соседние страницы «Как мы работаем».
Колонка этапов заказа была ограничена 920px (правило от 20.08.2026), справа
зияло до 580px. Внутри связки ограничение снимаем: ширину держит сама сетка. */
body.nd-hybrid .nd-aside-row--steps {
--nd-ar-main: 760px;
--nd-ar-main-mx: 980px;
--nd-ar-side: 320px;
--nd-ar-side-mx: 420px;
--nd-ar-gap: 56px;
}
/* внутренние отступы и фон карточки этапов не трогаем — снимаем только жёсткую ширину.
Ниже 1001px правило не работает: там колонки идут в столбик, и карточка должна
остаться такой же, как была на телефоне (свои отрицательные поля от 20.08.2026). */
@media (min-width: 1001px) {
body.nd-hybrid .nd-aside-main .process-container {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* Классический «раздув» грид-колонки: .process-container — грид с колонкой auto,
а у неё минимальный размер = min-content содержимого, поэтому на узком экране
колонка (348px) оказывалась шире контентной области карточки (291px) и список
этапов вылезал за правый край на 15px. minmax(0, 1fr) разрешает колонке сжиматься.
На широком экране ничего не меняет: там колонка и так по ширине карточки. */
body.nd-hybrid .nd-aside-main .process-container { grid-template-columns: minmax(0, 1fr); }
body.nd-hybrid .nd-aside-main .process-list--wrapper { max-width: none; }
/* ---- п.14: /calculator-utilsbora/, нижний SEO-текст.
Текст ограничен 900px (см. .uc-seo p выше), правая треть пустовала. */
body.nd-hybrid .nd-aside-row--seo {
--nd-ar-main: 700px;
--nd-ar-main-mx: 900px;
--nd-ar-side: 320px;
--nd-ar-side-mx: 400px;
--nd-ar-gap: 48px;
}
body.nd-hybrid .uc-seo .nd-aside-main > .uc-h2 { margin-top: 0; }
/* ---- п.10б: блок «Вопрос-ответ» нового дизайна на гибридной странице (/kazakhstan/).
Сами стили блока (css/pages/nd-faq-home.css) страница печатает с подменённым
скоупом — см. комментарий в kazakhstan/index.php. Кегль заголовка там берётся
из общего класса .sec-h2, а у гибридных страниц он другой: 44px/700 вместо
канона главной 34px/800. Возвращаем канон, чтобы блок выглядел так же. */
body.nd-hybrid .ndfq .ndfq-h2 { font-size: 34px; font-weight: 800; line-height: 1.14; }
@media (max-width: 860px) {
body.nd-hybrid .ndfq .ndfq-h2 { font-size: 26px; }
}
/* ---- доводка 07.09.2026, п.1: кнопка «Есть вопрос?» под блоком вопросов /kazakhstan/.
Её печатал старый компонент news.list/faq и вместе с собой подключал свой
style.css, где .faq__btn растянут на всю ширину блока. Компонента на стенде нет,
css компонента не подключается — держим правило здесь. Красный фон, кегль и
радиус даёт общий .btn.btn_red шаблона, его не трогаем.
07.09.2026 (хвосты, п.3) — почему у селекторов ниже приписан html.
Кнопка и строка со слоганом лежат на элементе с классом .shell, а гибридным
страницам ширину .shell задаёт НЕ этот файл, а инлайновый