/*
Theme Name: teplopotoc
Author: Alexa Graham
Description: description
Requires at least: 5.3
Tested up to: 6.2
Requires PHP: 5.6
Version: 1.8
License: GNU General Public License v2 or later
License URI: LICENSE
*/
/* montserrat-regular - cyrillic_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('fonts/montserrat-v31-cyrillic_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('fonts/montserrat-v31-cyrillic_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* montserrat-500 - cyrillic_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
src: url('fonts/montserrat-v31-cyrillic_latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('fonts/montserrat-v31-cyrillic_latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-regular - cyrillic_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('fonts/open-sans-v44-cyrillic_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('fonts/open-sans-v44-cyrillic_latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* open-sans-600 - cyrillic_latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('fonts/open-sans-v44-cyrillic_latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('fonts/open-sans-v44-cyrillic_latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/*==================page-product===============*/
button {
/* Сброс всех стилей */
all: unset;
}
.stoimosti-list {
display: flex;
flex-direction: row;
gap:181px;
padding-bottom: 37px ;
}
.stoimosti-img {
background-color: #FFFFFF;
border-radius: 30px;
width: 202px;
height: 122px;
display: flex;
justify-content: center;
align-items: center;
}
.podbor-forma {
/* margin-bottom: 60px; */
}
.podbor-header{
display: flex;
gap: 35px;
flex-direction: column;
margin-top: 100px;
margin-bottom: 45px;
}
.podbor-header h3 {
margin: 0;
align-self: center;
font-size: 26px;
}
.form__body {
display: flex;
width: 964px;
flex-direction: column;
gap: 25px;
}
.form__item-title {
font-size: 18px;
font-weight: 600;
color:#1D3557;
}
.wpcf7-form-control.wpcf7-text{
width:257px;
}
.form__mobile-only {
font-size: 14px;
display: none;
}
.form__item {
display: grid;
gap: 30px;
grid-template-columns: 395px 257px 257px;
/* align-items: center; */
}
.item-title-primechanie {
justify-self: start;
align-self: start;
}
.form__item__radio{
display: grid;
grid-template-columns: 16.65fr 28px 150px 30px 150px 30px 150px;
align-items: center;
/* margin-bottom: -25px; */
}
.form__input__radio{
width: 20px;
height: 20px;
}
.textarea {
resize: none;
}
.form__title__label {
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #2B2B2B;
font-weight: bolder;
}
.form__label {
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: bolder;
color: #1D3557;
display: flex;
align-items: center;
}
input[type=checkbox] {
padding-left:5px;
padding-right:5px;
-webkit-appearance:button;
border: double 2px rgb(151, 55, 199);
background-color:transparent;
color:#FFF;
white-space: nowrap;
overflow:hidden;
width:15px;
height:15px;
}
.form__label.form_label_checkbox{
display: grid;
grid-template-columns: 16.65fr 48px 150px 30px 150px 30px 150px;
align-items:center;
}
.form__label-primechanie {
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: bolder;
color: #1D3557;
}
.form__input {
background: #FFFCFC;
box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);
width: 257px;
height: 45px;
border-radius: 30px;
border: 1px solid #A3A3A3;
color: #A3A3A3;
padding-left: 20px;
}
.column__title {
display: grid;
grid-template-columns: 1fr 533px;
/* margin-bottom: 30px; */
}
.form__item.primechanie {
display: grid;
grid-template-columns: 0.88fr 488px;
align-items:start;
}
.form__submit .form__input {
height: 50px;
padding-left: 30px;
}
.form__input-primechanie {
font-family: "Open Sans", sans-serif;
height: 112px;
padding: 16px 20px;
text-align: start;
position: relative;
width: 545px;
border-radius: 30px;
border: 1px solid #A3A3A3;
color: #A3A3A3;
background: #FFFCFC;
box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);
}
.input_placeholder {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 120%;
color: #A3A3A3;
position: absolute;
margin-left: 320px;
margin-bottom: 65px;
}
.download-documents {
/* margin-bottom: 25px; */
}
.form__title_doks{
display:flex;
justify-content:start;
margin: 0;
padding-top: 65px;
padding-bottom: 31px;
}
.forma__title {
display:flex;
justify-content:center;
margin-top: 0;
padding-top: 50px;
}
.form__item__docs {
display: flex;
flex-direction: column;
gap:10px;
margin-bottom:65px;
}
.file__item {
display: flex;
flex-direction: row;
gap: 24px;
align-items: center;
}
.form__item__docs .file__item input {
/* font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
display: flex;
width: 120px;
height: 35px;
box-sizing: border-box;
justify-content: center;
align-items: center;
border-radius: 50px;
border: 1px solid #92111C;
background-color: transparent;
color: #92111C;
cursor: pointer; */
display:none;
}
.form__input__checkbox{
display:flex;
flex-direction:row;
}
.form__item__docs .file__item:hover {
color: #fff;
}
.form__item__docs .file__item label {
width: 126px;
align-items: center;
justify-content: center; font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
display: flex;
width: 120px;
height: 35px;
box-sizing: border-box;
justify-content: center;
align-items: center;
border-radius: 50px;
border: 1px solid #92111C;
background-color: transparent;
color: #92111C;
cursor: pointer;
}
.file__item label p {
color: #92111C;
font-size: 14px;
}
.file__input-hidden {
opacity: 0;
}
.file__text {
display: block;
font-weight:600;
}
.file__input-download {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
display: flex;
width: 120px;
height: 35px;
box-sizing: border-box;
justify-content: center;
align-items: center;
border-radius: 50px;
border: 1px solid #92111C;
background-color: transparent;
color: #92111C;
cursor: pointer;
}
.file__input-download:hover {
background-color: #92111C;
color: #FFFFFF;
}
.file__input-download:hover p {
color: #ECE7E3;
}
.file__input._error {
box-shadow: 0 0 15px red;
}
.form__submit {
display: grid;
gap: 17px;
grid-template-columns: 261px 260px 260px;
/* margin-top: 65px; */
}
.btn-download {
width: 258px;
height: 50px;
border-radius: 50px;
border: 1px solid #92111C;
background-color: transparent;
color: #92111C;
display: flex;
justify-content: center;
align-items: center;
}
.btn-download:hover {
cursor: pointer;
}
.file__input-hidden {
opacity: 0;
}
.consent-forma .form__body {
width: auto;
align-items: baseline;
}
.consent-forma .forma__title {
padding-top: 0;
}
.consent-forma .wpcf7-form-control.wpcf7-text {
width: 100%;
}
.consent-forma .form__attachment {
text-align: left;
}
.consent-forma .form__submit {
display: flex;
flex-direction: column;
align-items: baseline;
gap: 10px;
width: 100%;
}
.ays-pb-modal .wpcf7-form {
margin-bottom: 0;
}
.consent-forma .wpcf7-spinner {
display: none;
}
.consent-forma .btn {
width: 100%;
}
.consent-forma .wpcf7-list-item {
margin-left: 0;
}
.consent-forma .wpcf7-acceptance .wpcf7-list-item-label {
text-align: left;
}
.consent-forma .wpcf7-response-output {
width: 100%;
}
/*--------форма теплообменное оборудование------------*/
.wpcf7-form-control.wpcf7-text{
background: #FFFCFC;
box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);
width: 257px;
height: 45px;
border-radius: 30px;
border: 1px solid #A3A3A3;
color: #A3A3A3;
padding-left: 20px;
color: black;
}
.wpcf7-form-control.wpcf7-textarea{
width: 335px;
height: 150px;
border-radius: 20px;
border: 1px solid #A3A3A3;
box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);
background: #FFFCFC;
padding-top:16px;
padding-left:26px;
color: #A3A3A3;
}
.wpcf7-form-control.wpcf7-textarea {
width: 545px;
height:118px;
font-size: 14px;
font-family: Open sans, sans-serif;
color:black;
}
.contact-button dark{
box-shadow:none;
}
.wpcf7-form-control.wpcf7-file{
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
display: flex;
width: 120px;
height: 35px;
box-sizing: border-box;
justify-content: center;
align-items: center;
border-radius: 50px;
border: 1px solid #92111C;
background-color: transparent;
color: #92111C;
cursor: pointer;
}
textarea:focus-visible,
input:focus-visible {
outline: none !important;
}
/*--------форма сепарационное оборудование------------*/
/* .wpcf7-form-control.wpcf7-radio.form__input__radio{
display: grid;
grid-template-columns: 0.65fr 30px 150px 30px 150px 30px 150px;
align-items: center;
margin-bottom: 30px;
}
*/
.wpcf7-form-control.wpcf7-radio.form__input__radio{
display:flex;
margin-bottom:6px;
flex-direction:row;
}
.wpcf7-list-item.first{
display:flex;
align-items:center;
gap:11px;
}
.wpcf7-list-item.last,
.wpcf7-list-item.first
{
/*margin-left: -5px;*/
}
.form__input__radio .wpcf7-list-item {
/*width: auto;*/
margin-left: -5px;
}
.wpcf7-list-item input{
width:20px;
height:20px;
}
.wpcf7-list-item-label{
width:161px;
font-family:'Open Sans';
font-size:14px;
display:flex;
}
.wpcf7-acceptance .wpcf7-list-item-label {
width: auto;
display: inline-block;
padding-left: 6px;
}
.wpcf7-acceptance label {
display: flex;
}
.form_check_inpet{
font-size:12px
}
.wpcf7-list-item-label #1234{
font-size:12px;
}
.wpcf7-form{
margin-bottom:100px;
position: relative;ё
}
.form_span{
margin-left: 43px;
}
.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.custom_textarea{
width:545px;
height:70px;
border-radius:26px;
color:black;
}
.wpcf7-list-item.last {
display:flex;
flex-direction:row;
align-items:center;
gap:11px;
}
span .wpcf7-not-valid-tip{
font-family:Open Sans, sans-serif;
font-size:12px;
font-family: Open Sans, sans-serif;
font-size: 12px;
margin-top: 0px;
margin-left: -90px;
white-space: nowrap;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: 3px;
left: 2px;
z-index: 100;
border: none;!important
/* background: none; !important */
/* padding: 0.2em 0.8em; */
width: 24em;
}
.wpcf7-not-valid-tip {
position: absolute;
color: #dc3232;
font-size: 1em;
font-weight: normal;
display: block;
text-wrap: nowrap;
padding-left: 104px;
margin-top: -10px;
}
.wpcf7-list-item{
display: flex;
flex-direction: row;
align-items: center;
gap:11px;
}
/*.wpcf7.form.invalid .wpcf7-response-output{
position: absolute;
/* width: 100%; */
/* margin: 2em 0.5em 1em; */
/* padding: 0.2em 18em;!important
/* width: 250px; */
/* border-radius: 30px; */
/* margin-top: 58px;
background-color: #92111C;
font-family: Montserrat,sans-serif;
font-size: 26px;
color: white;
margin-left: -373px;
text-wrap: nowrap;
}
.wpcf7 .form.unaccepted .wpcf7-response-output, .wpcf7 .form.payment-required .wpcf7-response-output{
position: absolute;
/* width: 100%; */
/* margin: 2em 0.5em 1em; */
/* padding: 0.2em 18em;!important
/* width: 250px; */
/* border-radius: 30px; */
/* margin-top: 58px;
background-color: #92111C;
font-family: Montserrat,sans-serif;
font-size: 26px;
color: white;
margin-left: -373px;!important
text-wrap: nowrap;
}
..wpcf7-response-output{ /* check it */
/* margin-top: 58px;
background-color: #92111C;
font-family: Montserrat,sans-serif;
font-size: 26px;
color: white; */
/*
}
.wpcf7 form.invalid.wpcf7 form.output{
position: absolute;
width: 100%;
margin: 2em 0.5em 1em;
padding: 0.2em 18em;!important
/* width: 250px; */
/* border-radius: 30px; */
/* margin-top: 58px;
background-color: #92111C;
font-family: Montserrat,sans-serif;
font-size: 26px;
color: white;
margin-left: 0px;
text-wrap: nowrap;
}
.wpcf7 form.sent .wpcf7-response-output{
position: absolute;
width: 100%;
/* margin: 2em 0.5em 1em; */
/* padding: 0.2em 18em;!important
/* width: 250px; */
/* border-radius: 30px;
margin-top: 58px;
background-color: #92111C;
font-family: Montserrat,sans-serif;
font-size: 26px;
color: white;
/* margin-left: -371px;
text-wrap: nowrap;
margin-left: 0px;
}*/
/*--------форма градирни------------*/
/*--------форма тмембранные баки------------*/
/*--------стилизация чекбокса------------*/
/* Стилизация контейнера для радиокнопок */
.wpcf7-form label.radio-container {
position: relative;
display: inline-block;
margin-right: 10px;
cursor: pointer;
font-size: 16px;
}
/* Скрытие стандартного чекбокса */
.wpcf7-form input[type="checkbox"] {
/* position: absolute; */
/* opacity: 0; */
cursor: pointer;
top: -9px;
}
#footer_name{
width:240px;
}
#footer_phone{
width:288px;
}
@media (max-width: 1024px) {
.wpcf7 form.sent .wpcf7-response-output {
}
}
/*aded style*/
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 .wpcf7-response-output{
background-color: #fff;
box-shadow: 0px 4px 15px 15px rgba(197, 216, 231, 0.3);
border-radius: 30px;
font-family: Montserrat,sans-serif;
font-size: 24px;
color: rgba(29, 53, 87, 1);
top: 50%;
padding: 30px;
bottom: 50%;
left: 0;
right: 0;
min-height: 150px;
height: fit-content;
max-width: 700px;
width: 80vw;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
text-wrap: wrap;
z-index:999;
}
.close {
position: absolute;
right: 20px;
top: 20px;
color: rgba(163, 163, 163, 1);
cursor: pointer;
font-size: 18px;
font-family: revert;
height: 20px;
width: 20px;
opacity: 0.8;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,')
}
.close:hover {
opacity: 1;
}
.ok.button {
color:rgba(146, 17, 28, 1);
border: 1px solid rgba(146, 17, 28, 1);
border-radius: 50px;
font-size: 16px;
padding: 20px 30px;
margin: 20px auto 0;
text-transform: lowercase;
cursor: pointer;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.invalid .custom-response-output-vvs,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.unaccepted .custom-response-output-vvs,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.payment-required .custom-response-output-vvs,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.sent .custom-response-output-vvs{
position:absolute;
display: flex;
}
* {
box-sizing: border-box;
}
/* Плавная прокрутка по якорям на всём сайте.
При системной настройке «уменьшить движение» остаётся мгновенной. */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
:root {
--light-blue: #EBF3F8;
--title-color: #1D3557;
--text-color: #2B2B2B;
}
h1,
h2,
p {
color: var(--title-color);
}
h1 {
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 50px;
line-height: 120%;
text-align: center;
color: #1D3557;
margin-bottom:70px;
}
h2 {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 36px;
line-height: 140%;
}
h3{
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 26px;
line-height: 140%;
color: #1D3557;
}
h4{
font-family:Montserrat, sans-serif ;
font-style: normal;
font-size: 22px;
line-height: 120%;
color:#1D3557 ;
}
h5,.h5{
font-family:Montserrat, sans-serif ;
font-style: normal;
font-weight: 500;
font-size: 18px;
color: #1D3557;
}
h6{
font-family:Montserrat, sans-serif ;
font-style: normal;
font-size: 24px;
line-height: 120%;
color:#1D3557 ;
}
p {
font-family: Open Sans, sans-serif;
font-weight: normal;
font-size: 16px;
line-height: 140%;
margin-top: 0;
color:black;
}
body {
margin: 0;
padding: 0;
}
.first-screen--bg{
background: -webkit-linear-gradient(180deg, rgb(255, 255, 255) 26%, rgb(197, 216, 231));
background: -moz-linear-gradient(180deg, rgb(255, 255, 255) 26%, rgb(197, 216, 231));
background: linear-gradient(180deg, rgb(255, 255, 255) 26%, rgb(197, 216, 231));
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: black;
}
.hero h1{
margin: 0;
text-align: start;
}
.form__item-title.item-title-primechanie,.file__text {
color:#1D3557;
}
.link {
text-decoration: underline;
}
.link:hover {
text-decoration: none;
}
.btn-upload-wrapper{
background-color:#C5D8E7 ;
border: none;
border-radius: 50px;
margin-left: 63px;
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
min-height: 117px;
width: 359px;
padding: 0 39px;
gap: 15px;
/* box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); */
cursor:pointer;
}
.btn-upload-wrapper:hover{
box-shadow: 0 6px 6px rgba(33, 54, 95, 0.5);
}
.btn-upload-wrapper.long-btn {
width: 640px ;
min-height: 100px;
padding: 0 75px;
margin: 24px 0 0 0;
}
.btn-upload-wrapper .three-lines {
font-size: 20px;
line-height: 110%;
}
.btn {
color: white;
background-color: #92111C;
font-family: Open Sans, sans-serif;
box-sizing: border-box;
min-height: 50px;
height: auto;
min-width: 250px;
justify-content: center;
font-weight: 400;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;
width: fit-content;
border: 1px solid #92111C;
border-radius: 50px;
transition: 0.3s;
}
.button-text{
font-family: Montserrat, sans-serif;
font-weight: 550;
color: #1D3557;;
font-size: 20px;
line-height: 120%;
text-wrap: balance;
display: flex;
text-align: left;
justify-content: start;
}
.image_left-inner{
display:flex;
margin-bottom:40px;
gap:20px;
}
.btn {
box-sizing: border-box;
/*min-height: 50px;*/
min-width: 250px;
justify-content: center;
font-weight: 400;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;
color: #92111C;
width: fit-content;
border: 1px solid #92111C;
border-radius: 50px;
transition: 0.3s;
background: transparent;
}
.btn:hover {
background-color: #92111C;
color: white;
transition: 0.3s;
}
.container {
max-width: 1160px;
margin: auto;
}
/* Шапка должна лежать выше секций страницы: у hero главной свой контекст
наложения (isolation), и без этого выпадашка с телефонами уезжает под него. */
.header {
position: relative;
z-index: 500;
}
.header-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: 20px;
/* padding-right: 34px; */
gap:80px;
}
.out_btn{
padding-bottom: 46px;
}
.first-screen-container{
display:flex;
justify-content:flex-end;
}
.first-screen .container{
position: relative;
}
.first-screen--bg {
position: absolute;
top: -430px;
/* right: 257px; */
width: fit-content;
z-index: -1;
/*
height: 1037px; */
border-radius:540px ;
padding-top:311px;
/*
background-image: linear-gradient(to bottom, rgba(255,0,0,0), #C5D8E7); */
/* animation: slideDown 3s ease-in-out forwards; */
}
.first-screen .bg-mobile {
display: none;
}
.first-screen--bg img {
border-radius: 0 0 300px 300px;
width: 100%;
margin-top: 475px;
}
.logo {
max-width: 190px;
position: relative;
z-index: 300;
margin-right: 40px;
width:191px;
}
.footer-logo{
width:191px;
}
.logo img {
width: 100%;
}
.nav-list {
display: flex;
justify-content: space-between;
gap:44px;
/*width: 400px;*/
/*max-width: 400px;*/
padding-right: 39px;
text-transform:lowercase;
}
.nav-list .current-menu-item a {
font-weight: 900;
}
.menu-item a,
.contact-item a {
font-family: Open Sans, sans-serif;
font-size: 18px;
font-weight: 400;
color: #313131;
}
.test{
font-size: 24px;
font-weight: bold;
}
.sub-menu{
display: none;
}
.menu-item-33:hover .sub-menu{
position: absolute;
display: block;
}
.contact-list {
display: flex;
flex-direction: column;
justify-content: space-between;
/*width: 370px;*/
align-items:flex-end;
margin-right:20px;
}
.dropdown-content{
display: none;
}
.dropdown:hover .dropdown-content{
position: absolute;
z-index: 400;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 10px;
padding-left: 18px;
padding-top: 23px;
border: 1px solid #F1F1F1 ;
border-radius: 2px;
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 120%;
background: white;
}
.content-numbers{
display:flex;
flex-direction:column;
gap:30px;
}
.dropdown-phone{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 140%;
color:#92111C ;
}
.dropdown-line{
border-bottom: 1px solid #D8D8D8 ;
margin-top: 15px;
margin-bottom: 9px;
}
.dropdown-time{
font-size: 16px;
margin-bottom: 6px;
}
.partner h2 {
text-align: center;
}
.partner-item img {
width: 100px;
image-rendering: -webkit-optimize-contrast;
}
.hero {
padding-top: 100px;
padding-bottom: 75px;
position: relative;
}
.hero h1, .hero .h1 {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 27px;
line-height: 120%;
max-width: 430px;
margin-bottom: 20px;
}
.hero-wrapper p {
font-family: Montserrat, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 140%;
max-width: 432px;
margin-bottom: 30px;
}
.hero-btn {
margin-bottom: 51px;
}
.case {
background: linear-gradient(to right, #EBF3F8 50%, #fff 50%);
}
.case-reverse {
background: linear-gradient(to right, #fff 50%, #EBF3F8 50%);
padding-left: 230px;
}
.case-inner {
position: relative;
/* opacity: 0;
transform: translateX(-100%);
animation: slideInLeft 3s ease-in-out forwards; */
}
.case-reverse .case-wrapper .case-inner:before {
content: "";
position: absolute;
width: 97px;
height: 100%;
background-color: var(--light-blue);
border-radius: 50px 0 0 50px;
top: 0;
left: -97px;
}
.case-wrapper {
background-color: #fff;
}
.case-reverse .case-wrapper {
display: flex;
justify-content: flex-end;
border-radius: 50px 0 0 50px;
}
.case-inner--long {
width: 543px;
}
.case-inner-short{
width: 450px;
}
.case-wrapper .case-inner{
display: flex;
align-items: baseline;
padding: 20px 0px 20px 0;
background: #EBF3F8;
border-radius: 0 100px 100px 0;
margin: 0;
/* width: 446px; */
position: relative;
}
.case-reverse .case-wrapper .case-inner {
border-radius: 0 ;
}
мои заметки, [14.09.2023 05:35]
.case-reverse .case-wrapper .case-inner:before {
content: "";
position: absolute;
width: 97px;
height: 100%;
background-color: var(--light-blue);
border-radius: 50px 0 0 50px;
top: 0;
left: -97px;
}
.case-inner--long {
width: 543px;
}
.case a {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 20px;
/* line-height: 140%; */
color: #92111C;
margin-right: 10px;
display:flex;
gap:13px;
}
.case span {
font-family: Open Sans,sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #2B2B2B;
margin: 0;
}
.partner {
background-color: var(--light-blue);
padding-bottom: 73px;
padding-top: 43px;
margin-bottom: 73px;
}
.partner_center{
background-color: var(--light-blue);
padding-bottom:28px;
padding-top:28px;
margin-bottom: 40px;
}
.partner_center1{
padding-bottom:28px;
padding-top:28px;
margin-bottom: 40px;
}
.partner-list {
display: flex;
align-items: center;
gap: 26px;
}
.partner-list_about{
display:flex;
flex-direction:row;
justify-content:center;
gap:26px;
}
.partner-list.partner-list--large {
justify-content: center;
}
.partner-list.partner-list--large .partner-item {
height: 111px;
}
.partner-list.partner-list--large .partner-item img {
height: 100%;
width: 100%;
border-radius: 20px;
object-fit: contain;
padding: 10px;
}
.partner-item {
background-color: #fff;
border-radius: 20px;
width: 138px;
height: 79px;
display: flex;
justify-content: center;
align-items: center;
}
.info {
margin-bottom: 120px;
display: flex;
flex-direction: column;
gap: 45px;
}
.info-wrapper {
width: 1160px;
display: flex;
gap: 126px;
justify-content: space-between;
}
.info-details {
max-width: 450px;
}
.info-details h2 {
margin-bottom: 22px;
}
.info-details .no-margin-top {
margin: 0 0 22px 0;
}
.info-details p {
font-size: 18px;
line-height: 25px;
margin-bottom: 35px;
}
.info-img {
border-radius: 44px;
width: 543px;
height: 437px;
overflow: hidden;
object-fit: cover;
}
.info-img img {
width: 100%;
height: 100%;
object-fit: cover;
background-color: var(--light-blue);
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #C5D8E7);
}
.news .info-img img {
width: auto;
height: auto;
}
.news .info-img {
/*width: auto;*/
height: auto;
}
.news .info-wrapper {
justify-content: flex-start;
}
.info.news {
gap: 50px;
}
.news .container {
border: 1px solid;
padding: 20px;
}
.news .info-details {
display: flex;
align-items: center;
}
.info-news-page p {padding: 10px 0;}
.info-padding {
padding-top: 0;
}
.about {
padding: 60px 0;
margin-bottom: 120px;
background-color: var(--light-blue);
}
.about-wrapper {
display: flex;
justify-content: space-between;
}
.about h2 {
margin: 0;
font-size: 30px;
line-height: 45px;
padding-bottom: 20px;
text-align: center;
}
.standarts .about-item {
justify-content: inherit;
}
.standarts .about-item p {
font-size: 14px;
}
.about-list {
display: flex;
gap: 40px;
}
.standarts .about-item .title {
font-weight: bold;
font-size: 18px;
min-height: 69px;
}
.works .about-item {
width: 100%;
display: flex;
flex-direction: column;
justify-content: inherit;
gap: 20px;
align-items: center;
}
@media (min-width: 1024px){
.works .arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #000;
margin: 0;
margin-top:50px;
}
.works .arrow:last-child {
display: none;
}
}
.about-item {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
align-items: center;
}
.about .img-block {
background-color: #fff;
border-radius: 30px;
/*width: 100%;*/
width: 202px;
height: 122px;
display: flex;
align-items: center;
justify-content: center;
}
.works .img-block {
background-color: #fff;
border-radius: 30px;
/*width: 100%;*/
width: 152px;
height: 122px;
display: flex;
align-items: center;
justify-content: center;
}
.works .about-item p {
font-size: 14px;
}
.about-item p {
margin: 0;
font-family: Open Sans, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 23px;
text-align: center;
max-width: 260px;
}
.page-about{
margin-top:50px;
}
.bank {
padding: 50px 0;
/*background-color: var(--light-blue);*/
}
.bank-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.bank h2 {
max-width: 450px;
}
.bank p {
max-width: 550px;
}
.bank-list {
display: flex;
justify-content: space-between;
width: 550px;
}
.bank-item {
max-width: 160px;
height: 92px;
overflow: hidden;
display: flex;
/* align-items: center; */
justify-content: center;
}
.bank-item img {
max-width: 100%;
}
.bank-item--3 {
background: #E31E24;
border-radius: 15px;
}
.bank-image-mobile {
display: none;
}
мои заметки, [14.09.2023 05:35]
.bank-image {
display: block;
}
.bank-image_color{
display:none;
}
.bank-item:hover .bank-image{
display:none;
}
.bank-item:hover .bank-image_color {
display:block;
}
.contact {
background: linear-gradient(180deg, rgba(49, 49, 49, 0.86) 99.99%, #A3A3A3 100%);
padding-top: 131px;
padding-bottom: 187px;
position: relative;
}
.contact-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url(/wp-content/uploads/2023/09/vebinar-imp_rel-01-1-2.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: 100% 100%;
}
.contact p {
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 26px;
line-height: 140%;
color: #FFFFFF;
max-width: 545px;
margin-bottom: 26px;
}
.contact-buttons {
display: flex;
justify-content: space-between;
max-width: 540px;
}
.contact-button {
border-radius: 30px;
min-width: 257px;
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-family: Open Sans, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 25px;
}
.contact-button.light{
display: none;
}
.contact-button.dark {
align-self: end;
color: #FFFCFC;
background: #92111C;
/* margin-top: 16px; */
display: flex;
justify-content: center;
border:none;
cursor: pointer;
}
.contact-form {
max-width: 545px;
gap: 18px;
display: flex;
flex-direction: column;
}
.contact-form textarea {
background: #FFFCFC;
box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);
border-radius: 26px;
height: 70px;
padding: 15px 26px;
max-width: 545px;
width: 100%;
}
.contact-form textarea::placeholder,
.contact-form .input-block input::placeholder {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 120%;
color: #A3A3A3;
width: 100%;
border: none;
}
.contact-form .input-block {
display: flex;
justify-content: space-between;
max-width: 545px;
}
.contact-form .input-block input {
background: #FFFCFC;
box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);
border-radius: 30px;
padding: 15px 26px;
/* width: 49%; */
border: none;
color: black;
}
.contact-wrapper {
position: relative;
z-index: 100;
margin-bottom: -250px;
}
.contacts-about-wrapper{
display: grid;
grid-template-columns: 1fr 2fr 2fr;
margin-bottom:100px ;
margin-top:92px;
}
.adres {
margin-left: 100px;
}
.contacts-about-wrapper p{
font-size: 16px;
color:black;
}
.contacts-about-wrapper h3{
font-size: 18px;
margin-bottom:12px;
}
.footer {
/* padding-top: 68px;
padding-bottom: 96px; */
background-color: #C5D8E7;
}
.footer-wrapper {
display: flex;
gap: 100px;
padding-top: 72px;
padding-bottom: 96px;
}
.footer-logo {
max-width: 154px;
}
.footer-logo img {
width: 100%;
}
.footer-menu {
display: flex;
flex-direction: column;
}
.menu-list{
margin-bottom:32px;
}
.footer-menu a,
.footer-tel a,
.footer-mail a,
.footer-tel p,
.footer-mail,
.footer-addres p {
font-family: Open Sans, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 140%;
color: var(--text-color);
}
.footer-tel a {
white-space: nowrap;
}
#cmplz-show-button {
display: block;
}
.footer-addres{
display:flex;
flex-direction:column;
gap:35px;
}
.footer-tel,
.footer-mail {
display: flex;
align-items: center;
gap: 10px;
}
.contacts-block {
display: flex;
flex-direction: column;
gap: 25px;
}
.contacts-item {
display: grid;
grid-template-columns: 20px 1fr;
column-gap: 10px;
row-gap: 3px;
}
.contacts-item img {
padding-top: 3px;
align-self: baseline;
justify-self: center;
}
.def {
display: flex;
flex-direction: column;
line-height: 22px;
}
.contacts-block-item span {
display: flex;
gap:9px;
}
мои заметки, [14.09.2023 05:35]
.footer-addres {
display: flex;
flex-direction: column;
gap: 35px;
max-width: 276px;
}
.footer-addres p {
margin-top: 0;
}
.burger-menu,
.mobile-menu {
display: none;
}
.info-img.mobile {
display: none;
}
.product-page {
margin-bottom: 100px;
}
.product-item .service {
display: flex;
justify-content: center;
}
.product-page .product-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 90px;
}
.product-page .product-item {
width: 45%;
}
#paragraph--two_rows{
display: flex;
text-align: start;
font-size: 24px;
line-height: 120%;
margin-top:25px;
}
.product-page .product-item .img-block {
height: 438px;
width: 520px;
border-radius: 44px;
background: #ECE7E3 no-repeat 50% 50%;
background-size: 60%;
margin-bottom: 25px;
}
.img-block{
display: flex;
justify-content: center;
align-items: center;
}
.img-item-khim {
border-radius: 44px;
width: 520px;
height: 438px;
}
.img-item {
object-fit: contain;
}
.product-page .product-item:nth-of-type(8) .img-block {
background-size: cover;
}
.product-page .product-item p {
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 500;
font-size: 30px;
margin: 0;
line-height: 140%;
text-align: center;
color: #1D3557;
}
.product-item{
display: flex;
justify-content: center;
}
/*.podbor-header{*/
/* display: flex;*/
/* gap: 35px;*/
/* flex-direction: column;*/
/* margin-top: 100px;*/
/* margin-bottom: 45px;*/
/*}*/
/*.podbor-header h3 {*/
/* margin: 0;*/
/* align-self: center;*/
/* font-size: 26px;*/
/*}*/
.breadcrumbs {
margin-top: 45px;
margin-bottom: 40px;
text-transform:lowercase;
}
.breadcrumbs a{
font-family: Open Sans, sans-serif;
font-size: 12px;
color:#6B6B6B ;
}
.breadcrumbs span{
font-family: Open Sans, sans-serif;
font-size: 12px;
color:#6B6B6B ;
}
.breadcrumbs ul{
display: flex;
flex-direction: row;
}
.breadcrumbs li {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 140%;
color: #6B6B6B;
cursor: pointer;
}
.page-about-description {
display: flex;
flex-direction: column;
gap: 30px;
margin-bottom: 30px;
}
.page-about-description p {
margin: 0;
}
.page-about-description h1 {
margin: 0 0 50px 0;
}
.page-about-description h2 {
margin: 50px 0 0 0;
text-align: center;
}
.all-page-title {
margin: 0 0 80px 0;
padding: 0 56px;
}
.product-advantages {
/*display: flex;*/
/*gap: 22px;*/
/*flex-direction: column;*/
}
.list{
display: flex;
flex-direction:row ;
gap:33px;
}
.product-advantages p {
font-size: 16px;
font-weight: 600;
}
.product-advantages ul {
list-style-type: disc;
margin: 0 0 0 20px;
}
/*----------------------------teploproduct_page---------------------------------*/
#teplorashifrovka-item-mobile{
display: none;
}
/*-------------------------------page-sep--------------------*/
.sep-info{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 30px;
}
.sep-info-text {
line-height: 22px;
}
.teploproduct-page-wrapper.sep{
display: flex;
flex-direction: column;
gap: 20px;
}
.teploproduct-page-wrapper.buttons{
display: flex;
flex-direction: column;
gap: 13px;
}
.sep-info-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
margin-bottom: 78px;
}
.sep-img-item {
height: fit-content;
flex-grow: 1;
background-color:#ECE7E3 ;
border-radius: 45px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.btn-container-mobile{
display: none;
}
.sep-img-items {
display: flex;
flex-direction: row;
gap: 33px;
margin-top: 50px;
}
.sep-img-item {
height: fit-content;
flex-grow: 1;
background-color:#ECE7E3 ;
border-radius: 45px;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.btn-container-mobile{
display: none;
}
мои заметки, [14.09.2023 05:35]
.btn-container{
display: flex;
}
/*----------------------------мембранные баки ---------------*/
.membrani-wrapper{
display: flex;
flex-direction: row;
gap: 20px;
margin-bottom: 50px;
}
.preimushestva {
margin-bottom: 40px;
}
.preimushestva-wrapper{
display: flex;
flex-direction: row;
gap: 30px;
padding-top: 43px;
align-items: center;
}
.preimushestva-image {
width: 490px;
height: auto;
object-fit: contain;
}
.membrbaki {
margin-top: 100px;
}
.membrbaki-discription {
display: flex;
align-items: center;
gap: 10px;
}
.membrbaki-discription-content ul {
margin-bottom: 30px;
}
.membrbaki-title {
font-size: 26px;
line-height: 36px;
text-align: center;
margin: 0 0 35px 0;
}
/*----------------------------------зра и части трубопровода--------------*/
.truborovod-wrapper{
display: flex;
flex-direction: row;
gap: 30px;
margin-bottom: 40px;
}
.truboprovod{
margin-bottom: 40px;
}
.product-advantages_reshenia ul{
list-style-type: disc;
margin: 0 0 0 20px;
}
.truboprovod-list{
display: grid;
grid-template-columns: repeat(2,0.4fr);
margin-left: 20px;
margin-top: 30px;
}
.zra-img-list{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.zra-img-item{
background-color:#ECE7E3 ;
border-radius: 44px;
}
.section_wrapper{
display:flex;
flex-direction:row;
gap:30px;
}
/*----------------------------------насосы--------------*/
.nasosi{
display: flex;
flex-direction: column;
gap: 45px;
margin-bottom: 46px;
}
.nasosi-description {
display: flex;
flex-direction: row;
}
.nasosi-list {
display: flex;
flex-direction: row;
gap: 31px;
align-items: center;
}
.nasosi h2 {
font-size: 26px;
margin: 0;
text-align: center;
}
.nasosi-text{
margin-bottom: 25px;
margin-top:50px;
}
.nasosi-automatic {
display: flex;
gap: 30px;
}
.nasosi-automatic img {
object-fit: contain;
}
.nasosi-automatic-inner {
display: flex;
flex-direction: column;
gap: 45px;
}
.nasosi-automatic-text {
display: flex;
flex-direction: column;
gap: 20px;
}
/*-------------------------------him reagenti page ---------------------------------*/
.img-him {
width:520px;
height:440px;
}
.page-reagenti {
margin: 75px 0 100px;
}
/*.reagenti-container {*/
/* display: flex;*/
/* flex-direction: column;*/
/*}*/
.reagenti-text {
margin-bottom: 30px;
}
.reagenti-list{
display: grid;
grid-template-columns: repeat(3,1fr);
gap:40px 32px;
justify-items: center;
margin-bottom: 90px;
}
.reagenti-item p{
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 140%;
margin: 0;
}
.case_1_block{
margin-bottom:50px;
}
.reagenti-item h3 {
height: 67px;
line-height: 110%;
margin: 0;
}
.reagenti-item {
min-height: 305px;
background-color:#DFEBF3 ;
border-radius: 30px;
padding: 28px 21px 39px 25px;
display: flex;
flex-direction: column;
}
.reagenti-nalko {
display: flex;
flex-direction: column;
gap: 35px;
margin-bottom: 70px;
}
.reagenti-nalko h3 {
margin: 0;
}
.proizvodstvo{
display: flex;
flex-direction: row;
align-items: center;
gap: 40px;
}
.reagenti-container{
margin-bottom:100px;
}
.reagenti-zakaz {
display: flex;
flex-direction: column;
gap: 38px;
}
.reagenti-zakaz h3 {
margin: 0;
}
.zacaz-list {
display: grid;
gap: 32px;
grid-template-columns: repeat(4,1fr);
}
.zacaz-item {
display: flex;
flex-direction: column;
gap: 27px;
background-color:#DFEBF3 ;
padding: 20px 27px 17px;
border-radius: 25px;
}
.zacaz-item h4 {
margin: 0;
font-weight: 500;
line-height: 120%;
height: 45px;
}
.zacaz-item p{
margin: 0;
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 140%
}
/*-----------------------------service----------------------------*/
/*--------------------------servis-teploobmen page-------------------------*/
.services-page {
margin-top: 70px;
}
мои заметки, [14.09.2023 05:35]
.services-list {
display: grid;
grid-template-columns: 520px 520px;
column-gap: 80px;
row-gap: 120px;
justify-content: center;
}
.services-item {
display: flex;
justify-content: center;
}
.services-item a {
width: 100%;
display: flex;
flex-direction: column;
gap: 25px;
}
.services-item a p {
font-size: 24px;
font-weight: 500;
line-height: 120%;
}
/*------------------------------сервис-сепарационное оборудование----------------------------*/
.service-spec{
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 100px;
}
/*-------------------------сервис и запасные части насосного оборудовани------------------------*/
.service-page-nasosi {
display: flex;
flex-direction: column;
gap: 100px;
}
.service-preimushestva {
display: flex;
flex-direction: column;
gap: 30px;
margin-bottom: 50px;
}
.service-nasosi-description {
display: flex;
flex-direction: column;
gap: 25px;
}
/*--------------------------сервис Nalco----------------------------*/
.service-page-nalco {
margin-top: 75px;
}
.block-img{
display: flex;
margin: 60px 0 40px;
gap: 33px;
max-height: 440px;
}
.block-img img {
height: fit-content;
flex-grow: 1;
}
.nalco-deyat{
display: flex;
flex-direction: column;
gap: 22px;
margin-bottom: 80px;
}
.nalco-deyat h4 {
margin: 0;
font-size: 16px;
font-weight: 600;
}
.nalco-deyat-list{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.nalco-deyat-list ul {
margin-left: 20px;
}
.nalco-printzip {
margin-bottom: 70px ;
display: flex;
flex-direction: column;
gap: 25px;
}
.nalco-printzip h3 {
margin: 0;
font-size: 26px;
line-height: 36px;
}
.nalco-printzip-list {
margin-left: 20px;
}
.nalco-text{
margin-bottom: 70px;
}
/*-----------------------------------решения------------------------------*/
.solution-page {
margin: 70px 0;
}
.solutions-list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 80px;
row-gap: 125px;
margin-bottom: 100px;
}
.solution-link {
display: flex;
flex-direction: column;
gap: 25px;
}
.solution-link img {
width: 100%;
height: auto;
border-radius: 45px;
}
.solution-link p {
font-weight: 500;
font-size: 24px;
}
/*-------------------------решения-импортозамещение----------------------------*/
.reingineering {
margin-bottom: 100px;
}
.reverce-brands {
display: flex;
flex-direction: column;
gap: 45px;
margin-bottom: 65px;
}
.reverce-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
row-gap: 55px;
column-gap: 20px;
}
.reing-images {
display: flex;
flex-direction: column;
gap: 40px;
margin-bottom: 90px;
}
.reing-images-content{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
justify-content: center;
}
.reing-opisanie1{
display: grid;
grid-template-columns: 1fr 2fr ;
gap: 30px;
margin-bottom: 70px;
}
.reing-opisanie-text{
display: flex;
flex-direction: column;
gap: 16px;
justify-content: center;
}
.reing-opisanie2{
display: flex;
flex-direction: column;
width: 70%;
gap: 16px;
margin-bottom: 70px;
}
.reing-opisanie3 {
display: flex;
flex-direction: row;
gap: 30px;
margin-bottom: 90px ;
}
.reing-opisanie4{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
margin-bottom: 40px;
}
.reing-opisanie-item{
gap: 32px;
display: flex;
flex-direction: column;
align-items: center;
}
.reing-title {
min-height: 58px;
display: flex;
flex-direction: column;
align-items: center;
}
.reing-title h3 {
margin: 0;
font-size: 26px;
font-weight: 500;
}
.organizatia {
display: flex;
flex-direction: column;
gap: 35px;
}
мои заметки, [14.09.2023 05:35]
.organizatia h3 {
margin: 0;
font-size: 26px;
font-weight: 500;
}
/*-------------------------котельные установки----------------------------*/
.ustanovki {
display: flex;
flex-direction: column;
margin-bottom: 80px;
gap: 25px;
}
.ustanovki-lists {
display: flex;
justify-content: start;
gap: 30px
}
.ustanovki-list li {
padding-left: 10px;
}
.ustanovki-list {
display: flex;
flex-direction: column;
list-style-type: disc;
margin: 0 0 0 20px;
}
.fakti-list .ustanovki-list {
gap: 20px;
}
.fakti {
display: flex;
gap: 20px;
margin-bottom:40px ;
}
.fakti-list {
display: flex;
flex-direction: column;
gap: 40px;
}
.fakti-list h3 {
margin: 0;
font-weight: 500;
}
/*-------------------------page-reverceing----------------------------*/
.mark{
display:grid ;
grid-template-columns: repeat(5, 200px);
grid-template-rows:repeat(2,1fr) ;
justify-items: center;
gap: 30px;
margin-top: 30px;
margin-bottom: 30px;
}
.privlechenie{
display:grid ;
grid-template-columns: 2fr 1fr;
gap:20px;
margin-bottom: 100px;
}
.organizatia{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
}
/*-------------------------------------page-ingineering------------*/
.proectirovanie {
display: flex;
flex-direction: column;
margin-bottom: 55px;
gap: 25px;
}
.proectirovanie-list{
display: grid;
grid-template-columns: repeat(2,1fr);
row-gap: 25px;
column-gap: 25px;
}
.proectirovanie-list ul {
margin-left: 20px;
}
.proectirovanie-list ul li {
padding-left: 10px;
}
.images_servis_three{
margin-bottom:50px;
}
.images_three_wrapper{
display:flex;
gap:28px;
justify-content: center;
}
.vidi_remonta{
margin-top:51px;
}
.vidi_remonta_paragraphs{
display:grid;
grid-template-columns:264px 447px;
margin-bottom:46px;
align-items: center;
}
.vidi_remonta_paragraphs p{
font-weight: 700;
}
.remont_advantages{
display:grid;
grid-template-columns:253px 600px;
margin-bottom:46px;
gap:35px;
}
.remont_advantages{
display:grid;
grid-template-columns:253px 600px;
margin-bottom:46px;
gap:35px;
}
.ing-description{
display: grid;
grid-template-columns: 0.2fr 1.8fr;
gap: 30px;
align-items: center;
margin-bottom: 50px ;
margin-top:50px;
}
.ing-description-flex {
display: flex;
}
.ing-description-flex a {
margin: 0 auto;
}
.etapi{
display: flex;
gap: 40px;
flex-direction: column;
justify-content: center;
margin-bottom: 100px ;
}
.img_left_advantages_wrapper{
display:flex;
flex-direction:row;
gap:31px;
}
.images_tow_wrapper{
display:flex;
flex-direction:row;
gap:33px;
}
.images_three{
margin-top:40px;
margin-bottom:40px;
}
.etapi h3 {
font-size: 26px;
text-align: center;
margin: 0;
font-weight: 500;
}
.reing-opisanie-item--urez{
display: grid;
grid-template-columns: 0.2fr 1fr;
margin-bottom: 25px;
}
p.urez {
color: #1D3557;
font-weight: bold;
}
.reing-opisanie-item--urez.margin-bottom{
margin-bottom:100px;
}
.sub_block{
font-family:Open Sans, sans-serif;
font-size:16px;
font-weight:600;
}
.sub_block. {
display: flex;
justify-content: center;
}
.sub-image-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sub-image-item p{
font-weight: bold;
padding-top: 20px;
}
.in_row{
display: flex;
flex-direction: row;
justify-content: center;
}
.block_wraper{
display:flex;
flex-direction: row;
margin-bottom: 50px;
}
.text_block_right{
display: flex;
flex-direction: column;
gap: 30px;
/* justify-content: center; */
padding-top: 15px;
}
.block_text{
display: flex;
flex-direction: column;
}
.image_block_right{
display: flex;
flex-direction: row;
gap: 31px;
margin-left: 30px;
}
#teplorashifrovka-wrapper-mobile{
display: none;
}
.teploproduct-page-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
align-items: start;
margin-top: 90px;
/*margin-bottom: 45px;*/
}
.teploproduct-page-wrapper p {
margin: 0;
}
.teploproduct-page-wrapper, .info-center p, li {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 22.4px;
color: black;
}
.info-news-page li {
padding: 5px 0;
list-style: disc;
margin-left: 40px;
}
.info-news-page ol li {
list-style: decimal;
}
.info-news-page ol li ul li {
list-style: disc;
}
ol li ul li {
list-style: disc;
margin-left: 20px;
line-height: 2rem;
}
ol li {
line-height: 4rem;
}
.teploproduct-page h3{
display: flex;
justify-content:center;
margin-top:65px;
}
.teploproduct-page.out_h{
margin-top:30px;
}
.teploproduct-image {
width: 100%;
height: fit-content;
/*margin: 60px 0 74px;*/
margin-bottom: 50px;
}
.teplorashifrovka {
margin-bottom: 140px;
}
.teplorashifrovka-list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 0;
row-gap: 72px;
}
.teplorashifrovka-item {
display: flex;
flex-direction: row;
align-items: center;
}
.teplorashifrovka-text {
display: flex;
flex-direction: column;
gap: 25px;
max-width: 317px;
}
.teplorashifrovka-canal-list{
display: flex;
flex-direction: row;
}
.teplorashifrovka-text h5,.teplorashifrovka-text .h5, p {
margin: 0;
}
.teplo-img {
margin-right: 20px;
}
.teploproduct-title {
text-align: center;
font-size: 26px;
margin: 0 0 50px 0;
}
.teploproduct-list{
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr 1fr;
row-gap: 65px;
}
.teploproduct-item {
width: 355px;
display: flex;
gap: 24px;
flex-direction: column;
align-items: center;
}
.teploproduct-item .img-container {
height: 298px;
}
.teploproduct-item p {
font-size: 22px;
line-height: 30px;
}
.img-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #ECE7E3;
border-radius: 44px;
gap: 50px;
}
.teploproduct-canal-item {
display: flex;
flex-direction: column;
gap: 30px;
}
.teploproduct-canal-item img{
margin-bottom:31px;
}
.teploproduct-canal-item h5,.teploproduct-canal-item .h5 {
margin: 0;
}
.teploproduct-canal-list{
display: flex;
gap:30px;
}
.stoimosti-banner{
background-color:#DFEBF3;
}
.stoimosti-title{
font-size:22px;
padding-top:82px;
}
.checkbox{
position: absolute;
display: flex;
top: -13px;
}
@media (max-width: 1024px){
.teplorashifrovka{
margin-bottom: 80px;
}
#teplorashifrovka-wrapper-mobile{
display: flex;
}
#teplorashifrovka-wrapper-mobile{
display: block;
}
.teplorashifrovka-list-mobile{
display:flex ;
flex-direction: column;
}
.teplorashifrovka-item-mobile{
display: flex;
flex-direction: column;
}
.teplorashifrovka-title{
display: flex;
flex-direction: row;
align-items: center;
}
.teploproduct-canal-list{
display: flex;
flex-direction: column;
gap:40px;
margin-top:35px;
}
}
.gradirni {
margin-top: 74px;
}
/*.gradirni-img-list{*/
/* display: flex;*/
/* align-items: center;*/
/* justify-content: space-around;*/
/* gap: 30px;*/
/* margin-top: 74px;*/
/*}*/
.gradirni-img-list {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
}
.gradirni-img-list{
/* margin-top:50px; */
}
.gradirni-advantages {
display: flex;
gap: 25px;
flex-direction: column;
margin-bottom: 74px;
}
.teplo-page-text {
display: flex;
flex-direction: column;
gap: 22px;
}
.custom-response-output-vvs {
background-color: #fff;
box-shadow: 0px 4px 15px 15px rgba(163, 163, 163, 0.4);
border-radius: 50px;
font-family: Montserrat,sans-serif;
font-size: 24px;
color: rgba(29, 53, 87, 1);
top: 0;
padding: 30px;
bottom: 0;
left: 0;
right: 0;
min-height: 150px;
height: fit-content;
max-width: 700px;
width: 80vw;
text-align: center;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto auto;
text-wrap: wrap;
position: absolute;
}
/*------------------------------page-reingineering------------------------*/
/*.services-item a img {*/
/* width: 100%;*/
/* height: fit-content;*/
/*}*/
@media (max-width: 1024px) {
h1, .about h1 {
font-size: 24px;
line-height: 29px;
margin-bottom: 30px;
}
.partner-wrapper h2{
font-size:24px;
margin-bottom: 35px;
}
h4{
font-size:20px;
padding:0;
margin:0;
}
.first-screen--bg{
background: -webkit-linear-gradient(180deg, rgb(255, 255, 255) 26%, rgb(197, 216, 231));
background: -moz-linear-gradient(180deg, rgb(255, 255, 255) 26%, rgb(197, 216, 231));
background: linear-gradient(180deg, rgb(255, 255, 255) 26%, rgb(197, 216, 231));
}
.bank h2 {
/* max-width: 450px; */
font-size:24px;
}
.bank p{
margin-bottom:45px;
}
.bank-image-mobile{
display:none;
}
.bank-image_color{
display:block;
}
.about-wrapper h2 {
padding: 0 20px;
font-size:24px;
margin-bottom:60px;
}
.container {
width: 100%;
padding: 0 20px;
}
.logo a img {
width: 124px;
height: fit-content;
}
.header {
height: 50px;
margin-bottom: 45px;
}
.header-wrapper {
position: relative;
padding: 0;
}
.hero-wrapper h1 {
font-size: 20px;
margin: 0 0 30px;
text-align: start;
}
.hero-wrapper p {
font-size: 16px;
}
.hero {
padding: 0;
display: flex;
flex-direction: column;
}
.hero-wrapper .hero-btn {
margin-bottom: 280px;
}
.first-screen {
position: relative;
margin-bottom: 35px;
}
.bg-mobile {
display: flex;
justify-content: center;
width: 100%;
position: absolute;
top: -440px;
left: 0;
right: 0;
border-radius:542px;
padding-top:600px;
}
.first-screen--bg img{
margin-top: 572px;
}
.first-screen .container {
display: none;
}
.case {
background: linear-gradient(to right, #EBF3F8 20px, #fff 20px);
height: fit-content;
margin-top:40px;
}
.case-reverse {
background: linear-gradient(to right, #fff 20px, #EBF3F8 20px);
height: fit-content;
}
.case-reverse {
/* background: linear-gradient(to right, #fff 50%, #EBF3F8 50%); */
/* padding-left: 230px; */
}
.container .case-wrapper {
margin: 0;
}
.case-reverse .case-wrapper {
background-color: #fff;
}
.case-reverse .container {
background-color: #fff;
}
.case-reverse .case-wrapper .case-inner:before {
border-radius: 0;
width: 20px;
right: -20px;
left: auto;
}
.case a{
display:flex;
flex-direction:column;
}
.case-reverse .case-wrapper .case-inner {
display:flex;
flex-direction: column;
column-gap: 24px;
padding: 35px 0 35px 63px;
border-radius: 100px 0 0 100px;
}
.case-reverse .case-wrapper .case-inner:before {
border-radius: 0;
width: 20px;
right: -20px;
left: auto;
}
.case-reverse {
padding:0;
}
.case-wrapper .case-inner--long {
width: auto;
}
.case-inner--long {
display: flex;
flex-direction: column;
column-gap: 24px;
}
.case-wrapper .case-inner {
display:flex;
flex-direction: column;
gap: 24px;
padding: 35px 60px 35px 0;
border-radius: 0 100px 100px 0;
width: auto;
}
.partner {
margin: 42px 0 22px;
}
.partner-wrapper {
display: flex;
flex-direction: column;
column-gap: 38px;
}
.partner-list .partner-item {
margin: 0;
}
.partner-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 9px;
column-gap: 16px;
max-width: 100%;
}
.partner-item {
width: auto;
padding: 6px 12px;
min-height: 50px;
height: 100%;
}
.info {
margin-bottom: 75px;
gap: 60px;
}
.info-wrapper {
margin: 0;
width: 100%;
display: block;
}
.info-details .no-margin-top {
margin-bottom: 45px;
}
.info-details h2 {
margin-bottom: 35px;
font-size:24px;
}
.info-wrapper .info-img img {
display: none;
}
.info-details .info-img.mobile {
width: auto;
height: auto;
border-radius: 0;
margin-bottom: 35px;
}
.info-img.mobile img {
width: 100%;
object-fit: cover;
height: 270px;
border-radius: 30px;
max-width: 375px;
display: block;
}
.about {
padding-bottom: 40px;
margin-bottom: 70px;
}
.about-wrapper {
display: flex;
flex-direction: column;
;
}
.about h2 {
font-size: 24px;
line-height: 30px;
}
.about-list {
display:flex;
flex-direction: column;
gap: 47px;
}
.about-item .img-block {
width: 200px;
height: 120px;
}
.bank {
padding: 45px 0 60px;
}
.bank-wrapper, .bank-info {
display: flex;
flex-direction: column;
column-gap: 45px;
}
.bank-list {
width: auto;
gap: 9px;
}
.img-item_out{
height: 257.75px;
}
.bank-item a img {
height: 60px;
border-radius: 15px;
}
.bank-image-mobile {
display: block;
}
.bank-image {
display: none;
}
.contact {
padding-top: 45px;
}
.contact p {
font-size:21px;
}
.section_wrapper{
display:flex;
flex-direction:column;
}
.section_list h3{
font-size:24px;
}
.contact-form textarea, .contact-form.input-block {
/*display: none;*/
}
/*=========================mobile menu start==========================*/
.nav,
.contact-list {
display: none;
}
.burger-menu {
display: block;
position: absolute;
right: 20px;
top: 0px;
z-index: 300;
}
.burger-menu span {
display: block;
width: 20px;
height: 2px;
background-color: #48494D;
margin-bottom: 5px;
}
.burger-menu.active span:first-of-type {
transform: rotate(45deg);
}
.burger-menu.active span:nth-of-type(2) {
display: none;
}
.burger-menu.active span:nth-of-type(3) {
transform: rotate(-45deg);
position: relative;
top: -7px;
}
.mobile-menu.active {
display: flex;
flex-direction: column;
width: 100%;
position: absolute;
background: #EBF3F8;
z-index: 200;
left: 0;
top: 0;
right: 0;
padding: 26px 17px;
padding-bottom:186px;
}
.mobile-menu ul {
flex-direction: column;
row-gap: 35px;
max-width: 100%;
width: 100%;
margin-top: 130px;
}
.mobile-menu ul li {
border-bottom: 1px solid #D8D8D8;
width: 98%;
padding-bottom: 10px;
/* margin-bottom: 35px; */
}
.nav-item a{
color:#1D3557;
font-size:20px;
font-family:Montserat, sans-serif;
font-weight:medium;
}
.mobile-menu ul li a {
text-transform: capitalize;
}
.mobile-menu .hero-btn {
margin-top: 109px;
}
.mobile-menu .nav-contacts p {
display: flex;
flex-direction: column;
}
.mobile-menu .nav-contacts p a {
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 120%;
color: #1D3557;
}
.nav-contacts{
display:flex;
flex-direction:column;
gap:20px;
margin-top:70px;
}
/*=========================mobile menu finish==========================*/
.info-img {
border-radius: 0;
width: auto;
height: auto;
overflow: inherit;
}
.info-img h3 {font-size: 14px;}
.info-img.mobile {
display: block;
}
.ing-description-flex {
display: block;
margin: 10px 0;
}
.ing-description-flex a {
margin: 20px auto;
}
.btn {
color: white;
background-color: #92111C;
font-family: Open Sans, sans-serif;
box-sizing: border-box;
min-height: 50px;
min-width: 250px;
justify-content: center;
font-weight: 400;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;
width: fit-content;
border: 1px solid #92111C;
border-radius: 50px;
transition: 0.3s;
}
.bank-wrapper {
display:flex;
flex-direction: column;
}
.burger-menu {
position: absolute;
}
/* .breadcrumbs {
padding: 0 0px;
} */
.breadcrumbs ul li a {
font-size: 12px;
}
.case-wrapper {
margin-top: 100px;
}
.partner-item img {
width: 100%;
height: auto;
}
.partner-list {
justify-content: flex-start;
}
.product-page .product-list .product-item p {
font-size: 20px;
}
/*.product-page.product-list {*/
/* !*display: flex;*!*/
/* !*justify-content: center;*!*/
/* !*align-items: center;*!*/
/* font-size: 16px;*/
/*}*/
.product-page .product-item .img-block {
width: 335px;
height: 280px;
}
.img-item {
width: 256.27px;
height: 257.75px;
}
/*=================page-products=======================*/
.product-page .product-list {
row-gap: 50px;
}
.product-page .product-list {
display: flex;
flex-direction: column;
gap: 45px;
align-items: center;
}
.product-page.product-item {
display: flex;
justify-content: center;
}
.image_left-inner{
display:flex;
flex-direction:column;
}
.images_servis_three{
display:flex;
flex-direction:column;
}
.images_three_wrapper{
display:flex;
flex-direction:column;
gap:28px;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.vidi_remonta_paragraphs{
display:grid;
grid-template-columns:105px 207px;
gap:22px;
}
.vidi_remonta_paragraphs--hide{
visibility: hidden;
}
.vidi_remonta_paragraphs{
margin-bottom: 37px;
}
.remont_advantages{
display:grid;
grid-template-columns:119px 200px;
margin-bottom:46px;
gap:15px;
}
.img_left_advantages_wrapper{
display:flex;
flex-direction:column;
}
.images_tow_wrapper{
display:flex;
flex-direction:column;
}
/*
.product-page .product-item .img-block .img-him {
width: 100%;
height: 280px;
} */
.img-him{
width:335px;
height:270px;
}
/*service page start*/
.services-page .services-list {
display: flex;
flex-direction: column;
gap: 45px;
}
.service-page .services-list .services-item .img-block {
width: 100%;
height: 270px;
}
.services-item a p {
font-family: Montserrat, sans-serif;
font-size: 16px;
}
.img-item-serv {
width: 335px;
height: 270px;
}
/*теплообменное оборудование*/
.teploproduct-page {
display: flex;
flex-direction: column;
align-items: center;
}
.all-page-title {
font-size: 24px;
text-align: center;
line-height: 28px;
margin-bottom: 30px;
padding: 0;
}
.container .teploproduct-page-wrapper {
display: flex;
flex-direction: column;
align-items:center;
/* padding: 0 20px; */
gap: 28px;
margin-top:30px;
}
.teploproduct-page-wrapper p {
margin: 0;
line-height: 22px;
}
.product-advantages {
margin-bottom: 42px;
}
.product-advantages li {
font-family: "Open Sans", sans-serif;
}
.btn-upload-wrapper {
padding-right: 20px;
max-width: 100%;
/*width: 100%;*/
height: 110px;
min-height: 110px;
display: flex;
margin: 0 auto;
font-size:20px;
}
.teploproduct-item p {
font-size: 22px;
}
.btn-upload-wrapper img {
height: 55px;
width: auto;
}
.teploproduct-item {
display: flex;
flex-direction: column;
align-items: center;
}
.teploproduct-image {
/* width: fit-content;
height: 150px; */
display: flex;
margin: 0 auto;
}
.btn-upload-wrapper .three-lines{
font-size:14px;
}
.teplorashifrovka-wrapper .teplorashifrovka-list {
/*display: flex;*/
/*flex-direction: column;*/
/*margin-top: 40px;*/
display: none;
}
/*#teplorashifrovka-wrapper-mobile{*/
/* display: block;*/
/*}*/
/*.teplorashifrovka-list-mobile{*/
/* display:flex ;*/
/* flex-direction: column;*/
/*}*/
/*.teplorashifrovka-item-mobile{*/
/* display: flex;*/
/* flex-direction: column;*/
/*}*/
/*.teplorashifrovka-title{*/
/* display: flex;*/
/* flex-direction: row;*/
/* align-items: center;*/
/*}*/
.teplo-img {
width: 60px;
height: 60px;
}
.teploproduct-image{
/* margin-bottom:40px; */
}
.container .teploproduct-list {
display: flex;
flex-direction: column;
gap: 40px;
}
.teploproduct-list .teploproduct-item {
width: auto;
}
.teploproduct-canal-list {
padding: 0 20px;
}
.teploproduct-canal-item img{
margin-bottom:0;
}
.img-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #ECE7E3;
border-radius: 44px;
}
.download-documents .form__item__docs {
gap: 22px;
}
.form__item__docs .file__item {
display: grid;
grid-template-columns:repeat(2, 160px);
align-items: center;
gap: 0;
justify-content: space-around;
}
.form__item__docs .file__item label {
width: 100%;
}
.teploproduct-page .podbor-forma {
width: 100%;
padding: 0;
}
/*Воздухоохладители*/
.gradirni-img-list {
flex-direction: column;
}
#form__item__gradirni{
display: flex;
flex-direction: column;
gap: 16px;
}
/*Сепарационное оборудование*/
.sep-info{
display: flex;
flex-direction: column;
}
.container.sep-info-container{
display: flex;
flex-direction: column;
}
.teploproduct-page-wrapper.sep{
display: flex;
flex-direction: column;
}
.teploproduct-page-wrapper.buttons{
gap:20px ;
}
.sep-img{
margin-top: 80px;
}
.sep-img-items{
display: flex;
flex-direction: column;
margin-top: 80px;
}
.list{
display:flex;
flex-direction:column;
gap:32px;
}
.btn-container.desktop{
display: none;
}
.btn-container{
/* margin-top: 20px; */
}
/*----------------------------мембранные баки ---------------*/
.button-text {
font-family: Montserrat, sans-serif;
font-weight: 500;
color: #1D3557;
font-size: 20px;
line-height: 120%;
display: flex;
text-align: left;
justify-content: start;
text-wrap: balance;
}
.membrani-wrapper{
display: flex;
flex-direction: column;
}
.preimushestva-wrapper{
display: flex;
flex-direction: column;
}
.btn-upload-wrapper.long-btn{
padding-right: 0;
max-width: 100%;
width: 100%;
height: 110px;
min-height: 110px;
display: flex;
/* margin: 0 auto; */
padding-left:40px;
}
.membrbaki-discription{
display: flex;
flex-direction: column;
}
.btn-upload-wrapper.mobile{
width: 100%;
}
.vodopodgotovka-info{
display: flex;
flex-direction: column;
}
/*----------------------------------зра и части трубопровода--------------*/
.truborovod-wrapper{
display: flex;
flex-direction: column;
}
.truboprovod-list{
gap:30px;
}
.zra-img-list{
display: flex;
flex-direction: column;
gap: 32px;
}
/*-------------------------------him reagenti page ---------------------------------*/
.reagenti-list{
display: grid;
grid-template-columns: repeat(1,1fr);
gap:40px 32px;
justify-items: center;
margin-bottom: 70px;
}
.proizvodstvo{
display: flex;
flex-direction: column;
}
.zacaz-list {
display: grid;
gap: 32px;
grid-template-columns: repeat(1,1fr);
}
.zacaz-item p{
padding-bottom:27px ;
}
/*-----------------------------service----------------------------*/
/*--------------------------servis-teploobmen page-------------------------*/
.service-teploproduct-block{
display: flex;
flex-direction: column;
}
.service-block-img{
display: flex;
flex-direction: column;
}
/*------------------------------сервис-сепарационное оборудование----------------------------*/
.service-spec{
display: flex;
flex-direction: column;
margin-bottom: 80px;
}
/*-------------------------сервис и запасные части насосного оборудовани------------------------*/
.block-img{
display: flex;
flex-direction: column;
}
.service-preimushestva {
margin-top: 165px;
margin-bottom: 0;
}
.service-page-nasosi{
gap:30px;
}
.nasosi{
display: flex;
flex-direction: column;
}
.nasosi-list.mobile{
display: flex;
flex-direction: column;
}
.nasosi-automatic{
display:flex;
flex-direction:column;
}
.nasosi-description{
display:flex;
flex-direction: column;
gap: 28px;
}
/*--------------------------сервис Nalco----------------------------*/
.nalco-deyat{
margin-top: 350px;
}
.nalco-deyat-list{
display: grid;
grid-template-columns: 1fr;
gap: 40px;
margin-top: 20px;
}
/*-----------------------------------решения------------------------------*/
.solutions-list {
display: grid;
grid-template-columns: 1fr ;
row-gap: 50px;
margin-bottom: 100px;
}
.solution-link {
display: flex;
}
/*-------------------------решения-импортозамещение----------------------------*/
.privlechenie {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 100px;
}
.reverce-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 55px;
column-gap: 20px;
}
/*-------------------------котельные установки----------------------------*/
.ustanovki-lists {
display: flex;
justify-content: start;
gap: 30px;
flex-direction: column;
}
.fakti {
display: flex;
gap: 20px;
margin-bottom: 40px;
flex-direction: column;
}
/*-------------------------------------page-ingineering------------*/
.ing-description {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
align-items: center;
margin-bottom: 90px;
justify-content: center;
}
.proectirovanie-list {
display: grid;
grid-template-columns: repeat(1,1fr);
row-gap: 25px;
column-gap: 25px;
}
/*------------------------------------page-reingineering-----------*/
.reing-images-content {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
justify-content: center;
}
.reing-opisanie1 {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 70px;
}
.reing-opisanie3 {
display: flex;
flex-direction: column;
gap: 30px;
margin-bottom: 90px;
}
.reing-opisanie4 {
display: grid;
grid-template-columns: 1fr;
gap: 80px;
margin-bottom: 40px;
}
.form__input__radio .wpcf7-list-item {
margin-left: 5px;
width: max-content;
}
/*.container .form__body {*/
/* width: 100%;*/
/*}*/
/*.form__body .desktop-only {*/
/* display: none;*/
/*}*/
/*.form__item .form__mobile-only {*/
/* font-size: 14px;*/
/* margin-bottom: 14px;*/
/* font-weight: 600;*/
/* display: block;*/
/*}*/
/*.form__body .form__submit {*/
/* display: flex;*/
/* gap: 22px;*/
/* flex-direction: column;*/
/* margin: 0;*/
/*}*/
/*.form__body .form__item {*/
/* gap: 16px;*/
/* grid-template-columns: 1fr 1fr;*/
/*}*/
/*.form__item .form__item-title {*/
/* grid-column: span 2;*/
/* max-width: 280px;*/
/*}*/
/*label .form__input {*/
/* margin: 0;*/
/* width: 160px;*/
/*}*/
/*.form__item .form__label-primechanie {*/
/* grid-column: span 2;*/
/*}*/
/*.form__mobile-only {*/
/* display: block;*/
/*}*/
/*label .form__input-primechanie {*/
/* width: 100%;*/
/*}*/
/*.form__item__radio {*/
/* display: flex;*/
/* flex-direction: column;*/
/* gap: 20px;*/
/*}*/
/*.column__title{*/
/* display: none;*/
/*}*/
/*.form__input__radio{*/
/* margin-left: -428px;*/
/* margin-bottom: -37px;*/
/*}*/
/*.form__item__radio label{*/
/* margin-left: 20px;*/
/*}*/
/*.podbor-header{*/
/* padding: 0 20px;*/
/*}*/
/*.podbor-header h3{*/
/* display: flex;*/
/* align-self: center;*/
/*}*/
/* .stoimosti-banner {
background-color: #DFEBF3;
padding-bottom: 60px;
padding-top: 43px;
align-items: start;
padding-left: 50px;
padding-right: 50px;
} */
/*.stoimosti-list {*/
/* display: flex;*/
/* flex-direction: column;*/
/*}*/
/*.stoimosti-title {*/
/* margin: 0 auto;*/
/*}*/
/*.stoimosti-item {*/
/* display: flex;*/
/* flex-direction: column;*/
/* margin-top: 50px;*/
/*}*/
/*.stoimosti-item h5 {*/
/* margin-top: 21px;*/
/* margin-bottom: 10px;*/
/*}*/
/*.stoimosti-item p {*/
/* margin: 0;*/
/*}*/
/*.stoimosti-img {*/
/* background-color: #FFFFFF;*/
/* border-radius: 30px;*/
/* width: 202px;*/
/* height: 122px;*/
/* display: flex;*/
/* justify-content: center;*/
/* align-items: center;*/
/*}*/
/*Онлайн подбор форма*/
/*.podbor-forma {*/
/* padding: 0 19px;*/
/*}*/
/*.form__label {*/
/* font-family: Open Sans, sans-serif;*/
/* font-weight: 600;*/
/* font-size: 18px;*/
/* color: #1D3557;*/
/*}*/
/*.form__input {*/
/* width: 160px;*/
/* height: 45px;*/
/* border: 1px solid #A3A3A3;*/
/* border-radius: 20px;*/
/* color: #A3A3A3;*/
/* background: #FFFCFC;*/
/* box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);*/
/* margin-right: 16px;*/
/* padding-left: 16px;*/
/*}*/
/*.form__body .form__item {*/
/* grid-template-columns: 1fr;*/
/*}*/
/*.form__title__labels {*/
/* margin-top: 16px;*/
/* margin-bottom: 14px;*/
/* font-family: Open Sans, sans-serif;*/
/* font-weight: 600;*/
/* font-size: 14px;*/
/* display: flex;*/
/* gap: 49px;*/
/*}*/
/*#primechanie__item {*/
/* display: flex;*/
/* flex-direction: column;*/
/* gap: 21px;*/
/* margin-bottom: 113px;*/
/*}*/
/*.form__label-primechanie {*/
/* font-family: Open Sans, sans-serif;*/
/* font-weight: 600;*/
/* font-size: 18px;*/
/* color: #1D3557;*/
/*}*/
/*.form__input-primechanie {*/
/* width: 335px;*/
/* height: 150px;*/
/* border-radius: 20px;*/
/* border: 1px solid #A3A3A3;*/
/* box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);*/
/* background: #FFFCFC;*/
/*}*/
/*.input_placeholder {*/
/* font-family: 'Open Sans', sans-serif;*/
/* font-style: normal;*/
/* font-weight: 400;*/
/* font-size: 14px;*/
/* line-height: 120%;*/
/* color: #A3A3A3;*/
/* margin-left: -287px;*/
/* margin-bottom: 65px;*/
/*}*/
/*#form__item--desktop {*/
/* display: none;*/
/*}*/
/*#form__input--mobile {*/
/* margin-top: 20px;*/
/* width: 257px;*/
/* height: 45px;*/
/*}*/
/*.forma__title {*/
/* font-size: 23px;*/
/* text-align: center;*/
/*}*/
/*#submit__btn {*/
/* width: 277px;*/
/* height: 50px;*/
/* font-family: Open Sans, sans-serif;*/
/* box-sizing: border-box;*/
/* min-height: 50px;*/
/* min-width: 250px;*/
/* justify-content: center;*/
/* font-weight: 400;*/
/* font-size: 16px;*/
/* line-height: 22px;*/
/* display: flex;*/
/* align-items: center;*/
/* text-align: center;*/
/* color: #92111C;*/
/* background: transparent;*/
/* border: 1px solid #92111C;*/
/* border-radius: 50px;*/
/* transition: 0.3s;*/
/*}*/
/*#submit__btn:hover {*/
/* background-color: #92111C;*/
/* color: white;*/
/* transition: 0.3s;*/
/*}*/
/*#input__submit {*/
/* width: 277px;*/
/* height: 50px;*/
/* border-radius: 30px;*/
/*}*/
/*.form__body .download-documents {*/
/* margin: 0;*/
/*}*/
/*.file__item__docs .file__item {*/
/* display: grid;*/
/* grid-template-columns:repeat(2, 160px);*/
/* align-items: center;*/
/* justify-content: space-around;*/
/*}*/
/*.file__input-download {*/
/* font-family: "Open Sans", sans-serif;*/
/* font-weight: 400;*/
/* font-size: 14px;*/
/* display: flex;*/
/* width: 159px;*/
/* height: 35px;*/
/* box-sizing: border-box;*/
/* justify-content: center;*/
/* align-items: center;*/
/* border-radius: 50px;*/
/* border: 1px solid #92111C;*/
/* background-color: transparent;*/
/* color: #92111C;*/
/* cursor: pointer;*/
/*}*/
/*#input_placeholder {*/
/* position: absolute;*/
/*}*/
.bank-item {
height: 60px;
border-radius: 15px;
}
.reing-opisanie-item--urez {
display: grid;
grid-template-columns: 0.8fr 1fr;
margin-bottom: 9px;
margin-bottom: 24px;
}
.contact-bg {
background-size: 95%;
}
.list_order{
display: flex;
gap: 15px;
flex-direction: column;
list-style-type: disc;
margin-left: 18px;
}
.contact-wrapper {
/* padding: 0 25px; */
margin-bottom: 70px;
}
.contact-form{
/*max-width: 257px;*/
}
.contact-form .input-block{
/* display: none;*/
}
.contact-button.dark {
align-self: start;
color: #FFFCFC;
background: #92111C;
display: flex;
justify-content: center;
}
.contact-button.light {
display: flex;
align-items: center;
justify-content: start;
padding-left: 20px;
background: #FFFFFF;
border: 1px solid #A3A3A3;
color: #2B2B2B;
}
.contacts-block p{
margin:0;
}
.contacts-about-wrapper {
grid-template-columns: 1fr;
row-gap: 38px;
}
.page-about-description h1 {
margin: 0;
}
.adres {
margin-left: 0;
}
.contacts h3 {
margin: 0;
}
.contacts-mobile-margin {
margin-bottom: 25px;
}
.adres h3 {
margin: 0;
}
.contacts-about-wrapper iframe {
width: 100%;
}
/*
.footer {
padding: 45px 0 65px;
} */
.footer-wrapper{
display:flex;
gap: 35px;
flex-direction: column;
padding-top:43px;
padding-bottom:64px;
}
.menu-list {
margin-right:102px;
}
#footer-menu{
display: flex;
flex-direction: row;
}
.footer-mail{
margin: 0;
}
#teplorashifrovka-wrapper-mobile{
display: flex;
}
#teplorashifrovka-wrapper-mobile{
display: block;
margin-bottom:80px;
}
.teplorashifrovka-list-mobile{
display:flex ;
flex-direction: column;
}
.teplorashifrovka-item-mobile{
display: flex;
flex-direction: column;
}
.teplorashifrovka-title{
display: flex;
flex-direction: row;
align-items: center;
}
.teploproduct-canal-list{
display: flex;
flex-direction: column;
gap:40px;
margin-top:35px;
}
/*---------------------------------form-mobile-------------------*/
.container .form__body {
width: 100%;
}
.form__body .desktop-only {
display: none;
}
.form__item .form__mobile-only {
font-size: 14px;
margin-bottom: 14px;
font-weight: 600;
display: block;
}
.form__body .form__submit {
display: flex;
gap: 22px;
flex-direction: column;
/* margin: 0 0 100px; */
margin-top: 50px;
}
.wpcf7-form-control.wpcf7-radio.form__input__radio {
margin-bottom: 27px;
}
.form__body .form__item {
gap: 16px;
grid-template-columns: 1fr 1fr;
}
.form__item .form__item-title {
grid-column: span 2;
max-width: 280px;
}
label .form__input {
margin: 0;
width: 160px;
}
.form__item .form__label-primechanie {
grid-column: span 2;
}
.form__mobile-only {
display: block;
}
label .form__input-primechanie {
width: 100%;
}
.form__item__radio {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: center;
margin-bottom: 30px;
/*margin-left: -26px;*/
}
.column__title{
display: none;
}
.form__input__radio{
margin-left: -7px;
margin-bottom: -37px;
}
/* .form__item__radio label{
margin-left: 20px;
} */
.podbor-header{
/*padding: 0 20px;*/
margin-top: 80px;
}
.podbor-header h3{
display: flex;
align-self: center;
}
.stoimosti-banner {
background-color: #DFEBF3;
align-items: start;
}
.stoimosti-list {
display: flex;
flex-direction: column;
gap:50px;
padding-bottom:58px;
}
.stoimosti-title {
/* margin: 0 auto; */
display:flex;
justify-content:center;
padding-top:43px;
font-size:20px;
padding-bottom:37px;
}
.stoimosti-item {
display: flex;
flex-direction: column;
}
.stoimosti-item h5 {
margin-top: 21px;
margin-bottom: 10px;
}
.stoimosti-item p {
margin: 0;
}
.stoimosti-img {
background-color: #FFFFFF;
border-radius: 30px;
width: 202px;
height: 122px;
display: flex;
justify-content: center;
align-items: center;
}
.podbor-forma {
/* padding: 0 19px; */
}
.form__label {
font-family: Open Sans, sans-serif;
font-weight: 600;
font-size: 18px;
color: #1D3557;
}
/*.form__input {*/
/* width: 160px;*/
/* height: 45px;*/
/* border: 1px solid #A3A3A3;*/
/* border-radius: 20px;*/
/* color: #A3A3A3;*/
/* background: #FFFCFC;*/
/* box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);*/
/* margin-right: 16px;*/
/* padding-left: 16px;*/
/*}*/
.form__body .form__item {
grid-template-columns: 1fr;
}
#form__item__gradirni{
display: flex;
align-items: flex-start;
}
.form__title__labels {
margin-top: 16px;
margin-bottom: 14px;
font-family: Open Sans, sans-serif;
font-weight: 600;
font-size: 14px;
display: flex;
gap: 49px;
}
#primechanie__item {
display: flex;
flex-direction: column;
gap: 21px;
margin-bottom: 113px;
}
.form__label-primechanie {
font-family: Open Sans, sans-serif;
font-weight: 600;
font-size: 18px;
color: #1D3557;
}
.form__input-primechanie {
width: 335px;
height: 150px;
border-radius: 20px;
border: 1px solid #A3A3A3;
box-shadow: 0 4px 60px rgba(235, 228, 220, 0.3);
background: #FFFCFC;
}
.input_placeholder {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 120%;
color: #A3A3A3;
margin-left: 17px;
margin-bottom: 65px;
}
#form__item--desktop {
display: none;
}
#form__input--mobile {
margin-top: 20px;
width: 257px;
height: 45px;
}
.forma__title {
font-size: 23px;
text-align: center;
}
#submit__btn {
width: 277px;
height: 50px;
font-family: Open Sans, sans-serif;
box-sizing: border-box;
min-height: 50px;
min-width: 250px;
justify-content: center;
font-weight: 400;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;
color: #92111C;
background: transparent;
border: 1px solid #92111C;
border-radius: 50px;
transition: 0.3s;
}
#submit__btn:hover {
background-color: #92111C;
color: white;
transition: 0.3s;
}
#input__submit {
width: 277px;
height: 50px;
border-radius: 30px;
}
.form__body .download-documents {
margin: 0;
}
.file__item__docs .file__item {
display: grid;
grid-template-columns:repeat(2, 160px);
align-items: center;
justify-content: space-around;
}
.file__input-download {
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
display: flex;
width: 159px;
height: 35px;
box-sizing: border-box;
justify-content: center;
align-items: center;
border-radius: 50px;
border: 1px solid #92111C;
background-color: transparent;
color: #92111C;
cursor: pointer;
}
#input_placeholder {
position: absolute;
}
.section-img{
width: 100%;
height: fit-content;
}
.form__submit{
display:flex;
flex-direction:column;
}
.wpcf7-form-control.wpcf7-text{
width:160px;
}
.wpcf7-form-control.wpcf7-textarea{
width:335px;
height:150px;
}
.teplorashifrovka{
/* margin-bottom: 40px; */
}
#teplorashifrovka-wrapper-mobile{
display: flex;
}
#teplorashifrovka-wrapper-mobile{
display: block;
}
.teplorashifrovka-list-mobile{
display:flex ;
flex-direction: column;
}
.teplorashifrovka-item-mobile{
display: flex;
flex-direction: column;
}
.teplorashifrovka-title{
display: flex;
flex-direction: row;
align-items: center;
}
.teploproduct-canal-list{
display: flex;
flex-direction: column;
gap:40px;
margin-top:35px;
align-items:start;
padding:0;
}
.teploproduct-canal-item{
display: flex;
flex-direction: column;
gap: 16px;
}
.wpcf7-form-control.wpcf7-text.custom_input {
width:277px;
}
.wpcf7-form-control .wpcf7-radio .form__input__radio.column{
display: flex;
margin-left: 106px;
margin-bottom: 30px;
flex-direction: column;
}
.wpcf7-list-item{
display:flex;
gap:11px;
}
.wpcf7-form-control.wpcf7-radio.form__input__radio .column{
display:flex;
flex-direction:column;
align-items:flex-start;
}
#custom_input_phone, #custom_input_name,#custom_button {
width:277px;
}
.wpcf7-form-control.wpcf7-radio.form__input__radio{
display:flex;
flex-direction:column;
text-wrap: nowrap;
}
.wpcf7 .form .wpcf7-response-output{
position: absolute;
/* width: 100%; */
/* margin: 2em 0.5em 1em; */
padding: -1px;
/* width: 160px; */
/* border-radius: 30px; */
margin-top: 58px;
background-color: #92111C;
font-family: Montserrat,sans-serif;
font-size: 26px;
color: white;
}
.form__title_doks{
font-size:23px;
width:400px;
}
.wpcf7-form-control.wpcf7-checkbox.checkbox{
margin-top: 15px;
}
.checkbox_mobile{
margin-top: -234px;
margin-left: -20px;
width: 377px;
}
.custom-response-output-vvs,
.wpcf7-response-output{
/* Здесь вы можете задать стили для вашего кастомного класса */
/*margin-top: 242px;
margin-left: 7px;
margin-top: 16px;
margin-left: -21px;
background-color: #92111C;
width: 396px;
padding: 5px 26px;
font-size: 16px;
color: white;
font-family: Montserat, sans-serif;
text-wrap: wrap;*/
font-size: 20px!important;
}
.form_span{
position: absolute;
margin-left: 43px;
margin-top: 368px;
}
.wpcf7-form input[type="checkbox"] {
/* position: absolute;
/* opacity: 0; */
/* cursor: pointer;
top: 166px;*/
}
.wpcf7-not-valid-tip {
position: absolute;
color: #dc3232;
font-size: 1em;
font-weight: normal;
display: block;
text-wrap: nowrap;
padding-left: 104px;
margin-top: -10px;
}
span .wpcf7-not-valid-tip {
font-family: Open Sans, sans-serif;
font-size: 12px;
font-family: Open Sans, sans-serif;
font-size: 12px;
margin-top: 0px;
margin-left: -90px;
}
@media (width: 425px) {
.first-screen--bg{
position: absolute;
top: -500px;
}
}
.first-screen--bg{
position: absolute;
top: -450px;
}
}
@media(min-width: 480px) and (max-width: 768px){
.first-screen--bg{
position: absolute;
left: 314px;
/* right: 278px; */
top: -712px;
/* padding-top: 175px; */
border-radius: 500px;
max-width: 59%;
}
.case{
height: fit-content;
margin-top: -121px;
}
.hero-wrapper p{
max-width: 343px;
}
}
@media (max-width: 768px){
.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.custom_textarea,
#footer_name,
#footer_phone{
width: 100%;
}
#footer_name {
margin-bottom: 20px;
margin-top: -2px;
}
.contact-form .input-block {
flex-wrap: wrap;
}
.input-block .wpcf7-form-control-wrap {
width: 100%;
}
.agreement {
position: absolute;
bottom: -55px;
}
}
@media (max-width: 420px) {
.agreement {
bottom: -70px;
}
span .wpcf7-not-valid-tip {
margin-top: 0;
}
}
.wpcf7-radio input {
border: 1px solid #A3A3A3;
appearance: none;
border-radius: 50px;
cursor: pointer;
position: relative;
}
.wpcf7-radio input:checked {
background-color:rgba(29, 53, 87, 1);
}
input[type=radio]:before {
border-radius: 50px;
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 3px solid #ffffff;
width: 18px;
height: 18px;
margin: auto;
box-sizing: border-box;
z-index: 0;
}
.mt-50 {margin: 50px 0;}
.nasosi{
display: flex;
flex-direction: column;
gap: 45px;
margin-bottom: 46px;
}
.nasosi-description {
display: flex;
flex-direction: row;
}
.nasosi-list {
display: flex;
flex-direction: row;
gap: 31px;
align-items: center;
}
.nasosi h2 {
font-size: 26px;
margin: 0;
text-align: center;
}
.nasosi-text{
margin-bottom: 25px;
}
.nasosi-automatic {
display: flex;
gap: 30px;
}
.nasosi-automatic img {
object-fit: contain;
}
.nasosi-automatic-inner {
display: flex;
flex-direction: column;
gap: 45px;
}
.nasosi-automatic-text {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (max-width: 1024px) {
.nasosi{
display: flex;
flex-direction: column;
}
.nasosi-list.mobile{
display: flex;
flex-direction: column;
}
.nasosi-automatic{
display:flex;
flex-direction:column;
}
.nasosi-description{
display:flex;
flex-direction: column;
gap: 28px;
}
}
.service-teploproduct-block{
display: flex;
gap: 51px;
margin-bottom: 40px;
margin-top: 50px;
align-items: center;
}
.service-teploproduct-text {
display: flex;
flex-direction: column;
}
.service-teploproduct-text li{
padding: 0;
}
.service-teploproduct-description {
display: flex;
flex-direction: column;
gap: 30px;
margin-bottom: 82px;
}
.table_title{
max-width: 735px;
display: grid;
grid-template-columns: 1fr 2fr;
row-gap: 35px;
margin-bottom: 16px;
}
.table_wrapper{
display: grid;
grid-template-columns: 0.55fr 2fr;
}
.list_order{
display: flex;
flex-direction: column;
}
.list_order {
list-style-type: disc;
}
.table h4 {
margin: 0;
font-size: 18px;
line-height: 25px;
font-weight: 600;
}
.table-title {
font-weight: 600;
}
.service-block-img{
display: flex;
margin-bottom:64px;
gap: 30px;
}
.service-block-img img {
height: fit-content;
flex-grow: 1;
}
/* Hero главной страницы (ACF layout hero_lead) */
.hl-hero {
--hl-navy: #1D3557;
--hl-accent: #92111C;
--hl-on-dark: #dfe6f2;
--hl-border: #d7dde7;
--hl-field-bg: #f8fafc;
--hl-muted: #5a6472;
font-family: 'Open Sans', sans-serif;
background: linear-gradient(120deg, #1D3557 0%, #25456e 55%, #2f5488 100%);
padding: 56px 0 60px;
color: #fff;
}
/* Фото-подложка: лежит под градиентом, поэтому контент остаётся контрастным. */
.hl-hero--bg {
position: relative;
isolation: isolate;
}
.hl-hero--bg::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--hl-bg-image);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.22;
mix-blend-mode: luminosity;
pointer-events: none;
}
.hl-hero *,
.hl-hero *::before,
.hl-hero *::after {
box-sizing: border-box;
}
.hl-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
display: flex;
gap: 44px;
align-items: flex-start;
}
.hl-left {
flex: 1.25;
min-width: 0;
}
.hl-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #fff;
font-size: 13px;
line-height: 18px;
letter-spacing: 0.4px;
text-transform: uppercase;
padding: 7px 14px;
border-radius: 4px;
margin-bottom: 20px;
}
.hl-hero .hl-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 40px;
line-height: 50px;
color: #fff;
margin: 0 0 18px;
max-width: none;
/* main.css задаёт h1 { text-align:center; margin-bottom:70px } глобально */
text-align: left;
}
.hl-hero .hl-lead {
font-size: 17px;
line-height: 27px;
color: var(--hl-on-dark);
margin: 0 0 12px;
max-width: none;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
.hl-hero .hl-lead:last-of-type {
margin-bottom: 26px;
}
.hl-facts {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
.hl-fact {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 4px;
padding: 10px 14px;
font-size: 14px;
line-height: 20px;
color: #fff;
min-width: 0;
}
.hl-fact__ico {
flex: 0 0 auto;
}
/* Без картинки последним блоком остаётся CTA — лишний отступ снизу не нужен. */
.hl-left > *:last-child {
margin-bottom: 0;
}
.hl-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-bottom: 26px;
}
.hl-hero .hl-btn {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 22px;
text-align: center;
text-decoration: none;
padding: 14px 32px;
border-radius: 4px;
border: 1px solid transparent;
transition: background-color .2s, color .2s, border-color .2s;
}
.hl-hero .hl-btn--primary {
background: var(--hl-accent);
color: #fff;
}
.hl-hero .hl-btn--primary:hover,
.hl-hero .hl-btn--primary:focus {
background: #7a0e17;
color: #fff;
}
.hl-hero .hl-btn--ghost {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
}
.hl-hero .hl-btn--ghost:hover,
.hl-hero .hl-btn--ghost:focus {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.hl-hero .hl-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* forms.css гасит фокус глобально: input:focus-visible { outline: none !important } */
.hl-card .wpcf7-form-control:focus-visible {
outline: 2px solid var(--hl-navy) !important;
outline-offset: 1px;
}
/* На десктопе кнопка «Получить расчёт» не нужна — форма и так на экране. */
.hl-hero .hl-btn--primary {
display: none;
}
/* --- карточка с формой --- */
/* Обёртка модалки на десктопе прозрачна для лейаута: карточка остаётся
flex-элементом .hl-inner. Мобильные правила — в медиазапросе ниже. */
.hl-form-modal {
display: contents;
}
.hl-form-modal__backdrop,
.hl-card__close {
display: none;
}
.hl-card {
flex: 0 0 400px;
background: #fff;
border-radius: 6px;
padding: 28px;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
color: var(--hl-navy);
scroll-margin-top: 24px;
}
.hl-card__title {
font-family: Montserrat, sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 30px;
color: var(--hl-navy);
margin-bottom: 8px;
}
.hl-card__sub {
font-size: 14px;
line-height: 21px;
color: var(--hl-muted);
margin-bottom: 20px;
}
.hl-card__warning {
font-size: 14px;
line-height: 20px;
color: var(--hl-accent);
}
/* Подсказка под полем файла — обычный текст, без рамок и подложки. */
.hl-file-note {
margin: -8px 0 18px;
}
.hl-file-note__title {
font-size: 12px;
font-weight: 600;
line-height: 18px;
color: var(--hl-navy);
}
.hl-file-note__text {
font-size: 12px;
line-height: 18px;
color: #7a828f;
}
.hl-note {
font-size: 11px;
line-height: 17px;
color: #8a93a0;
margin-top: 10px;
}
/* --- поля Contact Form 7 внутри карточки --- */
.hl-card .wpcf7 {
margin: 0;
}
/* forms.css: .wpcf7-form { margin-bottom: 100px } */
.hl-card .wpcf7-form {
margin-bottom: 0;
}
.hl-card .hl-field {
margin-bottom: 14px;
display: block;
}
.hl-card .hl-field__label {
display: block;
font-size: 13px;
line-height: 18px;
color: var(--hl-navy);
font-weight: 600;
margin-bottom: 6px;
}
.hl-card .wpcf7-form-control-wrap {
display: block;
}
.hl-card input[type="text"].wpcf7-form-control,
.hl-card input[type="email"].wpcf7-form-control,
.hl-card input[type="tel"].wpcf7-form-control,
.hl-card textarea.wpcf7-form-control {
width: 100%;
height: 44px;
padding: 0 12px;
border: 1px solid var(--hl-border);
border-radius: 4px;
background: var(--hl-field-bg);
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--hl-navy);
}
.hl-card textarea.wpcf7-form-control {
height: 74px;
padding: 10px 12px;
resize: vertical;
}
.hl-card input.wpcf7-form-control:focus,
.hl-card textarea.wpcf7-form-control:focus {
border-color: var(--hl-navy);
background: #fff;
}
/* forms.css рисует файловое поле красной «таблеткой» 120×35 — в карточке
оно должно выглядеть так же, как остальные поля. */
.hl-card input[type="file"].wpcf7-form-control,
.hl-card .wpcf7-form-control.wpcf7-file {
display: block;
width: 100%;
height: auto;
padding: 8px 10px;
border: 1px solid var(--hl-border);
border-radius: 4px;
background: var(--hl-field-bg);
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 20px;
color: var(--hl-muted);
cursor: pointer;
}
.hl-card input[type="file"].wpcf7-form-control::file-selector-button {
margin-right: 10px;
padding: 6px 12px;
border: 1px solid var(--hl-navy);
border-radius: 4px;
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 18px;
font-weight: 600;
color: var(--hl-navy);
cursor: pointer;
transition: background-color .2s, color .2s;
}
.hl-card input[type="file"].wpcf7-form-control::file-selector-button:hover {
background: var(--hl-navy);
color: #fff;
}
.hl-card .wpcf7-submit,
.hl-card input[type="submit"] {
display: block;
width: 100%;
text-align: center;
background: var(--hl-accent);
color: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 22px;
border: 0;
border-radius: 4px;
padding: 15px 20px;
cursor: pointer;
transition: background-color .2s;
}
.hl-card .wpcf7-submit:hover,
.hl-card input[type="submit"]:hover {
background: #7a0e17;
}
.hl-card .hl-agreement {
margin-bottom: 18px;
}
.hl-card .wpcf7-acceptance,
.hl-card .hl-agreement {
font-size: 12px;
line-height: 18px;
color: var(--hl-muted);
}
/* Чекбокс согласия: forms.css задаёт .wpcf7-list-item{gap:11px},
.wpcf7-list-item input{20px} и label{display:flex} — выравниваем по первой строке. */
.hl-card .wpcf7-acceptance .wpcf7-list-item {
display: block;
gap: 0;
margin: 0;
}
.hl-card .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
}
.hl-card .wpcf7-acceptance input[type="checkbox"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 1px 0 0;
accent-color: var(--hl-accent);
}
.hl-card .wpcf7-acceptance .wpcf7-list-item-label {
display: block;
width: auto;
padding-left: 0;
font-size: 12px;
line-height: 18px;
color: var(--hl-muted);
}
/* forms.css делает подсказки валидации абсолютными и со сдвигами под широкие формы —
в узкой карточке это ломает вёрстку, возвращаем нормальный поток. */
.hl-card .wpcf7-not-valid-tip,
.hl-card span .wpcf7-not-valid-tip {
position: static;
display: block;
width: auto;
padding-left: 0;
margin: 4px 0 0;
font-size: 12px;
line-height: 17px;
color: #dc3232;
white-space: normal;
text-wrap: wrap;
}
/* Общий чекбокс темы (input[type=checkbox] в forms.css) — фиолетовая рамка и
-webkit-appearance:button; внутри карточки возвращаем стандартный вид. */
.hl-card input[type="checkbox"] {
-webkit-appearance: checkbox;
appearance: checkbox;
border: 0;
top: 0;
margin: 0 8px 0 0;
padding: 0;
}
/* forms.css превращает ответ формы в попап на 80vw с position:absolute.
Форма в hero узкая и лежит в карточке — такой попап вылезал бы за экран,
поэтому здесь возвращаем обычное сообщение в потоке. */
.hl-card .wpcf7 form .wpcf7-response-output,
.hl-card .wpcf7 form.init .wpcf7-response-output,
.hl-card .wpcf7 form.sent .wpcf7-response-output,
.hl-card .wpcf7 form.failed .wpcf7-response-output,
.hl-card .wpcf7 form.aborted .wpcf7-response-output,
.hl-card .wpcf7 form.spam .wpcf7-response-output,
.hl-card .wpcf7 form.invalid .wpcf7-response-output,
.hl-card .wpcf7 form.unaccepted .wpcf7-response-output,
.hl-card .wpcf7 form.payment-required .wpcf7-response-output {
position: static;
width: auto;
max-width: none;
min-height: 0;
margin: 14px 0 0;
padding: 10px 12px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 19px;
text-align: left;
color: var(--hl-navy);
background: #fff;
border-radius: 4px;
border-width: 1px;
box-shadow: none;
z-index: auto;
}
/* До ответа блок пустой — показываем его только вместе со статусом формы. */
.hl-card .wpcf7 form .wpcf7-response-output,
.hl-card .wpcf7 form.init .wpcf7-response-output {
display: none;
}
.hl-card .wpcf7 form.sent .wpcf7-response-output,
.hl-card .wpcf7 form.failed .wpcf7-response-output,
.hl-card .wpcf7 form.aborted .wpcf7-response-output,
.hl-card .wpcf7 form.spam .wpcf7-response-output,
.hl-card .wpcf7 form.invalid .wpcf7-response-output,
.hl-card .wpcf7 form.unaccepted .wpcf7-response-output,
.hl-card .wpcf7 form.payment-required .wpcf7-response-output {
display: block;
}
.hl-card .wpcf7-spinner {
margin: 8px auto 0;
}
/* --- адаптив: брейкпоинты темы 1024 / 900 / 768 / 480 --- */
@media (max-width: 1024px) {
.hl-hero {
padding: 40px 0;
}
.hl-inner {
gap: 24px;
}
.hl-hero .hl-title {
font-size: 32px;
line-height: 42px;
}
.hl-card {
flex: 0 0 340px;
padding: 24px 20px;
}
}
@media (max-width: 900px) {
.hl-inner {
flex-direction: column;
align-items: stretch;
gap: 28px;
}
.hl-left {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.hl-badge { order: 1; }
.hl-title { order: 2; }
.hl-lead { order: 3; }
.hl-facts { order: 4; }
.hl-cta { order: 5; }
.hl-hero .hl-lead:last-of-type {
margin-bottom: 20px;
}
/* Мобильная раскладка: форма живёт в модальном окне, на экране — кнопка. */
.hl-hero .hl-btn--primary {
display: inline-block;
}
.hl-form-modal {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
padding: 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.hl-form-modal.is-open {
display: block;
}
.hl-form-modal__backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(15, 27, 45, 0.62);
}
.hl-form-modal .hl-card {
position: relative;
flex: none;
width: 100%;
max-width: 480px;
margin: 0 auto;
padding-top: 44px;
}
.hl-card__close {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 8px;
right: 8px;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--hl-muted);
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.hl-card__close:hover {
background: var(--hl-field-bg);
color: var(--hl-navy);
}
/* Пока модалка открыта, страница под ней не скроллится. */
body.hl-modal-lock {
overflow: hidden;
}
}
@media (max-width: 768px) {
.hl-hero {
padding: 32px 0 36px;
}
.hl-inner {
padding: 0 16px;
}
.hl-hero .hl-title {
font-size: 26px;
line-height: 34px;
}
.hl-hero .hl-lead {
font-size: 15px;
line-height: 24px;
}
.hl-facts {
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.hl-fact {
width: 100%;
align-items: flex-start;
}
.hl-cta {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.hl-hero .hl-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.hl-hero .hl-title {
font-size: 22px;
line-height: 30px;
}
.hl-badge {
font-size: 11px;
line-height: 16px;
letter-spacing: 0.2px;
padding: 6px 10px;
margin-bottom: 16px;
}
.hl-card {
padding: 20px 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.hl-card__title {
font-size: 19px;
line-height: 26px;
}
.hl-file-note__text {
font-size: 11px;
line-height: 16px;
}
}
/* Секция «Подберём оборудование под вашу задачу» (template-parts/blocks/task-picker.php) */
.tp-tasks {
--tp-navy: #1D3557;
--tp-accent: #92111C;
--tp-muted: #4b5563;
--tp-border: #e3e8ef;
--tp-card-bg: #fff;
font-family: 'Open Sans', sans-serif;
background: #fff;
padding: 60px 0;
}
.tp-tasks *,
.tp-tasks *::before,
.tp-tasks *::after {
box-sizing: border-box;
}
.tp-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.tp-tasks .tp-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--tp-navy);
margin: 0 0 12px;
}
.tp-tasks .tp-lead {
font-size: 16px;
line-height: 26px;
color: var(--tp-muted);
margin: 0 0 32px;
max-width: 840px;
}
.tp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
/* main.css: ul { list-style:none; padding:0; margin:0 } — сбрасывать нечего */
}
.tp-card {
display: flex;
flex-direction: column;
background: var(--tp-card-bg);
border: 1px solid var(--tp-border);
border-radius: 6px;
padding: 24px;
}
.tp-card__ico {
font-size: 30px;
line-height: 36px;
margin-bottom: 12px;
}
.tp-tasks .tp-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 19px;
line-height: 26px;
color: var(--tp-navy);
margin: 0 0 10px;
}
.tp-tasks .tp-card__text {
font-size: 15px;
line-height: 24px;
color: var(--tp-muted);
margin: 0 0 20px;
/* текст растягивается, чтобы кнопки в строке стояли на одной линии */
flex: 1;
}
.tp-tasks .tp-card__btn {
display: block;
text-align: center;
background: var(--tp-navy);
/* main.css: a { color:black } */
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
padding: 12px 18px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.tp-tasks .tp-card__btn:hover,
.tp-tasks .tp-card__btn:focus {
background: var(--tp-accent);
color: #fff;
}
@media (max-width: 1024px) {
.tp-tasks {
padding: 48px 0;
}
.tp-grid {
grid-template-columns: repeat(2, 1fr);
}
.tp-tasks .tp-title {
font-size: 26px;
line-height: 34px;
}
}
@media (max-width: 768px) {
.tp-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.tp-card {
padding: 20px;
}
}
@media (max-width: 480px) {
.tp-tasks {
padding: 36px 0;
}
.tp-tasks .tp-title {
font-size: 23px;
line-height: 31px;
}
.tp-tasks .tp-lead {
font-size: 15px;
line-height: 24px;
margin-bottom: 24px;
}
}
/* Секция «Как проходит подбор оборудования» (template-parts/blocks/how-it-works.php) */
.hiw {
--hiw-navy: #1D3557;
--hiw-accent: #92111C;
--hiw-muted: #4b5563;
--hiw-border: #e3e8ef;
--hiw-bg: #f5f7fa;
font-family: 'Open Sans', sans-serif;
background: var(--hiw-bg);
padding: 60px 0;
}
.hiw *,
.hiw *::before,
.hiw *::after {
box-sizing: border-box;
}
.hiw-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.hiw .hiw-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--hiw-navy);
margin: 0 0 12px;
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
text-align: left;
}
.hiw .hiw-lead {
font-size: 16px;
line-height: 26px;
color: var(--hiw-muted);
margin: 0 0 32px;
max-width: 840px;
}
.hiw-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
/* main.css: ul { list-style:none; padding:0; margin:0 }, но ol не сброшен */
list-style: none;
padding: 0;
margin: 0;
}
.hiw-step {
background: #fff;
border: 1px solid var(--hiw-border);
border-radius: 6px;
padding: 24px;
}
.hiw-step__head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.hiw-step__num {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--hiw-navy);
color: #fff;
font-family: Montserrat, sans-serif;
font-size: 19px;
font-weight: 500;
}
.hiw-step__ico {
font-size: 26px;
line-height: 30px;
}
.hiw .hiw-step__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 25px;
color: var(--hiw-navy);
margin: 0 0 10px;
}
.hiw .hiw-step__text {
font-size: 15px;
line-height: 24px;
color: var(--hiw-muted);
margin: 0 0 8px;
}
.hiw .hiw-step__text:last-child {
margin-bottom: 0;
}
.hiw-cta {
text-align: center;
margin-top: 30px;
}
.hiw .hiw-btn {
display: inline-block;
background: var(--hiw-accent);
/* main.css: a { color:black } */
color: #fff;
font-size: 16px;
font-weight: 600;
text-decoration: none;
padding: 15px 36px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.hiw .hiw-btn:hover,
.hiw .hiw-btn:focus {
background: var(--hiw-navy);
color: #fff;
}
@media (max-width: 1024px) {
.hiw {
padding: 48px 0;
}
.hiw-grid {
grid-template-columns: repeat(2, 1fr);
}
.hiw .hiw-title {
font-size: 26px;
line-height: 34px;
}
}
@media (max-width: 768px) {
.hiw-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.hiw-step {
padding: 20px;
}
}
@media (max-width: 480px) {
.hiw {
padding: 36px 0;
}
.hiw .hiw-title {
font-size: 23px;
line-height: 31px;
}
.hiw .hiw-lead {
font-size: 15px;
line-height: 24px;
margin-bottom: 24px;
}
.hiw .hiw-btn {
display: block;
padding: 14px 20px;
}
}
/* Секция «Инженерные решения для предприятий Беларуси» (template-parts/blocks/advantages.php) */
.adv {
--adv-navy: #1D3557;
--adv-accent: #92111C;
--adv-muted: #4b5563;
--adv-bg: #f5f7fa;
font-family: 'Open Sans', sans-serif;
background: #ffffff;
padding: 60px 0;
}
.adv *,
.adv *::before,
.adv *::after {
box-sizing: border-box;
}
.adv-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.adv .adv-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--adv-navy);
margin: 0 0 32px;
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
text-align: left;
}
.adv-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
}
.adv-card {
display: flex;
flex-direction: column;
background: var(--adv-bg);
border-top: 3px solid var(--adv-accent);
border-radius: 4px;
padding: 24px 20px;
}
.adv .adv-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 19px;
line-height: 26px;
color: var(--adv-navy);
margin: 0 0 12px;
/* колонки узкие — не даём последней строке заголовка висеть одним словом */
text-wrap: balance;
hyphens: auto;
}
.adv .adv-card__text {
font-size: 14px;
line-height: 23px;
color: var(--adv-muted);
margin: 0 0 8px;
}
.adv .adv-card__text:last-child {
margin-bottom: 0;
}
.adv .adv-card__link {
/* прижимаем ссылку к низу карточки, чтобы они шли по одной линии */
margin-top: auto;
padding-top: 16px;
font-size: 14px;
font-weight: 600;
/* main.css: a { color:black } */
color: var(--adv-accent);
text-decoration: none;
}
.adv .adv-card__link:hover,
.adv .adv-card__link:focus {
color: var(--adv-navy);
text-decoration: underline;
}
/* Десктоп: карточки идут одним рядом, поэтому выравниваем их построчно —
заголовки, описания и ссылки начинаются на одной высоте во всех карточках.
Без subgrid (старые браузеры) работает флексовый вариант выше: там по одной
линии идут только ссылки, прижатые margin-top:auto. */
@media (min-width: 1025px) {
@supports (grid-template-rows: subgrid) {
.adv-grid {
grid-template-rows: auto auto auto;
}
.adv-card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
/* иначе карточка унаследует row-gap сетки между своими строками */
row-gap: 0;
}
.adv .adv-card__link {
/* в subgrid ссылка уже стоит в своей строке — прижимаем к её низу */
margin-top: 0;
align-self: end;
}
}
}
@media (max-width: 1024px) {
.adv {
padding: 48px 0;
}
.adv-grid {
grid-template-columns: repeat(3, 1fr);
}
.adv .adv-title {
font-size: 26px;
line-height: 34px;
}
}
@media (max-width: 768px) {
.adv-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 480px) {
.adv {
padding: 36px 0;
}
.adv-grid {
grid-template-columns: 1fr;
}
.adv .adv-title {
font-size: 23px;
line-height: 31px;
margin-bottom: 24px;
}
}
/* Модальное окно с формой заявки (template-parts/blocks/lead-modal.php).
Раньше жило внутри секции «Подбор по задаче» — вынесено отдельным блоком,
потому что его открывают кнопки нескольких секций страницы. */
.lm-modal {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
padding: 24px 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.lm-modal.is-open {
display: block;
}
.lm-modal__backdrop {
position: fixed;
inset: 0;
background: rgba(15, 27, 45, 0.62);
}
/* Карточка носит класс .hl-card ради стилей полей CF7 из hero-lead.css.
Переменные там объявлены на .hl-hero — вне hero их нужно продублировать. */
.lm-modal__card {
--hl-navy: #1D3557;
--hl-accent: #92111C;
--hl-border: #d7dde7;
--hl-field-bg: #f8fafc;
--hl-muted: #5a6472;
position: relative;
/* hero-lead.css: .hl-card { flex: 0 0 400px } */
flex: none;
width: 100%;
max-width: 520px;
margin: 0 auto;
padding: 44px 28px 28px;
font-family: 'Open Sans', sans-serif;
}
.lm-modal__task {
display: inline-block;
background: #EBF3F8;
border-left: 3px solid #92111C;
border-radius: 3px;
padding: 8px 12px;
margin-bottom: 14px;
font-size: 13px;
line-height: 20px;
color: #1D3557;
}
.lm-modal__task[hidden] {
display: none;
}
.lm-modal__close {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 8px;
right: 8px;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 4px;
background: transparent;
color: #5a6472;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.lm-modal__close:hover {
background: #f8fafc;
color: #1D3557;
}
/* Пока модалка открыта, страница под ней не скроллится. */
body.lm-modal-lock {
overflow: hidden;
}
@media (max-width: 1024px) {
.lm-modal__card {
/* hero-lead.css: .hl-card { flex: 0 0 340px; padding: 24px 20px } */
padding: 44px 20px 24px;
}
}
/* Секция «Популярные теплообменные решения» (template-parts/blocks/solutions.php) */
.sol {
--sol-navy: #1D3557;
--sol-accent: #92111C;
--sol-muted: #4b5563;
--sol-specs: #5a6472;
--sol-border: #e3e8ef;
font-family: 'Open Sans', sans-serif;
background: #f5f7fa;
padding: 60px 0;
}
.sol *,
.sol *::before,
.sol *::after {
box-sizing: border-box;
}
.sol-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.sol .sol-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--sol-navy);
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
text-align: left;
margin: 0 0 12px;
padding: 0;
}
.sol .sol-subtitle {
font-size: 16px;
line-height: 26px;
color: var(--sol-muted);
max-width: 840px;
margin: 0 0 32px;
}
.sol-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
}
.sol-card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--sol-border);
border-radius: 6px;
overflow: hidden;
}
.sol .sol-card__img {
display: block;
width: 100%;
height: 170px;
object-fit: cover;
}
.sol-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 22px;
}
.sol .sol-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 19px;
line-height: 26px;
color: var(--sol-navy);
margin: 0 0 10px;
}
.sol .sol-card__text {
/* растягиваем описание, чтобы характеристики и кнопки шли по одной линии */
flex: 1;
}
.sol .sol-card__text p {
font-size: 15px;
line-height: 24px;
color: var(--sol-muted);
margin: 0 0 8px;
}
.sol .sol-card__text p:last-child {
margin-bottom: 14px;
}
.sol .sol-card__specs {
font-size: 13px;
line-height: 22px;
color: var(--sol-specs);
border-top: 1px solid #eef1f6;
padding-top: 12px;
margin-bottom: 14px;
}
.sol .sol-card__price {
color: var(--sol-accent);
font-weight: 600;
}
.sol-card__actions {
display: flex;
gap: 10px;
margin-top: auto;
/* кнопки не тянутся по высоте друг под друга */
align-items: flex-start;
/* страховка: если пара длинных подписей не влезла в ряд — переносим кнопку целиком */
flex-wrap: wrap;
}
.sol .sol-btn {
/* ширина по тексту, а не поровну: «Запросить стоимость» в узкой колонке
не помещалось в половину карточки и ломалось на две строки */
flex: 0 0 auto;
text-align: center;
font-size: 13px;
font-weight: 600;
line-height: 20px;
/* main.css: a { color:black } */
color: #ffffff;
text-decoration: none;
padding: 10px 14px;
border-radius: 4px;
white-space: nowrap;
}
.sol .sol-btn--ghost {
background: var(--sol-navy);
}
.sol .sol-btn--accent {
background: var(--sol-accent);
}
.sol .sol-btn:hover,
.sol .sol-btn:focus {
color: #ffffff;
opacity: .88;
}
@media (max-width: 1024px) {
.sol {
padding: 48px 0;
}
.sol-grid {
grid-template-columns: repeat(2, 1fr);
}
.sol .sol-title {
font-size: 26px;
line-height: 34px;
}
}
@media (max-width: 768px) {
.sol-grid {
gap: 16px;
}
.sol-card__body {
padding: 18px;
}
/* колонки узкие — в ряд две подписи уже не помещаются */
.sol-card__actions {
flex-direction: column;
/* в колонку align-items управляет шириной — кнопки во всю карточку */
align-items: stretch;
}
}
@media (max-width: 480px) {
.sol {
padding: 36px 0;
}
.sol-grid {
grid-template-columns: 1fr;
}
.sol .sol-title {
font-size: 23px;
line-height: 31px;
}
.sol .sol-subtitle {
font-size: 15px;
line-height: 24px;
margin-bottom: 24px;
}
}
/* Секция «Решения, реализованные на предприятиях» (template-parts/blocks/cases.php) */
.cs {
--cs-navy: #1D3557;
--cs-accent: #92111C;
--cs-muted: #4b5563;
--cs-badge: #5a6472;
--cs-border: #e3e8ef;
font-family: 'Open Sans', sans-serif;
background: #ffffff;
padding: 60px 0;
}
.cs *,
.cs *::before,
.cs *::after {
box-sizing: border-box;
}
.cs-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.cs .cs-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--cs-navy);
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
text-align: left;
margin: 0 0 32px;
padding: 0;
}
.cs-list {
list-style: none;
padding: 0;
margin: 0;
}
.cs-card {
display: flex;
border: 1px solid var(--cs-border);
border-radius: 6px;
overflow: hidden;
}
.cs-card + .cs-card {
margin-top: 20px;
}
.cs-card__media {
flex: 0 0 46%;
}
.cs .cs-card__img {
display: block;
width: 100%;
height: 100%;
min-height: 380px;
object-fit: cover;
}
.cs-card__body {
flex: 1;
padding: 32px 34px;
}
.cs .cs-card__badge {
display: inline-block;
background: #f5f7fa;
border: 1px solid var(--cs-border);
border-radius: 3px;
padding: 6px 12px;
font-size: 13px;
line-height: 18px;
color: var(--cs-badge);
margin-bottom: 16px;
}
.cs .cs-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 33px;
color: var(--cs-navy);
margin: 0 0 20px;
}
.cs .cs-card__row {
font-size: 15px;
line-height: 24px;
color: var(--cs-muted);
margin: 0 0 14px;
}
.cs .cs-card__label {
font-weight: 600;
color: var(--cs-navy);
}
.cs-card__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.cs .cs-btn {
flex: 0 0 auto;
text-align: center;
font-size: 15px;
font-weight: 600;
line-height: 20px;
text-decoration: none;
padding: 13px 26px;
border-radius: 4px;
border: 1px solid transparent;
}
.cs .cs-btn--solid {
background: var(--cs-navy);
/* main.css: a { color:black } */
color: #ffffff;
}
.cs .cs-btn--outline {
background: #ffffff;
color: var(--cs-accent);
border-color: var(--cs-accent);
}
.cs .cs-btn--light {
background: #f5f7fa;
color: var(--cs-navy);
border-color: #d7dde7;
font-size: 16px;
padding: 14px 32px;
}
.cs .cs-btn:hover,
.cs .cs-btn:focus {
opacity: .88;
}
.cs .cs-btn--solid:hover,
.cs .cs-btn--solid:focus {
color: #ffffff;
}
.cs-more {
text-align: center;
margin-top: 26px;
}
@media (max-width: 1024px) {
.cs {
padding: 48px 0;
}
.cs .cs-title {
font-size: 26px;
line-height: 34px;
}
.cs-card__body {
padding: 26px 24px;
}
.cs .cs-card__img {
min-height: 320px;
}
.cs .cs-card__title {
font-size: 21px;
line-height: 29px;
}
}
@media (max-width: 768px) {
/* фото уходит наверх — в колонке ему хватает 220px по высоте */
.cs-card {
flex-direction: column;
}
.cs-card__media {
flex: 0 0 auto;
}
.cs .cs-card__img {
height: 220px;
min-height: 0;
}
.cs-card__actions {
flex-direction: column;
/* в колонку align-items управляет шириной — кнопки во всю карточку */
align-items: stretch;
}
}
@media (max-width: 480px) {
.cs {
padding: 36px 0;
}
.cs .cs-title {
font-size: 23px;
line-height: 31px;
}
.cs-card__body {
padding: 20px 18px;
}
.cs .cs-card__title {
font-size: 19px;
line-height: 27px;
}
.cs .cs-btn--light {
display: block;
font-size: 15px;
}
}
/* Секция «Оборудование проверенных производителей» (template-parts/blocks/manufacturers.php) */
.mf {
--mf-navy: #1D3557;
--mf-accent: #92111C;
--mf-muted: #4b5563;
--mf-badge: #5a6472;
--mf-border: #e3e8ef;
--mf-logo-h: 44px;
font-family: 'Open Sans', sans-serif;
background: #ffffff;
padding: 60px 0;
}
.mf *,
.mf *::before,
.mf *::after {
box-sizing: border-box;
}
.mf-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.mf .mf-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--mf-navy);
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
text-align: left;
margin: 0 0 12px;
padding: 0;
}
.mf .mf-subtitle {
font-size: 16px;
line-height: 26px;
color: var(--mf-muted);
max-width: 860px;
margin: 0 0 32px;
}
.mf-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.mf-card {
display: flex;
flex-direction: column;
border: 1px solid var(--mf-border);
border-radius: 6px;
padding: 22px;
}
.mf-card__logo {
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.mf .mf-card__img {
max-height: var(--mf-logo-h);
max-width: 170px;
object-fit: contain;
}
.mf .mf-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 19px;
line-height: 26px;
color: var(--mf-navy);
margin: 0 0 8px;
}
.mf .mf-card__text {
font-size: 15px;
line-height: 24px;
color: var(--mf-muted);
margin: 0 0 12px;
/* прижимает статус и ссылку к низу карточки при разной длине текста */
flex: 1;
}
.mf .mf-card__status {
display: inline-block;
align-self: flex-start;
background: #f5f7fa;
border: 1px solid var(--mf-border);
border-radius: 3px;
padding: 5px 10px;
font-size: 12px;
line-height: 18px;
color: var(--mf-badge);
margin-bottom: 14px;
}
.mf .mf-card__link {
align-self: flex-start;
font-size: 15px;
font-weight: 600;
/* main.css: a { color:black } */
color: var(--mf-accent);
text-decoration: none;
}
.mf .mf-card__link::after {
content: ' →';
}
.mf .mf-card__link:hover,
.mf .mf-card__link:focus {
opacity: .8;
color: var(--mf-accent);
}
.mf-more {
text-align: center;
margin-top: 28px;
}
.mf .mf-btn {
display: inline-block;
background: var(--mf-navy);
color: #ffffff;
font-size: 16px;
font-weight: 600;
line-height: 20px;
text-decoration: none;
padding: 15px 34px;
border-radius: 4px;
}
.mf .mf-btn:hover,
.mf .mf-btn:focus {
opacity: .88;
color: #ffffff;
}
@media (max-width: 1024px) {
.mf {
padding: 48px 0;
}
.mf .mf-title {
font-size: 26px;
line-height: 34px;
}
.mf-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.mf .mf-subtitle {
font-size: 15px;
line-height: 24px;
margin-bottom: 24px;
}
}
@media (max-width: 480px) {
.mf {
padding: 36px 0;
}
.mf .mf-title {
font-size: 23px;
line-height: 31px;
}
.mf-list {
grid-template-columns: 1fr;
}
.mf-card {
padding: 18px;
}
.mf .mf-btn {
display: block;
font-size: 15px;
}
}
/* Секция «Решения для различных отраслей промышленности» (template-parts/blocks/industries.php) */
.ind {
--ind-navy: #1D3557;
--ind-accent: #92111C;
--ind-muted: #4b5563;
--ind-border: #e3e8ef;
font-family: 'Open Sans', sans-serif;
background: #f5f7fa;
padding: 60px 0;
}
.ind *,
.ind *::before,
.ind *::after {
box-sizing: border-box;
}
.ind-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.ind .ind-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--ind-navy);
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
text-align: left;
margin: 0 0 12px;
padding: 0;
}
.ind .ind-subtitle {
font-size: 16px;
line-height: 26px;
color: var(--ind-muted);
max-width: 880px;
margin: 0 0 32px;
}
.ind-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.ind-card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--ind-border);
border-radius: 6px;
padding: 22px;
}
.ind-card__ico {
font-size: 28px;
line-height: 34px;
margin-bottom: 10px;
}
.ind .ind-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 25px;
color: var(--ind-navy);
margin: 0 0 8px;
}
.ind .ind-card__text {
font-size: 14px;
line-height: 23px;
color: var(--ind-muted);
margin: 0 0 12px;
/* прижимает ссылку к низу карточки при разной длине текста */
flex: 1;
}
.ind .ind-card__link {
align-self: flex-start;
font-size: 14px;
font-weight: 600;
/* main.css: a { color:black } */
color: var(--ind-accent);
text-decoration: none;
}
.ind .ind-card__link::after {
content: ' →';
}
.ind .ind-card__link:hover,
.ind .ind-card__link:focus {
opacity: .8;
color: var(--ind-accent);
}
.ind-note {
margin-top: 24px;
background: #ffffff;
border-left: 3px solid var(--ind-navy);
border-radius: 4px;
padding: 18px 22px;
font-size: 14px;
line-height: 23px;
color: var(--ind-muted);
}
@media (max-width: 1024px) {
.ind {
padding: 48px 0;
}
.ind .ind-title {
font-size: 26px;
line-height: 34px;
}
.ind-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.ind .ind-subtitle {
font-size: 15px;
line-height: 24px;
margin-bottom: 24px;
}
}
@media (max-width: 480px) {
.ind {
padding: 36px 0;
}
.ind .ind-title {
font-size: 23px;
line-height: 31px;
}
.ind-list {
grid-template-columns: 1fr;
}
.ind-card {
padding: 18px;
}
.ind-note {
padding: 16px 18px;
}
}
/* Секция «Нужно заменить существующий теплообменник?» (template-parts/blocks/replacement.php) */
.rep {
--rep-navy: #1D3557;
--rep-accent: #92111C;
--rep-muted: #6b7280;
--rep-border: #d7dde7;
--rep-field-bg: #f8fafc;
font-family: 'Open Sans', sans-serif;
background: var(--rep-navy);
color: #ffffff;
padding: 56px 0;
}
.rep *,
.rep *::before,
.rep *::after {
box-sizing: border-box;
}
.rep-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
display: flex;
gap: 44px;
align-items: flex-start;
}
.rep-left {
flex: 1.15;
min-width: 0;
}
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
.rep .rep-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: #ffffff;
text-align: left;
margin: 0 0 16px;
padding: 0;
}
.rep .rep-lead {
font-size: 16px;
line-height: 26px;
color: #dfe6f2;
margin: 0 0 12px;
}
.rep .rep-lead:last-of-type {
margin-bottom: 24px;
}
.rep-tags-title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 26px;
color: #ffffff;
margin-bottom: 12px;
}
.rep-tags {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rep-tag {
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 4px;
padding: 8px 12px;
font-size: 14px;
line-height: 20px;
color: #ffffff;
}
.rep-tag__ico {
margin-right: 6px;
}
.rep-image {
display: block;
width: 100%;
max-width: 520px;
height: 210px;
object-fit: cover;
border-radius: 6px;
}
/* --- карточка с формой --- */
.rep-card {
flex: 0 0 420px;
background: #ffffff;
border-radius: 6px;
padding: 28px;
color: var(--rep-navy);
}
.rep-card__title {
font-family: Montserrat, sans-serif;
font-size: 21px;
font-weight: 500;
line-height: 29px;
color: var(--rep-navy);
margin-bottom: 18px;
}
.rep-card__warning {
font-size: 14px;
line-height: 20px;
color: var(--rep-accent);
}
/* Плашка о вложениях — пунктирная рамка, как в прототипе. */
.rep-file-note {
border: 1px dashed var(--rep-accent);
border-radius: 4px;
background: #fdf4f5;
padding: 12px 14px;
margin-bottom: 16px;
}
.rep-file-note__title {
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: var(--rep-accent);
margin-bottom: 4px;
}
.rep-file-note__text {
font-size: 12px;
line-height: 18px;
color: var(--rep-muted);
}
/* --- поля Contact Form 7 внутри карточки (гасим forms.css/media.css) --- */
.rep-card .wpcf7 {
margin: 0;
}
/* forms.css: .wpcf7-form { margin-bottom: 100px } */
.rep-card .wpcf7-form {
margin-bottom: 0;
}
/* Обёртки полей: .rep-field — если у блока своя форма, .hl-field — когда
выводится общая форма hero главной (её тело свёрстано классами hl-*). */
.rep-card .rep-field,
.rep-card .hl-field {
display: block;
margin-bottom: 12px;
}
.rep-card .rep-field__label,
.rep-card .hl-field__label {
display: block;
font-size: 13px;
font-weight: 600;
line-height: 18px;
color: var(--rep-navy);
margin-bottom: 5px;
}
/* Пара полей в ряд — обёртка .rep-row (или .hl-row) в теле формы CF7. */
.rep-card .rep-row,
.rep-card .hl-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.rep-card .wpcf7-form-control-wrap {
display: block;
}
.rep-card input[type="text"].wpcf7-form-control,
.rep-card input[type="email"].wpcf7-form-control,
.rep-card input[type="tel"].wpcf7-form-control,
.rep-card textarea.wpcf7-form-control {
width: 100%;
height: 44px;
padding: 0 12px;
border: 1px solid var(--rep-border);
border-radius: 4px;
background: var(--rep-field-bg);
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--rep-navy);
}
.rep-card textarea.wpcf7-form-control {
height: 70px;
padding: 10px 12px;
resize: vertical;
}
.rep-card input.wpcf7-form-control:focus,
.rep-card textarea.wpcf7-form-control:focus {
border-color: var(--rep-navy);
background: #ffffff;
}
/* forms.css гасит фокус глобально: input:focus-visible { outline: none !important } */
.rep-card .wpcf7-form-control:focus-visible {
outline: 2px solid var(--rep-navy) !important;
outline-offset: 1px;
}
/* forms.css рисует файловое поле красной «таблеткой» 120×35. */
.rep-card input[type="file"].wpcf7-form-control,
.rep-card .wpcf7-form-control.wpcf7-file {
display: block;
width: 100%;
height: auto;
padding: 8px 10px;
border: 1px solid var(--rep-border);
border-radius: 4px;
background: var(--rep-field-bg);
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 20px;
color: var(--rep-muted);
cursor: pointer;
}
.rep-card input[type="file"].wpcf7-form-control::file-selector-button {
margin-right: 10px;
padding: 6px 12px;
border: 1px solid var(--rep-navy);
border-radius: 4px;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 18px;
color: var(--rep-navy);
cursor: pointer;
transition: background-color .2s, color .2s;
}
.rep-card input[type="file"].wpcf7-form-control::file-selector-button:hover {
background: var(--rep-navy);
color: #ffffff;
}
.rep-card .wpcf7-submit,
.rep-card input[type="submit"] {
display: block;
width: 100%;
text-align: center;
background: var(--rep-accent);
color: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 22px;
border: 0;
border-radius: 4px;
padding: 15px 20px;
cursor: pointer;
transition: background-color .2s;
}
.rep-card .wpcf7-submit:hover,
.rep-card input[type="submit"]:hover {
background: #7a0e17;
}
/* Общий чекбокс темы (forms.css): фиолетовая рамка и -webkit-appearance:button. */
.rep-card input[type="checkbox"] {
-webkit-appearance: checkbox;
appearance: checkbox;
border: 0;
top: 0;
margin: 0 8px 0 0;
padding: 0;
}
.rep-card .hl-agreement {
margin-bottom: 16px;
}
.rep-card .wpcf7-acceptance {
display: block;
font-size: 12px;
line-height: 18px;
color: var(--rep-muted);
margin-bottom: 16px;
}
/* forms.css задаёт .wpcf7-list-item{gap:11px} и label{display:flex} —
выравниваем чекбокс по первой строке подписи. */
.rep-card .wpcf7-acceptance .wpcf7-list-item {
display: block;
gap: 0;
margin: 0;
}
.rep-card .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
}
.rep-card .wpcf7-acceptance input[type="checkbox"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 1px 0 0;
accent-color: var(--rep-accent);
}
.rep-card .wpcf7-acceptance .wpcf7-list-item-label {
display: block;
width: auto;
padding-left: 0;
font-size: 12px;
line-height: 18px;
color: var(--rep-muted);
}
/* forms.css делает подсказки валидации абсолютными и со сдвигами под широкие формы. */
.rep-card .wpcf7-not-valid-tip,
.rep-card span .wpcf7-not-valid-tip {
position: static;
display: block;
width: auto;
padding-left: 0;
margin: 4px 0 0;
font-size: 12px;
line-height: 17px;
color: #dc3232;
white-space: normal;
text-wrap: wrap;
}
/* forms.css превращает ответ формы в попап на 80vw с position:absolute —
в узкой карточке возвращаем обычное сообщение в потоке. */
.rep-card .wpcf7 form .wpcf7-response-output,
.rep-card .wpcf7 form.init .wpcf7-response-output,
.rep-card .wpcf7 form.sent .wpcf7-response-output,
.rep-card .wpcf7 form.failed .wpcf7-response-output,
.rep-card .wpcf7 form.aborted .wpcf7-response-output,
.rep-card .wpcf7 form.spam .wpcf7-response-output,
.rep-card .wpcf7 form.invalid .wpcf7-response-output,
.rep-card .wpcf7 form.unaccepted .wpcf7-response-output,
.rep-card .wpcf7 form.payment-required .wpcf7-response-output {
position: static;
width: auto;
max-width: none;
min-height: 0;
margin: 14px 0 0;
padding: 10px 12px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 19px;
text-align: left;
color: var(--rep-navy);
background: #ffffff;
border-radius: 4px;
border-width: 1px;
box-shadow: none;
z-index: auto;
}
/* До ответа блок пустой — показываем его только вместе со статусом формы. */
.rep-card .wpcf7 form .wpcf7-response-output,
.rep-card .wpcf7 form.init .wpcf7-response-output {
display: none;
}
.rep-card .wpcf7 form.sent .wpcf7-response-output,
.rep-card .wpcf7 form.failed .wpcf7-response-output,
.rep-card .wpcf7 form.aborted .wpcf7-response-output,
.rep-card .wpcf7 form.spam .wpcf7-response-output,
.rep-card .wpcf7 form.invalid .wpcf7-response-output,
.rep-card .wpcf7 form.unaccepted .wpcf7-response-output,
.rep-card .wpcf7 form.payment-required .wpcf7-response-output {
display: block;
}
.rep-card .wpcf7-spinner {
margin: 8px auto 0;
}
/* --- адаптив: брейкпоинты темы 1024 / 900 / 768 / 480 --- */
@media (max-width: 1024px) {
.rep {
padding: 48px 0;
}
.rep-inner {
gap: 28px;
}
.rep .rep-title {
font-size: 26px;
line-height: 34px;
}
.rep-card {
flex-basis: 380px;
padding: 22px;
}
}
@media (max-width: 900px) {
.rep-inner {
flex-direction: column;
}
.rep-left,
.rep-card {
flex: 1 1 auto;
width: 100%;
}
.rep-image {
max-width: none;
}
}
@media (max-width: 480px) {
.rep {
padding: 36px 0;
}
.rep .rep-title {
font-size: 23px;
line-height: 31px;
}
.rep .rep-lead {
font-size: 15px;
line-height: 24px;
}
.rep-image {
height: 170px;
}
.rep-card {
padding: 18px;
}
.rep-card .rep-row,
.rep-card .hl-row {
grid-template-columns: 1fr;
}
}
/* Секция «Документы для подбора оборудования» (template-parts/blocks/docs.php) */
.doc {
--doc-navy: #1D3557;
--doc-accent: #92111C;
--doc-green: #1D7A3F;
--doc-muted: #4b5563;
--doc-grey: #8a93a0;
--doc-border: #e3e8ef;
font-family: 'Open Sans', sans-serif;
background: #ffffff;
padding: 60px 0;
}
.doc *,
.doc *::before,
.doc *::after {
box-sizing: border-box;
}
.doc-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.doc .doc-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--doc-navy);
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
text-align: left;
margin: 0 0 12px;
padding: 0;
}
.doc .doc-subtitle {
font-size: 16px;
line-height: 26px;
color: var(--doc-muted);
max-width: 840px;
margin: 0 0 32px;
}
.doc-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.doc-card {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1px solid var(--doc-border);
border-radius: 6px;
padding: 20px;
}
.doc-card__head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.doc-card__ico {
font-size: 22px;
line-height: 26px;
}
.doc-card__ext {
background: var(--doc-navy);
color: #ffffff;
font-size: 11px;
font-weight: 600;
line-height: 15px;
padding: 3px 8px;
border-radius: 3px;
}
.doc-card__ext--pdf {
background: var(--doc-accent);
}
.doc-card__ext--xls {
background: var(--doc-green);
}
.doc-card__size {
font-size: 12px;
line-height: 16px;
color: var(--doc-grey);
}
.doc .doc-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 24px;
color: var(--doc-navy);
margin: 0 0 8px;
}
.doc-card__meta {
font-size: 12px;
line-height: 19px;
color: var(--doc-grey);
margin-bottom: 14px;
/* прижимает кнопку к низу карточки при разной длине подписи */
flex: 1;
}
.doc .doc-card__btn {
display: block;
text-align: center;
background: var(--doc-navy);
/* main.css: a { color:black } */
color: #ffffff;
font-size: 14px;
font-weight: 600;
line-height: 18px;
text-decoration: none;
padding: 11px 14px;
border-radius: 4px;
}
.doc .doc-card__btn:hover,
.doc .doc-card__btn:focus {
opacity: .9;
color: #ffffff;
}
.doc-card--cta {
border-color: var(--doc-accent);
background: #fdf4f5;
justify-content: center;
}
.doc .doc-card__title--cta {
color: var(--doc-accent);
}
.doc .doc-card__text {
font-size: 13px;
line-height: 21px;
color: var(--doc-muted);
margin: 0 0 14px;
}
.doc .doc-card__btn--cta {
background: var(--doc-accent);
}
@media (max-width: 1024px) {
.doc {
padding: 48px 0;
}
.doc .doc-title {
font-size: 26px;
line-height: 34px;
}
.doc-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.doc .doc-subtitle {
font-size: 15px;
line-height: 24px;
margin-bottom: 24px;
}
}
@media (max-width: 480px) {
.doc {
padding: 36px 0;
}
.doc .doc-title {
font-size: 23px;
line-height: 31px;
}
.doc-list {
grid-template-columns: 1fr;
}
.doc-card {
padding: 18px;
}
}
/* Секция «Частые вопросы» (template-parts/blocks/faq.php) */
.faq {
--faq-navy: #1D3557;
--faq-accent: #92111C;
--faq-muted: #4b5563;
--faq-grey: #8a93a0;
--faq-border: #e3e8ef;
--faq-line: #eef1f6;
font-family: 'Open Sans', sans-serif;
background: #f5f7fa;
padding: 60px 0;
}
.faq *,
.faq *::before,
.faq *::after {
box-sizing: border-box;
}
.faq-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.faq .faq-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--faq-navy);
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
text-align: left;
margin: 0 0 28px;
padding: 0;
}
.faq-list {
background: #ffffff;
border: 1px solid var(--faq-border);
border-radius: 6px;
padding: 8px 26px;
}
.faq-item {
border-bottom: 1px solid var(--faq-line);
}
.faq-item:last-child {
border-bottom: none;
}
.faq .faq-item__q {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 26px;
color: var(--faq-navy);
padding: 20px 0;
cursor: pointer;
list-style: none;
}
/* Штатный треугольник в вебките и в остальных браузерах */
.faq .faq-item__q::-webkit-details-marker {
display: none;
}
.faq .faq-item__q::marker {
content: '';
}
.faq .faq-item__q:focus-visible {
/* main.css глушит outline через !important */
outline: 2px solid var(--faq-accent) !important;
outline-offset: 2px;
}
.faq-item__mark {
position: relative;
flex: 0 0 auto;
width: 14px;
height: 26px;
}
/* Плюс, превращающийся в минус: вертикальная палочка ложится набок и гаснет */
.faq-item__mark::before,
.faq-item__mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: var(--faq-accent);
transform: translate(-50%, -50%);
transition: opacity .28s cubic-bezier(.4, 0, .2, 1),
transform .28s cubic-bezier(.4, 0, .2, 1);
}
.faq-item__mark::before {
width: 14px;
height: 2px;
}
.faq-item__mark::after {
width: 2px;
height: 14px;
}
.faq-item[open] .faq-item__mark::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item__a {
/* высоту анимирует assets/js/faq.js — контент не должен выпирать */
overflow: hidden;
}
.faq .faq-item__a p {
font-size: 15px;
line-height: 25px;
color: var(--faq-muted);
margin: 0 0 8px;
}
/* Отступ низа даёт последний абзац, а не padding контейнера: с padding высота
анимируемого блока не опускается ниже 20px и открытие начинается рывком.
overflow:hidden создаёт BFC, поэтому margin не выпадает наружу. */
.faq .faq-item__a p:last-child {
margin-bottom: 20px;
}
@media (prefers-reduced-motion: reduce) {
.faq-item__mark::before,
.faq-item__mark::after {
transition: none;
}
}
.faq-note {
margin-top: 20px;
font-size: 13px;
line-height: 21px;
color: var(--faq-grey);
}
@media (max-width: 1024px) {
.faq {
padding: 48px 0;
}
.faq .faq-title {
font-size: 26px;
line-height: 34px;
}
}
@media (max-width: 768px) {
.faq-list {
padding: 4px 18px;
}
.faq .faq-item__q {
font-size: 16px;
line-height: 24px;
gap: 14px;
}
}
@media (max-width: 480px) {
.faq {
padding: 36px 0;
}
.faq .faq-title {
font-size: 23px;
line-height: 31px;
margin-bottom: 20px;
}
.faq-list {
padding: 2px 14px;
}
.faq .faq-item__a p {
font-size: 14px;
line-height: 23px;
}
}
/* Финальный блок «Нужно подобрать оборудование для вашего объекта?»
(template-parts/blocks/final-cta.php). Стоит после блока подбора внизу главной. */
.fcta {
--fcta-accent: #92111C;
--fcta-accent-dark: #6f0d16;
--fcta-navy: #1D3557;
--fcta-muted: #6b7280;
--fcta-border: #d7dde7;
--fcta-field-bg: #f8fafc;
font-family: 'Open Sans', sans-serif;
background: linear-gradient(120deg, var(--fcta-accent) 0%, var(--fcta-accent-dark) 100%);
color: #ffffff;
padding: 56px 0;
}
.fcta *,
.fcta *::before,
.fcta *::after {
box-sizing: border-box;
}
.fcta-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
display: flex;
gap: 44px;
align-items: center;
}
.fcta-left {
flex: 1.3;
min-width: 0;
}
/* main.css: h1/h2 выровнены по центру и с отступом 70px */
.fcta .fcta-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 42px;
color: #ffffff;
text-align: left;
margin: 0 0 16px;
padding: 0;
}
.fcta .fcta-lead {
font-size: 17px;
line-height: 27px;
color: #f7dcdf;
margin: 0 0 10px;
}
.fcta .fcta-lead:last-of-type {
margin-bottom: 26px;
}
/* --- кнопка (только на мобильных, вместо карточки с формой) --- */
.fcta-actions {
display: none;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 26px;
}
.fcta .fcta-btn {
display: inline-block;
font-size: 16px;
font-weight: 600;
line-height: 22px;
text-decoration: none;
border-radius: 4px;
cursor: pointer;
transition: background-color .2s, color .2s;
}
.fcta .fcta-btn--ghost {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.7);
padding: 14px 32px;
}
.fcta .fcta-btn--ghost:hover {
background: rgba(255, 255, 255, 0.14);
}
/* --- контакты --- */
.fcta-contacts {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.fcta-contact {
margin: 0;
padding: 0;
}
.fcta .fcta-contact__link {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 4px;
padding: 10px 14px;
font-size: 15px;
line-height: 21px;
color: #ffffff;
text-decoration: none;
}
.fcta a.fcta-contact__link:hover {
background: rgba(255, 255, 255, 0.22);
}
/* --- карточка с формой --- */
.fcta-card {
flex: 0 0 400px;
background: #ffffff;
border-radius: 6px;
padding: 26px;
color: var(--fcta-navy);
}
.fcta-card__title {
font-family: Montserrat, sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 28px;
color: var(--fcta-navy);
margin-bottom: 16px;
}
.fcta-card__warning {
font-size: 14px;
line-height: 20px;
color: var(--fcta-accent);
}
/* Плашка о вложениях — пунктирная рамка, как в прототипе. */
.fcta-file-note {
border: 1px dashed var(--fcta-accent);
border-radius: 4px;
background: #fdf4f5;
padding: 11px 14px;
margin-bottom: 14px;
}
.fcta-file-note__title {
font-size: 13px;
font-weight: 600;
line-height: 19px;
color: var(--fcta-accent);
margin-bottom: 4px;
}
.fcta-file-note__text {
font-size: 12px;
line-height: 18px;
color: var(--fcta-muted);
}
/* --- поля Contact Form 7 внутри карточки (гасим forms.css/media.css) --- */
.fcta-card .wpcf7 {
margin: 0;
}
/* forms.css: .wpcf7-form { margin-bottom: 100px } */
.fcta-card .wpcf7-form {
margin-bottom: 0;
}
/* Тело формы hero главной свёрстано классами hl-*. */
.fcta-card .hl-field {
display: block;
margin-bottom: 12px;
}
.fcta-card .hl-field__label {
display: block;
font-size: 13px;
font-weight: 600;
line-height: 18px;
color: var(--fcta-navy);
margin-bottom: 5px;
}
.fcta-card .hl-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.fcta-card .wpcf7-form-control-wrap {
display: block;
}
.fcta-card input[type="text"].wpcf7-form-control,
.fcta-card input[type="email"].wpcf7-form-control,
.fcta-card input[type="tel"].wpcf7-form-control,
.fcta-card textarea.wpcf7-form-control {
width: 100%;
height: 44px;
padding: 0 12px;
border: 1px solid var(--fcta-border);
border-radius: 4px;
background: var(--fcta-field-bg);
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 20px;
color: var(--fcta-navy);
}
.fcta-card textarea.wpcf7-form-control {
height: 66px;
padding: 10px 12px;
resize: vertical;
}
.fcta-card input.wpcf7-form-control:focus,
.fcta-card textarea.wpcf7-form-control:focus {
border-color: var(--fcta-navy);
background: #ffffff;
}
/* forms.css гасит фокус глобально: input:focus-visible { outline: none !important } */
.fcta-card .wpcf7-form-control:focus-visible {
outline: 2px solid var(--fcta-navy) !important;
outline-offset: 1px;
}
/* forms.css рисует файловое поле красной «таблеткой» 120×35. */
.fcta-card input[type="file"].wpcf7-form-control,
.fcta-card .wpcf7-form-control.wpcf7-file {
display: block;
width: 100%;
height: auto;
padding: 8px 10px;
border: 1px solid var(--fcta-border);
border-radius: 4px;
background: var(--fcta-field-bg);
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 20px;
color: var(--fcta-muted);
cursor: pointer;
}
.fcta-card input[type="file"].wpcf7-form-control::file-selector-button {
margin-right: 10px;
padding: 6px 12px;
border: 1px solid var(--fcta-navy);
border-radius: 4px;
background: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 18px;
color: var(--fcta-navy);
cursor: pointer;
transition: background-color .2s, color .2s;
}
.fcta-card input[type="file"].wpcf7-form-control::file-selector-button:hover {
background: var(--fcta-navy);
color: #ffffff;
}
.fcta-card .wpcf7-submit,
.fcta-card input[type="submit"] {
display: block;
width: 100%;
text-align: center;
background: var(--fcta-accent);
color: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 22px;
border: 0;
border-radius: 4px;
padding: 15px 20px;
cursor: pointer;
transition: background-color .2s;
}
.fcta-card .wpcf7-submit:hover,
.fcta-card input[type="submit"]:hover {
background: #7a0e17;
}
/* Общий чекбокс темы (forms.css): фиолетовая рамка и -webkit-appearance:button. */
.fcta-card input[type="checkbox"] {
-webkit-appearance: checkbox;
appearance: checkbox;
border: 0;
top: 0;
margin: 0 8px 0 0;
padding: 0;
}
.fcta-card .hl-agreement {
margin-bottom: 16px;
}
.fcta-card .wpcf7-acceptance {
display: block;
font-size: 12px;
line-height: 18px;
color: var(--fcta-muted);
margin-bottom: 16px;
}
/* forms.css задаёт .wpcf7-list-item{gap:11px} и label{display:flex}. */
.fcta-card .wpcf7-acceptance .wpcf7-list-item {
display: block;
gap: 0;
margin: 0;
}
.fcta-card .wpcf7-acceptance label {
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
}
.fcta-card .wpcf7-acceptance input[type="checkbox"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 1px 0 0;
accent-color: var(--fcta-accent);
}
.fcta-card .wpcf7-acceptance .wpcf7-list-item-label {
display: block;
width: auto;
padding-left: 0;
font-size: 12px;
line-height: 18px;
color: var(--fcta-muted);
}
/* forms.css делает подсказки валидации абсолютными и со сдвигами под широкие формы. */
.fcta-card .wpcf7-not-valid-tip,
.fcta-card span .wpcf7-not-valid-tip {
position: static;
display: block;
width: auto;
padding-left: 0;
margin: 4px 0 0;
font-size: 12px;
line-height: 17px;
color: #dc3232;
white-space: normal;
text-wrap: wrap;
}
/* forms.css превращает ответ формы в попап на 80vw с position:absolute —
в узкой карточке возвращаем обычное сообщение в потоке. */
.fcta-card .wpcf7 form .wpcf7-response-output,
.fcta-card .wpcf7 form.init .wpcf7-response-output,
.fcta-card .wpcf7 form.sent .wpcf7-response-output,
.fcta-card .wpcf7 form.failed .wpcf7-response-output,
.fcta-card .wpcf7 form.aborted .wpcf7-response-output,
.fcta-card .wpcf7 form.spam .wpcf7-response-output,
.fcta-card .wpcf7 form.invalid .wpcf7-response-output,
.fcta-card .wpcf7 form.unaccepted .wpcf7-response-output,
.fcta-card .wpcf7 form.payment-required .wpcf7-response-output {
position: static;
width: auto;
max-width: none;
min-height: 0;
margin: 14px 0 0;
padding: 10px 12px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
line-height: 19px;
text-align: left;
color: var(--fcta-navy);
background: #ffffff;
border-radius: 4px;
border-width: 1px;
box-shadow: none;
z-index: auto;
}
/* До ответа блок пустой — показываем его только вместе со статусом формы. */
.fcta-card .wpcf7 form .wpcf7-response-output,
.fcta-card .wpcf7 form.init .wpcf7-response-output {
display: none;
}
.fcta-card .wpcf7 form.sent .wpcf7-response-output,
.fcta-card .wpcf7 form.failed .wpcf7-response-output,
.fcta-card .wpcf7 form.aborted .wpcf7-response-output,
.fcta-card .wpcf7 form.spam .wpcf7-response-output,
.fcta-card .wpcf7 form.invalid .wpcf7-response-output,
.fcta-card .wpcf7 form.unaccepted .wpcf7-response-output,
.fcta-card .wpcf7 form.payment-required .wpcf7-response-output {
display: block;
}
.fcta-card .wpcf7-spinner {
margin: 8px auto 0;
}
/* --- адаптив: брейкпоинты темы 1024 / 900 / 768 / 480 --- */
@media (max-width: 1024px) {
.fcta {
padding: 48px 0;
}
.fcta-inner {
gap: 28px;
}
.fcta .fcta-title {
font-size: 27px;
line-height: 36px;
}
.fcta-card {
flex-basis: 370px;
padding: 22px;
}
}
@media (max-width: 900px) {
.fcta-inner {
flex-direction: column;
align-items: stretch;
}
.fcta-left,
.fcta-card {
flex: 1 1 auto;
width: 100%;
}
}
/* Мобильные: форму не показываем — заявку отправляют через модалку по кнопке. */
@media (max-width: 768px) {
.fcta-card {
display: none;
}
.fcta-actions {
display: flex;
}
.fcta-contacts {
margin-bottom: 0;
}
}
@media (max-width: 480px) {
.fcta {
padding: 36px 0;
}
.fcta .fcta-title {
font-size: 23px;
line-height: 31px;
}
.fcta .fcta-lead {
font-size: 15px;
line-height: 24px;
}
.fcta .fcta-btn--ghost {
display: block;
width: 100%;
text-align: center;
padding: 14px 20px;
}
.fcta-actions {
gap: 10px;
}
.fcta-card {
padding: 18px;
}
.fcta-card .hl-row {
grid-template-columns: 1fr;
}
}
/* Страница каталога оборудования (template-katalog.php):
.chero — первый экран, .ccat — категории, .cprio — популярные направления,
.ctile — плитки задач и отраслей, .cengi — сценарии инженерного подбора,
.cform — форма расчёта, .csrv — сервис и запчасти, .cbrd — производители,
.ccas — реализованные проекты, .cdoc — документы для подбора,
.cfaq — частые вопросы, .ccta — запрос стоимости.
Файл подключается только на этом шаблоне, после mediacss. */
.chero,
.ccat,
.cprio,
.ctile,
.cengi,
.cform,
.csrv,
.cbrd,
.ccas,
.cdoc,
.cfaq,
.ccta {
--cat-navy: #1D3557;
--cat-accent: #92111C;
--cat-muted: #4a4a4a;
--cat-muted-2: #5a5a5a;
--cat-card-bg: #ece7e3;
--cat-border: #e3e8ef;
font-family: 'Open Sans', sans-serif;
}
.chero *,
.chero *::before,
.chero *::after,
.ccat *,
.ccat *::before,
.ccat *::after,
.cprio *,
.cprio *::before,
.cprio *::after,
.ctile *,
.ctile *::before,
.ctile *::after,
.cengi *,
.cengi *::before,
.cengi *::after,
.cform *,
.cform *::before,
.cform *::after,
.csrv *,
.csrv *::before,
.csrv *::after,
.cbrd *,
.cbrd *::before,
.cbrd *::after,
.ccas *,
.ccas *::before,
.ccas *::after,
.cdoc *,
.cdoc *::before,
.cdoc *::after,
.cfaq *,
.cfaq *::before,
.cfaq *::after,
.ccta *,
.ccta *::before,
.ccta *::after {
box-sizing: border-box;
}
.chero-inner,
.ccat-inner,
.cprio-inner,
.ctile-inner,
.cengi-inner,
.cform-inner,
.csrv-inner,
.cbrd-inner,
.ccas-inner,
.cdoc-inner,
.cfaq-inner,
.ccta-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
/* Отступ сверху при переходе по якорю — чтобы заголовок секции не прилипал
к краю окна. Сама плавность прокрутки — в main.css, она общая для сайта. */
.chero,
.ccat,
.cprio,
.ctile,
.cengi,
.cform,
.csrv,
.cbrd,
.ccas,
.cdoc,
.cfaq,
.ccta {
scroll-margin-top: 30px;
}
/* ============================== первый экран ============================== */
.chero {
padding: 40px 0 70px;
}
.chero-inner {
display: flex;
gap: 44px;
align-items: center;
border-radius: 44px;
padding: 48px 54px;
background: linear-gradient(105deg, #1d3557 0%, #2b4a72 55%, #3a5f8f 100%);
/* Градиент — внутренняя «карточка», поэтому внешние отступы обычные,
а -inner шире не становится: max-width наследуется от общего правила. */
}
.chero-left {
flex: 1.25;
min-width: 0;
}
.chero-crumb {
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: #c9d6e8;
margin: 0 0 14px;
}
/* main.css задаёт h1 { text-align:center; margin-bottom:70px } глобально */
.chero .chero-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 46px;
line-height: 56px;
color: #fff;
text-align: left;
margin: 0 0 20px;
padding: 0;
}
.chero-lead {
font-size: 18px;
line-height: 30px;
color: #e6ecf5;
margin: 0 0 16px;
}
.chero-note {
font-size: 16px;
line-height: 28px;
color: #c9d6e8;
margin: 0 0 26px;
}
.chero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 0 0 26px;
}
.chero-btn {
display: inline-block;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 13px 24px;
border-radius: 30px;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.chero-btn--primary {
background: var(--cat-accent);
color: #fff;
}
.chero-btn--primary:hover {
background: #7a0e17;
color: #fff;
}
.chero-btn--ghost {
background: #fff;
color: var(--cat-navy);
}
.chero-btn--ghost:hover {
background: #e6ecf5;
color: var(--cat-navy);
}
.chero-facts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 22px;
margin: 0;
padding: 0;
list-style: none;
}
.chero-fact {
font-size: 14px;
line-height: 22px;
color: #fff;
}
.chero-fact__ico {
margin-right: 6px;
}
.chero-media {
flex: 1;
min-width: 0;
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
border-radius: 32px;
padding: 18px;
background: rgba(255, 255, 255, .08);
}
.chero-media__main {
flex: 0 0 52%;
}
.chero-media__side {
flex: 0 0 40%;
display: flex;
flex-direction: column;
gap: 12px;
}
.chero-media__img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* ============================== категории ============================== */
.ccat {
padding: 0 0 70px;
}
.ccat .ccat-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 38px;
line-height: 48px;
color: var(--cat-navy);
/* main.css выравнивает заголовки по центру и добавляет отступ 70px */
text-align: left;
margin: 0 0 14px;
padding: 0;
}
.ccat-subtitle {
font-size: 17px;
line-height: 28px;
color: var(--cat-muted);
max-width: 900px;
margin: 0 0 34px;
}
.ccat-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
margin: 0;
padding: 0;
list-style: none;
}
.ccat-card {
display: flex;
flex-direction: column;
background: var(--cat-card-bg);
border-radius: 28px;
padding: 26px;
}
.ccat-card__media {
display: flex;
align-items: center;
justify-content: center;
height: 190px;
overflow: hidden;
background: #fff;
border-radius: 20px;
margin: 0 0 18px;
}
.ccat-card__img {
display: block;
max-width: 88%;
max-height: 170px;
width: auto;
height: auto;
object-fit: contain;
}
.ccat-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 22px;
line-height: 30px;
color: var(--cat-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.ccat-card__text {
font-size: 15px;
line-height: 25px;
color: var(--cat-muted);
margin: 0 0 14px;
}
.ccat-card__subs-label {
font-family: Montserrat, sans-serif;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--cat-accent);
margin: 10px 0 8px;
}
.ccat-card__subs {
font-size: 14px;
line-height: 24px;
color: var(--cat-muted-2);
margin: 0 0 18px;
padding-left: 18px;
list-style: disc outside;
}
/* Кнопки в столбик: тексты «Смотреть …» разной длины, и при flex-wrap вторая
кнопка в одних карточках оставалась в строке, а в других падала вниз. */
.ccat-card__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-top: auto;
padding-top: 8px;
}
.ccat-btn {
display: inline-block;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
border-radius: 30px;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.ccat-btn--primary {
background: var(--cat-accent);
color: #fff;
padding: 13px 24px;
}
.ccat-btn--primary:hover {
background: #7a0e17;
color: #fff;
}
.ccat-btn--ghost {
background: transparent;
color: var(--cat-navy);
border: 1px solid var(--cat-navy);
padding: 12px 23px;
}
.ccat-btn--ghost:hover {
background: var(--cat-navy);
color: #fff;
}
/* ========================= популярные направления ========================= */
.cprio {
padding: 0 0 70px;
}
.cprio .cprio-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 38px;
line-height: 48px;
color: var(--cat-navy);
/* main.css выравнивает заголовки по центру и добавляет отступ 70px */
text-align: left;
margin: 0 0 14px;
padding: 0;
}
.cprio-subtitle {
font-size: 17px;
line-height: 28px;
color: var(--cat-muted);
max-width: 900px;
margin: 0 0 34px;
}
.cprio-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
}
.cprio-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e2ddd8;
border-radius: 28px;
overflow: hidden;
}
.cprio-card__media {
display: flex;
align-items: center;
justify-content: center;
height: 180px;
overflow: hidden;
background: var(--cat-card-bg);
}
.cprio-card__img {
display: block;
max-width: 80%;
max-height: 160px;
width: auto;
height: auto;
object-fit: contain;
}
.cprio-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 24px;
}
.cprio-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 22px;
line-height: 30px;
color: var(--cat-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.cprio-card__text {
font-size: 15px;
line-height: 25px;
color: var(--cat-muted);
margin: 0 0 14px;
}
/* Кнопки в столбик — по той же причине, что и в карточках категорий. */
.cprio-card__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-top: auto;
padding-top: 8px;
}
.cprio-btn {
display: inline-block;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
border-radius: 30px;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.cprio-btn--primary {
background: var(--cat-accent);
color: #fff;
padding: 13px 24px;
}
.cprio-btn--primary:hover {
background: #7a0e17;
color: #fff;
}
.cprio-btn--ghost {
background: transparent;
color: var(--cat-navy);
border: 1px solid var(--cat-navy);
padding: 12px 23px;
}
.cprio-btn--ghost:hover {
background: var(--cat-navy);
color: #fff;
}
/* ======== плитки: технологические задачи и отрасли (catalog-tiles.php) ======== */
.ctile {
padding: 0 0 70px;
}
.ctile .ctile-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 38px;
line-height: 48px;
color: var(--cat-navy);
/* main.css выравнивает заголовки по центру и добавляет отступ 70px */
text-align: left;
margin: 0 0 14px;
padding: 0;
}
.ctile-subtitle {
font-size: 17px;
line-height: 28px;
color: var(--cat-muted);
max-width: 900px;
margin: 0 0 34px;
}
.ctile-list {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
/* Технологические задачи — по три в ряд, бежевые карточки без рамки. */
.ctile--processes .ctile-list {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.ctile--processes .ctile-card {
background: var(--cat-card-bg);
border-radius: 28px;
padding: 26px;
}
/* Отрасли — по четыре в ряд, белые карточки с рамкой. */
.ctile--industries .ctile-list {
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.ctile--industries .ctile-card {
background: #fff;
border: 1px solid #e2ddd8;
border-radius: 24px;
padding: 24px;
}
.ctile-card {
display: flex;
flex-direction: column;
}
.ctile-card__ico {
font-size: 34px;
line-height: 44px;
margin: 0 0 10px;
}
.ctile--industries .ctile-card__ico {
font-size: 30px;
line-height: 40px;
margin: 0 0 8px;
}
.ctile-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 19px;
line-height: 26px;
color: var(--cat-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.ctile--industries .ctile-card__title {
font-size: 18px;
line-height: 25px;
}
.ctile-card__text {
font-size: 15px;
line-height: 25px;
color: var(--cat-muted);
margin: 0 0 14px;
}
.ctile-card__link {
margin-top: auto;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: var(--cat-accent);
text-decoration: none;
}
.ctile-card__link:hover {
text-decoration: underline;
}
/* Ссылка на якорь формы — тёмно-синяя, чтобы не спорить с переходами в разделы. */
.ctile-card__link--calc {
color: var(--cat-navy);
}
.ctile-actions {
margin-top: 28px;
}
.ctile-btn {
display: inline-block;
background: var(--cat-accent);
color: #fff;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 13px 24px;
border-radius: 30px;
text-decoration: none;
transition: background-color .2s;
}
.ctile-btn:hover {
background: #7a0e17;
color: #fff;
}
/* ========================= сценарии инженерного подбора ========================= */
.cengi {
padding: 0 0 26px;
}
.cengi-card {
background: var(--cat-navy);
border-radius: 44px;
padding: 46px 48px;
}
.cengi .cengi-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 38px;
line-height: 48px;
color: #fff;
text-align: left;
margin: 0 0 14px;
padding: 0;
}
.cengi-subtitle {
font-size: 17px;
line-height: 28px;
color: #c9d6e8;
max-width: 900px;
margin: 0 0 32px;
}
.cengi-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.cengi-item {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 24px;
padding: 24px;
}
.cengi-item__ico {
font-size: 30px;
line-height: 40px;
margin: 0 0 10px;
}
.cengi-item__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 25px;
color: #fff;
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.cengi-item__text {
font-size: 14px;
line-height: 24px;
color: #c9d6e8;
margin: 0 0 18px;
}
.cengi-item__btn {
margin-top: auto;
display: block;
background: #fff;
color: var(--cat-navy);
font-family: Montserrat, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 20px;
padding: 11px 18px;
border-radius: 26px;
text-align: center;
text-decoration: none;
transition: background-color .2s;
}
.cengi-item__btn:hover {
background: #e6eef8;
color: var(--cat-navy);
}
/* ============================== форма расчёта ============================== */
.cform {
padding: 0 0 70px;
}
.cform .cform-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 24px;
line-height: 32px;
color: var(--cat-navy);
text-align: left;
margin: 0 0 22px;
padding: 0;
}
.cform-text {
font-size: 16px;
line-height: 26px;
color: var(--cat-muted);
max-width: 760px;
margin: 0 0 22px;
}
/* Оформление полей CF7 берётся из hero-lead.css по классу hl-card
(см. комментарий в template-parts/blocks/catalog-form.php) — здесь только карточка.
Переменные --hl-* объявлены в hero-lead.css на .hl-hero, поэтому вне hero их надо
задать заново: без них кнопка отправки получала пустой background и пропадала.
Поля на бежевой карточке — белые, поэтому --hl-field-bg переопределён. */
.cform .hl-card {
--hl-navy: #1D3557;
--hl-accent: #92111C;
--hl-border: #d8d2cc;
--hl-field-bg: #ffffff;
--hl-muted: #7a7a7a;
}
.cform-card {
background: var(--cat-card-bg);
border-radius: 44px;
padding: 40px 48px;
}
/* Поля формы: в теле формы CF7 (см. запись формы в админке) блоки полей
обёрнуты в .cform-grid — ряды по четыре и по два поля. */
.cform-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin: 0 0 14px;
}
.cform-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.cform-card .cform-grid .hl-field {
margin-bottom: 0;
}
.cform-card .hl-card__title,
.cform-card .hl-field__label {
font-weight: 600;
}
.cform-card input[type="text"].wpcf7-form-control,
.cform-card input[type="email"].wpcf7-form-control,
.cform-card input[type="tel"].wpcf7-form-control,
.cform-card textarea.wpcf7-form-control,
.cform-card .wpcf7-form-control.wpcf7-file {
border-radius: 10px;
}
.cform-card textarea.wpcf7-form-control {
height: 104px;
}
/* hero-lead.css растягивает кнопку на всю ширину узкой карточки — здесь карточка
во всю колонку, поэтому кнопка возвращается к «таблетке», как в остальных блоках. */
.cform-card .wpcf7-submit,
.cform-card input[type="submit"] {
display: inline-block;
width: auto;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 13px 24px;
border-radius: 30px;
}
/* Подпись и «таблетки» допустимых вложений — статичный текст в теле формы. */
.cform-chips-label {
font-family: Montserrat, sans-serif;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--cat-accent);
margin: 18px 0 10px;
}
.cform-chips {
margin: 0 0 20px;
}
.cform-chip {
display: inline-block;
background: #fff;
border: 1px solid #d8d2cc;
border-radius: 20px;
padding: 6px 14px;
font-size: 13px;
line-height: 20px;
color: var(--cat-muted-2);
margin: 0 6px 8px 0;
}
/* ========================== сервис и запасные части ========================== */
.csrv,
.cbrd,
.ccas,
.cdoc,
.cfaq {
padding: 0 0 70px;
}
.csrv .csrv-title,
.cbrd .cbrd-title,
.ccas .ccas-title,
.cdoc .cdoc-title,
.cfaq .cfaq-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 38px;
line-height: 48px;
color: var(--cat-navy);
text-align: left;
margin: 0 0 14px;
padding: 0;
}
.csrv-subtitle,
.cbrd-subtitle,
.ccas-subtitle,
.cdoc-subtitle,
.cfaq-subtitle {
font-size: 17px;
line-height: 28px;
color: var(--cat-muted);
max-width: 900px;
margin: 0 0 34px;
}
.csrv-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.csrv-card {
display: flex;
flex-direction: column;
background: var(--cat-card-bg);
border-radius: 28px;
padding: 26px 26px 28px;
}
.csrv-card__media {
display: flex;
align-items: center;
justify-content: center;
height: 130px;
background: #fff;
border-radius: 16px;
overflow: hidden;
margin: 0 0 16px;
}
.csrv-card__img {
max-width: 80%;
max-height: 115px;
width: auto;
height: auto;
object-fit: contain;
}
.csrv-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 24px;
color: var(--cat-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.csrv-card__text {
font-size: 14px;
line-height: 23px;
color: var(--cat-muted-2);
margin: 0 0 16px;
}
.csrv-btn {
margin-top: auto;
display: block;
background: var(--cat-accent);
color: #fff;
font-family: Montserrat, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 20px;
padding: 11px 18px;
border-radius: 26px;
text-align: center;
text-decoration: none;
transition: background-color .2s;
}
.csrv-btn:hover {
background: #7a0e17;
color: #fff;
}
.csrv-note {
display: flex;
align-items: center;
gap: 24px;
background: #fff;
border: 1px solid #e2ddd8;
border-radius: 24px;
padding: 24px 28px;
margin-top: 26px;
}
.csrv-note__text {
flex: 1;
font-size: 14px;
line-height: 24px;
color: var(--cat-muted-2);
margin: 0;
}
.csrv-note__btn {
display: inline-block;
background: var(--cat-accent);
color: #fff;
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 13px 24px;
border-radius: 30px;
text-decoration: none;
transition: background-color .2s;
}
.csrv-note__btn:hover {
background: #7a0e17;
color: #fff;
}
/* ============================== производители ============================== */
.cbrd-list {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
}
.cbrd-card {
background: #fff;
border: 1px solid #e2ddd8;
border-radius: 18px;
padding: 22px 16px;
text-align: center;
}
.cbrd-card__name {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 19px;
line-height: 26px;
letter-spacing: .5px;
color: var(--cat-navy);
margin: 0 0 6px;
}
.cbrd-card__text {
font-size: 12px;
line-height: 18px;
color: #8a8a8a;
}
.cbrd-note {
font-size: 13px;
line-height: 22px;
color: #8a8a8a;
margin: 24px 0 0;
}
.cbrd-actions {
margin-top: 20px;
}
/* Кнопка-контур: единственная такая на странице, повторяет обводку карточек hero. */
.cbrd-btn {
display: inline-block;
background: transparent;
border: 1px solid var(--cat-navy);
color: var(--cat-navy);
font-family: Montserrat, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
padding: 12px 23px;
border-radius: 30px;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.cbrd-btn:hover {
background: var(--cat-navy);
color: #fff;
}
/* ========================= реализованные проекты ========================= */
.ccas-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
list-style: none;
margin: 0;
padding: 0;
}
.ccas-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #e2ddd8;
border-radius: 24px;
overflow: hidden;
}
.ccas-card__media {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
background: var(--cat-card-bg);
overflow: hidden;
}
.ccas-card__img {
max-width: 75%;
max-height: 135px;
width: auto;
height: auto;
object-fit: contain;
}
.ccas-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 22px;
}
.ccas-card__cat {
font-family: Montserrat, sans-serif;
font-size: 11px;
line-height: 16px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--cat-accent);
margin: 0 0 8px;
}
.ccas-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 17px;
line-height: 24px;
color: var(--cat-navy);
text-align: left;
margin: 0 0 12px;
padding: 0;
}
.ccas-card__row {
font-size: 13px;
line-height: 22px;
color: var(--cat-muted-2);
margin: 0 0 8px;
}
.ccas-card__row + .ccas-card__row {
margin-bottom: 16px;
}
.ccas-card__label {
color: var(--cat-navy);
}
.ccas-card__links {
margin-top: auto;
}
.ccas-card__link {
display: block;
font-family: Montserrat, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 20px;
color: var(--cat-accent);
text-decoration: none;
}
.ccas-card__link:hover {
text-decoration: underline;
}
/* Ссылка на якорь формы — тёмно-синяя, как в блоках задач и отраслей. */
.ccas-card__link--calc {
margin-top: 10px;
color: var(--cat-navy);
}
/* ============================== адаптив ============================== */
@media (max-width: 1024px) {
.chero-inner {
flex-direction: column;
align-items: stretch;
gap: 28px;
padding: 36px 30px;
border-radius: 32px;
}
.chero .chero-title {
font-size: 34px;
line-height: 44px;
}
.chero-lead {
font-size: 16px;
line-height: 26px;
}
.chero-media {
order: -1;
}
.ccat .ccat-title,
.cprio .cprio-title,
.ctile .ctile-title,
.csrv .csrv-title,
.cbrd .cbrd-title,
.ccas .ccas-title {
font-size: 30px;
line-height: 40px;
}
.csrv-list,
.ccas-list {
grid-template-columns: repeat(3, 1fr);
}
.cbrd-list {
grid-template-columns: repeat(4, 1fr);
}
.cengi .cengi-title {
font-size: 30px;
line-height: 40px;
}
.cengi-card {
padding: 36px 30px;
border-radius: 32px;
}
.cprio-list,
.ctile--processes .ctile-list,
.ctile--industries .ctile-list,
.cengi-list,
.cform-grid {
grid-template-columns: repeat(2, 1fr);
}
.cform-card {
padding: 32px 30px;
border-radius: 32px;
}
}
@media (max-width: 768px) {
.chero {
padding: 24px 0 50px;
}
.chero-facts {
grid-template-columns: 1fr;
}
.ccat {
padding: 0 0 50px;
}
.ccat-list,
.cprio-list,
.ctile--processes .ctile-list,
.ctile--industries .ctile-list {
grid-template-columns: 1fr;
gap: 20px;
}
.cprio,
.ctile {
padding: 0 0 50px;
}
.cengi-list,
.cform-grid,
.cform-grid--2 {
grid-template-columns: 1fr;
}
.cform {
padding: 0 0 50px;
}
.csrv,
.cbrd,
.ccas {
padding: 0 0 50px;
}
.csrv-list,
.ccas-list {
grid-template-columns: 1fr;
gap: 20px;
}
.cbrd-list {
grid-template-columns: repeat(2, 1fr);
}
.csrv-note {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
}
@media (max-width: 480px) {
.chero-inner {
padding: 26px 18px;
border-radius: 24px;
}
.chero .chero-title {
font-size: 26px;
line-height: 34px;
}
.chero-actions .chero-btn {
display: block;
width: 100%;
text-align: center;
}
.ccat .ccat-title,
.cprio .cprio-title,
.ctile .ctile-title,
.csrv .csrv-title,
.cbrd .cbrd-title,
.ccas .ccas-title {
font-size: 24px;
line-height: 32px;
}
.csrv-subtitle,
.cbrd-subtitle,
.ccas-subtitle {
font-size: 15px;
line-height: 25px;
}
.csrv-card {
padding: 20px 18px;
}
.csrv-note {
padding: 20px 18px;
}
.csrv-note__btn {
display: block;
width: 100%;
text-align: center;
}
.cbrd-list {
grid-template-columns: 1fr;
}
.cbrd-btn {
display: block;
text-align: center;
}
.ccat-subtitle,
.cprio-subtitle,
.ctile-subtitle {
font-size: 15px;
line-height: 25px;
}
.ccat-card {
padding: 20px 18px;
}
.ccat-card__media {
height: 150px;
}
.ccat-card__actions .ccat-btn,
.cprio-card__actions .cprio-btn {
width: 100%;
text-align: center;
}
.cprio-card__body {
padding: 20px 18px;
}
.cprio-card__media {
height: 150px;
}
.ctile--processes .ctile-card {
padding: 20px 18px;
}
.ctile--industries .ctile-card {
padding: 20px 18px;
}
.ctile-btn {
display: block;
text-align: center;
}
.cengi .cengi-title {
font-size: 24px;
line-height: 32px;
}
.cengi-subtitle {
font-size: 15px;
line-height: 25px;
}
.cengi-card {
padding: 26px 18px;
border-radius: 24px;
}
.cengi-item {
padding: 20px 18px;
}
.cform .cform-title {
font-size: 20px;
line-height: 28px;
}
.cform-card {
padding: 24px 18px;
border-radius: 24px;
}
.cform-card .wpcf7-submit,
.cform-card input[type="submit"] {
display: block;
width: 100%;
}
}
/* ===================== документы для подбора оборудования ===================== */
.cdoc-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.cdoc-card {
display: flex;
gap: 14px;
align-items: flex-start;
background: #fff;
border: 1px solid #e2ddd8;
border-radius: 18px;
padding: 20px;
}
.cdoc-card__ico {
font-size: 28px;
line-height: 34px;
}
.cdoc-card__body {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.cdoc-card__title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 22px;
color: var(--cat-navy);
margin: 0 0 6px;
}
.cdoc-card__meta {
font-size: 12px;
line-height: 20px;
color: #8a8a8a;
margin: 0 0 12px;
}
.cdoc-card__actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
}
.cdoc-btn {
display: inline-block;
background: var(--cat-accent);
color: #fff;
border: 1px solid var(--cat-accent);
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 18px;
padding: 7px 16px;
border-radius: 22px;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.cdoc-btn:hover {
background: #7a0e17;
border-color: #7a0e17;
color: #fff;
}
/* Ссылка на якорь формы — контурная, как кнопка в блоке производителей. */
.cdoc-btn--ghost {
background: transparent;
border-color: var(--cat-navy);
color: var(--cat-navy);
}
.cdoc-btn--ghost:hover {
background: var(--cat-navy);
border-color: var(--cat-navy);
color: #fff;
}
@media (max-width: 1024px) {
.cdoc .cdoc-title {
font-size: 30px;
line-height: 40px;
}
.cdoc-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.cdoc {
padding-bottom: 50px;
}
.cdoc-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.cdoc .cdoc-title {
font-size: 24px;
line-height: 32px;
}
.cdoc-btn {
flex: 1 1 100%;
text-align: center;
}
}
/* ============================== частые вопросы ============================== */
.cfaq-item {
background: #fff;
border: 1px solid #e2ddd8;
border-radius: 18px;
padding: 22px 26px;
margin: 0 0 12px;
}
.cfaq-item__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
cursor: pointer;
list-style: none;
}
/* Штатный треугольник в вебките и в остальных браузерах */
.cfaq .cfaq-item__head::-webkit-details-marker {
display: none;
}
.cfaq .cfaq-item__head::marker {
content: '';
}
.cfaq .cfaq-item__head:focus-visible {
/* main.css глушит outline через !important */
outline: 2px solid var(--cat-accent) !important;
outline-offset: 4px;
}
.cfaq .cfaq-item__q {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 26px;
color: var(--cat-navy);
text-align: left;
margin: 0;
padding: 0;
}
/* «Плюс», который превращается в «минус» при раскрытии — как в блоке главной. */
.cfaq-item__mark {
position: relative;
flex: 0 0 auto;
width: 14px;
height: 26px;
}
.cfaq-item__mark::before,
.cfaq-item__mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: var(--cat-accent);
transform: translate(-50%, -50%);
transition: opacity .2s ease, transform .2s ease;
}
.cfaq-item__mark::before {
width: 14px;
height: 2px;
}
.cfaq-item__mark::after {
width: 2px;
height: 14px;
}
.cfaq-item[open] .cfaq-item__mark::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
.cfaq-item__a {
/* высоту анимирует assets/js/faq.js — контент не должен выпирать */
overflow: hidden;
}
.cfaq-item__a p {
font-size: 15px;
line-height: 25px;
color: var(--cat-muted-2);
margin: 12px 0 0;
}
@media (prefers-reduced-motion: reduce) {
.cfaq-item__mark::before,
.cfaq-item__mark::after {
transition: none;
}
}
.cfaq-actions {
margin-top: 22px;
}
.cfaq-btn {
display: inline-block;
background: var(--cat-accent);
color: #fff;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
padding: 13px 24px;
border-radius: 30px;
text-decoration: none;
transition: background .2s ease;
}
.cfaq-btn:hover {
background: #7a0e17;
color: #fff;
}
@media (max-width: 1024px) {
.cfaq .cfaq-title {
font-size: 30px;
line-height: 40px;
}
}
@media (max-width: 768px) {
.cfaq {
padding-bottom: 50px;
}
.cfaq-item {
padding: 20px;
}
}
@media (max-width: 480px) {
.cfaq .cfaq-title {
font-size: 24px;
line-height: 32px;
}
.cfaq .cfaq-item__q {
font-size: 16px;
line-height: 24px;
}
.cfaq-btn {
display: block;
text-align: center;
}
}
/* ============================= запрос стоимости ============================= */
.ccta {
padding: 0 0 70px;
}
.ccta-card {
display: flex;
gap: 48px;
background: linear-gradient(105deg, #92111c 0%, #6f0d15 100%);
border-radius: 44px;
padding: 48px 54px;
}
.ccta-col {
flex: 1;
min-width: 0;
}
.ccta-col--form {
flex: 0.9;
}
.ccta .ccta-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 36px;
line-height: 46px;
color: #fff;
text-align: left;
margin: 0 0 18px;
padding: 0;
}
.ccta-text {
font-size: 17px;
line-height: 29px;
color: #f5dcde;
margin: 0 0 14px;
}
.ccta-note {
font-size: 16px;
line-height: 28px;
color: #f0cdd0;
margin: 0 0 28px;
}
.ccta-box {
background: rgba(0, 0, 0, .14);
border-radius: 20px;
padding: 18px 22px;
font-size: 14px;
line-height: 24px;
color: #fff;
margin: 0 0 26px;
}
.ccta-box__title {
display: block;
}
.ccta-btn {
display: inline-block;
background: #fff;
color: var(--cat-accent);
border: 1px solid #fff;
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 15px;
line-height: 21px;
padding: 13px 27px;
border-radius: 30px;
text-decoration: none;
margin: 0 10px 10px 0;
transition: background .2s ease, color .2s ease;
}
.ccta-btn:hover {
background: #f5dcde;
border-color: #f5dcde;
color: var(--cat-accent);
}
.ccta-btn--ghost {
background: transparent;
color: #fff;
}
.ccta-btn--ghost:hover {
background: #fff;
border-color: #fff;
color: var(--cat-accent);
}
/* Форма на тёмном фоне: hl-card оставляем ради нейтрализации forms.css,
но саму «карточку» гасим и переобъявляем её переменные под бордовый фон. */
.ccta .hl-card {
--hl-navy: #ffffff;
--hl-accent: #1D3557;
--hl-border: rgba(255, 255, 255, .28);
--hl-field-bg: rgba(255, 255, 255, .12);
--hl-muted: #f0cdd0;
flex: 1 1 auto;
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
color: #fff;
}
.ccta-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 0 0 14px;
}
.ccta .hl-card .ccta-grid .hl-field {
margin-bottom: 0;
}
.ccta .hl-card .hl-field__label {
color: #fff;
}
.ccta .hl-card input[type="text"].wpcf7-form-control,
.ccta .hl-card input[type="email"].wpcf7-form-control,
.ccta .hl-card input[type="tel"].wpcf7-form-control,
.ccta .hl-card textarea.wpcf7-form-control {
border-radius: 10px;
color: #fff;
}
.ccta .hl-card .wpcf7-form-control::placeholder {
color: #d6e0ee;
opacity: 1;
}
/* Файловое поле в прототипе — пунктирная рамка на всю ширину. */
.ccta .hl-card input[type="file"].wpcf7-form-control,
.ccta .hl-card .wpcf7-form-control.wpcf7-file {
width: 100%;
border: 1px dashed rgba(255, 255, 255, .5);
border-radius: 12px;
padding: 18px 20px;
color: #f5dcde;
}
/* hero-lead.css красит кнопку выбора файла в --hl-navy, а он здесь белый —
на белом фоне кнопки надпись пропадала. */
.ccta .hl-card input[type="file"].wpcf7-form-control::file-selector-button {
border-color: #fff;
background: #fff;
color: var(--cat-accent);
}
.ccta .hl-card input[type="file"].wpcf7-form-control::file-selector-button:hover {
background: var(--cat-navy);
border-color: var(--cat-navy);
color: #fff;
}
.ccta .hl-card .hl-agreement,
.ccta .hl-card .wpcf7-acceptance {
color: #f0cdd0;
}
.ccta .hl-card .wpcf7-submit,
.ccta .hl-card input[type="submit"] {
background: var(--cat-navy);
border-radius: 30px;
padding: 15px 28px;
font-family: Montserrat, sans-serif;
font-size: 15px;
font-weight: 500;
}
.ccta .hl-card .wpcf7-submit:hover,
.ccta .hl-card input[type="submit"]:hover {
background: #16263f;
}
/* Ответ CF7 (main.js делает из него попап) — на тёмном фоне текст был белым по белому. */
.ccta .hl-card .wpcf7-response-output {
color: var(--cat-navy);
}
@media (max-width: 1024px) {
.ccta-card {
gap: 32px;
padding: 38px 34px;
border-radius: 32px;
}
.ccta .ccta-title {
font-size: 30px;
line-height: 40px;
}
}
@media (max-width: 768px) {
.ccta {
padding-bottom: 50px;
}
.ccta-card {
flex-direction: column;
padding: 30px 24px;
}
.ccta-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.ccta .ccta-title {
font-size: 24px;
line-height: 32px;
}
.ccta-btn {
display: block;
text-align: center;
margin-right: 0;
}
}
/* Страницы разделов оборудования (template-oborudovanie.php):
.ehero — первый экран, .etype — виды оборудования,
.echoose — как выбрать + таблица сравнения, .etask — подбор по задаче,
.eind — подбор по отрасли, .efeat — преимущества и расшифровка схемы,
.eproc — как подбираем и поставляем, .edata — данные для расчёта,
.eform — блок заявки (две вкладки), .ecost — расчёт стоимости,
.erep — подбор замены действующего аппарата, .ebrd — производители,
.ecase — реализованные проекты, .esrv — сервис и запасные части,
.edoc — техническая документация, .efaq — вопросы и ответы,
.eseo — текстовый блок о разделе, .ecta — «Отправьте задачу».
Файл подключается только на этом шаблоне, после mediacss. */
.ehero,
.etype,
.echoose,
.etask,
.eind,
.efeat,
.eproc,
.edata,
.eform,
.ecost,
.erep,
.ebrd,
.ecase,
.esrv,
.edoc,
.efaq,
.eseo,
.ecta {
--eq-navy: #1D3557;
--eq-accent: #92111C;
--eq-muted: #4a5b6c;
--eq-muted-2: #5c6b7a;
--eq-card-bg: #f3efec;
--eq-border: #dde5ed;
font-family: 'Open Sans', sans-serif;
}
.ehero *,
.ehero *::before,
.ehero *::after,
.etype *,
.etype *::before,
.etype *::after,
.echoose *,
.echoose *::before,
.echoose *::after,
.etask *,
.etask *::before,
.etask *::after,
.eind *,
.eind *::before,
.eind *::after,
.efeat *,
.efeat *::before,
.efeat *::after,
.eproc *,
.eproc *::before,
.eproc *::after,
.edata *,
.edata *::before,
.edata *::after,
.eform *,
.eform *::before,
.eform *::after,
.ecost *,
.ecost *::before,
.ecost *::after,
.erep *,
.erep *::before,
.erep *::after,
.ebrd *,
.ebrd *::before,
.ebrd *::after,
.ecase *,
.ecase *::before,
.ecase *::after,
.esrv *,
.esrv *::before,
.esrv *::after,
.edoc *,
.edoc *::before,
.edoc *::after,
.efaq *,
.efaq *::before,
.efaq *::after,
.eseo *,
.eseo *::before,
.eseo *::after,
.ecta *,
.ecta *::before,
.ecta *::after {
box-sizing: border-box;
}
.ehero-inner,
.etype-inner,
.echoose-inner,
.etask-inner,
.eind-inner,
.efeat-inner,
.eproc-inner,
.edata-inner,
.eform-inner,
.ecost-inner,
.erep-inner,
.ebrd-inner,
.ecase-inner,
.esrv-inner,
.edoc-inner,
.efaq-inner,
.eseo-inner,
.ecta-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
/* main.css задаёт глобальные `li { color: black; font-size:16px; line-height:22.4px }`
и `ol li { line-height: 4rem }` — они бьют не специфичностью, а тем, что правило
на элементе сильнее наследования от списка. Внутри наших секций возвращаем
наследование: цвет и кегль задают классы списков. */
.ehero li,
.etype li,
.echoose li,
.etask li,
.eind li,
.efeat li,
.eproc li,
.edata li,
.eform li,
.ecost li,
.erep li,
.ebrd li,
.ecase li,
.esrv li,
.edoc li,
.efaq li,
.eseo li,
.ecta li {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
/* Отступ сверху при переходе по якорю. Плавность прокрутки — в main.css. */
.ehero,
.etype,
.echoose,
.etask,
.eind,
.efeat,
.eproc,
.edata,
.eform,
.ecost,
.erep,
.ebrd,
.ecase,
.esrv,
.edoc,
.efaq,
.eseo,
.ecta {
scroll-margin-top: 30px;
}
/* ============================== первый экран ============================== */
.ehero {
padding: 44px 0 48px;
margin: 0 0 8px;
background: linear-gradient(135deg, #eef4fa 0%, #dde8f3 100%);
}
/* main.css задаёт h1 { text-align:center; margin-bottom:70px } глобально */
.ehero .ehero-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 36px;
line-height: 46px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 18px;
padding: 0;
}
.ehero-lead {
max-width: 900px;
margin: 0 0 18px;
font-size: 19px;
line-height: 30px;
color: #33475b;
}
.ehero-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.ehero-chip {
background: #fff;
border: 1px solid #c9d8e6;
border-radius: 20px;
padding: 8px 18px;
font-size: 15px;
color: var(--eq-navy);
}
.ehero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
.ehero-btn {
display: inline-block;
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 24px;
padding: 16px 34px;
border-radius: 30px;
text-decoration: none;
transition: opacity .2s ease;
}
.ehero-btn:hover {
opacity: .85;
}
.ehero-btn--primary {
background: var(--eq-accent);
color: #fff;
border: 2px solid var(--eq-accent);
}
.ehero-btn--ghost {
background: #fff;
color: var(--eq-navy);
border: 2px solid var(--eq-navy);
}
.ehero-note {
font-size: 14px;
line-height: 22px;
color: #6b7b8c;
}
/* ========================== виды оборудования ============================ */
.etype {
padding: 56px 0 20px;
background: #fff;
}
/* main.css задаёт h2 по-своему — перебиваем повышенной специфичностью */
.etype .etype-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.etype-subtitle {
max-width: 880px;
margin: 0 0 32px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.etype-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.etype-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--eq-border);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(29, 53, 87, .06);
transition: box-shadow .2s ease, transform .2s ease;
}
.etype-card:hover {
box-shadow: 0 6px 18px rgba(29, 53, 87, .12);
transform: translateY(-2px);
}
.etype-card__media {
display: flex;
align-items: center;
justify-content: center;
height: 210px;
background: var(--eq-card-bg);
}
.etype-card__img {
display: block;
max-width: 100%;
max-height: 210px;
width: auto;
height: auto;
}
.etype-card__media--icon {
font-size: 78px;
line-height: 1;
color: var(--eq-navy);
}
.etype-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 22px 22px 24px;
}
.etype-card__title {
font-family: Montserrat, sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 26px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
/* Растяжка на всю карточку: сама карточка кликабельна, но вложенных нет —
кнопки ниже подняты z-index'ом и перехватывают клик первыми. */
.etype-card__link {
color: inherit;
text-decoration: none;
}
.etype-card__link::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
}
.etype-card__link:hover {
color: var(--eq-accent);
}
.etype-card__text {
margin: 0 0 14px;
font-size: 14px;
line-height: 22px;
color: var(--eq-muted);
}
.etype-specs {
margin: 0 0 14px;
padding: 0;
list-style: none;
font-size: 13px;
line-height: 21px;
color: var(--eq-muted-2);
}
.etype-spec + .etype-spec {
margin-top: 5px;
}
.etype-spec__ico {
margin-right: 4px;
}
.etype-spec__label {
color: var(--eq-navy);
}
.etype-card__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
position: relative;
z-index: 1;
}
.etype-btn {
display: inline-block;
font-family: Montserrat, sans-serif;
font-size: 14px;
line-height: 20px;
padding: 10px 20px;
border-radius: 22px;
text-decoration: none;
transition: opacity .2s ease;
}
.etype-btn:hover {
opacity: .85;
}
.etype-btn--primary {
background: var(--eq-accent);
color: #fff;
border: 1px solid var(--eq-accent);
}
.etype-btn--ghost {
background: #fff;
color: var(--eq-navy);
border: 1px solid var(--eq-navy);
}
/* ===================== как выбрать + сравнение ============================ */
.echoose {
padding: 56px 0;
margin-top: 48px;
background: #f5f8fb;
}
.echoose .echoose-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.echoose-subtitle {
max-width: 900px;
margin: 0 0 30px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.echoose-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin: 0 0 40px;
padding: 0;
list-style: none;
}
.echoose-card {
background: #fff;
border-radius: 10px;
border-left: 4px solid var(--eq-accent);
padding: 24px;
}
.echoose-card__title {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 24px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.echoose-card__text {
margin: 0;
font-size: 14px;
line-height: 23px;
color: var(--eq-muted);
}
.echoose .echoose-table-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 26px;
line-height: 34px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 16px;
padding: 0;
}
/* Таблица широкая: на узких экранах прокручивается внутри своей обёртки,
страница по горизонтали не едет. */
.echoose-table {
background: #fff;
border: 1px solid var(--eq-border);
border-radius: 10px;
overflow-x: auto;
}
.echoose-tbl {
width: 100%;
min-width: 900px;
border-collapse: collapse;
font-size: 14px;
color: #33475b;
}
.echoose-tbl th,
.echoose-tbl td {
text-align: left;
vertical-align: top;
padding: 13px 16px;
}
.echoose-tbl thead th {
padding: 14px 16px;
background: var(--eq-navy);
color: #fff;
font-weight: 600;
white-space: nowrap;
}
.echoose-tbl tbody tr:nth-child(even) {
background: #f7fafc;
}
.echoose-tbl tbody th,
.echoose-tbl tbody td {
border-top: 1px solid #e6ecf2;
}
.echoose-tbl tbody th {
font-weight: 600;
color: var(--eq-navy);
}
.echoose-note {
margin: 14px 0 0;
font-size: 13px;
line-height: 21px;
color: #7a8894;
}
/* ======================== подбор по задаче ================================ */
.etask {
padding: 56px 0;
background: #fff;
}
.etask .etask-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.etask-subtitle {
max-width: 900px;
margin: 0 0 30px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.etask-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.etask-card {
display: flex;
flex-direction: column;
height: 100%;
background: #f5f8fb;
border: 1px solid #e2eaf2;
border-radius: 10px;
padding: 24px 20px;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.etask-card:hover {
border-color: #c9d8e6;
box-shadow: 0 6px 18px rgba(29, 53, 87, .1);
}
.etask-card__ico {
font-size: 32px;
line-height: 1;
margin-bottom: 12px;
}
.etask-card__title {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 24px;
color: var(--eq-navy);
margin-bottom: 8px;
}
.etask-card__text {
font-size: 13px;
line-height: 21px;
color: var(--eq-muted-2);
}
.etask-card__more {
margin-top: auto;
padding-top: 12px;
font-size: 14px;
line-height: 20px;
color: var(--eq-accent);
}
/* =========================== подбор по отрасли ============================ */
.eind {
padding: 56px 0;
background: var(--eq-navy);
}
.eind .eind-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: #fff;
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.eind-subtitle {
max-width: 900px;
margin: 0 0 30px;
font-size: 16px;
line-height: 26px;
color: #c3d2e2;
}
.eind-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.eind-card {
display: flex;
flex-direction: column;
height: 100%;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 10px;
padding: 22px 20px;
text-decoration: none;
transition: background-color .2s ease, border-color .2s ease;
}
.eind-card:hover {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .32);
}
/* Карточка-приглашение «Вашей отрасли нет в списке?». */
.eind-card--accent {
background: var(--eq-accent);
border-color: var(--eq-accent);
}
.eind-card--accent:hover {
background: #a3141f;
border-color: #a3141f;
}
.eind-card__ico {
font-size: 30px;
line-height: 1;
margin-bottom: 10px;
}
.eind-card__title {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 24px;
color: #fff;
margin-bottom: 6px;
}
.eind-card__text {
font-size: 13px;
line-height: 20px;
color: #b9c9db;
}
.eind-card--accent .eind-card__text {
color: #f4d7da;
}
/* ============== преимущества, схема аппарата и её расшифровка ============= */
.efeat {
padding: 56px 0 0;
background: #fff;
}
.efeat .efeat-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.efeat-lead {
max-width: 900px;
margin: 0 0 22px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
/* Карточка-примечание: чьи именно это фирменные решения. */
.efeat-note {
background: #f5f8fb;
border: 1px solid #dce6f0;
border-left: 4px solid var(--eq-accent);
border-radius: 8px;
padding: 20px 24px;
}
.efeat-note__title {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: var(--eq-navy);
margin-bottom: 6px;
}
.efeat-note__ico {
margin-right: 6px;
}
.efeat-note__text {
margin: 0;
font-size: 14px;
line-height: 23px;
color: var(--eq-muted);
}
/* Схема аппарата с выносками — на старом шаблоне .teploproduct-page.out_h. */
.efeat-scheme {
margin-top: 32px;
text-align: center;
}
.efeat-scheme__img {
max-width: 100%;
height: auto;
}
/* Расшифровка схемы — на старом шаблоне .teplorashifrovka-list. */
.efeat-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px 40px;
margin: 32px 0 0;
padding: 0;
list-style: none;
}
.efeat-item {
display: flex;
align-items: flex-start;
gap: 20px;
}
.efeat-item__img {
flex: 0 0 110px;
width: 110px;
height: auto;
}
.efeat-item .efeat-item__title {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 24px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 6px;
padding: 0;
}
.efeat-item__desc {
margin: 0;
font-size: 14px;
line-height: 23px;
color: var(--eq-muted-2);
}
/* Типы каналов — ряд картинок с подписями под расшифровкой. */
.efeat-channels {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 36px 0 0;
padding: 0;
list-style: none;
}
.efeat-channel {
max-width: 340px;
}
.efeat-channel__img {
max-width: 100%;
height: auto;
margin-bottom: 14px;
}
.efeat-channel .efeat-channel__title {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: var(--eq-navy);
text-align: left;
margin: 0;
padding: 0;
}
/* ==================== как подбираем и поставляем ========================== */
.eproc {
padding: 56px 0;
background: #f5f8fb;
}
.eproc .eproc-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.eproc-subtitle {
max-width: 900px;
margin: 0 0 32px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.eproc-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.eproc-item {
display: flex;
align-items: flex-start;
gap: 16px;
}
/* Кружок с номером шага. Номер печатает разметка, маркер снят выше. */
.eproc-item__num {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 46px;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--eq-navy);
color: #fff;
font-family: Montserrat, sans-serif;
font-size: 19px;
font-weight: 600;
}
.eproc-item__num--accent {
background: var(--eq-accent);
}
.eproc-item .eproc-item__title {
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 24px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 6px;
padding: 0;
}
.eproc-item__text {
margin: 0;
font-size: 14px;
line-height: 22px;
color: var(--eq-muted);
}
/* ====================== данные для расчёта =============================== */
.edata {
padding: 56px 0;
background: #fff;
}
.edata .edata-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.edata-subtitle {
max-width: 900px;
margin: 0 0 30px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.edata-cols {
display: flex;
flex-wrap: wrap;
gap: 28px;
}
.edata-col {
flex: 1 1 320px;
background: #f5f8fb;
border: 1px solid #dce6f0;
border-radius: 10px;
padding: 28px;
}
.edata-col .edata-col__title {
font-family: Montserrat, sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 26px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 16px;
padding: 0;
}
.edata-col__ico {
margin-right: 6px;
}
.edata-col__list {
margin: 0;
padding-left: 20px;
list-style: disc;
}
.edata-col__item {
font-size: 15px;
line-height: 28px;
color: var(--eq-muted);
}
.edata-note {
margin: 18px 0 0;
font-size: 14px;
line-height: 23px;
color: #7a8894;
}
/* ============================ блок заявки ============================ */
.eform {
padding: 56px 0;
background: #eef4fa;
}
.eform .eform-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.eform-text {
max-width: 900px;
margin: 0 0 26px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
/* Переключатель вкладок: radio + соседние селекторы, без JS.
Radio не убраны display:none — иначе вкладки нельзя переключить с клавиатуры. */
.eform-tabs__radio {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
opacity: 0;
pointer-events: none;
}
.eform-tabs__nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.eform-tab {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 22px;
color: var(--eq-muted-2);
background: rgba(255, 255, 255, .45);
border: 1px solid #d3e0ec;
border-bottom: none;
border-radius: 10px 10px 0 0;
padding: 14px 30px;
cursor: pointer;
}
.eform-tab:hover {
background: rgba(255, 255, 255, .75);
}
#eform-tab-1:checked ~ .eform-tabs__nav .eform-tab[for="eform-tab-1"],
#eform-tab-2:checked ~ .eform-tabs__nav .eform-tab[for="eform-tab-2"] {
background: #fff;
color: var(--eq-navy);
}
/* Фокус с клавиатуры виден на вкладке, а не на скрытом radio. */
#eform-tab-1:focus-visible ~ .eform-tabs__nav .eform-tab[for="eform-tab-1"],
#eform-tab-2:focus-visible ~ .eform-tabs__nav .eform-tab[for="eform-tab-2"] {
outline: 2px solid var(--eq-accent);
outline-offset: -2px;
}
.eform-panel {
display: none;
}
#eform-tab-1:checked ~ .eform-panel--1,
#eform-tab-2:checked ~ .eform-panel--2 {
display: block;
}
.eform-card {
background: #fff;
border: 1px solid #d3e0ec;
border-radius: 0 10px 10px 10px;
padding: 32px;
}
.eform-panel__text {
margin: 0 0 24px;
font-size: 15px;
line-height: 24px;
color: var(--eq-muted-2);
}
/* Карточка подсказок к полям расширенного расчёта. */
.eform-note {
background: #fff;
border: 1px solid #dce6f0;
border-left: 4px solid var(--eq-accent);
border-radius: 8px;
padding: 16px 20px;
margin: 0 0 26px;
}
.eform-note p {
margin: 0;
font-size: 14px;
line-height: 23px;
color: var(--eq-muted);
}
.eform-note p + p {
margin-top: 10px;
}
.eform-note b,
.eform-note strong {
color: var(--eq-navy);
}
/* Курсив в подсказках — способ выделить фразу бордовым, не пуская в поле разметку. */
.eform-note em,
.eform-note i {
font-style: normal;
color: var(--eq-accent);
}
/* Старая форма онлайн-подбора со своей вёрсткой (forms.css, media.css):
здесь только снимаем её собственные внешние отступы и не даём
фиксированной ширине .form__body растянуть карточку. */
.eform-ext {
overflow-x: auto;
}
.eform-ext .podbor-forma .container {
width: auto;
max-width: none;
padding: 0;
}
.eform-ext .forma__title {
margin-top: 0;
}
.eform-ext .wpcf7-form {
margin-bottom: 0;
}
/* Переменные --hl-* объявлены в hero-lead.css на .hl-hero — вне hero их надо
задать заново, иначе кнопка отправки получает пустой background. */
.eform .hl-card {
--hl-navy: #1D3557;
--hl-accent: #92111C;
--hl-border: #d3dde7;
--hl-field-bg: #fbfcfd;
--hl-muted: #7a8894;
}
/* Ряд из трёх полей — разметка .eform-grid лежит в теле формы CF7 в админке. */
.eform-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 0 0 18px;
}
.eform-card .eform-grid .hl-field {
margin-bottom: 0;
}
.eform-card .hl-field__label {
font-weight: 600;
}
.eform-card input[type="text"].wpcf7-form-control,
.eform-card input[type="email"].wpcf7-form-control,
.eform-card input[type="tel"].wpcf7-form-control,
.eform-card textarea.wpcf7-form-control,
.eform-card .wpcf7-form-control.wpcf7-file {
border-radius: 6px;
}
.eform-card textarea.wpcf7-form-control {
height: 96px;
}
/* Подпись под файловым полем — статичный текст в теле формы. */
.eform-hint {
margin: -8px 0 18px;
font-size: 13px;
line-height: 21px;
color: #8b98a5;
}
/* hero-lead.css растягивает кнопку на всю ширину узкой карточки hero —
здесь карточка широкая, поэтому кнопка возвращается к «таблетке». */
.eform-card .wpcf7-submit,
.eform-card input[type="submit"] {
display: inline-block;
width: auto;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 22px;
padding: 15px 34px;
border-radius: 30px;
}
/* ============================ расчёт стоимости ============================ */
/* Блок со старого шаблона (там .stoimosti-*): шапка на белом,
ниже голубая полоса с вариантами подбора. */
.ecost {
padding: 56px 0 0;
background: #fff;
}
.ecost .ecost-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 12px;
padding: 0;
}
.ecost-text {
max-width: 900px;
margin: 0 0 34px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.ecost-text b,
.ecost-text strong {
color: var(--eq-navy);
}
/* Курсив — способ выделить фразу бордовым, как в подсказках формы. */
.ecost-text em,
.ecost-text i {
font-style: normal;
color: var(--eq-accent);
}
.ecost-banner {
background: #DFEBF3;
padding: 40px 0 46px;
}
.ecost .ecost-subtitle {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 22px;
line-height: 30px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 30px;
padding: 0;
}
.ecost-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
}
.ecost-item__img {
display: flex;
align-items: center;
justify-content: center;
width: 202px;
height: 122px;
max-width: 100%;
background: #fff;
border-radius: 30px;
margin: 0 0 16px;
}
.ecost-item__pic {
display: block;
width: 90px;
height: 90px;
object-fit: contain;
}
.ecost-item__title {
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 8px;
padding: 0;
}
.ecost-item__text {
margin: 0;
font-size: 15px;
line-height: 24px;
color: var(--eq-muted);
}
/* ============================= подбор замены ============================= */
.erep {
padding: 56px 0;
background: #fff;
}
.erep .erep-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.erep-lead {
max-width: 900px;
margin: 0 0 28px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.erep-cols {
display: flex;
gap: 28px;
align-items: stretch;
}
.erep-card {
border-radius: 10px;
padding: 30px;
}
.erep-card--docs {
flex: 1.15;
background: #f5f8fb;
border: 1px solid #dce6f0;
}
.erep-card--dark {
flex: 1;
background: var(--eq-navy);
color: #fff;
}
.erep .erep-card__title {
font-family: Montserrat, sans-serif;
font-size: 19px;
font-weight: 600;
line-height: 26px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 18px;
padding: 0;
}
.erep .erep-card--dark .erep-card__title {
color: #fff;
}
.erep-docs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
.erep-doc {
background: #fff;
border: 1px solid #e2eaf2;
border-radius: 8px;
padding: 14px 16px;
font-size: 14px;
line-height: 22px;
color: #33475b;
}
.erep-doc__ico {
margin-right: 6px;
}
.erep-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.erep-btn {
display: inline-block;
background: var(--eq-accent);
color: #fff;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 22px;
padding: 15px 32px;
border-radius: 28px;
text-decoration: none;
transition: opacity .2s ease;
}
.erep-btn:hover {
opacity: .85;
}
.erep-note {
font-size: 14px;
line-height: 22px;
color: #7a8894;
}
.erep-list {
margin: 0;
padding-left: 20px;
font-size: 15px;
line-height: 29px;
color: #edf3fa;
}
/* ============================== производители ============================= */
.ebrd {
padding: 56px 0;
background: #f5f8fb;
}
.ebrd .ebrd-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.ebrd-lead {
max-width: 900px;
margin: 0 0 28px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.ebrd-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.ebrd-card {
background: #fff;
border: 1px solid #e2eaf2;
border-radius: 10px;
padding: 24px;
}
.ebrd-card--accent {
background: var(--eq-navy);
border-color: var(--eq-navy);
}
.ebrd .ebrd-card__title {
font-family: Montserrat, sans-serif;
font-size: 20px;
font-weight: 600;
line-height: 28px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
/* В карточке-приглашении заголовок — фраза, а не марка: кегль меньше. */
.ebrd .ebrd-card--accent .ebrd-card__title {
font-size: 17px;
line-height: 24px;
color: #fff;
}
.ebrd-card__text {
margin: 0;
font-size: 13px;
line-height: 21px;
color: var(--eq-muted-2);
}
.ebrd-card--accent .ebrd-card__text {
color: #c3d2e2;
}
.ebrd-note {
margin: 16px 0 0;
font-size: 13px;
line-height: 21px;
color: #7a8894;
}
/* ========================== реализованные проекты ========================= */
.ecase {
padding: 56px 0;
background: #fff;
}
.ecase-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin: 0 0 28px;
}
.ecase .ecase-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.ecase-lead {
max-width: 820px;
margin: 0;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.ecase-all {
flex: none;
font-size: 16px;
line-height: 24px;
color: var(--eq-accent);
text-decoration: none;
white-space: nowrap;
border-bottom: 1px solid var(--eq-accent);
}
.ecase-all:hover {
opacity: .8;
}
.ecase-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
/* Карточка — один , поэтому её внутренности блочные span'ы. */
.ecase-card {
display: block;
height: 100%;
background: #f5f8fb;
border: 1px solid #e2eaf2;
border-radius: 10px;
padding: 26px;
text-decoration: none;
transition: box-shadow .2s ease, transform .2s ease;
}
.ecase-card:hover {
box-shadow: 0 6px 18px rgba(29, 53, 87, .12);
transform: translateY(-2px);
}
.ecase-card__tag {
display: inline-block;
background: var(--eq-navy);
color: #fff;
font-size: 12px;
line-height: 18px;
padding: 5px 14px;
border-radius: 14px;
margin: 0 0 14px;
}
.ecase-card__title {
display: block;
font-family: Montserrat, sans-serif;
font-size: 18px;
font-weight: 600;
line-height: 26px;
color: var(--eq-navy);
margin: 0 0 12px;
}
.ecase-card__body {
display: block;
font-size: 14px;
line-height: 23px;
color: var(--eq-muted);
}
.ecase-card__row {
display: block;
}
.ecase-card__row + .ecase-card__row {
margin-top: 8px;
}
.ecase-card__label {
color: var(--eq-navy);
}
/* ========================== сервис и запасные части ======================= */
.esrv {
padding: 56px 0;
background: #eef4fa;
}
.esrv .esrv-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.esrv-lead {
max-width: 900px;
margin: 0 0 30px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.esrv-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 0 0 28px;
padding: 0;
list-style: none;
}
/* Карточка — один , поэтому её внутренности блочные span'ы. */
.esrv-card {
display: flex;
gap: 16px;
align-items: flex-start;
height: 100%;
background: #fff;
border: 1px solid var(--eq-border);
border-radius: 10px;
padding: 24px;
text-decoration: none;
transition: box-shadow .2s ease, transform .2s ease;
}
.esrv-card:hover {
box-shadow: 0 6px 18px rgba(29, 53, 87, .12);
transform: translateY(-2px);
}
.esrv-card__icon {
flex: none;
font-size: 30px;
line-height: 1;
}
.esrv-card__body {
display: block;
}
.esrv-card__title {
display: block;
font-family: Montserrat, sans-serif;
font-size: 17px;
font-weight: 600;
line-height: 26px;
color: var(--eq-navy);
margin: 0 0 6px;
}
.esrv-card__text {
display: block;
font-size: 13px;
line-height: 21px;
color: var(--eq-muted-2);
}
.esrv-card__link {
display: block;
margin-top: 10px;
font-size: 14px;
line-height: 22px;
color: var(--eq-accent);
}
.esrv-btn {
display: inline-block;
background: var(--eq-navy);
color: #fff;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-decoration: none;
padding: 15px 34px;
border-radius: 28px;
}
.esrv-btn:hover {
opacity: .9;
color: #fff;
}
/* ========================== техническая документация ====================== */
.edoc {
padding: 56px 0;
background: #fff;
}
.edoc .edoc-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.edoc-lead {
max-width: 900px;
margin: 0 0 28px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.edoc-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
/* Карточка — один , поэтому её внутренности блочные span'ы. */
.edoc-card {
display: flex;
gap: 16px;
height: 100%;
background: #f5f8fb;
border: 1px solid #e2eaf2;
border-radius: 10px;
padding: 22px;
text-decoration: none;
transition: box-shadow .2s ease, transform .2s ease;
}
.edoc-card:hover {
box-shadow: 0 6px 18px rgba(29, 53, 87, .12);
transform: translateY(-2px);
}
.edoc-card__ico {
flex: none;
font-size: 32px;
line-height: 1;
}
.edoc-card__body {
display: block;
flex: 1;
}
.edoc-card__title {
display: block;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: var(--eq-navy);
margin: 0 0 6px;
}
.edoc-card__meta {
display: block;
font-size: 13px;
line-height: 20px;
color: #8b98a5;
margin: 0 0 8px;
}
.edoc-card__link {
display: block;
font-size: 14px;
line-height: 22px;
color: var(--eq-accent);
}
/* ============================ вопросы и ответы ============================ */
.efaq {
padding: 56px 0;
background: #f5f8fb;
}
.efaq .efaq-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 30px;
line-height: 40px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 10px;
padding: 0;
}
.efaq-lead {
max-width: 900px;
margin: 0 0 26px;
font-size: 16px;
line-height: 26px;
color: var(--eq-muted);
}
.efaq-item {
background: #fff;
border: 1px solid #e2eaf2;
border-radius: 10px;
padding: 22px 26px;
margin: 0 0 12px;
}
.efaq-item__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
cursor: pointer;
list-style: none;
}
/* Штатный треугольник в вебките и в остальных браузерах */
.efaq .efaq-item__head::-webkit-details-marker {
display: none;
}
.efaq .efaq-item__head::marker {
content: '';
}
.efaq .efaq-item__head:focus-visible {
/* main.css глушит outline через !important */
outline: 2px solid var(--eq-accent) !important;
outline-offset: 4px;
}
.efaq .efaq-item__q {
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 17px;
line-height: 26px;
color: var(--eq-navy);
text-align: left;
margin: 0;
padding: 0;
}
.efaq-item__num {
margin-right: 4px;
}
/* «Плюс», который превращается в «минус» при раскрытии — как в блоке главной. */
.efaq-item__mark {
position: relative;
flex: 0 0 auto;
width: 14px;
height: 26px;
}
.efaq-item__mark::before,
.efaq-item__mark::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: var(--eq-accent);
transform: translate(-50%, -50%);
transition: opacity .2s ease, transform .2s ease;
}
.efaq-item__mark::before {
width: 14px;
height: 2px;
}
.efaq-item__mark::after {
width: 2px;
height: 14px;
}
.efaq-item[open] .efaq-item__mark::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
.efaq-item__a {
/* высоту анимирует assets/js/faq.js — контент не должен выпирать */
overflow: hidden;
}
.efaq-item__a p {
font-size: 14px;
line-height: 24px;
color: var(--eq-muted);
margin: 8px 0 0;
}
@media (prefers-reduced-motion: reduce) {
.efaq-item__mark::before,
.efaq-item__mark::after {
transition: none;
}
}
/* ========================= текстовый блок о разделе ======================= */
.eseo {
padding: 56px 0;
background: #fff;
}
.eseo .eseo-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 26px;
line-height: 36px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 20px;
padding: 0;
}
.eseo-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.eseo .eseo-col__title {
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 17px;
line-height: 26px;
color: var(--eq-navy);
text-align: left;
margin: 0 0 8px;
padding: 0;
}
.eseo-col__text {
margin: 0;
font-size: 14px;
line-height: 24px;
color: var(--eq-muted-2);
}
/* ============================ отправьте задачу ============================ */
.ecta {
padding: 56px 0;
background: linear-gradient(135deg, #1d3557 0%, #2c4a75 100%);
}
.ecta .ecta-title {
font-family: Montserrat, sans-serif;
font-weight: 500;
font-size: 32px;
line-height: 42px;
color: #fff;
text-align: left;
margin: 0 0 12px;
padding: 0;
}
.ecta-lead {
max-width: 880px;
margin: 0 0 32px;
font-size: 17px;
line-height: 28px;
color: #c3d2e2;
}
.ecta-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin: 0 0 32px;
padding: 0;
list-style: none;
}
.ecta-card {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 10px;
padding: 26px;
}
.ecta-card__icon {
font-size: 30px;
line-height: 1;
margin: 0 0 12px;
}
.ecta .ecta-card__title {
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 26px;
color: #fff;
text-align: left;
margin: 0 0 8px;
padding: 0;
}
.ecta-card__text {
margin: 0 0 18px;
font-size: 14px;
line-height: 23px;
color: #b9c9db;
}
/* Кнопка прижата к низу карточки: описания разной длины не должны её сдвигать. */
.ecta-btn {
align-self: flex-start;
margin-top: auto;
display: inline-block;
font-size: 15px;
font-weight: 600;
line-height: 22px;
padding: 13px 28px;
border: 2px solid transparent;
border-radius: 26px;
text-decoration: none;
transition: opacity .2s ease;
}
.ecta-btn:hover {
opacity: .9;
}
.ecta-btn--primary {
background: var(--eq-accent);
border-color: var(--eq-accent);
color: #fff;
}
.ecta-btn--white {
background: #fff;
border-color: #fff;
color: var(--eq-navy);
}
.ecta-btn--ghost {
background: transparent;
border-color: #fff;
color: #fff;
}
.ecta-btn--primary:hover,
.ecta-btn--ghost:hover {
color: #fff;
}
.ecta-btn--white:hover {
color: var(--eq-navy);
}
.ecta-contacts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 36px;
border-top: 1px solid rgba(255, 255, 255, .18);
padding-top: 26px;
}
.ecta-contact {
font-size: 18px;
line-height: 26px;
color: #fff;
text-decoration: none;
}
.ecta-contact:hover {
color: #fff;
opacity: .85;
}
.ecta-note {
font-size: 15px;
line-height: 24px;
color: #b9c9db;
}
/* ================================ адаптив ================================ */
@media (max-width: 1024px) {
.ehero .ehero-title {
font-size: 30px;
line-height: 40px;
}
.ehero-lead {
font-size: 17px;
line-height: 27px;
}
.etype-list,
.echoose-list {
grid-template-columns: repeat(2, 1fr);
}
.etask-list,
.eind-list {
grid-template-columns: repeat(3, 1fr);
}
.eproc-list {
grid-template-columns: repeat(2, 1fr);
}
.ebrd-list {
grid-template-columns: repeat(3, 1fr);
}
.ecase-list {
grid-template-columns: repeat(2, 1fr);
}
.esrv-list,
.edoc-list {
grid-template-columns: repeat(2, 1fr);
}
.ecta-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.ehero {
padding: 32px 0 36px;
}
.ehero .ehero-title {
font-size: 26px;
line-height: 34px;
}
.ehero-btn {
font-size: 15px;
padding: 14px 26px;
}
.etype {
padding: 40px 0 16px;
}
.etype .etype-title {
font-size: 24px;
line-height: 32px;
}
.echoose {
padding: 40px 0;
margin-top: 32px;
}
.echoose .echoose-title {
font-size: 24px;
line-height: 32px;
}
.echoose .echoose-table-title {
font-size: 22px;
line-height: 30px;
}
.etask {
padding: 40px 0;
}
.etask .etask-title {
font-size: 24px;
line-height: 32px;
}
.etask-list,
.eind-list {
grid-template-columns: repeat(2, 1fr);
}
.eind {
padding: 40px 0;
}
.efeat {
padding: 40px 0 0;
}
.efeat .efeat-title {
font-size: 24px;
line-height: 32px;
}
.efeat-list {
grid-template-columns: 1fr;
}
.eproc {
padding: 40px 0;
}
.eproc .eproc-title {
font-size: 24px;
line-height: 32px;
}
.edata {
padding: 40px 0;
}
.edata .edata-title {
font-size: 24px;
line-height: 32px;
}
.edata-cols {
gap: 20px;
}
.edata-col {
flex-basis: 100%;
padding: 22px 20px;
}
.eind .eind-title {
font-size: 24px;
line-height: 32px;
}
.eform {
padding: 40px 0;
}
.eform .eform-title {
font-size: 24px;
line-height: 32px;
}
.eform-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.eform-tab {
font-size: 15px;
padding: 12px 18px;
}
.eform-card {
padding: 24px 20px;
border-radius: 10px;
}
.ecost {
padding: 40px 0 0;
}
.ecost .ecost-title {
font-size: 24px;
line-height: 32px;
}
.ecost .ecost-subtitle {
font-size: 20px;
line-height: 28px;
margin-bottom: 22px;
}
.ecost-list {
grid-template-columns: 1fr;
gap: 24px;
}
.erep {
padding: 40px 0;
}
.erep .erep-title {
font-size: 24px;
line-height: 32px;
}
.erep-cols {
flex-direction: column;
gap: 20px;
}
.erep-card {
padding: 24px 20px;
}
.ebrd {
padding: 40px 0;
}
.ebrd .ebrd-title {
font-size: 24px;
line-height: 32px;
}
.ebrd-list {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.ecase {
padding: 40px 0;
}
.ecase .ecase-title {
font-size: 24px;
line-height: 32px;
}
.ecase-head {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.ecase-list {
grid-template-columns: 1fr;
gap: 16px;
}
.esrv {
padding: 40px 0;
}
.esrv .esrv-title {
font-size: 24px;
line-height: 32px;
}
.esrv-btn {
width: 100%;
text-align: center;
}
.edoc {
padding: 40px 0;
}
.edoc .edoc-title {
font-size: 24px;
line-height: 32px;
}
.efaq {
padding: 40px 0;
}
.efaq .efaq-title {
font-size: 24px;
line-height: 32px;
}
.efaq-item {
padding: 18px 20px;
}
.eseo {
padding: 40px 0;
}
.eseo-cols {
grid-template-columns: 1fr;
gap: 22px;
}
.ecta {
padding: 40px 0;
}
.ecta .ecta-title {
font-size: 26px;
line-height: 36px;
}
.ecta-list {
grid-template-columns: 1fr;
}
.ecta-contacts {
gap: 14px;
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.etype-list,
.echoose-list,
.etask-list,
.eind-list,
.eproc-list {
grid-template-columns: 1fr;
}
.ehero-actions {
gap: 12px;
}
.ehero-btn {
width: 100%;
text-align: center;
}
.efeat-item {
gap: 14px;
}
.efeat-item__img {
flex-basis: 80px;
width: 80px;
}
.efeat-channels {
gap: 20px;
}
.erep-docs,
.ebrd-list,
.esrv-list,
.edoc-list {
grid-template-columns: 1fr;
}
.etype-card__media {
height: 180px;
}
.etype-card__img {
max-height: 180px;
}
}