View file css/style.css

File size: 17.86Kb
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700);button,h1,h2,h3,h4{position:relative}.show,button:after{display:block}#bg-img0,button:after{bottom:0;pointer-events:none}#bg-img,#bg-img0,button:after{pointer-events:none}#bg-img,#bg-img0,body{width:100%}header,header+div{align-items:center}.hidden{visibility:hidden;}#bg-img,#bg-img0,button:after,header{position:absolute;left:0}h1,h2,header a{color:#fff}a,header a{text-decoration:none}#features,#steps+div{padding:210px 0 110px;text-align:center}#features,#reviews,#steps{background:url(../images/light.png) center bottom/cover no-repeat}#in .swiper-slide,#reviews .swiper-slide{background-color:var(--darkblue);overflow:hidden;padding:30px 30px 20px;vertical-align:top}#bg-img,#bg-img0,button:after,footer form,header{right:0;top:0}#features,#features div>div,#in h3,#in p+div p:last-of-type,#reviews h3,#steps,#steps div>div,#steps+div,.swiper,.swiper-button-next,.swiper-button-prev,footer form p{text-align:center}:root{--inter:'Inter',sans-serif;--montserrat:'Montserrat',sans-serif;--opensans:'Open Sans',sans-serif;--blue:#385E86;--gray:#BAC2CA;--light:#EDF6FF;--dark:#051D34;--darkblue:#2D455D;--orange:#FD8B00;--darkorange:#D47C11;--backdrop:rgba(45, 69, 93, .7);--shadow:rgba(255, 141, 6, .62);--lightshadow:rgba(253, 139, 0, .25);--wrapper:1640px}::-webkit-input-placeholder{color:var(--light)}::-moz-placeholder{color:var(--light)}:-moz-placeholder{color:var(--light)}:-ms-input-placeholder{color:var(--light)}*{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:0;box-sizing:border-box;font-family:var(--inter);font-display:swap;list-style:none;margin:0;outline:0;padding:0}body{overflow-x:hidden;-ms-text-size-adjust:auto;-moz-text-size-adjust:auto;-webkit-text-size-adjust:auto}h1{font:500 54px var(--inter);line-height:1.5}h2{font:400 36px var(--montserrat);line-height:1.5}h3{font:500 30px var(--montserrat);line-height:1.5}h4{font:500 24px var(--inter);line-height:1.5}.swiper-button-next:hover,.swiper-button-prev:hover,input:focus{opacity:.8}p{line-height:1.5}.lazy{background-image:none;background-color:#fff}@keyframes placeHolderShimmer{0%{background-position:100%}100%{background-position:-100%}}button{overflow:hidden;transition:.3s}button:after{content:'';z-index:10;animation:3s linear infinite placeHolderShimmer;background:-moz-linear-gradient(left,rgba(238,238,238,0) 0,rgba(221,221,221,.06) 8%,rgba(238,238,238,.12) 16%,rgba(238,238,238,.37) 50%,rgba(221,221,221,.43) 58%,rgba(238,238,238,.49) 66%,rgba(238,238,238,.5) 68%,rgba(238,238,238,0) 100%);background:-webkit-linear-gradient(left,rgba(238,238,238,0) 0,rgba(221,221,221,.06) 8%,rgba(238,238,238,.12) 16%,rgba(238,238,238,.37) 50%,rgba(221,221,221,.43) 58%,rgba(238,238,238,.49) 66%,rgba(238,238,238,.5) 68%,rgba(238,238,238,0) 100%);background:linear-gradient(to right,rgba(238,238,238,0) 0,rgba(221,221,221,.06) 8%,rgba(238,238,238,.12) 16%,rgba(238,238,238,.37) 50%,rgba(221,221,221,.43) 58%,rgba(238,238,238,.49) 66%,rgba(238,238,238,.5) 68%,rgba(238,238,238,0) 100%);background-size:200%}button:hover{box-shadow:1px 1px 30px var(--shadow);transition:.3s}#bg-img{background:url(../images/firstscreen.webp) center bottom/cover;height:90vh}#bg-img0{background:url(../images/d.webp) center bottom/cover}.swiper-button-next,.swiper-button-prev,.swiper-pagination{bottom:0!important;display:inline-block!important;left:auto!important;margin:200px 10px 0;position:relative!important;right:auto!important;top:0!important;vertical-align:middle;width:auto!important}.swiper-button-next,.swiper-button-prev{background:var(--gray);border-radius:100%;display:inline-block!important;height:37px!important;width:37px!important}.swiper-pagination-bullet{background:var(--gray)!important;height:20px!important;opacity:1!important;transform:translatey(-110px);width:20px!important}.swiper-pagination-bullet-active{background:var(--darkorange)!important}.swiper-button-next:after,.swiper-button-prev:after{background-repeat:no-repeat;background-size:12px;color:transparent!important;height:37px!important;line-height:37px!important;width:37px!important}.swiper-button-prev:after{background-image:url(../images/icon/prev.svg);background-position:4px 13px}.swiper-button-next:after{background-image:url(../images/icon/next.svg);background-position:7px 13px}header{display:flex;font-size:0;justify-content:space-between;margin:0 auto;width:var(--wrapper);padding:74px 0;z-index:20}header button{background:0 0;cursor:pointer;display:none}#steps+div,header+div{background-size:cover;position:relative}header button img{height:32px}header a{display:inline-block;font:500 18px var(--inter);height:80px;line-height:80px;padding:0 17.5px;transition:.3s}footer>div>div>div:first-of-type a,header>a:first-of-type{border:4px solid var(--light);border-radius:30px;color:var(--light);font:400 18px var(--opensans);line-height:72px;text-align:center;width:245px}footer>div>div>div:last-of-type a:first-of-type,header>nav+a{background:url(../images/icon/tel.svg) center left/22px no-repeat;font:400 24px var(--inter)}header>nav+a{border:0;line-height:80px;padding-left:36px}footer a:hover,header a:hover{opacity:.8;transition:.3s}header+div{display:flex;height:90vh;padding:150px 0;z-index:10}footer form,header+div form{height:470px;padding:64px 60px}header+div>div{align-items:center;display:flex;justify-content:space-between;margin:0 auto;width:var(--wrapper)}header+div hgroup{position:relative}header+div hgroup h2{margin-top:62px}header+div form{background:var(--backdrop);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:30px;display:flex;flex-direction:column;justify-content:center;width:520px}#docs div,#faq{-webkit-backdrop-filter:blur(12px);border-radius:30px}header+div form p{color:var(--light);font:700 32px var(--inter);white-space:nowrap}header+div form input{background:var(--blue);border-radius:54px;color:#fff;font:400 20px var(--inter);height:54px;margin-top:45px;padding:0 20px}footer form button,header+div form button{background:var(--orange);border-radius:60px;box-shadow:1px 1px 15px var(--shadow);color:var(--dark);cursor:pointer;font:400 20px var(--inter);height:60px;margin:45px auto 0;width:270px}#in,#reviews,#steps+div,footer a,footer form p{color:var(--light)}#features{color:#031323;margin-top:-100px;position:relative;z-index:6}#docs,#features>div,#steps>div{font-size:0;margin:0 auto;width:var(--wrapper)}#features div>div{background-position:center top;background-repeat:no-repeat;background-size:96px;display:inline-block;margin-top:64px;padding:96px 32px 0;vertical-align:top;width:33.33%}#features div>div:first-of-type{background-image:url(../images/icon/calendar.svg)}#features div>div:nth-of-type(2){background-image:url(../images/icon/gift.svg)}#features div>div:nth-of-type(3){background-image:url(../images/icon/percent.svg)}#features div>div:nth-of-type(4){background-image:url(../images/icon/traffic.png)}#features div>div:nth-of-type(5){background-image:url(../images/icon/subtract.svg);background-size:72px}#features div>div:nth-of-type(6){background-image:url(../images/icon/bag.svg);background-position:center top -15px;background-size:114px}#features h4{margin-top:48px}#features p,#steps p{font:500 18px var(--inter);line-height:1.5;margin-top:20px}#in{background:url(../images/gray.png) center bottom/cover no-repeat;margin-top:-60px;padding:180px 0 0;position:relative;z-index:5}#in h3,#reviews h3{color:var(--dark);margin-bottom:90px}#in>div,#reviews>div,footer>div{font-size:0;margin:0 auto;overflow:hidden;position:relative;width:var(--wrapper)}#in .swiper-slide{border-radius:30px;display:inline-block;text-align:left;width:520px}#in figure{align-items:center;display:flex;height:300px;justify-content:center;margin:-30px;overflow:hidden;position:relative}#in figure img{width:100%}#in figure figcaption{background:url(../images/icon/pin.svg) left center/24px no-repeat;bottom:20px;font:500 18px var(--inter);padding-left:35px;position:absolute;right:30px}#in figure+p{font:600 24px var(--inter);line-height:1.5;margin-top:30px;padding-top:30px}#in p+div{align-items:center;display:flex;justify-content:space-between;padding:30px 0}#in p+div p:first-of-type{font:600 24px var(--inter);line-height:1.5}#in font{display:block;font:600 18px var(--inter);margin-top:10px;text-decoration:line-through}#in p+div p:last-of-type{background:var(--orange);border-radius:48px;box-shadow:4px 4px 15px var(--lightshadow);color:var(--dark);font:600 18px var(--inter);height:48px;line-height:48px;width:200px}#in div+p{font:500 16px var(--inter);margin:10px 0 25px}#in .swiper-slide span{background-color:var(--orange);background-position:left 10px center;background-repeat:no-repeat;background-size:24px;border-radius:34px;color:var(--light);display:inline-block;font:500 16px var(--inter);height:34px;line-height:34px;margin:0 15px 10px 0;padding:0 15px 0 40px}#in .swiper-slide span.guarantee{background-image:url(../images/icon/guarantee.svg)}#in .swiper-slide span.favorite{background-image:url(../images/icon/favorite.svg)}#in .swiper-slide span.cashback{background-image:url(../images/icon/cashback.svg)}#steps{color:var(--dark);margin-top:-100px;padding:210px 0 140px;position:relative;z-index:4}#steps div>div{background-position:center top;background-repeat:no-repeat;background-size:96px;display:inline-block;margin-top:64px;padding:96px 40px 0;transition:.3s;vertical-align:top;width:25%}#steps div>div:first-of-type{background-image:url(../images/icon/1.webp)}#steps div>div:nth-of-type(2){background-image:url(../images/icon/2.webp)}#steps div>div:nth-of-type(3){background-image:url(../images/icon/3.webp)}#steps div>div:nth-of-type(4){background-image:url(../images/icon/4.webp)}#steps div>div:hover{background-position:center top 10px;transition:.3s}#steps h4{margin-top:48px;white-space:nowrap}#steps+div{margin-top:-100px;z-index:3}#docs div,#faq,footer form{background:var(--backdrop)}#steps+div h3{margin-bottom:48px}#docs div{backdrop-filter:blur(12px);display:inline-block;margin:2% 1.1%;padding:0 10px;transition:.3s;vertical-align:top;width:31%}#docs div:hover{transform:scale(1.05);transition:.3s}#docs div h4{align-items:center;display:flex;flex-direction:column;height:250px;justify-content:center;padding:0 10px}#docs font{color:var(--orange);display:block}#faq{backdrop-filter:blur(12px);font-size:0;margin:64px auto 0;width:calc(var(--wrapper) - 20%);padding:60px;position:relative}#faq details{background:#ccd8ea;border-radius:30px;color:#011f33;margin-bottom:15px;text-align:left;transition:.3s}#faq summary{cursor:pointer;padding:15px 50px 15px 30px;position:relative}#faq summary:after{background:url(../images/icon/prev.svg) 0 0/contain no-repeat;content:'';display:inline-block;height:20px;position:absolute;right:30px;top:20px;transform:rotate(-90deg);transition:.3s;width:20px}#faq details[open] summary:after{transform:rotate(90deg);top:25px;transition:.3s}#faq details:hover,#faq details[open]{background:var(--light);transition:.3s}#faq details div{padding:0 30px 20px}#faq p{font:500 16px var(--inter)}#reviews{margin-top:-150px;padding:250px 0 0;position:relative;z-index:2}#reviews .swiper-slide:after{background:-moz-radial-gradient(center,ellipse cover,#fff 0,rgba(255,255,255,0) 100%);background:-webkit-radial-gradient(center,ellipse cover,#fff 0,rgba(255,255,255,0) 100%);background:radial-gradient(ellipse at center,#fff 0,rgba(255,255,255,0) 100%);border-radius:100%;filter:blur(10px);content:'';position:absolute;bottom:-15%;right:-15%;height:256px;transition:.3s;width:256px;opacity:.1;z-index:2;display:block}#reviews .swiper-slide:hover:after{transform:scale(1.5);transition:.3s}#reviews .swiper-slide{border-radius:30px;display:inline-block;height:344px;position:relative;text-align:left;width:520px}#reviews p:first-of-type{font:600 24px var(--inter);margin-bottom:35px}#reviews .swiper-slide div{position:absolute;right:30px;top:30px}#reviews img{height:24px;width:24px}#reviews div+p{font:500 18px var(--inter);margin-bottom:10px}#reviews time{font:500 14px var(--inter)}#reviews time+p{font:500 16px var(--inter);line-height:1.5;margin-top:30px}footer{background-color:#021e48;margin-top:-50px;padding:100px 0 60px;position:relative;z-index:1}footer a{display:block;transition:.3s}footer>div>div{align-items:center;display:flex;justify-content:space-between;width:800px}footer>div>div>div:last-of-type a:first-of-type{border:0;line-height:50px;padding-left:40px}footer>div>div>div:last-of-type a:nth-of-type(2){background:url(../images/icon/mail.svg) top 18px left/22px no-repeat;border:0;font:400 24px var(--inter);line-height:50px;padding-left:40px}footer form{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:30px;display:flex;flex-direction:column;justify-content:center;position:absolute;width:657px}footer form p{font:700 32px var(--inter);white-space:nowrap}footer form input{background:var(--blue);border-radius:54px;color:#fff;font:400 20px var(--inter);height:54px;margin:45px auto 0;padding:0 20px;width:400px}footer form+ul a,footer form+ul p{color:var(--gray)}footer nav{display:flex;flex-direction:row-reverse;font:500 18px var(--inter);margin-top:70px;width:800px}footer nav ul{display:flex;flex-direction:column;justify-content:space-between;height:300px;line-height:1.5;width:400px}footer nav ul:first-of-type{padding-left:96px}@media (min-width:1701px){body{zoom:1}}@media (max-width:1700px){body{zoom:.8}}@media (max-width:1240px){body{zoom:.65}}@media (max-width:1100px){body{zoom:.55}}@media (max-width:900px){body{zoom:.45}}@media (max-width:768px){#steps p br,button:after,footer>div>div>div:last-of-type a:nth-of-type(2),h2 br,header nav{display:none}#bg-img,header+div{background-position:center;background-size:cover}#steps p,footer nav ul:last-of-type li{margin-top:20px}body{zoom:.75}:root{--wrapper:100%}h1{font:500 28px var(--inter)}h2{font:400 23px var(--montserrat)}h3{font:500 19px var(--montserrat);line-height:1.5}h4{font:500 18px var(--inter);line-height:1.5}.swiper-button-next,.swiper-button-prev,.swiper-pagination{display:none!important}.hidden{color:transparent;font-size:0;text-decoration:none;visibility:hidden}button:hover{box-shadow:none}header{padding:25px 20px}header button{display:inline-block}footer>div>div>div:first-of-type a,header>a:first-of-type{height:50px;line-height:42px;width:140px}header>nav+a{font:400 20px var(--inter);height:50px;line-height:50px}#features p,#in figure figcaption,footer nav ul a{font:400 16px var(--montserrat)}header nav{background:var(--backdrop);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:absolute;top:100px;left:0;right:0}header nav a{border-bottom:1px solid rgba(0,0,0,.1);display:block;padding-left:96px}header+div{height:auto;padding:114px 20px 0}footer form,header+div form{height:auto;padding:32px 20px}#bg-img{height:100%}header+div hgroup h2{margin-top:24px}header+div>div{align-items:unset;flex-direction:column}header+div form{margin:40px 0;width:100%}footer form p,header+div form p{font:700 19px var(--inter);text-align:center}footer form input,header+div form input{font:400 16px var(--inter);margin:25px auto 0;width:60%}footer form button,header+div form button{margin-top:25px}#features,#steps{padding:150px 0 50px}#features div>div{background-size:50px;margin-top:30px;padding:30px 40px 0;width:50%}#steps div>div,#steps h4,footer nav{margin-top:32px}#features div>div:nth-of-type(5){background-position:center top 5px;background-size:40px}#features div>div:nth-of-type(6){background-position:center top -5px;background-size:60px}#in{padding:100px 20px 25px}#in h3,#reviews h3{margin-bottom:32px}#in figure{height:236px}#in figure img{transform:translatey(0);width:100%}#in figure figcaption{background-image:url(../images/icon/pin-mobile.svg);right:20px}#in figure+p,#in p+div p:first-of-type{font:500 18px var(--inter);text-align:left}#in figure+p{padding-top:25px}#in .swiper-wrapper{display:block;text-align:left}#in .swiper-slide{text-align:center;width:47.5%;margin:0 1.25% 2%}#in p+div{align-items:flex-start;flex-direction:column;padding:25px 0 20px}#in p+div p:first-of-type font{color:var(--gray);font-weight:500}#in p+div p:last-of-type{color:var(--light);margin:24px auto 0}#in div+p{font:500 14px var(--inter);text-align:left}#in .swiper-slide span{font:500 12px var(--inter);line-height:34px;margin-right:5px}#steps div>div{background-size:60px;padding:50px 60px 0;width:50%}#steps p{font:500 16px var(--montserrat);line-height:1.5}#steps+div{padding:150px 0 60px}#steps+div h3{margin-bottom:20px;padding:0 10%}#docs div{background:var(--darkblue);width:45%}#docs div h4{font:500 16px var(--inter);height:104px;padding:0 20px}#docs div:last-of-type h4,#docs div:nth-last-of-type(2) h4{height:124px}#faq{margin:20px 20px 0;padding:30px 20px;width:calc(100% - 40px)}#faq h3{margin:0 auto;width:75%}#faq details[open] summary:after{top:23px}#faq summary:after{top:15px}#reviews{padding:190px 20px 40px}#reviews .swiper-wrapper{flex-direction:column}#reviews .swiper-slide{height:auto;margin-bottom:20px;padding-bottom:30px;width:100%}#reviews .swiper-slide div{position:relative;right:auto;top:-25px}footer{background:var(--dark);padding-bottom:30px;padding-left:20px;padding-right:20px}footer>div>div>div:last-of-type a{font:400 20px var(--inter)}footer nav{width:100%;flex-direction:column}footer nav ul:first-of-type{-moz-column-count:2;-webkit-column-count:2;column-count:2;-webkit-column-width:50%;-moz-column-width:50%;column-width:50%;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;display:block;height:auto;padding-left:30px;width:100%}footer nav ul a{color:var(--light);line-height:40px}footer nav ul p{color:var(--light);font:400 16px var(--montserrat)}footer nav ul:last-of-type{height:auto;padding-left:30px;width:80%}footer nav ul:last-of-type a{line-height:1.5}footer nav ul:first-of-type a{white-space:nowrap}footer form{margin:30px 0 10px;position:relative;width:100%}footer nav ul,footer>div>div{width:100%}}@media (max-width:568px){form input{width:90%!important;}#features div>div,#in .swiper-slide,#steps div>div{width:100%}body{zoom:.7}}@media (max-width:321px){body{zoom:.6}}@media (orientation: landscape){body{-ms-text-size-adjust:80%;-moz-text-size-adjust:80%;-webkit-text-size-adjust:80%}}