/* ========================================================================== SINGLE-MORTGAGES — страница одного ипотечного предложения ========================================================================== */ /* ── Хлебные крошки ─────────────────────────────────────────────────────── */ .section-breadcrumb { padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: #999; } .breadcrumb-item { color: #999; text-decoration: none; white-space: nowrap; } .breadcrumb-item:hover { color: #333; text-decoration: underline; } .breadcrumb-sep { color: #ccc; user-select: none; } .breadcrumb-current { color: #333; } /* ── Hero-блок ──────────────────────────────────────────────────────────── */ .section-single-hero { padding: 32px 0; } .single-hero { display: flex; flex-direction: column; gap: 24px; } .single-hero-bank { display: flex; align-items: center; gap: 16px; } .single-hero-bank-info { display: flex; flex-direction: column; gap: 4px; } .single-hero-bank-name { color: #999; text-decoration: none; transition: color .15s; } .single-hero-bank-name:hover { color: #333; } .single-hero-title { margin: 0; } .single-hero-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; padding: 24px; background: #f8f8f8; border-radius: 12px; } .single-hero-param { display: flex; flex-direction: column; gap: 6px; } .single-hero-param-label { line-height: 1.3; } .single-hero-param-value { line-height: 1.1; } .single-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ── Таблица условий ────────────────────────────────────────────────────── */ .section-single-conditions { padding: 32px 0; } .single-conditions-table { border: 1px solid #f0f0f0; border-radius: 12px; overflow: hidden; } .single-conditions-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid #f0f0f0; } .single-conditions-row:last-child { border-bottom: none; } .single-conditions-label { flex: 0 1 50%; padding-right: 12px; } .single-conditions-value { text-align: right; } /* ── CTA-блок заявки ────────────────────────────────────────────────────── */ .section-single-apply { padding: 32px 0; background: #f8f8f8; } .single-apply-block { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .single-apply-bank { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .single-apply-text { flex: 1; min-width: 180px; } /* ── Другие предложения банка ───────────────────────────────────────────── */ .section-single-other { padding: 32px 0; } /* ── Кнопка с рамкой (вторичное действие) ───────────────────────────────── */ .button-border { background: transparent; border: 1.5px solid #333; color: #333; } .button-border:hover { background: #f0f0f0; } /* ── Переключатель языка в шапке ─────────────────────────────────────────── */ .lang-switcher { display: flex; align-items: center; gap: 4px; margin-right: 12px; } .lang-switcher__btn { font-size: 13px; font-weight: 600; color: #aaa; text-decoration: none; padding: 2px 4px; border-radius: 4px; transition: color .15s; line-height: 1; } .lang-switcher__btn.is-active { color: #111; } .lang-switcher__btn:hover { color: #111; } .lang-switcher__sep { color: #ddd; font-size: 11px; line-height: 1; } /* На мобильных — убираем разделитель, делаем кнопки чуть крупнее для tap-target */ @media (max-width: 767px) { .lang-switcher { gap: 2px; margin-right: 8px; } .lang-switcher__btn { font-size: 12px; padding: 4px 6px; } } /* ───────────────────────────────────────────────────────────────────────────── ШИРИНА И ВЫСОТА БЛОКА КАРУСЕЛИ STORIES • flex: 0 0 XX% — ширина блока (30% узкая, 40% средняя, 60% широкая, 80% по умолчанию). • height — ЖЁСТКАЯ высота всего блока (заголовок + белая панель). Закомментируй строку, если хочешь, чтобы высота определялась содержимым / соседями по строке (вариант 1 ниже — регулируется через min-height на .web-stories-list). ───────────────────────────────────────────────────────────────────────────── */ .home-main__item--carousel { flex: 0 0 50%; /* ← меняй ширину здесь (Stories теперь делит строку с BLOCK-3.1 и BLOCK-3.2) */ overflow: hidden; /* обрезает слайды, выходящие за границу блока */ min-width: 0; min-height: var(--block3-h, 22rem); /* высоту меняй на .home-main--block-3 → --block3-h */ } /* ───────────────────────────────────────────────────────────────────────────── ВЫСОТА БЕЛОЙ ПАНЕЛИ STORIES Меняй значение min-height ниже (например, 13rem / 16rem / 20rem). Для синхронизации с блоком курсов валют — выставь такое же min-height у правила .card в assets/css/critical.css (сейчас там 13rem). ───────────────────────────────────────────────────────────────────────────── */ .home-main__item--carousel .web-stories-list { background: var(--color-D06); /* ← цвет фона сайта (critical.css:131 → #F6F5F4) */ padding: 1rem; border-radius: 1rem !important; /* скруглённые углы белой панели BLOCK-4.2 */ overflow: hidden !important; /* чтобы скругление работало на всех 4 углах */ box-sizing: border-box; min-height: calc(var(--block3-h, 22rem) - 3rem); /* белая панель = высота строки минус h1 + mb-24 (~3rem); регулируется через --block3-h */ height: 100%; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; /* карточки по центру панели по вертикали (было flex-start — прижато к верху) */ /* ↑↑ ПОДНЯТЬ БЕЛЫЙ БЛОК STORIES ВВЕРХ ↑↑ Между заголовком "Stories" и белой панелью есть зазор от mb-24 у h1 (24px = 1.5rem). Уменьшай отрицательное значение margin-top, чтобы поднять панель ближе к заголовку. Примеры: 0 — без сдвига (зазор 1.5rem), -0.75rem — поднять на половину зазора, -1.5rem — вплотную к заголовку, -2rem — заехать под заголовок. */ margin-top: 0rem; /* ← меняй отступ здесь, чтобы поднять/опустить белую панель */ } .home-main__item--carousel .web-stories-list__inner-wrapper, .home-main__item--carousel .web-stories-list__carousel, .home-main__item--carousel .glider, .home-main__item--carousel .glider-contain, .home-main__item--carousel .glider-track { height: auto !important; min-height: 0 !important; border-radius: 1rem !important; overflow: hidden !important; } .home-main__item:not(.home-main__item--carousel):not(.home-main__item--wide):not(.home-main__item--rates) { flex: 1 1 auto; /* остальные блоки заполняют оставшееся место */ min-width: 0; } /* ───────────────────────────────────────────────────────────────────────────── ГОРИЗОНТАЛЬНЫЙ ЗАЗОР МЕЖДУ BLOCK-3.1 и BLOCK-3.2 В critical.css:1867 у .home-main стоит column-gap: 1.5rem — это и есть зазор между колонками. Здесь переопределяем его ТОЛЬКО для BLOCK-3 (на BLOCK-4 не повлияет). Примеры: 1.5rem — по умолчанию, 0.75rem — половина, 0.25rem — узкий зазор, 0 — без зазора (BLOCK-3.1 и BLOCK-3.2 вплотную). */ .home-main--block-3 { /* ════════════════════════════════════════════════════════════════════ ЕДИНСТВЕННЫЙ РЕГУЛЯТОР ВЫСОТЫ СТРОКИ BLOCK-3 (курсы / калькуляторы / Stories) Меняй значение здесь — оно распространится на все 3 колонки строки. ════════════════════════════════════════════════════════════════════ */ --block3-h: 20rem; /* ← ЕДИНСТВЕННАЯ ручка высоты BLOCK-3 (например, 18rem / 22rem / 26rem) */ column-gap: 0rem; /* ← меняй горизонтальный зазор здесь */ } /* ───────────────────────────────────────────────────────────────────────────── ↑↑ ПОДТЯНУТЬ СЕКЦИЮ BLOCK-4 (курсы валют + Stories) К BLOCK-3 ВВЕРХ ↑↑ Между BLOCK-3 и BLOCK-4 зазор складывается из: • padding-bottom: 2rem у BLOCK-3 (общее правило section в critical.css:1585), • padding-top: 2rem у BLOCK-4 (то же правило). Итого ~4rem. Чтобы уменьшить зазор, обнуляем верхний padding и при необходимости тянем секцию вверх отрицательным margin-top. Примеры: margin-top: 0; padding-top: 2rem — без сдвига (по умолчанию), margin-top: 0; padding-top: 0 — экономия 2rem (внутренний отступ), margin-top: -2rem; padding-top: 0 — экономия 4rem (вплотную к BLOCK-3), margin-top: -4rem; padding-top: 0 — заехать на BLOCK-3 на 2rem сверху. ───────────────────────────────────────────────────────────────────────────── */ .section--block-4 { margin-top: 0rem; /* ← тянет ВСЮ секцию вверх (отрицательное — выше) */ padding-top: 1; /* ← обнуляет верхний внутренний отступ секции */ } /* ───────────────────────────────────────────────────────────────────────────── ШИРИНА И ВЫСОТА BLOCK-3.1 — БЛОК КУРСОВ ВАЛЮТ (home-main__item--rates) • flex: 0 0 XX% — ширина блока (20% узкая, 30% средняя, 50% широкая). • height — ЖЁСТКАЯ высота всего блока (заголовок + белая панель). Закомментируй строку, если хочешь, чтобы высота определялась содержимым / соседями по строке. ───────────────────────────────────────────────────────────────────────────── */ .home-main__item.home-main__item--rates { flex: 0 0 20%; /* ← меняй ширину здесь */ min-width: 0; min-height: var(--block3-h, 22rem); /* высоту меняй на .home-main--block-3 → --block3-h */ } /* ↑↑ ПОДНЯТЬ ОБЛАСТЬ КУРСОВ ВАЛЮТ (currency-rates) ВВЕРХ ↑↑ Между заголовком и белой панелью курсов есть зазор от mb-24 у h1 (1.5rem). Уменьшай отрицательное значение margin-top, чтобы поднять панель ближе к заголовку. Примеры: 0 — без сдвига (зазор 1.5rem), -0.75rem — поднять на половину зазора, -1.5rem — вплотную к заголовку, -2rem — заехать под заголовок. */ .home-main__item--rates .cbu-rates-card { margin-top: 0rem; /* ← меняй отступ здесь */ } /* ───────────────────────────────────────────────────────────────────────────── ШИРИНА И ВЫСОТА BLOCK-3.2 — СЕТКА ССЫЛОК (home-main__item--wide) • flex: 0 0 XX% — ширина блока (50% узкая, 70% средняя, 80% по умолчанию). • height — ЖЁСТКАЯ высота всего блока (заголовок + белая панель). Закомментируй строку, если хочешь, чтобы высота определялась содержимым / соседями по строке (тогда плитки не будут обрезаться при добавлении). ───────────────────────────────────────────────────────────────────────────── */ .home-main__item.home-main__item--wide { flex: 1 1 50; /* ← занимает всё свободное место справа от BLOCK-3.1 */ min-width: 0; /* При ширине 25% плитки идут по 1–2 в ряд, и при жёсткой высоте 24rem + overflow: hidden часть плиток (например, grid-product-nine) обрезается. Поэтому используем min-height — блок не короче 24rem, но растёт под контент. Если нужно вернуть жёсткую высоту — поменяй min-height на height и верни overflow: hidden. */ min-height: var(--block3-h, 22rem); /* высоту меняй на .home-main--block-3 → --block3-h */ } /* В critical.css на экранах ≤1280px у .grid-product-container стоит overflow: auto (горизонтальный скролл), а у .grid-product — min-width: 90rem. В узкой колонке BLOCK-3.2 это прячет часть плиток за горизонтальный скролл. Здесь переопределяем — позволяем сетке переноситься по ширине колонки. */ .home-main__item--wide .grid-product-container { overflow: visible !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .home-main__item--wide .grid-product { min-width: 0 !important; } /* ───────────────────────────────────────────────────────────────────────────── СМЕЩЕНИЕ ЗАГОЛОВКА BLOCK-3.2 (fp_calcs_title) ВПРАВО Внутри BLOCK-3.2 заголовок

сидит на уровне .home-main__item--wide, а белая панель — внутри ещё одного
, у которого padding: 0 1.875rem (critical.css:1306). Поэтому h1 виден левее белой области. Выравниваем заголовок по левому краю белой области через padding-left = padding контейнера (1.875rem). Примеры: 0 — без смещения (по умолчанию, h1 у левого края колонки), 1.875rem — выравнивание с левым краем белой панели, 3rem — глубже внутрь от белой панели. */ .home-main__item--wide > h1 { padding-left: 1.875rem; /* ← смещение заголовка BLOCK-3.2 вправо (0 — к левому краю, 1.875rem — вровень с белой панелью, 3rem — глубже внутрь) */ } /* На мобильных вложенный
внутри BLOCK-3.2 не имеет собственного горизонтального padding (он уже растянут страницей), поэтому сдвиг заголовка на 1.875rem делает его «длиннее» соседней колонки. Убираем padding-left на мобильных. */ @media (max-width: 767px) { .home-main__item--wide > h1 { padding-left: 0; } } /* ───────────────────────────────────────────────────────────────────────────── СМЕЩЕНИЕ ЗАГОЛОВКА BLOCK-3.3 (fp_services_title) ВПРАВО Аналогично BLOCK-3.2:

сидит на уровне .home-main__item--carousel, а сама карусель Stories — внутри .web-stories-list с собственным padding: 1rem. Выравниваем заголовок относительно белой панели Stories. Примеры: 0 — без смещения (h1 у левого края колонки), 1rem — вровень с padding-ом панели Stories, 1.875rem — глубже внутрь панели. */ .home-main__item--carousel > h1 { padding-left: 1rem; /* ← смещение заголовка BLOCK-3.3 вправо */ } @media (max-width: 767px) { .home-main__item--carousel > h1 { padding-left: 0; } } /* ↑↑ ПОДНЯТЬ ОБЛАСТЬ СЕТКИ ССЫЛОК (.container > .grid-product-container) ВВЕРХ ↑↑ Между заголовком и белой панелью сетки есть зазор от mb-24 у h1 (1.5rem). Уменьшай отрицательное значение margin-top, чтобы поднять панель ближе к заголовку. Примеры: 0 — без сдвига (зазор 1.5rem), -0.75rem — поднять на половину зазора, -1.5rem — вплотную к заголовку, -2rem — заехать под заголовок. */ .home-main__item--wide > .container { margin-top: 0rem; /* ← меняй отступ здесь */ } .home-main__item--wide .grid-product-container.bg-white { background: #fff; padding: 1rem; border-radius: 1rem !important; /* скруглённые углы белой панели BLOCK-3.2 */ overflow: hidden !important; box-sizing: border-box; min-height: 16.5rem; /* совпадает с .web-stories-list (BLOCK-4.2) */ height: 100%; flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 0; } /* BLOCK-3.2: внутренний .grid-product тоже со скруглением, чтобы дочерние ссылки не «съедали» углы белой панели. */ .home-main__item--wide .grid-product { border-radius: 1rem; /* overflow: hidden убран — плитки 3–6 переносились flex-wrap-ом ниже и обрезались. Сейчас сетка показывает все плитки, скругление углов на белой панели достигается классом .grid-product-container.bg-white у внешнего контейнера. */ /* Высота элементов .grid-product__item должна совпадать с BLOCK-1: в BLOCK-1 grid-template-rows: repeat(2, 1.5fr) растягивает строки по высоте родителя; внутри BLOCK-3.2 родитель жёстко 24rem, поэтому строки получаются непропорционально высокими. Переходим на flex-вёрстку с wrap — плитки получают свой натуральный размер и упаковываются к левому краю белой области. */ display: flex !important; flex-wrap: wrap; gap: .5rem; justify-content: center; /* ← плитки калькуляторов центрируются по горизонтали внутри белой панели */ align-content: flex-start; align-items: flex-start; width: 100%; } /* Сбрасываем grid-area-привязки и фикс. высоту у плиток BLOCK-3.2, чтобы они шли потоком слева направо и не растягивались. */ .home-main__item--wide .grid-product__item { grid-area: auto !important; flex: 0 0 auto; width: 9.375rem; height: auto; min-height: 5.75rem; background: var(--color-D06); /* ← фон плитки = цвет фона сайта (critical.css:131 → #F6F5F4) */ border: 1px solid var(--color-D06); /* ← рамка под цвет фона (чтобы при ховере 1px solid #7001ff не сдвигал размеры) */ /* Картинка сверху, текст снизу: в HTML-разметке порядок (текст, картинка), поэтому используем column-reverse — последний элемент (.grid-product-pic) поднимется на верх, первый (текстовый
) уйдёт вниз. */ display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 0.25rem; text-align: center; /* ← текст по центру по горизонтали */ } /* Дочерний текст-
может растягиваться flex-ом по ширине — выравниваем по центру и его внутренний текст. */ .home-main__item--wide .grid-product__item > div { text-align: center; width: 100%; } /* ───────────────────────────────────────────────────────────────────────────── РАЗМЕР ИКОНКИ внутри плиток BLOCK-3.2 (.home-main__item--wide) Меняй height/width здесь независимо от BLOCK-1.2. Аспект сохраняется через object-fit: contain. */ .home-main__item--wide .grid-product-pic { height: 2rem; /* ← высота иконки в BLOCK-3.2 */ width: 2rem; /* ← ширина иконки в BLOCK-3.2 */ display: flex; align-items: center; justify-content: center; /* В critical.css:1714 у .grid-product-pic стоит position:absolute; bottom:0; right:0 — поэтому картинка вылетает из flex-потока и не реагирует на column-reverse. Возвращаем её в обычный поток внутри плитки BLOCK-3.2. */ position: static; bottom: auto; right: auto; } .home-main__item--wide .grid-product-pic img, .home-main__item--wide .grid-product-pic picture { width: 100%; height: 100%; object-fit: contain; max-width: 100%; max-height: 100%; } /* ───────────────────────────────────────────────────────────────────────────── РАЗМЕР ИКОНКИ внутри плиток BLOCK-1.2 BLOCK-1.2 = .section--block-1 без BLOCK-1.1 (исключаем grid-product-one/two/three). Меняй height/width здесь независимо от BLOCK-3.2. */ .section--block-1 .grid-product__item:not(.grid-product-one):not(.grid-product-two):not(.grid-product-three) .grid-product-pic { height: 7rem; /* ← высота иконки в BLOCK-1.2 */ width: 7rem; /* ← ширина иконки в BLOCK-1.2 */ display: flex; align-items: center; justify-content: center; } .section--block-1 .grid-product__item:not(.grid-product-one):not(.grid-product-two):not(.grid-product-three) .grid-product-pic img, .section--block-1 .grid-product__item:not(.grid-product-one):not(.grid-product-two):not(.grid-product-three) .grid-product-pic picture { width: 100%; height: 100%; object-fit: contain; max-width: 100%; max-height: 100%; } /* ───────────────────────────────────────────────────────────────────────────── ПОДСВЕТКА ПРИ НАВЕДЕНИИ НА ПЛИТКУ ВНУТРИ BLOCK-3.2 и BLOCK-1.2 В critical.css:1673 общий .grid-product__item:hover { filter: brightness(93%) } слегка затемняет плитку. Здесь переопределяем для двух блоков — только меняем цвет текста на фирменный фиолетовый, фон и рамка остаются как в исходном (не-hover) состоянии. */ .home-main__item--wide .grid-product__item:hover, .section--block-1 .grid-product__item:not(.grid-product-one):hover { filter: none; /* отключаем общий brightness(93%) */ color: #7001ff; /* ← цвет текста при наведении */ } /* Явно восстанавливаем исходное поведение для .grid-product-one (BLOCK-1.1 баннер «Получить первый займ»). Перебивает любые правила, которые могут просочиться от соседей по селектору. Параметры — копия из critical.css:1682. */ .section--block-1 .grid-product-one, .section--block-1 .grid-product-one:hover { background: linear-gradient(180deg, #5047d7, #3e3da7); color: var(--color-L100); border: none; } .section--block-1 .grid-product-one:hover { filter: brightness(93%); /* стандартное затемнение из critical.css:1673 */ } @media (max-width: 1024px) { .home-main__item.home-main__item--wide { flex: 1 1 0; min-width: 0; } } /* BLOCK-3.1 / BLOCK-3.2 — равная ВЫСОТА белых областей внутри home-main. home-main уже flex-row с align-items: stretch (по умолчанию) — обе колонки тянутся на одну высоту. Дополнительно тянем .cbu-rates-card на 100% высоты. */ .home-main > .home-main__item { align-self: stretch; } .home-main > .home-main__item .cbu-rates-card { height: 100%; } /* карточка курсов на всю высоту колонки (раньше 70% — оставляло пустоту снизу) */ @media (max-width: 1024px) { /* Карусель и курсы валют остаются на одной строке на любом экране. Карусель занимает всё свободное место, курсы — только свою ширину. */ .home-main__item--carousel { flex: 1 1 0; min-width: 0; } .home-main__item:not(.home-main__item--carousel) { flex: 0 0 auto; min-width: 0; } } /* На мобильных все три колонки BLOCK-3 (rates / wide / carousel) разъезжаются по одной в ряд — иначе Stories с flex: 1 1 0 в строке схлопывается до 0 px и не отображается. */ @media (max-width: 767px) { .home-main--block-3 .home-main__item--rates, .home-main--block-3 .home-main__item--wide, .home-main--block-3 .home-main__item--carousel { flex: 0 0 100% !important; width: 100%; max-width: 100%; } .home-main--block-3 .home-main__item--carousel { height: auto !important; min-height: 24rem; } .home-main--block-3 .home-main__item--rates, .home-main--block-3 .home-main__item--wide { height: auto !important; min-height: 0; } /* ───────────────────────────────────────────────────────────────────── МОБИЛЬНАЯ СЕТКА КАЛЬКУЛЯТОРОВ BLOCK-3.2: 3 ПЛИТКИ В РЯД ───────────────────────────────────────────────────────────────────── На десктопе плитка — фикс. ширины 9.375rem (см. правило выше), и на узком экране в ряд влезает только 2. Здесь принудительно делаем 3 равных колонки от ширины родителя: calc((100% - X) / 3), где X = (3 - 1) × gap = 2 × .5rem = 1rem. ───────────────────────────────────────────────────────────────────── */ /* ↓ Ширина одной плитки в ряду. Меняй знаменатель «3», чтобы получить другое число колонок (2 / 4 / 5). Не забывай пересчитать X = (n-1)×gap. */ .home-main--block-3 .home-main__item--wide .grid-product__item { width: calc((100% - 1rem) / 3); /* ← 3 в ряд */ min-height: 5rem; /* ← минимальная высота плитки на мобильном */ } /* ↓ Размер иконки в плитке на мобильных (на десктопе — 4rem × 4rem, см. правило .home-main__item--wide .grid-product-pic выше). 2.5rem ≈ 40px — комфортно влезает в плитку ~104px шириной. */ .home-main--block-3 .home-main__item--wide .grid-product-pic { height: 2.5rem; /* ← высота иконки на мобильном */ width: 2.5rem; /* ← ширина иконки на мобильном */ } /* ↓ Размер подписи под иконкой. Если узбекские длинные слова (например «Avtokreditlar») переносятся некрасиво — уменьшай до 10–11px или снимай комментарий с overflow-wrap ниже. */ .home-main--block-3 .home-main__item--wide .grid-product__item .size-13 { font-size: 11px; /* ← размер шрифта подписи на мобильном */ line-height: 1.15; } /* .home-main--block-3 .home-main__item--wide .grid-product__item > div { overflow-wrap: break-word; hyphens: auto; } */ } /* ========================================================================== БЛОК КУРСОВ ВАЛЮТ (template-parts/currency-rates.php) ========================================================================== */ .cbu-rates-card { display: flex; flex-direction: column; gap: 8px; height: 70%; box-sizing: border-box; } /* Кнопка «Все валюты» внутри .cbu-rates-card — прижимается к нижнему краю карточки через margin-top: auto (flex-column). */ .cbu-rates-card > .button { margin-top: auto; } /* На мобильных карточка тянется по высоте строки home-main (включая высоту соседних блоков с большим контентом), и margin-top: auto уводит кнопку далеко вниз за визуальные пределы списка курсов. Возвращаем обычный отступ и сбрасываем height у карточки, чтобы она была по содержимому. */ @media (max-width: 767px) { .cbu-rates-card { height: auto !important; } .home-main > .home-main__item .cbu-rates-card { height: auto !important; } .cbu-rates-card > .button { margin-top: 8px !important; } } .cbu-rates__header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .cbu-rates__list { display: flex; flex-direction: column; } .cbu-rates__row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; } .cbu-rates__row:last-child { border-bottom: none; } .cbu-rates__currency { display: flex; align-items: center; gap: 8px; } .cbu-rates__flag { font-size: 1.4rem; line-height: 1; } .cbu-rates__names { display: flex; flex-direction: column; } .cbu-rates__value { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } /* ========================================================================== КАРУСЕЛЬ БЛОКОВ (CPT carousel_block) Количество видимых слайдов задаётся в assets/js/add.js → функция visibleCount(). Ширина каждого слайда вычисляется автоматически на основе ширины контейнера. ========================================================================== */ .section-carousel { /* ───────────────────────────────────────────────────────────────────── Отступ секции карусели сверху и снизу. Измени цифру (px), чтобы увеличить или уменьшить воздушность блока. ───────────────────────────────────────────────────────────────────── */ padding: 0 0; } .carousel-wrap { position: relative; } .carousel-overflow { /* Обрезает слайды, выходящие за видимую область. Не меняй. */ overflow: hidden; } .carousel-track { display: flex; /* ───────────────────────────────────────────────────────────────────── Отступ между слайдами (gap). Если меняешь это значение — измени также запасное значение gap в assets/js/add.js → функция setWidths(), строка: || 16 Оба числа должны совпадать. ───────────────────────────────────────────────────────────────────── */ gap: 16px; transition: transform .35s ease; } .carousel-slide { /* Ширина задаётся через JS (функция setWidths в add.js). Количество слайдов в ряду меняется там же. */ flex: 0 0 auto; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; /* ───────────────────────────────────────────────────────────────────── Внутренние отступы внутри карточки слайда. ───────────────────────────────────────────────────────────────────── */ gap: 16px; padding: 24px; /* ───────────────────────────────────────────────────────────────────── Цвет и толщина рамки карточки. Измени #f0f0f0 на любой hex-цвет, например #d0e8ff — голубая рамка. ───────────────────────────────────────────────────────────────────── */ border: 1.5px solid #f0f0f0; /* ───────────────────────────────────────────────────────────────────── Скругление углов карточки (px). 0 — прямые углы, 16px — текущие скруглённые, 50% — круг. ───────────────────────────────────────────────────────────────────── */ border-radius: 16px; /* ───────────────────────────────────────────────────────────────────── Цвет фона карточки слайда. #fff — белый (как у блока курсов валют). ───────────────────────────────────────────────────────────────────── */ background: #fff; text-decoration: none; color: inherit; transition: border-color .15s; } .carousel-slide:hover { /* Цвет рамки карточки при наведении мыши */ border-color: #ccc; } .carousel-slide__img img { width: 100%; /* ───────────────────────────────────────────────────────────────────── Высота картинки внутри слайда (px). Картинка обрезается до этой высоты (object-fit: cover). Увеличь, если картинки высокие; уменьши, если карусель занимает много места. ───────────────────────────────────────────────────────────────────── */ height: 280px; object-fit: cover; border-radius: 12px; display: block; } .carousel-slide__excerpt { /* Цвет и межстрочный интервал текста-анонса под заголовком слайда */ color: #666; line-height: 1.5; } .carousel-btn { /* Кнопки «‹» и «›» — навигация по слайдам */ position: absolute; top: 50%; transform: translateY(-50%); /* ───────────────────────────────────────────────────────────────────── Размер кнопки (width = height). ───────────────────────────────────────────────────────────────────── */ width: 40px; height: 40px; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: border-color .15s; } .carousel-btn:hover { border-color: #333; } .carousel-btn svg { width: 16px; height: 16px; } /* ───────────────────────────────────────────────────────────────────────────── Положение кнопок «‹» и «›» внутри блока карусели. Положительное значение — кнопка внутри карточек. Отрицательное значение (например -20px) — кнопка выходит за рамку блока. Если карусель стоит в узком контейнере — используй положительные значения. ───────────────────────────────────────────────────────────────────────────── */ .carousel-btn--prev { left: 8px; } .carousel-btn--next { right: 8px; } .carousel-dots { display: flex; justify-content: center; /* ───────────────────────────────────────────────────────────────────── Отступ между точками-индикаторами (px). ───────────────────────────────────────────────────────────────────── */ gap: 6px; margin-top: 16px; } .carousel-dot { /* Неактивная точка — размер и цвет */ width: 6px; height: 6px; border-radius: 50%; background: #ddd; cursor: pointer; border: none; padding: 0; transition: background .15s; } .carousel-dot.is-active { /* Активная точка — более широкая и тёмная. Измени background на нужный цвет акцента. */ background: #333; width: 18px; border-radius: 3px; } /* ========================================================================== СТРАНИЦА ОТДЕЛЬНОГО БЛОКА КАРУСЕЛИ (single-carousel_block.php) Открывается при переходе по ссылке слайда (/services/название/). ========================================================================== */ .carousel-single { /* ───────────────────────────────────────────────────────────────────── Максимальная ширина текста на отдельной странице блока. Уменьши, если текст слишком широкий. ───────────────────────────────────────────────────────────────────── */ padding: 40px 0; max-width: 800px; margin: 0 auto; } .carousel-single__title { margin: 0 0 24px; } .carousel-single__img { margin-bottom: 24px; } .carousel-single__img img { width: 100%; border-radius: 12px; display: block; } .carousel-single__content { /* ───────────────────────────────────────────────────────────────────── Размер и межстрочный интервал основного текста отдельной страницы. ───────────────────────────────────────────────────────────────────── */ font-size: 15px; line-height: 1.7; color: #333; } /* Количество видимых слайдов на разных экранах задаётся в add.js → visibleCount() */ @media (max-width: 560px) { .carousel-slide { padding: 16px; } .carousel-slide__img img { /* Высота картинки на мобильном устройстве */ height: 200px; } .carousel-btn--prev { left: 4px; } .carousel-btn--next { right: 4px; } } /* ── Карточки ипотеки на главной — кнопка прижата к низу ────────────────── */ .credit-item-block > .button { margin-top: auto; } /* ── Адаптив ────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .single-hero-params { grid-template-columns: repeat(2, 1fr); padding: 16px; gap: 12px; } .single-hero-param-value { font-size: 1.25rem; } .single-apply-block { flex-direction: column; align-items: flex-start; } .single-conditions-row { flex-direction: column; align-items: flex-start; gap: 4px; } .single-conditions-value { text-align: left; } } /* ========================================================================== МОДАЛЬНАЯ ФОРМА ЗАЯВКИ (#modal-apply) ========================================================================== */ /* ── Контейнер модала — переопределяем ширину ────────────────────────────── */ .modal-apply-main { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; border-radius: 16px; } /* ── Подзаголовок банк · программа ──────────────────────────────────────── */ .modal-apply-subtitle { margin-top: 4px; font-size: 12px; color: #999; } /* ── Сетка полей ─────────────────────────────────────────────────────────── */ .form-apply { padding: 0 2rem 2rem; } .form-apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .form-apply-field { display: flex; flex-direction: column; gap: 6px; } .form-apply-field--full { grid-column: 1 / -1; } /* ── Метка ───────────────────────────────────────────────────────────────── */ .form-apply-label { font-size: 12px; color: #666; font-weight: 600; } /* ── Инпут ───────────────────────────────────────────────────────────────── */ .form-apply-input { width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid #e0e0e0; border-radius: 8px; font-size: 14px; color: #333; background: #fff; box-sizing: border-box; transition: border-color .15s; outline: none; } .form-apply-input:focus { border-color: #333; } .form-apply-input::placeholder { color: #bbb; } .form-apply-input:invalid:not(:placeholder-shown) { border-color: #e74c3c; } /* ── Honeypot: скрыто визуально и от скринридеров ───────────────────────── */ .form-apply-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── Radio-кнопки (поле "Есть действующие кредиты") ─────────────────────── */ .form-apply-radios { display: flex; gap: 24px; padding: 8px 0; } .form-apply-radio-label { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; } .form-apply-radio-label input[type="radio"] { width: 16px; height: 16px; accent-color: #333; cursor: pointer; flex-shrink: 0; } /* ── Сообщения об успехе / ошибке ────────────────────────────────────────── */ .apply-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; } .apply-msg--success { background: #e8f5e9; color: #2e7d32; } .apply-msg--error { background: #fdecea; color: #c62828; } /* ── Подвал формы ────────────────────────────────────────────────────────── */ .form-apply-footer { display: flex; justify-content: flex-end; gap: 12px; } .form-apply-submit { min-width: 180px; } .form-apply-submit:disabled { opacity: .6; cursor: not-allowed; } /* ── Адаптив ────────────────────────────────────────────────────────────── */ @media (max-width: 560px) { .modal-apply-main { max-height: 100vh; border-radius: 0; } .form-apply-grid { grid-template-columns: 1fr; } .form-apply-field--full { grid-column: 1; } .form-apply-footer { justify-content: stretch; } .form-apply-submit { width: 100%; } } .section-picture { min-height: 18em; /* ← высота баннера, было 31.25rem в critical.css */ } @media (max-width: 991px) { /* ── Горизонтальный скролл как у блока «Часто ищут» (.fast-tag) ───────── display: flex — горизонтальный ряд карточек. overflow: auto — горизонтальный скролл. Отрицательные margin + padding — блок выходит за padding контейнера, создавая эффект edge-to-edge с видимым отступом по краям. Скроллбар скрыт через -webkit-scrollbar: none. Ширина карточки (min-width) задаёт сколько карточек видно одновременно. ──────────────────────────────────────────────────────────────────────── */ .credit-item-blocks { display: flex; flex-wrap: nowrap; overflow: auto; gap: 0.75rem; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; grid-template-columns: unset; } .credit-item-blocks::-webkit-scrollbar { display: none; } .credit-item-block { flex: 0 0 75vw; /* ← ширина карточки: 75% экрана — видно ~1.3 карточки */ min-width: 0; max-width: 280px; } .card-credit { display: flex; flex-wrap: nowrap; overflow: auto; gap: 0.75rem; margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; grid-template-columns: unset; } .card-credit::-webkit-scrollbar { display: none; } .card-credit-item { flex: 0 0 65vw; /* ← ширина карточки: 65% экрана */ min-width: 0; } } /* ───────────────────────────────────────────────────────────────────────────── БЛОКИ КАТЕГОРИЙ АВТОКРЕДИТОВ (front-page.php → секция «Выгодные автокредиты») • Блок имеет ту же ширину/паддинги, что у ипотек (.credit-item-block). • Высоту приравниваем к ипотечным карточкам через min-height. При желании синхронизировать — измеряй .credit-item-block в секции ипотек и подгоняй min-height ниже. • Внутри: заголовок + картинка авто (растягивается по flex:1) + кнопка. • Картинки кладутся в themes/narxtop-theme/images/auto-categories/.webp ───────────────────────────────────────────────────────────────────────────── */ .credit-item-block--auto-cat { min-height: 17rem; /* ← подгоняй под высоту блоков ипотек */ } .credit-item-block--auto-cat .auto-cat-img { display: block; width: 100%; flex: 1 1 auto; min-height: 7rem; object-fit: contain; /* меняй на cover, если нужно «во всё поле» с обрезкой */ object-position: center; border-radius: 0.5rem; } .credit-item-block--auto-cat .auto-cat-img--placeholder { background: linear-gradient(135deg, #f4f5f7 0%, #e6e8ec 100%); border: 1px dashed #d6d9de; } .section-picture::before { background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent); } .section-picture { color: #000; /* ← меняй на нужный цвет */ } /* ───────────────────────────────────────────────────────────────────────────── Логотип банка в карточках .credit-item-block (front-page «Выгодные …»). Глобальное правило `picture { width:100%; justify-content:center }` из critical.css растягивало на всю ширину строки и сдвигало контент к центру. Здесь возвращаем компактный inline-режим — лого слева, рядом имя. ───────────────────────────────────────────────────────────────────────────── */ .credit-item-block-bank { justify-content: flex-start; } .credit-item-block-bank picture { width: 2.25rem; height: 2.25rem; display: inline-flex; flex: 0 0 auto; justify-content: flex-start; align-items: center; margin-right: .625rem; } .credit-item-block-bank picture img { margin-right: 0; /* отступ перенесён на сам */ } /* ───────────────────────────────────────────────────────────────────────────── Hero archive-mortgages.php — ограничиваем контент левой половиной, чтобы текст не заезжал на «домик» в правой части баннера. На мобильных (≤767px) ограничение снимается — баннер уже узкий. ───────────────────────────────────────────────────────────────────────────── */ .section-picture--mortgages .container > *, .section-picture--credits .container > *, .section-picture--auto_credits .container > *, .section-picture--business_credits .container > *, .section-picture--microloans .container > *, .section-picture--deposits .container > *, .section-picture--credit_cards .container > *, .section-picture--internet .container > * { max-width: 50%; } /* Размер описания (archive_desc_*) под заголовком в hero всех архивных страниц */ .section-picture--mortgages .container > p, .section-picture--credits .container > p, .section-picture--auto_credits .container > p, .section-picture--business_credits .container > p, .section-picture--microloans .container > p, .section-picture--deposits .container > p, .section-picture--credit_cards .container > p, .section-picture--internet .container > p { font-size: .825rem; } @media (max-width: 767px) { .section-picture--mortgages .container > *, .section-picture--credits .container > *, .section-picture--auto_credits .container > *, .section-picture--business_credits .container > *, .section-picture--microloans .container > *, .section-picture--deposits .container > *, .section-picture--credit_cards .container > *, .section-picture--internet .container > * { max-width: 100%; } } /* ───────────────────────────────────────────────────────────────────────────── Кнопки «Рассчитать условия» (btn_calc_submit) — везде в теме. Цвет текста + рамка: #7001ff, фон: #eee3fc ───────────────────────────────────────────────────────────────────────────── */ .button-color-border { border: 2px solid #7001ff !important; color: #7001ff !important; background: #eee3fc !important; font-weight: 700; } .button-color-border:hover { background: #ddc8fa !important; /* чуть темнее при наведении */ } .header-submenu__icon { background: none !important; /* убирает серый фон из async.css */ padding: 0 !important; /* убирает внутренний отступ из async.css */ width: auto !important; /* снимает фиксированную ширину из async.css */ height: auto !important; /* снимает фиксированную высоту из async.css */ display: inline-flex; align-items: center; justify-content: center; } .header-submenu__icon img, .header-submenu__icon picture img { width: 40px; /* ← меняй размер здесь */ height: 40px; object-fit: contain; } .fast-tag__icon { background: none !important; /* убирает белый фон из critical.css */ padding: 0 !important; /* убирает внутренний отступ из critical.css */ width: auto !important; height: auto !important; } .fast-tag__icon img, .fast-tag__icon picture img { width: 40px; /* ← меняй размер здесь */ height: 40px; object-fit: contain; } /* ========================================================================== КАРТОЧКИ ИПОТЕКИ В КАЛЬКУЛЯТОРЕ (.offer-banks) В архиве .result-item рассчитан на полную ширину страницы. В калькуляторе колонка ~400–480px — calc(100% - 40.8125rem) даёт отрицательную ширину для .result-item-company, и блок с именем банка/ипотеки схлопывается. Переводим карточку в колоночный режим и снимаем фиксированные ширины. ========================================================================== */ .offer-banks .result-item { flex-direction: column; align-items: stretch; gap: 1rem; } .offer-banks .result-item-company, .offer-banks .result-item-info, .offer-banks .result-item-button { width: 100%; } .offer-banks .result-item-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; white-space: normal; } /* ========================================================================== КАРТОЧКИ ЛИСТИНГОВ — раскладка company / info / button (десктоп ≥1024px) -------------------------------------------------------------------------- Возвращаемся к прежней компоновке (чтобы кнопка не уезжала на новую строку): .result-item-company → фикс. ширина по типу карточки (flex-shrink: 0). .result-item-info → flex: 1 (растягивается на оставшееся место). .result-item-button → 21rem фикс (см. блок ниже). Чтобы блок Параметры визуально был ближе к кнопке, на info добавлен justify-content: flex-end — это сдвигает содержимое к правому краю контейнера, БЕЗ изменения ширин (строка остаётся одной). Меняй цифру в width на *.result-item-company — ширина блока банка. Мобильные ≤1023px — всё в столбик 100% (медиа-запрос внизу секции). ========================================================================== */ .result-item--credit .result-item-company { width: 18rem; flex-shrink: 0; } .result-item--credit .result-item-info { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; } .result-item--credit-card .result-item-company { width: 18rem; flex-shrink: 0; } .result-item--credit-card .result-item-info { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; } .result-item--mortgage .result-item-company { width: 19rem; flex-shrink: 0; } .result-item--mortgage .result-item-info { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; } .result-item--auto-credit .result-item-company { width: 18rem; flex-shrink: 0; } .result-item--auto-credit .result-item-info { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; } .result-item--business-credit .result-item-company { width: 18rem; flex-shrink: 0; } .result-item--business-credit .result-item-info { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; } .result-item--deposit .result-item-company { width: 18rem; flex-shrink: 0; } .result-item--deposit .result-item-info { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; } .result-item--microloan .result-item-company { width: 18rem; flex-shrink: 0; } .result-item--microloan .result-item-info { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; } .result-item--internet .result-item-company { width: 18rem; flex-shrink: 0; } .result-item--internet .result-item-info { flex: 1; width: auto; justify-content: flex-end; padding-right: 1.25rem; } /* Десктоп: у интернет-карточек значения длиннее (сегмент/технология/цена) — без ужатия блок параметров перерастал ширину и выталкивал кнопку «Оставить заявку» на новую строку (влево). Разрешаем блоку ужиматься и переносить значения — кнопка жёстко остаётся справа на той же строке. */ @media (min-width: 1024px) { .result-item--internet .result-item-info { min-width: 0; flex-wrap: wrap; white-space: normal; row-gap: .25rem; } .result-item--internet .result-item-info .offer-bank-pay { white-space: normal; } } /* ── Шрифт имени банка в карточке — чуть меньше, чтобы помещались длинные имена ── Базовый класс size-16 (=1rem) в шаблоне; здесь точечно уменьшаем только заголовок в .result-item-company. Меняй font-size, если нужно ещё меньше. */ .result-item-company .offer-bank-name-title { font-size: 0.875rem; /* 14px (было 16px) */ } /* ── Мобильные ≤1023px — все блоки на всю ширину, флексы сбрасываются ───── */ @media (max-width: 1023px) { .result-item--credit .result-item-company, .result-item--credit .result-item-info, .result-item--credit-card .result-item-company, .result-item--credit-card .result-item-info, .result-item--mortgage .result-item-company, .result-item--mortgage .result-item-info, .result-item--auto-credit .result-item-company, .result-item--auto-credit .result-item-info, .result-item--business-credit .result-item-company, .result-item--business-credit .result-item-info, .result-item--deposit .result-item-company, .result-item--deposit .result-item-info, .result-item--microloan .result-item-company, .result-item--microloan .result-item-info, .result-item--internet .result-item-company, .result-item--internet .result-item-info { width: 100%; min-width: 0; flex: none; } } /* ========================================================================== КНОПКИ «ОТПРАВИТЬ ЗАЯВКУ» В КАРТОЧКАХ ЛИСТИНГОВ — шире (≈2.2×) База .result-item-button — 9.5625rem (critical.css). Расширяем до 21rem и растягиваем сам .button на всю ширину контейнера. Блок параметров (.result-item-info) у всех типов карточек стоит flex:1, поэтому он просто ужмётся — общая вёрстка остаётся сбалансированной. Применяется ко всем типам карточек, включая кредитные карты. На мобильных (≤1023px) кнопки и так на 100% — правило только для десктопа. ── меняй число в width (rem) ────────────────────────────────────────────── */ @media (min-width: 1024px) { .result-item .result-item-button { width: 21rem; /* ← меняй здесь */ } .result-item .result-item-button .button { width: 100%; } } /* ── Калькулятор: однаколоночный layout на всю ширину ────────────────────── */ .calculator-flex { display: flex; flex-direction: column; } /* ── Список предложений в калькуляторе: фон как у страницы, зазор виден ──── */ #calc-offers { background: var(--color-D06); border-radius: .5rem; padding: .5rem; margin-top: 0; } /* ── Горизонтальные ряды внутри левой колонки ────────────────────────────── */ .calc-row { display: flex; gap: 1rem; align-items: flex-start; } .calc-row > .form-item { flex: 1; min-width: 0; } @media (max-width: 575px) { .calc-row { flex-direction: column; } } /* ========================================================================== JOURNAL — карточка материала с обложкой как фон всего блока Используется в: front-page.php, archive-journal.php, taxonomy-journal_rubric.php Активируется модификатором .material--has-pic, который ставится при наличии thumbnail. ========================================================================== */ /* Карточка статьи с превью-картинкой: КАРТИНКА В ВЕРХНЕЙ ПОЛОВИНЕ карточки, ТЕКСТ В НИЖНЕЙ. Прежний оверлей (картинка на всю карту + белый текст поверх) убран — теперь обычная двухсекционная карта на белом фоне. ── меняй здесь, если нужно изменить пропорции или высоту карточки ────────── */ .material--has-pic { position: relative; min-height: 18rem; /* общая высота карточки; половина уйдёт под картинку */ overflow: hidden; isolation: isolate; } .material--has-pic .material-pic { flex: 0 0 50%; /* верхняя половина карточки */ width: 100%; height: 50%; padding: 0; overflow: hidden; position: relative; } .material--has-pic .material-pic picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .5s ease; } .material--has-pic .material-pic img { width: 100%; height: 100%; object-fit: cover; } .material--has-pic .material-content { flex: 1 1 50%; /* нижняя половина — обычная белая, без оверлея */ padding: 1rem 1.25rem 1.25rem; } .material--has-pic:hover .material-pic picture { transform: scale(1.08); } /* ───────────────────────────────────────────────────────────────────────────── Цвета активных кнопок-чекбоксов в фильтрах разделов (Тип недвижимости в archive-mortgages.php, Категории + Онлайн в archive-auto_credits.php, Платёжные системы + Льготный период + Онлайн в archive-credit_cards.php и т.п.). Базовый стиль задан в critical.css → .form-radio input:checked+.form-radio-label и .form-radio-label.is-active. Здесь полностью переопределяем цвета. ───────────────────────────────────────────────────────────────────────────── */ .form-radio input:checked + .form-radio-label, .form-radio-label.is-active { color: #7001ff; border-color: #7001ff !important; background-color: #eee3fc !important; } /* ───────────────────────────────────────────────────────────────────────────── Hover для всех текстовых ссылок (не-кнопок). `:not([class*="button"])` исключает .button, .button-black, .button-bg, .button-color-border, .button-blue-border, .button-black-border, .button-border и т.п. — у этих классов свой hover. Дополнительно явно перекрываем ранее заданные hover-правила (.search-menu__items a:hover, .link-blue:hover) чтобы цвет был единый. ───────────────────────────────────────────────────────────────────────────── */ a:not([class*="button"]):hover, .search-menu__items a:hover, .link-blue:hover, .header-menu__link:hover, .header-submenu__link:hover { color: #7001ff; } /* ───────────────────────────────────────────────────────────────────────────── Кнопки .button-blue-border (Все валюты, Посмотреть все карты, Посмотреть все ипотеки, Посмотреть все автокредиты и др.) — оформляем как активные кнопки-чекбоксы фильтров: текст и рамка #7001ff, фон #eee3fc. ───────────────────────────────────────────────────────────────────────────── */ .button-blue-border { color: #7001ff !important; border: 1px solid #7001ff !important; background: #eee3fc !important; } .button-blue-border:hover { color: #7001ff !important; border-color: #7001ff !important; background: #ddc8fa !important; /* чуть темнее при наведении */ } /* ───────────────────────────────────────────────────────────────────────────── Карточки списков продуктов в архивах (.result-item-block) — тонкая рамка зелёного цвета (из логотипа) при наведении. Используется в archive-{mortgages,credits,auto_credits,business_credits, microloans,deposits,credit_cards,banks}.php и связанных AJAX-рендерах. ───────────────────────────────────────────────────────────────────────────── */ .result-item-block { border: 1px solid transparent; transition: border-color .15s ease; } .result-item-block:hover { border-color: #8DE61F; } /* ───────────────────────────────────────────────────────────────────────────── Иконка рубрики Журнала (слева от названия) — в блоке тегов на главной и в меню «Часто ищут». Перекрываем глобальное `picture { width:100%; ... }`, чтобы картинка была компактного размера и не растягивалась. ───────────────────────────────────────────────────────────────────────────── */ .fast-tag__pic, .search-menu__pic { display: inline-flex; align-items: center; flex: 0 0 auto; /* ↓↓ ОТСТУП МЕЖДУ ИКОНКОЙ И ТЕКСТОМ РУБРИКИ — меняй здесь ↓↓ */ margin-right: -1rem; /* ↑↑ ОТСТУП ↑↑ */ vertical-align: middle; } .fast-tag__pic picture, .search-menu__pic picture { /* ↓↓ РАЗМЕР ИКОНКИ РУБРИКИ ЖУРНАЛА — меняй здесь ↓↓ Используется на главной (.fast-tag и .search-menu) и в archive-journal.php (страница /journal/). Чем больше — тем крупнее иконка слева от названия. */ width: 3rem; height: 3rem; /* ↑↑ РАЗМЕР ИКОНКИ ↑↑ */ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .fast-tag__pic img, .search-menu__pic img { width: 100%; height: 100%; object-fit: contain; display: block; } /* ───────────────────────────────────────────────────────────────────────────── ЧИПЫ РУБРИК ЖУРНАЛА в ленте .fast-tag (front-page.php + archive-journal.php). Жёсткий горизонтальный лейаут на всех ширинах: [иконка][название] в одну строку, без переносов. Базовые правила (display:flex, align-items:center, gap:.75rem) — из critical.css; здесь только запрет переноса и скрытие стрелки. .search-menu (другая лента) НЕ затрагивается. ───────────────────────────────────────────────────────────────────────────── */ .fast-tag .fast-tag__item { white-space: nowrap; /* текст рубрики не переносится — иконка и текст в один ряд */ } .fast-tag .fast-tag__icon { display: none; /* стрелка в чипе не нужна */ } /* ───────────────────────────────────────────────────────────────────────────── Карточка кредитной карты в archive-credit_cards.php — вместо лого банка показываем картинку самой банковской карты (card_photo_png/webp). Размер задаём программно: ширина чуть больше иконки лого (80px), пропорция карточки 16:10, чтобы не увеличивать высоту строки в карточке-обёртке. ───────────────────────────────────────────────────────────────────────────── */ .result-item--credit-card .offer-bank-name-avatar { width: 5rem; /* ~80px — компактно, не ломает существующую сетку */ flex-shrink: 0; } .result-item--credit-card .offer-bank-name-avatar .cc-card-photo { display: block; width: 100%; aspect-ratio: 16 / 10; /* перекрываем глобальное правило `picture { width:100%; height:100% }` */ height: auto; } .result-item--credit-card .offer-bank-name-avatar .cc-card-photo img { width: 100%; height: 100%; object-fit: contain; border-radius: .375rem; } /* ============================================================================= ЛОГОТИПЫ ИНТЕРНЕТ-ПРОВАЙДЕРОВ (internet-companies / internet-providers). Файлы лежат в images/internet-logos/full-logos (большие), а базовый .offer-bank-name-avatar на десктопе без ширины + глобальное правило picture{width:100%;height:100%} → логотип раздувается. Ограничиваем размер, как у фото кредитных карт (object-fit: contain). ───────────────────────────────────────────────────────────────────────── */ .result-item--internet .offer-bank-name-avatar, .result-item--internet-company .offer-bank-name-avatar, .offer-bank-name-avatar--internet { width: 5rem; flex-shrink: 0; } .result-item--internet .offer-bank-name-avatar picture, .result-item--internet-company .offer-bank-name-avatar picture, .offer-bank-name-avatar--internet picture { display: block; width: 100%; height: auto; /* перекрываем глобальное picture{height:100%} */ aspect-ratio: 16 / 10; } .result-item--internet .offer-bank-name-avatar img, .result-item--internet-company .offer-bank-name-avatar img, .offer-bank-name-avatar--internet img { width: 100%; height: 100%; object-fit: contain; border-radius: .375rem; } /* Карточка интернет-компании без кнопки справа: блок компании занимает место, которое базовый calc(100% - 40.8125rem) резервировал под кнопку. Параметры (.result-item-info, базовые 31.25rem) остаются справа. */ @media (min-width: 1024px) { .result-item--internet-company .result-item-company { width: calc(100% - 31.25rem); } } /* ========================================================================== ТЭГИ В КАРТОЧКЕ ИПОТЕКИ (template-parts/mortgage-card.php) Поля tn1/tn2/tn3 под текущий язык. Без лейблов, разделитель — точка-разделитель. Основная карточка: тэги внутри .result-item-trigger, на одной строке с кнопкой «Ещё N предложений». margin-right:auto прижимает тэги влево, кнопка остаётся справа (родитель уже flex с justify-content: flex-end). Sibling-карточки (доп. предложения банка): триггера нет, тэги выводим на отдельной строке через модификатор .result-item-tags--standalone. ========================================================================== */ .result-item-tags { display: flex; flex-wrap: wrap; gap: .5rem; line-height: 1.4; } .result-item-trigger .result-item-tags { margin-right: auto; } .result-item-tags--standalone { width: 100%; margin-top: .5rem; } /* ========================================================================== ЧИПЫ tn1/tn2/tn3 В КАРТОЧКАХ ЛИСТИНГОВ — ВИЗУАЛЬНЫЙ ВИД -------------------------------------------------------------------------- Это «место для редактирования внешнего вида» чипов. Парный модуль (логика, верхний регистр, чтение meta) — функция narxtop_render_tn_tags() в functions.php. Там же — шапка модуля с описанием всей схемы. Что менять здесь: • Фон чипа → background-color • Скругление углов → border-radius • Размер «серого поля» → padding (vert hor) • Перенос строк → white-space (nowrap / normal) Расстояние МЕЖДУ чипами и перенос на новую строку — задаются у контейнера .result-item-tags выше (display:flex; flex-wrap; gap). ========================================================================== */ .result-item-tag { display: inline-block; padding: .375rem .75rem; /* «серое поле» вокруг текста */ background-color: #f0f0f0; /* фон чипа */ border-radius: .5rem; /* скругление углов */ line-height: 1.2; white-space: nowrap; } /* ────────────────────────────────────────────────────────────────────────── КОНТЕНТ ЖУРНАЛА (.single-content) Слой 3 варианта C (см. /inc/journal-content/). Контент копируется из Word/Outlook и приходит с инлайн-стилями (цвета, жирность, выравнивание). Эти правила НЕ ИСПОЛЬЗУЮТ !important — инлайн побеждает наши дефолты, а наши дефолты заполняют пробелы там, где Word ничего не задал (рамки таблиц, буллиты у списков, отступы). Класс .single-content задан на обёртке в single-journal.php. ────────────────────────────────────────────────────────────────────────── */ /* ── Таблицы: всегда видимые рамки ───────────────────────────────────────── Word ставит на атрибут border="1", но НЕ задаёт border-style на каждой ячейке. Современные браузеры в этом случае рисуют рамку только у самой таблицы, без сетки. Эти правила восстанавливают сетку. */ .single-content table { border-collapse: collapse; margin: 1em 0; max-width: 100%; } .single-content table td, .single-content table th { border: 1px solid #d0d0d0; padding: .5em .75em; vertical-align: top; } .single-content table th { background: #f6f6f6; font-weight: 700; text-align: left; } /* ── Списки ──────────────────────────────────────────────────────────────── TinyMCE-плагин paste конвертирует Word-«лже-списки» в