/* Start:/local/templates/acoustic/components/bitrix/catalog.element/solution_new/style.css?1793001122107037*/ /* Новый дизайн детальной страницы решения. Файл подключается Битриксом автоматически как style.css шаблона компонента — правки по новому дизайну складываем сюда, чтобы не трогать общий style-first.css. Селекторы намеренно с запасом по весу: общий style-first.css может грузиться позже. Размеры взяты из макета «Система доработка» (кадр 1920, контентная колонка 1138): левая часть 771, правая 320, зазор между ними 47. */ /* ---------- шапка: заголовок и уровень системы ---------- */ .solutionTop .solutionTopHead { margin: 41px 0 25px 0; } .solutionTop .solutionTopHead .solutionTopTitle { margin: 0; max-width: 825px; font-family: 'Overpass', sans-serif; font-style: normal; font-weight: 800; font-size: 36px; line-height: 105%; letter-spacing: -0.02em; color: #1F1F1F; } .solutionTop .solutionTopHead .solutionTopType { margin: 2px 0 0 0; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 18px; line-height: 130%; letter-spacing: normal; text-transform: none; color: #1F1F1F; } /* цели переходов по якорю: высоту прилипшей шапки в переменную пишет скрипт */ #solutionPage [id], #solutionComposition, #snRec, #snWith {scroll-margin-top: calc(var(--apSticky, 0px) + 20px);} /* ---------- переключатель уровней ---------- */ .solutionTop .snLevelsBar {position: relative; margin: 0 0 36px 0;} /* обрезанная плашка у края растворяется — видно, что лента продолжается */ .solutionTop .snLevelsBar::before, .solutionTop .snLevelsBar::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 1; width: 70px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .solutionTop .snLevelsBar::before {left: 0; background: linear-gradient(to right, #FFFFFF 15%, rgba(255, 255, 255, 0));} .solutionTop .snLevelsBar::after {right: 0; background: linear-gradient(to left, #FFFFFF 15%, rgba(255, 255, 255, 0));} .solutionTop .snLevelsBar.can-prev::before {opacity: 1;} .solutionTop .snLevelsBar.can-next::after {opacity: 1;} /* одна строка: лишние плашки уезжают за край и листаются */ .solutionTop .snLevels { display: flex; flex-wrap: nowrap; gap: 5px; margin: 0; padding: 2px 2px 4px 2px; /* тень плашек 2/2 — иначе срежется окном */ overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .solutionTop .snLevels::-webkit-scrollbar {display: none;} /* ленту можно тянуть мышью — курсор показывает, что она «живая» */ .solutionTop .snLevels.is-scrollable {cursor: grab;} .solutionTop .snLevels.is-drag {cursor: grabbing; user-select: none;} .solutionTop .snLevels.is-drag .snLevel {pointer-events: none;} .solutionTop .snLevels__arrow { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: -18px; padding: 0; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; color: #4D4D4D; cursor: pointer; box-shadow: 0 0 10px rgba(31, 31, 31, 0.15); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .solutionTop .snLevels__arrow[hidden] {display: none;} .solutionTop .snLevels__arrow:hover:not(:disabled) {background: #FFF050; border-color: #FFF050; color: #1F1F1F;} .solutionTop .snLevels__arrow:disabled {opacity: 0.35; cursor: default;} .solutionTop .snLevels__arrow--prev {left: -10px;} .solutionTop .snLevels__arrow--next {right: -10px;} .solutionTop .snLevels__arrow--next svg {transform: scaleX(-1);} .solutionTop .snLevel { display: flex; flex-direction: column; justify-content: center; gap: 1px; flex: 0 0 auto; min-width: 110px; max-width: 180px; min-height: 77px; padding: 8px 10px; border-radius: 5px; background: #F3F3F3; box-shadow: 2px 2px 0 #C4C4C4; text-align: center; text-decoration: none; color: #4D4D4D; transition: background-color 0.2s, color 0.2s, box-shadow 0.15s, transform 0.15s; } .solutionTop .snLevel:hover {background: #EDEAE0; color: #1F1F1F; box-shadow: 1px 1px 0 #C4C4C4; transform: translate(1px, 1px);} .solutionTop .snLevel:active {box-shadow: 0 0 0 #C4C4C4; transform: translate(2px, 2px);} .solutionTop .snLevel.is-on { background: #FFF050; color: #1F1F1F; cursor: default; } /* текущая система — не ссылка, поэтому не утопает */ .solutionTop .snLevel.is-on:hover, .solutionTop .snLevel.is-on:active {box-shadow: 2px 2px 0 #C4C4C4; transform: none;} .solutionTop .snLevel__name {font-size: 15px; line-height: 130%; font-weight: 700;} .solutionTop .snLevel__rw {font-size: 15px; line-height: 130%; font-weight: 700;} .solutionTop .snLevel__lvl {font-size: 15px; line-height: 130%;} /* ---------- сетка: контент и панель расчёта ---------- */ .solutionTop .snGrid { display: flex; align-items: flex-start; gap: 47px; } .solutionTop .snMain {flex: 1 1 auto; min-width: 0;} /* Панель едет вместе с прокруткой в пределах верхнего блока. Высота колонки меньше высоты ряда, поэтому запас хода у sticky есть и без растягивания. Отступ сверху — высота прилипшей шапки (её меряет скрипт) плюс 20. Верхние 2 px — запас ленты уровней под тень плашек: без них панель стоит на 2 px выше первой плашки. */ .solutionTop .snSide { position: sticky; top: calc(var(--apSticky, 0px) + 20px); align-self: flex-start; flex: 0 0 320px; width: 320px; padding-top: 2px; } /* ---------- три колонки характеристик ---------- */ .solutionTop .snSpecs { display: flex; align-items: stretch; gap: 0; margin: 0 0 26px 0; } .solutionTop .snSpec { /* ширины колонок как в макете (264 / 293 / 216 при левой колонке 773) */ position: relative; box-sizing: border-box; /* на сайте border-box отключён глобально */ flex: 1 1 264px; min-width: 0; padding: 0 10px 0 42px; } .solutionTop .snSpec--impact {flex-basis: 293px;} .solutionTop .snSpec--wall {flex-basis: 216px;} .solutionTop .snSpec + .snSpec { padding-left: 62px; border-left: 1px solid #E1E1E1; } .solutionTop .snSpec + .snSpec--wall {padding-left: 52px;} /* иконка вынесена из потока: в макете она висит слева, а весь текст колонки — заголовок, описание, значения — выровнен по одной линии правее иконки */ .solutionTop .snSpec__icon {position: absolute; left: 0; top: 0; display: block;} .solutionTop .snSpec + .snSpec .snSpec__icon {left: 20px;} .solutionTop .snSpec--air .snSpec__icon {width: 29px; height: 30px; top: -2px;} .solutionTop .snSpec--impact .snSpec__icon {width: 32px; height: 28px; top: 2px;} .solutionTop .snSpec--wall .snSpec__icon {width: 24px; height: 41px; top: -4px;} .solutionTop .snSpec__head { margin: 0 0 2px 0; font-size: 15px; line-height: 130%; font-weight: 700; color: #1F1F1F; } .solutionTop .snSpec--wall .snSpec__head {margin-bottom: 14px;} .solutionTop .snSpec__desc { margin: 0 0 19px 0; max-width: 215px; font-size: 14px; line-height: 120%; color: #4D4D4D; } .solutionTop .snSpec__val { display: flex; align-items: baseline; gap: 12px; margin: 0 0 2px 0; } .solutionTop .snSpec__val .snSpec__key { flex: none; font-size: 14px; line-height: 120%; color: #1F1F1F; } .solutionTop .snSpec__val b { font-size: 18px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F; } .solutionTop .snSpec__val--wide b {display: block;} .solutionTop .snSpec__note { margin: 0 0 14px 0; max-width: 190px; font-size: 14px; line-height: 120%; color: #A2A2A2; } .solutionTop .snSpec__note:last-child {margin-bottom: 0;} /* ---------- описание ---------- */ .solutionTop .snDesc { max-width: 771px; font-size: 15px; line-height: 135%; color: #4D4D4D; } .solutionTop .snDesc p {margin: 0 0 10px 0;} .solutionTop .snDesc p:last-child {margin-bottom: 0;} .solutionTop .snMore { display: inline-block; margin: 6px 0 0 0; font-size: 15px; line-height: 135%; color: #4D4D4D; /* в макете подчёркивание — пунктир 2/2 толщиной 1 под текстом, а не сплошная линия */ padding-bottom: 1px; text-decoration: none; background-image: linear-gradient(to right, currentColor 2px, transparent 2px); background-size: 4px 1px; background-repeat: repeat-x; background-position: 0 100%; } .solutionTop .snMore:hover {color: #1F1F1F;} .solutionTop .snPhoto {margin: 30px 0 0 0;} .solutionTop .snPhoto img { display: block; width: 100%; height: auto; border-radius: 5px; } /* ---------- панель расчёта ---------- */ .solutionTop .snBuy { padding: 22px 20px 27px 20px; border: 1px solid #E1E1E1; border-radius: 5px; background: #F3F3F3; box-shadow: 4px 4px 0 #E5E5E5; } .solutionTop .snBuy__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .solutionTop .snBuy__topName {flex: 1 1 auto;} .solutionTop .snBuy__priceName {font-size: 15px; line-height: 135%; font-weight: 600; color: #1F1F1F;} .solutionTop .snBuy__priceVal { font-size: 24px; line-height: 135%; font-weight: 600; color: #1F1F1F; white-space: nowrap; } .solutionTop .snBuy__link { display: inline-block; font-size: 14px; line-height: 135%; color: #4D4D4D; /* в макете подчёркивание — пунктир 2/2 толщиной 1 вплотную под текстом */ padding-bottom: 0; text-decoration: none; background-image: linear-gradient(to right, currentColor 2px, transparent 2px); background-size: 4px 1px; background-repeat: repeat-x; background-position: 0 100%; } .solutionTop .snBuy__link:hover {color: #1F1F1F;} .solutionTop .snBuy__rows { margin: 29px -20px 0 -20px; padding: 17px 20px 0 20px; border-top: 1px solid #E1E1E1; } /* колонки фиксированы: иначе тумблер прыгает, когда сумма меняет длину */ .solutionTop .snBuy__row { display: grid; grid-template-columns: minmax(0, 1fr) 36px 88px; align-items: center; column-gap: 10px; min-height: 34px; margin: 0 0 6px 0; } .solutionTop .snBuy__row:last-child {margin-bottom: 0;} .solutionTop .snBuy__row[hidden] {display: none;} .solutionTop .snBuy__rowName { grid-column: 1; display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 120%; color: #4D4D4D; } .solutionTop .snBuy__rowVal { grid-column: 3; text-align: right; font-size: 15px; line-height: 130%; color: #1F1F1F; white-space: nowrap; } /* выключенная группа в макете не гаснет целиком — бледнеет только сумма */ .solutionTop .snBuy__row--group:not(.is-on) .snBuy__rowVal {color: #A2A2A2;} /* по умолчанию площадь выглядит как обычный текст (как в макете), рамка с белым фоном появляется по клику на «изменить»; рамка всегда на месте, но прозрачная — иначе при включении поле дёргалось бы на пиксель */ .solutionTop .snBuy__area { box-sizing: border-box; width: 60px; height: 26px; padding: 0 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; font-family: inherit; font-size: 15px; line-height: 24px; text-align: right; color: #1F1F1F; } .solutionTop .snBuy__area:focus, .solutionTop .snBuy__area.is-edit {outline: 0; border-color: #E1E1E1; background: #FFFFFF;} /* тумблер: 36×20 с круглым бегунком, как в макете */ .solutionTop .snToggle { grid-column: 2; position: relative; width: 36px; height: 20px; padding: 0; border: 1px solid #C3C3C3; border-radius: 20px; background: #FFFFFF; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; } /* по тумблеру целятся мышью, поэтому кликабельная область шире самой пилюли */ .solutionTop .snToggle::after {content: ''; position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px;} /* в макете тумблер всегда белый, цветом отличается только ручка: выключенная серая слева, включённая жёлтая справа, обводка 2 px */ .solutionTop .snToggle span { position: absolute; left: -1px; top: 0; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid #1F1F1F; border-radius: 50%; background: #E1E1E1; border-color: #C3C3C3; transition: transform 0.2s, background-color 0.2s, border-color 0.2s; } .solutionTop .snBuy__row--group.is-on .snToggle span {transform: translateX(18px); background: #FFF050; border-color: #1F1F1F;} .solutionTop .snBuy__total { display: flex; /* подпись переносится на две строки, и по базовой линии она провисала относительно суммы — равняем по середине */ align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0 0 0; } .solutionTop .snBuy__totalName {font-size: 14px; line-height: 135%; color: #1F1F1F;} .solutionTop .snBuy__totalVal { font-size: 24px; line-height: 135%; color: #1F1F1F; white-space: nowrap; } .solutionTop .snBuy__cart { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; margin: 7px 0 0 0; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFF050; box-shadow: 4px 4px 0 #D9D9D9; font-size: 16px; line-height: 135%; font-weight: 600; color: #1F1F1F; text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; } .solutionTop .snBuy__cart:hover {box-shadow: 2px 2px 0 #D9D9D9; transform: translate(2px, 2px);} .solutionTop .snBuy__cart:active {box-shadow: 0 0 0 #D9D9D9; transform: translate(4px, 4px);} .solutionTop .snBuy__compare {margin: 14px 0 0 0; text-align: center;} .solutionTop .snCompare { display: inline-flex; align-items: center; min-height: 21px; gap: 10px; font-size: 14px; line-height: 150%; color: #4D4D4D; text-decoration: none; } .solutionTop .snCompare:hover {color: #1F1F1F;} /* ---------- документы ---------- */ .solutionTop .snDocs {margin: 40px 0 0 0;} .solutionTop .snDoc { display: flex; align-items: flex-start; gap: 12px; padding: 20px 0; text-decoration: none; } .solutionTop .snDoc + .snDoc {border-top: 1px solid #E1E1E1;} .solutionTop .snDoc:first-child {padding-top: 0;} .solutionTop .snDoc:last-child {padding-bottom: 0;} .solutionTop .snDoc__icon {flex: none; display: block; margin-top: 2px;} .solutionTop .snDoc__icon path {transition: fill 0.18s ease;} .solutionTop .snDoc__text {flex: 1 1 auto; min-width: 0;} .solutionTop .snDoc__name { display: block; font-size: 14px; line-height: 120%; font-weight: 600; color: #1F1F1F; } .solutionTop .snDoc__meta { display: block; margin: 4px 0 0 0; font-size: 14px; line-height: 120%; color: #A2A2A2; transition: color 0.18s ease; } .solutionTop .snDoc__dl { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; line-height: 120%; color: #4D4D4D; transition: color 0.18s ease; } .solutionTop .snDoc__dl path {transition: stroke 0.18s ease;} /* при наведении вся строка документа темнеет: подписи, иконка и стрелка */ .solutionTop .snDoc:hover .snDoc__name {text-decoration: underline; text-underline-offset: 3px;} .solutionTop .snDoc:hover .snDoc__meta {color: #4D4D4D;} .solutionTop .snDoc:hover .snDoc__dl {color: #1F1F1F;} .solutionTop .snDoc:hover .snDoc__dl path {stroke: #1F1F1F;} .solutionTop .snDoc:hover .snDoc__icon path[fill="#4D4D4D"] {fill: #1F1F1F;} /* ---------- адаптив (мобильного макета этого экрана нет, размеры по сайту) ---------- */ /* ---------- расчёт количества материалов (макет: карточка 1139×649) ---------- */ /* серая зона макета: начинается за 75 px до заголовка расчёта и идёт до конца состава */ .snCalc {margin: 97px 0 0 0; padding: 75px 0 0 0; background: #F3F3F3;} .snCalc__title { margin: 0 0 23px 0; font-family: 'Overpass', sans-serif; font-size: 26px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F; } .snCalc__box { position: relative; z-index: 1; /* иначе фон следующей секции закрывает тень 4/4 снизу */ display: flex; align-items: stretch; box-sizing: border-box; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; box-shadow: 4px 4px 0 #D9D9D9; } .snCalc__main {flex: 1 1 auto; min-width: 0; padding: 44px 43px 40px 43px;} .snCalc__side { flex: none; box-sizing: border-box; width: 360px; padding: 32px 65px 40px 65px; border-left: 1px solid #E1E1E1; text-align: center; } /* вкладки */ .snCalc__tabs { position: relative; display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; height: 46px; margin: 0 0 29px 0; padding: 0; border: 1px solid #E1E1E1; border-radius: 5px; background: #F3F3F3; } .snCalc__glider { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 44px; border-radius: 5px; background: #FFF050; pointer-events: none; } .snCalc__glider.is-ready {transition: transform 0.25s ease, width 0.25s ease;} .snCalc__tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 44px; padding: 0 24px; border: 1px solid transparent; border-radius: 5px; background: transparent; font-family: inherit; font-size: 15px; line-height: 44px; color: #4D4D4D; cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.15s, transform 0.15s; } .snCalc__tab.is-on {color: #1F1F1F;} .snCalc__tab:not(.is-on):hover {color: #1F1F1F;} .snCalc__tab svg {flex: none; display: block;} /* заголовки разделов */ .snCalc__head { margin: 0 0 10px 0; font-size: 16px; line-height: 135%; font-weight: 700; color: #1F1F1F; } .snCalc__head--gap {margin-top: 28px;} /* строка «подпись слева — поля справа»: в макете контролы начинаются на 192 px от края */ .snCalc__row { display: grid; grid-template-columns: 192px minmax(0, 1fr); align-items: center; } .snCalc__row--gap {margin-top: 16px;} .snCalc__row--mount {margin-top: 29px;} .snCalc__rowName { padding-right: 12px; font-size: 15px; line-height: 135%; color: #1F1F1F; } .snCalc__hint {margin-left: 6px; font-size: 12px; line-height: 120%; font-weight: 400; color: #A2A2A2;} .snCalc__rowName .snCalc__hint {display: block; margin: 2px 0 0 0;} /* строки поверхностей и проёмов */ .snCalc__items {display: flex; flex-wrap: wrap; gap: 10px;} .snCalc__items:not(:empty) {margin-bottom: 12px;} .snCalcItem { display: grid; grid-template-columns: 74px 58px 12px 58px minmax(0, 1fr) 17px; align-items: end; column-gap: 6px; box-sizing: border-box; width: calc(50% - 5px); min-width: 300px; min-height: 90px; padding: 15px 14px; border-radius: 5px; background: #F3F3F3; } /* длинные названия («Перегородка», «Балконная дверь») переносим по слогам, а не по буквам */ .snCalcItem__name {font-size: 15px; line-height: 120%; font-weight: 600; color: #1F1F1F; padding-bottom: 8px; hyphens: auto; -webkit-hyphens: auto;} .snCalcItem__field {display: block;} .snCalcItem__cap {display: block; margin: 0 0 4px 0; font-size: 12px; line-height: 120%; white-space: nowrap; color: #A2A2A2;} .snCalcItem__x {display: flex; align-items: center; justify-content: center; height: 36px; margin-bottom: 1px; color: #020617;} .snCalcItem__x svg {display: block;} .snCalcItem__res {padding-bottom: 8px; font-size: 15px; line-height: 135%; font-weight: 600; color: #1F1F1F; white-space: nowrap;} .snCalcItem__del { padding: 0 0 8px 0; border: 0; background: none; line-height: 0; color: #A2A2A2; cursor: pointer; transition: color 0.15s ease; } .snCalcItem__del:hover {color: #4D4D4D;} .snCalc__field { box-sizing: border-box; width: 58px; height: 36px; padding: 0 8px; border: 1px solid #C3C3C3; border-radius: 5px; background: #FFFFFF; font-family: inherit; font-size: 15px; line-height: 34px; letter-spacing: -0.02em; text-align: center; color: #1F1F1F; } .snCalc__field:focus {outline: 0; background: #FFFBCB;} /* кнопка добавления */ .snCalc__addWrap {position: relative; display: inline-block;} .snCalc__addText { padding-bottom: 2px; background-image: linear-gradient(to right, currentColor 2px, transparent 2px); background-size: 4px 1px; background-repeat: repeat-x; background-position: 0 100%; } .snCalc__add { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 15px; line-height: 135%; color: #1F1F1F; cursor: pointer; } .snCalc__plus { position: relative; flex: none; width: 27px; height: 27px; border-radius: 50%; background: #FFF050; transition: box-shadow 0.15s, transform 0.15s; } .snCalc__plus::before, .snCalc__plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; margin: -0.8px 0 0 -5.5px; background: #1F1F1F; } .snCalc__plus::after {transform: rotate(90deg);} .snCalc__add:hover .snCalc__plus {box-shadow: 1px 1px 0 #C4C4C4;} .snCalc__add:active .snCalc__plus {transform: translate(1px, 1px); box-shadow: none;} .snCalc__menu { position: absolute; left: 0; top: 100%; z-index: 5; min-width: 190px; margin-top: 6px; padding: 6px 0; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; box-shadow: 4px 4px 0 #E5E5E5; } .snCalc__menu button { display: block; width: 100%; padding: 7px 16px; border: 0; background: none; font-family: inherit; font-size: 15px; line-height: 135%; text-align: left; white-space: nowrap; color: #1F1F1F; cursor: pointer; } .snCalc__menu button:hover {background: #F3F3F3;} /* вкладка «знаю площадь» */ .snCalc__areaRow {display: flex; align-items: center; gap: 8px;} .snCalc__areaRow .snCalc__field {width: 47px; height: 46px; line-height: 44px; font-weight: 700; text-align: center; border-color: #E1E1E1;} .snCalc__unit {font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: #1F1F1F;} /* запас на подрезку */ .snCalc__reserve {display: flex; align-items: center; flex-wrap: wrap; gap: 4px;} .snCalc__opt { box-sizing: border-box; height: 46px; padding: 0 18px; border: 1px solid #E1E1E1; border-radius: 5px; background: #F3F3F3; font-family: inherit; font-size: 15px; line-height: 46px; color: #4D4D4D; cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.15s, transform 0.15s; } /* рамка на тон темнее самой заливки, чтобы выбранная кнопка читалась без тени */ .snCalc__opt.is-on {background: #FFF050; border-color: #E6D849; color: #1F1F1F; font-weight: 700;} .snCalc__own {display: inline-flex; align-items: center; gap: 8px; margin-left: 22px; font-size: 15px; color: #1F1F1F;} .snCalc__own .snCalc__field {width: 47px; height: 46px; line-height: 44px; font-weight: 700; text-align: center; border-color: #C3C3C3;} .snCalc__own.is-on .snCalc__field {border-color: #1F1F1F;} .snCalc__own b {font-weight: 700;} /* монтаж; тумблер повторяет панель расчёта наверху — её стили живут внутри .solutionTop */ .snCalc__mount {font-size: 15px; line-height: 135%; color: #1F1F1F;} .snCalc__mountCtrl {display: flex; align-items: center; gap: 15px;} .snCalc__toggle { flex: none; position: relative; box-sizing: border-box; width: 36px; height: 20px; padding: 0; border: 1px solid #C3C3C3; border-radius: 20px; background: #FFFFFF; cursor: pointer; } .snCalc__toggle::after {content: ''; position: absolute; top: -8px; right: -8px; bottom: -8px; left: -8px;} .snCalc__toggle span { position: absolute; left: -1px; top: 0; box-sizing: border-box; width: 18px; height: 18px; border: 2px solid #1F1F1F; border-radius: 50%; background: #FFF050; transform: translateX(18px); transition: transform 0.2s, background-color 0.2s, border-color 0.2s; } .snCalc__mount.is-off .snCalc__toggle span {transform: none; background: #E1E1E1; border-color: #C3C3C3;} .snCalc__mountPrice {color: #4D4D4D;} .snCalc__mount.is-off .snCalc__mountPrice {color: #A2A2A2;} /* правая колонка */ .snCalc__sideTitle { font-family: 'Overpass', sans-serif; font-size: 20px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F; } .snCalc__total {margin: 2px 0 0 0; font-size: 36px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F;} .snCalc__line {height: 1px; margin: 23px 0 0 0; background: #E1E1E1;} .snCalc__sum { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 22px 0 0 0; font-size: 14px; line-height: 140%; text-align: left; color: #4D4D4D; } .snCalc__sum dt {margin: 0;} .snCalc__sum dd {margin: 0; font-weight: 700; white-space: nowrap;} .snCalc__go { display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100%; height: 46px; margin: 26px 0 0 0; border: 1px solid #E1E1E1; border-radius: 5px; background: #F3F3F3; box-shadow: 4px 4px 0 #D9D9D9; font-family: inherit; font-size: 16px; line-height: 150%; color: #A2A2A2; cursor: default; transition: background-color 0.2s, color 0.2s, box-shadow 0.15s, transform 0.15s; } .snCalc__go svg {flex: none; display: block;} .snCalc__go.is-on {background: #FFF050; color: #1F1F1F; cursor: pointer;} .snCalc__go.is-on:hover {box-shadow: 2px 2px 0 #D9D9D9; transform: translate(2px, 2px);} .snCalc__go.is-on:active {box-shadow: 0 0 0 #D9D9D9; transform: translate(4px, 4px);} /* фокус в поле — тёмная рамка (правило последнее: перебивает цвета рамок выше) */ .snCalc__box .snCalc__field:focus {border-color: #1F1F1F;} @media (max-width: 1180px) { .snCalc__main {padding: 30px 24px;} .snCalc__side {width: 300px; padding: 30px 30px;} .snCalcItem {width: 100%;} } @media (max-width: 900px) { .snCalc__box {flex-direction: column;} .snCalc__side {width: 100%; border-left: 0; border-top: 1px solid #E1E1E1;} } @media (max-width: 768px) { /* белый зазор над серой секцией — такой же, как серый отступ от её края до заголовка (padding-top 75) */ .snCalc {margin-top: 75px;} .snCalc__title {font-size: 22px;} /* «Площадь по размерам» в одну строку не влезает: разрешаем вкладкам расти в высоту, плашка-ползунок тянется по высоте вместе с ними */ .snCalc__tabs {width: 100%; height: auto; min-height: 46px; align-items: stretch;} .snCalc__tab { flex: 1 1 0; min-width: 0; height: auto; min-height: 44px; padding: 6px 10px; justify-content: center; font-size: 14px; line-height: 1.2; text-align: center; } .snCalc__glider {height: auto; top: 0; bottom: 0;} .snCalc__row {display: block;} .snCalc__rowName {margin: 0 0 8px 0; padding-right: 0;} .snCalc__reserve {gap: 8px;} .snCalc__opt {padding: 0 12px;} /* «свой __ %» переезжает на свою строку — отступ от кнопок слева смотрелся отрывом, равняем по левому краю */ .snCalc__own {margin-left: 0;} } @media (max-width: 560px) { /* шесть колонок карточки поверхности (74 + 58 + 12 + 58 + результат + 17) требуют около 300 px — в карточку расчёта они перестают помещаться, и результат наезжал на корзину. Разводим в две строки */ .snCalcItem { min-width: 0; min-height: 0; grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) auto; grid-template-areas: 'name name name del' 'w x h res'; row-gap: 10px; } .snCalcItem__name {grid-area: name; padding-bottom: 0;} .snCalcItem__field:nth-child(2) {grid-area: w;} .snCalcItem__x {grid-area: x;} .snCalcItem__field:nth-child(4) {grid-area: h;} .snCalcItem__res {grid-area: res;} .snCalcItem__del {grid-area: del; align-self: start; padding: 0;} .snCalcItem .snCalc__field {width: 100%;} } @media (max-width: 1180px) { .solutionTop .solutionTopHead {margin: 30px 0 24px 0;} .solutionTop .solutionTopHead .solutionTopTitle {font-size: 30px;} .solutionTop .solutionTopHead .solutionTopType {font-size: 17px;} .solutionTop .snLevelsBar {margin-bottom: 32px;} .solutionTop .snGrid {gap: 30px;} .solutionTop .snSide {flex-basis: 300px; width: 300px;} .solutionTop .snSpec + .snSpec {padding-left: 54px;} .solutionTop .snSpec + .snSpec--wall {padding-left: 44px;} .solutionTop .snSpec + .snSpec .snSpec__icon {left: 12px;} } @media (max-width: 900px) { /* align-items: flex-start в колонке оставляет ширину по содержимому, а лента уровней со своей прокруткой шире экрана — колонка раздувала страницу */ .solutionTop .snGrid {flex-direction: column; gap: 40px; align-items: stretch;} /* в одну колонку прилипать некуда — панель идёт обычным блоком */ .solutionTop .snSide {position: static; flex: 1 1 auto; width: 100%; padding-top: 0;} .solutionTop .snPhoto {margin-top: 32px;} } @media (max-width: 768px) { .solutionTop .solutionTopHead {margin: 20px 0 20px 0;} .solutionTop .solutionTopHead .solutionTopTitle {font-size: 24px;} .solutionTop .solutionTopHead .solutionTopType {font-size: 16px; margin-top: 4px;} /* на узком экране плашки мельче: иначе в ленту влезает полторы штуки */ .solutionTop .snLevels {gap: 6px;} .solutionTop .snLevelsBar {margin-bottom: 32px;} .solutionTop .snLevel { gap: 0; min-width: 92px; max-width: 150px; min-height: 56px; padding: 6px 8px; } .solutionTop .snLevel__name {font-size: 13px; line-height: 125%;} .solutionTop .snLevel__rw {font-size: 13px; line-height: 125%;} .solutionTop .snLevel__lvl {font-size: 12px; line-height: 125%;} .solutionTop .snSpecs {flex-direction: column; gap: 24px; margin-bottom: 24px;} /* в колонку flex-basis становится высотой: с базовыми 264 px колонки раздувались и под текстом оставалась пустота */ .solutionTop .snSpec {flex: 0 0 auto; padding: 0 0 0 42px;} .solutionTop .snSpec + .snSpec {padding: 24px 0 0 42px; border-left: 0; border-top: 1px solid #E1E1E1;} .solutionTop .snSpec + .snSpec .snSpec__icon {left: 0; top: 22px;} .solutionTop .snSpec + .snSpec--wall .snSpec__icon {top: 20px;} .solutionTop .snSpec__desc, .solutionTop .snSpec__note {max-width: none;} /* «Звукоизоляционные материалы» в узкой панели наезжало на тумблер: hyphens переносит слово по слогам с тире (у страницы lang="ru") */ .solutionTop .snBuy__rowName {-webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;} /* в строке площади слово короткое — его не режем, а ссылку «изменить» при нехватке места переносим на строку ниже */ .solutionTop .snBuy__row--area .snBuy__rowName {-webkit-hyphens: none; hyphens: none; flex-wrap: wrap; gap: 0 10px;} } /* ---------- схема слоёв системы (макет «ПРЕМИУМ ПЛЮС», кадр 1000×634) ---------- Блок стоит на месте прежней картинки, в левой колонке (771 px по макету), поэтому размеры макета пересчитаны в её масштабе: 771/1000 ≈ 0,771. Пропорции кадра держатся сами: картинка анонса квадратная и занимает 63,6 % ширины — значит и высота кадра те же 63,6 % (в макете 634 из 1000). */ .solutionTop .snLayers { position: relative; margin: 30px 0 0 0; border-radius: 5px; overflow: hidden; background: #F3F3F3; } .solutionTop .snLayers__media {position: relative; width: 63.6%; line-height: 0;} .solutionTop .snLayers__photo {display: block; width: 100%; height: auto; border-radius: 0;} /* правый край фото растворяется в фоне кадра — в макете это отдельный градиент 209 px */ .solutionTop .snLayers__media::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; width: 32.9%; background: linear-gradient(to right, rgba(243, 243, 243, 0) 30%, rgba(243, 243, 243, 0.53) 67%, #F3F3F3 92%); pointer-events: none; } .solutionTop .snLayers__svg {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .solutionTop .snLayers__svg--veil {z-index: 1; pointer-events: none;} .solutionTop .snLayers__svg--shapes {z-index: 3;} /* выбранный слой остаётся светлым, остальное уходит в тень */ .solutionTop .snLayers__veil { fill: #101010; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .solutionTop .snLayers.is-active .snLayers__veil {opacity: 0.18;} .solutionTop .snLayers__shape { fill: transparent; stroke: transparent; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill 0.18s ease, stroke 0.18s ease; } .solutionTop .snLayers__shape.is-on {fill: url(#snLayersGlow); stroke: #FFFFFF;} /* номер слоя на фото (в макете 40×40, радиус 9) */ .solutionTop .snLayers__pin { position: absolute; z-index: 4; box-sizing: border-box; width: 31px; height: 31px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 7px; background: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 17px; line-height: 31px; font-weight: 700; text-align: center; color: #1F1F1F; cursor: pointer; transition: background-color 0.18s ease; } .solutionTop .snLayers__pin.is-on {background: #FFF050;} /* список слоёв поверх правой части кадра (в макете 447×479, прижат к низу) */ .solutionTop .snLayers__panel { position: absolute; z-index: 5; right: 1.6%; bottom: 2.4%; box-sizing: border-box; width: 44.7%; padding: 8px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.7); } .solutionTop .snLayers__item { padding: 7px 12px; border-radius: 5px; font-family: 'Inter', sans-serif; font-size: 15px; line-height: 130%; font-weight: 700; color: #1F1F1F; cursor: pointer; transition: background-color 0.18s ease; } /* пояснение под названием слоя — в макете строчными и помельче */ .solutionTop .snLayers__note {display: block; font-size: 13px; line-height: 125%; font-weight: 600;} .solutionTop .snLayers__item + .snLayers__item {margin-top: 2px;} .solutionTop .snLayers__item.is-on {background: #FFF050;} /* на сенсорных экранах слой выбирается только из списка: палец попадает не в тот контур */ @media (hover: none) { .solutionTop .snLayers__svg {pointer-events: none;} .solutionTop .snLayers__shape {cursor: default;} } @media (max-width: 1180px) { .solutionTop .snLayers__item {padding: 6px 10px; font-size: 13px;} .solutionTop .snLayers__pin {width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 6px; font-size: 14px; line-height: 26px;} } @media (max-width: 900px) { /* на узком экране список слоёв уезжает под картинку — серый фон блока остаётся общим для картинки и подписей */ .solutionTop .snLayers__media {width: 100%;} .solutionTop .snLayers__media::after {display: none;} .solutionTop .snLayers__panel {position: static; width: 100%; padding: 12px 12px 14px 12px; background: none;} .solutionTop .snLayers__item {font-size: 15px;} .solutionTop .snLayers__pin {width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 7px; font-size: 16px; line-height: 30px;} } @media (max-width: 768px) { .solutionTop .snLayers {margin-top: 40px;} .solutionTop .snLayers__pin {width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 14px; line-height: 26px;} .solutionTop .snLayers__item {padding: 6px 10px; font-size: 14px;} } /* ---------- «Рекомендуем также» (макет: карточки 361×140, шаг 390) ---------- */ .snRec {margin: 0; padding: 75px 0 0 0; background: #F3F3F3;} /* заголовок, стрелки и лента — три ячейки сетки: на широком экране стрелки стоят справа от заголовка, на узком переезжают под ленту */ .snRec .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head nav' 'win win'; column-gap: 24px; } .snRec__headText {grid-area: head; margin: 0 0 12px 0;} /* до карточек ровно 12 px, как в макете: запас окна ±6 гасится сам */ .snRec__window {grid-area: win;} .snRec__title { margin: 0; font-family: 'Overpass', sans-serif; font-size: 26px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F; } .snRec__note {margin: 0; font-size: 15px; line-height: 130%; color: #4D4D4D;} .snRec__nav {grid-area: nav; align-self: end; display: flex; gap: 10px; margin: 0 0 12px 0;} /* в макете низ кнопок на уровне подписи */ .snRec__nav[hidden] {display: none;} /* иначе display перебивает атрибут hidden */ .snRec__arrow { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 47px; height: 47px; border: 1px solid #C3C3C3; border-radius: 5px; background: #FFFFFF; color: #A2A2A2; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .snRec__arrow:hover:not(:disabled) {border-color: #1F1F1F; color: #1F1F1F;} .snRec__arrow:disabled {opacity: 0.4; cursor: default;} .snRec__arrow--next svg {transform: scaleX(-1);} /* запас по кругу: иначе окно карусели срезает тень 4/4 и жёлтую обводку выбранной системы сверху и слева */ .snRec__window {position: relative; overflow: hidden; padding: 6px; margin: -6px;} .snRec__track {display: flex; gap: 28px; transition: transform 0.3s ease;} .snRecItem { position: relative; display: flex; flex: 0 0 361px; box-sizing: border-box; width: 361px; min-height: 140px; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; box-shadow: 4px 4px 0 #D9D9D9; } /* в макете обводка идёт внутрь карточки: габарит 361x140 у всех одинаковый, у выбранной рамка 2 px и жёлтая тень */ .snRecItem.is-current {border: 2px solid #FFF050; box-shadow: 4px 4px 0 #FFF15A;} .snRecItem.is-current .snRecItem__pic {width: 78px;} .snRecItem__pic {flex: none; width: 79px; border-radius: 4px 0 0 4px; overflow: hidden; line-height: 0;} .snRecItem__pic picture {display: block; width: 100%; height: 100%;} /* обёртка picture иначе не тянется под карточку */ .snRecItem__pic img {display: block; width: 100%; height: 100%; object-fit: cover;} .snRecItem__body {flex: 1 1 auto; min-width: 0; padding: 10px 14px 0 14px;} .snRecItem__name { font-size: 18px; line-height: 130%; font-weight: 700; color: #1F1F1F; } .snRecItem__type {margin: 2px 0 0 0; font-size: 14px; line-height: 135%; color: #1F1F1F;} .snRecItem__specs { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 8px 0 0 0; font-size: 14px; line-height: 135%; color: #4D4D4D; } .snRecItem__specs b {font-weight: 700; color: inherit;} /* в макете значения Inter Bold тем же цветом */ .snRecItem__specs span {display: inline-flex; align-items: center; gap: 4px;} .snRecItem__specs svg {flex: none; display: block;} .snRecItem__price {margin: 9px 0 0 0; font-size: 18px; line-height: 130%; color: #1F1F1F;} .snRecItem__per {margin: 2px 0 0 0; font-size: 12px; line-height: 120%; color: #4D4D4D;} /* кнопка в правом нижнем углу карточки, как в макете */ .snRecItem__btn { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 82px; height: 32px; border: 1px solid #1F1F1F; border-radius: 5px; background: #FFFFFF; font-size: 14px; line-height: 120%; text-decoration: none; color: #1F1F1F; transition: background-color 0.15s ease; } .snRecItem__btn:hover {background: #F3F3F3; color: #1F1F1F;} /* общий стиль ссылок иначе осветляет текст */ .snRecItem__btn.is-on {border-color: transparent; background: #FFF050; font-weight: 600; cursor: default;} @media (max-width: 1180px) { .snRecItem {flex-basis: 320px; width: 320px;} .snRecItem__name {font-size: 17px;} } @media (max-width: 768px) { /* отступа сверху тут быть не может: секция серая и предыдущая серая, внешний отступ оставлял между ними белую полосу — место даёт padding */ .snRec {margin-top: 0;} .snRec__title {font-size: 22px;} .snRecItem {flex-basis: 290px; width: 290px; min-height: 0; padding-bottom: 54px;} .snRecItem__btn {bottom: 12px;} } /* ---- телефоны: лента листается пальцем, карточка по центру окна ---- */ @media (max-width: 560px) { /* стрелки под лентой и по её краям */ .snRec .container { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'win' 'nav'; } .snRec__headText {margin-bottom: 16px;} .snRec__nav {justify-self: stretch; justify-content: space-between; margin: 16px 0 0 0;} .snRec__window { overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .snRec__window::-webkit-scrollbar {display: none;} /* обрезанные соседние карточки уходят в прозрачность. Маска, а не наложенный градиент: внутри прокручиваемого блока абсолютный слой ехал бы вместе с лентой */ .snRec__window.can-prev.can-next { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .snRec__window.can-prev:not(.can-next) { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px); mask-image: linear-gradient(to right, transparent 0, #000 40px); } .snRec__window.can-next:not(.can-prev) { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40px); mask-image: linear-gradient(to left, transparent 0, #000 40px); } /* крайние карточки прижимаются к краю окна: запаса по бокам нет, середина ленты при этом по-прежнему встаёт по центру */ .snRec__track {gap: 12px;} /* хвостовая распорка ровно на запас окна под тень: внутренний отступ справа браузер в длину прокрутки не засчитывает, и последняя карточка уезжала за край. Отрицательное поле гасит зазор ленты */ .snRec__track::after {content: ''; flex: 0 0 6px; margin-left: -12px;} /* карточка в столбик: картинка шапкой, под ней данные и кнопка. Запас 80 px — на него по обе стороны выглядывают соседние карточки */ .snRecItem { flex: 0 0 auto; flex-direction: column; width: calc(100% - 80px); min-height: 0; padding-bottom: 0; scroll-snap-align: center; } .snRecItem__pic {width: 100%; height: 118px; border-radius: 4px 4px 0 0;} .snRecItem.is-current .snRecItem__pic {width: 100%;} .snRecItem__body {padding: 12px 14px 0 14px;} .snRecItem__btn {position: static; width: auto; height: 36px; margin: 12px 14px 14px 14px;} } /* состав материалов продолжает ту же серую зону: свои отступы общего стиля снимаем */ body .solutionComposition {margin: 0; padding: 76px 0 0 0;} /* вес выше, чем у правила в общем style-first.css */ /* ниже состава обычно идёт серый блок «Покупают вместе»; если все товары уже в смете и он скрыт, низ серой зоны делает сам состав */ body .solutionComposition.is-tail {padding-bottom: 100px;} @media (max-width: 768px) { body .solutionComposition.is-tail {padding-bottom: 60px;} } /* пока грузится соседняя система — лёгкое приглушение страницы */ #solutionPage {transition: opacity 0.15s ease;} #solutionPage.is-loading {opacity: 0.55; pointer-events: none;} /* ---------- материалы в составе системы (макет: карточка 1139, строки 62) ---------- */ #solutionComposition .snMat__title { margin: 0 0 6px 0; font-family: 'Overpass', sans-serif; font-size: 26px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F; } /* в макете площадь — часть заголовка с подчёркиванием 2 px, а не поле в рамке */ .snMat__area {white-space: nowrap; border-bottom: 2px dotted #1F1F1F;} .snMat__areaUnit {margin-left: 0.25em;} /* в строке итога линия тоньше и светлее, чем в заголовке */ #solutionComposition .snMat__area--total {border-bottom: 1px dotted #4D4D4D;} #solutionComposition .snMat__area input { box-sizing: content-box; width: 2ch; /* дальше ширину подгоняет скрипт по значению */ height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; letter-spacing: inherit; text-align: center; color: inherit; } .snMat__area input:focus {outline: 0; background: #FFFBCB;} /* шапка колонок повторяет сетку строки */ #solutionComposition .snMat__cols, #solutionComposition .snMatRow { display: grid; grid-template-columns: 28px 57px minmax(0, 1fr) 96px 168px 96px 104px; align-items: center; column-gap: 14px; } #solutionComposition .snMat__cols { padding: 0 16px 4px 15px; /* в макете от подписей до карточки группы 4 px */ font-size: 14px; line-height: 120%; color: #A2A2A2; } .snMat__colsHint {grid-column: 1 / 4; margin-left: -15px;} /* в макете вровень с краем таблицы */ .snMat__colsName {text-align: right;} .snMat__cols .snMat__colsName:nth-child(3) {text-align: center;} /* группа материалов */ #solutionComposition .snMat__group { margin: 0 0 20px 0; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; box-shadow: 4px 4px 0 #D9D9D9; overflow: hidden; } #solutionComposition .snMat__groupHead { display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 15px; border-bottom: 3px solid #E1E1E1; cursor: pointer; } /* группа выключена — сумма в её шапке бледнеет, но остаётся видна */ #solutionComposition .snMat__groupHead:not(.active) .snMat__groupSum {color: #A2A2A2;} .snMat__groupHead .checkbox {flex: none; line-height: 0;} .snMat__groupHead .checkbox svg {display: block;} #solutionComposition .snMat__groupName { flex: 1 1 auto; font-family: 'Overpass', sans-serif; font-size: 20px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #202020; } .snMat__groupSum {font-size: 20px; line-height: 135%; font-weight: 600; color: #1F1F1F; white-space: nowrap;} /* строка материала */ #solutionComposition .snMatRow { padding: 10px 16px 10px 15px; border-top: 2px solid #F3F3F3; } .snMatRow:first-child {border-top: 0;} .snMatRow.active .snMatRow__name a {color: #4D4D4D;} .snMatRow:not(.active) {color: #A2A2A2;} #solutionComposition .snMatRow:not(.active) .snMatRow__name a, .snMatRow:not(.active) .snMatRow__sum {color: #A2A2A2;} .snMatRow:not(.active) .snMatRow__pic {opacity: 0.45;} .snMatRow__check {line-height: 0;} .snMatRow__check .label {cursor: pointer;} .snMatRow__check .checkbox svg {display: block;} .snMatRow:not(.active) .snMatRow__check .checkbox rect {fill: #FFFFFF; stroke: #E1E1E1;} .snMatRow:not(.active) .snMatRow__check .checkbox path {display: none;} .snMatRow__pic {line-height: 0;} .snMatRow__pic img {display: block; width: 57px; height: 43px; object-fit: contain;} .snMatRow__name {font-size: 15px; line-height: 135%; color: #4D4D4D;} .snMatRow__name a {color: #4D4D4D; text-decoration: none;} .snMatRow__name a:hover {color: #1F1F1F;} .snMatRow__note {margin: 2px 0 0 0; font-size: 12px; line-height: 120%; color: #A2A2A2;} .snMatRow__price {font-size: 15px; line-height: 135%; text-align: right; color: #4D4D4D; white-space: nowrap;} /* количество со степпером и подписью «расч.» */ .snMatRow__qty {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 8px;} #solutionComposition .snMatRow__stepper { display: flex; align-items: center; box-sizing: border-box; height: 34px; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFF050; overflow: hidden; } #solutionComposition .snMatRow__step { width: 28px; height: 32px; border: 0; background: none; font-family: inherit; font-size: 17px; line-height: 32px; color: #1F1F1F; cursor: pointer; } .snMatRow__step:hover {background: rgba(0, 0, 0, 0.06);} #solutionComposition .snMatRow__input { width: 40px; height: 32px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 15px; line-height: 32px; text-align: center; color: #1F1F1F; } .snMatRow__input:focus {outline: 0;} .snMatRow__unit {font-size: 14px; line-height: 135%; color: #A2A2A2;} .snMatRow__calc {flex: 1 0 100%; margin: 2px 0 0 0; font-size: 14px; line-height: 135%; text-align: center; color: #A2A2A2;} .snMatRow__calc.is-changed {color: #4D4D4D;} .snMatRow__qty--plain {font-size: 15px; color: #4D4D4D;} .snMatRow__rest {font-size: 15px; line-height: 135%; text-align: right; color: #4D4D4D;} .snMatRow__restNote {display: block; font-size: 14px; line-height: 135%; color: #A2A2A2;} .snMatRow__restOff {color: #A2A2A2;} /* крестик у добавленного вручную товара */ .snMatRow__drop { width: 26px; height: 26px; padding: 0; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; font-family: inherit; font-size: 17px; line-height: 22px; color: #A2A2A2; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .snMatRow__drop:hover {border-color: #1F1F1F; color: #1F1F1F;} .snMatRow__sum {font-size: 15px; line-height: 135%; font-weight: 600; text-align: right; color: #1F1F1F; white-space: nowrap;} @media (max-width: 1180px) { #solutionComposition .snMat__cols, .snMatRow {grid-template-columns: 28px 50px minmax(0, 1fr) 86px 150px 86px 96px; column-gap: 10px;} .snMatRow__pic img {width: 50px; height: 38px;} } @media (max-width: 900px) { /* подписи колонок не нужны — остаётся только подсказка про галочку. Префикс обязателен: у базового правила он есть, без него display не перебить */ #solutionComposition .snMat__cols {display: block; padding: 0 0 6px 0;} #solutionComposition .snMat__colsHint {margin-left: 0;} #solutionComposition .snMat__colsName {display: none;} /* колонка количества не уже степпера (28 + 40 + 28 + рамки) */ #solutionComposition .snMatRow { grid-template-columns: 28px 50px minmax(100px, 1fr) auto; grid-template-areas: 'check pic name name' '. . qty sum'; row-gap: 10px; } .snMatRow__check {grid-area: check;} .snMatRow__pic {grid-area: pic;} .snMatRow__name {grid-area: name;} .snMatRow__price {display: none;} .snMatRow__qty {grid-area: qty; justify-content: flex-start;} .snMatRow__calc {text-align: left;} .snMatRow__rest {display: none;} .snMatRow__sum {grid-area: sum;} /* в названиях есть куски без пробелов вроде «(1200x600x22мм)0,72м2» — без переноса внутри слова они вылезали за край карточки */ #solutionComposition .snMatRow__name {overflow-wrap: anywhere;} /* монтаж: семь колонок заголовка на узком экране не помещаются — название на своей строке, под ним цена, площадь и сумма */ #solutionComposition .snMat__group--mount .label.snMat__groupHead { display: grid; grid-template-columns: 28px auto auto minmax(0, 1fr); grid-template-areas: 'check name name name' '. price qty sum'; align-items: center; gap: 10px; padding: 14px 15px; } /* селекторы с запасом по весу: базовое правило группы монтажа стоит в файле ниже и своим grid-column: 2 / 4 загоняло название в узкую колонку */ #solutionComposition .snMat__group--mount .snMat__groupHead > .checkbox {grid-area: check;} #solutionComposition .snMat__group--mount .snMat__groupHead .snMat__groupName {grid-area: name; flex: none;} /* display возвращаем: в строках состава цена на узком экране скрыта */ #solutionComposition .snMat__group--mount .snMat__groupHead .snMatRow__price {display: block; grid-area: price; margin: 0;} #solutionComposition .snMat__group--mount .snMat__groupHead .snMatRow__qty--plain {grid-area: qty; justify-content: flex-start;} #solutionComposition .snMat__group--mount .snMat__groupHead .snMatRow__rest {display: none;} #solutionComposition .snMat__group--mount .snMat__groupHead .snMat__groupSum {grid-area: sum; justify-self: end; margin: 0;} } @media (max-width: 768px) { /* префикс обязателен: у базовых правил он есть */ #solutionComposition .snMat__title {font-size: 22px;} #solutionComposition .snMat__groupName {font-size: 17px;} .snMat__groupSum {font-size: 17px;} } /* гасим подписи-псевдоэлементы старой таблицы */ #solutionComposition .solutionTableCheck::before, #solutionComposition .solutionTableCheck::after, #solutionComposition .solutionCompositionTableLine::before, #solutionComposition .solutionCompositionTable::before {content: none;} #solutionComposition .solutionCompositionTableLine {margin: 0; align-items: center;} #solutionComposition .solutionCompositionItem {margin: 0 0 20px 0;} /* у старой таблицы была своя рамка с тенью и отступом сверху — внутри группы она давала вторую рамку и белую щель под заголовком */ #solutionComposition .solutionCompositionTable { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; } /* галочки: в макете жёлтые, общий стиль красит их в зелёный */ /* общий стиль растягивает галочки до 34 px, в макете они 28 */ #solutionComposition .label .checkbox svg {width: 28px; height: 28px;} #solutionComposition .label.active .checkbox svg rect {fill: #FFF050;} /* жёлтая — только у группы, у строки в макете серая с рамкой */ #solutionComposition .snMatRow__check .label.active .checkbox svg rect {fill: #F3F3F3; stroke: #E1E1E1;} #solutionComposition .label:not(.active) .checkbox svg rect {fill: #FFFFFF; stroke: #E1E1E1;} #solutionComposition .label:not(.active) .checkbox svg path {display: none;} /* ---------- итог и кнопки под составом (макет: h5 20, кнопки 198x46) ---------- */ /* монтаж: в макете одна строка — цена, площадь и сумма прямо в заголовке группы */ #solutionComposition .snMat__group--mount .snMat__groupHead { display: grid; grid-template-columns: 28px 57px minmax(0, 1fr) 96px 168px 96px 104px; column-gap: 14px; padding: 22px 16px 22px 15px; border-bottom: 0; } #solutionComposition .snMat__group--mount .snMat__groupName {grid-column: 2 / 4;} #solutionComposition .snMat__group--mount .solutionCompositionTable {display: none;} #solutionComposition .snMat__group--mount {margin-bottom: 0;} /* отступ до примечания задаёт само примечание */ #solutionComposition .snMat__total {margin: 56px 0 0 0;} #solutionComposition .snMat__totalTitle { margin: 0 0 6px 0; font-family: 'Overpass', sans-serif; font-size: 20px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F; } /* в макете вокруг тире широкие пробелы: три до и два после */ #solutionComposition .snMat__totalDash {margin: 0 10px 0 16px;} #solutionComposition .snMat__totalList {margin: 0 0 29px 0;} #solutionComposition .snMat__totalLine { font-size: 15px; line-height: 135%; color: #4D4D4D; } #solutionComposition .snMat__totalLine b {font-weight: 700;} /* в макете суммы Inter Bold */ /* группа выключена — её стоимость видно, но бледной */ #solutionComposition .snMat__totalLine.is-off {color: #A2A2A2;} #solutionComposition .snMat__acts {display: flex; flex-wrap: wrap; gap: 15px;} #solutionComposition .snMat__act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; width: 198px; height: 46px; padding: 0 10px; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; box-shadow: 4px 4px 0 #D9D9D9; font-size: 15px; line-height: 135%; font-weight: 600; text-decoration: none; color: #4D4D4D; transition: box-shadow 0.15s ease, transform 0.15s ease; } #solutionComposition .snMat__act svg {flex: none; display: block;} #solutionComposition .snMat__act--main {background: #FFF050; color: #1F1F1F;} #solutionComposition .snMat__act--save {color: #1F1F1F;} #solutionComposition .snMat__act:hover {box-shadow: 2px 2px 0 #D9D9D9; transform: translate(2px, 2px); color: #1F1F1F;} #solutionComposition .snMat__act:active {box-shadow: 0 0 0 #D9D9D9; transform: translate(4px, 4px);} /* в макете примечание стоит между составом и итогом */ #solutionComposition .snMat__buyNote { max-width: 900px; margin: 10px 0 0 0; font-size: 15px; line-height: 130%; color: #A2A2A2; } #solutionComposition .snMat__buyNote a {color: #4D4D4D;} @media (max-width: 900px) { #solutionComposition .snMat__acts {gap: 10px;} #solutionComposition .snMat__act {width: calc(50% - 5px);} } @media (max-width: 560px) { #solutionComposition .snMat__act {width: 100%;} /* Карточка перестраивается по макету заказчика: галочка absolute в углу, название во всю ширину, ниже слева картинка, справа столбиком упаковка, количество и сумма. display: contents у названия нужен, чтобы подпись «N м² в упаковке» стала отдельной ячейкой сетки и ушла в правый столбец. */ #solutionComposition .snMatRow { position: relative; grid-template-columns: 66px minmax(0, 1fr) auto; grid-template-areas: 'name name name' 'pic pack pack' 'pic qty sum'; align-items: start; column-gap: 12px; row-gap: 6px; padding: 12px 15px 14px 15px; } #solutionComposition .snMatRow__check {position: absolute; left: 13px; top: 12px;} #solutionComposition .snMatRow__name {display: contents;} #solutionComposition .snMatRow__name > a {grid-area: name; display: block; padding-left: 36px;} #solutionComposition .snMatRow__note {grid-area: pack; margin: 0;} /* картинка стоит по низу своей колонки — вровень с нижним краем степпера */ #solutionComposition .snMatRow__pic {grid-area: pic; align-self: end;} #solutionComposition .snMatRow__qty {grid-area: qty; justify-content: flex-start;} /* сумма — в строке со степпером, прижата к правому краю карточки */ #solutionComposition .snMatRow__sum {grid-area: sum; justify-self: end; align-self: center; text-align: right;} /* у допов в колонке остатка живёт крестик «убрать из расчёта» — без него на телефоне добавленный товар нельзя было убрать из сметы */ #solutionComposition .snMatRow--extra .snMatRow__rest {display: block; position: absolute; right: 12px; top: 10px;} #solutionComposition .snMatRow--extra .snMatRow__name > a {padding-right: 34px;} /* заголовок группы: название на своей строке, сумма под ним справа — иначе длинное «Звукоизоляционные» выталкивало сумму за край */ #solutionComposition .snMat__groupHead {flex-wrap: wrap; gap: 4px 10px;} #solutionComposition .snMat__groupName {flex: 1 1 calc(100% - 38px); font-size: 17px;} #solutionComposition .snMat__groupSum {margin-left: auto; font-size: 17px;} } /* пояснение в попапе «Смета на почту» */ .callbackPopupSmeta { margin: 0 0 16px 0; font-size: 14px; line-height: 135%; color: #A2A2A2; } .callbackPopupSmetaInfo {color: #4D4D4D;} /* ---------- покупают вместе с системой (макет: карточка 360x100, по три в ряд) ---------- */ .snWith {margin: 0; padding: 90px 0 116px 0; background: #F3F3F3;} /* заголовок, стрелки и лента — ячейки сетки: на широком экране стрелки справа от заголовка, на телефоне переезжают под ленту */ .snWith .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'head nav' 'win win'; align-items: end; column-gap: 20px; } .snWith__title {grid-area: head;} .snWith__nav {grid-area: nav; margin: 0 0 10px 0;} .snWith__window {grid-area: win;} .snWith__title { margin: 0 0 10px 0; font-family: 'Overpass', sans-serif; font-size: 26px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F; } .snWith__nav {display: flex; gap: 10px;} .snWith__nav[hidden] {display: none;} .snWith__arrow { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; color: #4D4D4D; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .snWith__arrow--next svg {transform: scaleX(-1);} .snWith__arrow:hover {background: #FFF050; color: #1F1F1F;} .snWith__arrow:disabled {opacity: 0.4; cursor: default; background: #FFFFFF; color: #A2A2A2;} /* окно с запасом справа и снизу, чтобы не срезало тени карточек */ .snWith__window {position: relative; overflow: hidden; padding: 0 6px 6px 0; margin: 0 -6px -6px 0;} .snWith__track { position: relative; /* от неё считается место гаснущей карточки */ display: flex; gap: 30px; transition: transform 0.35s ease; } .snWithItem { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: 'pic name buy' 'pic price buy' 'form form form'; align-items: center; column-gap: 15px; box-sizing: border-box; flex: 0 0 360px; width: 360px; min-height: 100px; padding: 15px; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; box-shadow: 4px 4px 0 #D9D9D9; } .snWithItem__pic {grid-area: pic; display: block; line-height: 0;} .snWithItem__pic picture {display: block;} .snWithItem__pic img {display: block; width: 60px; height: 42px; object-fit: contain;} .snWithItem__name { grid-area: name; display: block; font-size: 14px; line-height: 120%; text-decoration: none; color: #4D4D4D; } .snWithItem__name:hover {color: #1F1F1F;} .snWithItem__price { grid-area: price; margin: 6px 0 0 0; font-size: 15px; line-height: 135%; color: #1F1F1F; } .snWithItem__price b {font-weight: 600;} .snWithItem__per {margin-left: 8px; font-size: 14px; line-height: 140%; color: #A2A2A2;} .snWithItem__buy {grid-area: buy;} /* строка «количество + добавить» раскрывается в карточке под товаром */ .snWithItem__form { grid-area: form; display: flex; align-items: center; gap: 10px; margin: 10px 0 0 0; } .snWithItem__form[hidden] {display: none;} .snWithItem__counter { display: flex; align-items: center; box-sizing: border-box; height: 36px; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; } .snWithItem__qty { width: 34px; height: 34px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 15px; text-align: center; color: #1F1F1F; } .snWithItem__qty:focus {outline: 0;} .snWithItem__formUnit {padding: 0 8px 0 2px; font-size: 14px; color: #A2A2A2;} .snWithItem__go { flex: 1 1 auto; box-sizing: border-box; height: 36px; padding: 0 12px; border: 1px solid #E6D849; border-radius: 5px; background: #FFF050; font-family: inherit; font-size: 14px; line-height: normal; font-weight: 600; white-space: nowrap; color: #1F1F1F; cursor: pointer; transition: background-color 0.15s ease; } .snWithItem__go:hover {background: #FFE400;} /* карточка открыта — прячем «плюс», она сама стала формой */ .snWithItem.is-open .snWithItem__buy {display: none;} /* товар ушёл в смету: карточка прячется, а вместо неё к смете летит копия. Место в ленте освобождает распорка */ .snWithItem.is-leaving { z-index: 1; pointer-events: none; } /* летящая копия: лежит в body, поверх всего, кликов не ловит */ .snWithFly { position: fixed; z-index: 10000; margin: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; } .snWithGhost {flex: none; pointer-events: none;} /* и в смете видно, куда он приехал */ @keyframes apRowIn { 0% {background: #FFF7A8;} 60% {background: #FFFBD6;} 100% {background: transparent;} } .snMatRow--extra.is-new {animation: apRowIn 1.2s ease;} .snWithItem[hidden] {display: none;} #snWith[hidden] {display: none;} .snWithItem__buy[hidden] {display: none;} .snWithItem__add { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 38px; height: 38px; padding: 0; border: 0; /* это кнопка, а не ссылка — убираем рамку браузера */ border-radius: 5px; background: #FFF050; font-family: inherit; text-decoration: none; color: #4D4D4D; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .snWithItem__add:hover {background: #FFE400; color: #1F1F1F;} .snWithItem__step { width: 26px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 16px; line-height: 34px; text-align: center; text-decoration: none; color: #4D4D4D; cursor: pointer; } .snWithItem__step:hover {background: rgba(0, 0, 0, 0.06); color: #1F1F1F;} @media (max-width: 1180px) { .snWithItem {flex-basis: 320px; width: 320px;} } @media (max-width: 768px) { .snWith {padding: 60px 0 70px 0;} .snWith__title {font-size: 22px;} .snWithItem {flex-basis: 300px; width: 300px; column-gap: 10px;} } /* ---- телефоны: как у «Рекомендуем также» — стрелки под лентой по краям, листание пальцем, обрезанные соседи уходят в прозрачность ---- */ @media (max-width: 560px) { .snWith .container { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'win' 'nav'; } .snWith__title {margin-bottom: 16px;} .snWith__nav {justify-self: stretch; justify-content: space-between; margin: 16px 0 0 0;} .snWith__window { overflow-x: auto; overflow-y: hidden; padding: 0 6px 6px 6px; margin: 0 -6px -6px -6px; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .snWith__window::-webkit-scrollbar {display: none;} .snWith__window.can-prev.can-next { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); } .snWith__window.can-prev:not(.can-next) { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px); mask-image: linear-gradient(to right, transparent 0, #000 32px); } .snWith__window.can-next:not(.can-prev) { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 32px); mask-image: linear-gradient(to left, transparent 0, #000 32px); } /* крайние карточки прижаты к краю; хвостовая распорка — на запас окна под тень: справа браузер его в длину прокрутки не засчитывает */ .snWith__track {gap: 12px;} .snWith__track::after {content: ''; flex: 0 0 6px; margin-left: -12px;} /* карточка в столбик: фото сверху, под ним название, ниже цена и кнопка */ .snWithItem { flex: 0 0 auto; width: calc(100% - 52px); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'pic pic' 'name name' 'price buy' 'form form'; column-gap: 10px; row-gap: 10px; min-height: 0; padding: 12px; scroll-snap-align: center; } .snWithItem__pic {line-height: 0;} .snWithItem__pic img {width: 100%; height: 110px; object-fit: contain;} /* в узкой карточке кнопка «Добавить в расчёт» не влезает рядом со счётчиком */ .snWithItem__form {flex-wrap: wrap;} .snWithItem__go {flex: 1 1 100%;} .snWithItem__name {font-size: 15px;} /* цена за м² в узкой карточке рвалась посреди «₽/м²» — отдаём ей строку */ .snWithItem__per {display: block; margin: 2px 0 0 0;} } /* ---------- описание системы и документация (макет: H4 26, текст 15/130%) ---------- */ .snText {margin: 0; padding: 77px 0 0 0;} .snText__title { margin: 0 0 24px 0; font-family: 'Overpass', sans-serif; font-size: 26px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F; } .snText__body {font-size: 15px; line-height: 130%; color: #4D4D4D;} .snText__body p {margin: 0 0 16px 0;} .snText__body ul, .snText__body ol {margin: 0 0 16px 0; padding: 0 0 0 20px;} .snText__body li {margin: 0 0 6px 0;} .snText__body h2, .snText__body h3, .snText__body h4 { margin: 24px 0 12px 0; font-family: 'Overpass', sans-serif; font-size: 20px; line-height: 120%; font-weight: 700; letter-spacing: -0.02em; color: #1F1F1F; } .snText__body img {max-width: 100%; height: auto;} .snText__body a {color: #1F1F1F;} /* в макете от последней строки текста до заголовка 113 */ .snDocsBlock {margin: 0; padding: 93px 0 0 0;} .snDocsBlock .snDocs {display: flex; flex-wrap: wrap; gap: 30px;} /* ---------- предлагаем профессиональный монтаж (макет: H3 30, фото 520x495) ---------- */ /* блок консультации стоит вне #solutionPage и несёт общий margin-bottom 110, а в макете от него до заголовка монтажа 87: гасим разницу отрицательным отступом (соседние вертикальные отступы складываются: 110 - 23 = 87) */ .snMontazh {margin: -23px 0 0 0; padding: 0;} .snMontazh__grid { display: grid; grid-template-columns: minmax(0, 1fr) 520px; align-items: start; gap: 60px; } .snMontazh__title { margin: 0 0 22px 0; font-family: 'Overpass', sans-serif; font-size: 30px; line-height: 110%; font-weight: 800; letter-spacing: -0.02em; color: #1F1F1F; } .snMontazh__text {font-size: 15px; line-height: 135%; color: #3F3F3F;} .snMontazh__text p {margin: 0 0 16px 0;} .snMontazh__list {margin: 0 0 16px 0; padding: 0 0 0 20px;} .snMontazh__list li {margin: 0 0 10px 0;} .snMontazh__list b {font-weight: 600; color: #1F1F1F;} .snMontazh__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-width: 310px; height: 47px; padding: 0 24px; margin: 10px 0 0 0; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFF050; box-shadow: 4px 4px 0 #D9D9D9; font-size: 16px; line-height: 150%; text-decoration: none; color: #1F1F1F; transition: box-shadow 0.15s ease, transform 0.15s ease; } .snMontazh__btn:hover {box-shadow: 2px 2px 0 #D9D9D9; transform: translate(2px, 2px); color: #1F1F1F;} .snMontazh__btn:active {box-shadow: 0 0 0 #D9D9D9; transform: translate(4px, 4px);} .snMontazh__pic {line-height: 0;} .snMontazh__pic img { display: block; width: 520px; height: 495px; border-radius: 5px; object-fit: cover; } /* ---------- готовые объекты с системой (макет: карточка 360x435) ---------- */ .snObj {margin: 0; padding: 90px 0 0 0;} .snObj__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 30px; /* в макете от заголовка до карточек 26, из них 10 даёт отступ слайда */ margin: 0 0 16px 0; } .snObj__title { margin: 0; font-family: 'Overpass', sans-serif; font-size: 30px; line-height: 110%; font-weight: 800; letter-spacing: -0.02em; color: #1F1F1F; } .snObj__all { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; line-height: 135%; text-decoration: none; color: #4D4D4D; } .snObj__all:hover {color: #1F1F1F;} /* стрелка та же, что в каруселях, но смотрит вправо — как в макете */ .snObj__all svg {flex: none; transform: scaleX(-1);} /* от низа карточек до ссылки 22 */ /* в макете от карточек до ссылки 22, из них 10 даёт отступ слайда */ .snObj__more {margin: 12px 0 0 0; text-align: right;} /* карточки и стрелки приходят из общих стилей карусели портфолио (style-first.css) — здесь только посадочное место блока */ #snObj .portfolioPreviewSlider {margin-top: 0;} /* стрелки карусели: в макете кнопка 42×42 белая, рамка #E1E1E1, стрелка серая, а общий стиль карусели портфолио делает их почти прозрачными (opacity 0.3) */ #snObj .slick-arrow { width: 42px; height: 42px; border: 1px solid #E1E1E1; border-radius: 5px; background-color: #FFFFFF; background-image: url("data:image/svg+xml,"); opacity: 1; } #snObj .slick-arrow:hover { border-color: #FFF050; background-color: #FFF050; background-image: url("data:image/svg+xml,"); opacity: 1; } @media (max-width: 1180px) { .snMontazh__grid {grid-template-columns: minmax(0, 1fr) 420px; gap: 40px;} .snMontazh__pic img {width: 420px; height: 400px;} } @media (max-width: 900px) { .snMontazh__grid {grid-template-columns: minmax(0, 1fr); gap: 24px;} .snMontazh__pic img {width: 100%; height: 320px;} } @media (max-width: 768px) { .snText {padding: 50px 0 0 0;} .snText__title {font-size: 22px;} .snDocsBlock {padding: 40px 0 0 0;} .snDocsBlock .snDoc {width: 100%;} .snMontazh {padding: 60px 0 0 0;} .snMontazh__title {font-size: 24px;} .snMontazh__btn {min-width: 0; width: 100%;} .snObj {padding: 60px 0 0 0;} .snObj__title {font-size: 24px;} } /* карточки документов в блоке «Документация» (макет: 338x82, белая карточка) */ .snDocsBlock .snDoc { display: flex; align-items: center; gap: 11px; box-sizing: border-box; width: 360px; min-height: 82px; padding: 14px 15px 14px 13px; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; box-shadow: 4px 4px 0 #D9D9D9; text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease; } .snDocsBlock .snDoc:hover {box-shadow: 2px 2px 0 #D9D9D9; transform: translate(2px, 2px);} .snDocsBlock .snDoc__icon {flex: none; display: block;} .snDocsBlock .snDoc__icon path {transition: fill 0.18s ease;} .snDocsBlock .snDoc__text {flex: 1 1 auto; min-width: 0;} .snDocsBlock .snDoc__name { display: block; font-size: 14px; line-height: 120%; font-weight: 600; color: #1F1F1F; } .snDocsBlock .snDoc__meta { display: block; margin: 4px 0 0 0; font-size: 12px; line-height: 120%; color: #A2A2A2; transition: color 0.18s ease; } .snDocsBlock .snDoc__dl { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; line-height: 120%; color: #4D4D4D; transition: color 0.18s ease; } .snDocsBlock .snDoc__dl path {transition: stroke 0.18s ease;} .snDocsBlock .snDoc:hover .snDoc__meta {color: #4D4D4D;} .snDocsBlock .snDoc:hover .snDoc__dl {color: #1F1F1F;} .snDocsBlock .snDoc:hover .snDoc__dl path {stroke: #1F1F1F;} .snDocsBlock .snDoc:hover .snDoc__icon path[fill="#4D4D4D"] {fill: #1F1F1F;} /* в макете у карточек «Документации» бумага внутри иконки жёлтая (в верхней панели та же иконка остаётся белой) */ .snDocsBlock .snDoc__icon path[fill="#FFFFFF"] {fill: #FFF050;} /* ---------- видео о системах (макет: серая зона, карточка 262x379) ---------- */ .snVideo {margin: 90px 0 0 0; padding: 100px 0; background: #F3F3F3;} .snVideo__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; /* в макете от подписи до карточек 13 */ margin: 0 0 13px 0; } .snVideo__title { /* в макете от заголовка до подписи 15 */ margin: 0 0 15px 0; font-family: 'Overpass', sans-serif; font-size: 36px; line-height: 120%; font-weight: 800; letter-spacing: -0.02em; color: #1F1F1F; } .snVideo__note {font-size: 15px; line-height: 130%; color: #4D4D4D;} .snVideo__nav {display: flex; gap: 10px;} .snVideo__nav[hidden] {display: none;} .snVideo__arrow { display: flex; align-items: center; justify-content: center; width: 47px; height: 47px; padding: 0; border: 1px solid #C3C3C3; border-radius: 5px; background: none; color: #A2A2A2; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .snVideo__arrow--next svg {transform: scaleX(-1);} .snVideo__arrow:hover {background: #FFF050; border-color: #FFF050; color: #1F1F1F;} .snVideo__arrow:disabled {opacity: 0.4; cursor: default; background: none; color: #A2A2A2;} .snVideo__window {overflow: hidden;} .snVideo__track {display: flex; gap: 30px; transition: transform 0.35s ease;} .snVideoItem {flex: 0 0 262px; width: 262px;} .snVideoItem__link { position: relative; display: block; height: 379px; border-radius: 5px; overflow: hidden; text-decoration: none; } .snVideoItem__pic {display: block; height: 100%;} .snVideoItem__pic img {display: block; width: 100%; height: 100%; object-fit: cover;} /* лёгкое затемнение, чтобы кружок и время читались на любом кадре */ .snVideoItem__link::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); } .snVideoItem__play { position: absolute; left: 50%; top: 50%; z-index: 1; margin: -30px 0 0 -30px; line-height: 0; color: #FFFFFF; opacity: 0.8; transition: color 0.18s ease, opacity 0.18s ease; } .snVideoItem__link:hover .snVideoItem__play {color: #FFF050; opacity: 1;} .snVideoItem__time { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-size: 15px; line-height: 130%; color: #C3C3C3; } .snVideoItem__name { margin: 15px 0 0 0; font-size: 18px; line-height: 130%; font-weight: 700; color: #1F1F1F; } .snVideoItem__desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin: 6px 0 0 0; font-size: 15px; line-height: 130%; color: #4D4D4D; } .snVideo__more {margin: 45px 0 0 0; text-align: center;} .snVideo__more a { font-size: 15px; line-height: 135%; color: #1F1F1F; text-decoration: underline; text-underline-offset: 3px; } .snVideo__more a:hover {text-decoration: none;} @media (max-width: 768px) { .snVideo {margin: 60px 0 0 0; padding: 60px 0;} .snVideo__title {font-size: 26px;} .snVideo__head {flex-direction: column; align-items: flex-start;} .snVideoItem {flex-basis: 230px; width: 230px;} .snVideoItem__link {height: 333px;} } /* ---------- техническая информация (макет: две карточки 555x362) ---------- */ /* в макете от карточек документации до заголовка 97 */ .snTech {margin: 0; padding: 89px 0 0 0;} .snTech__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 12px 0; } .snTech__head .snText__title {margin: 0;} /* в шапке теперь заголовок с подписью: обёртка держит их одним блоком, чтобы стрелки остались прижатыми к правому краю */ .snTech__headText {min-width: 0;} .snTech__subtitle {margin: 8px 0 0 0; font-size: 15px; line-height: 130%; color: #4D4D4D;} .snTech__nav {display: flex; gap: 10px;} .snTech__nav[hidden] {display: none;} .snTech__arrow { display: flex; align-items: center; justify-content: center; width: 47px; height: 47px; padding: 0; border: 1px solid #C3C3C3; border-radius: 5px; background: none; color: #A2A2A2; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .snTech__arrow--next svg {transform: scaleX(-1);} .snTech__arrow:hover:not(:disabled) {background: #FFF050; border-color: #FFF050; color: #1F1F1F;} /* у края ленты стрелка гаснет — как в остальных каруселях страницы */ .snTech__arrow:disabled {opacity: 0.4; cursor: default; background: none; color: #A2A2A2;} /* запас по кругу: иначе окно карусели срезает тень 4/4 у карточек */ /* на телефоне стрелки переносятся под ленту и разводятся по краям. display: contents у шапки разбирает её на части, чтобы заголовок и кнопки можно было расставить по порядку в одной колонке */ @media (max-width: 768px) { .snTech .container {display: flex; flex-direction: column;} .snTech__head {display: contents;} .snTech__headText {order: 1; margin: 0 0 12px 0;} .snTech__head .snText__title {margin: 0;} .snTech__window {order: 2;} .snTech__nav {order: 3; justify-content: space-between; margin: 16px 0 0 0;} .snTech__nav[hidden] {display: none;} } .snTech__window {overflow: hidden; padding: 6px; margin: -6px;} .snTech__track {display: flex; gap: 30px; transition: transform 0.3s ease;} /* в макете в окне ровно две карточки */ .snTech__card {flex: none; width: calc((100% - 30px) / 2);} .snTech__card { position: relative; display: flex; flex-direction: column; box-sizing: border-box; height: 362px; padding: 20px 15px 15px 15px; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; box-shadow: 4px 4px 0 #D9D9D9; } .snTech__cardTitle { margin: 0 0 12px 0; font-size: 15px; line-height: 135%; text-align: center; color: #1F1F1F; } .snTech__counter {color: #A2A2A2;} .snTech__pic { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; text-decoration: none; color: #C3C3C3; } /* общий стиль сайта (style-first.css) красит любую ссылку при :hover/:focus/:active в синий #23527C — после клика иконка «развернуть» так и оставалась синей */ .snTech__pic:hover, .snTech__pic:focus, .snTech__pic:active {color: #C3C3C3;} .snTech__pic img {max-width: 100%; max-height: 100%; object-fit: contain;} .snTech__zoom { position: absolute; right: 15px; bottom: 13px; line-height: 0; transition: color 0.15s ease; } .snTech__pic:hover .snTech__zoom {color: #1F1F1F;} @media (max-width: 900px) { .snTech__card {width: 100%;} } @media (max-width: 768px) { .snTech {padding: 45px 0 0 0;} .snTech__card {height: 300px;} .snTech__head {flex-wrap: wrap;} } /* ---------- похожие системы (прежний блок buyersChoice) ---------- */ /* Ниже 1181 px у этой карусели включён variableWidth: ширину слайда задаёт содержимое, а у карточки width: auto — на телефоне она разворачивалась на 780 px и уезжала за экран. Задаём ширину явно, в vw: проценты тут считаются от ленты slick шириной 20000 px. Файл грузится только на странице решения, другие разделы правило не трогает. */ /* своих стрелок на широком экране нет — там работают slick-овские */ .snPohNav {display: none;} /* от карточек до заголовка следующей секции было 210 px (110 поле блока + 90 отступ секции): вес выше, чем у правила в style-first.css — файл шаблона подключается раньше */ body .buyersChoice {margin-bottom: 20px;} @media (max-width: 768px) { /* ширину задаём слайду, а карточка внутри тянется на всю его ширину за вычетом полей 10 px — иначе карточки упираются друг в друга вплотную */ .buyersChoiceSlider.solution .buyersChoiceSliderItem { width: calc(100vw - 60px); max-width: 340px; } .buyersChoiceSlider.solution .buyersChoiceSliderItem .solutionItem {width: 100%; max-width: none;} /* лента вместо карусели: карточка встаёт по центру, крайние — к краю */ .buyersChoiceSlider.solution.is-swipe { display: flex; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .buyersChoiceSlider.solution.is-swipe::-webkit-scrollbar {display: none;} .buyersChoiceSlider.solution.is-swipe .buyersChoiceSliderItem {flex: 0 0 auto; scroll-snap-align: center;} /* обрезанные соседние карточки уходят в прозрачность. Маска, а не наложенный градиент: внутри прокручиваемого блока абсолютный слой ехал бы с лентой */ .buyersChoiceSlider.solution.is-swipe.can-prev.can-next { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); } .buyersChoiceSlider.solution.is-swipe.can-prev:not(.can-next) { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px); mask-image: linear-gradient(to right, transparent 0, #000 40px); } .buyersChoiceSlider.solution.is-swipe.can-next:not(.can-prev) { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40px); mask-image: linear-gradient(to left, transparent 0, #000 40px); } /* нижнее поле блока рассчитано на стрелки «в воздухе» (они были абсолютными и места не занимали) — со своими стрелками в потоке до следующей секции получалось 130 px */ /* вес выше, чем у правила в style-first.css: файл шаблона подключается раньше */ body .buyersChoice {margin-bottom: 12px;} /* стрелки под лентой по её краям */ .snPohNav {display: flex; justify-content: space-between; margin: 22px 0 0 0;} .snPohNav[hidden] {display: none;} .snPohArrow { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 40px; height: 40px; padding: 0; border: 1px solid #C3C3C3; border-radius: 5px; background: #FFFFFF; color: #4D4D4D; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .snPohArrow--next svg {transform: scaleX(-1);} .snPohArrow:hover:not(:disabled) {background: #FFF050; border-color: #FFF050; color: #1F1F1F;} .snPohArrow:disabled {opacity: 0.3; cursor: default;} } /* В общем стиле стрелки этой карусели всегда полупрозрачные (0,3), а состояния «упёрлись» нет вовсе — у края ничего не менялось. Делаем рабочие стрелки обычными, а неактивную — бледной. */ .buyersChoiceSlider.solution .slick-arrow {opacity: 1; border-color: #C3C3C3;} .buyersChoiceSlider.solution .slick-arrow.slick-disabled {opacity: 0.3; cursor: default;} .buyersChoiceSlider.solution .slick-arrow.slick-disabled:hover {border-color: #C3C3C3; background-color: #FFFFFF;} /* Карточка этой карусели набрана десктопными кеглями и держит поля по 30 px (правила с двумя классами перебивают мобильные из общего стиля) — на телефоне она выходила в 676 px высотой. Уменьшаем шрифты и отступы: 424 px. */ @media (max-width: 768px) { .buyersChoiceSlider.solution .solutionItemWrapper {padding-bottom: 54px;} .buyersChoiceSlider.solution .solutionItemImage {height: 130px;} .buyersChoiceSlider.solution .solutionItemName {padding: 12px 14px 0; font-size: 16px; line-height: 125%;} .buyersChoiceSlider.solution .solutionItemSection {padding: 3px 14px 0; font-size: 12px;} .buyersChoiceSlider.solution .solutionItemDesc {padding: 7px 14px 0; font-size: 12px; line-height: 135%;} .buyersChoiceSlider.solution .solutionItemProps {padding: 8px 14px 0;} .buyersChoiceSlider.solution .solutionItemPropsItem {font-size: 12px; line-height: 130%;} .buyersChoiceSlider.solution .solutionItemBottom {left: 14px; right: 14px; bottom: 14px;} .buyersChoiceSlider.solution .solutionItemPriceAmount {font-size: 18px;} .buyersChoiceSlider.solution .solutionItemPriceСurrency {font-size: 12px;} } /* ---------- готовые объекты на телефоне ---------- */ @media (max-width: 768px) { /* на телефоне у ссылки нет стрелки — вместо неё подчёркивание */ #snObj .snObj__all {text-decoration: underline; text-underline-offset: 3px;} #snObj .snObj__all svg {display: none;} /* ссылка «Все готовые объекты» стоит в одной строке со стрелками карусели (они абсолютные, по краям) — ставим её по центру между ними */ #snObj .snObj__more { display: flex; align-items: center; justify-content: center; min-height: 42px; margin: 18px 0 0 0; padding: 0 52px; text-align: center; } } /* ---------- попап «Сохранить расчёт» ---------- Коробку попапа (.popupBody) и закрытие берём у форм сайта, внутри — свои блоки */ .snSavePopup .popupContainer {padding: 36px 40px 40px 40px;} .snSave__info {margin: 10px 0 0 0; font-size: 15px; line-height: 135%; color: #4D4D4D;} .snSave__list {display: flex; flex-direction: column; gap: 10px; margin: 24px 0 0 0;} .snSave__item { display: flex; align-items: center; gap: 14px; box-sizing: border-box; width: 100%; padding: 14px 16px; border: 1px solid #E1E1E1; border-radius: 5px; background: #FFFFFF; box-shadow: 4px 4px 0 #D9D9D9; font-family: inherit; text-align: left; cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; } .snSave__item:hover {box-shadow: 2px 2px 0 #D9D9D9; transform: translate(2px, 2px);} .snSave__item:active {box-shadow: 0 0 0 #D9D9D9; transform: translate(4px, 4px);} .snSave__ico { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 5px; background: #FFF050; color: #1F1F1F; } .snSave__ico svg {display: block;} .snSave__name {display: block; font-size: 16px; line-height: 130%; font-weight: 700; color: #1F1F1F;} .snSave__note {display: block; margin: 2px 0 0 0; font-size: 13px; line-height: 130%; color: #A2A2A2;} .snSave__linkName {margin: 26px 0 8px 0; font-size: 16px; line-height: 130%; font-weight: 700; color: #1F1F1F;} .snSave__link {display: flex; gap: 10px;} .snSave__linkInput { flex: 1 1 auto; box-sizing: border-box; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid #E1E1E1; border-radius: 5px; background: #F7F7F7; font-family: inherit; font-size: 14px; color: #4D4D4D; } .snSave__copy { flex: none; box-sizing: border-box; height: 46px; padding: 0 20px; border: 1px solid #E6D849; border-radius: 5px; background: #FFF050; font-family: inherit; font-size: 15px; line-height: 135%; font-weight: 600; color: #1F1F1F; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .snSave__copy.is-done {border-color: #E1E1E1; background: #F3F3F3; color: #4D4D4D;} .snSave__hint {margin: 8px 0 0 0; font-size: 13px; line-height: 130%; color: #A2A2A2;} @media (max-width: 560px) { .snSavePopup .popupContainer {padding: 28px 20px 30px 20px;} .snSave__link {flex-wrap: wrap;} .snSave__copy {width: 100%;} } /* End */ /* /local/templates/acoustic/components/bitrix/catalog.element/solution_new/style.css?1793001122107037 */