html[data-theme="night"] body{background-color:#202124;}
/* Шаблоны Elementor задают фон страницы селектором `body.elementor-page-`,
а он сильнее, чем `html[data-theme="night"] body` — на страницах проекта и
локации фон оставался белым, тогда как текст уже становился светлым, и
страница читалась как пустая. Поэтому в ночной теме фон подложки забираем
себе принудительно: ночью фон страницы задаёт тема, а не шаблон. */
html[data-theme="night"] body[class*="elementor-page-"]{background-color:#202124 !important;}
html[data-theme="night"] body.elementor-kit-9{--e-global-color-accent:#202124;--e-global-color-text:#E8EAED;--e-global-color-secondary:#9AA0A6;--e-global-color-primary:#8AB4F8;--e-global-color-e262747:#303134;--e-global-color-ccpdark:#171718;--e-global-color-ccpfield:#303134;--e-global-color-ccpline:#3C4043;--e-global-color-ccpmute:#80868B;--e-global-color-8501981:#E8EAED;}
/* Подложка под прозрачной шапкой — ТОЛЬКО в ночной теме.
В ночной теме пункты меню светлые, и над светлой фотографией их не видно.
Мягкий градиент сверху решает это над любым фото. Днём подложка не нужна
(тёмный текст над фото читается), а на странице без фотографии тёмный
градиент дал бы полосу поверх белого — поэтому и делаем только ночью:
поверх графита он попросту незаметен. */
/* ВАЖНО: подложку делаем ФОНОВЫМ ГРАДИЕНТОМ, а не псевдоэлементом.
Псевдоэлемент требует position:relative на шапке, а это ломает раскладку:
шапка перестаёт накладываться на первый экран и отодвигает фото вниз
(проверено — так и произошло). Фоновая картинка на раскладку не влияет. */
html[data-theme="night"] .sticky-header:not(.scrolled){
background-image:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}
html[data-theme="night"] .sticky-header.scrolled{background-image:none;}
/* Белый логотип в ночной теме — CSS-фильтром от ОРИГИНАЛА, как в новом
подвале (ccp-footer): brightness(0) делает картинку чёрной с сохранением
прозрачности, invert(1) переворачивает в белый. Раньше тут была подмена
файлом logo_white.webp через content:url — файл был хуже качеством и
больше не нужен (16.08.2026, сам файл в медиатеке не тронут). */
html[data-theme="night"] .elementor-widget-theme-site-logo img,
html[data-theme="night"] .elementor-location-footer .elementor-image-box-img img{
filter:brightness(0) invert(1);
}
/* ------------------------------------------------------------------ *
* СТРАХОВКА: места, которые ночная тема не достаёт через глобальные цвета
*
* Тема перекрашивает палитру Elementor, и всё, что покрашено ГЛОБАЛЬНЫМИ
* цветами, темнеет само. Но часть блоков задаёт цвет мимо палитры: прямым
* hex в стилях виджета, инлайн-стилем в тексте, встроенным CSS Elementor.
* Такие места ночью остаются светлыми — текст светлеет, фон нет, и блок
* читается как пустой. Проверено обходом контраста 03.08.2026 по страницам
* товара, каталога, «О компании», статей, карты и статусов проектов.
*
* Здесь чиним следствие. Правильное лечение причины — красить новые блоки
* глобальными цветами (__globals__), см. памятку night-theme-mechanics.
* ------------------------------------------------------------------ */
/* 1. Поля ввода. Часть страниц красит фон поля глобальным цветом «текст на
тёмном» — днём он белый и выглядит как надо, а ночью остаётся светлым,
и получается светлое поле среди тёмной страницы. Нужен !important:
правило страницы (.page-id-57 input) по весу сильнее. */
html[data-theme="night"] body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html[data-theme="night"] body textarea,
html[data-theme="night"] body select{
background-color:#202124 !important;color:#E8EAED !important;border-color:#5F6368 !important;
}
html[data-theme="night"] body ::placeholder{color:#80868B !important;}
/* 2. Текст, вставленный из документа вместе с инлайн-цветом. На «О компании»
абзацы несут style="color: rgb(0, 0, 0)" — чёрным по тёмному. Инлайн-стиль
перебивается только !important. */
html[data-theme="night"] [style*="color: rgb(0, 0, 0)"],
html[data-theme="night"] [style*="color:rgb(0,0,0)"],
html[data-theme="night"] [style*="color: #000"],
html[data-theme="night"] [style*="color:#000"]{color:#E8EAED !important;}
/* 3. Карточки записей Elementor (лента статей) — белый фон из его же стилей. */
html[data-theme="night"] .elementor-post__card{background-color:#303134;border-color:#3C4043;}
html[data-theme="night"] .elementor-post__card .elementor-post__title,
html[data-theme="night"] .elementor-post__card .elementor-post__title a,
html[data-theme="night"] .elementor-post__card .elementor-post__excerpt p,
html[data-theme="night"] .elementor-post__card .elementor-post__meta-data{color:#E8EAED;}
/* 4. Всплывающие окна Elementor. Белый фон прописан селектором с ИДЕНТИФИКАТОРОМ
(#elementor-popup-modal-3935 .dialog-widget-content), а он по весу сильнее
любого нашего — поэтому только !important. */
html[data-theme="night"] .dialog-widget-content,
html[data-theme="night"] .elementor-popup-modal .dialog-message{background-color:#303134 !important;color:#E8EAED;}
/* 4а. Карточка на маркере Google-карты: её подложку рисует сам Google. */
html[data-theme="night"] .gm-style-iw,
html[data-theme="night"] .gm-style-iw-c,
html[data-theme="night"] .gm-style-iw-d{background-color:#303134 !important;color:#E8EAED !important;}
html[data-theme="night"] .gm-style-iw-tc::after{background:#303134 !important;}
html[data-theme="night"] .gm-style-iw a{color:#8AB4F8 !important;}
/* 4б. Кнопка, залитая акцентом. Ночью акцент светлеет (#8AB4F8), а текст на
ней остаётся белым — белым по голубому, контраст 2.1. Решение владельца
от 12.09.2026: кнопку НЕ осветлять, а держать тёмно-синей #1D5AD2 с белым
текстом (6,10) — как «Call Back» в шапке. Светло-голубая кнопка с тёмным
текстом владельцу не нравится. */
html[data-theme="night"] .ccp-pdf-button-brochure{background:#1D5AD2;border-color:#1D5AD2;color:#fff;}
/* У кнопки в блоке фактов цвет задан селектором с большим весом — !important. */
html[data-theme="night"] .ccp-ai-cta__btn{background:#1D5AD2 !important;color:#fff !important;}
/* 4в. Хлебные крошки локаций: цвета #666 и #222 зашиты в самом блоке. */
html[data-theme="night"] .location-breadcrumbs a{color:#9AA0A6;}
/* Текущий пункт крошек покрашен селектором с большим весом — нужен !important. */
html[data-theme="night"] .location-breadcrumbs span,
html[data-theme="night"] .location-breadcrumbs li span{color:#E8EAED !important;}
/* 4г. Приглушённый текст в таблице сделок DLD — серый по тёмному, контраст 1.5. */
html[data-theme="night"] .ccp-pf-muted{color:#9AA0A6 !important;}
/* 5. Наш блок вопросов-ответов: карточка белая, а вопрос уже светлый. */
html[data-theme="night"] .ccp-faq__item{background:#303134;border-color:#3C4043;}
html[data-theme="night"] .ccp-faq__a{color:rgba(232,234,237,.78);}
/* Переключатель в подвале — выглядит как обычная ссылка блока Services,
намеренно приглушён, чтобы не тянуть на себя внимание. */
.ccp-theme-switch{cursor:pointer;opacity:.65;transition:opacity .2s;}
.ccp-theme-switch:hover{opacity:1;}
:root{--e-global-color-primary:#1D5AD2;--e-global-color-secondary:#5E5E5E;--e-global-color-text:#202124;--e-global-color-accent:#FFFFFF;--e-global-color-8501981:#FFFFFF;--e-global-color-e262747:#F7F7F7;--e-global-color-ccpdark:#000000;--e-global-color-ccpfield:#F2F2F2;--e-global-color-ccpline:#EEEEEE;--e-global-color-ccpveil:rgba(0,0,0,0.5);--e-global-color-ccpfill:#1D5AD2;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;--e-global-typography-ccph1-font-family:"Montserrat";--e-global-typography-ccph1-font-size:52px;--e-global-typography-ccph1-font-weight:800;--e-global-typography-ccph1-line-height:1.1em;--e-global-typography-ccph2-font-family:"Montserrat";--e-global-typography-ccph2-font-size:38px;--e-global-typography-ccph2-font-weight:700;--e-global-typography-ccph2-line-height:1.2em;--e-global-typography-ccph3-font-family:"Montserrat";--e-global-typography-ccph3-font-size:30px;--e-global-typography-ccph3-font-weight:700;--e-global-typography-ccph3-line-height:1.25em;--e-global-typography-ccptxt-font-family:"Montserrat";--e-global-typography-ccptxt-font-size:17px;--e-global-typography-ccptxt-font-weight:400;--e-global-typography-ccptxt-line-height:1.6em;--e-global-typography-ccpcap-font-family:"Montserrat";--e-global-typography-ccpcap-font-size:14px;--e-global-typography-ccpcap-font-weight:400;--e-global-typography-ccpcap-line-height:1.5em;}@media(max-width:1024px){:root{--e-global-typography-ccph1-font-size:40px;--e-global-typography-ccph2-font-size:31px;--e-global-typography-ccph3-font-size:26px;--e-global-typography-ccptxt-font-size:16px;--e-global-typography-ccpcap-font-size:14px;}}@media(max-width:767px){:root{--e-global-typography-ccph1-font-size:32px;--e-global-typography-ccph2-font-size:27px;--e-global-typography-ccph3-font-size:23px;--e-global-typography-ccptxt-font-size:16px;--e-global-typography-ccpcap-font-size:13px;}}
/* Кнопка должна выглядеть ровно как переключатель языка: только иконка,
без фона, рамки и тени. !important — иначе кит Elementor красит . */
.ccp-theme-btn,
.elementor-location-header .ccp-theme-btn{
display:inline-flex !important;align-items:center;justify-content:center;
width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;
padding:4px !important;margin:0 10px 0 0 !important;
border:0 !important;border-radius:0 !important;outline:none !important;
background:none !important;background-color:transparent !important;background-image:none !important;
box-shadow:none !important;text-shadow:none !important;cursor:pointer;
color:inherit !important;opacity:.85;
line-height:1;flex:0 0 auto;vertical-align:middle;
-webkit-appearance:none;appearance:none;
}
.ccp-theme-btn:hover,.ccp-theme-btn:focus,.ccp-theme-btn:active{
background:none !important;background-color:transparent !important;
border:0 !important;box-shadow:none !important;opacity:1;
}
.ccp-theme-btn svg{width:19px;height:19px;display:block;fill:none;
stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:1024px){ .ccp-theme-btn{margin:0 8px 0 0 !important;} .ccp-theme-btn svg{width:18px;height:18px;} }
/* ⚠️ 10.09.2026, владелец: «добавь в шапку рядом с переключением ночной темы
значок лупы со ссылкой на поиск». Та же кнопка визуально, но это , а не
— просто переход на страницу поиска, без своего JS-состояния. */
.ccp-search-btn,
.elementor-location-header .ccp-search-btn{
display:inline-flex !important;align-items:center;justify-content:center;
width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;
padding:4px !important;margin:0 10px 0 0 !important;
border:0 !important;border-radius:0 !important;outline:none !important;
background:none !important;background-color:transparent !important;background-image:none !important;
box-shadow:none !important;text-shadow:none !important;cursor:pointer;
color:inherit !important;opacity:.85;text-decoration:none !important;
line-height:1;flex:0 0 auto;vertical-align:middle;
-webkit-appearance:none;appearance:none;
}
.ccp-search-btn:hover,.ccp-search-btn:focus,.ccp-search-btn:active{
background:none !important;background-color:transparent !important;
border:0 !important;box-shadow:none !important;opacity:1;
}
.ccp-search-btn svg{width:19px;height:19px;display:block;fill:none;
stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:1024px){ .ccp-search-btn{margin:0 8px 0 0 !important;} .ccp-search-btn svg{width:18px;height:18px;} }
/* Выглядит как соседний переключатель языка: только буквы, без фона и рамки.
!important — иначе кит Elementor красит ссылку как кнопку. */
.ccp-lang-btn,
.elementor-location-header .ccp-lang-btn{
display:inline-flex !important;align-items:center;justify-content:center;
width:auto !important;height:auto !important;min-width:0 !important;min-height:0 !important;
padding:4px 6px !important;margin:0 4px 0 0 !important;
border:0 !important;border-radius:0 !important;outline:none !important;
background:none !important;background-color:transparent !important;background-image:none !important;
box-shadow:none !important;text-decoration:none !important;cursor:pointer;
color:inherit !important;opacity:.85;
/* один в один как у переключателя Polylang: Montserrat 400, 17px, без caps */
font-family:"Montserrat",sans-serif;font-weight:400 !important;font-size:17px !important;
line-height:1;letter-spacing:normal !important;text-transform:none !important;
flex:0 0 auto;vertical-align:middle;
}
/* Старый выпадающий список Polylang скрыт, а не удалён: плагин продолжает
работать (и остаётся источником ссылок), вернуть — убрать это правило. */
.elementor-location-header .elementor-widget-polylang-language-switcher{
display:none !important;
}
.ccp-lang-btn:hover,.ccp-lang-btn:focus{
background:none !important;opacity:1;color:inherit !important;text-decoration:none !important;
}
@media (max-width:1024px){ .ccp-lang-btn{font-size:16px !important;padding:4px !important;} }
.ccp-map-deferred{background:var(--e-global-color-ccpfield,#f2f2f2);border:0}
/* z-index:0 заводит собственный слой: поднятый снимок (z-index:1 ниже) остаётся
внутри блока карты и не залезает поверх соседней карточки с адресом. */
.ccp-map-facade{position:relative;z-index:0;height:100%;width:100%;line-height:0;cursor:pointer}
/* Специфичность выше, чем у элементоровского «.elementor img{height:auto}»,
иначе снимок получает нулевую высоту и его просто не видно. */
/* z-index обязателен: кадр карты Elementor тоже позиционирован абсолютно и стоит
в разметке ПОСЛЕ снимка, поэтому без слоя он закрывает снимок собой — блок
выглядит пустым, хотя снимок загружен. Когда карту подняли, снимок прячется
правилом .is-live ниже и кадр открывается. */
.ccp-map-facade .ccp-map-facade__img{
position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:1;
object-fit:cover;border-radius:inherit;display:block;
transition:filter .18s ease;
}
.ccp-map-facade:hover .ccp-map-facade__img{filter:brightness(1.04) saturate(1.05)}
.ccp-map-facade:focus-visible{outline:2px solid var(--e-global-color-ccpfill,#1D5AD2);outline-offset:3px}
.ccp-map-facade.is-live .ccp-map-facade__img{display:none}
.ccp-map-facade.is-live{cursor:default}
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
img.wp-smiley, img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 0.07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
/*# sourceURL=wp-emoji-styles-inline-css */
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
:root { --wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the block styles printed at wp_footer." }
/*# sourceURL=wp-block-styles-placeholder-inline-css */
:root { --wp-internal-comment: "Placeholder for wp_hoist_late_printed_styles() to replace with the global-styles printed at wp_footer." }
/*# sourceURL=wp-global-styles-placeholder-inline-css */
/* Плоская главная. Поверхности и ритм — как у боевой карточки товара. */
.ccp-hf{--hf-max:1296px;--hf-pad:max(22px,calc((100% - var(--hf-max)) / 2))}
/* ---------- hero-слайдер ---------- */
/* ⚠️ Высота ЖЁСТКАЯ (height, не min-height): раньше секцию тянул текст
активного слайда, и на каждом слайде фото было разной высоты — владелец
это поймал 14.08. Теперь все слайды абсолютные в фиксированной рамке,
высота одна на все три. */
.ccp-hf-hero{position:relative;isolation:isolate;height:min(88vh,760px);
overflow:hidden}
/* Слайды лежат стопкой, листание кросс-фейдом прозрачности: без сдвигов,
спокойно работает и при системном «уменьшении движения». */
.ccp-hf-slide{position:absolute;inset:0;display:flex;align-items:flex-end;
padding:56px var(--hf-pad) 170px;opacity:0;transition:opacity .8s ease;
pointer-events:none}
.ccp-hf-slide.is-on{opacity:1;pointer-events:auto}
.ccp-hf-slide::before{content:"";position:absolute;inset:0;z-index:-2;
background-image:var(--hf-hero);background-size:cover;
background-position:var(--hf-pos,center)}
/* ⚠️ РОВНАЯ тонировка по всему кадру + градиент снизу — приём владельца:
белый текст читается на ЛЮБОЙ фотографии, светлое небо не съедает заголовок. */
.ccp-hf-slide::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(rgba(10,14,22,.38),rgba(10,14,22,.38)),
linear-gradient(200deg,rgba(10,14,22,0) 40%,rgba(10,14,22,.6) 100%)}
.ccp-hf-hero__inner{max-width:760px}
/* ⚠️ Белый цвет с ЗАПАСОМ ВЕСА и !important: кит красит h1/p своим
`.elementor-kit-9 h1` (класс+тег) — заголовок выходил тёмным и тонул в фото.
Девятый случай этой грабли. */
.ccp-hf .ccp-hf-hero__inner,
.ccp-hf .ccp-hf-hero__inner .ccp-hf-hero__kicker,
.ccp-hf .ccp-hf-hero__inner .ccp-hf-hero__title,
.ccp-hf .ccp-hf-hero__inner .ccp-hf-hero__sub{color:#fff !important}
.ccp-hf-hero__kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.ccp-hf-hero__title{font-size:clamp(30px,4.4vw,54px);line-height:1.08;font-weight:750;
letter-spacing:-.02em;margin:10px 0 14px;max-width:none;margin-inline:0}
.ccp-hf-hero__sub{font-size:clamp(15px,1.5vw,18px);line-height:1.55;opacity:.92;
margin:0 0 22px;max-width:640px;margin-inline:0}
.ccp-hf-hero__cta{display:flex;flex-wrap:wrap;gap:10px}
/* Нижняя полоса: точки слайдера + живые счётчики, общие для всех слайдов. */
.ccp-hf-hero__bottom{position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:0 var(--hf-pad) 26px;color:#fff}
.ccp-hf-hero__dots{display:flex;gap:8px;margin-bottom:14px}
/* Кнопка выше видимой полоски: в 5px мышью не попасть. */
.ccp-hf-dot{position:relative;width:26px !important;height:16px !important;min-height:0 !important;
padding:0 !important;border:0 !important;cursor:pointer;
background:transparent !important;box-shadow:none !important}
.ccp-hf-dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:5px;
transform:translateY(-50%);border-radius:3px;background:rgba(255,255,255,.35);
transition:background .3s ease}
.ccp-hf-dot.is-on::before{background:#fff}
.ccp-hf-btn{display:inline-block;padding:13px 22px;border-radius:12px;font-size:15px;
font-weight:600;text-decoration:none !important;cursor:pointer}
.ccp-hf-btn--primary{background:var(--e-global-color-primary,#2458c5);color:#fff !important}
/* Ночью тема подменяет primary на светло-голубой #8ab4f8 — белый текст на нём
терял контраст. Кнопка слайдера держит ДНЕВНОЙ синий круглосуточно
(владелец, 14.08). */
html[data-theme="night"] .ccp-hf .ccp-hf-btn--primary{background:#1D5AD2 !important;color:#fff !important}
.ccp-hf-btn--ghost{border:1px solid rgba(255,255,255,.65);color:#fff !important}
.ccp-hf-btn--ghost:hover{background:rgba(255,255,255,.12)}
.ccp-hf-hero__facts{display:flex;flex-wrap:wrap;gap:10px 26px;
border-top:1px solid rgba(255,255,255,.28);padding-top:16px}
.ccp-hf .ccp-hf-hero__facts,.ccp-hf .ccp-hf-hero__facts *{color:#fff !important}
.ccp-hf-fact{display:flex;flex-direction:column;gap:1px}
.ccp-hf-fact b{font-size:clamp(19px,2vw,26px);font-weight:700;font-variant-numeric:tabular-nums}
.ccp-hf-fact span{font-size:12.5px;opacity:.8}
/* ---------- секции ---------- */
.ccp-hf-body{display:flex;flex-direction:column;gap:26px;
padding:26px var(--hf-pad) 10px}
.ccp-hf-panel{background:#fff;border:1px solid #e6e8ec;border-radius:26px;
padding:22px 24px;
box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.05)}
.ccp-hf-shead{display:flex;align-items:flex-end;justify-content:space-between;
gap:16px;margin:0 0 16px}
.ccp-hf-h2{font-size:clamp(19px,1.9vw,24px);font-weight:650;line-height:1.2;
letter-spacing:-.01em;margin:0;color:#202124;max-width:none;margin-inline:0;text-align:left}
.ccp-hf-sub{font-size:14px;line-height:1.5;color:#5f6368;margin:5px 0 0;max-width:640px;margin-inline:0}
.ccp-hf-more{flex:none;font-size:14px;font-weight:600;text-decoration:none !important;
color:var(--e-global-color-primary,#2458c5) !important;white-space:nowrap;padding-bottom:3px}
/* Ленты ccp_listing уже плоские (glass=0) — здесь только убираем их
собственные внешние отступы, чтобы панель сидела плотно. */
.ccp-hf-panel .ccp-lst{margin:0}
.ccp-hf-map{border-radius:16px;overflow:hidden;min-height:380px}
.ccp-hf-map iframe{display:block;width:100%;min-height:380px;border:0}
/* Лицензия + офис: две колонки в одной панели. */
.ccp-hf-trust{display:grid;grid-template-columns:1.4fr 1fr;gap:26px}
.ccp-hf-trust__txt{max-width:none;margin-top:8px}
.ccp-hf-trust__mail{font-weight:600;text-decoration:none !important;
color:var(--e-global-color-primary,#2458c5) !important}
@media (max-width:700px){.ccp-hf-trust{grid-template-columns:1fr}}
/* Кнопка боевой формы: кит красит её чёрной, а главная кнопка страницы синяя —
две разные «главные» кнопки на одном экране. Тот же фикс, что на карточке. */
.ccp-hf .ccp-form__btn{background:var(--e-global-color-primary,#2458c5) !important;
color:#fff !important;border-radius:12px !important}
/* 12.09.2026, решение владельца: ночная кнопка — тёмно-синяя с белым текстом (6,10). */
html[data-theme="night"] .ccp-hf .ccp-form__btn{background:#1D5AD2 !important;color:#fff !important}
/* ---------- ночная тема ---------- */
html[data-theme="night"] .ccp-hf-panel{background:#1b1f26;border-color:#2b3038;
box-shadow:0 1px 2px rgba(0,0,0,.3)}
html[data-theme="night"] .ccp-hf-h2{color:#E8EAED}
html[data-theme="night"] .ccp-hf-sub,
html[data-theme="night"] .ccp-hf-rera{color:#9AA0A6}
@media (max-width:700px){
/* ⚠️ На телефоне контент слайда был ВЫШЕ отведённого места и вылезал
под шапку (замерено на 375×667: контенту нужно ~500px при свободных
300). Лечится компактной типографикой и счётчиками сеткой 2×2. */
/* Бюджет высоты на iPhone 7 (hero ~535px): шапка 100 + контент ~210 +
нижняя полоса ~140 = 450. Проверять замером top у .ccp-hf-hero__inner
ПЕРВОГО слайда — он самый длинный. */
/* ⚠️ ЖЕЛЕЗНАЯ защита от заезда под шапку: на телефоне активный слайд
живёт В ПОТОКЕ (position:relative), hero тянется под контент —
переполнение вверх невозможно в принципе. Плата — высота фото может
чуть меняться между слайдами; на телефоне это незаметно, а vh на
реальных телефонах врёт из-за адресной строки (в эмуляторе дефект
не воспроизводился, на живом iPhone был). */
.ccp-hf-hero{height:auto;min-height:min(92vh,640px)}
/* ⚠️ Активному слайду — ТА ЖЕ min-height, что у hero: без неё слайд в
потоке короче hero, фото кончалось выше низа, и счётчики выходили
белым по белому на подложке страницы. */
.ccp-hf-slide.is-on{position:relative;min-height:min(92vh,640px)}
.ccp-hf-slide{padding:100px var(--hf-pad) 150px}
.ccp-hf-hero__kicker{font-size:11px}
.ccp-hf-hero__title{font-size:24px;margin:8px 0 10px}
.ccp-hf-hero__sub{font-size:14px;margin-bottom:12px}
.ccp-hf-btn{padding:10px 14px;font-size:13.5px}
.ccp-hf-hero__cta{gap:8px}
.ccp-hf-hero__bottom{padding-bottom:10px}
.ccp-hf-hero__dots{margin-bottom:8px}
.ccp-hf-hero__facts{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding-top:10px}
.ccp-hf-fact b{font-size:16px}
.ccp-hf-fact span{font-size:10.5px}
.ccp-hf-panel{padding:16px;border-radius:18px}
.ccp-hf-shead{flex-direction:column;align-items:flex-start;gap:6px}
}
/*# sourceURL=ccp-home-flat-inline-css */
.ccp-lst{margin:24px 0 8px}
/* --- форма --- */
.ccp-lst__form{display:flex;flex-direction:column;gap:12px;margin:0 0 18px;
padding:16px 18px;border:1px solid var(--e-global-color-ccpline,#dfe3e9);border-radius:12px}
.ccp-lst__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end}
.ccp-lst__field{display:flex;flex-direction:column;gap:5px;min-width:0}
.ccp-lst__field--wide{grid-column:span 2}
.ccp-lst__label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--e-global-color-ccpmute,#6b7075)}
.ccp-lst__pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Кит темы навязывает всем input и button высоту 48px, заливку, верхний
регистр и рамку (памятка tool-pages-compact-controls) — снимаем адресно. */
.ccp-lst__input{width:100% !important;min-height:0 !important;height:auto !important;
padding:9px 11px !important;margin:0 !important;
border:1px solid var(--e-global-color-ccpline,#dfe3e9) !important;border-radius:9px !important;
background:transparent !important;box-shadow:none !important;
font-family:inherit !important;font-size:14px !important;font-weight:400 !important;
text-transform:none !important;letter-spacing:normal !important;color:inherit !important}
.ccp-lst__input:focus{outline:none;border-color:var(--e-global-color-primary,#2458c5) !important}
.ccp-lst__actions{display:flex;gap:10px;align-items:center}
.ccp-lst__submit{min-height:0 !important;height:auto !important;padding:10px 20px !important;
border:0 !important;border-radius:9px !important;box-shadow:none !important;
background:var(--e-global-color-primary,#2458c5) !important;color:#fff !important;
font-family:inherit !important;font-size:14px !important;font-weight:600 !important;
text-transform:none !important;letter-spacing:normal !important;cursor:pointer}
.ccp-lst__reset{font-size:13.5px;color:var(--e-global-color-ccpmute,#6b7075);text-decoration:none;
border-bottom:1px solid rgba(127,127,127,.35)}
/* Компактная форма фильтра у блока проектов: та же панель, что у каталога,
но в одну строку — полей всего два. */
.ccp-lst__form--slim{margin-bottom:16px}
.ccp-lst__form--slim .ccp-lst__row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* --- строка состояния и переключатель --- */
.ccp-lst__head{font-size:1.35em;font-weight:600;margin:0 0 14px;max-width:none}
/* Страница каталога БЕЗ Elementor: контейнера сайта у неё нет, поэтому задаём
его сами — 1296 по центру плюс боковые поля. Иначе содержимое идёт от края
до края экрана (проверено 12.08: листинг стоял на left=0 при окне 1076).
Заголовку снимаем колонку 720 из ccp-layout — он обязан стоять по тому же
краю, что и карточки, иначе H1 висит отдельно от каталога. */
body.ccp-listing-page .page-content,
body.ccp-listing-page .entry-content{
max-width:1344px;margin-inline:auto;padding-inline:24px;box-sizing:border-box}
body.ccp-listing-page .page-content>h1,
body.ccp-listing-page .entry-content>h1,
body.ccp-listing-page .page-content>h2,
body.ccp-listing-page .entry-content>h2{
max-width:none;margin-inline:0;text-align:left}
@media (max-width:767px){
body.ccp-listing-page .page-content,
body.ccp-listing-page .entry-content{padding-inline:16px}
}
.ccp-lst__bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
margin:0 0 14px}
.ccp-lst__count{font-size:14px;color:var(--e-global-color-ccpmute,#6b7075)}
.ccp-lst__count b{color:inherit;font-weight:700}
.ccp-lst__view{display:flex;align-items:center;gap:6px}
.ccp-lst__viewbtn{min-height:0 !important;height:auto !important;padding:6px 12px !important;
margin:0 !important;border:1px solid var(--e-global-color-ccpline,#dfe3e9) !important;
border-radius:8px !important;background:transparent !important;box-shadow:none !important;
font-family:inherit !important;font-size:13px !important;font-weight:500 !important;
text-transform:none !important;letter-spacing:normal !important;color:inherit !important;cursor:pointer}
.ccp-lst__viewbtn.is-active{background:var(--e-global-color-primary,#2458c5) !important;
border-color:var(--e-global-color-primary,#2458c5) !important;color:#fff !important}
/* На узком экране колонок всё равно одна-две — выбор там только мешает. */
@media (max-width:700px){.ccp-lst__view{display:none}}
/* --- сетка --- */
.ccp-lst__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
.ccp-lst[data-cols="1"] .ccp-lst__grid{grid-template-columns:1fr}
.ccp-lst[data-cols="2"] .ccp-lst__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccp-lst[data-cols="4"] .ccp-lst__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){
.ccp-lst[data-cols="4"] .ccp-lst__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
.ccp-lst__grid,
.ccp-lst[data-cols="2"] .ccp-lst__grid,
.ccp-lst[data-cols="4"] .ccp-lst__grid{grid-template-columns:1fr}
}
/* --- карточка --- */
.ccp-lst-card{display:flex;flex-direction:column;overflow:hidden;color:inherit;
border:1px solid var(--e-global-color-ccpline,#dfe3e9);border-radius:14px;
text-decoration:none !important;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.ccp-lst-card *{text-decoration:none !important}
.ccp-lst-card:hover{border-color:var(--e-global-color-primary,#2458c5);
box-shadow:0 6px 22px rgba(0,0,0,.09);transform:translateY(-2px)}
.ccp-lst-card__media{position:relative;flex:none;background:rgba(127,127,127,.10);aspect-ratio:4/3}
/* ⚠️ Вес селектора с запасом. Тема и кит задают `img{height:auto}`, и правило
в один класс проигрывает: картинка перестаёт растягиваться на рамку 4/3,
высота карточек в ряду разъезжается, под фото появляется серая полоса.
Проявилось только на боевом каталоге — на тестовых страницах кит слабее. */
.ccp-lst .ccp-lst-card__media img,
.ccp-lst-card__media img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.ccp-lst-card__noimg{display:block;width:100%;height:100%}
/* ⚠️ flex:1 обязателен. Без него текстовая часть занимает ширину по
содержимому, и в режиме одной колонки стеклянная панель обрывалась на
середине карточки, открывая размытую подложку справа. В обычной сетке
дефект не видно — там у панели нет своего фона. */
.ccp-lst-card__body{display:flex;flex-direction:column;gap:5px;padding:13px 15px 15px;
min-width:0;flex:1 1 auto}
.ccp-lst-card__price{font-size:16px;font-weight:700;color:var(--e-global-color-primary,#2458c5);line-height:1.25}
.ccp-lst-card__price del{opacity:.5;font-weight:400;font-size:.85em}
/* ⚠️ Карточка целиком — ссылка, а кит темы красит ЛЮБУЮ ссылку в синий и
перебивает color:inherit. Наследованием тут не обойтись: цвет каждой строки
задаём явной парой «день/ночь», иначе карточка читается как список ссылок,
а не как объект. Синим оставляем только цену. */
.ccp-lst-card__title{font-size:14.5px;font-weight:600;line-height:1.35;
color:#202124;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccp-lst-card__loc,.ccp-lst-card__dev{font-size:12.5px;color:#5f6368}
.ccp-lst-card__chip{color:#3c4043}
html[data-theme="night"] .ccp-lst-card__title{color:#E8EAED}
html[data-theme="night"] .ccp-lst-card__loc,
html[data-theme="night"] .ccp-lst-card__dev{color:#9AA0A6}
html[data-theme="night"] .ccp-lst-card__chip{color:#DADCE0}
.ccp-lst-card__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.ccp-lst-card__chip{font-size:12px;padding:3px 9px;border-radius:999px;background:rgba(127,127,127,.12)}
/* Одна колонка — карточка ложится набок. Иначе картинка растянется на всю
ширину контента, а текст соберётся в узкую полосу под ней. */
.ccp-lst[data-cols="1"] .ccp-lst-card{flex-direction:row;align-items:stretch}
.ccp-lst[data-cols="1"] .ccp-lst-card__media{width:300px;aspect-ratio:auto;min-height:190px}
.ccp-lst[data-cols="1"] .ccp-lst-card__body{justify-content:center;padding:18px 22px;gap:7px}
.ccp-lst[data-cols="1"] .ccp-lst-card__title{font-size:17px;-webkit-line-clamp:3}
.ccp-lst[data-cols="1"] .ccp-lst-card__price{font-size:20px}
@media (max-width:560px){
.ccp-lst[data-cols="1"] .ccp-lst-card{flex-direction:column}
.ccp-lst[data-cols="1"] .ccp-lst-card__media{width:100%;aspect-ratio:4/3;min-height:0}
}
/* ======================================================================
ЛЕНТА (data-view="carousel") — вместо Loop Carousel на главной.
====================================================================== */
/* ⚠️ Правила идут ПОСЛЕ сеточных: у `.ccp-lst[data-cols="4"] .ccp-lst__grid`
тот же вес, и при равном весе побеждает последнее. Иначе выбор «4 колонки»,
сохранённый посетителем в каталоге, ломал бы ленту на главной. */
.ccp-lst__rail{position:relative}
.ccp-lst[data-view="carousel"] .ccp-lst__grid{
grid-auto-flow:column;grid-template-columns:none;
grid-auto-columns:calc((100% - 36px)/3);
overflow-x:auto;overscroll-behavior-x:contain;
/* ⚠️ 10.09.2026: было — мягкий режим, он притягивает, только если
палец и так почти доехал. Владелец: «тяжело листать горизонтально». Замер:
бросок на 60 % карточки оставался на 251 px из 419, лента вставала посреди
карточки. магнитит всегда: тот же бросок встаёт на 420.
Важно, что это НЕ анимация: при включённом «уменьшении движения» (а у владельца
оно включено) магнит продолжает работать, просто без плавного хода. */
scroll-snap-type:x mandatory;
padding-bottom:10px;scrollbar-width:thin}
/* ⚠️⚠️ `scroll-behavior:smooth` ТОЛЬКО при выключенном «уменьшении движения».
На машине владельца оно включено (как и «уменьшение прозрачности», см.
listing-own-engine-test), и Chrome в этом режиме не выполняет плавную
прокрутку ВООБЩЕ: замер 12.08 — scrollBy({behavior:'smooth'}) оставлял
scrollLeft нулём, а мгновенное присваивание работало. Стрелки ленты просто
не двигались. Плавность — украшение, прокрутка — работа; работа не должна
зависеть от настройки доступности. */
@media (prefers-reduced-motion: no-preference){
.ccp-lst[data-view="carousel"] .ccp-lst__grid{scroll-behavior:smooth}
}
.ccp-lst[data-view="carousel"] .ccp-lst-card{scroll-snap-align:start;scroll-snap-stop:always}
/* — чтобы резкий флик не пролистывал три карточки разом:
лента останавливается на каждой, как страницы, а не как свободная прокрутка. */
@media (max-width:900px){
.ccp-lst[data-view="carousel"] .ccp-lst__grid{grid-auto-columns:calc((100% - 18px)/2)}
}
@media (max-width:560px){
.ccp-lst[data-view="carousel"] .ccp-lst__grid{grid-auto-columns:86%}
}
/* Стрелки. ⚠️ Кит темы навязывает кнопкам высоту 48px, заливку и верхний
регистр — здесь это превратило бы кружок в прямоугольную плашку, поэтому
всё задано с !important (седьмой случай за три сессии). */
.ccp-lst .ccp-lst__arrow{
position:absolute;top:calc(50% - 40px);z-index:3;
width:40px !important;height:40px !important;min-height:0 !important;
padding:0 !important;margin:0 !important;border-radius:999px !important;
border:1px solid var(--e-global-color-ccpline,#dfe3e9) !important;
background:rgba(255,255,255,.92) !important;color:#202124 !important;
box-shadow:0 4px 14px rgba(16,24,40,.14) !important;
font-size:22px !important;font-weight:400 !important;line-height:1 !important;
text-transform:none !important;letter-spacing:normal !important;
display:flex !important;align-items:center;justify-content:center;cursor:pointer;
transition:opacity .15s ease}
.ccp-lst .ccp-lst__arrow--prev{left:-6px}
.ccp-lst .ccp-lst__arrow--next{right:-6px}
.ccp-lst .ccp-lst__arrow[hidden]{display:none !important}
html[data-theme="night"] .ccp-lst .ccp-lst__arrow{
background:rgba(27,31,38,.92) !important;color:#E8EAED !important;
border-color:rgba(255,255,255,.18) !important}
/* На телефоне стрелки не нужны: там прокрутка пальцем, а кружок закрывает фото. */
@media (max-width:700px){.ccp-lst .ccp-lst__arrow{display:none !important}}
/* --- карточка сотрудника --- */
/* Портретный кадр:человек на снимке в рамке 4/3 обрезается по подбородок. */
.ccp-lst--query .ccp-lst-card__media.is-portrait{aspect-ratio:3/4}
/* ⚠️ Кадр 1:1, а не 4/3 и не 3/4. Фотографии сотрудников загружены КВАДРАТНЫМИ
(894–1021 px по обеим сторонам), поэтому общий кадр 4/3 срезал у них по
12,5% сверху и снизу — у снятых крупным планом уезжала макушка (владелец,
14.08.2026). Квадрат совпадает с исходником и не режет ничего.
Браузер тут ни при чём: Chrome и Safari считали одинаково, 309×231. */
.ccp-lst--team .ccp-lst-card__media{aspect-ratio:1/1}
.ccp-lst--team .ccp-lst-card__title{font-size:16px}
/* --- карточка района --- */
/* У района нет ни цены, ни характеристик, поэтому текстовая часть короткая —
без этого правила карточки в ряду разъезжались бы по высоте. */
.ccp-lst--location .ccp-lst-card__title{font-size:16px;-webkit-line-clamp:2}
.ccp-lst--location .ccp-lst-card__body{gap:6px}
.ccp-lst--location .ccp-lst-card__meta:empty{display:none}
/* --- пагинация --- */
/* ⚠️ Вес селектора с запасом и !important на подчёркивание с цветом.
Кит темы (`.elementor-kit-9 a`) красит ссылки синим И ПОДЧЁРКИВАЕТ их,
перебивая правило в один класс. Из-за этого пагинация выглядела как строка
текстовых ссылок «2 3 … 12 Next» с подчёркиванием, а рамки кнопок не было
видно вовсе. Пятый случай за две сессии, когда кит выигрывает у одиночного
класса, — закладываем вес сразу. */
/* ЕДИНАЯ ВЫСОТА УПРАВЛЕНИЯ.
Замер 12.08 по жалобе владельца («некоторые ячейки низкие, некоторые
высокие»): поле ввода 40, выпадающий список 39, кнопка «Показать» 37,
ссылка «Сбросить» 28, а сами ячейки 65 против 72.
Причины разные: у select `line-height:normal` вместо унаследованного,
у кнопок своя высота от кита, у пар «от/до» лишняя высота от вложенной
сетки. Поэтому высоту задаём ЯВНО всем, а не полагаемся на содержимое. */
/* ⚠️ !important обязателен: выше в этом же файле стоит
`.ccp-lst__input{height:auto !important;min-height:0 !important}` — его
поставили, чтобы сбить навязанные китом 48 px. Без !important здесь
высота не применяется вовсе (проверено: поля так и остались 39/40/37). */
.ccp-lst .ccp-lst__input,
.ccp-lst .ccp-lst__submit,
.ccp-lst .ccp-lst__reset{
height:42px !important;min-height:42px !important;box-sizing:border-box;
font-size:14px;line-height:1.2}
.ccp-lst .ccp-lst__input{padding-block:0 !important}
.ccp-lst select.ccp-lst__input{padding-right:30px}
.ccp-lst .ccp-lst__submit,
.ccp-lst .ccp-lst__reset{
display:inline-flex;align-items:center;justify-content:center;padding-inline:20px}
/* У «Сбросить» кит рисует РАМКУ СНИЗУ (border-bottom), а не подчёркивание —
снятия text-decoration мало, полоска остаётся. И цвет он ставит свой синий. */
.ccp-lst .ccp-lst__reset{
text-decoration:none !important;border:0 !important;background:none !important;
color:var(--e-global-color-ccpmute,#6b7075) !important}
.ccp-lst .ccp-lst__reset:hover{color:var(--e-global-color-primary,#2458c5) !important}
/* Подпись фиксированной высоты — иначе ячейка с более длинным словом
(«Поиск по названию») делает весь ряд выше соседних. */
.ccp-lst .ccp-lst__label{min-height:16px;line-height:16px}
.ccp-lst .ccp-lst__field,
.ccp-lst .ccp-lst__field--pair{justify-content:flex-end}
.ccp-lst .ccp-lst__pair{align-items:end}
.ccp-lst .ccp-lst-pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:30px 0 8px}
.ccp-lst .ccp-lst-pager__btn{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 14px;border-radius:10px;
font-size:14px;font-weight:500;line-height:1;
text-decoration:none !important;
color:var(--e-global-color-text,#202124) !important;
background:transparent;
border:1px solid var(--e-global-color-ccpline,#dfe3e9);
transition:background .15s ease,border-color .15s ease}
.ccp-lst .ccp-lst-pager__btn:hover{
background:rgba(127,127,127,.09);
border-color:var(--e-global-color-primary,#2458c5)}
.ccp-lst .ccp-lst-pager__btn.is-current{
background:var(--e-global-color-primary,#2458c5);
border-color:var(--e-global-color-primary,#2458c5);
color:#fff !important;font-weight:600;cursor:default}
.ccp-lst .ccp-lst-pager__gap{padding:0 2px;color:var(--e-global-color-ccpmute,#6b7075);
align-self:flex-end;line-height:2.6}
html[data-theme="night"] .ccp-lst .ccp-lst-pager__btn{color:#E8EAED !important;
border-color:rgba(255,255,255,.16)}
.ccp-lst__empty{padding:28px 0;color:var(--e-global-color-ccpmute,#6b7075)}
/* ======================================================================
ПЛОСКИЙ ВАРИАНТ (data-glass="0") — для сравнения со стеклянным.
⚠️ Не «стекло без размытия»: базовые карточки идут вообще без заливки, и на
белой странице листинг выглядит как набор рамок. Даём поверхностям сплошной
фон и мягкую тень — раскладка та же, отличается только оформление.
====================================================================== */
.ccp-lst[data-glass="0"] .ccp-lst-card{background:#fff;border-color:#e6e8ec;
box-shadow:0 1px 2px rgba(16,24,40,.04)}
.ccp-lst[data-glass="0"] .ccp-lst-card:hover{box-shadow:0 8px 24px rgba(16,24,40,.10)}
.ccp-lst[data-glass="0"] .ccp-lst__form{background:#fff;border-color:#e6e8ec;
box-shadow:0 1px 2px rgba(16,24,40,.04)}
.ccp-lst[data-glass="0"] .ccp-lst-card__chip{background:#f2f4f7;border:1px solid #e8eaee}
html[data-theme="night"] .ccp-lst[data-glass="0"] .ccp-lst-card,
html[data-theme="night"] .ccp-lst[data-glass="0"] .ccp-lst__form{
background:#1b1f26;border-color:#2b3038}
html[data-theme="night"] .ccp-lst[data-glass="0"] .ccp-lst-card__chip{
background:#232830;border-color:#31363f}
/* ======================================================================
ЖИДКОЕ СТЕКЛО (включается data-glass="1")
======================================================================
⚠️ ГЛАВНОЕ ПРО ЭТОТ ЭФФЕКТ: backdrop-filter размывает то, что ЗА элементом.
На белой странице за панелью белое — размывать нечего, и «стекло» выходит
серой плашкой. Поэтому подложку делаем сами, в двух слоях:
1) у всего блока — мягкое цветное свечение фирменными оттенками;
2) у каждой карточки — размытая и подкрашенная копия ЕЁ ЖЕ фотографии
(адрес приходит переменной --ccp-img из разметки).
Тогда стеклянная часть карточки преломляет собственное фото объекта, как
обложка альбома в iOS, а не абстрактный фон.
⚠️ isolation:isolate на карточке обязателен: он делает карточку «корнем
подложки», и backdrop-filter внутри неё берёт именно её размытое фото, а
не всё, что оказалось ниже по странице. */
.ccp-lst[data-glass="1"]{
--g-bg:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.50));
--g-flat:rgba(255,255,255,.52);
--g-brd:rgba(255,255,255,.55);
--g-hi:rgba(255,255,255,.80);
--g-sh:0 10px 34px rgba(17,24,39,.13);
position:relative;padding:24px;border-radius:28px;
background:
radial-gradient(58% 52% at 10% 0%,rgba(36,88,197,.17),transparent 62%),
radial-gradient(52% 48% at 94% 8%,rgba(0,170,185,.15),transparent 64%),
radial-gradient(66% 58% at 52% 104%,rgba(122,84,220,.13),transparent 62%);
}
/* Карточка: рамку снимаем — её роль играет светлый край стекла. */
.ccp-lst[data-glass="1"] .ccp-lst-card{
position:relative;isolation:isolate;
border:0;border-radius:22px;background:transparent;box-shadow:var(--g-sh)}
.ccp-lst[data-glass="1"] .ccp-lst-card::before{
content:"";position:absolute;inset:0;z-index:0;
background-image:var(--ccp-img);background-size:cover;background-position:center;
filter:blur(26px) saturate(1.7);transform:scale(1.3);opacity:.9}
.ccp-lst[data-glass="1"] .ccp-lst-card__media{position:relative;z-index:1}
.ccp-lst[data-glass="1"] .ccp-lst-card__body{
position:relative;z-index:1;
background:var(--g-bg);
-webkit-backdrop-filter:blur(22px) saturate(180%);
backdrop-filter:blur(22px) saturate(180%);
box-shadow:inset 0 1px 0 var(--g-hi)}
.ccp-lst[data-glass="1"] .ccp-lst-card:hover{
transform:translateY(-3px);box-shadow:0 16px 44px rgba(17,24,39,.20)}
.ccp-lst[data-glass="1"] .ccp-lst-card__chip{
background:rgba(255,255,255,.55);border:1px solid var(--g-hi);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* Панели управления — то же стекло, но поверх свечения блока. */
.ccp-lst[data-glass="1"] .ccp-lst__form,
.ccp-lst[data-glass="1"] .ccp-lst__viewbtn,
.ccp-lst[data-glass="1"] .ccp-lst-pager__btn{
background:var(--g-flat) !important;border-color:var(--g-brd) !important;
-webkit-backdrop-filter:blur(16px) saturate(180%);
backdrop-filter:blur(16px) saturate(180%);
box-shadow:inset 0 1px 0 var(--g-hi),var(--g-sh)}
.ccp-lst[data-glass="1"] .ccp-lst__form{border-radius:20px}
.ccp-lst[data-glass="1"] .ccp-lst__input{
background:rgba(255,255,255,.45) !important;border-color:var(--g-brd) !important;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* Активные кнопки остаются сплошными: стекло на стекле теряет читаемость. */
.ccp-lst[data-glass="1"] .ccp-lst__viewbtn.is-active,
.ccp-lst[data-glass="1"] .ccp-lst-pager__btn.is-current{
background:var(--e-global-color-primary,#2458c5) !important;
-webkit-backdrop-filter:none;backdrop-filter:none}
/* Ночная тема: та же схема, но стекло тёмное. Полупрозрачный белый на тёмном
фоне выглядел бы молочной плёнкой. */
html[data-theme="night"] .ccp-lst[data-glass="1"]{
--g-bg:linear-gradient(rgba(22,26,33,.60),rgba(22,26,33,.48));
--g-flat:rgba(22,26,33,.55);
--g-brd:rgba(255,255,255,.16);
--g-hi:rgba(255,255,255,.20);
--g-sh:0 10px 34px rgba(0,0,0,.48);
background:
radial-gradient(58% 52% at 10% 0%,rgba(36,88,197,.24),transparent 62%),
radial-gradient(52% 48% at 94% 8%,rgba(0,170,185,.18),transparent 64%),
radial-gradient(66% 58% at 52% 104%,rgba(122,84,220,.18),transparent 62%);
}
html[data-theme="night"] .ccp-lst[data-glass="1"] .ccp-lst-card__chip{
background:rgba(255,255,255,.10)}
html[data-theme="night"] .ccp-lst[data-glass="1"] .ccp-lst__input{
background:rgba(255,255,255,.07) !important}
/* Запасной вариант для браузеров без backdrop-filter (Firefox до 103, старые
сборки WebView): без него стекло стало бы прозрачным, и текст лёг бы прямо
на фотографию. Отдаём почти сплошную заливку. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.ccp-lst[data-glass="1"] .ccp-lst-card__body,
.ccp-lst[data-glass="1"] .ccp-lst__form,
.ccp-lst[data-glass="1"] .ccp-lst__viewbtn,
.ccp-lst[data-glass="1"] .ccp-lst-pager__btn{background:rgba(255,255,255,.93) !important}
html[data-theme="night"] .ccp-lst[data-glass="1"] .ccp-lst-card__body,
html[data-theme="night"] .ccp-lst[data-glass="1"] .ccp-lst__form,
html[data-theme="night"] .ccp-lst[data-glass="1"] .ccp-lst__viewbtn,
html[data-theme="night"] .ccp-lst[data-glass="1"] .ccp-lst-pager__btn{background:rgba(22,26,33,.93) !important}
}
/* 12.09.2026, решение владельца: ночью «залитые» элементы каталога — тёмно-синие
с белым текстом. Ночью primary светлеет до #8AB4F8 и белый на нём давал 2,1. */
html[data-theme="night"] .ccp-lst__submit,
html[data-theme="night"] .ccp-lst .ccp-lst__viewbtn.is-active,
html[data-theme="night"] .ccp-lst[data-glass="1"] .ccp-lst__viewbtn.is-active,
html[data-theme="night"] .ccp-lst .ccp-lst-pager__btn.is-current,
html[data-theme="night"] .ccp-lst[data-glass="1"] .ccp-lst-pager__btn.is-current{
background:#1D5AD2 !important;border-color:#1D5AD2 !important;color:#fff !important}
/* На телефоне размытие двух слоёв на каждой карточке заметно греет батарею.
Радиус уменьшаем, эффект остаётся. */
@media (max-width:700px){
.ccp-lst[data-glass="1"]{padding:14px;border-radius:20px}
.ccp-lst[data-glass="1"] .ccp-lst-card__body{
-webkit-backdrop-filter:blur(12px) saturate(160%);
backdrop-filter:blur(12px) saturate(160%)}
.ccp-lst[data-glass="1"] .ccp-lst-card::before{filter:blur(18px) saturate(1.5)}
}
/* Системная настройка «уменьшить прозрачность» (macOS, Windows, Android).
⚠️ Она включена чаще, чем кажется, и на машине владельца тоже: при первой
проверке я полчаса смотрел на эту запасную версию и считал, что вижу стекло.
Если надо показать эффект вопреки настройке — шорткод [ccp_listing
glass="force"], тогда на блоке появляется data-force и правило не действует. */
@media (prefers-reduced-transparency:reduce){
.ccp-lst[data-glass="1"]:not([data-force="1"]) .ccp-lst-card__body,
.ccp-lst[data-glass="1"]:not([data-force="1"]) .ccp-lst__form{
background:var(--e-global-color-ccpbg,#fff) !important;
-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme="night"] .ccp-lst[data-glass="1"]:not([data-force="1"]) .ccp-lst-card__body,
html[data-theme="night"] .ccp-lst[data-glass="1"]:not([data-force="1"]) .ccp-lst__form{
background:#161a21 !important}
.ccp-lst[data-glass="1"]:not([data-force="1"]) .ccp-lst-card::before{display:none}
}
/* Раскладка карточки в одну колонку: делим текстовую часть надвое, чтобы
ширина 1296 не пустовала справа. */
.ccp-lst[data-cols="1"] .ccp-lst-card__body{
flex-direction:row;align-items:center;gap:24px}
.ccp-lst[data-cols="1"] .ccp-lst-card__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.ccp-lst[data-cols="1"] .ccp-lst-card__meta{flex:0 0 auto;display:flex;flex-direction:column;
align-items:flex-end;gap:8px;text-align:right}
.ccp-lst-card__main{display:flex;flex-direction:column;gap:5px;min-width:0}
.ccp-lst-card__meta{display:flex;flex-direction:column;gap:5px;min-width:0}
@media (max-width:560px){
.ccp-lst[data-cols="1"] .ccp-lst-card__body{flex-direction:column;align-items:stretch;gap:8px}
.ccp-lst[data-cols="1"] .ccp-lst-card__meta{align-items:flex-start;text-align:left}
}
/*# sourceURL=ccp-listing-inline-css */
.ccp-rl{margin:18px 0}.ccp-rl-scroll{overflow-x:auto}.ccp-rl-table{width:100%;border-collapse:collapse;font-size:15px}.ccp-rl-table th,.ccp-rl-table td{text-align:left;padding:10px 12px;border-bottom:1px solid rgba(127,127,127,.22);white-space:nowrap}.ccp-rl-table--wrap th,.ccp-rl-table--wrap td{white-space:normal}.ccp-rl-table--wrap td:first-child{white-space:nowrap}.ccp-rl-table th{font-size:13px;font-weight:600;color:var(--e-global-color-ccpmute,#6b7075)}.ccp-rl-table td b{font-weight:600}.ccp-rl-table a{color:var(--e-global-color-accent,#FFFFFF);text-decoration:none;border-bottom:1px solid rgba(127,127,127,.35)}.ccp-rl-note{font-size:13px;color:var(--e-global-color-ccpmute,#6b7075);margin:10px 0 0}.ccp-rl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:18px 0}.ccp-rl-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:rgba(127,127,127,.07);color:inherit;transition:transform .15s;text-decoration:none !important}.ccp-rl-card *{text-decoration:none !important}.ccp-rl-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.10)}.ccp-rl-card:hover{transform:translateY(-2px)}.ccp-rl-card__img{display:block;height:150px;background-size:cover;background-position:center}.ccp-rl-card__body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 14px}.ccp-rl-card__name{font-weight:600;font-size:15px;line-height:1.3;color:#202124}html[data-theme="night"] .ccp-rl-card__name{color:#E8EAED}.ccp-rl-card__loc,.ccp-rl-card__meta{font-size:12px;color:var(--e-global-color-ccpmute,#6b7075)}.ccp-rl-card__price{font-size:14px;font-weight:600;color:var(--e-global-color-primary,#1D5AD2)}
/*# sourceURL=ccp-rl-inline-css */
.ccp-cpt-gallery-shortcode {
--ccp-gallery-gap: 14px;
--ccp-gallery-radius: 18px;
--ccp-gallery-row-height: 150px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: var(--ccp-gallery-row-height);
grid-auto-flow: dense;
gap: var(--ccp-gallery-gap);
width: 100%;
margin: 0;
}
.ccp-cpt-gallery-shortcode-item {
position: relative;
display: block;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
border-radius: var(--ccp-gallery-radius);
background: #f3f4f6;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
isolation: isolate;
line-height: 0;
}
.ccp-cpt-gallery-shortcode-single {
grid-template-columns: 1fr;
grid-auto-rows: minmax(320px, 560px);
}
.ccp-cpt-gallery-shortcode-single .ccp-cpt-gallery-shortcode-item {
grid-column: auto;
grid-row: auto;
}
.ccp-cpt-gallery-shortcode-link {
display: block;
width: 100%;
height: 100%;
min-height: 100%;
text-decoration: none;
color: inherit;
line-height: 0;
}
.ccp-cpt-gallery-shortcode-image,
.ccp-cpt-gallery-shortcode img.ccp-cpt-gallery-shortcode-image {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none;
min-height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1.001);
transition: transform 0.45s ease, filter 0.45s ease;
will-change: transform;
}
.ccp-cpt-gallery-shortcode-item > img.ccp-cpt-gallery-shortcode-image {
height: 100% !important;
}
.ccp-cpt-gallery-shortcode-item::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.16) 100%);
opacity: 0;
transition: opacity 0.35s ease;
z-index: 1;
}
.ccp-cpt-gallery-shortcode-item:hover .ccp-cpt-gallery-shortcode-image {
transform: scale(1.045);
filter: saturate(1.04) contrast(1.02);
}
.ccp-cpt-gallery-shortcode-item:hover::after {
opacity: 1;
}
.ccp-cpt-gallery-multiple .ccp-cpt-gallery-shortcode-item:first-child {
grid-column: span 2;
grid-row: span 2;
}
.ccp-cpt-gallery-count-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: minmax(260px, 420px);
}
.ccp-cpt-gallery-count-2 .ccp-cpt-gallery-shortcode-item:first-child {
grid-column: span 1;
grid-row: span 1;
}
.ccp-cpt-gallery-count-3 {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 170px;
}
.ccp-cpt-gallery-count-3 .ccp-cpt-gallery-shortcode-item:first-child {
grid-column: span 2;
grid-row: span 2;
}
.ccp-cpt-gallery-count-3 .ccp-cpt-gallery-shortcode-item:nth-child(2),
.ccp-cpt-gallery-count-3 .ccp-cpt-gallery-shortcode-item:nth-child(3) {
grid-column: span 2;
grid-row: span 1;
}
.ccp-cpt-gallery-count-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 170px;
}
.ccp-cpt-gallery-count-4 .ccp-cpt-gallery-shortcode-item:first-child {
grid-column: span 2;
grid-row: span 2;
}
.ccp-cpt-gallery-count-4 .ccp-cpt-gallery-shortcode-item:nth-child(2),
.ccp-cpt-gallery-count-4 .ccp-cpt-gallery-shortcode-item:nth-child(3),
.ccp-cpt-gallery-count-4 .ccp-cpt-gallery-shortcode-item:nth-child(4) {
grid-column: span 1;
grid-row: span 1;
}
.ccp-cpt-gallery-shortcode:not(.ccp-cpt-gallery-count-1):not(.ccp-cpt-gallery-count-2):not(.ccp-cpt-gallery-count-3):not(.ccp-cpt-gallery-count-4) .ccp-cpt-gallery-shortcode-item:nth-child(7n) {
grid-row: span 2;
}
.ccp-cpt-gallery-shortcode:not(.ccp-cpt-gallery-count-1):not(.ccp-cpt-gallery-count-2):not(.ccp-cpt-gallery-count-3):not(.ccp-cpt-gallery-count-4) .ccp-cpt-gallery-shortcode-item:nth-child(11n) {
grid-column: span 2;
}
@media (max-width: 1024px) {
.ccp-cpt-gallery-shortcode {
--ccp-gallery-row-height: 140px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ccp-cpt-gallery-count-2,
.ccp-cpt-gallery-count-3,
.ccp-cpt-gallery-count-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 180px;
}
.ccp-cpt-gallery-count-3 .ccp-cpt-gallery-shortcode-item:first-child,
.ccp-cpt-gallery-count-4 .ccp-cpt-gallery-shortcode-item:first-child {
grid-column: span 2;
grid-row: span 2;
}
}
@media (max-width: 767px) {
.ccp-cpt-gallery-shortcode {
--ccp-gallery-gap: 10px;
--ccp-gallery-radius: 14px;
--ccp-gallery-row-height: 120px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ccp-cpt-gallery-shortcode-single {
grid-template-columns: 1fr;
grid-auto-rows: minmax(240px, 420px);
}
.ccp-cpt-gallery-multiple .ccp-cpt-gallery-shortcode-item:first-child,
.ccp-cpt-gallery-count-3 .ccp-cpt-gallery-shortcode-item:first-child,
.ccp-cpt-gallery-count-4 .ccp-cpt-gallery-shortcode-item:first-child {
grid-column: span 2;
grid-row: span 2;
}
.ccp-cpt-gallery-count-2 {
grid-template-columns: 1fr;
grid-auto-rows: 240px;
}
.ccp-cpt-gallery-count-2 .ccp-cpt-gallery-shortcode-item:first-child {
grid-column: auto;
grid-row: auto;
}
.ccp-cpt-gallery-count-3 .ccp-cpt-gallery-shortcode-item:nth-child(2),
.ccp-cpt-gallery-count-3 .ccp-cpt-gallery-shortcode-item:nth-child(3) {
grid-column: span 1;
grid-row: span 1;
}
.ccp-cpt-gallery-shortcode:not(.ccp-cpt-gallery-count-1):not(.ccp-cpt-gallery-count-2):not(.ccp-cpt-gallery-count-3):not(.ccp-cpt-gallery-count-4) .ccp-cpt-gallery-shortcode-item:nth-child(11n) {
grid-column: span 1;
}
}
/*# sourceURL=ccp-cpt-gallery-frontend-inline-css */