`s, which have `min-width: 0;` by default. So we reset that to ensure fieldsets behave more like a standard block element.
See https://github.com/twbs/bootstrap/issues/12359
and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
*/
min-width: 0;
/* Reset the default outline behavior of fieldsets so they don't affect page layout. */
padding: 0;
margin: 0;
border: 0;
}
/*
1. Correct the text wrapping in Edge and IE.
2. Correct the color inheritance from `fieldset` elements in IE.
*/
legend {
display: block;
width: 100%;
max-width: 100%; /* 1 */
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
color: inherit; /* 2 */
white-space: normal; /* 1 */
}
progress {
vertical-align: baseline; /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */
}
/*
Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
/*
This overrides the extra rounded corners on search inputs in iOS so that our `.form-control` class can properly style them. Note that this cannot simply be added to `.form-control` as it's not specific enough.
For details, see https://github.com/twbs/bootstrap/issues/11586.
*/
outline-offset: -2px;
-webkit-appearance: none;
}
/*
Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
/*
Correct element displays
*/
output {
display: inline-block;
}
summary {
display: list-item; /* Add the correct display in all browsers */
}
template {
display: none; /* Add the correct display in IE */
}
/*
Always hide an element with the `hidden` HTML attribute (from PureCSS).
Needed for proper display in IE 10-.
*/
[hidden] {
display: none !important;
}
/* ============================================================
fonts.css
============================================================ */
/* region Inter */
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/bitrix/templates/lcon_clean/css/../fonts/inter/Inter-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/bitrix/templates/lcon_clean/css/../fonts/inter/Inter-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/bitrix/templates/lcon_clean/css/../fonts/inter/Inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/bitrix/templates/lcon_clean/css/../fonts/inter/Inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* endregion */
/* region Roboto */
/* cyrillic-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url('/bitrix/templates/lcon_clean/css/../fonts/roboto/Roboto-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url('/bitrix/templates/lcon_clean/css/../fonts/roboto/Roboto-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url('/bitrix/templates/lcon_clean/css/../fonts/roboto/Roboto-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url('/bitrix/templates/lcon_clean/css/../fonts/roboto/Roboto-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* endregion */
/* ============================================================
container.css
============================================================ */
.container,
.container-l {
margin: 0 auto;
width: 100%;
height: 100%;
}
.container {
max-width: 1680px;
}
.container-l {
max-width: 1824px;
}
@media (min-width: 992px) {
.container,
.container-l {
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
}
@media (max-width: 991px) {
.container,
.container-l {
max-width: 100%;
padding-left: var(--container-s-padding);
padding-right: var(--container-s-padding);
}
}
@media (max-width: 767px) {
.container-s-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
}
.wrapper {
padding: 0;
}
}
/* Общий H1 непараметрических страниц (авто-вывод в plain-шапке, см. header.php).
Страницы со своей вёрсткой заголовка сюда не попадают (LCON_CRUMBS_MANUAL /
LCON_H1_MANUAL). */
.page-title {
font-size: clamp(28px, 4vw, 48px);
font-weight: 700;
line-height: 1.12;
color: var(--color-dark);
margin: 12px 0 28px;
}
@media (max-width: 767px) {
.page-title {
margin: 8px 0 20px;
}
}
/* ============================================================
typography.css
============================================================ */
/*
* Общая типографика и generic-компоненты, используемые на всех страницах:
* заголовки, параграфы, «шапка» секции, лид, ссылка-стрелка.
* Значения размеров — из Figma (H2 56 / H3 32 / H4 24, Body 20/18/16/14).
*/
/* region Headings */
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--font-family-primary), sans-serif;
font-weight: 600;
line-height: 1.1;
color: var(--color-text);
}
.h1 { font-size: var(--fs-h1); font-weight: 600; }
.h2 { font-size: var(--fs-h2); font-weight: 600; }
.h3 { font-size: var(--fs-h3); font-weight: 500; }
.h4 { font-size: var(--fs-h4); font-weight: 600; }
/* endregion */
/* region Paragraphs / text helpers */
p {
margin: 0;
line-height: 1.4;
}
.text-muted { color: var(--color-text-secondary); }
.text-lg { font-size: 20px; }
.text-md { font-size: 18px; }
.text-sm { font-size: 14px; }
/* endregion */
/* region Section heading block */
.section__head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 40px;
}
.section__title {
font-size: clamp(28px, 4vw, 56px);
font-weight: 600;
line-height: 1.1;
color: var(--color-text);
}
.section__title--center {
text-align: center;
}
.section__lead {
max-width: 760px;
margin-top: 24px;
color: var(--color-text-secondary);
font-size: 18px;
line-height: 1.45;
}
/* заголовок секции на тёмном фоне */
.bg-textured .section__title,
.bg-textured .section__lead {
color: var(--color-white);
}
/* endregion */
/* region Link with arrow */
.link-arrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 16px;
color: var(--color-text);
white-space: nowrap;
transition: color var(--transition);
}
.link-arrow::after {
content: "";
width: 1.1em;
height: 1.1em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H8M17 7v9'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H8M17 7v9'/%3E%3C/svg%3E") no-repeat center / contain;
transition: transform var(--transition);
}
.link-arrow:hover {
color: var(--color-accent);
}
.link-arrow:hover::after {
transform: translate(3px, -3px);
}
/* когда link-arrow одновременно .btn — стрелка остаётся, цвет наследуется от кнопки */
.btn.link-arrow:hover {
color: inherit;
}
/* endregion */
/* ============================================================
components/header.css
============================================================ */
:root {
--nav-link-color: #878B9A;
--nav-link-active-color: #1D212F;
--nav-link-hover-color: #1D212F;
}
header.header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-bottom: 24px;
}
header.header .header__info {
display: flex;
justify-content: space-between;
}
.nav .nav__link {
font-size: 18px;
padding: 12.5px 16px;
color: var(--nav-link-color);
transition: color 0.15s linear;
}
.nav .nav__link.active {
color: var(--nav-link-active-color);
}
.nav .nav__link:hover {
color: var(--nav-link-hover-color);
}
header.header > .header__actions .btn {
color: var(--color-white);
background: var(--btn-dark);
border-color: var(--btn-dark);
}
header.header > .header__actions .btn:hover {
background: transparent;
color: var(--color-dark);
}
.mobile-menu {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 375px;
max-width: 100%;
padding: 24px;
background: var(--color-white);
z-index: 1000;
box-shadow: 3px 0 10px 0 rgba(0, 0, 0, 0.45);
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
.mobile-menu .nav {
display: flex;
flex-direction: column;
margin-top: 25px;
}
.mobile-menu .nav .nav__link {
position: relative;
color: var(--color-dark);
}
.mobile-menu .nav .nav__link::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background-color: var(--color-dark);
transform: scaleY(0);
transform-origin: bottom center;
transition: transform 0.2s ease-in-out;
}
.mobile-menu .nav .nav__link:hover::before {
transform: scaleY(1);
transform-origin: top center;
}
.mobile-menu .header__actions {
margin-top: 25px;
}
.mobile-menu .header__actions .btn {
width: 100%;
height: auto;
}
.mobile-menu__overlay {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
backdrop-filter: blur(5px);
}
#mobile-menu-status:checked ~ .mobile-menu {
transform: translateX(0%);
}
#mobile-menu-status:checked ~ .mobile-menu__overlay {
display: block;
}
.burger-menu {
width: fit-content;
cursor: pointer;
color: var(--color-dark);
}
.mobile-menu .burger-menu {
color: var(--color-dark) !important;
}
@media (min-width: 992px) {
.mobile-menu,
.mobile-menu__overlay,
.burger-menu {
display: none !important;
}
}
@media (max-width: 991px) {
.mobile-menu {
display: flex;
position: fixed;
top: 0;
right: 0;
height: 100vh;
}
.header > .nav,
.header > .header__actions {
display: none;
}
}
@media (max-width: 767px) {
header.header {
padding: 16px 16px 0;
}
}
/* ============================================================
Верхняя панель шапки (адреса / регион / телефон) + выбор региона
============================================================ */
/* --- Верхняя панель (только desktop; на мобильных инфо уходит в бургер) --- */
.header__top {
display: none;
}
@media (min-width: 992px) {
.header__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 20px 0 12px;
color: var(--color-text);
}
}
.header__addresses {
display: flex;
align-items: flex-start;
gap: 8px;
}
.header__addresses-icon {
display: inline-flex;
flex-shrink: 0;
margin-top: 1px;
color: currentColor;
opacity: .7;
}
.header__addresses-icon svg {
width: 18px;
height: 18px;
}
.header__addresses-list {
display: flex;
flex-direction: column;
gap: 3px;
}
.header__address {
font-size: 13px;
line-height: 1.35;
color: var(--color-text-secondary);
}
.header__top-right {
display: flex;
align-items: center;
gap: 28px;
flex-shrink: 0;
}
.header__phone {
font-size: 15px;
font-weight: 500;
color: var(--color-text);
white-space: nowrap;
transition: opacity var(--transition-fast);
}
.header__phone:hover {
color: var(--color-text);
opacity: .7;
}
/* --- Верхняя панель на тёмном hero: светлый текст --- */
.hero .header__top {
color: var(--color-white);
}
.hero .header__address {
color: var(--color-white-80);
}
.hero .header__phone,
.hero .header__phone:hover,
.hero .header__top .region-select__toggle,
.hero .header__top .region-select__toggle:hover {
color: var(--color-white);
}
/* --- Виджет выбора региона (общий вид) --- */
.region-select {
position: relative;
}
.region-select__toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
margin: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
cursor: pointer;
line-height: 1.2;
}
.region-select__name {
font-size: 15px;
font-weight: 500;
}
.region-select__arrow {
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform var(--transition);
}
.region-select.is-open .region-select__arrow {
transform: rotate(180deg);
}
.region-select__dropdown {
position: absolute;
top: calc(100% + 12px);
right: 0;
/* Выше шапки и кнопок (mobile-menu — 1000), но ниже popup-форм (#popup_iframe_wrapper — 3000). */
z-index: 1500;
min-width: 240px;
max-height: 420px;
overflow-y: auto;
padding: 8px;
background: var(--color-white);
border-radius: var(--radius-sm);
box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.region-select.is-open .region-select__dropdown {
opacity: 1;
visibility: visible;
transform: none;
}
/* На desktop-панели дропдаун раскрывается ещё и по наведению («При наведении»). */
@media (hover: hover) and (min-width: 992px) {
.header__top .region-select:hover .region-select__dropdown {
opacity: 1;
visibility: visible;
transform: none;
}
/* Прозрачный «мостик» перекрывает зазор в 12px между кнопкой и списком:
дропдаун — потомок .region-select, поэтому наведение на мостик сохраняет
:hover и список не схлопывается, пока курсор идёт к пунктам. */
.header__top .region-select__dropdown::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -12px;
height: 12px;
}
.header__top .region-select:hover .region-select__arrow {
transform: rotate(180deg);
}
}
.region-select__list {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.region-select__link {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: var(--radius-xs);
font-size: 15px;
transition: background var(--transition-fast);
}
/* Цвет пунктов фиксируем во всех состояниях. В теме есть глобальные правила
a { color: var(--color-gray) } и a:hover { color: var(--color-white) } — они
перекрашивали ссылки списка (в т.ч. в белый при наведении), из-за чего текст
на белой карточке становился нечитаемым. Держим тёмный цвет всегда. */
.region-select__link,
.region-select__link:link,
.region-select__link:visited,
.region-select__link:hover,
.region-select__link:focus,
.region-select__link:active {
color: var(--color-text);
}
.region-select__link:hover {
background: var(--color-bg);
}
.region-select__item.is-current .region-select__link {
background: var(--color-bg);
font-weight: 500;
}
.region-select__check {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--color-text);
}
.region-select__check svg {
width: 18px;
height: 18px;
}
/* --- Регион и адреса внутри бургер-меню (мобильные) --- */
.mobile-menu__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.mobile-menu__logo {
height: 40px;
}
.mobile-menu__logo svg {
height: 100%;
width: auto;
}
.mobile-menu__title {
margin-top: 24px;
font-size: 40px;
font-weight: 700;
line-height: 1.05;
color: var(--color-dark);
}
/* Кнопку «Связаться» и блоки региона/адресов прижимаем к низу меню. */
.mobile-menu .header__actions {
margin-top: auto;
}
.mobile-menu__region {
margin-top: 24px;
}
.mobile-menu .region-select__toggle {
color: #1E6FE0;
font-size: 16px;
}
.mobile-menu .region-select__name {
font-weight: 500;
}
/* Дропдаун региона в меню раскрывается вверх, над кнопкой. */
.mobile-menu .region-select__dropdown {
top: auto;
bottom: calc(100% + 12px);
left: 0;
right: 0;
max-height: 60vh;
}
.mobile-menu__addresses {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--color-stroke);
}
.mobile-menu__addresses-icon {
display: inline-flex;
flex-shrink: 0;
margin-top: 1px;
color: var(--color-text-secondary);
}
.mobile-menu__addresses-icon svg {
width: 18px;
height: 18px;
}
.mobile-menu__addresses-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-menu__address {
font-size: 14px;
line-height: 1.4;
color: var(--color-text-secondary);
}
/* ============================================================
components/footer.css
============================================================ */
.footer__inner {
background-color: var(--color-dark);
padding: 48px;
border-radius: 40px;
color: var(--color-white);
}
.footer__brand {
height: 52px;
}
.footer__section {
margin-top: 34px;
}
.footer__title {
color: var(--color-white);
font-size: 16px !important;
font-weight: 700 !important;
margin-bottom: 24px;
padding-left: 0 !important;
}
/* region Top */
.footer__top {
display: grid;
grid-template-columns: 1.6275fr 1.1815fr 1fr;
gap: 40px;
margin-top: 30px;
}
.footer__top .footer__title {
margin-bottom: 16px;
}
.footer__list li:not(:first-child) {
margin-top: 8px;
}
.footer__contacts-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px;
margin-bottom: 24px;
}
.footer__contacts-row a {
display: flex;
align-items: center;
color: var(--color-white);
}
.footer__contacts-row a svg {
margin-right: 8px;
}
/* endregion */
/* region Main */
.footer__main {
display: grid;
grid-template-columns: 1fr 170px;
gap: 40px;
color: var(--color-gray);
}
.footer__country {
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 8px;
}
.footer__addresses strong {
color: var(--color-white);
}
.footer__addresses li:not(:first-child) {
margin-top: 8px;
}
.developers .developer:nth-child(2) {
margin-top: 24px;
}
#orvo-developer .delevoper__icon {
margin-top: 16px;
max-width: 110px;
}
#photonix-developer .delevoper__icon {
margin-top: 20px;
}
/* endregion */
/* region Bottom */
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 17px 0;
border-top: 1px solid #FFFFFF1A;
}
.footer__policy {
margin-left: 16px;
}
.footer__policy a {
display: block;
text-align: end;
}
.footer__policy a:not(:first-child) {
margin-top: 8px;
}
/* endregion */
/* region Responsive */
@media (max-width: 991px) {
/* region Top */
.footer__top {
grid-template-columns: 1fr 1fr;
}
/* endregion */
}
@media (max-width: 767px) {
.footer__inner {
padding: 32px 16px 24px;
border-radius: 0;
}
.footer__brand {
height: 37px;
}
/* region Top */
.footer__top {
grid-template-columns: 1fr;
}
.footer__top .footer__col {
display: none;
}
.footer__contacts > a {
background: #fff;
color: var(--color-dark);
}
.footer__contacts > a:hover,
.footer__contacts > a:active {
background: transparent;
}
/* endregion */
/* region Main */
.footer__main {
grid-template-columns: 1fr;
gap: 24px;
}
.footer__addresses {
font-size: 14px;
}
.developers {
display: flex;
justify-content: space-between;
}
.developers .developer:nth-child(2) {
margin-top: 0;
margin-left: 16px;
}
/* endregion */
/* region Bottom */
.footer__bottom {
flex-direction: column;
align-items: start;
font-size: 14px;
}
.footer__policy {
display: flex;
flex-direction: column-reverse;
margin-left: 0;
}
.footer__policy a {
text-align: start;
margin-top: 10px !important;
font-weight: 400 !important;
}
/* endregion */
}
/* endregion */
/* ============================================================
elements/buttons.css
============================================================ */
:root {
--btn-line-prehovered: rgba(228, 230, 238, .35);
--btn-light-outline: #E4E6EEFF;
--btn-light: #FFFFFFFF;
--btn-light-hover: #e0e0e0;
--btn-gray: #EAEAEAFF;
--btn-dark: #1D212FFF;
--btn-red: #AD1927;
--btn-red-dark: #8E1320FF;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 21px;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
border: 1px solid transparent;
cursor: pointer;
transition: .2s ease;
white-space: nowrap;
gap: 12px;
}
.btn svg {
width: 24px;
height: 24px;
}
/* Sizes */
.btn--sm {
min-height: 24px;
vertical-align: middle;
padding: 0;
}
.btn--lg {
padding: 17px 34px;
font-size: 16px;
}
.btn--block {
width: 100%;
text-align: center;
}
@media (max-width: 767px) {
.btn--lg {
padding: 12px 24px;
}
}
/* region Colors */
.btn-light {
background: #fff;
color: var(--color-dark);
}
.btn-light:hover {
color: var(--color-dark);
background: var(--btn-light-hover);
}
.btn-light-outline {
background: #fff;
border-color: var(--btn-light);
color: var(--color-dark);
}
.btn-light-outline:hover {
background: transparent;
color: var(--color-dark);
}
.btn-dark {
color: var(--color-white);
background: var(--btn-dark);
border-color: var(--btn-dark);
}
.btn-dark:hover {
background: transparent;
color: var(--color-dark);
}
.btn-outline {
background: transparent;
color: #fff;
border-color: var(--btn-line-prehovered);
}
.btn-outline:hover {
border-color: var(--btn-light-outline);
}
.btn-red {
background: var(--btn-red);
color: var(--color-white);
}
.btn-red:hover {
background: var(--btn-red-dark);
}
/* светлая полупрозрачная кнопка для тёмных секций (макет: bg rgba(255,255,255,.9) + blur) */
.btn-light-blur {
padding: 12px 24px;
background: rgba(255, 255, 255, .9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--color-text);
font-weight: 500;
}
.btn-light-blur:hover {
background: var(--color-white);
color: var(--color-text);
}
/* прозрачная кнопка для тёмных секций */
.btn-ghost {
background: transparent;
color: var(--color-white);
border-color: var(--color-stroke-dark);
}
.btn-ghost:hover {
background: var(--color-white);
color: var(--color-dark);
border-color: var(--color-white);
}
/* контурная кнопка для светлых карточек (тёмный текст) */
.btn-outline-dark {
background: transparent;
color: var(--color-text);
border-color: var(--color-stroke);
}
.btn-outline-dark:hover {
background: var(--color-dark);
color: var(--color-white);
border-color: var(--color-dark);
}
/* Кнопки Aspro из контента (DETAIL_TEXT статей/новостей и прочих текстов, вставляются
визуальным редактором как
). Классы
темы Aspro (.btn-default / .btn-transparent) в lcon_clean не оформлены, а базовый .btn
прозрачный — из-за чего такие кнопки выглядели как голый текст. Оформляем их под дизайн:
основную — фирменной красной, контурную — тёмным аутлайном. */
.btn-default {
background: var(--btn-red);
color: var(--color-white);
border-color: var(--btn-red);
}
.btn-default:hover {
background: var(--btn-red-dark);
border-color: var(--btn-red-dark);
color: var(--color-white);
}
.btn-transparent {
background: transparent;
color: var(--color-text);
border-color: var(--color-stroke);
}
.btn-transparent:hover {
background: var(--color-dark);
color: var(--color-white);
border-color: var(--color-dark);
}
/* endregion */
/* ============================================================
features/reveal.css
============================================================ */
/*
* Анимации появления элементов при скролле (.reveal + IntersectionObserver из assets/js/reveal.js).
* Общие для всех страниц — используются в index.twig, pages/about.twig, pages/buyer.twig.
*/
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
will-change: opacity, transform;
}
.reveal--left { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(.96); }
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* Пошаговая задержка внутри группы (data-stagger на родителе) */
[data-stagger] > .reveal { transition-delay: calc(var(--i, 0) * .08s); }
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ============================================================
features/slider.css
============================================================ */
.swiper {
overflow: visible;
}
/* Слайд = карточка с картинкой.
Фиксированный размер: при сужении экрана карточка не меняет
ширину/высоту — просто становится видно меньше карточек. */
.swiper-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 12px;
background: #fff;
color: #1D212F;
fill: none;
cursor: pointer;
box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.swiper-slider__btn:focus {
outline: none;
}
.swiper-slider__btn:hover {
background: #111;
color: #fff;
}
.swiper-slider__btn svg {
width: 20px;
height: 20px;
}
.swiper-slider__btn--prev {
left: 8px;
}
.swiper-slider__btn--next {
right: 8px;
}
/* Swiper сам вешает этот класс, когда листать некуда */
.swiper-slider__btn.swiper-button-disabled {
opacity: 0;
pointer-events: none;
}
/* А этот — когда все слайды влезают в кадр (свайпать нечего): прячем стрелки совсем */
.swiper-slider__btn.swiper-button-lock {
display: none;
}
/* ---------- Мобильная версия ---------- */
@media (max-width: 767px) {
.swiper {
border-radius: 12px;
}
.swiper-slider__btn {
display: none;
}
}
/* ============================================================
features/scroll-track.css
============================================================ */
.scroll-track {
display: flex;
width: max-content;
animation: scroll 50s linear infinite;
}
.scroll-track:hover {
animation-play-state: paused;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* Адаптив */
@media (max-width: 768px) {
.scroll-track {
gap: 20px;
}
}
/* ============================================================
features/portfolio-modal.css
============================================================ */
/*
* Модальное окно портфолио (макет node 13202-12200).
* Открывается по клику на карточку .example__card (см. portfolio-modal.js).
*/
.pmodal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 40px;
}
.pmodal.is-open {
display: flex;
}
.pmodal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.pmodal__dialog {
position: relative;
z-index: 1;
display: flex;
align-items: stretch;
gap: 48px;
width: 100%;
max-width: 1360px;
max-height: calc(100dvh - 80px);
padding: 48px;
background: var(--color-white);
border-radius: 16px;
overflow: hidden;
}
/* Картинка */
.pmodal__image {
flex: 1 1 auto;
min-width: 0;
border-radius: 16px;
overflow: hidden;
background: rgba(0, 0, 0, .03);
}
.pmodal__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Текстовая колонка */
.pmodal__text {
flex: 0 0 480px;
display: flex;
flex-direction: column;
gap: 16px;
}
.pmodal__head {
display: flex;
align-items: flex-start;
gap: 16px;
}
.pmodal__title {
flex: 1;
font-size: 40px;
font-weight: 600;
line-height: 1.1;
color: var(--color-text);
}
.pmodal__chip {
align-self: flex-start;
padding: 7px 8px;
font-size: 14px;
line-height: 1.3;
color: var(--color-text);
background: rgba(0, 0, 0, .03);
border-radius: 6px;
}
.pmodal__info {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
background: rgba(0, 0, 0, .03);
border: 1px solid rgba(0, 0, 0, .05);
border-radius: 8px;
}
.pmodal__info-title {
font-size: 20px;
font-weight: 600;
line-height: 1.3;
color: var(--color-text);
}
.pmodal__info-text {
font-size: 16px;
line-height: 1.3;
color: var(--color-text-secondary);
}
/* Кнопки: стрелки навигации и закрытие */
.pmodal__nav,
.pmodal__close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 0;
border: none;
border-radius: 12px;
background: rgba(0, 0, 0, .03);
color: var(--color-text);
cursor: pointer;
transition: background var(--transition);
}
.pmodal__nav:hover,
.pmodal__close:hover {
background: rgba(0, 0, 0, .08);
}
.pmodal__nav {
align-self: center;
}
/* Планшет */
@media (max-width: 991px) {
.pmodal__text {
flex-basis: 360px;
}
.pmodal__title {
font-size: 32px;
}
}
/* Мобильный: колонка на весь экран */
@media (max-width: 767px) {
.pmodal {
padding: 0;
}
.pmodal__dialog {
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 100%;
height: 100dvh;
max-height: 100dvh;
padding: 16px;
border-radius: 0;
overflow-y: auto;
}
.pmodal__image {
order: 1;
flex: none;
width: 100%;
aspect-ratio: 4 / 3;
}
.pmodal__text {
order: 2;
flex: none;
width: 100%;
}
.pmodal__title {
font-size: 26px;
}
/* Стрелки — фиксированные по нижним углам, закрытие — верхний правый угол */
.pmodal__nav {
position: fixed;
bottom: 16px;
z-index: 2;
background: var(--color-white);
box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .4);
}
.pmodal__nav--prev {
left: 16px;
}
.pmodal__nav--next {
right: 16px;
}
.pmodal__close {
position: fixed;
top: 16px;
right: 16px;
z-index: 2;
background: var(--color-white);
box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .4);
}
}
/* ============================================================
style.css (тело, без @import)
============================================================ */
html {
/*scroll-behavior: smooth;*/
}
body {
font-family: var(--font-family-primary), sans-serif;
background-color: var(--body-color);
}
.wrapper {
overflow-x: hidden;
padding-top: 30px;
padding-bottom: 30px;
}
@media (max-width: 767px) {
.wrapper {
padding-top: 0;
padding-bottom: 0;
}
}
/* region Links */
a {
color: var(--color-gray);
transition: color .15s;
}
a:hover {
color: var(--color-white);
}
a.light {
color: var(--color-white);
}
a.light:hover {
color: var(--color-gray);
}
/* endregion */
/* region Paddings */
.pt-80 {
padding-top: 80px;
}
.py-80 {
padding-top: 80px;
padding-bottom: 80px;
}
.p-48 {
padding: 48px;
}
.py-48 {
padding-left: 48px;
padding-right: 48px;
}
@media (max-width: 767px) {
.py-s-16 {
padding-left: 16px;
padding-right: 16px;
}
.p-s-16 {
padding: 16px;
}
}
/* endregion */
/* region breadcrumbss */
.breadcrumbs {
display: flex;
flex-wrap: wrap;
padding: 32px 0;
}
.breadcrumbs__item {
position: relative;
color: #878B9A;
}
.breadcrumbs__item:not(:first-child) {
margin-left: 8px;
padding-left: 9px;
}
.breadcrumbs__item:not(:first-child)::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #CBCBCB;
}
.breadcrumbs__link {
font-size: 14px;
font-weight: 500;
color: var(--color-gray);
}
.breadcrumbs__link:hover {
color: var(--color-dark);
}
/* Крошки на светлом фоне: ссылка «Главная» тёмная (по умолчанию цвет
рассчитан на тёмный hero — --color-gray). */
.breadcrumbs--dark .breadcrumbs__link {
color: var(--color-text);
}
.breadcrumbs--dark .breadcrumbs__link:hover {
color: var(--color-text-secondary);
}
/* endregion */
.bg-textured {
position: relative;
background: rgba(29, 33, 47, 1);
}
.bg-textured::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: url("/bitrix/templates/lcon_clean/css/../images/textures/texture-wall.png");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 4%;
}
.bg-textured .btn-light-outline:hover {
color: var(--color-white);
}
.bg-textured > * {
position: relative;
z-index: 5;
}
/* region Copyright */
#copyright {
color: var(--color-gray);
}
/* endregion */
/* ============================================================
landing.css
============================================================ */
:root {
--hero-nav-link-active-color: #FFFFFF;
--hero-nav-link-hover-color: #FFFFFF99;
--features-accent-color: #16475D;
}
section.section {
padding-top: 88px;
padding-bottom: 88px;
}
/* Единый отступ между заголовком секции и её контентом,
когда заголовок стоит напрямую, без обёртки .section__head
(Team, Сертификаты, Примеры). Совпадает с .section__head → margin-bottom: 40px. */
.section__title + .team-slider,
.section__title + .certs,
.section__title + .examples,
.section__lead + .team-slider {
margin-top: 40px;
}
/* region Objects */
.objects {
position: relative;
border-radius: 24px;
}
.objects .swiper-slide {
width: 600px;
height: 340px;
}
.objects__card {
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 16px;
overflow: hidden;
/* center/cover — фолбэк для закэшированной разметки с inline background-image;
поверх ложится ![]()
. */
background: #d9d9dd center / cover no-repeat;
}
/* Фото объекта — ![]()
вместо background-image (индексация). */
.objects__pic {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 767px) {
.objects {
border-radius: 16px;
padding: 10px;
}
.objects .swiper-slide {
height: 240px;
}
}
/* endregion */
/* region Brands */
.brands {
overflow-x: hidden;
height: 100%;
position: relative;
}
.brands .scroll-track {
gap: 20px;
}
.brands .brands__item {
height: auto;
background: var(--color-white);
border-radius: 24px;
padding: 10px 32px;
overflow: hidden;
}
.brands .brands__item img {
width: 136px;
height: 72px;
object-fit: contain;
object-position: center;
transition: transform .2s ease;
}
.brands .brands__item:hover img {
transform: scale(1.2);
}
@media (max-width: 767px) {
/* Две строки-маркизы одна под другой (собираются в brands.js) */
.brands {
display: flex;
flex-direction: column;
gap: 12px;
}
.brands .scroll-track {
gap: 12px;
}
/* «Кирпичное» смещение: вторая строка сдвинута на пол-карточки.
transform трека занят анимацией маркизы, поэтому смещаем строку-обёртку. */
.brands__row--b {
transform: translateX(-84px);
}
.brands .brands__item {
width: 156px;
padding: 10px 16px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.brands .brands__item img {
width: 84px;
height: 44px;
}
}
/* endregion */
/* region Hero */
#hero {
padding-top: 0;
padding-bottom: 0;
height: 100dvh;
max-height: 1020px;
}
.hero {
position: relative;
overflow: hidden;
height: 100%;
min-height: fit-content;
border-radius: 32px;
}
/* Фон hero — реальный ![]()
(правка №2): кладём под контент, кроем как cover. */
.hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
/* Затемняющий градиент поверх фото (был частью background-image). */
.hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
z-index: 1;
pointer-events: none;
}
/* Контент hero — выше фото и градиента. */
.hero > *:not(.hero__bg) {
position: relative;
z-index: 2;
}
/* Верхняя панель шапки — над основным рядом (header.header, ниже по DOM с тем же
z-index:2), иначе кнопка «Связаться» перекрывает дропдаун выбора региона.
Специфичность (0,2,0) как у правила выше + идёт позже — перебивает z-index:2. */
.hero > .header__top {
z-index: 3;
}
.hero header.header .burger-menu {
color: var(--color-white);
}
.hero header.header > .header__actions .btn {
background: #fff;
border-color: var(--btn-light);
color: var(--color-dark);
}
.hero header.header > .header__actions .btn:hover {
background: transparent;
color: var(--color-white);
}
/* Меню на тёмном hero (правка №7): базовый цвет ссылок #878B9A нечитаем на фото.
Делаем ссылки чисто белыми и добавляем тень — читаемо даже над светлыми (небо)
участками фотографии, где полупрозрачного белого было мало. */
.hero header.header > .nav .nav__link {
color: var(--color-white);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.hero header.header > .nav .nav__link.active,
.hero header.header > .nav .nav__link:hover {
color: var(--color-white);
}
.hero-content {
margin-top: 48px;
padding-top: 80px;
width: 1110px;
max-width: 100%;
color: var(--color-white);
}
.hero__title {
font-size: 64px;
line-height: 102%;
font-weight: 600;
color: var(--color-white);
}
.hero__text {
margin-top: 24px;
}
.hero__buttons {
display: flex;
flex-wrap: wrap;
margin-top: 48px;
gap: 16px;
}
.hero .breadcrumbs__link {
color: var(--color-white);
}
.hero .breadcrumbs__link:hover {
color: var(--color-gray);
}
.hero .breadcrumbs ~ .hero-content {
margin-top: 0;
}
/* Резерв высоты hero под перекрывающие карточки статистики (главная и /company/).
Кнопки hero стоят на фиксированной позиции сверху, а секция #hero = 100dvh; на
невысоких экранах (ноутбуки) она сжимается — и блок .stats-features
(margin-top: -215px) позиционируется от нижней границы #hero, наезжая на
коммерческие кнопки. Задаём #hero минимальную высоту, чтобы его низ (а значит и
карточки) всегда были ниже кнопок. Скоупим через :has(.hero--stats) — класс есть
только там, где ниже идёт блок статистики (см. blocks/hero.php), прочие
hero-страницы не затронуты. */
@media (min-width: 992px) {
#hero:has(.hero--stats) {
min-height: 900px;
}
}
@media (min-width: 992px) and (max-height: 940px) {
.stats-features { margin-top: -180px !important; } /* новый резерв */
}
@media (max-width: 767px) {
#hero {
height: 100dvh;
}
#hero .container {
height: 100%;
}
.hero {
border-radius: 0 0 24px 24px;
padding: 0 16px 24px;
display: flex;
flex-direction: column;
}
.hero header.header {
padding: 16px 0 0;
}
.hero-content {
padding: 80px 0 0;
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.hero__title {
font-size: 32px;
font-weight: 700;
}
.hero__text {
font-size: 16px;
}
.hero__buttons {
margin-top: auto;
}
.hero__buttons .btn {
width: 100%;
}
}
/* endregion */
/* region Stats & Features */
.stats-features {
/* Карточки поднимаются на hero (margin-top: -215px). Сам .hero —
position: relative, а #hero не создаёт контекст наложения, поэтому hero
(позиционированный) рисуется ПОВЕРХ статичных карточек и перекрывает их.
Делаем .stats-features позиционированным с z-index выше hero, чтобы
карточки лежали НАД hero, как задумано макетом. */
position: relative;
z-index: 2;
margin: -215px auto 0;
}
.stats,
.features {
max-width: 92%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
gap: 16px;
}
.stats-features .card {
background: var(--color-white);
border: 1px solid #E4E4E4;
padding: 32px;
border-radius: 32px;
}
.stats-features .card--accent {
background: linear-gradient(44.44deg, #00334A 23.48%, rgba(0, 62, 87, 0.8) 92.5%);
}
/* region Stats */
.stats .card {
height: 225px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.stats .stat__num {
font-size: clamp(44px, 5.5vw, 100px);
font-weight: 600;
background: linear-gradient(180deg, #FFFFFF -54.27%, #333333 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 100%;
white-space: nowrap;
}
.stats .stat__unit {
font-size: clamp(28px, 3.3vw, 60px);
}
.stats .stat__caption {
font-size: 20px;
line-height: 100%;
color: var(--color-dark);
margin-top: 16px;
}
/* endregion */
/* region Features */
.features {
margin-top: 16px;
}
/* Правка №14: карточки были слишком растянуты — при justify-content:space-between
и большой min-height заголовок улетал вверх, текст вниз, между ними зиял пустой
провал (особенно заметно на мобильном). Прижимаем контент к верху (flex-start) и
снижаем min-height. Высоту карточек в ряду всё равно уравнивает грид (stretch). */
.features .card {
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 24px;
}
/* Акцентной карточке (24/7) нижний текст по макету нужен внизу — оставляем
распределение по краям. */
.features .card--accent {
justify-content: space-between;
}
.features .feature__title {
font-size: clamp(24px, 2.4vw, 40px);
font-weight: 700;
line-height: 100%;
color: var(--features-accent-color);
}
.features .feature__text {
font-size: 20px;
line-height: 100%;
}
.features .card--accent {
position: relative;
overflow: hidden;
}
.features .card--accent::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 100%;
width: 511px;
height: 115px;
background: url("/bitrix/templates/lcon_clean/css/../images/svg/elcon.svg") no-repeat center;
background-size: contain;
transform: translate(-60%, -50%) rotate(-90deg);
}
.features .card--accent .feature__title {
color: var(--color-white);
font-size: clamp(60px, 6vw, 100px);
font-weight: 600;
line-height: 100%;
}
.features .card--accent .feature__under-title {
max-width: 335px;
margin-top: 8px;
}
.features .card--accent .feature__under-title,
.features .card--accent .feature__text {
font-size: 20px;
line-height: 100%;
color: #FFFFFFCC;
}
/* endregion */
/* region Stats & Features adaptive */
@media (max-width: 991px) {
.stats-features {
margin: 0 auto;
}
.stats-features .card {
padding: 24px;
border-radius: 24px;
}
.stats .card {
height: auto;
min-height: 180px;
}
.features .card {
min-height: auto;
}
.features .card--accent .feature__under-title {
max-width: 260px;
}
}
@media (max-width: 767px) {
.stats-features .card {
padding: 20px;
border-radius: 20px;
text-align: center !important;
}
.stats .card {
min-height: auto;
}
.features .card--accent .feature__under-title {
max-width: 100%;
}
}
@media (max-width: 991px) {
.stats,
.features {
grid-template-columns: 1fr;
}
.stats-features .card {
padding: 24px;
border-radius: 24px;
}
/* На мобильном площади идут первыми (см. макет) */
.stats .card:nth-child(1) {
order: 2;
}
.stats .card:nth-child(2) {
order: 1;
}
.stats .card:nth-child(3) {
order: 3;
}
.stats .card {
height: auto;
min-height: 180px;
}
.stats .stat__num {
font-size: 48px;
}
.stats .stat__unit {
font-size: 32px;
}
.stats .stat__caption {
font-size: 16px;
margin-top: 8px;
}
.features .feature__text {
font-size: 16px;
}
.features .card--accent .feature__under-title,
.features .card--accent .feature__text {
font-size: 16px;
}
}
/* endregion */
/* endregion */
/* ===================================================================
Секции лендинга (products, qcm, team, trust, advantages,
blog, certs, examples, cta) + адаптив
=================================================================== */
/* region Products slider (object cards) */
#productsSwiper .swiper-slide {
width: 408px;
max-width: 82vw;
height: auto;
}
/* Десктоп — карточка как в макете (node 13202-12984):
полупрозрачная на тёмном фоне, крупный заголовок Roboto, картинка снизу. */
.product-card {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 48px;
height: 100%;
padding: 16px;
border-radius: 24px;
background: rgba(255, 255, 255, .04);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
color: var(--color-white);
text-decoration: none;
overflow: hidden;
isolation: isolate;
}
.product-card__content {
display: flex;
flex-direction: column;
gap: 32px;
padding: 16px 16px 0;
}
.product-card__subtitle {
font-family: Inter, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.1;
color: rgba(255, 255, 255, .6);
}
.product-card__title {
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 40px;
line-height: 1.1;
color: var(--color-white);
}
.product-card__media {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.product-card__img {
position: relative;
height: 353px;
overflow: hidden;
/* #d9d9dd — плейсхолдер; center/cover — фолбэк для закэшированной разметки с
inline background-image (пока не сброшен кэш компонента). Поверх ложится ![]()
. */
background: #d9d9dd center / cover no-repeat;
}
/* Фото завода — ![]()
вместо background-image (индексация). Заполняет контейнер
по cover, плавный зум по ховеру карточки. */
.product-card__pic {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.product-card:hover .product-card__pic {
transform: scale(1.05);
}
/* Стрелка нужна только в мобильном варианте (см. card.html) */
.product-card__arrow {
display: none;
}
/* Мобильный вариант — как в card.html: тёмная плотная карточка,
картинка под маской и «выглядывающая» кнопка-стрелка. */
@media (max-width: 767px) {
#productsSwiper .swiper-slide {
width: 300px;
}
.product-card {
gap: 0;
background: #2A2D3A;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.product-card__content {
gap: 0;
padding: 0;
}
.product-card__subtitle {
max-width: 70%;
font-family: Roboto, sans-serif;
color: var(--color-white);
}
.product-card__title {
margin-top: 24px;
font-family: Inter, sans-serif;
font-size: 32px;
font-weight: 800;
}
.product-card__media {
margin-top: 24px;
border-radius: 0;
overflow: visible;
}
.product-card__img {
height: 300px;
overflow: visible;
background-color: transparent;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-mask-image: url('/bitrix/templates/lcon_clean/css/../images/card_mask.png');
mask-image: url('/bitrix/templates/lcon_clean/css/../images/card_mask.png');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
}
.product-card:hover .product-card__pic {
transform: scale(1.1);
}
.product-card__arrow {
position: absolute;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: #fff;
color: #111;
transition: background .2s, color .2s;
}
.product-card:hover .product-card__arrow {
background: #111;
color: #fff;
}
}
/* endregion */
/* region QCM */
.qcm .section__head {
align-items: flex-start;
gap: 60px;
}
.qcm .section__title {
flex: 0 0 auto;
max-width: 40%;
}
.qcm__about {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 780px;
font-size: 18px;
color: var(--color-text);
}
.qcm__about p {
line-height: 1.25;
letter-spacing: 0.36px;
}
.qcm__subtitle {
margin-top: 8px;
font-size: 24px;
font-weight: 600;
line-height: 1.1;
color: var(--color-text);
}
/* endregion */
/* region Team */
.team {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.member {
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-stroke);
border-radius: var(--radius-md);
padding: 20px;
}
.member__photo {
position: relative;
aspect-ratio: 1 / 1;
margin-bottom: 20px;
border-radius: var(--radius-sm);
overflow: hidden;
background: #d9d9dd center / cover no-repeat;
}
/* Фото сотрудника — ![]()
вместо background-image (индексация). */
.member__pic {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.member__role {
min-height: 36px;
font-size: 14px;
color: var(--color-text-secondary);
}
.member__name {
margin: 6px 0 16px;
font-size: 20px;
font-weight: 600;
}
.member__field {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
font-size: 14px;
border-top: 1px solid var(--color-stroke);
}
.member__field span {
color: var(--color-text-secondary);
}
.member__field a {
font-weight: 500;
color: var(--color-text);
}
.member .btn {
margin-top: 20px;
}
/* Team как слайдер (Swiper): обёртка держит стрелки, .team перестаёт быть grid. */
.team-slider {
position: relative;
/* прячем «хвост» слайдов за кадром, чтобы не появлялся горизонтальный скролл страницы */
overflow-x: hidden;
}
.team.swiper {
display: block;
/* немного «воздуха» под тень карточек и стрелки по краям */
padding-bottom: 4px;
overflow-x: hidden;
}
.team.swiper .member {
height: auto;
box-sizing: border-box;
}
/* endregion */
/* region Trust (на тёмном фоне) */
.trust {
display: grid;
grid-template-columns: minmax(0, 1.28fr) 1fr;
gap: 24px 100px;
align-items: start;
margin-bottom: 64px;
}
.trust__title {
max-width: 761px;
font-size: clamp(32px, 3.4vw, 48px);
font-weight: 600;
line-height: 1.156;
color: var(--color-white);
}
.trust__text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
font-size: 16px;
color: rgba(255, 255, 255, .8);
}
.trust__text p {
line-height: 1.2;
letter-spacing: 0.16px;
}
/* endregion */
/* region Advantages */
.advantages__head {
margin-bottom: 56px;
text-align: center;
}
.advantages__mark {
width: 140px;
max-width: 100%;
margin: 0 auto 25px;
}
.advantages__mark img {
display: block;
width: 100%;
height: auto;
}
.advantages__sub {
margin-top: 12px;
font-size: 18px;
line-height: 1.25;
letter-spacing: 0.36px;
color: var(--color-text);
}
.adv-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.adv-card {
display: flex;
flex-direction: column;
min-height: 406px;
padding: 32px;
background: var(--color-white);
border: 1px solid var(--color-stroke);
border-radius: var(--radius-md);
}
.adv-card__icon {
width: 48px;
height: 48px;
color: var(--color-accent);
}
.adv-card__icon .svg-icon {
display: block;
width: 48px;
height: 48px;
}
.adv-card__title {
margin-top: auto;
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 500;
line-height: 1.1;
color: var(--color-text);
}
.adv-card__text {
margin-top: 32px;
font-size: 20px;
line-height: 1.2;
color: var(--color-text-secondary);
}
/* endregion */
/* region Blog */
.blog {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.post {
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--color-white);
border: 1px solid var(--color-stroke);
border-radius: var(--radius-md);
transition: transform var(--transition), box-shadow var(--transition);
}
.post:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .35);
}
.post__img {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #d9d9dd center / cover no-repeat;
}
/* Превью новости — ![]()
вместо background-image (индексация). */
.post__pic {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.post__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 24px;
}
.post__date {
font-size: 14px;
color: var(--color-text-secondary);
}
.post__title {
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.post__excerpt {
font-size: 15px;
line-height: 1.5;
color: var(--color-text-secondary);
}
.post .link-arrow {
margin-top: 4px;
}
/* endregion */
/* region Certificates */
.certs {
display: flex;
flex-wrap: wrap;
gap: 32px;
}
.cert {
margin: 0;
text-align: center;
}
.cert__link {
display: block;
cursor: zoom-in;
}
.cert__img {
position: relative;
display: block;
width: 220px;
height: 300px;
margin-bottom: 14px;
/* center/contain — фолбэк для возможной закэшированной разметки; поверх — ![]()
. */
background: var(--color-white) center / contain no-repeat;
border: 1px solid var(--color-stroke);
border-radius: 12px;
box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .5);
transition: transform var(--transition), box-shadow var(--transition);
}
/* Сертификат — ![]()
вместо background-image (индексация). contain, чтобы лист
был виден целиком; небольшой внутренний отступ как у прежнего фонового варианта. */
.cert__pic {
position: absolute;
inset: 8px;
width: calc(100% - 16px);
height: calc(100% - 16px);
object-fit: contain;
}
.cert__link:hover .cert__img {
transform: translateY(-4px);
box-shadow: 0 20px 36px -20px rgba(0, 0, 0, .55);
}
.cert figcaption {
font-size: 14px;
color: var(--color-text-secondary);
}
/* endregion */
/* region Examples */
.examples {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.example__card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
aspect-ratio: 4 / 3;
padding: 16px;
overflow: hidden;
border: none;
border-radius: var(--radius-md);
background: #2c333b center / cover no-repeat;
color: var(--color-white);
font-family: inherit;
text-align: left;
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition);
}
/* Фото объекта — ![]()
вместо background-image (индексация). Лежит под градиентом
(::after) и текстом (.example__city/.example__cap, z-index:2). */
.example__pic {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.example__card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .55));
transition: background var(--transition);
}
.example__card:hover,
.example__card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 24px 46px -26px rgba(0, 0, 0, .65);
outline: none;
}
.example__card:hover::after,
.example__card:focus-visible::after {
background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .65));
}
.example__city {
position: relative;
z-index: 2;
align-self: flex-start;
padding: 6px 12px;
font-size: 13px;
background: rgba(255, 255, 255, .16);
backdrop-filter: blur(4px);
border-radius: 8px;
}
.example__cap {
position: relative;
z-index: 2;
font-size: 18px;
font-weight: 600;
}
.example__arrow {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--color-white);
color: #111;
opacity: 0;
transform: translateY(-6px);
transition: opacity var(--transition), transform var(--transition);
}
.example__card:hover .example__arrow,
.example__card:focus-visible .example__arrow {
opacity: 1;
transform: translateY(0);
}
/* endregion */
/* region CTA */
.cta {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: center;
padding: 48px;
background: linear-gradient(77.78deg, #00334A 22.04%, rgba(0, 62, 87, 0.8) 92.5%);
border-radius: var(--radius-lg);
color: var(--color-white);
}
.cta__title {
font-size: clamp(28px, 3vw, 44px);
font-weight: 600;
line-height: 1.1;
color: var(--color-white);
}
.cta__text {
margin-top: 20px;
max-width: 460px;
font-size: 16px;
line-height: 1.5;
color: rgba(255, 255, 255, .8);
}
.cta__form {
display: flex;
flex-direction: column;
gap: 16px;
}
.cta__input {
width: 100%;
padding: 16px 20px;
font-family: inherit;
font-size: 16px;
color: var(--color-white);
background: rgba(255, 255, 255, .1);
border: 1px solid var(--color-stroke-dark);
border-radius: 12px;
transition: border-color var(--transition);
}
.cta__input::placeholder {
color: rgba(255, 255, 255, .7);
}
.cta__input:focus {
outline: none;
border-color: rgba(255, 255, 255, .7);
}
.cta__agree {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 14px;
color: rgba(255, 255, 255, .8);
}
.cta__agree input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
width: 20px;
height: 20px;
margin: 0;
border: 1px solid #E4E6EE;
border-radius: 6px;
background-color: #F5F5F5;
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease;
}
.cta__agree input[type="checkbox"]:checked {
border-color: var(--color-accent);
background-color: var(--color-accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.5L4.2 7.5L11 1' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.cta__agree input[type="checkbox"]:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.cta__agree a {
color: var(--color-white);
text-decoration: underline;
}
/* endregion */
/* ===================================================================
Адаптив секций.
Планшет (≤991) намеренно приближен к мобильной раскладке.
=================================================================== */
@media (max-width: 991px) {
section.section {
padding-top: 48px;
padding-bottom: 48px;
}
.section__head {
margin-bottom: 28px;
}
.section__title + .team-slider,
.section__title + .certs,
.section__title + .examples,
.section__lead + .team-slider {
margin-top: 28px;
}
/* QCM */
.qcm .section__head {
flex-direction: column;
gap: 20px;
}
.qcm .section__title {
max-width: 100%;
}
/* Team → 2 колонки */
.team {
grid-template-columns: repeat(2, 1fr);
}
/* Trust / Advantages / Blog / CTA → одна колонка */
.trust {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 32px;
}
.adv-cards,
.blog {
grid-template-columns: 1fr;
}
.examples {
grid-template-columns: repeat(2, 1fr);
}
.cta {
grid-template-columns: 1fr;
gap: 32px;
padding: 40px 28px;
}
.certs {
gap: 20px;
}
.cert__img {
width: 180px;
height: 250px;
}
}
@media (max-width: 767px) {
section.section {
padding-top: 40px;
padding-bottom: 40px;
}
.section__head {
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.section__title + .team-slider,
.section__title + .certs,
.section__title + .examples,
.section__lead + .team-slider {
margin-top: 24px;
}
.section__head .btn {
width: 100%;
}
.section__lead {
margin-top: 16px;
font-size: 16px;
}
/* Team / Examples → одна колонка */
.team,
.examples {
grid-template-columns: 1fr;
}
/* Advantages */
.advantages__head {
margin-bottom: 32px;
}
.adv-card {
min-height: auto;
padding: 28px 24px;
}
.adv-card__title {
margin-top: 48px;
font-size: 24px;
}
.adv-card__text {
margin-top: 16px;
font-size: 16px;
}
/* Certificates — на мобильных горизонтальный слайдер (CSS-only, свайп).
scroll-snap подхватывает свайп/трекпад без JS; полосу прокрутки прячем. */
.certs {
flex-wrap: nowrap;
justify-content: flex-start;
gap: 16px;
/* слайдер живёт внутри .container: отступ слева даёт сам контейнер,
а справа слайды «выглядывают» за счёт горизонтального переполнения.
right-паддинг у флекс-скроллера некоторые движки игнорируют, поэтому
хвостовой отступ добавляем спейсером ::after (ниже). */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox */
}
/* хвостовой отступ, чтобы последний слайд не прилипал к правому краю */
.certs::after {
content: "";
flex: 0 0 var(--container-s-padding, 16px);
}
.certs::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.cert {
flex: 0 0 auto;
scroll-snap-align: start;
}
.cert__img {
width: 150px;
height: 210px;
}
/* CTA */
.cta {
padding: 32px 20px;
border-radius: var(--radius-md);
}
.cta__text {
max-width: 100%;
}
}
/* CTA-форма: сообщение об отправке */
.cta__form-msg{margin:0;font-size:14px;line-height:1.4}
.cta__form-msg.is-success{color:#7ee0a0}
.cta__form-msg.is-error{color:#ffbcbc}
/* Подсветка незаполненных полей CTA-формы */
.cta__input.is-invalid{border-color:#ff6b6b;box-shadow:0 0 0 2px rgba(255,107,107,.25)}
.cta__agree input[type="checkbox"].is-invalid{border-color:#ff6b6b;box-shadow:0 0 0 2px rgba(255,107,107,.35)}
/* ===== Контентные фото через ![]()
вместо background-image (индексация) =====
Списки сотрудников (/company/staff/) и галереи (/gallery/) — унаследованные
Aspro-шаблоны; размеры контейнеров задаёт тема Aspro. Делаем контейнер контекстом
позиционирования и вкладываем ![]()
, заполняющий его (cover), не меняя габаритов. */
.staff-list__item-image,
.gallery-list__item-image {
position: relative;
overflow: hidden;
}
.staff-list__item-pic,
.gallery-list__item-pic {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* End */
/* Start:/bitrix/templates/lcon_clean/css/pages/forms.css?178696761918530*/
/**
* Всплывающие окна форм (jqm-попапы: «Рассчитать под ключ», «Получить каталог»,
* «Связаться с нами», «Написать сотруднику», callback и т.п.).
*
* Редизайн lcon_clean по макету Figma. Форма — светлая карточка на белом фоне;
* экран благодарности (node 13202:13128) — тёмный, с фото-шапкой.
* Разметку даёт components/bitrix/form.result.new/popup/template.php.
*/
/* ============================ Оверлей и контейнер ============================ */
#popup_iframe_wrapper {
position: fixed;
inset: 0;
z-index: 3000;
display: none;
align-items: flex-start;
justify-content: center;
overflow-y: auto;
padding: 40px 16px;
-webkit-overflow-scrolling: touch;
}
.jqmOverlay {
background: rgba(29, 33, 47, 0.55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* ============================ Окно попапа (карточка) ============================ */
.jqmWindow {
position: relative;
display: none;
width: 100%;
max-width: 620px;
margin: auto;
font-family: var(--font-family-primary, Inter), sans-serif;
color: var(--color-text, #1D212F);
}
.jqmWindow .flexbox.asss { width: 100%; }
/* Светлая карточка формы */
.jqmWindow .form.popup {
position: relative;
display: flex;
flex-direction: column;
gap: 32px;
width: 100%;
padding: 48px;
border-radius: var(--radius-md, 24px);
background: var(--color-white, #fff);
box-shadow: 0 24px 60px rgba(29, 33, 47, 0.18);
}
/* ============================ Кнопка закрытия (X) ============================ */
/* .top-close приходит из ajax/form.php ПЕРЕД компонентом — позиционируем поверх карточки. */
.jqmWindow .top-close {
position: absolute;
top: 36px;
right: 36px;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-xs, 12px);
cursor: pointer;
color: var(--color-text-secondary, #878B9A);
background: transparent;
transition: background .15s ease, color .15s ease;
}
.jqmWindow .top-close:hover { background: var(--color-bg, #F5F5F5); color: var(--color-text, #1D212F); }
.jqmWindow .top-close svg { width: 22px; height: 22px; }
.jqmWindow .top-close svg path { stroke: currentColor; fill: currentColor; }
/* ============================ Заголовок ============================ */
.jqmWindow .form-header { padding-right: 60px; }
.jqmWindow .form-header .title {
font-family: 'Roboto', var(--font-family-primary, Inter), sans-serif;
font-size: 34px;
font-weight: 600;
line-height: 1.15;
color: var(--color-text, #1D212F);
}
.jqmWindow .form-header .form_desc {
margin-top: 12px;
font-size: 16px;
line-height: 1.25;
color: var(--color-text-secondary, #878B9A);
}
/* ============================ Тело формы / поля ============================ */
.jqmWindow .form-body { display: flex; flex-direction: column; }
.jqmWindow .form-body .row { margin: 0 0 16px; }
.jqmWindow .form-body .row:last-child { margin-bottom: 0; }
.jqmWindow .form-body .col-md-12 { width: 100%; }
/* Базовый вид контролов */
.jqmWindow .form-body .input input,
.jqmWindow .form-body .input textarea,
.jqmWindow .form-body .input select,
.jqmWindow .form-body .form-control {
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: 16px;
line-height: 1.25;
color: var(--color-text, #1D212F);
background: var(--color-bg, #F5F5F5);
border: 1px solid transparent;
border-radius: var(--radius-xs, 12px);
outline: none;
transition: border-color .15s ease, background .15s ease;
}
.jqmWindow .form-body .input input,
.jqmWindow .form-body .input select {
height: 48px;
padding: 21px 12px 7px;
}
.jqmWindow .form-body .input textarea {
min-height: 100px;
max-height: 260px;
padding: 24px 12px 10px;
resize: vertical;
}
.jqmWindow .form-body .input input:focus,
.jqmWindow .form-body .input textarea:focus,
.jqmWindow .form-body .input select:focus {
border-color: var(--color-accent, #AD1927);
background: var(--color-white, #fff);
}
.jqmWindow .form-body .input input::placeholder,
.jqmWindow .form-body .input textarea::placeholder { color: var(--color-text-secondary, #878B9A); }
/* Автозаполнение браузера не должно менять фон */
.jqmWindow .form-body input:-webkit-autofill,
.jqmWindow .form-body input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color-text, #1D212F);
-webkit-box-shadow: 0 0 0 1000px var(--color-bg, #F5F5F5) inset;
caret-color: var(--color-text, #1D212F);
}
/* Select — убираем нативную стрелку, рисуем свой шеврон */
.jqmWindow .form-body .input select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 40px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23878B9A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
}
/* ---- Плавающий лейбл (label как плейсхолдер внутри поля) ---- */
/* ВАЖНО: цепляем ТОЛЬКО подпись поля (label.font_13). Метка ошибки — тоже