/* * Общий тулкит для редизайна статичных страниц (contacts, for-business и далее). * Токены повторяют фирменные цвета/шрифт сайта (см. index.css .btn/.container) — * ничего нового не вводится, только переиспользуемые компонентные классы поверх. * * Подключать точечно через Asset::getInstance()->addCss() на редизайненных * страницах, не глобально в header.php. */ /* Токены раньше висели на .rb-page, а не :root — но футер (recently-viewed, subscribe-block и т.п., include/blocks/catalog/recently-viewed.php) рендерится в footer.php ПОСЛЕ того, как закрывает .rb-page (см. index.php любой редизайн-страницы), т.е. является её СОСЕДОМ, а не потомком — переменные до него не докидывались (getComputedStyle показывал пустую строку), border/тон-фон у карточек в футере пропадали молча, без ошибки в консоли. :root решает это раз и навсегда, ничего не "утекает" на нередизайненные страницы — сам файл pages-motion.css как был, так и остаётся точечным include (Asset::addCss). */ :root { --rb-accent: #ef713b; --rb-accent-deep: #d85f2b; --rb-navy: #184076; --rb-navy-deep: #0e2c56; --rb-ink: #0a0a0b; --rb-muted: #6b6b6b; --rb-border: #e5e5e6; --rb-surface: #f6f7fa; --rb-tint-blue: #eaf1fb; --rb-tint-orange: #fdede2; --rb-tint-grey: #f1f2f4; --rb-tint-navy: #e7ecf5; } /* ---------- Hero ---------- * Светлая площадка (не тёмная коробка) с крупной уверенной типографикой — * дух ближе к современным продуктовым лендингам: щедрое скругление, лёгкие * тени, "плавающая" метка-чип, а справа — большая bento-плашка с цифрой * (как спецификация оборудования), не мелкий список тэгов. Внутри плашки — * единственный прямой цитата бренда: протекторная полоса конвейерной ленты * в нижнем углу, маленькая и не доминирующая. Заголовок/лид/CTA/цифры * появляются каскадом друг за другом (.rb-hero__main — rb-reveal-group). */ .rb-hero { display: flex; align-items: center; gap: 48px; margin-top: 16px; padding: 56px; border-radius: 28px; background: var(--rb-surface); color: var(--rb-ink); overflow: hidden; position: relative; } .rb-hero--light { background: #fff; border: 1px solid var(--rb-border); } /* .catlist (docs/section.php — сетка PDF-документов раздела) идёт сразу после hero без своего отступа сверху (только margin-bottom). */ .rb-page .catlist { margin-top: 40px; } /* .rb-hero не имеет margin-bottom (только margin-top) — если сразу после него идёт .rb-content-card (напр. /consent/), они слипаются. */ .rb-hero + .rb-content-card { margin-top: 40px; } .rb-hero--light .rb-hero__lead { color: var(--rb-muted); } /* ---------- Hero with photo background (organizations/suppliers-style) ---------- */ .rb-hero--image { background-image: linear-gradient(100deg, rgba(14, 44, 86, .94) 0%, rgba(14, 44, 86, .82) 38%, rgba(14, 44, 86, .35) 68%, rgba(14, 44, 86, .1) 100%), var(--rb-hero-image); background-size: cover; background-position: right center; color: #fff; } .rb-hero--image .rb-hero__title { color: #fff; } .rb-hero--image .rb-hero__lead { color: rgba(255, 255, 255, .82); } .rb-hero--image .rb-hero__lead strong { color: #fff; } /* ---------- Hero, фирменный оранжевый фон (/about/) ---------- */ .rb-hero--orange { background: linear-gradient(135deg, var(--rb-accent) 0%, var(--rb-accent-deep) 100%); color: #fff; } .rb-hero--orange .rb-hero__title { color: #fff; } .rb-hero--orange .rb-hero__lead { color: rgba(255, 255, 255, .85); } .rb-hero--orange .rb-hero__lead strong { color: #fff; } /* ---------- Inline stats (hero photo variant) ---------- * На фото-варианте плашки статистики справа сливались со снимком — * инлайн-статы сидят в текстовой колонке, на сплошной navy-заливке, * между лидом и кнопкой. */ .rb-hero__stats-inline { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 4px 0 30px; } .rb-stat-inline b, .rb-hero__stats-inline .rb-counter { display: block; font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; } .rb-stat-inline span { display: block; margin-top: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .68); } .rb-hero__main { position: relative; flex: 1 1 auto; min-width: 0; } .rb-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--rb-ink); background: #fff; padding: 9px 16px 9px 12px; border-radius: 999px; box-shadow: 0 6px 18px -4px rgba(10, 10, 11, .12); margin-bottom: 26px; } .rb-hero__eyebrow:before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--rb-accent); } .rb-hero--light .rb-hero__eyebrow { box-shadow: none; border: 1px solid var(--rb-border); } .rb-hero__title { margin: 0 0 18px; color: var(--rb-ink); font-size: clamp(32px, 3.6vw, 50px); font-weight: 600; line-height: 1.04; letter-spacing: -.015em; } .rb-hero__lead { font-size: 17px; line-height: 1.65; color: var(--rb-muted); max-width: 560px; margin: 0 0 32px; } .rb-hero__lead strong { color: var(--rb-ink); font-weight: 600; } .rb-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; } .rb-hero__actions .btn { border-radius: 10px; box-shadow: 0 14px 26px -8px rgba(239, 113, 59, .45); transition: transform .18s ease, box-shadow .18s ease; } .rb-hero__actions .btn:hover { /* глобальный a:hover{color:#ef713b} (index.css) иначе перебивает белый текст .btn-default на hover — оранжевый текст на синей кнопке. */ color: #fff; transform: translateY(-2px); box-shadow: 0 18px 32px -6px rgba(239, 113, 59, .55); } .rb-hero__actions .btn.orange:after { content: "→"; display: inline-block; margin-left: 10px; transition: transform .18s ease; } .rb-hero__actions .btn.orange:hover:after { transform: translateX(4px); } .rb-hero__aside { position: relative; flex: 0 0 300px; } /* Произвольный блок (напр. реквизиты компании) под цифрами в hero-аside — .rb-card уже задаёт свой вид, тут только отступ от .rb-stats сверху. */ .rb-hero__requisites { margin-top: 16px; } .rb-hero__requisites:first-child { margin-top: 0; } /* Виджет "За честный бизнес" (сторонний, стили подключает сам zchb-widget.js) — в карточке реквизитов крупнее, чем дефолтные 42px, иначе теряется рядом с текстом. */ .rb-hero__requisites .zchbWidgetIcon2 { transform: scale(1.4); } /* rbHero['equalActions'] — обе кнопки в rb-hero__actions одной ширины (по самой широкой), а не каждая по своему тексту. Только на десктопе — на мобиле/планшете кнопки и так переносятся в колонку через flex-wrap (см. .rb-hero__actions ниже), grid здесь сломал бы этот перенос на узких экранах. */ @media (min-width: 1024px) { .rb-hero__actions-group--equal { display: inline-flex; flex-direction: column; align-items: stretch; width: fit-content; } .rb-hero__actions-group--equal .rb-hero__actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .rb-hero__actions-group--equal .rb-hero__actions .btn { justify-content: center; text-align: center; } } /* rbHero['inlineStats'] (без фото-варианта) — карточки .rb-stat в главной колонке вместо aside (цифры под/над кнопками). На ≤1023px .rb-hero и так становится колонкой, а .rb-stats уже имеет свои брейкпоинты (repeat(3,1fr) на планшете, 1fr на мобиле) — они применяются к .rb-hero__stats-main точно так же, как раньше применялись в aside, так что мобилка/планшетка не меняются. Только на десктопе (где раньше .rb-stats был в узком aside 300px) даём отдельный вид — компактный ряд, ширина которого совпадает с шириной ряда кнопок (rb-hero__actions-group шринкается по самому широкому ребёнку, stats растягивается на 100% этой ширины), а не подобрана на глаз. */ .rb-hero__stats-main { margin-top: 22px; } @media (min-width: 1024px) { .rb-hero__stats-main { grid-template-columns: repeat(2, 1fr); } .rb-hero__actions-group:has(.rb-hero__stats-main) { display: inline-flex; flex-direction: column; align-items: stretch; width: fit-content; } .rb-hero__actions-group:has(.rb-hero__stats-main) .rb-hero__stats-main { width: 100%; } } /* Кнопки "Скачать"/"Печать" под схемой проезда (contacts) */ .contacts__schema-actions { display: flex; gap: 12px; width: 100%; margin-top: 16px; } .rb-action-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--rb-border); background: #fff; color: var(--rb-ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .rb-action-btn svg { flex: none; color: var(--rb-muted); transition: color .18s ease; } .rb-action-btn:hover { color: var(--rb-ink); background: var(--rb-tint-grey); transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(10, 10, 11, .3); } .rb-action-btn:hover svg { color: var(--rb-accent); } /* ---------- Stat bento cards ---------- */ .rb-stats { display: grid; gap: 16px; } /* Горизонтальный ряд из 4 карточек — вынесенный "N в цифрах" блок вне hero (напр. suppliers), а не узкая колонка-аside внутри баннера. */ .rb-stats.rb-stats--row { grid-template-columns: repeat(4, 1fr); } .rb-stats--row .rb-stat__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); color: #fff; margin-bottom: 16px; } .rb-stats--row .rb-stat__icon svg { width: 20px; height: 20px; } @media (max-width: 640px) { .rb-stats.rb-stats--row { grid-template-columns: repeat(2, 1fr); } .rb-stats--row .rb-stat b, .rb-stats--row .rb-stat .rb-counter { font-size: 28px; white-space: nowrap; } .rb-stats--row .rb-stat { padding: 20px 18px 18px; } } .rb-stat { position: relative; background: var(--rb-navy); color: #fff; border-radius: 22px; padding: 24px 26px 20px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .rb-stat:nth-child(2n) { background: var(--rb-ink); } .rb-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 32px -14px rgba(10, 10, 11, .35); } .rb-stat b, .rb-counter { display: block; font-size: 36px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; } .rb-stat span { display: block; margin-top: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255, 255, 255, .6); } /* ---------- Step overview grid (how-to-buy / invoice-help) ---------- * Была ровная сетка одноцветных серых плашек — переводим на bento-тонировку * в три оттенка бренда, крупнее скругление, лёгкий подъём при наведении. */ .rb-page .invoice-help__grid-item { border-radius: 20px; transition: transform .2s ease, box-shadow .2s ease; } .rb-page .invoice-help__grid-item:nth-child(3n+1) { background: var(--rb-tint-blue); } .rb-page .invoice-help__grid-item:nth-child(3n+2) { background: var(--rb-tint-orange); } .rb-page .invoice-help__grid-item:nth-child(3n+3) { background: var(--rb-tint-grey); } .rb-page .invoice-help__grid-item:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(10, 10, 11, .3); } /* ---------- Screenshot framing (how-to-buy / invoice-help) ---------- * Раньше — голые впритык друг к другу без всякой рамки. * Оборачиваем в лёгкую "витрину": скругление, тонкая рамка, мягкая тень. */ .rb-page .invoice-help__image img { border-radius: 16px; border: 1px solid var(--rb-border); box-shadow: 0 20px 44px -28px rgba(10, 10, 11, .35); } /* ---------- Delivery page: способы оплаты / ТК / таблица / инструкция ---------- * Ниже hero весь контент оставался нетронутым плоским серым — исправляем * весь блок, не только заголовок страницы. */ .rb-page .delivery__payment .delivery-group { border-radius: 20px; padding: 28px !important; transition: transform .2s ease, box-shadow .2s ease; } .rb-page .delivery__payment .delivery-group:nth-child(3n+1) { background: var(--rb-tint-blue); } .rb-page .delivery__payment .delivery-group:nth-child(3n+2) { background: var(--rb-tint-orange); } .rb-page .delivery__payment .delivery-group:nth-child(3n+3) { background: var(--rb-tint-grey); } .rb-page .delivery__payment .delivery-group:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(10, 10, 11, .28); } .rb-page .delivery-image { background-color: #fff; box-shadow: 0 4px 14px -6px rgba(10, 10, 11, .12); } .rb-page .flex-grid .tc { border-radius: 20px; transition: transform .2s ease, box-shadow .2s ease; } .rb-page .flex-grid .col:nth-child(4n+1) .tc { background: var(--rb-tint-blue); } .rb-page .flex-grid .col:nth-child(4n+2) .tc { background: var(--rb-tint-orange); } .rb-page .flex-grid .col:nth-child(4n+3) .tc { background: var(--rb-tint-grey); } .rb-page .flex-grid .col:nth-child(4n+4) .tc { background: var(--rb-tint-navy); } .rb-page .flex-grid .tc:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(10, 10, 11, .28); } .rb-page .deliver-area { border-radius: 0 20px 20px 0; } .rb-page .rulestable { border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--rb-border); } .rb-page .rulestable th { background: var(--rb-navy); color: #fff; font-weight: 600; } .rb-page .rulestable tr:nth-child(even) td { background: var(--rb-tint-grey); } .rb-page .delivery-info-1 { background: var(--rb-tint-grey); border-radius: 20px; padding: 32px 36px; } /* ---------- Contacts page (.contacts__main full-width) ---------- * .contacts__menu (bitrix:menu-сайдбар) убран из разметки по просьбе * пользователя — .contacts__info растягиваем на всю ширину, .contacts__main * (flex:1 1 auto, единственный ребёнок) заполняет её целиком. */ .rb-page .contacts__info { /* index.css: flex:0 0 75% (66.6% на планшете) — расчёт под старый position:absolute сайдбар-меню, которого больше нет в разметке. */ flex: 0 0 100% !important; max-width: 100% !important; display: flex; align-items: stretch; } .rb-page .contacts__info .contacts__main { flex: 1 1 auto; min-width: 0; margin-bottom: 0; } @media (max-width: 1023px) { /* index.css переключает .contacts__main на flex-direction:column тут же, но .contacts__main__content/__tech остаются с "flex:0 0 100%" — на десктопе это ширина, а в колонке то же свойство читается как высота (100% от auto- контейнера), из-за чего второй блок схлопывается и наезжает на секцию ниже. */ .rb-page .contacts__main__content, .rb-page .contacts__main__tech { flex: 1 1 auto; width: 100%; } } /* ---------- News/media/promotions list cards (news.universal) ---------- * Базовый .entry__item используется ещё в video.reviews/our.works/articles — * трогать его напрямую нельзя, поэтому вся новая стилистика в отдельном * классе .rb-news-card, добавленном только в news.universal/template.php. */ .rb-news-card { border-radius: 14px !important; transition: transform .2s ease, box-shadow .2s ease; } .rb-news-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(10, 10, 11, .28); } .rb-news-card__date { margin-top: 14px; font-size: 13px; color: var(--rb-muted, #6b6b6b); } .rb-news-card .entry__title { margin-top: 6px; font-weight: 600; } .rb-news-card__link { display: inline-flex !important; align-items: center; gap: 8px; color: var(--rb-accent, #ef713b) !important; font-weight: 600; } .rb-news-card__link svg { flex: none; transition: transform .15s ease; } .rb-news-card__link:hover svg { transform: translateX(4px); } /* ---------- Section heading ---------- */ .rb-section { margin-top: 64px; } /* Когда rb-section висит на том же узле, что и .container (напр. suppliers) — margin:0 auto у .container той же специфичности перебивает margin-top. */ .rb-page .container.rb-section { margin-top: 64px; } .rb-section__head { max-width: 640px; margin-bottom: 28px; } .rb-section h2 { margin: 0 0 8px; } .rb-section__head p { color: var(--rb-muted); margin: 0; width: auto; } /* ---------- Card grid ---------- */ .rb-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rb-cards--2 { grid-template-columns: repeat(2, 1fr); } .rb-cards--4 { grid-template-columns: repeat(4, 1fr); } .rb-card { padding: 26px; border: 1px solid var(--rb-border); border-radius: 20px; background: var(--rb-tint-grey); transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease; } .rb-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -22px rgba(10, 10, 11, .28); background: #fff; } .rb-cards--tint .rb-card:nth-child(3n+1) { background: var(--rb-tint-blue); } .rb-cards--tint .rb-card:nth-child(3n+2) { background: var(--rb-tint-orange); } .rb-cards--tint .rb-card:nth-child(3n+3) { background: var(--rb-tint-grey); } .rb-cards--tint .rb-card:hover { background: #fff; } .rb-card__icon { width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--rb-navy); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 6px 14px -6px rgba(10, 10, 11, .15); } .rb-card__icon svg { width: 22px; height: 22px; } .rb-card__title { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--rb-ink); } .rb-card__text { font-size: 14.5px; line-height: 1.5; color: var(--rb-muted); margin: 0; } .rb-card__icon-img { display: block; width: 48px; height: 48px; margin-bottom: 16px; } /* ---------- Category tile (catalog.section.list "organizations" template) ---------- */ .rb-card--cat { display: flex; flex-direction: column; padding: 0; overflow: hidden; background: #fff; color: inherit; text-decoration: none; } .rb-card--cat:hover { background: #fff; } .rb-card--cat__image { display: flex; align-items: center; justify-content: center; height: 170px; background: var(--rb-tint-grey); padding: 16px; } .rb-card--cat__image img { max-width: 100%; max-height: 100%; object-fit: scale-down; } .rb-card--cat__name { padding: 14px 18px; text-align: center; font-weight: 600; font-size: 14.5px; color: var(--rb-ink); border-top: 1px solid var(--rb-border); transition: color .15s ease; } .rb-card--cat:hover .rb-card--cat__name { color: var(--rb-accent-deep); } /* Плитка категорий — раньше был горизонтальный скролл (rb-scroll-row), теперь grid-auto-flow:column раскладывает карточки по столбцам фиксированного числа строк (2 на десктопе, 3 на планшете), 1fr-столбцы всегда влезают в ширину контейнера без скролла — число колонок вычисляется браузером само. */ .rb-cat-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr); grid-auto-columns: minmax(0, 1fr); gap: 16px; } .rb-cat-grid .rb-card--cat { border-radius: 20px; box-shadow: 0 10px 26px -18px rgba(10, 10, 11, .3); transition: transform .22s ease, box-shadow .22s ease; } .rb-cat-grid .rb-card--cat:hover { transform: translateY(-6px); box-shadow: 0 20px 38px -18px rgba(10, 10, 11, .35); } .rb-cat-grid .rb-card--cat__image { height: 150px; border-radius: 20px 20px 0 0; } .rb-cat-grid .rb-card--cat:nth-child(3n+1) .rb-card--cat__image { background: var(--rb-tint-blue); } .rb-cat-grid .rb-card--cat:nth-child(3n+2) .rb-card--cat__image { background: var(--rb-tint-orange); } .rb-cat-grid .rb-card--cat:nth-child(3n+3) .rb-card--cat__image { background: var(--rb-tint-grey); } .rb-cat-grid .rb-card--cat__name { border-top: none; } @media (max-width: 1100px) { .rb-cat-grid { grid-template-rows: repeat(3, 1fr); } } @media (max-width: 640px) { .rb-cat-grid { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; } .rb-cat-grid .rb-card--cat__image { height: 120px; } } /* ---------- "Русбелт в цифрах" brand block ---------- */ .rb-page .rusbelt { padding: 44px 0; border-radius: 24px; } .rb-page .rusbelt__video { padding-top: 24px; } .rb-page .rusbelt__video video { box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .5); } .rb-page .rusbelt__info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-bottom: 0; } .rb-page .rusbelt__item { position: relative; padding: 20px 20px 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; overflow: hidden; } .rb-page .rusbelt__item svg { float: none; margin: 0 0 12px; display: block; width: 40px; height: 40px; } .rb-page .rusbelt__item div { clear: none; } .rb-page .rusbelt__item b { font-size: 26px; } .rb-page .rusbelt__item span, .rb-page .rusbelt__item div { font-size: 14.5px; } @media (max-width: 767px) { /* Остаётся 2 колонки (плитка 2x2) — раньше схлопывалось в 1 колонку */ .rb-page .rusbelt__item { padding: 14px 14px 12px; } .rb-page .rusbelt__item svg { width: 30px; height: 30px; margin-bottom: 8px; } .rb-page .rusbelt__item b { font-size: 20px; } .rb-page .rusbelt__item span, .rb-page .rusbelt__item div { font-size: 12.5px; } } /* ---------- "Попробуйте качественный сервис" ---------- */ .rb-card__num { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rb-navy); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 16px; } .rb-cards--try .rb-card__title { font-size: 16.5px; font-weight: 600; margin: 0; } /* ---------- "Получить предложение" form ---------- */ .rb-page .receive { margin-top: 56px; border-radius: 20px; } .rb-page .receive form { padding-top: 40px; } .rb-page .receive .title__middle { font-size: 24px; } .rb-page .receive .input-group { margin-bottom: 0; } .rb-page .receive .input { border: 1px solid var(--rb-border); border-radius: 10px; padding: 12px 14px; background: #fff; } .rb-page .receive .group__label { font-size: 13px; color: var(--rb-muted); margin-bottom: 6px; display: block; } .rb-page .receive .submit .btn { border-radius: 6px; padding: 13px 28px; } @media (max-width: 767px) { /* index.css:.container .container{padding:0} на ≤400px обнуляет отступы вложенного .container внутри .receive — форма прилипала к краю. */ .rb-page .receive .container { padding: 0 20px; } } .rb-page .phone-input-wrapper .text__error-js { position: absolute; top: 100%; left: 0; margin-top: 4px; } /* ---------- Pickup-point map ---------- * Старая раскладка — плавающая белая панель (float+отрицательный top) поверх * карты фиксированных 245px, унаследована от дефолтного вида SDEK-виджета. * Разбираем на нормальный флекс: карта + сайдбар-панель одной высоты, ничего * не всплывает и не обрезается. Список видим на мобиле (весь узел раньше был * hidden__xs — убрано в template.php), на мобиле сайдбар встаёт над картой. */ .rb-page .contacts__title { font-size: 22px; font-weight: 600; margin: 0 0 16px; } .rb-page .contacts__maps { display: block; height: auto; background: none; overflow: visible; margin: 0; } .rb-page #pickup_pvz { display: flex; flex-direction: row-reverse; gap: 0; width: 100%; height: auto; border-radius: 20px; overflow: hidden; border: 1px solid var(--rb-border); background: none; } .rb-page #PICKUP_map { flex: 1 1 auto; min-width: 0; height: 560px; } .rb-page #SDEK_info { position: static; top: auto; left: auto; float: none; flex: 0 0 300px; width: 300px; height: 560px; display: flex; flex-direction: column; border-radius: 0; box-shadow: none; background: var(--rb-surface); border-left: 1px solid var(--rb-border); color: var(--rb-ink); } .rb-page #PICKUP_sign { flex: none; display: flex; align-items: center; gap: 10px; height: auto; line-height: normal; padding: 16px 18px; border-bottom: 1px solid var(--rb-border); } .rb-page #PICKUP_sign img { width: 84px; height: auto; padding: 0; } .rb-page #PICKUP_sign span { font-weight: 600; font-size: 14.5px; } .rb-page .pickup_search { position: relative; flex: none; padding: 12px 18px; } .rb-page .pickup_search__icon { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); color: var(--rb-muted); pointer-events: none; } .rb-page .pickup_search__input { width: 100%; box-sizing: border-box; padding: 10px 12px 10px 34px; border: 1px solid var(--rb-border); border-radius: 10px; background: #fff; font-size: 13.5px; font-family: inherit; } .rb-page .pickup_search__input:focus { outline: none; border-color: var(--rb-navy); } .rb-page .SDEK_all-items { flex: 1 1 auto; min-height: 0; } .rb-page #PICKUP_wrapper { height: 100%; width: auto; box-sizing: border-box; overflow-y: auto; background: none; padding: 2px 10px 10px; } .rb-page #PICKUP_wrapper::-webkit-scrollbar { width: 6px; } .rb-page #PICKUP_wrapper::-webkit-scrollbar-thumb { background: var(--rb-border); border-radius: 999px; } .rb-page #SDEK_ten { display: none; } /* Специфичность выше legacy `#PICKUP_wrapper p` из contact.css (тот же

, иначе его padding/margin/font-size 12px победили бы наши через id+type). */ .rb-page #PICKUP_wrapper .pickup_item { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 2px; padding: 10px 8px; border-radius: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.4; transition: background-color .15s ease; } .rb-page #PICKUP_wrapper .pickup_item:hover { background: #fff; } .rb-page #PICKUP_wrapper .pickup_item--active { background: #fff; box-shadow: 0 2px 10px -4px rgba(10, 10, 11, .18); } .rb-page .pickup_item__pin { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--rb-accent); } .rb-page .pickup_list--empty:after { content: "Ничего не нашлось"; display: block; padding: 16px 8px; color: var(--rb-muted); font-size: 13.5px; } /* ---------- Balloon (карточка ПВЗ на карте) ---------- */ .rb-balloon { padding: 14px 6px 8px 2px; font-family: inherit; min-width: 220px; } .rb-balloon__title { font-weight: 600; font-size: 14.5px; color: var(--rb-ink); margin-bottom: 8px; } .rb-balloon__row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--rb-muted); margin-top: 6px; } .rb-balloon__icon { flex: none; margin-top: 1px; color: var(--rb-navy); display: flex; } .rb-balloon__note { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rb-border); font-size: 12.5px; color: var(--rb-muted); } @media (max-width: 900px) { .rb-page #pickup_pvz { flex-direction: column; } .rb-page #PICKUP_map { height: 320px; order: 2; } .rb-page #SDEK_info { width: 100%; flex: none; height: auto; max-height: 360px; order: 1; border-left: none; border-bottom: 1px solid var(--rb-border); } .rb-page #PICKUP_wrapper { max-height: 220px; } } /* ---------- Steps ---------- */ /* :has(.rb-step) — класс .rb-steps (без BEM __) делят два разных компонента: этот, сеточный (дети .rb-step/.rb-step__num — organizations, suppliers), и текстовый таймлайн ниже (дети .rb-steps__item — purchase-returns). Оба используют голый .rb-steps без модификатора (suppliers, purchase-returns) — различить можно только по составу детей. Без :has() второе объявление .rb-steps (ниже по файлу, position:relative + display:flex + padding-left) перебивало это (grid) на страницах с сеточной вёрсткой — сетка схлопывалась в колонку, вылезала вертикальная линия таймлайна слева и его же .rb-step:after горизонтальные "хвостики" от сетки не скрывались ни при какой ширине экрана (условие на них было ЗА рамками применимого брейкпоинта). Отзыв пользователя — "лишние элементы" на organizations и suppliers. */ .rb-steps:has(.rb-step) { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: rb-step; } /* .rb-steps.rb-steps--3 (2 класса), а не голое .rb-steps--3 (1 класс) — иначе специфичность ниже, чем у .rb-steps:has(.rb-step) выше (класс+псевдокласс), и модификатор проигрывал бы дефолтным 4 колонкам. */ .rb-steps.rb-steps--3 { grid-template-columns: repeat(3, 1fr); } .rb-step { position: relative; padding: 24px 20px 20px; border: 1px solid var(--rb-border); border-radius: 8px; background: #fff; } .rb-step__num { counter-increment: rb-step; width: 36px; height: 36px; border-radius: 50%; background: var(--rb-navy); color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .rb-step__num:before { content: counter(rb-step); } .rb-step p { margin: 0; font-size: 15px; line-height: 1.5; } .rb-step__title { font-weight: 600; margin: 0 0 6px; font-size: 15.5px; } /* index.css: @media(max-width:767px) .sentence span{width:92px;font-size:100px} (старая декоративная цифра-фон .sentence__item) задевает любой внутри .sentence, включая rb-* компоненты, которые туда добавили позже. Специфичность класс+класс перебивает класс+тег легаси-правила. */ .sentence .rb-step__num { width: 36px; height: 36px; font-size: 15px; } /* ---------- Feature row (tinted list + photo) ---------- */ .rb-feature-row { display: flex; align-items: center; gap: 48px; padding: 40px; border-radius: 24px; margin-top: 40px; } .rb-feature-row:first-child { margin-top: 0; } .rb-feature-row--blue { background: var(--rb-tint-blue); } .rb-feature-row--orange { background: var(--rb-tint-orange); } .rb-feature-row__text { flex: 1 1 50%; min-width: 0; } .rb-feature-row__title { margin: 0 0 20px; font-size: 26px; font-weight: 600; color: var(--rb-ink); } .rb-feature-row__image { flex: 1 1 42%; align-self: stretch; } .rb-feature-row__image img { display: block; width: 100%; height: 320px; object-fit: cover; border-radius: 18px; } .rb-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .rb-check-list li, .sentence .rb-check-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16.5px; line-height: 1.5; color: var(--rb-ink); } .rb-check-list__icon, .sentence .rb-check-list__icon { flex: none; width: 26px; height: 26px; font-size: 0; border-radius: 50%; background: #fff; color: var(--rb-accent); display: flex; align-items: center; justify-content: center; margin-top: 1px; box-shadow: 0 4px 10px -4px rgba(10, 10, 11, .18); } .rb-check-list__icon svg { width: 14px; height: 14px; } .rb-check-list__text, .sentence .rb-check-list__text { font-size: 16.5px; width: auto; } /* ---------- Lead text / callout (текстовые блоки без карточек) ---------- */ .rb-lead-text { font-size: 18px; line-height: 1.65; color: var(--rb-ink); } .rb-lead-text strong { color: var(--rb-accent-deep); font-weight: 600; } .rb-callout { background: var(--rb-tint-blue); border-radius: 16px; padding: 22px 26px; margin: 8px 0; } .rb-callout p { margin: 0; } @media (max-width: 900px) { .rb-feature-row { flex-direction: column; align-items: stretch; padding: 26px; gap: 22px; } .rb-feature-row__image { flex: none; } .rb-feature-row__image img { height: 200px; } } /* index.css: .about-gallery{margin-left:8.33%;margin-right:25%} сбрасывается в margin:0 только на ≤768px, а у .article — уже на ≤1219px (правый отступ резервировался под рельс соцсетей, который на этой ширине сам переходит в горизонтальный ряд и отступ ему больше не нужен). На планшете (769–1219px) .article уже во всю ширину, а галерея — ещё нет: асимметрия, "срезанная" правая колонка. Выравниваем брейкпоинт. */ @media (max-width: 1219px) { .about-page .about-gallery { margin-left: 0; margin-right: 0; } } /* ---------- Gallery grid (bento: один крупный кадр + мелкие, лайтбокс по клику) ---------- */ .rb-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; gap: 10px; } .rb-gallery-grid__item { position: relative; display: block; border-radius: 16px; overflow: hidden; } .rb-gallery-grid__item--feature { grid-column: span 2; grid-row: span 2; } .rb-gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .rb-gallery-grid__item:after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 11, 0); transition: background .2s ease; } .rb-gallery-grid__item:before { content: ""; position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); opacity: 0; transform: scale(.7); transition: opacity .2s ease, transform .2s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 15px; z-index: 1; } .rb-gallery-grid__item:hover img { transform: scale(1.06); } .rb-gallery-grid__item:hover:after { background: rgba(10, 10, 11, .16); } .rb-gallery-grid__item:hover:before { opacity: 1; transform: scale(1); } @media (max-width: 640px) { .rb-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; } } /* ---------- Social rail (.article__social) — сдвиг вправо от .article, на широких/уже раскладках налезал на контент. ---------- */ .rb-page .article__social .social { transform: translateX(230px); } /* ---------- Team cards ---------- */ .rb-team-card { background: #fff; border: 1px solid var(--rb-border); border-radius: 20px; padding: 24px 16px; text-align: center; transition: transform .22s ease, box-shadow .22s ease; } .rb-team-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(10, 10, 11, .25); } .rb-team-card__photo { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 14px; } .rb-team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .rb-team-card__name { font-weight: 600; font-size: 15px; color: var(--rb-ink); margin-bottom: 4px; } .rb-team-card__position { font-size: 13px; color: var(--rb-muted); } .rb-team-card__contact { margin-top: 6px; font-size: 13px; color: var(--rb-accent); } /* Команда — своя раскладка вместо общей .rb-cards--4 (та схлопывается в 2/1 колонку): 4 в ряд на планшете, 3 в ряд на мобиле с компактными карточками, чтобы фото не выглядели потерянными в узкой колонке. */ .rb-cards--4.rb-team-grid { row-gap: 24px; } @media (max-width: 1220px) { .rb-cards--4.rb-team-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767px) { .rb-cards--4.rb-team-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; row-gap: 16px; } .rb-team-grid .rb-team-card { padding: 14px 6px; border-radius: 14px; } .rb-team-grid .rb-team-card__photo { width: 80px; height: 80px; margin: 0 auto 8px; } /* index.css: @media(max-width:769px) .article img{transform:scale(.5); transform-origin:left} — легаси-правило для картинок в тексте статьи, ловит и фото команды (тоже внутри .article): сжимает вдвое и сдвигает от левого края, отсюда "мелкие/не по центру/обрезаны". */ .rb-team-grid .rb-team-card__photo img { transform: none; } .rb-team-grid .rb-team-card__name { font-size: 11.5px; line-height: 1.25; } .rb-team-grid .rb-team-card__position { font-size: 10px; line-height: 1.25; margin-top: 2px; } .rb-team-grid .rb-team-card__contact { display: none; } } /* ---------- CTA banner ---------- */ .rb-cta { margin-top: 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 36px 40px; border-radius: 18px; background: var(--rb-surface); } .rb-cta__text h2 { margin: 0 0 6px; } .rb-cta__text p { margin: 0; color: var(--rb-muted); width: auto; } .rb-cta__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .rb-cta__phone { color: var(--rb-ink); font-weight: 600; font-size: 16px; text-decoration: none; } .rb-cta__phone:hover { color: var(--rb-accent); } /* ---------- Motion: conveyor feed-in ---------- */ .rb-reveal { opacity: 0; transform: translateX(-28px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, .68, 0, 1); will-change: opacity, transform; } .rb-reveal--right { transform: translateX(28px); } .rb-reveal--up { transform: translateY(20px); } .rb-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rb-reveal { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 1220px) { .rb-cards, .rb-cards--4 { grid-template-columns: repeat(2, 1fr); } /* "Наши ключевые преимущества" (about) — не трогаем общий .rb-cards (используется на других уже проверенных страницах), держим 3 в ряд как на десктопе вплоть до настоящего мобильного брейкпоинта. */ .rb-advantages-grid { grid-template-columns: repeat(3, 1fr); } /* .rb-reveal по умолчанию (десктоп) — translateX(-28px), появление сдвигом СЛЕВА. До реального срабатывания reveal (или если элемент — первый в ряду и уходит за левый край .container) этот сдвиг ничем не обрезается (ни у body, ни у .container нет overflow-x:hidden) — реальный лишний горизонтальный скролл страницы. Раньше правило "заменить на вертикальный translateY" стояло только в @media (max-width:767px) — весь диапазон планшета (768-1220px) оставался с горизонтальным сдвигом. Переносим сюда, чтобы покрыть и мобилку, и планшет одним правилом (max-width:767px ниже становится дублирующим, но не мешает). */ .rb-reveal { transform: translateY(16px); } .rb-reveal--right { transform: translateY(16px); } } @media (max-width: 1023px) { .rb-hero { flex-direction: column; align-items: stretch; padding: 32px 24px; } .rb-hero__aside { flex: none; } /* Кнопки hero (например "Обратная связь" + телефон на /contacts/) были прижаты к левому краю даже после того, как весь блок встал в колонку — отзыв пользователя, центрируем вместе с остальным контентом. */ .rb-hero__actions { justify-content: center; } .rb-stats { grid-template-columns: repeat(3, 1fr); } .rb-steps:has(.rb-step), .rb-steps--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .rb-section { margin-top: 44px; } .rb-page .container.rb-section { margin-top: 44px; } .rb-stats { grid-template-columns: 1fr; } .rb-cards, .rb-cards--2, .rb-cards--4 { grid-template-columns: 1fr; } .rb-steps:has(.rb-step), .rb-steps--3 { grid-template-columns: 1fr; } .rb-cta { padding: 28px 22px; } .rb-reveal { transform: translateY(16px); } .rb-reveal--right { transform: translateY(16px); } /* "Для кого мы полезны" (organizations) — 4 в ряд даже на мобиле, остальные rb-cards--4 по сайту не трогаем (это не общий модификатор). */ .rb-page .rb-cards--4-mobile { grid-template-columns: repeat(4, 1fr); gap: 8px; } .rb-page .rb-cards--4-mobile .rb-card { padding: 10px 6px; border-radius: 12px; } .rb-page .rb-cards--4-mobile .rb-card__icon-img { width: 28px; height: 28px; margin: 0 auto 8px; } .rb-page .rb-cards--4-mobile .rb-card__title { font-size: 11px; line-height: 1.25; } } /* ---------- Screenshot flow (invoice-help "как выписать счёт") ---------- * Живая CSS-рамка вместо фейкового "окна браузера", нарисованного прямо * в PNG (был единственный способ поддерживать её при редизайне сайта — * перерисовывать каждую картинку). Скриншот — обычный , рамка/тени/ * точки — CSS, зигзаг + нумерованный таймлайн + цветное пятно за кадром. */ .rb-flow { position: relative; display: flex; flex-direction: column; gap: 64px; margin-top: 56px; padding-left: 64px; } .rb-flow::before { content: ''; position: absolute; left: 19px; top: 22px; bottom: 22px; width: 2px; background: var(--rb-border); } .rb-flow__item { position: relative; display: grid; grid-template-columns: 1fr 1.3fr; gap: 44px; align-items: center; } .rb-flow__item:nth-child(even) { grid-template-columns: 1.3fr 1fr; } .rb-flow__item:nth-child(even) .rb-flow__body { order: 2; } .rb-flow__item:nth-child(even) .rb-flow__shot-wrap { order: 1; } .rb-flow__num { position: absolute; left: -64px; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--rb-navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; } .rb-flow__body h2 { margin: 0 0 10px; font-size: 22px; } .rb-flow__body p { color: var(--rb-muted); margin: 0; line-height: 1.5; } .rb-flow__shot-wrap { position: relative; } .rb-flow__shot-wrap::before { content: ''; position: absolute; top: -28px; right: -28px; width: 190px; height: 190px; border-radius: 50%; z-index: 0; } .rb-flow__item:nth-child(even) .rb-flow__shot-wrap::before { right: auto; left: -28px; } .rb-flow__item:nth-child(3n+1) .rb-flow__shot-wrap::before { background: var(--rb-tint-blue); } .rb-flow__item:nth-child(3n+2) .rb-flow__shot-wrap::before { background: var(--rb-tint-orange); } .rb-flow__item:nth-child(3n+3) .rb-flow__shot-wrap::before { background: var(--rb-tint-grey); } .rb-flow__shot { position: relative; z-index: 1; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--rb-border); box-shadow: 0 24px 48px -28px rgba(10, 10, 11, .28); transition: transform .25s ease, box-shadow .25s ease; } .rb-flow__shot:hover { transform: translateY(-4px); box-shadow: 0 30px 54px -26px rgba(10, 10, 11, .34); } .rb-flow__shot-bar { display: flex; gap: 6px; padding: 12px 16px; background: var(--rb-surface); border-bottom: 1px solid var(--rb-border); } .rb-flow__shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--rb-border); } .rb-flow__item:nth-child(3n+1) .rb-flow__shot-bar span:nth-child(1) { background: var(--rb-navy); } .rb-flow__item:nth-child(3n+2) .rb-flow__shot-bar span:nth-child(1) { background: var(--rb-accent); } .rb-flow__item:nth-child(3n+3) .rb-flow__shot-bar span:nth-child(1) { background: #9aa0a6; } .rb-flow__shot img { display: block; width: 100%; height: auto; } /* Быстрая навигация сверху — маленькие превью тех же скриншотов */ .rb-flow-nav { grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 48px; } .rb-flow-nav .rb-card { padding: 12px; } .rb-flow-nav__thumb { display: block; width: 100%; height: 96px; object-fit: cover; object-position: top; border-radius: 12px; } .rb-flow-nav__title { font-size: 13.5px; margin-top: 10px; } @media (max-width: 1220px) { .rb-flow-nav { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .rb-flow-nav { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1023px) { .rb-flow__item, .rb-flow__item:nth-child(even) { grid-template-columns: 1fr; } .rb-flow__item:nth-child(even) .rb-flow__body, .rb-flow__item:nth-child(even) .rb-flow__shot-wrap { order: initial; } } @media (max-width: 767px) { .rb-flow { padding-left: 44px; gap: 48px; } .rb-flow::before { left: 15px; } .rb-flow__num { left: -44px; width: 32px; height: 32px; font-size: 13px; } .rb-flow__shot-wrap::before { width: 120px; height: 120px; top: -18px; } } /* ---------- Шаги-таймлайн для чисто текстового контента (напр. /purchase-returns/) ---------- Та же визуальная логика, что у .rb-flow (нумерованный круг на вертикальной линии), но без колонки со скриншотом — тут просто карточка с текстом/чек-листом, т.к. для каждого шага нет соответствующей картинки. :has(.rb-steps__item) — см. комментарий у сеточного .rb-steps выше: класс общий с той (сеточной) версией, различаем по составу детей, иначе это объявление (ниже по файлу, побеждает при равной специфичности) перебивало display:grid на organizations/suppliers. */ .rb-steps:has(.rb-steps__item) { position: relative; display: flex; flex-direction: column; gap: 28px; margin: 40px 0 48px; padding-left: 64px; } .rb-steps:has(.rb-steps__item)::before { content: ''; position: absolute; left: 19px; top: 22px; bottom: 22px; width: 2px; background: var(--rb-border, #e5e5e6); } .rb-steps__item { position: relative; } .rb-steps__num { position: absolute; left: -64px; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--rb-navy, #184076); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; z-index: 1; } .rb-steps__card { background: #fff; border: 1px solid var(--rb-border, #e5e5e6); border-radius: 18px; padding: 26px 30px; box-shadow: 0 16px 36px -28px rgba(10, 10, 11, .22); } .rb-steps__card > p:first-child { margin-top: 0; } .rb-steps__card p { margin: 0 0 14px; color: var(--rb-ink, #0a0a0b); line-height: 1.6; } .rb-steps__card p:last-child { margin-bottom: 0; } .rb-steps__list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; } .rb-steps__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--rb-ink, #0a0a0b); line-height: 1.55; } .rb-steps__list svg { flex: 0 0 auto; margin-top: 3px; color: var(--rb-accent, #ef713b); } .rb-steps__note { position: relative; margin: 4px 0 48px 64px; padding: 20px 26px; border-radius: 16px; background: var(--rb-tint-blue, #eef3fb); color: var(--rb-navy, #184076); font-size: 15px; line-height: 1.6; } @media (max-width: 767px) { .rb-steps:has(.rb-steps__item) { padding-left: 44px; gap: 24px; } .rb-steps:has(.rb-steps__item)::before { left: 15px; } .rb-steps__num { left: -44px; width: 32px; height: 32px; font-size: 13px; } .rb-steps__card { padding: 20px 20px; } .rb-steps__note { margin-left: 0; } } /* ---------- Текстовая карточка общего назначения (напр. /cheaper/) ---------- Белая карточка для прозы + опционально .rb-steps__list чек-лист внутри — тот же язык, что у .rb-steps__card, но без нумерованного таймлайна. */ .rb-content-card { background: #fff; border: 1px solid var(--rb-border, #e5e5e6); border-radius: 18px; padding: 28px 32px; box-shadow: 0 16px 36px -28px rgba(10, 10, 11, .22); margin-bottom: 28px; } .rb-content-card h3 { margin: 0 0 16px; font-size: 19px; color: var(--rb-navy, #184076); } .rb-content-card p { margin: 0 0 16px; line-height: 1.6; color: var(--rb-ink, #0a0a0b); } .rb-content-card p:last-child { margin-bottom: 0; } .rb-content-card .rb-steps__list { margin: 0 0 20px; } .rb-content-card .rb-steps__list:last-child { margin-bottom: 0; } @media (max-width: 767px) { .rb-content-card { padding: 20px 20px; } } /* ---------- Карта сайта (/karta-saita/, bitrix:main.map) ---------- Верхний уровень — сетка карточек-аккордеонов с цветными иконками (тот же язык чередования --rb-tint-blue/orange/grey, что у .rb-cards--tint по сайту), свёрнуты по умолчанию — иначе вся страница разом превращается в стену текста. Внутри раскрытой карточки — компактный вложенный список (реальная DOM-вложенность из PHP, не эмуляция через margin/columns). */ .map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 8px; } .map-card { grid-column: span 1; border-radius: 18px; background: var(--rb-tint-grey, #f1f2f4); overflow: hidden; align-self: start; transition: background-color .2s ease; } .map-card--blue { background: var(--rb-tint-blue, #eaf1fb); } .map-card--orange { background: var(--rb-tint-orange, #fdede2); } .map-card[open] { grid-column: 1 / -1; background: #fff; border: 1px solid var(--rb-border, #e5e5e6); } .map-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 700; font-size: 15.5px; color: var(--rb-navy, #184076); } .map-card summary::-webkit-details-marker { display: none; } details.map-card summary::before { content: none; } .map-card__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--rb-navy, #184076); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; } .map-card__title { flex: 1 1 auto; } .map-card__count { flex: 0 0 auto; min-width: 24px; padding: 2px 8px; border-radius: 999px; background: rgba(10, 10, 11, .06); color: var(--rb-muted, #6b6b6b); font-size: 12px; font-weight: 700; text-align: center; } .map-card__chevron { flex: 0 0 auto; color: var(--rb-muted, #6b6b6b); transition: transform .2s ease; } .map-card[open] > summary .map-card__chevron { transform: rotate(180deg); } .map-card__body { padding: 0 22px 22px; } .map-card__link { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--rb-accent-deep, #d85f2b); text-decoration: none; margin-bottom: 14px; } .map-card__link:hover { text-decoration: underline; } .map-card--flat { display: flex; align-items: center; gap: 12px; padding: 16px 18px; font-weight: 700; font-size: 15.5px; color: var(--rb-navy, #184076); text-decoration: none; } .map-card--flat:hover .map-card__icon { background: var(--rb-navy, #184076); color: #fff; } .map-nested { list-style: none; margin: 0; padding: 0 0 0 8px; columns: 2; column-gap: 24px; } .map-nested .map-nested { columns: 1; padding-left: 16px; margin-top: 4px; border-left: 2px solid var(--rb-border, #e5e5e6); } .map-nested > li { list-style: none; break-inside: avoid; padding: 5px 0; } .map-nested > li > a { font-size: 13.5px; color: var(--rb-ink, #0a0a0b); text-decoration: none; } .map-nested > li > a:hover { color: var(--rb-accent-deep, #d85f2b); text-decoration: underline; } .map-nested__desc { color: var(--rb-muted, #6b6b6b); font-size: 12px; margin-top: 2px; } @media (max-width: 1023px) { .map-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } @media (max-width: 640px) { .map-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .map-card[open] { grid-column: 1 / -1; } .map-nested { columns: 1; } } /* ---------- ГОСТы: список карточек ---------- */ .gosts-cards { width: 100%; margin-top: 40px; margin-bottom: 56px; } .gost-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; } .gost-card .rb-card__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .gost-card__link { margin-top: auto; padding-top: 18px; font-size: 14px; font-weight: 600; color: var(--rb-navy); } .gost-card__arrow { display: inline-block; transition: transform .22s ease; } .gost-card:hover .gost-card__arrow { transform: translateX(4px); } /* ---------- ГОСТы: страница документа ---------- */ .gost-detail__header { max-width: 760px; margin: 0 auto 32px; text-align: center; } .gost-detail__badge { width: 56px; height: 56px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--rb-tint-blue); color: var(--rb-navy); } .gost-detail__badge svg { width: 26px; height: 26px; } .gost-detail__header h1 { margin: 0 0 10px; } .gost-detail__lead { color: var(--rb-muted); margin: 0; } .gost-detail__card { max-width: 900px; margin: 0 auto; padding: 40px; background: var(--rb-tint-grey); border: 1px solid var(--rb-border); border-radius: 20px; } .gost-detail__preview { text-align: center; text-transform: uppercase; letter-spacing: .02em; font-weight: 600; font-size: 14px; color: var(--rb-navy); padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--rb-border); } .gost-detail__back { text-align: center; margin: 40px 0 56px; } /* Легаси-контент ГОСТа: скрыть пустые filler-блоки из старого импорта, причёсать типографику без правки самого DETAIL_TEXT в БД */ .gost-doc__content div:empty, .gost-doc__content div:has(> br:only-child), .gost-doc__content div:has(> b:only-child > br:only-child) { display: none; } .gost-doc__content h2 { margin: 36px 0 16px; font-size: 20px; color: var(--rb-navy); } .gost-doc__content h2:first-child { margin-top: 0; } .gost-doc__content p, .gost-doc__content > div { line-height: 1.65; } .gost-doc__content img { max-width: 100%; height: auto; display: block; margin: 20px auto; border-radius: 8px; } .gost-doc__content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; } .gost-doc__content td, .gost-doc__content th { border: 1px solid var(--rb-border); padding: 6px 10px; } @media (max-width: 767px) { .gost-detail__card { padding: 24px 20px; } } /* ---------- Поиск (rusbelt:search) на страницах-хабах ГОСТы/Статьи ---------- Не завязано на .rb-page: компонент рендерит свой контейнер отдельным IncludeComponent-вызовом, который не всегда вложен в .rb-page-обёртку (например /articles/ — там hero и поиск в двух разных .container). */ .searchform_rusbelt { max-width: 640px; margin: 32px auto 0; } .searchform_rusbelt .input-search .input { border-radius: 14px; border: 1px solid #e5e5e6; background: #f1f2f4; } .searchform_rusbelt .input-search .input:focus { outline: none; border-color: #184076; background: #fff; } /* ---------- Карточки статей/обзоров/работ (общий редизайн для /articles/, /reviews/, /projects/) ---------- */ .rb-article-cards { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; } /* Слайдер-режим (IS_CARDS_SLIDER=Y, напр. "Другие статьи/обзоры/работы" на деталке) — Slick оборачивает каждую карточку в .slick-slide, зазор между слайдами задаём отступом на самой карточке. */ /* Slick не оборачивает карточку в отдельный .slick-slide — класс добавляется ПРЯМО на .rb-article-card (это один и тот же элемент), поэтому нужен составной селектор без пробела, а не селектор потомка. */ .rb-article-card.slick-slide { margin: 0 10px; } /* Компенсирующий отрицательный margin здесь специально НЕ используется: легаси .related-articles__slider .slick-initialized {width:100%} (catalog.css) фиксирует ширину слайдера, и при одновременно заданных margin+width:100% браузер (over-constrained box, LTR) молча игнорирует margin-right — левый край уезжал наружу, правый нет, слайдер оказывался смещён и НЕ центрирован относительно контейнера (тот же класс бага, что и у .catalog-slider, см. pages-motion-shop.css). */ .rb-article-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--rb-border, #e5e5e6); border-radius: 20px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; } .rb-article-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -22px rgba(10, 10, 11, .28); } .rb-article-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rb-tint-grey, #f1f2f4); } .rb-article-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .rb-article-card:hover .rb-article-card__media img { transform: scale(1.05); } .rb-article-card__tag { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--rb-navy, #184076); box-shadow: 0 6px 14px -6px rgba(10, 10, 11, .2); } .rb-article-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .rb-article-card__title { font-size: 17px; font-weight: 600; margin: 0 0 8px; line-height: 1.35; min-height: calc(1.35em * 2); color: var(--rb-ink, #0a0a0b); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rb-article-card__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--rb-muted, #6b6b6b); margin: 0 0 18px; min-height: calc(1.55em * 2); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rb-article-card__meta { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-top: 16px; /* Карточки без автора показывают только 1 строку (дата/рейтинг) вместо 2 (автор + дата/рейтинг) — фиксируем высоту под "с автором", чтобы карточки не расходились по высоте в зависимости от того, указан автор или нет. */ min-height: 78px; border-top: 1px solid var(--rb-tint-grey, #f1f2f4); } .rb-article-card__author { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--rb-ink, #0a0a0b); } .rb-article-card__author img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Длинное имя автора на узкой карточке переносилось на 2 строки и раздувало .rb-article-card__meta выше фиксированных 78px (min-height рассчитан на 1 строку имени) — карточки с автором становились выше карточек без автора. Обрезаем многоточием вместо переноса. */ .rb-article-card__author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .rb-article-card__meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rb-article-card__date { font-size: 12.5px; color: var(--rb-muted, #6b6b6b); } .rb-article-card__stars { color: var(--rb-accent, #ef713b); font-size: 13px; letter-spacing: 1px; } @media (max-width: 1023px) { .rb-article-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .rb-article-cards { grid-template-columns: 1fr; } } /* ---------- Деталка статьи (news.detail/articles) ---------- */ .rb-article-detail { padding-bottom: 40px; position: relative; } /* Полоса прогресса чтения — фикс сверху вьюпорта, растёт по мере прохождения тела статьи */ .rb-reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: transparent; z-index: 500; pointer-events: none; } .rb-reading-progress__bar { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--rb-accent, #ef713b), var(--rb-navy, #184076)); transition: width .12s linear; } /* ---------- Полноэкранная фото-шапка статьи ---------- Один слой фото на 100% ширины и высоты блока через background-size:cover — растянуто на весь баннер, без блюр-конвертика по бокам. Параллакс — небольшой transform:scale на слое фона, запас прячется под overflow:hidden секции (см. article-detail.js), поэтому край никогда не оголяется. */ .rb-article-hero { position: relative; min-height: 46vh; max-height: 640px; overflow: hidden; background: linear-gradient(135deg, #184076 0%, #0e2c56 100%); margin: 28px auto 56px; } .rb-article-hero--noimage { min-height: 38vh; max-height: 400px; } .rb-article-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; will-change: background-position; } .rb-article-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, .35) 0%, rgba(10, 10, 11, .1) 30%, rgba(10, 10, 11, .9) 100%); } .rb-article-hero--noimage .rb-article-hero__scrim { background: none; } .rb-article-hero .rb-article-hero__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding-top: 48px; padding-bottom: 32px; color: #fff; } .rb-article-hero__top { max-width: 820px; } .rb-article-hero__title { font-size: 46px; font-weight: 800; line-height: 1.15; margin: 0 0 20px; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .35); } .rb-article-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; } .rb-article-hero__tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .3); } .rb-article-hero__meta { display: flex; align-items: center; gap: 18px; } .rb-article-hero__avatar { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .7); flex: 0 0 auto; } .rb-article-hero__author-name { font-weight: 700; font-size: 19px; color: #fff; } .rb-article-hero__author-name a { color: inherit; text-decoration: none; } .rb-article-hero__author-name a:hover { text-decoration: underline; } .rb-article-hero__author-sub { font-size: 14.5px; color: rgba(255, 255, 255, .78); margin-top: 4px; } .rb-article-hero__dot { margin: 0 2px; } .rb-article-hero__stars { color: #ef713b; letter-spacing: 1px; } /* ---------- Тело статьи ---------- */ .rb-article-detail__layout { max-width: 760px; margin: 0 auto; } .rb-article-detail__lead { font-size: 19px; line-height: 1.6; color: #6b6b6b; margin: 0 0 32px; font-weight: 500; } .rb-article-detail__body { font-size: 17.5px; line-height: 1.85; color: #0a0a0b; } .rb-article-detail__body h2 { font-size: 26px; margin: 48px 0 18px; color: #184076; } .rb-article-detail__body h3 { font-size: 20px; margin: 32px 0 14px; color: #0a0a0b; } .rb-article-detail__body p { margin: 0 0 20px; } .rb-article-detail__body ul, .rb-article-detail__body ol { margin: 0 0 20px; padding-left: 24px; } .rb-article-detail__body li { margin-bottom: 10px; } .rb-article-detail__body img { max-width: 100%; height: auto; border-radius: 16px; margin: 12px 0 24px; box-shadow: 0 24px 48px -28px rgba(10, 10, 11, .3); } .rb-article-detail__body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; display: block; overflow-x: auto; } .rb-article-detail__body td, .rb-article-detail__body th { border: 1px solid #e5e5e6; padding: 10px 14px; text-align: left; } /* Буквица у первого абзаца — редакторский штрих */ .rb-article-detail__body--dropcap > p:first-of-type::first-letter { float: left; font-size: 72px; line-height: .8; font-weight: 800; color: #ef713b; margin: 6px 12px 0 0; } .rb-article-detail__gallery { margin-top: 32px; } /* ---------- Фотогалерея (главное фото + миниатюры + лайтбокс) ---------- */ .rb-gallery__main { position: relative; aspect-ratio: 16 / 9; background: var(--rb-tint-grey, #f1f2f4); border-radius: 16px; overflow: hidden; cursor: zoom-in; } .rb-gallery__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .rb-gallery__slide.is-active { opacity: 1; pointer-events: auto; } .rb-gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(10, 10, 11, .45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s ease; } .rb-gallery__arrow:hover { background: rgba(10, 10, 11, .7); } .rb-gallery__arrow--prev { left: 16px; } .rb-gallery__arrow--next { right: 16px; } .rb-gallery__counter { position: absolute; right: 16px; bottom: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(10, 10, 11, .55); color: #fff; font-size: 12.5px; } .rb-gallery__zoom-hint { position: absolute; left: 16px; bottom: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(10, 10, 11, .45); color: #fff; font-size: 12.5px; opacity: 0; transition: opacity .2s ease; pointer-events: none; } .rb-gallery__main:hover .rb-gallery__zoom-hint { opacity: 1; } .rb-gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; } .rb-gallery__thumb { flex: 0 0 auto; width: 88px; aspect-ratio: 16 / 11; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--rb-tint-grey, #f1f2f4); cursor: pointer; opacity: .6; transition: opacity .2s ease, border-color .2s ease; } .rb-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .rb-gallery__thumb:hover { opacity: .9; } .rb-gallery__thumb.is-active { opacity: 1; border-color: var(--rb-navy, #184076); } .rb-gallery-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(6, 8, 12, .92); opacity: 0; visibility: hidden; transition: opacity .2s ease; } .rb-gallery-lightbox.is-open { opacity: 1; visibility: visible; } .rb-gallery-lightbox__img { max-width: 90vw; max-height: 88vh; object-fit: contain; } .rb-gallery-lightbox__close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } .rb-gallery-lightbox__close:hover { background: rgba(255, 255, 255, .22); } .rb-gallery-lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .12); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; } .rb-gallery-lightbox__arrow:hover { background: rgba(255, 255, 255, .22); } .rb-gallery-lightbox__arrow--prev { left: 24px; } .rb-gallery-lightbox__arrow--next { right: 24px; } .rb-gallery-lightbox__counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; } @media (max-width: 640px) { .rb-gallery__main { aspect-ratio: 4 / 3; } .rb-gallery__arrow { width: 36px; height: 36px; } .rb-gallery-lightbox__arrow { width: 42px; height: 42px; } .rb-gallery__zoom-hint { display: none; } } .rb-article-detail__rate { max-width: 760px; margin: 0 auto; padding-bottom: 56px; text-align: right; } .rb-article-detail__related { margin-top: 0; padding-top: 48px; border-top: 1px solid #e5e5e6; } .rb-article-detail__related .title__middle { margin-bottom: 24px; } @media (max-width: 767px) { .rb-article-hero { min-height: 240px; max-height: 440px; } .rb-article-hero--noimage { min-height: 34vh; max-height: 320px; } .rb-article-hero .rb-article-hero__content { padding-top: 32px; padding-bottom: 24px; } .rb-article-hero__title { font-size: 26px; } .rb-article-hero__avatar { width: 48px; height: 48px; } .rb-article-hero__author-name { font-size: 15.5px; } .rb-article-hero__author-sub { font-size: 13px; } } @media (max-width: 640px) { .rb-article-detail__body--dropcap > p:first-of-type::first-letter { font-size: 50px; } .rb-article-detail__lead { font-size: 17px; } } /* ---------- Фильтр по тегам (списки статей/обзоров/проектов) ---------- */ .rb-tag-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 8px; } .rb-tag-filter__item { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid #e5e5e6; background: #fff; color: #184076; font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, color .2s ease; } .rb-tag-filter__item:hover { border-color: #184076; } .rb-tag-filter__item.is-active { background: #184076; border-color: #184076; color: #fff; } /* ---------- Главная: карусель баннера (.welcome__carousel) ---------- * Перенесено в assets/css/banner-transitions/core.css вместе с остальной * логикой карусели (Slick убран, собственный движок с подключаемыми * эффектами перехода — см. main.banner/template.php). */ /* ================= Главная: редизайн остальных блоков ================= * Тестовая страница /homepage-redesign-test/ — прод (/index.php и его * include/main/*.php) не тронут. Новые классы ниже используются ТОЛЬКО * новыми файлами main-redesign/*.php и *.redesign компонент-шаблонами. */ /* Блок "N лет с вами" (rusbelt.php) переиспользует ГОТОВУЮ разметку и стиль с /organizations/ (.rusbelt/.rusbelt__item и т.д., см. ".rb-page .rusbelt" выше в этом файле) — новых классов здесь не потребовалось. */ /* Категории — карточка внутри уже существующего Slick-слайдера .catalog-gallery-js (слайдер остаётся, меняется только скин карточки на уже готовый .rb-card--cat, см. /organizations/). */ .catalog-gallery-js .rb-card--cat { margin-left: calc(var(--col) / 2); margin-right: calc(var(--col) / 2); border-radius: 20px; box-shadow: 0 10px 26px -18px rgba(10, 10, 11, .3); transition: transform .22s ease, box-shadow .22s ease; } .catalog-gallery-js .rb-card--cat:hover { transform: translateY(-6px); box-shadow: 0 20px 38px -18px rgba(10, 10, 11, .35); } .catalog-gallery-js .rb-card--cat__image { height: 150px; border-radius: 20px 20px 0 0; } .catalog-gallery-js > a:nth-child(3n+1) .rb-card--cat__image { background: var(--rb-tint-blue); } .catalog-gallery-js > a:nth-child(3n+2) .rb-card--cat__image { background: var(--rb-tint-orange); } .catalog-gallery-js > a:nth-child(3n+3) .rb-card--cat__image { background: var(--rb-tint-grey); } /* Название категории — 1-3 строки в зависимости от длины текста И ширины карточки (у слайдера 4 разных slidesToShow по брейкпоинтам — узкая мобильная карточка переносит даже короткое название на строку больше, чем десктопная) — фикс. min-height под конкретное число строк не универсален сразу для всех брейкпоинтов. Высоту синхронизирует JS (actions.js, syncCatGalleryNameHeight — меряет самое высокое название и выставляет всем одинаковый height, пересчитывает при смене slidesToShow и по resize); здесь только центрирование текста внутри уже выставленной высоты. */ .catalog-gallery-js .rb-card--cat__name { border-top: none; line-height: 1.4; display: flex; align-items: center; justify-content: center; } /* "Для кого мы полезны" — грид иконок-отраслей на базе .rb-card. Карточка на узкой мобилке (2 колонки, ≤600px) реально обрезалась по ширине текста ("Тяжёлая и лёгкая промышленность" и т.п.) — по умолчанию grid-элемент имеет min-width:auto и не сжимается ниже своего контента, из-за чего вылезал за пределы 1fr-трека и создавал горизонтальный скролл страницы (ничего это не клипало — ни у грида, ни у карточки нет overflow:hidden). min-width:0 — стандартный фикс этой особенности CSS Grid. */ .rb-industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .rb-industries-grid .rb-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 16px 22px; min-width: 0; } .rb-industries-grid .rb-card__icon-img { margin: 0 auto 14px; } @media (max-width: 900px) { .rb-industries-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } } @media (max-width: 600px) { .rb-industries-grid { grid-template-columns: repeat(2, 1fr); } } /* Зазор между слайдами через margin на самом .slick-slide-элементе ломает Slick: он выставляет ширину слайда инлайн-стилем (containerWidth/slidesToShow) БЕЗ учёта margin, из-за чего реальный слайд (карточка+margin) оказывается шире выделенного места — слайдер целиком становится УЖЕ контейнера (браузер молча игнорирует часть margin при столкновении с легаси-правилом `<родитель> .slick-initialized {width:100%}`, см. catalog.css) либо, наоборот, карточки наезжают/обрезаются (см. разбор для .catalog-slider/.rb-product-slide в pages-motion-shop.css). Общее решение: карточка оборачивается в .rb-slide-pad — именно НА НЕЙ Slick вешает slick-slide и инлайн-width, а зазор даём через padding (border-box учитывает его В ширине слайда, а не поверх неё). */ .rb-slide-pad { padding: 0 10px; box-sizing: border-box; } /* "Наши услуги" — карточка на базе .rb-card, сохраняет декоративные фоновые иллюстрации service-img-N (готовые ассеты, hover-вариант картинки). Слайдер #services__popular — тот же глобальный Slick (actions.js:365), что и раньше: он перестраивает DOM в .slick-track/.slick-slide, карточка обёрнута в .rb-slide-pad (см. выше и include/blocks/main-redesign/services.php). Класс mainservice__item сохранён на карточке ради того же JS выравнивания высоты (actions.js:398, ищет .mainservice__item — без него высоты слайдов не синхронизируются и карточки выглядят разного размера). */ .rb-service-card { position: relative; overflow: hidden; min-height: 172px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; color: inherit; } /* Иллюстрация — отдельный слой (не сам .rb-card), иначе background: service-img-N (index.css) и background: var(--rb-tint-grey) базового .rb-card (pages-motion.css) — оба одиночные классы равной специфичности, порядок подключения стилей решает победителя, а не желаемый результат. */ .rb-service-card__illustration { position: absolute; inset: 0; background-position: right bottom !important; background-repeat: no-repeat !important; } .rb-services-grid .rb-card__title { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; } .rb-services-grid .rb-card__title svg { width: 16px; height: 16px; flex: none; transition: transform .18s ease; } .rb-services-grid .rb-card:hover .rb-card__title svg { transform: translateX(4px); } @media (max-width: 900px) { .rb-services-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .rb-services-grid { grid-template-columns: 1fr !important; } } /* Сертификаты — грид на базе уже готового .rb-gallery-grid, попап — уже существующий глобальный .open__sert-js (popupHelper.js), без нового JS. */ .rb-cert-grid .rb-gallery-grid__item { cursor: pointer; } .rb-cert-grid .rb-gallery-grid__item img { object-fit: contain; background: #fff; padding: 18px; } /* Партнёры — карточка цитаты внутри уже существующего Slick-слайдера .js-partner__carousel (слайдер остаётся, меняется только скин). Slick сам выравнивает высоту всех слайдов по самому высокому (родной механизм, без JS) — .rb-quote-card {height:calc(100% - 8px)} просто заполняет эту высоту. Но легаси .partner__carousel {height:388px; overflow:hidden} (index.css) — рассчитан на старую короткую карточку — обрезал новую (текст цитат длиннее, реальная высота слайда доходила до ~750px) прямо посреди текста, а стрелки (top:50% от .js-partner__carousel, которая НЕ обрезана) визуально оказывались в нижней части видимой (обрезанной) области. Фикс на двух уровнях: 1) .rb-quote-carousel (доп. класс на .partner__carousel, см. template.php) снимает фиксированную высоту/обрезку для редизайна, не трогая старый main.partners; 2) текст цитаты усекается по количеству строк (line-clamp) — так самая длинная цитата не раздувает высоту ВСЕХ карточек до неприемлемых значений; полный текст по-прежнему доступен по клику "Письмо полностью". */ .partner__carousel.rb-quote-carousel { height: auto; overflow: visible; } .rb-quote-card { margin: 0 8px; height: calc(100% - 8px); padding: 24px 20px; background: var(--rb-tint-grey); border-radius: 18px; display: flex; flex-direction: column; } .rb-quote-card__mark { font-size: 40px; line-height: 1; color: var(--rb-accent); font-family: Georgia, serif; margin-bottom: 4px; } .rb-quote-card__text { font-size: 14px; line-height: 1.55; color: var(--rb-ink); flex: 1 1 auto; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } .rb-quote-card__author { font-weight: 600; font-size: 14px; color: var(--rb-ink); } .rb-quote-card__meta { font-size: 12.5px; color: var(--rb-muted); line-height: 1.4; } .rb-quote-card__more { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--rb-accent-deep); text-decoration: none; } .rb-quote-card__more:hover { text-decoration: underline; } /* "Отзывы о нас" — виджет Я.Карт нельзя перестилизовать изнутри (сторонний iframe), поэтому оформление даём снаружи: карточка в общем языке сайта (.rb-content-card-подобный фон/радиус/тень) вместо голого плавающего iframe с инлайн-стилями. */ .rb-reviews-block { background: var(--rb-tint-grey); border-radius: 24px; padding: 40px 32px; margin-top: 48px; text-align: center; } .rb-reviews-block__head { max-width: 560px; margin: 0 auto 24px; } .rb-reviews-block__lead { margin: 8px 0 0; color: var(--rb-muted); } .rb-reviews-block__frame { position: relative; max-width: 760px; height: 620px; margin: 0 auto; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 36px -28px rgba(10, 10, 11, .22); } .rb-reviews-block__frame iframe { width: 100%; height: 100%; border: none; display: block; } .rb-reviews-block__ya-link { box-sizing: border-box; text-decoration: none; color: #b3b3b3; font-size: 10px; font-family: "YS Text", sans-serif; position: absolute; bottom: 8px; left: 0; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 16px; } @media (max-width: 767px) { .rb-reviews-block { padding: 28px 20px; border-radius: 18px; } .rb-reviews-block__frame { height: 520px; } } /* ---------- /docs/requisites/ — таблица реквизитов ---------- */ .rb-requisites-table__wrap { margin: 32px 0; border: 1px solid var(--rb-border); border-radius: 20px; overflow: hidden; } .rb-requisites-table { width: 100%; border-collapse: collapse; } .rb-requisites-table tr:nth-child(odd) { background: var(--rb-tint-grey); } .rb-requisites-table th, .rb-requisites-table td { padding: 14px 20px; text-align: left; font-size: 14.5px; line-height: 1.5; vertical-align: top; } .rb-requisites-table th { width: 38%; font-weight: 500; color: var(--rb-muted); white-space: nowrap; } .rb-requisites-table td { color: var(--rb-ink); word-break: break-word; } .rb-requisites-download { margin-bottom: 40px; } @media (max-width: 640px) { .rb-requisites-table th, .rb-requisites-table td { display: block; width: auto; padding: 10px 16px 0; white-space: normal; } .rb-requisites-table td { padding-top: 2px; padding-bottom: 12px; } }