Compare commits
3 Commits
| Author | SHA1 | Date |
|---|---|---|
GP
|
e67ea16299 | 7 months ago |
 Максим Максимов
|
d8f89ad9a9 | 7 months ago |
|
Максим Максимов
|
043a617c87 | 8 months ago |
@ -1,487 +1,16 @@ |
|||||||
/* Переменные, шрифты, UI kit */ |
/* Переменные, шрифты, UI kit */ |
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: "Proxima Nova"; |
|
||||||
src: local("Proxima Nova Bold"), |
|
||||||
local("ProximaNova-Bold"), |
|
||||||
url("/assets/fonts/ProximaNova-Bold.woff2") format("woff2"), |
|
||||||
url("/assets/fonts/ProximaNova-Bold.woff") format("woff"), |
|
||||||
url("/assets/fonts/ProximaNova-Bold.ttf") format("ttf"); |
|
||||||
font-weight: 700; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: "Proxima Nova"; |
|
||||||
src: local("Proxima Nova Semibold"), |
|
||||||
local("ProximaNova-Semibold"), |
|
||||||
url("/assets/fonts/ProximaNova-Semibold.woff2") format("woff2"), |
|
||||||
url("/assets/fonts/ProximaNova-Semibold.woff") format("woff"), |
|
||||||
url("/assets/fonts/ProximaNova-Semibold.ttf") format("ttf"); |
|
||||||
font-weight: 600; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
|
||||||
font-family: "Proxima Nova"; |
|
||||||
src: local("Proxima Nova Regular"), |
|
||||||
local("ProximaNova-Regular"), |
|
||||||
url("/assets/fonts/ProximaNova-Regular.woff2") format("woff2"), |
|
||||||
url("/assets/fonts/ProximaNova-Regular.woff") format("woff"), |
|
||||||
url("/assets/fonts/ProximaNova-Regular.ttf") format("ttf"); |
|
||||||
font-weight: 400; |
|
||||||
} |
|
||||||
|
|
||||||
@font-face { |
/* |
||||||
font-family: "Proxima Nova"; |
|
||||||
src: local("Proxima Nova Light"), |
|
||||||
local("ProximaNova-Light"), |
|
||||||
url("/assets/fonts/ProximaNova-Light.woff2") format("woff2"), |
|
||||||
url("/assets/fonts/ProximaNova-Light.woff") format("woff"), |
|
||||||
url("/assets/fonts/ProximaNova-Light.ttf") format("ttf"); |
|
||||||
font-weight: 300; |
|
||||||
} |
|
||||||
|
|
||||||
|
ШАБЛОН использования глобальных переменных: |
||||||
*{ |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
:root { |
:root { |
||||||
--font-family: "Proxima Nova", sans-serif; |
--main-text: #e1667c; |
||||||
|
--main-color: #8da6cb; |
||||||
--red: #d3241d; |
--font-family: "Craftwork Grotesk", sans-serif; |
||||||
--blood: #ae0b05; |
|
||||||
|
|
||||||
--background-main: #111114; |
|
||||||
--background-grey: #2a2a2d; |
|
||||||
--background-grey-hover: #46464a; |
|
||||||
|
|
||||||
--link: #86868b; |
|
||||||
|
|
||||||
--text-white: #fff; |
|
||||||
} |
} |
||||||
|
|
||||||
body{ |
*/ |
||||||
background-color: var(--background-main); |
|
||||||
|
|
||||||
font-family: var(--font-family); |
|
||||||
} |
|
||||||
|
|
||||||
.modal{ |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
|
|
||||||
height: 100vh; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
background-color: rgba(17, 17, 20, .8); |
|
||||||
|
|
||||||
z-index: 100; |
|
||||||
|
|
||||||
pointer-events: none; |
|
||||||
|
|
||||||
transition: opacity .3s; |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
.modal.active{ |
|
||||||
pointer-events: auto; |
|
||||||
|
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.modal__item{ |
|
||||||
padding: 88px 64px; |
|
||||||
|
|
||||||
background-color: var(--background-main); |
|
||||||
|
|
||||||
position: relative; |
|
||||||
|
|
||||||
display: none; |
|
||||||
} |
|
||||||
.modal__item.active{ |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
/* text */ |
|
||||||
.title-1{ |
|
||||||
font-weight: 700; |
|
||||||
text-transform: uppercase; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.title-2{ |
|
||||||
font-weight: 700; |
|
||||||
color: var(--text-white); |
|
||||||
|
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
.title-3{ |
|
||||||
font-weight: 700; |
|
||||||
color: var(--text-white); |
|
||||||
|
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
.title-4{ |
|
||||||
font-weight: 700; |
|
||||||
color: var(--text-white); |
|
||||||
|
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
.title--center{ |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
.text-1{ |
|
||||||
font-weight: 400; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.text-2{ |
|
||||||
font-weight: 400; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.text-3{ |
|
||||||
font-weight: 400; |
|
||||||
color: var(--text-white); |
|
||||||
text-transform: uppercase; |
|
||||||
} |
|
||||||
.text--bo-line{ |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
/* text */ |
|
||||||
|
|
||||||
/* components */ |
|
||||||
.btn-social{ |
|
||||||
margin-left: 16px; |
|
||||||
|
|
||||||
width: 40px; |
|
||||||
aspect-ratio: 1; |
|
||||||
|
|
||||||
padding: 8px; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
border-radius: 4px; |
|
||||||
|
|
||||||
background-color: var(--background-grey); |
|
||||||
|
|
||||||
transition: background-color .3s; |
|
||||||
|
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.btn-social:first-child{ |
|
||||||
margin-left: 0; |
|
||||||
} |
|
||||||
.btn-social:hover{ |
|
||||||
background-color: var(--background-grey-hover); |
|
||||||
} |
|
||||||
.btn-social:active{ |
|
||||||
background-color: var(--background-grey-hover); |
|
||||||
} |
|
||||||
.btn-social> img{ |
|
||||||
width: 24px; |
|
||||||
aspect-ratio: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.btn-big{ |
|
||||||
display: block; |
|
||||||
|
|
||||||
padding: 22.5px 32px; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
font-size: 16px; |
|
||||||
text-transform: uppercase; |
|
||||||
color: var(--text-white); |
|
||||||
text-decoration: none; |
|
||||||
text-align: center; |
|
||||||
|
|
||||||
border-radius: 4px; |
|
||||||
|
|
||||||
transition: background-color .3s; |
|
||||||
background-color: rgba(17, 17, 20, 0); |
|
||||||
|
|
||||||
cursor: pointer; |
|
||||||
border: none; |
|
||||||
} |
|
||||||
.btn-big--border{ |
|
||||||
padding: 21px 32px; |
|
||||||
|
|
||||||
border: 1px solid; |
|
||||||
} |
|
||||||
.btn-big--border--blood{ |
|
||||||
border-color: var(--blood); |
|
||||||
} |
|
||||||
.btn-big--border--blood:hover{ |
|
||||||
background-color: var(--red); |
|
||||||
} |
|
||||||
.btn-big--border--blood:active{ |
|
||||||
background-color: var(--blood); |
|
||||||
} |
|
||||||
.btn-big--border--white{ |
|
||||||
border-color: var(--text-white); |
|
||||||
} |
|
||||||
.btn-big--border--white:hover{ |
|
||||||
background-color: var(--background-grey-hover); |
|
||||||
} |
|
||||||
.btn-big--border--white:active{ |
|
||||||
background-color: rgba(17, 17, 20, 0); |
|
||||||
} |
|
||||||
.btn-big--blood{ |
|
||||||
background-color: var(--blood); |
|
||||||
} |
|
||||||
.btn-big--blood:hover{ |
|
||||||
background-color: var(--red); |
|
||||||
} |
|
||||||
.btn-big--blood:active{ |
|
||||||
background-color: var(--blood); |
|
||||||
} |
|
||||||
|
|
||||||
.btn-big--social{ |
|
||||||
padding-right: 66px; |
|
||||||
|
|
||||||
background-position: top 20px right 34px; |
|
||||||
background-size: 24px; |
|
||||||
background-repeat: no-repeat; |
|
||||||
} |
|
||||||
.btn-big--tg{ |
|
||||||
background-image: url(/assets/img/social/telegram.svg); |
|
||||||
} |
|
||||||
.btn-big--ws{ |
|
||||||
background-image: url(/assets/img/social/whatsapp.svg); |
|
||||||
} |
|
||||||
|
|
||||||
.btn--100-per{ |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.link{ |
|
||||||
font-weight: 400; |
|
||||||
text-transform: uppercase; |
|
||||||
text-decoration: underline; |
|
||||||
text-decoration-skip-ink: none; |
|
||||||
color: var(--link); |
|
||||||
} |
|
||||||
|
|
||||||
.input__block{ |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
|
|
||||||
border-radius: 4px; |
|
||||||
|
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.input__label{ |
|
||||||
position: absolute; |
|
||||||
top: 14px; |
|
||||||
left: 24px; |
|
||||||
|
|
||||||
|
|
||||||
font-size: 12px; |
|
||||||
color: var(--link); |
|
||||||
text-transform: uppercase; |
|
||||||
|
|
||||||
transition: all 0.3s; |
|
||||||
|
|
||||||
pointer-events: none; |
|
||||||
} |
|
||||||
.input__field{ |
|
||||||
height: 64px; |
|
||||||
|
|
||||||
padding: 31px 24px 14px 24px; |
|
||||||
|
|
||||||
height: 64px; |
|
||||||
|
|
||||||
background-color: var(--background-grey-hover); |
|
||||||
border: none; |
|
||||||
border-radius: 4px; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
font-size: 16px; |
|
||||||
color: var(--text-white); |
|
||||||
|
|
||||||
outline: none; |
|
||||||
transition: all 0.3s; |
|
||||||
} |
|
||||||
.input__field:hover{ |
|
||||||
border: 1px solid var(--text-white); |
|
||||||
} |
|
||||||
.input__field:focus{ |
|
||||||
border: 1px solid var(--text-white); |
|
||||||
} |
|
||||||
.input__field:placeholder-shown + .input__label{ |
|
||||||
top: 22.5px; |
|
||||||
left: 24px; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
font-size: 16px; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.input__field:focus + .input__label{ |
|
||||||
top: 14px; |
|
||||||
left: 24px; |
|
||||||
|
|
||||||
|
|
||||||
font-size: 12px; |
|
||||||
color: var(--link); |
|
||||||
} |
|
||||||
.input__field:not(:placeholder-shown):invalid{ |
|
||||||
border: 1px solid #ef120a; |
|
||||||
} |
|
||||||
.input__error{ |
|
||||||
margin-top: 16px; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
font-size: 12px; |
|
||||||
text-transform: uppercase; |
|
||||||
color: var(--text-white); |
|
||||||
|
|
||||||
display: none; |
|
||||||
} |
|
||||||
.form.checked .input__error{ |
|
||||||
display: block; |
|
||||||
} |
|
||||||
|
|
||||||
.form__item{ |
|
||||||
margin-top: 16px; |
|
||||||
} |
|
||||||
.form__item:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.form__item--two{ |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
.form__item--two .input__block{ |
|
||||||
width: calc(50% - 8px); |
|
||||||
} |
|
||||||
.form__additional{ |
|
||||||
margin-top: 32px; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.form__additional input[type="file"]{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.form-additional__text{ |
|
||||||
margin-left: 16px; |
|
||||||
} |
|
||||||
.form input[type=submit]{ |
|
||||||
margin-top: 32px; |
|
||||||
|
|
||||||
width: 100%; |
|
||||||
|
|
||||||
border: none; |
|
||||||
} |
|
||||||
.form__link{ |
|
||||||
margin-left: 6px; |
|
||||||
|
|
||||||
font-size: 16px; |
|
||||||
text-transform: uppercase; |
|
||||||
text-decoration: underline; |
|
||||||
text-decoration-skip-ink: none; |
|
||||||
color: var(--link); |
|
||||||
} |
|
||||||
.form__file{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.form__mini-btn{ |
|
||||||
background-color: var(--background-grey-hover); |
|
||||||
border: none; |
|
||||||
|
|
||||||
transition: all .3s; |
|
||||||
} |
|
||||||
.form__mini-btn:hover{ |
|
||||||
opacity: .8; |
|
||||||
} |
|
||||||
.form__checkbox{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.form__checkbox:checked + .form-checkbox__square{ |
|
||||||
border-color: var(--blood); |
|
||||||
|
|
||||||
background-image: url(/assets/img/icon/red-arrow.svg); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: center; |
|
||||||
} |
|
||||||
.form.checked .form__checkbox:invalid + .form-checkbox__square{ |
|
||||||
border-color: var(--blood); |
|
||||||
} |
|
||||||
.form__checkbox-block{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.form-checkbox__square{ |
|
||||||
width: 18px; |
|
||||||
aspect-ratio: 1; |
|
||||||
|
|
||||||
border-radius: 4px; |
|
||||||
border: 1.50px solid var(--text-white); |
|
||||||
|
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
/* components */ |
|
||||||
|
|
||||||
/* header */ |
|
||||||
.header__logo{ |
|
||||||
width: 74px; |
|
||||||
height: 64px; |
|
||||||
|
|
||||||
background-image: url(/assets/img/main/logo.svg); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-size: contain; |
|
||||||
} |
|
||||||
/* header */ |
|
||||||
|
|
||||||
/* footer */ |
|
||||||
.footer__logo{ |
|
||||||
width: 74px; |
|
||||||
height: 64px; |
|
||||||
} |
|
||||||
.footer__menu{ |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
.footer-menu__list{ |
|
||||||
list-style-type: none; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
text-transform: uppercase; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.footer-menu__list a{ |
|
||||||
color: var(--text-white); |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
.footer__text{ |
|
||||||
margin-top: 24px; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.footer__text:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.footer__text--no-line{ |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
.footer__media{ |
|
||||||
margin-top: 24px; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.footer__review{ |
|
||||||
width: 309px; |
|
||||||
height: 146px; |
|
||||||
} |
|
||||||
.footer__about{ |
|
||||||
font-weight: 400; |
|
||||||
font-size: 16px; |
|
||||||
text-transform: uppercase; |
|
||||||
color: var(--link); |
|
||||||
} |
|
||||||
/* footer */ |
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,81 +1,5 @@ |
|||||||
/* Стили для мобильных устройств */ |
/* Стили для мобильных устройств */ |
||||||
@media only screen and (max-width: 576px) { |
@media only screen and (max-width: 576px) { |
||||||
|
|
||||||
/* component */ |
|
||||||
.link{ |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
|
} |
||||||
/* footer */ |
|
||||||
.footer{ |
|
||||||
padding: 40px 16px; |
|
||||||
} |
|
||||||
.footer__wrapper{ |
|
||||||
padding: 0; |
|
||||||
|
|
||||||
display: block; |
|
||||||
} |
|
||||||
.footer__item{ |
|
||||||
margin-top: 40px; |
|
||||||
} |
|
||||||
.footer__item:nth-child(2){ |
|
||||||
margin-left: 0; |
|
||||||
} |
|
||||||
.footer__contact .footer__item:nth-child(2), |
|
||||||
.footer__contact .footer__item:nth-child(3){ |
|
||||||
margin-top: 40px; |
|
||||||
} |
|
||||||
.footer__contact{ |
|
||||||
display: block; |
|
||||||
} |
|
||||||
.footer__contact .footer__item{ |
|
||||||
margin-left: 0; |
|
||||||
} |
|
||||||
.footer-menu__item{ |
|
||||||
margin-left: 53px; |
|
||||||
} |
|
||||||
.footer-menu__item:first-child{ |
|
||||||
margin-left: 0; |
|
||||||
} |
|
||||||
.footer-menu__list{ |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
.footer-menu__list li{ |
|
||||||
margin-top: 16px; |
|
||||||
} |
|
||||||
.footer-menu__list li:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.footer__text{ |
|
||||||
display: block; |
|
||||||
|
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
.footer__about{ |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: start; |
|
||||||
} |
|
||||||
.footer-about__link{ |
|
||||||
margin-top: 24px; |
|
||||||
} |
|
||||||
/* footer */ |
|
||||||
} |
|
||||||
|
|
||||||
/* services */ |
|
||||||
@media only screen and (max-width: 576px) { |
|
||||||
.services__content .title-4{ |
|
||||||
margin-bottom: 0; |
|
||||||
} |
|
||||||
.services__item .text-2{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
/* services */ |
|
||||||
|
|
||||||
/* call */ |
|
||||||
.call .title-3{ |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
/* call */ |
|
||||||
@ -1,796 +1,5 @@ |
|||||||
/* Стили для планшетов */ |
/* Стили для планшетов */ |
||||||
@media only screen and (max-width: 992px) { |
@media only screen and (max-width: 992px) { |
||||||
.wrapper{ |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.phone--hone{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
|
|
||||||
/* text */ |
|
||||||
.title-1{ |
|
||||||
font-size: 32px; |
|
||||||
} |
|
||||||
.title-2{ |
|
||||||
font-size: 32px; |
|
||||||
} |
|
||||||
.title-3{ |
|
||||||
font-size: 32px; |
|
||||||
} |
|
||||||
.title-4{ |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
.text-1{ |
|
||||||
font-size: 18px; |
|
||||||
} |
|
||||||
.text-2{ |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
/* text */ |
|
||||||
|
|
||||||
/* component */ |
|
||||||
.btn-big{ |
|
||||||
padding: 23.5px 19.5px; |
|
||||||
|
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
/* component */ |
|
||||||
|
|
||||||
/* header */ |
|
||||||
.header{ |
|
||||||
padding: 24px 16px; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.header__wrapper{ |
|
||||||
padding: 0; |
|
||||||
} |
|
||||||
.header__phone{ |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.header-phone__item{ |
|
||||||
margin-left: 24px; |
|
||||||
|
|
||||||
width: 32px; |
|
||||||
height: 32px; |
|
||||||
|
|
||||||
transition: opacity .3s; |
|
||||||
} |
|
||||||
.header-phone__item > img{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
.header-phone__item:first-child{ |
|
||||||
margin-left: 0; |
|
||||||
} |
|
||||||
.header-phone__item:active{ |
|
||||||
opacity: .8; |
|
||||||
} |
|
||||||
|
|
||||||
.button-menu{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
|
|
||||||
position: relative; |
|
||||||
|
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.button-menu__open{ |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
|
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
|
|
||||||
transition: opacity .3s; |
|
||||||
} |
|
||||||
|
|
||||||
.phone-menu{ |
|
||||||
position: absolute; |
|
||||||
top: 0px; |
|
||||||
right: 0; |
|
||||||
left: 0; |
|
||||||
|
|
||||||
height: 0; |
} |
||||||
width: 100%; |
|
||||||
|
|
||||||
background-color: var(--background-main); |
|
||||||
|
|
||||||
z-index: 10; |
|
||||||
overflow: hidden; |
|
||||||
transition: all .3s; |
|
||||||
} |
|
||||||
.phone-menu.active{ |
|
||||||
height: 100vh; |
|
||||||
overflow-y: auto; |
|
||||||
} |
|
||||||
/* .phone-menu__block-content{ |
|
||||||
height: 0; |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
z-index: 10; |
|
||||||
|
|
||||||
transition: all .5s; |
|
||||||
} */ |
|
||||||
.phone-menu__content{ |
|
||||||
padding: 104px 16px 40px 16px; |
|
||||||
|
|
||||||
position: relative; |
|
||||||
} |
|
||||||
.phone-menu__sub{ |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 100%; |
|
||||||
|
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
|
|
||||||
padding: 104px 16px 40px 16px; |
|
||||||
|
|
||||||
background-color: var(--background-main); |
|
||||||
|
|
||||||
transition: all .5s; |
|
||||||
|
|
||||||
overflow-y: auto; |
|
||||||
} |
|
||||||
.phone-menu__sub.open{ |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
.phone-menu__sub > li:nth-child(2) a{ |
|
||||||
font-weight: 700; |
|
||||||
font-size: 32px; |
|
||||||
} |
|
||||||
.phone-menu-content__close{ |
|
||||||
position: absolute; |
|
||||||
top: 40px; |
|
||||||
right: 16px; |
|
||||||
|
|
||||||
width: 32px; |
|
||||||
aspect-ratio: 1; |
|
||||||
|
|
||||||
background-image: url(/assets/img/icon/close.svg); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: center; |
|
||||||
|
|
||||||
background-color: var(--background-main); |
|
||||||
border: none; |
|
||||||
} |
|
||||||
.phone-menu__block{ |
|
||||||
margin-top: 32px; |
|
||||||
} |
|
||||||
.phone-menu__title{ |
|
||||||
font-weight: 700; |
|
||||||
font-size: 32px; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.phone-menu__list{ |
|
||||||
list-style-type: none; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
font-size: 14px; |
|
||||||
text-transform: uppercase; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.phone-menu__list a{ |
|
||||||
font-weight: 400; |
|
||||||
font-size: 14px; |
|
||||||
text-transform: uppercase; |
|
||||||
color: var(--text-white); |
|
||||||
|
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
.phone-menu__list li{ |
|
||||||
margin-top: 24px; |
|
||||||
} |
|
||||||
.phone-menu__list li:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.phone-menu--next{ |
|
||||||
display: block; |
|
||||||
|
|
||||||
background-image: url(/assets/img/icon/arrow-right.svg); |
|
||||||
background-repeat: no-repeat; |
|
||||||
background-position: center right; |
|
||||||
} |
|
||||||
|
|
||||||
.phone-menu__text{ |
|
||||||
margin-top: 24px; |
|
||||||
|
|
||||||
display: block; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
font-size: 16px; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.phone-menu__text:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.phone-menu__text > a { |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
.phone-menu__text--no-line{ |
|
||||||
text-decoration: none; |
|
||||||
} |
|
||||||
.phone-social{ |
|
||||||
margin-top: 24px; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.phone-menu{ |
|
||||||
display: block; |
|
||||||
} |
|
||||||
.phone-search{ |
|
||||||
position: absolute; |
|
||||||
top: 112px; |
|
||||||
left: 0; |
|
||||||
|
|
||||||
width: 100%; |
|
||||||
height: 0; |
|
||||||
|
|
||||||
display: block; |
|
||||||
|
|
||||||
transition: all .3s; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.phone-search.active{ |
|
||||||
height: 79px; |
|
||||||
} |
|
||||||
.phone-search.hidden{ |
|
||||||
overflow: visible; |
|
||||||
} |
|
||||||
.phone-search__content{ |
|
||||||
padding: 16px; |
|
||||||
|
|
||||||
background-color: var(--background-grey-hover); |
|
||||||
} |
|
||||||
.phone-search__input{ |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
padding: 14.5px 23px; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
font-size: 14px; |
|
||||||
text-transform: uppercase; |
|
||||||
color: var(--text-white); |
|
||||||
|
|
||||||
border: 1px solid var(--text-white); |
|
||||||
border-radius: 4px; |
|
||||||
|
|
||||||
background-color: rgba(0, 0, 0, 0); |
|
||||||
|
|
||||||
outline: none; |
|
||||||
} |
|
||||||
.phone-search__input::placeholder{ |
|
||||||
color: var(--link); |
|
||||||
} |
|
||||||
.phone-search__found{ |
|
||||||
position: absolute; |
|
||||||
top: 95px; |
|
||||||
left: 16px; |
|
||||||
right: 16px; |
|
||||||
|
|
||||||
max-height: 256px; |
|
||||||
width: calc(100% - 32px); |
|
||||||
|
|
||||||
padding: 16px; |
|
||||||
|
|
||||||
background-color: var(--background-grey-hover); |
|
||||||
border-radius: 4px; |
|
||||||
|
|
||||||
overflow-y: auto; |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.phone-search__found.active{ |
|
||||||
display: block; |
|
||||||
} |
|
||||||
.phone-search__item{ |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.phone-search__item{ |
|
||||||
margin-top: 24px; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
} |
|
||||||
.phone-search__item:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.phone-search-item__img{ |
|
||||||
width: 64px; |
|
||||||
aspect-ratio: 1; |
|
||||||
|
|
||||||
border-radius: 8px; |
|
||||||
} |
|
||||||
.phone-search-item__content{ |
|
||||||
margin-left: 16px; |
|
||||||
} |
|
||||||
.phone-search-item__art{ |
|
||||||
margin-top: 8px; |
|
||||||
|
|
||||||
color: var(--link); |
|
||||||
} |
|
||||||
.phone__open-search{ |
|
||||||
width: 32px; |
|
||||||
aspect-ratio: 1; |
|
||||||
|
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
border: none; |
|
||||||
background-color: rgba(0, 0, 0, 0); |
|
||||||
} |
|
||||||
.phone__open-search.active img:first-child{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
/* header */ |
|
||||||
|
|
||||||
/* footer */ |
|
||||||
.footer{ |
|
||||||
margin-top: 96px; |
|
||||||
} |
|
||||||
.footer__wrapper{ |
|
||||||
padding: 0 16px; |
|
||||||
|
|
||||||
justify-content: start; |
|
||||||
} |
|
||||||
.footer__item:nth-child(2){ |
|
||||||
margin-left: 38px; |
|
||||||
} |
|
||||||
.footer__contact{ |
|
||||||
margin-top: 20px; |
|
||||||
|
|
||||||
flex-wrap: wrap; |
|
||||||
} |
|
||||||
.footer__contact .footer__item:nth-child(3){ |
|
||||||
margin-top: 20px; |
|
||||||
margin-left: 0; |
|
||||||
|
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
/* footer */ |
|
||||||
} |
|
||||||
/* footer */ |
|
||||||
@media only screen and (max-width: 829px) { |
|
||||||
.footer__about{ |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@media only screen and (max-width: 630px) { |
|
||||||
.footer__wrapper{ |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
.footer__contact{ |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
.footer__contact .footer__item:nth-child(2){ |
|
||||||
margin-top: 20px; |
|
||||||
margin-left: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
/* footer */ |
|
||||||
|
|
||||||
main{ |
|
||||||
padding: 0 16px; |
|
||||||
} |
|
||||||
|
|
||||||
/* space */ |
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.space{ |
|
||||||
margin-top: 32px; |
|
||||||
} |
|
||||||
.space__content{ |
|
||||||
margin-top: 24px; |
|
||||||
|
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.space__consultation{ |
|
||||||
order: 1; |
|
||||||
|
|
||||||
margin-left: 0; |
|
||||||
|
|
||||||
max-width: 100%; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.space__consultation .btn-big{ |
|
||||||
margin-top: 40px; |
|
||||||
} |
|
||||||
.space__statistics{ |
|
||||||
order: 2; |
|
||||||
|
|
||||||
margin-top: 40px; |
|
||||||
|
|
||||||
width: auto; |
|
||||||
height: auto; |
|
||||||
|
|
||||||
padding: 0; |
|
||||||
|
|
||||||
flex-wrap: wrap; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
.space-statistics__img{ |
|
||||||
position: static; |
|
||||||
|
|
||||||
width: 100%; |
|
||||||
min-height: 300px; |
|
||||||
} |
|
||||||
.space-statistics__item{ |
|
||||||
margin-top: 16px; |
|
||||||
margin-left: 0; |
|
||||||
|
|
||||||
width: calc(50% - 8px); |
|
||||||
height: 160px; |
|
||||||
|
|
||||||
background: #2a2a2d; |
|
||||||
} |
|
||||||
} |
|
||||||
/* space */ |
|
||||||
|
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.main__item{ |
|
||||||
margin-top: 96px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* gym */ |
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.gym{ |
|
||||||
margin: 40px -16px 0 0; |
|
||||||
|
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
.gym .swiper-wrapper{ |
|
||||||
flex-wrap: nowrap; |
|
||||||
} |
|
||||||
.gym .swiper-slide:nth-child(3){ |
|
||||||
display: flex; |
|
||||||
flex-direction: column-reverse; |
|
||||||
} |
|
||||||
.gym__item{ |
|
||||||
margin: 0; |
|
||||||
|
|
||||||
flex-direction: column-reverse; |
|
||||||
height: auto; |
|
||||||
} |
|
||||||
.gym-item__img, .gym-item__text{ |
|
||||||
max-width: 100%; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
height: 179px; |
|
||||||
} |
|
||||||
.gym-item__img{ |
|
||||||
margin-top: 24px; |
|
||||||
} |
|
||||||
.gym-item-text__header .text-1{ |
|
||||||
margin-bottom: 5px; |
|
||||||
} |
|
||||||
.gym-item-text__header .title-2{ |
|
||||||
margin-left: 8px; |
|
||||||
} |
|
||||||
} |
|
||||||
/* gym */ |
|
||||||
|
|
||||||
/* projects */ |
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.projects{ |
|
||||||
overflow: hidden; |
|
||||||
|
|
||||||
margin: 0; |
|
||||||
} |
|
||||||
.projects .swiper-wrapper{ |
|
||||||
margin: 40px 0 0 0; |
|
||||||
|
|
||||||
flex-wrap: nowrap; |
|
||||||
} |
|
||||||
.projects__item{ |
|
||||||
margin: 0; |
|
||||||
|
|
||||||
width: 100% !important; |
|
||||||
} |
|
||||||
.projects-item__img{ |
|
||||||
height: 200px; |
|
||||||
} |
|
||||||
.projects-item__content{ |
|
||||||
padding: 16px; |
|
||||||
|
|
||||||
min-height: auto; |
|
||||||
} |
|
||||||
.projects-item__tag{ |
|
||||||
margin-left: 24px; |
|
||||||
} |
|
||||||
.projects-item__text{ |
|
||||||
margin-top: 16px; |
|
||||||
} |
|
||||||
.projects-item__text .text-1{ |
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
.projects__next{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.projects__counter{ |
|
||||||
margin-top: 40px; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
|
|
||||||
font-weight: 400; |
|
||||||
font-size: 18px; |
|
||||||
color: var(--text-white); |
|
||||||
} |
|
||||||
|
|
||||||
.projects .swiper-button-next::after, .projects .swiper-button-prev::after{ |
|
||||||
position: static; |
|
||||||
|
|
||||||
font-size: 0; |
|
||||||
} |
|
||||||
.projects .swiper-button-next, .projects .swiper-button-prev{ |
|
||||||
position: static; |
|
||||||
|
|
||||||
margin-top: 0; |
|
||||||
|
|
||||||
width: 32px; |
|
||||||
height: 32px; |
|
||||||
} |
|
||||||
.projects .swiper-button-next{ |
|
||||||
margin-left: 40px; |
|
||||||
|
|
||||||
background-image: url(/assets/img/icon/slider-righ.svg); |
|
||||||
background-repeat: no-repeat; |
|
||||||
} |
|
||||||
.projects .swiper-button-prev{ |
|
||||||
margin-right: 40px; |
|
||||||
|
|
||||||
background-image: url(/assets/img/icon/slider-left.svg); |
|
||||||
background-repeat: no-repeat; |
|
||||||
} |
|
||||||
} |
|
||||||
/* projects */ |
|
||||||
|
|
||||||
/* how */ |
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.how{ |
|
||||||
margin-top: 40px; |
|
||||||
} |
|
||||||
.how__content{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.how__control{ |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.how-control__item{ |
|
||||||
flex-direction: column; |
|
||||||
align-items: start; |
|
||||||
} |
|
||||||
.how-control-item__number{ |
|
||||||
width: 40px; |
|
||||||
|
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
.how-control__item__name{ |
|
||||||
margin-top: 16px; |
|
||||||
margin-left: 0; |
|
||||||
|
|
||||||
max-width: 100%; |
|
||||||
|
|
||||||
font-size: 20px; |
|
||||||
} |
|
||||||
.how-content__item-block{ |
|
||||||
position: static; |
|
||||||
} |
|
||||||
.how-content__item-block.active{ |
|
||||||
margin-top: 16px; |
|
||||||
} |
|
||||||
.how-content__item{ |
|
||||||
padding: 16px; |
|
||||||
} |
|
||||||
.how-content-item__text{ |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.how-content-item__img{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
} |
|
||||||
/* how */ |
|
||||||
|
|
||||||
/* free */ |
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.free{ |
|
||||||
padding: 40px 16px 39px 16px; |
|
||||||
} |
|
||||||
.free__content{ |
|
||||||
margin-top: 40px; |
|
||||||
|
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.form__item--two{ |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.form__item--two .input__block{ |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.form__item--two .input__block:nth-child(2){ |
|
||||||
margin-top: 16px; |
|
||||||
} |
|
||||||
.form__additional, |
|
||||||
.form input[type=submit]{ |
|
||||||
margin-top: 24px; |
|
||||||
} |
|
||||||
.form__checkbox-block{ |
|
||||||
align-items: start; |
|
||||||
} |
|
||||||
.free .title-1{ |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/* reviews */ |
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.reviews__item{ |
|
||||||
padding-bottom: 71px; |
|
||||||
|
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.reviews-item-content-header__img{ |
|
||||||
width: 80px; |
|
||||||
height: 80px; |
|
||||||
} |
|
||||||
.reviews-item-content-header__block{ |
|
||||||
margin-left: 16px; |
|
||||||
|
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.reviews-item-content-header__item .text-2{ |
|
||||||
margin-top: 12px; |
|
||||||
} |
|
||||||
.reviews-item-content-header__item:nth-child(2){ |
|
||||||
margin-top: 12px; |
|
||||||
|
|
||||||
justify-content: start; |
|
||||||
} |
|
||||||
.reviews-item-content__text{ |
|
||||||
margin-top: 24px; |
|
||||||
} |
|
||||||
.reviews-item__img{ |
|
||||||
margin-top: 24px; |
|
||||||
margin-left: 0; |
|
||||||
|
|
||||||
height: 300px; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.reviews-item__img-block{ |
|
||||||
margin-top: 24px; |
|
||||||
margin-left: 0; |
|
||||||
|
|
||||||
height: 300px; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.swiper-reviews-img{ |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
.reviews-item__img-block .swiper-slide{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
.reviews-item__img-block .swiper-slide img{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
|
|
||||||
object-fit: cover; |
|
||||||
} |
|
||||||
.reviews .swiper-pagination{ |
|
||||||
bottom: 87px; |
|
||||||
|
|
||||||
padding-right: 0px; |
|
||||||
|
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
.reviews .swiper-pagination-bullet{ |
|
||||||
width: 53px; |
|
||||||
} |
|
||||||
} |
|
||||||
/* reviews */ |
|
||||||
|
|
||||||
/* text-form */ |
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.text-form__form{ |
|
||||||
display: none; |
|
||||||
} |
|
||||||
.text-form__content .text-2{ |
|
||||||
margin-top: 24px; |
|
||||||
} |
|
||||||
} |
|
||||||
/* text-form */ |
|
||||||
|
|
||||||
/* services */ |
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.services{ |
|
||||||
margin: 40px 0 0 0; |
|
||||||
} |
|
||||||
.services__item{ |
|
||||||
margin: 24px 0 0 0; |
|
||||||
|
|
||||||
padding: 16px; |
|
||||||
|
|
||||||
height: auto; |
|
||||||
|
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
.services__item:nth-child(n){ |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
.services__item:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.services__img{ |
|
||||||
width: 40px; |
|
||||||
} |
|
||||||
.services__content{ |
|
||||||
min-height: auto; |
|
||||||
} |
|
||||||
.services__content .title-4{ |
|
||||||
margin-top: 24px; |
|
||||||
/* margin-bottom: 0; */ |
|
||||||
} |
|
||||||
.services__item .text-2{ |
|
||||||
/* display: none; */ |
|
||||||
} |
|
||||||
} |
|
||||||
/* services */ |
|
||||||
|
|
||||||
/* call */ |
|
||||||
@media only screen and (max-width: 992px) { |
|
||||||
.call{ |
|
||||||
padding: 40px 16px 39px 16px; |
|
||||||
} |
|
||||||
.call__content{ |
|
||||||
margin-top: 40px; |
|
||||||
|
|
||||||
width: 100%; |
|
||||||
height: auto; |
|
||||||
|
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
.call__item{ |
|
||||||
margin-top: 24px; |
|
||||||
} |
|
||||||
.call__item:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
.call__item a{ |
|
||||||
margin-top: 24px; |
|
||||||
} |
|
||||||
.call__item a:first-child{ |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
/* call */ |
|
||||||
|
|
||||||
/* modal */ |
|
||||||
.modal__item{ |
|
||||||
padding: 64px 16px; |
|
||||||
} |
|
||||||
.modal__item > .form{ |
|
||||||
padding: 40px 0 0 0; |
|
||||||
} |
|
||||||
.modal-item__close{ |
|
||||||
top: 20px; |
|
||||||
right: 20px; |
|
||||||
} |
|
||||||
.modal__item .text--bo-line.form__link{ |
|
||||||
margin-top: 6px; |
|
||||||
margin-left: 0; |
|
||||||
} |
|
||||||
/* modal */ |
|
||||||
|
|
||||||
@media only screen and (max-width: 992px) {} |
|
||||||
@ -0,0 +1,2 @@ |
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} |
||||||
|
/*# sourceMappingURL=normalize.min.css.map */ |
||||||
@ -0,0 +1 @@ |
|||||||
|
*{padding:0;margin:0;border:none}*,::after,::before{box-sizing:border-box}a,a:hover,a:link,a:visited{text-decoration:none}aside,footer,header,legend,main,nav,section{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background:0 0;cursor:pointer}button:active,button:focus,input:active,input:focus{outline:0}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer} |
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 187 B |
|
Before Width: | Height: | Size: 194 B |
|
Before Width: | Height: | Size: 217 B |
|
Before Width: | Height: | Size: 473 B |
|
Before Width: | Height: | Size: 253 B |
|
Before Width: | Height: | Size: 534 B |
|
Before Width: | Height: | Size: 641 B |
|
Before Width: | Height: | Size: 227 B |
|
Before Width: | Height: | Size: 411 B |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 784 B |
|
Before Width: | Height: | Size: 196 B |
|
Before Width: | Height: | Size: 196 B |
|
Before Width: | Height: | Size: 983 B |
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 156 KiB |
|
Before Width: | Height: | Size: 189 KiB |
|
Before Width: | Height: | Size: 374 KiB |
|
Before Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 340 KiB |
|
Before Width: | Height: | Size: 417 KiB |
|
Before Width: | Height: | Size: 416 KiB |
|
Before Width: | Height: | Size: 316 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 464 KiB |
|
Before Width: | Height: | Size: 791 KiB |
|
Before Width: | Height: | Size: 436 B |
|
Before Width: | Height: | Size: 745 B |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 877 B |
|
Before Width: | Height: | Size: 1.6 KiB |
@ -1,449 +0,0 @@ |
|||||||
'use strict'; |
|
||||||
|
|
||||||
const gymSwiper = new Swiper('.gym-swiper', { |
|
||||||
direction: 'horizontal', |
|
||||||
breakpoints: { |
|
||||||
320:{ |
|
||||||
slidesPerView: 1.20, |
|
||||||
spaceBetween: 24, |
|
||||||
}, |
|
||||||
996: { |
|
||||||
slidesPerView: 3 |
|
||||||
}, |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
const reviewsSwiper = new Swiper('.reviews-swiper', { |
|
||||||
spaceBetween: 24, |
|
||||||
allowTouchMove: false, |
|
||||||
// If we need pagination
|
|
||||||
pagination: { |
|
||||||
el: '.swiper-pagination', |
|
||||||
}, |
|
||||||
|
|
||||||
// Navigation arrows
|
|
||||||
navigation: { |
|
||||||
nextEl: '.swiper-button-next', |
|
||||||
prevEl: '.swiper-button-prev', |
|
||||||
}, |
|
||||||
|
|
||||||
// And if we need scrollbar
|
|
||||||
scrollbar: { |
|
||||||
el: '.swiper-scrollbar', |
|
||||||
}, |
|
||||||
runCallbacksOnInit: true, |
|
||||||
// === new change
|
|
||||||
on: { |
|
||||||
slideChange: function(){ |
|
||||||
let offer = document.querySelector('#numberReviews'); |
|
||||||
offer.innerHTML = (this.activeIndex + 1); |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
let swiperReviews = document.querySelectorAll('.swiper-reviews-img'); |
|
||||||
let reviewsSwiperImgs = {}; |
|
||||||
swiperReviews.forEach((review, index) => { |
|
||||||
let newClass = `swiper-reviews-img-${index}`; |
|
||||||
review.classList.add(newClass); |
|
||||||
|
|
||||||
reviewsSwiperImgs[index] = new Swiper(`.${newClass}`, { |
|
||||||
pagination: { |
|
||||||
el: ".swiper-pagination", |
|
||||||
clickable: true, |
|
||||||
renderBullet: function (index, className) { |
|
||||||
return '<span class="' + className + '">' + "</span>"; |
|
||||||
}, |
|
||||||
}, |
|
||||||
}); |
|
||||||
}) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const projectsSwiper = new Swiper('.projects-swiper', { |
|
||||||
direction: 'horizontal', |
|
||||||
breakpoints: { |
|
||||||
320:{ |
|
||||||
slidesPerView: 1, |
|
||||||
spaceBetween: 24, |
|
||||||
}, |
|
||||||
996: { |
|
||||||
slidesPerView: 10 |
|
||||||
}, |
|
||||||
}, |
|
||||||
// Navigation arrows
|
|
||||||
navigation: { |
|
||||||
nextEl: '.swiper-button-next', |
|
||||||
prevEl: '.swiper-button-prev', |
|
||||||
},
|
|
||||||
runCallbacksOnInit: true, |
|
||||||
// === new change
|
|
||||||
on: { |
|
||||||
slideChange: function(){ |
|
||||||
let offer = document.querySelector('#numberProjects'); |
|
||||||
offer.innerHTML = (this.activeIndex + 1); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// how
|
|
||||||
let itemButtons = document.querySelectorAll('.how-control__item'); |
|
||||||
itemButtons.forEach((button) => { |
|
||||||
let num = button.dataset.num; |
|
||||||
|
|
||||||
button.onclick = function name(params, index) { |
|
||||||
|
|
||||||
let activeContent = document.querySelector('.how-content__item-block.active'), |
|
||||||
activeButton = document.querySelector('.how-control__item.active'); |
|
||||||
|
|
||||||
if (activeContent.dataset.num == button.dataset.num) return; |
|
||||||
|
|
||||||
activeContent.style.height = `${activeContent.offsetHeight}px`; |
|
||||||
|
|
||||||
setTimeout(() => { |
|
||||||
activeContent.style.height = '0px'; |
|
||||||
activeContent.classList.remove('active'); |
|
||||||
activeButton.classList.remove('active'); |
|
||||||
|
|
||||||
let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`), |
|
||||||
newButton = document.querySelector(`.how-control__item[data-num='${num}']`); |
|
||||||
|
|
||||||
|
|
||||||
setTimeout(() => { |
|
||||||
let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px'; |
|
||||||
newActive.style.height = newHeight; |
|
||||||
newActive.classList.add('active'); |
|
||||||
newButton.classList.add('active'); |
|
||||||
|
|
||||||
setTimeout(() => { |
|
||||||
newActive.style.height = 'auto'; |
|
||||||
}, 300); |
|
||||||
}, 300); |
|
||||||
}, 0); |
|
||||||
}
|
|
||||||
}) |
|
||||||
|
|
||||||
let screenWidth = window.screen.width; |
|
||||||
if (screenWidth <= 992) { |
|
||||||
howPhone(); |
|
||||||
}else{ |
|
||||||
howPc(); |
|
||||||
} |
|
||||||
|
|
||||||
function howPc() { |
|
||||||
if (document.querySelector('.how__content').querySelector('.how-content__item-block')) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
let blocks = document.querySelectorAll('.how-content__item-block'), |
|
||||||
content = document.querySelector('.how__content'); |
|
||||||
|
|
||||||
blocks.forEach(block => { |
|
||||||
content.appendChild(block) |
|
||||||
}); |
|
||||||
} |
|
||||||
function howPhone() { |
|
||||||
|
|
||||||
if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
|
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
let buttons = document.querySelectorAll('.how-control__item'); |
|
||||||
|
|
||||||
buttons.forEach(button => { |
|
||||||
let num = button.dataset.num, |
|
||||||
block = document.querySelector(`.how-content__item-block[data-num='${num}']`); |
|
||||||
|
|
||||||
button.after(block); |
|
||||||
}); |
|
||||||
} |
|
||||||
// how end
|
|
||||||
|
|
||||||
// phone menu
|
|
||||||
addClosePhoneMenu('.phone-menu__content'); |
|
||||||
addClosePhoneMenu('.phone-menu__sub'); |
|
||||||
|
|
||||||
let btnOpenMenu = document.querySelector('.button-menu__open'); |
|
||||||
btnOpenMenu.onclick = function () { |
|
||||||
let block = document.querySelector('.phone-menu'), |
|
||||||
content = document.querySelector('.phone-menu__content'), |
|
||||||
contentHeight = content.offsetHeight + 'px'; |
|
||||||
|
|
||||||
block.style.height = contentHeight; |
|
||||||
} |
|
||||||
|
|
||||||
let closeMenu = document.querySelector('.phone-menu-content__close'); |
|
||||||
closeMenu.onclick = function () { |
|
||||||
let block = document.querySelector('.phone-menu'); |
|
||||||
|
|
||||||
block.style.height = '0px'; |
|
||||||
} |
|
||||||
|
|
||||||
let phoneList = document.querySelectorAll('.phone-menu__list'); |
|
||||||
phoneList.forEach(list => { |
|
||||||
let elementList = list.querySelectorAll('li'); |
|
||||||
|
|
||||||
elementList.forEach(element => { |
|
||||||
let nextList = element.querySelector('.phone-menu__sub'); |
|
||||||
|
|
||||||
if (nextList) { |
|
||||||
let button = element.querySelector('a'); |
|
||||||
|
|
||||||
button.onclick = function () { |
|
||||||
nextList.classList.add('open')
|
|
||||||
} |
|
||||||
|
|
||||||
nextList.querySelector('.phone-menu-content__close').onclick = function () { |
|
||||||
nextList.classList.remove('open')
|
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
}) |
|
||||||
}) |
|
||||||
|
|
||||||
function addClosePhoneMenu(classAdd) { |
|
||||||
document.querySelectorAll(classAdd).forEach(element => { |
|
||||||
let button = document.createElement('button'); |
|
||||||
button.className = "phone-menu-content__close"; |
|
||||||
|
|
||||||
let referenceElement = element.firstElementChild; |
|
||||||
|
|
||||||
element.insertBefore(button, referenceElement); |
|
||||||
}) |
|
||||||
|
|
||||||
} |
|
||||||
// phone menu end
|
|
||||||
|
|
||||||
// search
|
|
||||||
let openBtnSearch = document.querySelector('.header-menu-search__open'), |
|
||||||
blockSearchPc = document.querySelector('.header-menu__search'); |
|
||||||
|
|
||||||
openBtnSearch.onclick = function () { |
|
||||||
blockSearchPc.classList.toggle('active'); |
|
||||||
} |
|
||||||
|
|
||||||
let btnOpenSearchPhone = document.querySelector('.phone__open-search'), |
|
||||||
searchPhone = document.querySelector('.phone-search'); |
|
||||||
|
|
||||||
btnOpenSearchPhone.onclick = function () { |
|
||||||
if (!searchPhone.classList.contains('hidden')) { |
|
||||||
setTimeout(() => { |
|
||||||
searchPhone.classList.add('hidden'); |
|
||||||
}, 300); |
|
||||||
}else{ |
|
||||||
searchPhone.classList.remove('hidden'); |
|
||||||
} |
|
||||||
|
|
||||||
btnOpenSearchPhone.classList.toggle('active'); |
|
||||||
searchPhone.classList.toggle('active'); |
|
||||||
} |
|
||||||
|
|
||||||
// pc
|
|
||||||
let inputSearchPc = document.querySelector('.header-menu-search__input'), |
|
||||||
btnSearchPc = document.querySelector('.header-menu-search__btn'); |
|
||||||
|
|
||||||
btnSearchPc.onclick = function () { |
|
||||||
let value = inputSearchPc.value, |
|
||||||
newPost = { |
|
||||||
value: value, |
|
||||||
}; |
|
||||||
|
|
||||||
postSearch(newPost, 'pc'); |
|
||||||
} |
|
||||||
|
|
||||||
// phone
|
|
||||||
let inputSearchPhone = document.querySelector('.phone-search__input'); |
|
||||||
|
|
||||||
inputSearchPhone.addEventListener('input', function(event) { |
|
||||||
let value = event.target.value, |
|
||||||
newPost = { |
|
||||||
value: value, |
|
||||||
}; |
|
||||||
|
|
||||||
postSearch(newPost, 'phone'); |
|
||||||
}); |
|
||||||
|
|
||||||
function postSearch(newPost, device) { |
|
||||||
let contentPc = document.querySelector('.header-menu-search__found'), |
|
||||||
contentPhone = document.querySelector('.phone-search__found'); |
|
||||||
|
|
||||||
fetch('http://jsonplaceholder.typicode.com/posts', { |
|
||||||
method: 'POST', |
|
||||||
// body: JSON.stringify(newPost),
|
|
||||||
headers: { |
|
||||||
'Content-type': 'application/json; charset=UTF-8', |
|
||||||
}, |
|
||||||
}) |
|
||||||
.then((data) => { |
|
||||||
if (device == 'pc') { |
|
||||||
contentPc.innerHTML = ''; |
|
||||||
|
|
||||||
contentPc.innerHTML = `<div class="header-menu-search__item">
|
|
||||||
<img src="assets/img/photo/header-menu-search.png" alt="" class="header-menu-search-item__img"> |
|
||||||
|
|
||||||
<div class="header-menu-search-item__content"> |
|
||||||
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> |
|
||||||
<p class="header-menu-search-item__art text-2">Артикул: STP1000C</p> |
|
||||||
</div> |
|
||||||
</div>`; |
|
||||||
|
|
||||||
contentPc.classList.add('active'); |
|
||||||
}else{ |
|
||||||
contentPhone.innerHTML = ''; |
|
||||||
|
|
||||||
contentPhone.innerHTML = `<div class="phone-search__item">
|
|
||||||
<img src="assets/img/photo/header-menu-search.png" alt="" class="phone-search-item__img"> |
|
||||||
|
|
||||||
<div class="phone-search-item__content"> |
|
||||||
<p class="text-2">Беговая дорожка механическая DRAXFIT+</p> |
|
||||||
<p class="phone-search-item__art text-2">Артикул: STP1000C</p> |
|
||||||
</div> |
|
||||||
</div>`; |
|
||||||
|
|
||||||
contentPhone.classList.add('active'); |
|
||||||
} |
|
||||||
}).catch( |
|
||||||
() => { |
|
||||||
if (device == 'pc') { |
|
||||||
postError(contentPc); |
|
||||||
}else{ |
|
||||||
postError(contentPhone); |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
function postError(divContent) { |
|
||||||
divContent.innerHTML = '' |
|
||||||
|
|
||||||
let p = document.createElement("p"); |
|
||||||
p.textContent = "Произошла ошибка" |
|
||||||
p.className = "header-menu-search__error text-2"; |
|
||||||
|
|
||||||
divContent.appendChild(p); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
// search end
|
|
||||||
|
|
||||||
// open-modal
|
|
||||||
|
|
||||||
let openModals = document.querySelectorAll('.open-modal'), |
|
||||||
modal = document.querySelector('.modal'); |
|
||||||
|
|
||||||
openModals.forEach(openModal => { |
|
||||||
let modalName = openModal.dataset.modal; |
|
||||||
|
|
||||||
openModal.onclick = function () { |
|
||||||
let modalItem = document.querySelector(`.modal__item.${modalName}`); |
|
||||||
|
|
||||||
modalItem.classList.add('active'); |
|
||||||
modal.classList.add('active'); |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
modal.onclick = function (event) { |
|
||||||
if (event.srcElement.classList.contains('modal')) { |
|
||||||
document.querySelector(`.modal__item.active`).classList.remove('active'); |
|
||||||
modal.classList.remove('active'); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
let itemModels = document.querySelectorAll('.modal__item'); |
|
||||||
|
|
||||||
itemModels.forEach(item => { |
|
||||||
let btnClose = item.querySelector('.modal-item__close'); |
|
||||||
|
|
||||||
btnClose.onclick = function () { |
|
||||||
item.classList.remove('active'); |
|
||||||
modal.classList.remove('active'); |
|
||||||
} |
|
||||||
}) |
|
||||||
// open-modal end
|
|
||||||
|
|
||||||
// masks
|
|
||||||
|
|
||||||
let phoneInputs = document.querySelectorAll('.input__field[type=phone]'); |
|
||||||
|
|
||||||
phoneInputs.forEach(phoneInput => { |
|
||||||
phoneInput.onfocus = function (event) { |
|
||||||
let value = phoneInput.value; |
|
||||||
|
|
||||||
if (value.length == 0) { |
|
||||||
phoneInput.value = '+7 ' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
phoneInput.addEventListener('input', function(event) { |
|
||||||
let value = phoneInput.value, |
|
||||||
data = event.data, |
|
||||||
length = value.length; |
|
||||||
|
|
||||||
if (value.charAt(0) == '+' && length == 1) return; |
|
||||||
|
|
||||||
if (isNaN(data)) { |
|
||||||
phoneInput.value = value.slice(0, -1); |
|
||||||
} |
|
||||||
|
|
||||||
if (typeof data != 'object') { |
|
||||||
if (length == 2 || length == 6 || length == 10) { |
|
||||||
phoneInput.value = value + ' '; |
|
||||||
} |
|
||||||
if (length == 3 || length == 7 || length == 11) { |
|
||||||
if (data != ' ') { |
|
||||||
phoneInput.value = value.slice(0, -1) + ' ' + data; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
if (length <= 3) { |
|
||||||
phoneInput.value = '+7 ' |
|
||||||
} |
|
||||||
|
|
||||||
}); |
|
||||||
}) |
|
||||||
|
|
||||||
// masks end
|
|
||||||
|
|
||||||
// pc menu
|
|
||||||
|
|
||||||
let listMenu = document.querySelectorAll('.header-menu__list > li'); |
|
||||||
|
|
||||||
listMenu.forEach(li => { |
|
||||||
if (li.querySelector('.header-menu-list__next')) { |
|
||||||
let nextButton = li.querySelector('.header-menu-list__next'), |
|
||||||
sub = li.querySelector('.header-menu-list__sub'); |
|
||||||
|
|
||||||
nextButton.addEventListener('mouseover', function (event) { |
|
||||||
let openSubMenu = document.querySelector('.header-menu-list__sub.open'); |
|
||||||
|
|
||||||
if (openSubMenu) { |
|
||||||
openSubMenu.classList.remove('open'); |
|
||||||
} |
|
||||||
|
|
||||||
sub.classList.add('open'); |
|
||||||
}) |
|
||||||
|
|
||||||
sub.addEventListener('mouseout', function (event) { |
|
||||||
if (event.relatedTarget.offsetParent.tagName != 'UL') { |
|
||||||
sub.classList.remove('open'); |
|
||||||
} |
|
||||||
}) |
|
||||||
}; |
|
||||||
}) |
|
||||||
|
|
||||||
// pc menu end
|
|
||||||
|
|
||||||
// resize
|
|
||||||
window.addEventListener('resize', () => { |
|
||||||
let screenWidth = window.screen.width; |
|
||||||
|
|
||||||
if (screenWidth <= 992) { |
|
||||||
howPhone(); |
|
||||||
}else{ |
|
||||||
howPc(); |
|
||||||
} |
|
||||||
}); |
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,13 +0,0 @@ |
|||||||
<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) --> |
|
||||||
<!-- <form class="form" method="post" action="/send-telegram.php"> |
|
||||||
<div class="form__item"> |
|
||||||
<input class="form__input" type="text" name="name" required> |
|
||||||
<label class="form__label">Ваше имя</label> |
|
||||||
</div> |
|
||||||
<div class="form__item"> |
|
||||||
<input class="form__input" type="text" name="phone" required> |
|
||||||
<label class="form__label">Номер телефона</label> |
|
||||||
</div> |
|
||||||
<input class="form__input btn" type="submit" value="Отправить"> |
|
||||||
</form> --> |
|
||||||
|
|
||||||
Loading…
Reference in new issue