у .bl…has(picture)) описана точечно ниже. */
/* Контейнер секции формы */
.container.order,
.bl.section_padding_100:has(picture) > .container {
max-width: var(--ds-container, 1440px); margin: 0 auto; box-sizing: border-box;
padding: 24px var(--ds-gutter);
}
.container.order { margin-top: 24px; padding-top: 8px; padding-bottom: 20px; background-image: none !important; }
/* ── Утилита .sr-only (screen-reader only) ──────────────────────────────────
Стандартный WCAG-паттерн: элемент остаётся в DOM для скрин-ридеров, но
визуально не занимает места. Используется на подписях полей форм, где
плейсхолдер уже даёт визуальную подсказку («Имя», «Телефон»), а сам label
нужен только для доступности. Разметку CMS помечаем классом sr-only —
тогда работает без специальных селекторов по контексту. */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Заголовок над формой */
.container.order .h2, .container.order p.h2,
.bl.section_padding_100:has(picture) .to_animate .h2 {
display: block;
font: var(--ds-fw-medium) var(--ds-h4)/var(--ds-h4-lh) var(--ds-font);
color: var(--ds-text); margin: 0 0 8px;
}
.container.order .h2, .container.order p.h2 { text-align: center; }
.bl.section_padding_100:has(picture) .to_animate {
text-align: left; margin: 0 0 16px;
font: var(--ds-fw-medium) var(--ds-h4)/var(--ds-h4-lh) var(--ds-font);
color: var(--ds-text);
}
.bl.section_padding_100:has(picture) .to_animate noindex p,
.bl.section_padding_100:has(picture) .to_animate > p:not(:has(.h2)) {
font: var(--ds-fw-regular) var(--ds-body-m)/var(--ds-body-m-lh) var(--ds-font);
color: var(--ds-text-2); margin: 0;
}
/* Убираем лишний
и margin у с заголовком → компактная шапка формы */
.bl.section_padding_100:has(picture) .to_animate br,
.container.order .to_animate br { display: none; }
.bl.section_padding_100:has(picture) .to_animate > p,
.bl.section_padding_100:has(picture) .to_animate p.text-center,
.container.order .to_animate > p { margin: 0 0 4px; line-height: 1.2; }
.bl.section_padding_100:has(picture) .to_animate noindex,
.container.order .to_animate noindex { display: block; }
/* 2-колоночная сетка «форма | фото».
max-width НЕ ограничиваем — форма занимает всю доступную ширину контейнера
(у `.container.order` свои padding: 24px var(--ds-gutter)). Иначе колонка
формы получалась ~484px, тогда как на Главной (col-md-5 в container) она
~639px — визуально «уже», не совпадала с эталонной формой. */
.container.order form.ajax_form {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 32px; align-items: center; max-width: none; margin: 0 auto; position: relative;
}
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) {
display: grid !important; grid-template-columns: 1fr 1fr; gap: 32px;
align-items: stretch; margin: 0;
}
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) > [class*="col-"] {
width: auto !important; max-width: none !important; min-width: 0 !important;
float: none !important; padding: 0; margin: 0;
}
/* Колонка формы */
.container.order form.ajax_form .row.my-row {
grid-column: 1; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0;
}
.container.order form.ajax_form .col-sm-6 { width: 100%; max-width: none; float: none; padding: 0; margin: 0; }
.container.order form.ajax_form .col-sm-6 > div { display: flex; flex-direction: column; gap: 14px; }
.container.order form.ajax_form br { display: none; }
.bl.section_padding_100 .quote-form { display: flex; flex-wrap: wrap; gap: 12px; text-align: left; }
.bl.section_padding_100 .quote-form > .form-group,
.bl.section_padding_100 .quote-form > .input-group,
.bl.section_padding_100 .quote-form > .row { flex: 1 1 100%; width: 100%; margin: 0; min-width: 0; }
/* Фото менеджера */
.container.order form.ajax_form::after {
content: ""; grid-column: 2; align-self: center; justify-self: center;
width: 100%; max-width: 400px; aspect-ratio: 480 / 720;
background: url("/assets/template/newdesign/images/operator-gpm.png") center / cover no-repeat;
border-radius: 28px;
}
.bl.section_padding_100:has(picture) [class*="col-"]:has(picture) {
display: flex; align-self: center; justify-content: center; align-items: center;
}
/* Картинка формы «Оставьте заявку» на Главной. Раньше picture растягивался на
всю высоту формы (~600px, стретч колонки) и получал object-fit:cover; исходник
операторши — портретный 760×1140 (2:3), поэтому в широком боксе верх и низ
срезались — обрезалась голова. Ограничиваем ширину до 400px и фиксируем
портретный аспект 2:3 — так же, как у `.container.order form.ajax_form::after`
на страницах услуг (визуально одинаковая карточка сотрудника). */
.bl.section_padding_100:has(picture) picture {
position: relative; display: block;
width: 100%; max-width: 400px; aspect-ratio: 480 / 720; box-sizing: border-box;
background: linear-gradient(135deg, #f3ecfd 0%, #fdeef1 100%);
border-radius: var(--ds-r-block, 28px); overflow: hidden;
}
.bl.section_padding_100:has(picture) picture img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; display: block; margin: 0; border-radius: 0;
}
/* сетка формы+картинки: картинка фиксированного портретного аспекта, центрируется
по вертикали относительно формы (была стретч на всю высоту — приводило к обрезке
портрета «под альбом» и срезу головы). */
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) { align-items: center !important; }
/* Кнопка отправки — на всю ширину; вид/состояния из .ds-btn */
.container.order [type="submit"],
.container.order button[type="submit"],
.bl.section_padding_100 .quote-form .theme_button,
.bl.section_padding_100 .quote-form button[type="submit"],
.bl.section_padding_100 .quote-form .btn_main_form {
display: flex; width: 100%; height: 56px; margin-top: 12px;
align-items: center; justify-content: center;
font-size: var(--ds-body-m);
}
/* Отступ строки согласия/кнопки в .quote-form (было точечно в services.css) */
.bl.section_padding_100 .quote-form .text-center,
.bl.section_padding_100 .quote-form > .row > [class*="col-"]:has(button[type="submit"]) { width: 100%; }
.bl.section_padding_100 .quote-form > .row > [class*="col-"]:has(button[type="submit"]),
.bl.section_padding_100 .quote-form > .row > [class*="col-"]:has(.theme_button) { margin-top: 20px; }
/* Мобилка: 1 колонка, фото сверху над формой — визуально одинаково с
`.bl.section_padding_100:has(picture)` (order:-1 у колонки с picture). */
@media (max-width: 899px) {
.container.order form.ajax_form {
display: flex; flex-direction: column; gap: 20px;
grid-template-columns: none;
/* На десктопе форма — grid с align-items: center (вертикально по центру
фото); в flex-col это же значение центрирует поля по горизонтали, и
ряды получают меньшую внутреннюю ширину — поля выглядят «уже», чем на
Главной. Сбрасываем на stretch, чтобы ряды занимали всю ширину формы. */
align-items: stretch;
}
.container.order form.ajax_form::after {
order: -1; grid-column: auto; align-self: center;
/* max-width 400 — как у picture на Главной (design-system правило выше);
в узком контейнере реальная ширина ограничится гуттером, но пропорция
остаётся портретной 2:3. */
width: 100%; max-width: 400px; aspect-ratio: 480 / 720;
}
}
@media (max-width: 767px) {
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) { grid-template-columns: 1fr; gap: 30px; }
/* Порядок на мобилке: заголовок → текст → картинка → поля. Раньше здесь
col с picture получал order:-1 и уходил ПЕРЕД заголовком/текстом (они
внутри соседнего col-md-5). Делаем col-md-5 сеткой прозрачной через
display: contents — .to_animate (заголовок+текст) и form.quote-form
становятся прямыми grid-item'ами row'а; тогда picture-колонку через
order:2 ставим между ними. */
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) > [class*="col-"]:not(:has(picture)) {
display: contents;
}
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) > .to_animate,
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) > [class*="col-"]:not(:has(picture)) > .to_animate { order: 1; }
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) > [class*="col-"]:has(picture) { order: 2; }
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) > form,
.bl.section_padding_100:has(picture) .row:has(> [class*="col-"] > picture) > [class*="col-"]:not(:has(picture)) > form { order: 3; }
}
/* ── Блок «Готовые решения для бизнеса» (.solution) ────────────────────────
Раньше блок был описан в service.css и corporate.css почти построчно
(~35 строк × 2). Общий каркас: контейнер, 2-колоночная сетка, карточка,
типографика, цена-акцент, CTA-строка. */
.newtemplate .solution,
.corp-page .solution {
max-width: var(--ds-container, 1440px); margin: 56px auto 0;
padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); box-sizing: border-box;
}
.newtemplate .solution p.h2, .newtemplate .solution .h2 { text-align: center; }
.newtemplate .solution .row.my-row,
.corp-page .solution .row.my-row {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 0;
}
.newtemplate .solution .col-sm-6,
.corp-page .solution .col-sm-6 { width: auto; max-width: none; float: none; }
/* Карточка (фон/рамка/радиус — .ds-card). Здесь только padding. */
.newtemplate .solution .row.my-row > .col-sm-6 { padding: 28px 28px 40px; box-sizing: border-box; margin: 0; }
.corp-page .solution .row.my-row > .col-sm-6 { padding: 24px 26px; box-sizing: border-box; margin: 0; }
/* Внутри карточки: заголовки и «цена/акцент» */
.newtemplate .solution .sol-card,
.corp-page .solution .sol-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; height: 100%; }
.newtemplate .solution .sol-card > *,
.corp-page .solution .sol-card > * { text-align: left; align-self: flex-start; margin-left: 0; }
.newtemplate .solution .sol-card .h3,
.newtemplate .solution .col-sm-6 .h3,
.newtemplate .solution .col-sm-6 strong,
.corp-page .solution .col-sm-6 h2, .corp-page .solution .col-sm-6 h3,
.corp-page .solution .col-sm-6 .h2, .corp-page .solution .col-sm-6 .h3,
.corp-page .solution .col-sm-6 strong {
font: var(--ds-fw-medium) var(--ds-h5)/var(--ds-h5-lh) var(--ds-font);
color: var(--ds-text); margin: 0 0 8px; display: block;
}
.newtemplate .solution .sol-card .alt,
.newtemplate .solution .col-sm-6 p:last-child,
.newtemplate .solution [class*="price"],
.corp-page .solution .col-sm-6 p:last-child,
.corp-page .solution [class*="price"], .corp-page .solution .red {
color: var(--ds-brand); font-weight: var(--ds-fw-medium);
}
.newtemplate .solution .sol-card .alt,
.newtemplate .solution .col-sm-6 p:last-child { margin-top: auto; padding-top: 14px; }
.newtemplate .solution .sol-card .alt span,
.newtemplate .solution .col-sm-6 p span { color: var(--ds-brand); font-weight: var(--ds-fw-semibold); }
/* CTA-строка снизу */
.newtemplate .solution .my-d-flex,
.corp-page .solution .my-d-flex {
display: flex; justify-content: center; gap: 16px; margin-top: 28px; flex-wrap: wrap;
}
/* Мобилка */
@media (max-width: 767px) {
.newtemplate .solution .row.my-row,
.corp-page .solution .row.my-row { grid-template-columns: 1fr; }
.corp-page .solution .my-d-flex { flex-direction: column; gap: 12px; margin-top: 24px; padding: 0; }
.corp-page .solution .my-d-flex .button,
.corp-page .solution .my-d-flex .button-red,
.corp-page .solution .my-d-flex a { width: 100%; margin: 0; box-sizing: border-box; justify-content: center; }
}
/* ── Блок «Наши гарантии» (.our_guarantees) ─────────────────────────────────
Раньше две независимые реализации в services.css и uslugi.css. Единый компонент. */
.our_guarantees,
.corp-page .our_guarantees {
max-width: var(--ds-container, 1440px); margin-left: auto; margin-right: auto;
padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); box-sizing: border-box;
}
.our_guarantees .pixel-guarantees { max-width: var(--ds-content); margin: 0 auto; padding: 0; }
.our_guarantees .pixel-guarantees__list {
display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; margin: 0;
}
/* Карточка: фон/рамка/радиус — компонент .ds-card. Здесь раскладка + hover.
!important нужен: в разметке чанка есть инлайновый