и добавляет
— гасим это,
чтобы поля встали в ряд, как в макете. */
.cm-formcard .cm-form__row > p { display: contents; }
.cm-formcard .cm-form__row br { display: none; }
.cm-formcard .wpcf7-form-control-wrap { flex: 1 1 190px; min-width: 0; }
.cm-formcard .cm-input { width: 100%; }
.cm-formcard .wpcf7-form > p:empty,
.cm-formcard .wpcf7-form .hidden-fields-container { display: none; }
.cm-formcard .cm-form__row--submit { gap: 16px; }
.cm-formcard .cm-form__row--submit .wpcf7-form-control-wrap { flex: 1 1 220px; }
.cm-formcard .wpcf7-list-item { margin: 0; }
.cm-formcard .wpcf7-list-item-label { font-size: 13px; }
.cm-formcard input[type="checkbox"] { margin-right: 6px; }
/* ==========================================================================
Работа над ошибками: размеры приведены к макету.
В PowerPoint 1 pt = 1.5 px при ширине слайда 1440 px, поэтому
13 pt → 19.5 px, 16 pt → 24 px, 21 pt → 31.5 px, 26 pt → 39 px.
========================================================================== */
/* основной текст: в макете 19.5 px, было 16 */
.cm-text, .cm-econom, .cm-list .elementor-icon-list-text,
.cm-card__body p, .cm-step__text {
font-size: 18px;
line-height: 28px;
}
/* кегль задаёт типографическая шкала (typography.css) */
.cm-crumbs { font-size: 15px; }
/* заголовки */
/* кегль задаёт типографическая шкала (typography.css) */
/* кегль задаёт типографическая шкала (typography.css) */
/* кегль задаёт типографическая шкала (typography.css) */
/* первый экран: ширины и положение как в макете */
.cm-hero__intro { max-width: 760px; }
.cm-h1 .elementor-heading-title { max-width: 734px; }
.cm-lead { max-width: 623px; }
.cm-econom { max-width: 623px; }
.cm-hero__photo img { max-width: 434px; }
.cm-hero__media { padding-top: 96px !important; }
/* карточка формы: 602 px ширины, поля 39 px, кнопка 230 px */
.cm-formcard { max-width: 602px; }
/* кегль — из пресета H3 */
.cm-formcard .cm-input { padding: 8px 16px; font-size: 18px; }
.cm-formcard input[type="submit"] { min-width: 230px; padding: 8px 22px; font-size: 18px; }
.cm-formcard .wpcf7-list-item-label,
.cm-formcard .cm-form__consent { font-size: 15px; line-height: 20px; }
.cm-formcard__messengers { font-size: 15px; }
/* карточки преимуществ и тарифов — размеры из макета */
/* кегль — из пресета Deck */
.cm-card__body p { font-size: 18px; line-height: 27px; }
/* кегль — из пресета Deck */
.cm-plan__head span { font-size: 24px; }
.cm-plan__head b { font-size: 26px; }
.cm-promo b { font-size: 24px; }
.cm-faq .elementor-tab-title { font-size: 24px; }
.cm-faq .elementor-tab-content { font-size: 18px; line-height: 28px; }
.cm-cta__contacts { font-size: 18px; line-height: 28px; }
@media (max-width: 767px) {
.cm-text, .cm-econom, .cm-list .elementor-icon-list-text,
.cm-card__body p { font-size: 15px; line-height: 23px; }
.cm-faq .elementor-tab-title { font-size: 18px; }
}
/* Первый экран: колонка текста шире, чтобы заголовок вставал в две строки,
как в макете (734 px), а фото прибора было ровно 434 px и прижато вправо. */
.cm-hero__intro { width: 62% !important; max-width: none; padding-right: 24px !important; }
.cm-hero__media { width: 38% !important; padding-top: 128px !important; }
.cm-hero__photo { text-align: right; }
.cm-hero__photo img { max-width: 434px !important; width: 434px; margin-left: auto; }
.cm-h1 .elementor-heading-title { max-width: 734px; margin-bottom: 16px; }
.cm-lead { margin-bottom: 14px; }
.cm-hero__intro .elementor-widget:not(:last-child) { margin-bottom: 0; }
.cm-formcard { margin-top: 0; }
.cm-econom { margin-top: 14px; }
/* поля формы: 230 и 292 px, как в макете */
.cm-formcard .cm-form__row .wpcf7-form-control-wrap:first-child { flex: 0 0 230px; }
.cm-formcard .cm-form__row .wpcf7-form-control-wrap:nth-child(2) { flex: 0 0 292px; }
@media (max-width: 991px) {
.cm-hero__intro { width: 100% !important; padding-right: 0 !important; }
.cm-formcard .cm-form__row .wpcf7-form-control-wrap { flex: 1 1 200px !important; }
}
/* Вертикальный ритм первого экрана — по отступам макета:
заголовок → лид 9 px, лид → форма 37 px, форма → текст об экономии 38 px. */
.cm-hero__intro .cm-lead { margin-top: 9px; margin-bottom: 0; }
.cm-hero__intro .cm-formcard { margin-top: 37px; }
.cm-hero__intro .cm-econom { margin-top: 38px; }
.cm-hero__media { padding-top: 175px !important; }
/* карточка формы: внутренние отступы, чтобы высота была 242 px как в макете */
.cm-formcard.elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap,
.cm-formcard > .elementor-widget-wrap { padding: 21px 26px 22px !important; }
.cm-formcard__title .elementor-heading-title { margin-bottom: 20px; }
.cm-formcard .cm-form__row { margin-bottom: 15px; }
.cm-formcard__messengers { margin-top: 14px; }
/* Зазор между карточками 24 px и высота синей шапки 89 px — как в макете.
Отступ даём колонке, поэтому сама карточка становится 289 px шириной. */
.cm-cards .cm-card,
.cm-plans .cm-plan,
.cm-steps .cm-step { padding: 0 12px !important; }
.cm-card__head .elementor-heading-title {
min-height: 89px;
display: flex;
align-items: center;
padding: 14px 20px;
}
.cm-card__body { min-height: 191px; }
.cm-plan__head { min-height: 89px; display: flex; flex-direction: column; justify-content: center; }
/* карточки шагов — тот же зазор */
.cm-steps .cm-step > .elementor-widget-wrap { border-radius: var(--cm-radius); }
/* В макете текст внутри карточек мельче основного: блок 263×131 вмещает
~4 строки, что даёт примерно 16 px. */
.cm-card__body p { font-size: 16px; line-height: 24px; }
.cm-steps .cm-list .elementor-icon-list-text,
.cm-plans .cm-list .elementor-icon-list-text { font-size: 16px; line-height: 23px; }
/* кегль — из пресета Deck */
/* Elementor ставит отступ под каждым виджетом — между синей шапкой карточки
и её телом он лишний: в макете это единый блок 289×280. */
.cm-cards .cm-card .elementor-widget { margin-bottom: 0 !important; }
.cm-plans .cm-plan .elementor-widget-html { margin-bottom: 0 !important; }
/* ---------------------------- Поиск в шапке ----------------------------- */
.cm-search { position: relative; display: flex; align-items: center; }
.cm-search__toggle {
border: 0; background: none; cursor: pointer; padding: 4px;
color: var(--cm-muted); line-height: 0;
}
.cm-search__toggle:hover,
.cm-search[data-open] .cm-search__toggle { color: var(--cm-blue); }
.cm-search__toggle .cm-ico { width: 21px; height: 21px; }
.cm-search__form {
position: absolute;
top: calc(100% + 12px);
right: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 8px;
width: 320px;
padding: 10px;
background: #fff;
border-radius: var(--cm-radius);
box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
}
.cm-search__form[hidden] { display: none; }
.cm-search__input {
flex: 1 1 auto; min-width: 0;
padding: 9px 14px;
border: 1px solid var(--cm-grey);
border-radius: 8px;
font-size: 15px;
font-family: inherit;
color: var(--cm-dark);
}
.cm-search__input:focus { outline: none; border-color: var(--cm-blue); }
.cm-search__submit {
flex: 0 0 auto;
border: 0; border-radius: 8px; cursor: pointer;
background: var(--cm-blue); color: #fff;
padding: 9px 12px; line-height: 0;
}
.cm-search__submit:hover { background: var(--cm-blue-dark); }
/* страница результатов поиска */
.cm-searchpage__form { display: flex; gap: 10px; max-width: 560px; margin-bottom: 24px; }
.cm-searchpage__form input {
flex: 1 1 auto; padding: 11px 16px; border: 1px solid var(--cm-grey);
border-radius: 8px; font-size: 16px; font-family: inherit;
}
.cm-searchpage__form button {
border: 0; border-radius: 8px; background: var(--cm-blue); color: #fff;
padding: 11px 24px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cm-searchpage__count { color: var(--cm-muted); margin-bottom: 18px; }
.cm-searchpage__list { list-style: none; padding: 0; margin: 0; }
.cm-searchpage__list li { padding: 16px 0; border-bottom: 1px solid var(--cm-grey); }
.cm-searchpage__list a { font-size: 19px; font-weight: 600; color: var(--cm-blue) !important; }
.cm-searchpage__list p { margin: 6px 0 0; color: var(--cm-dark); font-size: 16px; }
/* логотип: чуть меньше и вплотную к левому краю контента, как в макете */
.cm-header__logo img { height: 32px; }
.cm-header { --cm-header-pad: 40px; }
/* текст в списках — тёмный, как в макете (глобальная палитра красит ссылки) */
.cm-list .elementor-icon-list-text,
.cm-list .elementor-icon-list-item > span { color: var(--cm-dark) !important; }
/* ---------------- Выравнивание отступов по макету ----------------------- */
/* В макете расстояние от конца блока до следующего заголовка ≈ 40 px,
а Elementor добавляет свой отступ под каждым виджетом — сокращаем. */
.cm-section { padding-top: 40px !important; padding-bottom: 0 !important; }
.cm-h2 .elementor-heading-title { margin-bottom: 14px; }
.cm-h3 .elementor-heading-title { margin-bottom: 10px; }
.cm-text { margin-bottom: 0; }
/* секции с фоном: внутренние поля 40 px, как в макете */
.cm-mint { padding: 40px 0 !important; margin-top: 40px; }
.cm-cta { padding: 40px 0 !important; margin-top: 40px; }
.cm-docs { padding-bottom: 40px !important; }
/* ряды карточек: отступ сверху 24 px от заголовка блока */
.cm-cards, .cm-plans, .cm-steps, .cm-compare { padding-top: 24px !important; }
/* списки и кнопки внутри секций не должны добавлять лишнюю высоту */
.cm-section .elementor-widget:last-child { margin-bottom: 0 !important; }
.cm-list { margin-bottom: 0; }
.cm-btnwrap { margin-top: 18px; }
/* ------- Выравнивание блоков «Как мы работаем» и «Тарифы» по макету -------
Макет: заголовок «Как мы работаем» на 2238, сам блок шагов на 2439 (высота 525);
секция с призывом на 3003; заголовок «Честная стоимость» на 3448; тарифы на 3605. */
.cm-steps { padding-top: 97px !important; }
.cm-steps .cm-step > .elementor-widget-wrap { min-height: 525px; }
.cm-price-head { padding-top: 54px !important; }
/* Акция в макете стоит слева под тарифами, шириной 603 px */
.cm-promo-sec { padding-top: 24px !important; }
.cm-promo { max-width: 603px; }
/* В макете карточки тарифов имеют разную высоту (264 / 293 / 442 / 293),
а не выровнены по самой высокой — иначе блок акции уезжает вниз. */
.cm-plans > .elementor-container { align-items: flex-start; }
.cm-plans .cm-plan > .elementor-widget-wrap { height: auto; }
.cm-plans .cm-plan .elementor-widget-icon-list { flex-grow: 0; }
.cm-promo-sec { padding-top: 0 !important; margin-top: -128px; }
@media (max-width: 991px) {
.cm-promo-sec { margin-top: 24px; }
}
/* ==========================================================================
Внутренние страницы: услуги, контакты, сертификаты, поддержка, о нас
========================================================================== */
.cm-hero--inner { padding-top: 28px !important; padding-bottom: 8px !important; }
/* кегль внутренних страниц — тот же H1 из шкалы */
.cm-section--last { padding-bottom: 48px !important; }
/* ---- Услуги: сетка карточек ---- */
.cm-svc-grid .cm-svc { padding: 0 12px !important; margin-bottom: 24px; }
.cm-svc > .elementor-widget-wrap {
background: #fff; border: 1px solid var(--cm-grey); border-radius: var(--cm-radius);
padding: 24px !important; height: 100%;
transition: box-shadow .2s, border-color .2s;
}
.cm-svc > .elementor-widget-wrap:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, .07); border-color: #cfe0ee;
}
.cm-svc .elementor-icon-box-icon {
width: 64px; height: 64px; margin: 0 0 16px !important;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #e6f2fb, #d8ecfa); border-radius: 14px;
}
.cm-svc .elementor-icon svg { width: 30px; height: 30px; fill: var(--cm-blue); }
.cm-svc .elementor-icon-box-wrapper { text-align: left; }
.cm-svc .elementor-icon-box-title { font-size: 19px !important; line-height: 26px; margin-bottom: 10px; }
.cm-svc .elementor-icon-box-title, .cm-svc .elementor-icon-box-title a { color: var(--cm-dark); }
.cm-svc .elementor-icon-box-description { font-size: 16px !important; line-height: 24px; color: var(--cm-dark); }
/* полоса с призывом внизу страницы */
.cm-cta-strip {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 18px 30px; padding: 26px 30px;
background: linear-gradient(135deg, #e6f2fb, #d8ecfa); border-radius: var(--cm-radius);
}
.cm-cta-strip b { display: block; font-size: 21px; color: var(--cm-dark); margin-bottom: 4px; }
.cm-cta-strip span { color: #5b6b78; font-size: 16px; }
/* ---- Контакты: отделы ---- */
.cm-deps .cm-dep { padding: 0 12px !important; margin-bottom: 24px; }
.cm-dep > .elementor-widget-wrap {
background: #fff; border: 1px solid var(--cm-grey); border-radius: var(--cm-radius);
padding: 24px 26px !important; height: 100%;
}
.cm-dep__title .elementor-heading-title { margin-bottom: 12px; }
.cm-list--dep .elementor-icon-list-text { font-size: 16px; line-height: 23px; }
.cm-dep__rows { margin-top: 16px; border-top: 1px solid var(--cm-grey); padding-top: 14px; }
.cm-dep__row { display: flex; gap: 12px; padding: 5px 0; font-size: 16px; }
.cm-dep__row span { flex: 0 0 130px; color: var(--cm-muted); }
.cm-dep__row b { font-weight: 600; color: var(--cm-dark); }
.cm-dep__row a { color: var(--cm-blue) !important; text-decoration: none !important; }
.cm-map {
width: 100%; height: 460px; border: 1px solid var(--cm-grey);
border-radius: var(--cm-radius); overflow: hidden;
}
.cm-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) { .cm-map { height: 320px; } }
/* ---- Сертификаты ---- */
.cm-certs .cm-cert-col { padding: 0 12px !important; margin-bottom: 24px; }
.cm-cert {
display: flex; flex-direction: column; height: 100%;
background: #fff; border: 1px solid var(--cm-grey); border-radius: var(--cm-radius);
padding: 16px; text-decoration: none !important;
transition: box-shadow .2s, border-color .2s;
}
.cm-cert:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .08); border-color: #cfe0ee; }
.cm-cert__img {
display: block; background: #f7fafd; border-radius: 8px; overflow: hidden;
margin-bottom: 14px; aspect-ratio: 3 / 4;
}
.cm-cert__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-cert__title {
display: block; color: var(--cm-dark); font-size: 16px; line-height: 23px;
font-weight: 600; margin-bottom: 10px; flex-grow: 1;
}
.cm-cert__link { display: inline-flex; align-items: center; gap: 7px; color: var(--cm-blue); font-size: 15px; font-weight: 600; }
.cm-cert__link::after {
content: ""; width: 14px; height: 14px; background-color: currentColor;
-webkit-mask: var(--ico-chevron) center / contain no-repeat;
mask: var(--ico-chevron) center / contain no-repeat;
transform: rotate(-90deg);
}
/* ---- Поддержка ---- */
.cm-support {
background: linear-gradient(135deg, #e6f2fb, #d8ecfa);
border-radius: var(--cm-radius); padding: 26px 28px;
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.cm-support__title { font-size: 17px; color: #5b6b78; }
.cm-support__phone { font-size: 28px; font-weight: 700; color: var(--cm-dark) !important; text-decoration: none !important; }
.cm-support__note { font-size: 14px; color: var(--cm-muted); }
.cm-support__mail { color: var(--cm-blue) !important; font-size: 16px; margin-bottom: 14px; text-decoration: none !important; }
.cm-links { display: flex; flex-wrap: wrap; gap: 14px; }
.cm-links a {
display: inline-flex; align-items: center; padding: 11px 20px;
border: 1.5px solid var(--cm-blue); border-radius: 8px;
color: var(--cm-blue) !important; font-weight: 600; text-decoration: none !important;
}
.cm-links a:hover { background: var(--cm-blue); color: #fff !important; }
/* ---- О нас ---- */
.cm-facts { display: flex; flex-direction: column; gap: 14px; }
.cm-facts > div {
background: #fff; border: 1px solid var(--cm-grey); border-radius: var(--cm-radius);
padding: 18px 20px;
}
.cm-facts b { display: block; font-size: 18px; color: var(--cm-dark); margin-bottom: 4px; }
.cm-facts span { color: #5b6b78; font-size: 16px; }
.cm-req { display: flex; flex-direction: column; gap: 2px; }
.cm-req > div { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cm-grey); font-size: 16px; }
.cm-req span { flex: 0 0 220px; color: var(--cm-muted); }
.cm-req b { font-weight: 600; }
.cm-req a { color: var(--cm-blue) !important; text-decoration: none !important; }
@media (max-width: 767px) {
.cm-svc-grid .cm-svc, .cm-deps .cm-dep, .cm-certs .cm-cert-col { padding: 0 !important; }
.cm-dep__row { flex-direction: column; gap: 2px; }
.cm-dep__row span, .cm-req span { flex: none; }
.cm-req > div { flex-direction: column; gap: 2px; }
}
/* Ряды из нескольких строк: Elementor по умолчанию ставит все колонки
в одну строку — включаем перенос. */
.cm-svc-grid > .elementor-container,
.cm-certs > .elementor-container,
.cm-deps > .elementor-container { flex-wrap: wrap; align-items: stretch; }
.cm-svc-grid .cm-svc { width: 33.33% !important; }
.cm-certs .cm-cert-col { width: 33.33% !important; }
.cm-deps .cm-dep { width: 50% !important; }
@media (max-width: 991px) {
.cm-svc-grid .cm-svc, .cm-certs .cm-cert-col { width: 50% !important; }
}
@media (max-width: 767px) {
.cm-svc-grid .cm-svc, .cm-certs .cm-cert-col, .cm-deps .cm-dep { width: 100% !important; }
}
/* карточка услуги: содержимое по левому краю */
.cm-svc .elementor-icon-box-wrapper,
.cm-svc .elementor-icon-box-content { text-align: left !important; }
.cm-svc .elementor-icon-box-icon { justify-content: center; }
/* Шапка во всю ширину: на узких экранах поля меньше */
@media (max-width: 1100px) { .cm-header__inner { padding: 14px 24px; } }
@media (max-width: 560px) { .cm-header__inner { padding: 12px 16px; } }
/* На узких экранах шапка должна оставаться в одну строку:
логотип поменьше, мессенджеры прячем — они есть в панели телефона. */
@media (max-width: 700px) {
.cm-header__inner { flex-wrap: nowrap; gap: 10px; }
.cm-header__logo img { height: 26px; }
.cm-header__messengers { display: none; }
.cm-header__actions { gap: 8px; }
.cm-nav { order: 5; }
}
@media (max-width: 420px) {
.cm-header__logo img { height: 22px; }
.cm-search { display: none; }
}
/* ==========================================================================
Единая сетка: шапка и секции страниц считают боковые поля по одной формуле,
поэтому логотип начинается ровно там же, где заголовок в первом экране.
Контент ограничен 1240 px, на узких экранах остаётся отступ 20 px.
========================================================================== */
:root { --cm-gutter: 20px; }
.cm-header__inner,
.elementor-section.elementor-section-boxed > .elementor-container {
/* ширину задаём полями, поэтому собственное ограничение Elementor снимаем —
иначе на широких экранах контент сжимается вдвое */
max-width: none !important;
width: 100%;
margin: 0;
padding-left: max(var(--cm-gutter), calc((100% - 1240px) / 2));
padding-right: max(var(--cm-gutter), calc((100% - 1240px) / 2));
}
/* вертикальные отступы шапки задаём отдельно, чтобы формула полей их не сбила */
.cm-header__inner { padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 700px) {
:root { --cm-gutter: 16px; }
.cm-header__inner { padding-top: 12px; padding-bottom: 12px; }
}
/* --------------------------- Модальное окно ----------------------------- */
.cm-modal { position: fixed; inset: 0; z-index: 3000; display: flex;
align-items: center; justify-content: center; padding: 20px; }
.cm-modal[hidden] { display: none; }
.cm-modal__overlay { position: absolute; inset: 0; background: rgba(17, 24, 32, .55); }
.cm-modal__box {
position: relative; z-index: 1; width: 100%; max-width: 560px;
max-height: 92vh; overflow-y: auto;
background: #fff; border-radius: 16px; padding: 30px 32px 26px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
.cm-modal__close {
position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
border: 0; border-radius: 50%; background: var(--cm-grey); cursor: pointer;
}
.cm-modal__close::before, .cm-modal__close::after {
content: ""; position: absolute; left: 10px; top: 16px; width: 14px; height: 2px;
background: var(--cm-dark); border-radius: 2px;
}
.cm-modal__close::before { transform: rotate(45deg); }
.cm-modal__close::after { transform: rotate(-45deg); }
.cm-modal__close:hover { background: #dfe1e3; }
.cm-modal__title { font-size: 24px; font-weight: 600; color: var(--cm-dark); margin-bottom: 8px; }
.cm-modal__sub { color: #5b6b78; font-size: 16px; line-height: 24px; margin: 0 0 18px; }
.cm-formcard--modal { max-width: none; }
.cm-formcard--modal > .elementor-widget-wrap,
.cm-modal .cm-formcard { background: var(--cm-blue); border-radius: var(--cm-radius); padding: 20px 22px; }
.cm-modal .cm-form__row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.cm-modal .cm-form__row > p { display: contents; }
.cm-modal .cm-form__row br { display: none; }
.cm-modal .wpcf7-form-control-wrap { flex: 1 1 180px !important; min-width: 0; }
.cm-modal .cm-input { width: 100%; padding: 10px 16px; border: 0; border-radius: 8px;
font-size: 16px; font-family: inherit; }
.cm-modal input[type="submit"] {
border: 0; border-radius: 8px; background: var(--cm-teal); color: #0b3b37;
padding: 10px 24px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cm-modal .wpcf7-list-item-label { color: rgba(255,255,255,.9); font-size: 13px; }
.cm-modal .wpcf7-response-output { color: #fff; border-color: rgba(255,255,255,.5) !important; }
.cm-modal__contacts { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.cm-modal__contacts a { font-size: 20px; font-weight: 700; color: var(--cm-dark) !important;
text-decoration: none !important; }
.cm-modal__contacts span { color: var(--cm-muted); font-size: 14px; }
/* ------------- Иконки в карточках услуг — по центру --------------------- */
.cm-svc .elementor-icon-box-wrapper,
.cm-svc .elementor-icon-box-content { text-align: center !important; }
.cm-svc .elementor-icon-box-icon { margin: 0 auto 16px !important; }
/* карточки услуг на главной: иконка по центру (класс из прежней вёрстки) */
.solution-tile__icon { margin-left: auto; margin-right: auto; }
/* поиск теперь стоит сразу после меню */
.cm-nav { margin-right: 10px; }
.cm-search { margin-right: auto; }
/* Кнопка «Подробнее» в карточке услуги: пилюля с обводкой и стрелкой,
при наведении заливается фирменным синим. */
.cm-svc__more {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: auto;
padding: 11px 24px;
border: 1.5px solid var(--cm-blue);
border-radius: 100px;
background: #fff;
color: var(--cm-blue) !important;
font-size: 15px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
text-decoration: none !important;
transition: background-color .2s, color .2s, box-shadow .2s;
}
.cm-svc__more::after {
content: ""; width: 15px; height: 15px; flex-shrink: 0;
background-color: currentColor;
-webkit-mask: var(--ico-arrow) center / contain no-repeat;
mask: var(--ico-arrow) center / contain no-repeat;
transition: transform .2s;
}
.cm-svc__more:hover,
.cm-svc__more:focus-visible {
background: var(--cm-blue);
color: #fff !important;
box-shadow: 0 6px 16px rgba(0, 123, 212, .3);
}
.cm-svc__more:hover::after { transform: translateX(3px); }
.cm-svc__more:focus-visible { outline: 2px solid var(--cm-blue); outline-offset: 3px; }
:root {
--ico-arrow: url("data:image/svg+xml,");
}
.cm-svc > .elementor-widget-wrap { display: flex; flex-direction: column; align-items: center; }
.cm-svc .elementor-widget-icon-box { width: 100%; }
.cm-svc .elementor-widget-html { margin-bottom: 0 !important; }
/* страница услуги: боковой блок */
.cm-svc-detail .cm-aside {
background: linear-gradient(135deg, #e6f2fb, #d8ecfa);
border-radius: var(--cm-radius); padding: 24px 26px;
}
.cm-aside__title { font-size: 19px; font-weight: 600; color: var(--cm-dark); margin-bottom: 12px; }
.cm-aside ul { list-style: none; padding: 0; margin: 0 0 18px; }
.cm-aside li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 16px; line-height: 23px; }
.cm-aside li::before {
content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
border-radius: 50%; background: var(--cm-blue);
}
/* страница ПО: карточки с номерами */
.cm-soft-grid > .elementor-container { flex-wrap: wrap; align-items: stretch; }
.cm-soft-grid .cm-soft { width: 33.33% !important; padding: 0 12px !important; margin-bottom: 24px; }
.cm-soft > .elementor-widget-wrap {
position: relative; display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--cm-grey); border-radius: var(--cm-radius);
padding: 24px !important; height: 100%;
transition: box-shadow .2s, border-color .2s;
}
.cm-soft > .elementor-widget-wrap:hover { box-shadow: 0 8px 24px rgba(0,0,0,.07); border-color: #cfe0ee; }
.cm-soft__num {
position: absolute; top: 18px; right: 22px;
font-size: 30px; font-weight: 700; color: #e3ecf4; line-height: 1;
}
.cm-soft .elementor-icon-box-icon {
width: 64px; height: 64px; margin: 0 0 16px !important;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #e6f2fb, #d8ecfa); border-radius: 14px;
}
.cm-soft .elementor-icon svg { width: 30px; height: 30px; fill: var(--cm-blue); }
.cm-soft .elementor-icon-box-wrapper, .cm-soft .elementor-icon-box-content { text-align: left !important; }
.cm-soft .elementor-icon-box-title { font-size: 18px !important; line-height: 25px; margin-bottom: 10px; }
.cm-soft .elementor-icon-box-description { font-size: 16px !important; line-height: 24px; }
.cm-soft .elementor-widget-icon-box { flex-grow: 1; margin-bottom: 12px !important; }
.cm-soft__price { color: var(--cm-blue); font-weight: 600; font-size: 16px; }
.cm-soft .elementor-widget-html:first-child { margin-bottom: 0 !important; }
@media (max-width: 991px) { .cm-soft-grid .cm-soft { width: 50% !important; } }
@media (max-width: 767px) { .cm-soft-grid .cm-soft { width: 100% !important; padding: 0 !important; } }
/* Иконка внутри плитки: стили виджета Elementor подключаются позже наших,
поэтому центрирование задаём принудительно — иначе значок прижимается
к левому верхнему углу подложки. */
.cm-soft .elementor-icon-box-icon,
.cm-svc .elementor-icon-box-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.cm-soft .elementor-icon,
.cm-svc .elementor-icon {
display: flex !important;
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 0 !important;
line-height: 0;
}
.cm-soft .elementor-icon svg,
.cm-svc .elementor-icon svg { display: block; }
/* ==========================================================================
Текст на цветной подложке — белый.
Глобальная палитра Elementor красит все заголовки в тёмный, поэтому
для блоков с синим фоном цвет задаём явно.
========================================================================== */
.cm-formcard .cm-formcard__title .elementor-heading-title,
.cm-formcard__title .elementor-heading-title,
.cm-card__head .elementor-heading-title,
.cm-plan__head,
.cm-plan__head span,
.cm-plan__head b,
.cm-modal .cm-formcard__title .elementor-heading-title {
color: #fff !important;
}
/* подписи и мелкий текст внутри синей карточки заявки */
.cm-formcard .wpcf7-list-item-label,
.cm-formcard .cm-form__consent,
.cm-formcard__messengers,
.cm-formcard__messengers a,
.cm-formcard .wpcf7-response-output { color: rgba(255, 255, 255, .92) !important; }
/* на светлых подложках (мятная секция, серый призыв, градиентные блоки)
заголовки остаются тёмными — это цвет из палитры, ничего не переопределяем */
/* ==========================================================================
Страница «Установка теплосчетчиков» (page-id-49)
========================================================================== */
/* заголовки чуть плотнее по начертанию */
.page-id-49 .cm-formcard__title .elementor-heading-title,
.page-id-49 .cm-card__head .elementor-heading-title,
.page-id-49 .cm-step__title .elementor-heading-title,
.page-id-49 .cm-plan__head span,
.page-id-49 .cm-plan__head b,
.page-id-49 .cm-promo b { font-weight: 700; }
/* Блок акции больше не поднимаем под тарифы: при разной высоте карточек
он налезал на соседние элементы — ставим его обычным потоком, ниже. */
.cm-promo-sec { margin-top: 0 !important; padding-top: 32px !important; }
.cm-promo { max-width: 100%; }
/* ---------------- Подсказка под фотографией (приглашение в чат) ----------
Блок закреплён поверх нижней части фотографии и не закрывается. */
.cm-hero__media { position: relative; }
.cm-hint {
position: absolute;
right: 0;
bottom: -18px;
z-index: 3;
width: 300px;
padding: 18px 20px 46px;
background: #ED2939;
border-radius: 14px;
box-shadow: 0 10px 26px rgba(237, 41, 57, .28);
text-align: left;
}
.cm-hint__text {
margin: 0;
color: #fff;
font-size: 16px;
line-height: 23px;
}
.cm-hint__btn {
position: absolute;
right: 16px; bottom: -26px;
width: 62px; height: 62px;
display: flex; align-items: center; justify-content: center;
border: 4px solid #fff;
border-radius: 50%;
background: #ED2939;
color: #fff;
cursor: pointer;
box-shadow: 0 8px 20px rgba(237, 41, 57, .35);
transition: transform .2s, box-shadow .2s;
}
.cm-hint__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(237, 41, 57, .45); }
.cm-hint__btn .cm-ico { width: 28px; height: 28px; }
.cm-ico--chat { -webkit-mask-image: var(--ico-chat); mask-image: var(--ico-chat); }
:root {
--ico-chat: url("data:image/svg+xml,");
}
/* на планшете и мобильном фотографии нет — блок встаёт в обычный поток */
@media (max-width: 991px) {
.cm-hero__media { display: block !important; }
.cm-hero__media .cm-hero__photo { display: none; }
.cm-hint { position: static; width: 100%; max-width: 340px; margin: 0 0 40px; }
}
}
/* на планшете и мобильном фото скрыто — убираем отступ, который оно занимало */
@media (max-width: 991px) {
.cm-hero__media { padding-top: 0 !important; }
.cm-hint { margin-top: 0; }
}
/* ==========================================================================
Единая левая линия: содержимое всех блоков начинается от одной вертикали.
У колонок с карточками есть внутренние отступы, поэтому полю ряда даём
на столько же меньше — крайняя карточка встаёт ровно под заголовком,
а ширина ряда не выходит за экран.
========================================================================== */
.about-section > .elementor-container,
.cm-cards > .elementor-container,
.cm-plans > .elementor-container,
.cm-steps > .elementor-container,
.cm-compare > .elementor-container,
.cm-svc-grid > .elementor-container,
.cm-certs > .elementor-container,
.cm-deps > .elementor-container,
.cm-soft-grid > .elementor-container {
padding-left: calc(max(var(--cm-gutter), (100% - 1240px) / 2) - 12px) !important;
padding-right: calc(max(var(--cm-gutter), (100% - 1240px) / 2) - 12px) !important;
}
.services-section--cards > .elementor-container,
.object-section--cards > .elementor-container {
padding-left: calc(max(var(--cm-gutter), (100% - 1240px) / 2) - 15px) !important;
padding-right: calc(max(var(--cm-gutter), (100% - 1240px) / 2) - 15px) !important;
}
/* кнопки первого экрана — от той же линии */
.hero-btn-box { margin-left: 0; }
.hero-section .hero-btn-box > div:first-child { margin-left: 0; padding-left: 0; }
/* ------------------------------- Подвал --------------------------------- */
/* был на своей сетке (поля 28 px и своя максимальная ширина) —
переводим на общие поля, чтобы логотип встал под логотипом шапки */
.site-footer__main,
.site-footer__bottom {
max-width: none;
margin: 0;
padding-left: max(var(--cm-gutter), calc((100% - 1240px) / 2));
padding-right: max(var(--cm-gutter), calc((100% - 1240px) / 2));
}
.site-footer__main { padding-top: 64px; padding-bottom: 52px; }
.site-footer__bottom { padding-top: 20px; padding-bottom: 20px; }
@media (max-width: 991px) {
.site-footer__main { padding-top: 48px; padding-bottom: 40px; }
}
/* три карточки в ряду должны занимать ровно всю ширину (33% давало щель справа) */
.services-section--cards .elementor-column,
.object-section--cards .elementor-column,
.cm-cards .cm-card,
.cm-plans .cm-plan,
.cm-steps .cm-step { width: 33.3333% !important; }
.cm-cards .cm-card, .cm-plans .cm-plan { width: 25% !important; }
.cm-steps .cm-step { width: 25% !important; }
@media (max-width: 991px) {
.services-section--cards .elementor-column,
.object-section--cards .elementor-column,
.cm-cards .cm-card, .cm-plans .cm-plan, .cm-steps .cm-step { width: 50% !important; }
}
@media (max-width: 767px) {
.services-section--cards .elementor-column,
.object-section--cards .elementor-column,
.cm-cards .cm-card, .cm-plans .cm-plan, .cm-steps .cm-step { width: 100% !important; }
}
/* на планшете и мобильном колонка с фото занимает всю ширину,
иначе подсказка сжимается до ширины колонки */
@media (max-width: 991px) {
.cm-hero__media { width: 100% !important; }
.cm-hint { max-width: 340px; }
}
/* Цветные секции отделяем от предыдущего блока заметной белой полосой —
иначе серые карточки упираются прямо в мятный фон. */
.cm-mint { margin-top: 80px !important; }
.cm-cta { margin-top: 80px !important; }
@media (max-width: 767px) {
.cm-mint, .cm-cta { margin-top: 48px !important; }
}
/* Серое тело карточки растягивалось по height:100% и вылезало за пределы
колонки, наезжая на следующую секцию. Тянем его флексом внутри карточки. */
.cm-cards .cm-card > .elementor-widget-wrap { display: flex; flex-direction: column; }
.cm-cards .cm-card__body {
height: auto;
flex: 1 1 auto;
}
.cm-cards .cm-card .elementor-widget-text-editor { display: flex; flex-direction: column; flex: 1 1 auto; }
/* ==========================================================================
«Как мы работаем»: лента из стрелок и подробное описание шагов под ней
========================================================================== */
.cm-flow {
display: flex;
gap: 8px;
margin-top: 8px;
}
.cm-flow__item {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: var(--cm-blue);
color: #fff;
font-size: 19px;
font-weight: 700;
line-height: 26px;
padding: 20px 34px 20px 46px;
/* стрелка: острие справа, вырез слева */
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%,
0 100%, 26px 50%);
}
/* у первой стрелки левый край прямой */
.cm-flow__item:first-child {
padding-left: 30px;
clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}
.cm-flow__item span { display: block; }
@media (max-width: 991px) {
.cm-flow { flex-wrap: wrap; }
.cm-flow__item {
flex: 1 1 calc(50% - 8px);
font-size: 17px;
line-height: 23px;
padding: 16px 28px 16px 40px;
}
}
@media (max-width: 575px) {
.cm-flow__item { flex: 1 1 100%; }
}
/* текстовое раскрытие шагов */
.cm-steps-text { padding-top: 28px !important; }
.cm-step-block { margin-bottom: 22px; }
.cm-step-block:last-child { margin-bottom: 0; }
.cm-step__head .elementor-heading-title { margin-bottom: 10px; }
.cm-list--square .elementor-icon-list-icon svg {
width: 7px !important; height: 7px !important; fill: var(--cm-muted);
}
.cm-list--square .elementor-icon-list-icon { width: 7px; margin-top: 9px; }
.cm-list--square .elementor-icon-list-item { align-items: flex-start; }
.cm-list--square .elementor-icon-list-text { font-size: 18px; line-height: 27px; }
/* компактнее шаг: заголовок ближе к своему списку */
.cm-steps-text .cm-step-block { margin-bottom: 18px; }
.cm-steps-text .cm-step__head { margin-bottom: 0 !important; }
.cm-steps-text .cm-list { margin-top: 4px; }
/* описания шагов идут друг под другом, а не в ряд */
.cm-steps-text > .elementor-container { flex-direction: column; }
.cm-steps-text .cm-step-block { width: 100% !important; }
/* ==========================================================================
Мобильная версия: аккуратное выпадающее меню и возврат фотографии
========================================================================== */
/* Шапка держит одну строку, но при открытом меню разрешаем перенос,
иначе меню втискивается в строку узкой колонкой справа. */
@media (max-width: 1100px) {
.cm-header__inner { flex-wrap: nowrap; }
.cm-header[data-menu-open] .cm-header__inner { flex-wrap: wrap; }
.cm-nav {
display: none;
order: 10;
width: 100%;
margin: 0;
padding: 6px 0 4px;
border-top: 1px solid var(--cm-grey);
}
.cm-header[data-menu-open] .cm-nav { display: block; }
.cm-nav__list {
flex-direction: column;
align-items: stretch;
gap: 0;
}
.cm-nav__list > li > a {
padding: 12px 2px;
font-size: 16px;
border-bottom: 1px solid #f2f3f4;
}
.cm-nav__list > li:last-child > a { border-bottom: 0; }
/* бургер превращается в крестик, когда меню открыто */
.cm-header[data-menu-open] .cm-burger span { background: transparent; }
.cm-header[data-menu-open] .cm-burger span::before { top: 0; transform: rotate(45deg); }
.cm-header[data-menu-open] .cm-burger span::after { top: 0; transform: rotate(-45deg); }
.cm-burger span, .cm-burger span::before, .cm-burger span::after { transition: transform .2s, top .2s, background .2s; }
}
/* Фотография инженера нужна и на мобильном — просто меньше по размеру,
подсказка встаёт под ней обычным блоком. */
@media (max-width: 991px) {
.cm-hero__media { display: block !important; width: 100% !important; padding-top: 8px !important; }
.cm-hero__media .cm-hero__photo { display: block !important; text-align: center; }
.cm-hero__photo img { width: 300px !important; max-width: 80% !important; margin: 0 auto; }
.cm-hint { position: static; width: 100%; max-width: 100%; margin: 14px 0 40px; }
.cm-hint__btn { right: 14px; bottom: -22px; width: 54px; height: 54px; }
}
/* карточка услуги: кнопка прижата к низу, поэтому в ряду кнопки на одной линии */
.cm-svc > .elementor-widget-wrap { height: 100%; }
.cm-svc .elementor-widget-icon-box { flex-grow: 1; }
/* ---------------- Текстовые страницы (гарантии, оплата, политика) ------- */
.cm-article .cm-h2 .elementor-heading-title { margin: 22px 0 12px; }
.cm-article .elementor-widget:first-child .elementor-heading-title { margin-top: 0; }
.cm-article .cm-text { margin-bottom: 12px; }
.cm-article .cm-list { margin-bottom: 16px; }
/* ---------------- Реализованные объекты --------------------------------- */
.cm-objects > .elementor-container { flex-wrap: wrap; align-items: stretch; }
.cm-objects .cm-obj { width: 33.3333% !important; padding: 0 12px !important; margin-bottom: 24px; }
.cm-obj > .elementor-widget-wrap {
background: #fff; border: 1px solid var(--cm-grey); border-radius: var(--cm-radius);
overflow: hidden; height: 100%; padding: 0 !important;
}
.cm-obj .elementor-widget { margin-bottom: 0 !important; }
.cm-obj__img img { width: 100%; height: 210px; object-fit: cover; display: block; }
/* кегль и начертание — из пресета Deck */
.cm-obj__title .elementor-heading-title {
color: var(--cm-dark);
padding: 18px 20px 8px;
}
.cm-obj .cm-list--obj { padding: 0 20px 20px; }
.cm-obj .cm-list--obj .elementor-icon-list-text { font-size: 15px; line-height: 22px; }
@media (max-width: 991px) { .cm-objects .cm-obj { width: 50% !important; } }
@media (max-width: 767px) { .cm-objects .cm-obj { width: 100% !important; padding: 0 !important; } }
/* кнопка «Подробнее» — по центру карточки услуги */
.cm-svc .elementor-widget-html { text-align: center; }
.cm-svc__more { margin-left: auto; margin-right: auto; }
/* ---------------- Главная: блок преимуществ и заголовки секций ----------- */
/* Текст в карточке начинался с отступа сверху — прижимаем его к иконке. */
.about-section .about-col .elementor-widget-image { margin-bottom: 4px !important; }
.about-section .about-col .elementor-widget-text-editor { margin-top: 0 !important; }
.about-section .about-col p,
.about-section .about-col span { margin: 0; text-indent: 0; }
/* Заголовки секций главной — по центру */
.services-section--head .title .elementor-heading-title,
.object-section--head .title .elementor-heading-title,
.software-new--home .title .elementor-heading-title {
text-align: center;
}
.software-new--home .software-new__intro-wrap { text-align: center; }
/* Карточки преимуществ: содержимое по центру карточки и одинаковый воздух
вокруг него — иначе при разном числе строк текст то упирается в низ,
то оставляет пустоту. */
.about-section .about-col > .elementor-widget-wrap {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 158px;
/* боковые поля узкие: «Приборы отечественного» — 180 px, и при поле 18 px
фраза занимала 94 % строки. Стоило шрифту отрисоваться чуть шире
(другой браузер, зум, ещё не загруженный Roboto) — и она рвалась на три
строки, где одинокое центрированное «Приборы» читается как отступ
первой строки. С полем 8 px под текст остаётся 213 px — запас есть. */
padding: 22px 8px !important;
}
.about-section .about-col .elementor-widget-image { margin-bottom: 12px !important; }
/* текст блочный и во всю колонку: у инлайнового span ширина равна самой
длинной строке, из-за чего центрирование считалось не от края карточки */
.about-section .about-col .elementor-widget-text-editor { width: 100%; }
.about-section .about-col .elementor-widget-text-editor p,
.about-section .about-col .elementor-widget-text-editor span {
display: block;
width: 100%;
text-align: center;
}
.about-section .about-col img { width: 36px; height: 36px; }
@media (max-width: 767px) {
.about-section .about-col > .elementor-widget-wrap { min-height: 0; padding: 20px 10px !important; }
}
/* ---------------- Форма заявки: быстрые контакты и ошибки --------------- */
/* Под формой — прямой выход на связь: не все готовы ждать звонка. */
.cm-form__contacts {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin-top: 18px; padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, .18);
}
.cm-form__contacts-title {
color: rgba(255, 255, 255, .75); font-size: 13px; line-height: 18px;
margin-right: 4px;
}
.cm-form__contacts-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cm-form__contact {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .35);
background: rgba(255, 255, 255, .08);
color: #fff !important; text-decoration: none !important;
font-size: 14px; line-height: 18px; font-weight: 500;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.cm-form__contact:hover {
background: rgba(255, 255, 255, .18);
border-color: rgba(255, 255, 255, .6);
transform: translateY(-1px);
}
.cm-form__contact .cm-ico { width: 17px; height: 17px; color: #fff; flex: 0 0 auto; }
@media (max-width: 600px) {
.cm-form__contacts { gap: 8px; }
.cm-form__contacts-list { width: 100%; }
.cm-form__contact { flex: 1 1 auto; justify-content: center; }
}
/* Ошибки. Стандартный вид Contact Form 7 — серая рамка и мелкий красный
текст — на синей карточке почти не читается, поэтому оформляем сами.
Подпись «Заполните это поле» под полем убрана: она ломала ряд и ничего
не добавляла к подсвеченной рамке. Для скринридеров текст сохраняем. */
.cm-formcard .wpcf7-not-valid-tip,
.cm-modal .wpcf7-not-valid-tip {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cm-formcard .wpcf7-not-valid,
.cm-modal .wpcf7-not-valid {
box-shadow: 0 0 0 2px #ffd166;
/* поле без подписи об ошибке — рамка должна быть заметной сама по себе */
}
.cm-formcard .wpcf7-acceptance.wpcf7-not-valid,
.cm-modal .wpcf7-acceptance.wpcf7-not-valid { box-shadow: none; }
/* Итоговое сообщение — плашка с иконкой вместо тонкой рамки */
.cm-formcard .wpcf7-response-output,
.cm-modal .wpcf7-response-output {
display: flex; align-items: flex-start; gap: 10px;
margin: 14px 0 0 !important; padding: 12px 14px !important;
border: 0 !important; border-radius: 10px;
font-size: 14px !important; line-height: 20px;
background: #fff;
color: var(--cm-dark) !important;
font-weight: 500;
animation: cm-form-msg .22s ease-out;
}
.cm-formcard .wpcf7-response-output::before,
.cm-modal .wpcf7-response-output::before {
content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
background: currentColor;
-webkit-mask: var(--cm-msg-ico) center / contain no-repeat;
mask: var(--cm-msg-ico) center / contain no-repeat;
/* по умолчанию — восклицательный знак в круге */
--cm-msg-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2V7zm0 9h2v2h-2v-2z'/%3E%3C/svg%3E");
}
/* успех — зелёная плашка с галочкой */
.cm-formcard form.sent .wpcf7-response-output,
.cm-modal form.sent .wpcf7-response-output {
background: #d6fbf6;
color: #0b3b37 !important;
box-shadow: inset 0 0 0 1px rgba(0, 212, 195, .8);
}
.cm-formcard form.sent .wpcf7-response-output::before,
.cm-modal form.sent .wpcf7-response-output::before {
color: #00a596;
--cm-msg-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6L17.8 9l-7 7z'/%3E%3C/svg%3E");
}
/* ошибка ввода и отказ отправки — жёлтая и красная плашки */
.cm-formcard form.invalid .wpcf7-response-output,
.cm-formcard form.unaccepted .wpcf7-response-output,
.cm-modal form.invalid .wpcf7-response-output,
.cm-modal form.unaccepted .wpcf7-response-output {
background: #fff4d6;
color: #6b4e00 !important;
box-shadow: inset 0 0 0 1px rgba(214, 158, 0, .55);
}
.cm-formcard form.invalid .wpcf7-response-output::before,
.cm-formcard form.unaccepted .wpcf7-response-output::before,
.cm-modal form.invalid .wpcf7-response-output::before,
.cm-modal form.unaccepted .wpcf7-response-output::before { color: #d69e00; }
.cm-formcard form.failed .wpcf7-response-output,
.cm-formcard form.aborted .wpcf7-response-output,
.cm-formcard form.spam .wpcf7-response-output,
.cm-modal form.failed .wpcf7-response-output,
.cm-modal form.aborted .wpcf7-response-output,
.cm-modal form.spam .wpcf7-response-output {
background: #ffe3e3;
color: #7a1f1f !important;
box-shadow: inset 0 0 0 1px rgba(214, 60, 60, .5);
}
.cm-formcard form.failed .wpcf7-response-output::before,
.cm-formcard form.aborted .wpcf7-response-output::before,
.cm-formcard form.spam .wpcf7-response-output::before,
.cm-modal form.failed .wpcf7-response-output::before,
.cm-modal form.aborted .wpcf7-response-output::before,
.cm-modal form.spam .wpcf7-response-output::before { color: #d63c3c; }
@keyframes cm-form-msg {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
/* индикатор отправки — «дышащая» кнопка вместо неподвижной */
.cm-formcard form.submitting input[type="submit"],
.cm-modal form.submitting input[type="submit"] { opacity: .7; cursor: progress; }
.wpcf7-spinner { background-color: rgba(255, 255, 255, .6); }
/* Быстрые контакты переехали внутрь формы — прежний ряд мессенджеров
под ней стал дублем. Скрываем без :has(), иначе в браузерах без его
поддержки (Safari до 15.4, Firefox до 121) дубль возвращается. */
.cm-formcard__messengers { display: none !important; }
/* Порядок внутри формы: поля → кнопка → итоговое сообщение → быстрые
контакты. Contact Form 7 всегда дописывает сообщение в конец формы, из-за
чего оно оказывалось ниже контактов и терялось. */
.cm-formcard .wpcf7-form,
.cm-modal .wpcf7-form { display: flex; flex-direction: column; }
.cm-formcard .wpcf7-form > *,
.cm-modal .wpcf7-form > * { order: 1; }
.cm-formcard .wpcf7-form > .wpcf7-response-output,
.cm-modal .wpcf7-form > .wpcf7-response-output { order: 2; }
.cm-formcard .wpcf7-form > .cm-form__contacts,
.cm-modal .wpcf7-form > .cm-form__contacts { order: 3; }
/* В модалке остался только график работы — выравниваем его по центру. */
.cm-modal__contacts { justify-content: center; margin-top: 14px; }
.cm-modal__contacts span { color: var(--cm-muted); font-size: 14px; }