.calc-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
display: none;
align-items: center;
justify-content: center;
padding: 0;
}
.calc-modal.is-active {
display: flex;
}
.calc-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(17, 53, 85, 0.8);
cursor: pointer;
}
.calc-modal__container {
position: relative;
width: 100%;
max-width: 794px;
background: #fff;
border-radius: 7px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}
.calc-modal.is-active .calc-modal__container {
opacity: 1;
transform: translateY(0);
}
.calc-modal__close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
cursor: pointer;
z-index: 10;
padding: 0;
width: 34px;
height: 34px;
}
.calc-modal__close img {
width: 100%;
height: 100%;
}
.calc-modal__header {
display: flex;
background: #0e3456;
background-image: linear-gradient(90deg, rgba(28, 87, 142, 0) 2.11%, #1c568d 91.56%);
height: 135px;
position: relative;
overflow: hidden;
}
.calc-modal__header-content {
flex: 1;
padding: 22px;
padding-right: 0;
color: #fff;
z-index: 2;
min-width: fit-content;
}
.calc-modal__title {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
.calc-modal__subtitle {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 500;
margin: 12px 0 0;
opacity: 0.9;
}
.calc-modal__header-img {
min-width: 238px;
position: relative;
margin-top: -6px;
right: -30px;
box-sizing: border-box;
}
.calc-modal__building {
position: relative;
width: 100%;
height: 100%;
}
.calc-modal__building img {
position: absolute;
}
.calc-modal__building-bg { z-index: 1; top: 0; left: 0; width: 100%; }
.calc-modal__building-panels { z-index: 2; top: 43px; left: 5px; width: 230px; }
.calc-modal__building-elements { z-index: 3; top: 36px; left: 5px; width: 230px; }
.calc-modal__building-roof { z-index: 4; top: 32px; left: 4px; width: 232px; }
.calc-modal__content {
padding: 30px;
}
.calc-modal__step {
display: none;
position: relative;
}
.calc-modal__step.is-active {
display: block;
} .calc-modal__choice {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.calc-modal__choice-card {
flex: 1;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #edeef0;
border-radius: 7px;
background: #f6f7f9;
padding: 20px;
cursor: pointer;
transition: all 0.2s ease;
}
.calc-modal__choice-card input {
width: 0;
}
.calc-modal__choice-card p {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 700;
color: #113555;
margin: 0;
}
.calc-modal__choice-card:hover {
border-color: #123554;
}
.calc-modal__choice-card.is-active {
border: 2px solid #123554;
}
.calc-modal__cursor {
position: absolute;
bottom: 40px;
right: 40px;
width: 53px;
transform: rotate(-15deg);
pointer-events: none;
} .calc-modal__grid {
margin-bottom: 24px;
}
.calc-modal__group:last-child {
margin-bottom: 0;
}
.calc-modal__step--3 .calc-modal__grid {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 0;
}
.calc-modal__step--3 .calc-modal__grid .calc-modal__group:first-child {
width: 230px;
}
.calc-modal__step--3 .calc-modal__grid .calc-modal__group:last-child {
width: 484px;
}
.calc-modal__group {
margin-bottom: 24px;
}
.calc-modal__group-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 700;
color: #113555;
margin: 0 0 20px;
}
.calc-modal__inputs-row {
display: flex;
align-items: flex-start;
gap: 20px;
}
.calc-modal__input-wrapper {
flex: 1;
}
.calc-modal__input-wrapper--full {
max-width: 357px;
}
.calc-modal__input-field {
display: flex;
align-items: center;
padding: 2px 9px;
position: relative;
height: 44px;
}
.calc-modal__input-field::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: url(//panel-tek.ru/wp-content/themes/panel/template-parts/home-page/calc-popup/img/line.svg) no-repeat center center;
}
.calc-modal__input-field--long::after {
background: url(//panel-tek.ru/wp-content/themes/panel/template-parts/home-page/calc-popup/img/line-long.svg) no-repeat center center;
}
.calc-modal__input-field img:first-child {
width: 24px;
margin-right: 10px;
}
.calc-modal__input-field input,
.calc-modal__input-field select {
flex: 1;
border: none;
background: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 500;
color: #2f2f2f;
outline: none;
padding: 10px 0;
appearance: none;
width: 100%;
}
.calc-modal__input-field input::placeholder {
color: rgba(17, 53, 85, 0.3);
}
.calc-modal__arrow {
width: 12px !important;
margin-left: 10px;
display: none;
}
.calc-modal__input-label {
display: block;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 500;
color: #828282;
margin-top: 6px;
}
.calc-modal__bracket {
margin-top: 10px;
}
.calc-modal__area-display {
display: flex;
flex-direction: column;
align-items: center;
min-width: 60px;
margin-top: 10px;
}
.calc-modal__area-value {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 700;
color: #113555;
}
.calc-modal__area-label {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 500;
color: #828282;
margin-top: 7px;
border-top: 1px solid #edeef0;
padding-top: 7px;
width: 58px;
text-align: center;
} .calc-modal__btn {
width: 100%;
height: 50px;
background: #ffbd45;
border: none;
border-radius: 4px;
font-family: 'Exo 2', sans-serif;
font-size: 14px;
font-weight: 700;
color: #113555;
text-transform: uppercase;
letter-spacing: 0.56px;
cursor: pointer;
transition: background 0.2s ease;
margin-top: 24px;
}
.calc-modal__btn:hover {
background: #ffad1f;
}
.calc-modal__btn--loading {
background: #ffbd45 linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.04) 35.14%, rgba(0,0,0,0) 35.49%);
background-size: 200% 100%;
animation: loading-shimmer 2s infinite linear;
cursor: default;
}
@keyframes loading-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
} .calc-modal__footer {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: #f5f5f5;
height: 32px;
margin: 30px -30px -30px;
}
.calc-modal__footer img {
width: 16px;
}
.calc-modal__footer span {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 500;
color: #c0c0c0;
} .calc-modal__result-card {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #edeef0;
border-radius: 7px;
background: #f6f7f9;
padding: 29px;
margin-bottom: 12px;
}
.calc-modal__result-info {
flex: 1;
}
.calc-modal__result-title {
font-family: 'Montserrat', sans-serif;
font-size: 18px;
font-weight: 700;
color: #113555;
margin: 0;
}
.calc-modal__result-subtitle {
font-family: 'Montserrat', sans-serif;
font-size: 14px;
font-weight: 600;
color: rgba(17, 53, 85, 0.8);
margin: 5px 0 20px;
}
.calc-modal__price-box {
width: 250px;
height: 117px;
background: #0e3456;
background-image: linear-gradient(90deg, #1c568d 2.11%, rgba(28, 87, 142, 0) 91.56%);
border-radius: 7px;
box-shadow: 0 8px 25px rgba(47, 75, 101, 0.25);
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.calc-modal__price-value {
font-family: 'Montserrat', sans-serif;
font-size: 35px;
font-weight: 600;
color: #fff;
filter: blur(10px);
}
.calc-modal__price-label-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3px;
}
.calc-modal__price-label {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
text-align: left;
}
.calc-modal__agreement {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 12px;
}
.calc-modal__agreement p {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 500;
color: #2f2f2f;
margin: 0;
}
.calc-modal__agreement a {
text-decoration: underline;
color: inherit;
} @media (max-width: 991px) {
.calc-modal__container {
max-width: 328px;
}
.calc-modal__header {
height: 170px;
}
.calc-modal__header-content {
padding: 16px;
padding-right: 0;
max-width: 260px;
min-width: unset;
box-sizing: border-box;
}
.calc-modal__title {
font-size: 18px;
}
.calc-modal__subtitle {
font-size: 15px;
}
.calc-modal__header-img {
position: absolute;
top: -10px;
right: -148px;
width: 182px;
height: 136px;
}
.calc-modal__content {
padding: 16px;
}
.calc-modal__choice {
flex-direction: column;
gap: 8px;
}
.calc-modal__choice-card {
height: auto;
padding: 23px;
}
.calc-modal__choice-card p {
font-size: 20px;
}
.calc-modal__inputs-row {
flex-direction: column;
gap: 8px;
}
.calc-modal__bracket {
display: none;
}
.calc-modal__area-display {
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-top: 0;
position: absolute;
right: 0;
width: fit-content;
flex-direction: column;
top: -2px;
}
.calc-modal__area-label {
border-top: none;
padding-top: 0;
text-align: right;
margin-top: 2px;
}
.calc-modal__result-card {
flex-direction: column;
padding: 16px;
align-items: flex-start;
}
.calc-modal__price-box {
width: 100%;
height: 90px;
margin-top: 16px;
}
.calc-modal__price-value {
font-size: 26px;
}
.calc-modal__footer {
margin: 16px -16px -16px;
}
.calc-modal__building-panels { top: 33px; left: 4px; width: 176px; }
.calc-modal__building-elements { top: 27px; left: 3px; width: 176px; }
.calc-modal__building-roof { top: 24px; left: 3px; width: 178px; }
.calc-modal__input-field img:first-child {
margin-right: 5px;
}
.calc-modal__step--2 .calc-modal__group:first-child .calc-modal__inputs-row {
flex-direction: row;
}
.calc-modal__step--2 .calc-modal__group:last-child .calc-modal__input-wrapper {
width: 100%;
}
.calc-modal__input-field::after,
.calc-modal__input-field--long::after {
background-size: contain;
}
.calc-modal__btn {
margin-top: 0;
}
.calc-modal__step--3 .calc-modal__grid {
flex-direction: column;
}
.calc-modal__step--3 .calc-modal__grid .calc-modal__group:first-child {
width: 100%;
}
.calc-modal__step--3 .calc-modal__grid .calc-modal__group:last-child {
width: 100%;
}
.calc-modal__step--3 .calc-modal__grid .calc-modal__group:last-child .calc-modal__input-wrapper {
width: 100%;
}
.calc-modal__step--3 .calc-modal__grid {
margin-bottom: 24px;
}
}
body.fs_body_block {
overflow: hidden;
}