diff --git a/static/css/moover.css b/static/css/moover.css index 7b091e5..7378062 100644 --- a/static/css/moover.css +++ b/static/css/moover.css @@ -1,693 +1,2 @@ -.container { - margin: 0 auto; - width: 1280px; - position: relative; - min-height: 695px; -} - -@media (min-width: 1720px) { - .container { - width: 1720px; - } -} - -/*@media (max-width: 1019.98px) {*/ -/* .container {*/ -/* width: 720px*/ -/* }*/ -/*}*/ -/*@media (max-width: 767.98px) {*/ -/* .container {*/ -/* margin: 0 15px;*/ -/* width: auto*/ -/* }*/ -/*}*/ -:root { - --color-primary: #FF613A; - --color-white: #FFFFFF; - --color-black: #000000; - --color-black2: #272424; - --color-grey: #F1F1F1; - --color-grey2: #7A7979; - --color-orange: #FF613A; - --box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), - 0 -1px 10px 0 rgba(198, 199, 203, 0.20); - text-align: center; - color: var(--color-black2); -} - -.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { - font-weight: 700; -} - -h1, .h1 { - font-size: 44px; - line-height: 52px; -} - -@media (min-width: 1720px) { - h1, .h1 { - font-size: 48px; - line-height: 52px; - } -} - -h2, .h2 { - font-size: 24px; - line-height: 36px; - margin-bottom: 10px; -} - -h3, .h3 { - font-size: 20px; - line-height: 28px; - margin-bottom: 12px; -} - -h4, .h4 { - font-size: 18px; - line-height: 26px; - margin-bottom: 20px; -} - -p { - line-height: 22px; - margin-bottom: 20px; -} - -b { - font-weight: 500; -} - -.btn { - display: inline-flex; - text-decoration: none; - color: black; - line-height: 22px; - border-radius: 10px; - padding: 20px 76px 18px; - justify-content: center; - align-items: center; - margin: 0 3px; - letter-spacing: 0.2px; - font-size: 18px; -} - -.btn--primary { - background: var(--color-primary); - color: var(--color-white); -} - -.title { - font-size: 44px; - font-weight: 700; - line-height: 52px; - margin-bottom: 13px; - margin-left: auto; - margin-right: auto; -} - -@media (min-width: 1720px) { - .title { - font-size: 44px; - margin-bottom: 22px; - } -} - -.subtitle { - margin-bottom: 81px; - line-height: 22px; -} - -@media (min-width: 1720px) { - .subtitle { - font-size: 20px; - margin-bottom: 97px; - } -} - -.hide { - display: none; -} - -@media (min-width: 1440px) { - .is-container.wrapper_main { - max-width: initial; - } -} - -.presentation { - margin: 20px -65px 140px; -} - -@media (min-width: 1720px) { - .presentation { - margin-left: 0; - margin-right: 0; - } -} - -.presentation__top { - position: relative; - min-height: 270px; - margin: 0 auto 116px; - padding: 29px 0 40px; - background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png); - background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px; - background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; - background-size: 17.5%,21.8%,8.5%,8.8%; -} - -@media (min-width: 1720px) { - .presentation__top { - background-size: 18.5%, 22%, 9%, 10.1%; - background-position: top -47px left 58px, top -31px right 20px, bottom 8px left 347px, bottom -5px right 352px; - padding-top: 95px; - margin-bottom: 176px; - } -} - -.presentation__title { - margin-bottom: 23px; -} - -.presentation__subtitle { - margin-bottom: 41px; - font-weight: 600; -} - -.presentation__btn { - margin-bottom: 40px; -} - -.presentation__next { - font-weight: 500; - line-height: 22px; - padding-right: 5px; -} - -.presentation__arrows { - padding-top: 2px; - animation: jump 2s ease-in-out infinite; -} - -@keyframes jump { - 0% { - transform: translateY(0px); - } - 50% { - transform: translateY(-5px); - } - 60% { - transform: translateY(20px); - } - 70% { - transform: translateY(0px); - } - 80% { - transform: translateY(20px); - } - 100% { - transform: translateY(0px); - } -} - -.presentation__bottom .presentation__title { - margin-bottom: 13px; -} - -.presentation__cards { - max-width: 1300px; - margin: 0 auto; -} - -.cards__list { - display: grid; - grid-template-columns: repeat(4, 1fr); -} - -.cards__item { - position: relative; -} - -.cards__img:hover { - scale: 1.05; - transition: scale 0.15s linear; -} - -.cards__img { - margin-bottom: 5px; -} - -.cards__desc { - font-weight: 500; - line-height: 22px; -} - -.cards__arrow { - width: 62px; - height: 20px; - position: absolute; - right: -30px; - top: -21px; - background-image: url("/static/img/svg/Arrow23.svg"); -} - -.easy { - margin-bottom: 162px; -} - -.easy .title { - max-width: 55%; - margin-bottom: 21px; -} - -.easy .subtitle { - margin-bottom: 41px; -} - -.easy__grid { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: repeat(2, minmax(186px, auto)); - grid-template-areas: 'a b' 'a c'; - grid-column-gap: 20px; - grid-row-gap: 80px; - margin-bottom: 46px; -} - -.easy__item { - border-radius: 30px; - background-color: var(--color-grey); - /*background-color: #a72525;*/ - text-align: left; - padding: 21px; - box-shadow: var(--box-shadow-primary); -} - -.easy__item--fir { - grid-area: a; - margin-right: 60px; - padding-bottom: 0; -} - -.easy__item--fir p { - width: 93%; - margin-bottom: 29px; -} - -.easy__item--sec img { - margin-bottom: -10px; - margin-right: -5px; -} - -.easy__item--thr img { - margin-bottom: -10px; - margin-right: 24px; -} - -.easy__item--sec { - grid-area: b; - position: relative; - display: flex; - align-items: center; - justify-content: space-between; -} - -.easy__item--sec p, -.easy__item--thr p, -.easy__item--sec, -.easy__item--thr { - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; -} - -.easy__item--thr { - grid-area: c; - display: flex; - align-items: center; - justify-content: space-between; -} - -.easy__item--thr p { - max-width: 50%; -} - -.easy__arrow { - width: 68px; - height: 18px; - background-image: url("/static/img/svg/Arrow08.svg"); - position: absolute; - z-index: 1; -} - -.easy__arrow--fir { - top: 46%; - right: 101%; -} - -.easy__arrow--sec { - top: 117%; - left: 30%; - transform: rotate(90deg); -} - -.easy__btn { - margin-top: -21px; -} - -.chatterbox { - margin-bottom: 160px; -} - -.chatterbox__slider { - max-width: 1200px; - margin: 0 auto; -} - -.chatterbox__slide { - width: 335px; - height: 615px; - background: url("/static/img/webp/phone-border.webp") center no-repeat; - transition: scale 0.2s ease-in-out; - margin: auto; - position: relative; -} - -.chatterbox__slide.loaded video { - opacity: 1; -} - -.chatterbox__slide.loaded img { - z-index: -10; -} - -.chatterbox__slide video { - max-width: 100%; - opacity: 0; - transition: opacity 0.2s ease-in-out; - pointer-events: none; -} - -.chatterbox__slide img { - position: absolute; - scale: 1.32; - top: 11%; -} - -.chatterbox__wrap { - position: absolute; - left: 8px; - right: 8px; - top: 8px; - bottom: 8px; - border-radius: 25px; - background-color: grey; - overflow: hidden; -} - -.chatterbox__vbtn { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - opacity: 0; - transition: opacity 0.2s ease-in-out; - pointer-events: none; -} - -.loaded .chatterbox__vbtn { - display: none; -} - -.chatterbox__vbtn::before { - width: 80px; - height: 80px; - display: flex; - align-items: center; - justify-content: center; - background: var(--color-primary); - border: 0; - border-radius: 50%; - transition: opacity 100ms linear; -} - -.chatterbox__vbtn::before, .chatterbox__vbtn::after { - content: ""; - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - cursor: pointer; -} - -.chatterbox__vbtn::after { - border-color: transparent transparent transparent #ffffff; - border-style: solid; - border-width: 15px 0 15px 25px; - display: inline-block; - margin-left: 2px; -} - -.chatterbox__vbox { - position: relative; - display: flex; - justify-content: center; - align-items: center; - height: 600px; -} - -.chatterbox .title { - margin-bottom: 60px; -} - -.chatterbox .slick-next { - right: -40px; -} - -.chatterbox .slick-prev { - left: -40px; -} - -.slick-slide:not(.slick-center) .chatterbox__slide { - scale: 0.72; -} - -.slick-center .chatterbox__vbtn { - opacity: 1; - pointer-events: initial; - z-index: 1; -} - -.slick-center .chatterbox__vbox video { - pointer-events: initial; - cursor: pointer; -} - -.use { - margin-bottom: 123px; -} - -.use__img { - width: 67.5%; - margin-left: 16px; - margin-bottom: 31px; -} - -.use__btn { - margin-bottom: 11px; -} - -.use__link { - font-size: 18px; - font-weight: 600; - line-height: 26px; - color: var(--color-grey2); -} - -.use .title { - max-width: 80%; - margin-bottom: 49px; -} - -.use--diff .title { - width: 60%; - margin-bottom: 60px; -} - -.use--diff .use__img { - width: 100%; - margin-left: 0; - margin-bottom: 17px; -} - -.use--lett { - margin-bottom: 120px; -} - -.use--lett .title { - margin-bottom: 51px; -} - -.use--lett .use__img { - margin-left: -5px; - margin-right: -5px; - max-width: 110%; - width: 1290px; -} - -.animate { - padding: 60px 40px 49px; - opacity: 0; - background-color: var(--color-black2); - border-radius: 30px; - color: white; - margin-bottom: 160px; -} - -.animate.left { - transform: translateX(-180px); -} - -.animate.right { - transform: translateX(180px); -} - -.animate__link { - color: var(--color-orange); - text-decoration: underline !important; -} - -.animate .title { - margin-bottom: 25px; - max-width: 87%; - /*width: 90%;*/ -} - -.animate .subtitle { - width: 47%; - margin: 0 auto 23px; -} - -.about { - margin-bottom: 168px; -} - -.about .title { - margin-bottom: 60px; -} - -.about__grid { - display: grid; - grid-template-columns: repeat(2, 1fr); -} - -.about__img { - box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC, inset -18.19px -1.21px 18.19px 0 #4052801A, 48.5px 36.38px 36.38px 0 #6B7F9933; - border-radius: 31px; - margin-left: 8px; - margin-top: 8px; -} - -.about__right { - text-align: left; - padding-top: 43px; - padding-left: 50px; -} - -.about__half { - max-width: 50%; - float: left; -} - -.about__half:last-child { - padding-left: 16px; - max-width: 47%; -} - -.about b { - letter-spacing: 0.4px; -} - -.benefits { - margin-bottom: 132px; -} - -.benefits__grid { - text-align: left; - display: grid; - grid-template-columns: 1.5fr 3fr 1.5fr; -} - -.benefits__item { - min-height: 122px; - padding-right: 7px; - margin-bottom: 22px; -} - -.benefits__third { - padding-left: 16px; -} - -.benefits .title { - margin-bottom: 76px; -} - -.benefits img { - position: relative; - top: 14px; - right: -11px; -} - -.uses { - margin-bottom: 122px; -} - -.uses__grid { - text-align: left; - display: grid; - grid-template-columns: repeat(3, 1fr); - /* max-width: 101.5%; */ - /* width: 101.5%; */ -} - -.uses__item { - min-height: 50px; - margin-bottom: 43px; - padding: 0 50px 0 2px; -} - -.uses__icon { - margin-bottom: 11px; -} - -.uses .title { - max-width: 50%; - margin: 0 auto 60px; -} - -.sore { - margin-bottom: 160px; -} - -.sore__img { - margin: 0 auto 26px; - position: relative; - left: -17px; -} - -.sore .title { - margin-bottom: 40px; -} - -.sore .subtitle { - max-width: 62%; - margin: 0 auto -1px; -} - -.sore .h3 { - max-width: 47%; - margin: 0 auto 19px; -} +.container{margin:0 auto;width:1280px;position:relative}@media (min-width: 1720px){.container{width:1720px}}@media (max-width: 1304.98px){.container{width:1120px;max-width:88vw}}@media (max-width: 991.98px){.container{width:640px;max-width:100vw}}@media (max-width: 767.98px){.container{margin:0 16px;width:auto}}:root{--color-primary: #FF613A;--color-white: #FFFFFF;--color-black: #000000;--color-black2: #272424;--color-grey: #F1F1F1;--color-grey2: #7A7979;--color-orange: #FF613A;--box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), + 0 -1px 10px 0 rgba(198, 199, 203, 0.20);text-align:center;color:var(--color-black2)}body{overflow-x:hidden;padding-top:129px}@media (max-width: 1304.98px){body{padding-top:126px}}@media (max-width: 991.98px){body{padding-top:85px}}@media (max-width: 767.98px){body{padding-top:57px}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:700}h1,.h1{font-size:44px;line-height:52px}@media (min-width: 1720px){h1,.h1{font-size:48px;line-height:52px}}h2,.h2{font-size:24px;line-height:36px;margin-bottom:10px}@media (min-width: 1720px){h2,.h2{font-size:28px;margin-bottom:20px}}h3,.h3{font-size:20px;line-height:28px;margin-bottom:12px}@media (max-width: 1304.98px){h3,.h3{margin-bottom:13px}}h4,.h4{font-size:18px;line-height:26px;margin-bottom:20px}p{line-height:22px;margin-bottom:20px}@media (min-width: 1720px){p{font-size:20px;line-height:26px}}@media (max-width: 991.98px){p{margin-bottom:18px}}@media (max-width: 479.98px){p{margin-bottom:14px}}b{font-weight:500}@media (max-width: 991.98px){b{font-size:16px;line-height:22px}}.btn{display:inline-flex;text-decoration:none;color:black;line-height:22px;border-radius:10px;padding:20px 76px 18px;justify-content:center;align-items:center;margin:0 3px;letter-spacing:0.2px;font-size:18px}.btn--primary{background:var(--color-primary);color:var(--color-white)}.title{font-size:44px;font-weight:700;line-height:52px;margin-bottom:13px;margin-left:auto;margin-right:auto}@media (min-width: 1720px){.title{font-size:48px;margin-bottom:22px}}@media (max-width: 1304.98px){.title{margin-bottom:20px}}@media (max-width: 991.98px){.title{font-size:32px;line-height:38.73px}}@media (max-width: 767.98px){.title{margin-bottom:14px}}.subtitle{margin-bottom:81px;line-height:22px}@media (min-width: 1720px){.subtitle{font-size:20px;margin-bottom:105px}}@media (max-width: 1304.98px){.subtitle{margin-bottom:71px}}.hide{display:none}.hide__xxl{display:inline-flex}@media (min-width: 1720px){.hide__xxl{display:none}}@media (max-width: 991.98px){.hide__md{display:none}}@media (max-width: 479.98px){.hide__xs{display:none}}.show__xxl{display:none}@media (min-width: 1720px){.show__xxl{display:block}}.show__md{display:none}@media (max-width: 991.98px){.show__md{display:initial}}@media (min-width: 480px){.show__xs{display:none}}@media (min-width: 1440px){.br--xxl{display:none}}@media (max-width: 991.98px){.br--md{display:none}}@media (max-width: 767.98px){.br--sm{display:none}}@media (min-width: 1440px){.is-container.wrapper_main{max-width:initial}}.is-container.wrapper_main>.container{position:relative;left:15px}@media (min-width: 1720px){.is-container.wrapper_main>.container{left:17px}}@media (max-width: 767.98px){.is-container.wrapper_main>.container{left:0}}.header{margin-top:0;position:fixed;left:0;top:0;width:100vw;padding:40px 5px;transition:all 0.1s ease-in-out}@media (max-width: 1304.98px){.header{padding-top:37px;padding-bottom:41px}}@media (max-width: 991.98px){.header{padding-top:19px;padding-bottom:19px}}.header.scrolled{padding-top:20px;padding-bottom:20px;box-shadow:var(--box-shadow-primary);border-bottom:1px solid var(--color-grey)}.header__grid,.header__list{display:flex;align-items:center;justify-content:space-between}.header__logo{width:48px;height:48px;position:relative;left:5px}@media (max-width: 1304.98px){.header__logo{left:6px}}@media (max-width: 991.98px){.header__logo{left:0}}@media (max-width: 767.98px){.header__logo{left:-3px}}.header__nav{flex-grow:1;max-width:41%;margin-left:auto}@media (min-width: 1720px){.header__nav{max-width:34%}}@media (max-width: 1304.98px){.header__nav{max-width:46.5%}}.header__link{color:var(--color-black2);text-decoration:none}.header__btn{padding:8px 0 6px;font-size:16px;margin-left:61px;margin-right:-3px}@media (min-width: 1720px){.header__btn{margin-left:81px}}@media (max-width: 1304.98px){.header__btn{margin-right:0}}@media (max-width: 991.98px){.header__btn{display:none}}.header .dropdown{left:-4px}@media (max-width: 767.98px){.header .dropdown{left:-8px}}.header .dropdown-content{right:0;height:initial}@media (max-width: 575px){.header .dropdown-content{right:0;left:initial}}.presentation{margin:12px -65px 140px}@media (min-width: 1720px){.presentation{margin-left:0;margin-right:0;margin-bottom:160px}}@media (max-width: 1304.98px){.presentation{margin-bottom:118px}}@media (max-width: 991.98px){.presentation{margin-bottom:105px}}.presentation__top{position:relative;min-height:270px;margin:0 auto 116px;padding:29px 0 40px;background-image:url(/static/img/png/Box9.png),url(/static/img/png/Box10.png),url(/static/img/png/Box11.png),url(/static/img/png/Box12.png);background-position:top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px;background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;background-size:17.5%, 21.8%, 8.5%, 8.8%}@media (min-width: 1720px){.presentation__top{background-size:18.5%, 22%, 9%, 10.1%;background-position:top -47px left 58px, top -31px right 20px, bottom 8px left 347px, bottom -5px right 352px;padding-top:95px;margin-bottom:176px}}@media (max-width: 1304.98px){.presentation__top{background-size:16%, 20%, 9.5%, 10.1%;background-position:top -2.8% left 6.5%, top -19% right 3.5%, bottom 32% left 23%, bottom 29% right 22.6%;margin-bottom:96px}}@media (max-width: 991.98px){.presentation__top{background-size:14.5%, 17%, 8.3%, 9.1%;background-position:top 9% left 7%, top 5% right 6%, bottom 51% left 14.8%, bottom 47.5% right 13.8%;padding-top:31px;margin-bottom:76px}}@media (max-width: 767.98px){.presentation__top{margin-bottom:77px}}@media (max-width: 991.98px){.presentation__bottom .subtitle{max-width:40%;margin:0 auto 30px}}@media (max-width: 767.98px){.presentation__bottom .subtitle{max-width:65%;margin-bottom:21px}}.presentation__title{margin-bottom:23px}@media (max-width: 991.98px){.presentation__title{max-width:75%;margin:0 auto 19px}}@media (max-width: 767.98px){.presentation__title{margin-bottom:15px}}.presentation__subtitle{margin-bottom:41px;font-weight:600}@media (max-width: 991.98px){.presentation__subtitle{max-width:55%;margin:0 auto 40px;font-size:16px}}@media (max-width: 767.98px){.presentation__subtitle{margin-bottom:30px;max-width:77%}}.presentation__btn{margin-bottom:40px}@media (max-width: 991.98px){.presentation__btn{padding-left:82px;padding-right:82px}}@media (max-width: 767.98px){.presentation__btn{margin-bottom:30px}}.presentation__next{font-weight:500;line-height:22px;padding-right:5px}.presentation__arrows{padding-top:2px;animation:jump 2s ease-in-out infinite}.presentation__cards{max-width:1300px;margin:0 auto}@media (min-width: 1720px){.presentation__cards{max-width:initial;margin-left:-10px;margin-right:-10px}}@media (max-width: 1304.98px){.presentation__cards{max-width:1140px}}.presentation__bottom .presentation__title{margin-bottom:13px}@keyframes jump{0%{transform:translateY(0px)}50%{transform:translateY(-5px)}60%{transform:translateY(20px)}70%{transform:translateY(0px)}80%{transform:translateY(20px)}100%{transform:translateY(0px)}}.cards__list{display:grid;grid-template-columns:repeat(4, 1fr)}.cards__item{position:relative}@media (max-width: 991.98px){.cards__item{max-width:270px}}@media (max-width: 767.98px){.cards__item{max-width:251px;margin-right:18px}}.slick-active .cards__item .cards__desc,.cards__item:hover .cards__desc,.cards__item:focus .cards__desc{-webkit-line-clamp:initial;line-clamp:initial;max-height:17em}.cards__img{margin-bottom:5px}@media (min-width: 1720px){.cards__img{width:100%;margin-bottom:15px}}@media (max-width: 1304.98px){.cards__img{margin-bottom:8px}}@media (max-width: 991.98px){.cards__img{margin-bottom:8px}}@media (max-width: 767.98px){.cards__img{margin-bottom:10px}}.cards__img:hover{scale:1.05;transition:scale 0.15s linear}.cards__desc{font-weight:500;line-height:22px;padding:0 5px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;line-clamp:7;-webkit-box-orient:vertical;transition:all 0.3s ease-in-out;max-height:10em}@media (min-width: 1720px){.cards__desc{font-size:20px;line-height:26px;padding-left:20px;padding-right:20px}}@media (max-width: 1279.98px){.cards__desc{padding-left:5px;padding-right:5px;margin-bottom:3px}}@media (max-width: 991.98px){.cards__desc{padding-left:8px;padding-right:8px}}.slick-active .cards__desc,.cards__desc:hover,.cards__desc:focus{-webkit-line-clamp:initial;line-clamp:initial;max-height:999em}.cards__desc a{color:var(--color-orange)}.cards__arrow{width:62px;height:20px;position:absolute;right:-30px;top:-21px;background-image:url("/static/img/svg/Arrow23.svg")}@media (min-width: 1720px){.cards__arrow{right:-45px;top:-29px}}@media (max-width: 1304.98px){.cards__arrow{top:-8%}}@media (max-width: 991.98px){.cards__arrow{display:none}}.cards .slick-list{overflow:visible}@media (max-width: 767.98px){.cards .slick-list{margin-bottom:1px;padding-left:58px}}.cards .slick-dots{display:flex;justify-content:center;margin:0;padding:1rem 0;list-style-type:none}.cards .slick-dots li{margin:0 0.25rem}@media (max-width: 767.98px){.cards .slick-dots li{margin:0 0.31rem}}.cards .slick-dots button{display:block;width:8px;height:8px;padding:0;border:none;border-radius:100%;background-color:#D9D9D9;text-indent:-9999px}.cards .slick-dots li.slick-active button{background-color:var(--color-orange)}.cards--cstmr .cards__desc{padding:0 50px}@media (max-width: 1304.98px){.cards--cstmr .cards__desc{padding-left:10px;padding-right:10px}}.easy{margin-bottom:162px}@media (min-width: 1720px){.easy{margin-bottom:180px}}@media (max-width: 1304.98px){.easy{margin-bottom:140px}}@media (max-width: 991.98px){.easy{margin-bottom:121px}}.easy .title{max-width:55%;margin-bottom:21px}@media (min-width: 1720px){.easy .title{max-width:45%;margin-bottom:23px}}@media (max-width: 991.98px){.easy .title{max-width:75%}}@media (max-width: 767.98px){.easy .title{max-width:95%;margin-bottom:30px}}.easy .subtitle{margin-bottom:41px}@media (min-width: 1720px){.easy .subtitle{margin-bottom:59px}}@media (max-width: 767.98px){.easy .subtitle{max-width:90%;margin:0 auto 23px}}.easy__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2, minmax(186px, auto));grid-template-areas:'a b' 'a c';grid-column-gap:20px;grid-row-gap:80px;margin-bottom:46px}@media (min-width: 1720px){.easy__grid{grid-column-gap:147px;grid-template-rows:repeat(2, minmax(245px, auto));grid-row-gap:136px;margin-bottom:63px}}@media (max-width: 1304.98px){.easy__grid{grid-column-gap:69px;grid-template-rows:repeat(2, minmax(172px, auto));margin-bottom:41px}}@media (max-width: 991.98px){.easy__grid{display:block;margin-bottom:37px}}@media (max-width: 767.98px){.easy__grid{margin-bottom:40px}}.easy__item{border-radius:30px;background-color:var(--color-grey);text-align:left;padding:21px;box-shadow:var(--box-shadow-primary)}.easy__item--fir{grid-area:a;margin-right:60px;padding-bottom:0}@media (min-width: 1720px){.easy__item--fir{margin-right:-10px;padding-top:31px}}@media (max-width: 1304.98px){.easy__item--fir{margin-right:13px}}@media (max-width: 991.98px){.easy__item--fir{padding-top:17px;margin-right:0;margin-bottom:49px}}@media (max-width: 767.98px){.easy__item--fir{margin-bottom:42px}}.easy__item--fir p{width:93%;margin-bottom:29px}@media (min-width: 1720px){.easy__item--fir p{width:89%;margin-bottom:53px}}@media (max-width: 991.98px){.easy__item--fir p{max-width:78%}}.easy__item--sec{grid-area:b;position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:0;padding-top:0;padding-bottom:0}@media (min-width: 1720px){.easy__item--sec{padding-left:15px}}@media (max-width: 991.98px){.easy__item--sec{padding-top:35px;padding-bottom:37px;margin-bottom:46px}}@media (max-width: 767.98px){.easy__item--sec{display:block;padding-top:0;padding-bottom:0;margin-bottom:49px}}.easy__item--sec img{margin-bottom:-10px;margin-right:-5px;max-width:50.1%}@media (min-width: 1720px){.easy__item--sec img{max-width:53%}}@media (max-width: 1304.98px){.easy__item--sec img{max-width:42%;margin-bottom:-4px;margin-right:0}}@media (max-width: 991.98px){.easy__item--sec img{margin-right:0;margin-bottom:0}}@media (max-width: 767.98px){.easy__item--sec img{max-width:104%;position:relative;left:-6px;top:-4px}}.easy__item--sec p{margin-bottom:0;padding-top:0;padding-bottom:0}@media (max-width: 767.98px){.easy__item--sec p{margin-bottom:22px}}.easy__item--thr{grid-area:c;display:flex;align-items:center;justify-content:space-between;margin-bottom:0;padding-top:0;padding-bottom:0}@media (min-width: 1720px){.easy__item--thr{padding-left:15px}}@media (max-width: 991.98px){.easy__item--thr{padding-top:42px;padding-bottom:46px}}@media (max-width: 767.98px){.easy__item--thr{display:block;padding-top:0;padding-bottom:0}}.easy__item--thr .img{margin-bottom:-10px;margin-right:24px;max-width:80%}@media (max-width: 1279.98px){.easy__item--thr .img{max-width:35%}}@media (max-width: 1304.98px){.easy__item--thr .img{margin-right:2px}}@media (max-width: 991.98px){.easy__item--thr .img{margin-right:0;max-width:34%}}@media (max-width: 767.98px){.easy__item--thr .img img{display:block;margin:0 auto}}.easy__item--thr p{max-width:50%;margin-bottom:0;padding-top:0;padding-bottom:0}@media (max-width: 991.98px){.easy__item--thr p{max-width:60%}}@media (max-width: 767.98px){.easy__item--thr p{margin-bottom:22px;max-width:100%}}.easy__arrow{width:68px;height:18px;background-image:url("/static/img/svg/Arrow08.svg");position:absolute;z-index:1}@media (min-width: 1720px){.easy__arrow{scale:1.4}}@media (max-width: 1304.98px){.easy__arrow{scale:0.8}}@media (max-width: 991.98px){.easy__arrow{display:none}}.easy__arrow--fir{top:46%;right:101%}@media (min-width: 1720px){.easy__arrow--fir{right:105%;top:34%}}@media (max-width: 1304.98px){.easy__arrow--fir{top:48%}}.easy__arrow--sec{top:117%;left:30%;transform:rotate(90deg)}@media (min-width: 1720px){.easy__arrow--sec{left:45%;top:124%}}@media (max-width: 1304.98px){.easy__arrow--sec{left:38%}}.easy__btn{margin-top:-21px}@media (max-width: 1304.98px){.easy__btn{margin-top:-20px}}@media (max-width: 991.98px){.easy__btn{margin-top:-19px;padding-left:54px;padding-right:54px}}@media (max-width: 767.98px){.easy__btn{padding-left:50px;padding-right:50px;margin-top:-8px;max-width:100%}}.chatterbox{margin-bottom:160px}@media (min-width: 1720px){.chatterbox{margin-bottom:180px}}@media (max-width: 1304.98px){.chatterbox{margin-bottom:142px}}@media (max-width: 991.98px){.chatterbox{margin-left:-50vw;margin-right:-50vw;margin-bottom:122px}}@media (max-width: 767.98px){.chatterbox{max-width:100vw;margin:0 auto 121px;position:relative}}.chatterbox__slider{max-width:1200px;margin:0 auto}@media (min-width: 1720px){.chatterbox__slider{max-width:1640px}}@media (max-width: 1304.98px){.chatterbox__slider{max-width:1100px}}@media (max-width: 991.98px){.chatterbox__slider{max-width:720px}}@media (max-width: 767.98px){.chatterbox__slider{width:720px;left:50%;transform:translateX(-50%)}}@media (max-width: 479.98px){.chatterbox__slider{width:830px;max-width:initial}}.chatterbox__slide{width:335px;height:615px;background:url("/static/img/webp/phone-border.webp") center no-repeat;transition:scale 0.2s ease-in-out;margin:auto;position:relative}@media (min-width: 1720px){.chatterbox__slide{width:456px;height:836px;background-size:456px 836px}}@media (max-width: 1304.98px){.chatterbox__slide{width:308px;height:565px;background-size:308px 565px}}@media (max-width: 991.98px){.chatterbox__slide{width:206px;height:377px;background-size:206px 377px}}@media (max-width: 767.98px){.chatterbox__slide{width:234px;height:429px;background-size:234px 429px}}.chatterbox__slide.loaded video{opacity:1}.chatterbox__slide.loaded img{z-index:-10}.chatterbox__slide video{max-width:100%;opacity:0;transition:opacity 0.2s ease-in-out;pointer-events:none}@media (max-width: 767.98px){.chatterbox__slide video{position:relative;top:-4px}}.chatterbox__slide img{position:absolute;scale:1.32;top:11%}.chatterbox__wrap{position:absolute;left:8px;right:8px;top:8px;bottom:8px;border-radius:25px;background-color:grey;overflow:hidden}@media (min-width: 1720px){.chatterbox__wrap{border-radius:50px}}.chatterbox__vbtn{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;transition:opacity 0.2s ease-in-out;pointer-events:none}.loaded .chatterbox__vbtn{display:none}.chatterbox__vbtn::before{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);border:0;border-radius:50%;transition:opacity 100ms linear}@media (min-width: 1720px){.chatterbox__vbtn::before{width:109px;height:109px}}@media (max-width: 991.98px){.chatterbox__vbtn::before{width:48px;height:48px}}@media (max-width: 767.98px){.chatterbox__vbtn::before{width:55px;height:55px}}.chatterbox__vbtn::before,.chatterbox__vbtn::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);cursor:pointer}.chatterbox__vbtn::after{border-color:transparent transparent transparent #ffffff;border-style:solid;border-width:15px 0 15px 25px;display:inline-block;margin-left:2px}@media (min-width: 1720px){.chatterbox__vbtn::after{border-width:23px 0 23px 35px;margin-left:4px}}@media (max-width: 991.98px){.chatterbox__vbtn::after{border-width:10px 0 10px 14px}}.chatterbox__vbox{position:relative;display:flex;justify-content:center;align-items:center;height:600px}@media (min-width: 1720px){.chatterbox__vbox{height:827px}}@media (max-width: 1304.98px){.chatterbox__vbox{height:530px}}@media (max-width: 991.98px){.chatterbox__vbox{height:370px}}.chatterbox__mbtns{position:absolute;top:58%;transform:translateY(-50%);left:0;right:0}@media (max-width: 479.98px){.chatterbox__mbtns{top:61.6%}}.chatterbox .title{margin-bottom:60px}@media (max-width: 1304.98px){.chatterbox .title{margin-bottom:39px}}@media (max-width: 767.98px){.chatterbox .title{margin-bottom:50px}}.chatterbox .slick-next{right:-40px}@media (max-width: 1304.98px){.chatterbox .slick-next{right:-10px}}@media (max-width: 991.98px){.chatterbox .slick-next{width:40px;height:40px;background-size:32%;right:5%}}@media (max-width: 479.98px){.chatterbox .slick-next{right:0}}.chatterbox .slick-prev{left:-40px}@media (max-width: 1304.98px){.chatterbox .slick-prev{left:-10px}}@media (max-width: 991.98px){.chatterbox .slick-prev{width:40px;height:40px;background-size:32%;left:5%}}@media (max-width: 479.98px){.chatterbox .slick-prev{left:0}}@media (max-width: 991.98px){.chatterbox .slick-list{overflow:visible}}.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.72}@media (max-width: 1304.98px){.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.69}}@media (max-width: 991.98px){.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.8}}@media (max-width: 479.98px){.slick-slide:not(.slick-center) .chatterbox__slide{scale:0.85}}.slick-center .chatterbox__vbtn{opacity:1;pointer-events:initial;z-index:1}.slick-center .chatterbox__vbox video{pointer-events:initial;cursor:pointer}.use{margin-bottom:123px}@media (min-width: 1720px){.use{margin-bottom:184px}}@media (max-width: 1304.98px){.use{margin-bottom:142px}}@media (max-width: 991.98px){.use{margin-bottom:121px}}.use__img{width:67.5%;margin-left:16px;margin-bottom:31px}@media (min-width: 1720px){.use__img{width:50.2%;margin-left:15px;margin-bottom:46px}}@media (max-width: 1304.98px){.use__img{width:77%;margin-left:10px;margin-bottom:34px}}@media (max-width: 991.98px){.use__img{margin-left:0;width:100%;margin-bottom:40px}}@media (max-width: 767.98px){.use__img{margin-bottom:30px}}.use__btn{margin-bottom:11px;text-align:center}@media (max-width: 767.98px){.use__btn{max-width:100%;padding-left:50px;padding-right:50px}}.use__link{font-size:18px;font-weight:600;line-height:26px;color:var(--color-grey2)}.use .title{max-width:80%;margin-bottom:49px}@media (min-width: 1720px){.use .title{max-width:40%}}@media (max-width: 991.98px){.use .title{margin-bottom:40px}}@media (max-width: 767.98px){.use .title{max-width:100%;margin-bottom:29px}}.use--lett{margin-bottom:120px}@media (min-width: 1720px){.use--lett{margin-bottom:126px}}@media (max-width: 1304.98px){.use--lett{margin-bottom:106px}}@media (max-width: 991.98px){.use--lett{margin-bottom:79px}}@media (max-width: 767.98px){.use--lett{margin-bottom:81px}}.use--lett .title{margin-bottom:51px}@media (max-width: 1304.98px){.use--lett .title{margin-bottom:39px}}@media (max-width: 767.98px){.use--lett .title{margin-bottom:0}}.use--lett .use__img{margin-left:-5px;margin-right:-5px;max-width:110%;width:1290px}@media (min-width: 1720px){.use--lett .use__img{width:initial}}@media (max-width: 1304.98px){.use--lett .use__img{margin-left:0;margin-right:0;max-width:100%;width:1120px}}@media (max-width: 767.98px){.use--lett .use__img{max-width:103%;margin-left:-5px;margin-top:-6px}}@media (max-width: 479.98px){.use--lett .use__img{margin-bottom:3px}}@media (max-width: 991.98px){.use .h3{max-width:75%;margin:0 auto 22px}}@media (max-width: 767.98px){.use .h3{max-width:100%;margin-bottom:16px}}.diff{margin-bottom:179px}@media (min-width: 1720px){.diff{margin-bottom:172px}}@media (max-width: 1304.98px){.diff{margin-bottom:140px}}@media (max-width: 991.98px){.diff{margin-bottom:125px}}@media (max-width: 767.98px){.diff{margin-bottom:139px}}.diff .title{width:60%;margin-bottom:65px}@media (min-width: 1720px){.diff .title{width:49%;margin-bottom:60px}}@media (max-width: 1304.98px){.diff .title{width:73%;margin-bottom:40px}}@media (max-width: 991.98px){.diff .title{width:90%;margin-bottom:40px}}@media (max-width: 767.98px){.diff .title{width:100%;margin-bottom:30px}}.diff__grid{display:flex;position:relative;margin-bottom:30px}.diff__grid::before{content:'';position:absolute;height:96%;width:5px;border-radius:5px;background-color:#EDEDED;left:50%;transform:translateX(-50%);bottom:0}@media (max-width: 1304.98px){.diff__grid::before{height:90%}}@media (max-width: 991.98px){.diff__grid::before{display:none}}@media (max-width: 991.98px){.diff__grid{display:block}}.diff__coll{width:50%}@media (max-width: 991.98px){.diff__coll{width:100%}}.diff__coll.left{margin-right:29px}@media (min-width: 1720px){.diff__coll.left{margin-right:12px}}@media (max-width: 1304.98px){.diff__coll.left{margin-right:10px}}@media (max-width: 991.98px){.diff__coll.left{margin-right:0}}.diff__coll.left .diff__coll-title{padding-left:39px}@media (min-width: 1720px){.diff__coll.left .diff__coll-title{padding-left:2px}}@media (max-width: 1304.98px){.diff__coll.left .diff__coll-title{padding-left:0}}@media (max-width: 991.98px){.diff__coll.left .diff__coll-title{padding-left:0}}.diff__coll.right{margin-left:29px}@media (max-width: 1304.98px){.diff__coll.right{margin-left:10px}}@media (max-width: 991.98px){.diff__coll.right{margin-left:0;display:none}}.diff__coll.right .diff__coll-title{padding-right:39px}@media (min-width: 1720px){.diff__coll.right .diff__coll-title{padding-right:0}}@media (max-width: 1304.98px){.diff__coll.right .diff__coll-title{padding-right:0}}@media (max-width: 991.98px){.diff__coll.right .diff__coll-title{padding-right:0}}.diff__coll-title{margin-bottom:38px}@media (max-width: 1304.98px){.diff__coll-title{margin-bottom:18px}}@media (max-width: 991.98px){.diff__coll-title{margin-bottom:19px}}@media (max-width: 767.98px){.diff__coll-title{margin-bottom:29px}}.diff__item{position:relative;text-align:left;padding-left:10px;padding-top:11px;padding-bottom:11px;display:flex;gap:11px;align-items:center;background-color:#FFFFFF;border-radius:15px;font-weight:500;font-size:20px;line-height:28px;margin-bottom:35px;cursor:default}@media (min-width: 1720px){.diff__item{padding:20px;gap:20px;margin-bottom:40px}}@media (max-width: 1304.98px){.diff__item{margin-bottom:18px}}@media (max-width: 991.98px){.diff__item{font-size:18px;margin-bottom:25px;padding-bottom:9px}}@media (max-width: 767.98px){.diff__item{font-size:16px;line-height:19.36px;padding-right:15px;margin-bottom:14px}}.diff__item:last-child{margin-bottom:0}.diff__item:hover .diff__status::before{scale:1.2}.diff__status{position:relative;height:48px;width:48px;border-radius:5px;flex-shrink:0}@media (min-width: 1720px){.diff__status{border-radius:12px}}@media (max-width: 1304.98px){.diff__status{border-radius:13px}}@media (max-width: 991.98px){.diff__status{border-radius:11px}}@media (max-width: 767.98px){.diff__status{width:35px;height:35px}}.diff__status::before{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);transform-origin:0% 15%}.diff__status::before{content:'';width:36px;height:36px}.diff__item--done .diff__status{background-color:#CCF9D9}.diff__item--done .diff__status::before{width:26px;height:26px;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}@media (max-width: 767.98px){.diff__item--done .diff__status::before{scale:0.7}}.diff__item--error .diff__status{background-color:#F9CCCC}.diff__item--error .diff__status::before{width:36px;height:36px;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==)}@media (max-width: 767.98px){.diff__item--error .diff__status::before{scale:0.7}}.animate{padding:60px 40px 49px;opacity:0;background-color:var(--color-black2);border-radius:30px;color:white;margin-bottom:160px}@media (min-width: 1720px){.animate{padding-top:100px;padding-bottom:89px;margin-bottom:180px}}@media (max-width: 1304.98px){.animate{margin-bottom:141px}}@media (max-width: 991.98px){.animate{padding-top:40px;padding-bottom:29px;margin-bottom:121px}}@media (max-width: 479.98px){.animate{padding:30px 7px 19px}}.animate.left{transform:translateX(-180px)}.animate.right{transform:translateX(180px)}.animate.right .title{margin-bottom:17px}@media (min-width: 1720px){.animate.right .title{max-width:80%;margin-bottom:40px}}@media (max-width: 1304.98px){.animate.right .title{margin-bottom:25px}}@media (max-width: 991.98px){.animate.right .title{margin-bottom:31px}}@media (max-width: 479.98px){.animate.right .title{margin-bottom:20px}}@media (max-width: 991.98px){.animate.right .subtitle{margin-bottom:31px}}@media (max-width: 479.98px){.animate.right .use__btn{margin-top:-11px}}.animate__link{color:var(--color-orange);text-decoration:underline !important}.animate .title{margin-bottom:25px;max-width:87%}@media (min-width: 1720px){.animate .title{margin-bottom:40px}}@media (max-width: 1304.98px){.animate .title{max-width:99%}}@media (max-width: 991.98px){.animate .title{max-width:85%;font-size:24px;line-height:29.05px}}@media (max-width: 767.98px){.animate .title{max-width:100%;margin-bottom:14px}}.animate .subtitle{width:47%;margin:0 auto 23px}@media (min-width: 1720px){.animate .subtitle{line-height:26px;letter-spacing:0.1px;margin-bottom:40px}}@media (max-width: 1304.98px){.animate .subtitle{width:54%}}@media (max-width: 991.98px){.animate .subtitle{width:102%;margin-bottom:26px}}@media (max-width: 479.98px){.animate .use__btn{margin-top:-6px;padding-left:15px;padding-right:15px;display:flex}}.about{margin-bottom:168px}@media (min-width: 1720px){.about{margin-bottom:188px}}@media (max-width: 1304.98px){.about{margin-bottom:138px}}@media (max-width: 991.98px){.about{margin-bottom:110px}}.about .title{margin-bottom:60px}@media (min-width: 1720px){.about .title{margin-bottom:49px}}@media (max-width: 1304.98px){.about .title{margin-bottom:39px}}@media (max-width: 991.98px){.about .title{margin-bottom:48px}}@media (max-width: 479.98px){.about .title{margin-bottom:37px}}.about__grid{display:grid;grid-template-columns:repeat(2, 1fr)}@media (max-width: 991.98px){.about__grid{display:block}}.about__img{box-shadow:inset 18.19px 1.21px 18.19px 0 #FFFFFFCC, inset -18.19px -1.21px 18.19px 0 #4052801A, 48.5px 36.38px 36.38px 0 #6B7F9933;border-radius:31px;margin-left:-20px;margin-top:8px}@media (min-width: 1720px){.about__img{margin-top:19px}}@media (max-width: 1304.98px){.about__img{margin-left:-10px}}@media (max-width: 991.98px){.about__img{margin-left:0;margin-bottom:49px;display:block}}@media (max-width: 479.98px){.about__img{margin-bottom:38px}}.about__right{text-align:left;padding-top:43px;padding-left:50px}@media (min-width: 1720px){.about__right{padding-top:90px;padding-left:21px}}@media (max-width: 1304.98px){.about__right{padding-left:11px;padding-top:19px}}@media (max-width: 991.98px){.about__right{padding:0 8px;text-align:center}}@media (max-width: 479.98px){.about__right{padding:0}}.about__right::after{content:'';display:block;clear:both}.about__half{max-width:50%;float:left}@media (max-width: 991.98px){.about__half{max-width:initial}}.about__half:last-child{padding-left:16px;max-width:47%}@media (max-width: 991.98px){.about__half:last-child{max-width:initial;padding-left:0}}.about b{letter-spacing:0.4px}@media (min-width: 1720px){.about b{font-weight:700;letter-spacing:0}}@media (max-width: 479.98px){.about b{letter-spacing:0.9px}}@media (min-width: 1720px){.about p{margin-bottom:39px}}.benefits{margin-bottom:132px}@media (min-width: 1720px){.benefits{margin-bottom:147px}}@media (max-width: 1304.98px){.benefits{margin-bottom:101px}}@media (max-width: 991.98px){.benefits{margin-bottom:93px}}@media (max-width: 479.98px){.benefits{margin-bottom:103px}}.benefits__grid{text-align:left;display:grid;grid-template-columns:1.5fr 3fr 1.5fr}@media (max-width: 991.98px){.benefits__grid{grid-template-columns:1fr 1fr}}@media (max-width: 479.98px){.benefits__grid{grid-template-columns:1fr;text-align:center}}.benefits__item{min-height:122px;padding-right:7px;margin-bottom:22px}@media (min-width: 1720px){.benefits__item{min-height:145px}}@media (max-width: 991.98px){.benefits__item{padding-right:25px}}@media (max-width: 479.98px){.benefits__item{padding-right:0;margin-bottom:19px;min-height:90px}}@media (max-width: 991.98px){.benefits__second{grid-column:1 / 3;order:-1;margin-bottom:56px}}@media (max-width: 479.98px){.benefits__second{grid-column:1/2;margin-bottom:31px}}.benefits__third{padding-left:16px}@media (min-width: 1720px){.benefits__third{padding-left:31px;margin-right:5px}}@media (max-width: 991.98px){.benefits__third{padding-left:11px}}@media (max-width: 479.98px){.benefits__third{padding-left:0}}.benefits .title{margin-bottom:76px}@media (min-width: 1720px){.benefits .title{margin-bottom:93px}}@media (max-width: 991.98px){.benefits .title{margin-bottom:19px}}.benefits img{position:relative;top:14px;right:-11px}@media (min-width: 1720px){.benefits img{top:-33px}}@media (max-width: 1304.98px){.benefits img{top:20px;right:0}}@media (min-width: 1720px){.benefits h2{margin-bottom:10px}}@media (max-width: 479.98px){.benefits p{margin-bottom:13px}}.uses{margin-bottom:120px}@media (min-width: 1720px){.uses{margin-bottom:136px}}@media (max-width: 1304.98px){.uses{margin-bottom:125px}}@media (max-width: 991.98px){.uses{margin-bottom:100px}}@media (max-width: 479.98px){.uses{margin-bottom:199px}}.uses__grid{text-align:left;display:grid;grid-template-columns:repeat(3, 1fr)}@media (max-width: 991.98px){.uses__grid{grid-template-columns:1fr 1fr;column-gap:15px}}@media (max-width: 479.98px){.uses__grid{display:block;text-align:center}}.uses__item{min-height:50px;margin-bottom:19px;padding:0 50px 0 2px}@media (min-width: 1720px){.uses__item{margin-bottom:22px}}@media (max-width: 991.98px){.uses__item{padding-right:0}}@media (max-width: 991.98px){.uses__item p:last-child{margin-bottom:0}}.uses__icon{margin-bottom:11px}@media (min-width: 1720px){.uses__icon{width:147px;height:147px;margin-bottom:20px}}.uses .title{max-width:50%;margin:0 auto 60px}@media (max-width: 1304.98px){.uses .title{max-width:70%;margin-bottom:39px}}@media (max-width: 479.98px){.uses .title{margin-bottom:30px}}.uses__title{font-size:24px;font-weight:700;line-height:36px;margin-bottom:10px}.uses--cstmr .uses__item{text-align:center;padding:0 15px}@media (max-width: 991.98px){.uses--cstmr .uses__item{margin-bottom:42px;min-height:255px}}@media (max-width: 479.98px){.uses--cstmr .uses__item{margin-bottom:25px;min-height:194px}}@media (max-width: 991.98px){.uses--cstmr .uses__item p{max-width:90%;margin:0 auto}}@media (max-width: 479.98px){.uses--cstmr .uses__item p{max-width:100%}}.uses--cstmr .uses__icon{width:118px;height:118px}@media (max-width: 991.98px){.uses--cstmr .uses__icon{width:142px;height:142px;margin-bottom:23px}}@media (max-width: 479.98px){.uses--cstmr .uses__icon{width:117px;height:117px;margin-bottom:8px}}@media (max-width: 991.98px){.uses--cstmr .uses__grid{grid-template-columns:1fr}}@media (max-width: 1304.98px){.uses--cstmr .title{margin-bottom:61px;max-width:80%}}@media (max-width: 991.98px){.uses--cstmr .title{margin-bottom:44px}}@media (max-width: 479.98px){.uses--cstmr .title{max-width:90%;margin-bottom:31px}}.sore{margin-bottom:160px;margin-top:1px}@media (min-width: 1720px){.sore{margin-bottom:178px}}@media (max-width: 1304.98px){.sore{margin-bottom:140px}}@media (max-width: 991.98px){.sore{margin-bottom:60px}}@media (max-width: 479.98px){.sore{margin-bottom:40px}}.sore__img{margin:0 auto 13px;position:relative;left:-17px;top:-13px}@media (min-width: 1720px){.sore__img{margin-bottom:40px;top:-5px;left:-21px}}@media (max-width: 1304.98px){.sore__img{left:2px;top:-22px;margin-bottom:4px}}@media (max-width: 991.98px){.sore__img{top:-8px;left:-15px;margin-bottom:18px}}@media (max-width: 479.98px){.sore__img{max-width:106%;top:-26px;left:-18px;margin-bottom:4px}}.sore .title{margin-bottom:40px}@media (min-width: 1720px){.sore .title{margin-bottom:61px}}@media (max-width: 991.98px){.sore .title{margin-bottom:20px}}@media (max-width: 479.98px){.sore .title{margin-bottom:29px}}.sore .subtitle{max-width:62%;margin:0 auto 10px}@media (min-width: 1720px){.sore .subtitle{line-height:26px;max-width:60%}}@media (max-width: 1304.98px){.sore .subtitle{max-width:65%}}@media (max-width: 991.98px){.sore .subtitle{max-width:85%}}@media (max-width: 479.98px){.sore .subtitle{max-width:99%}}.sore .h3{max-width:47%;margin:0 auto 19px}@media (min-width: 1720px){.sore .h3{max-width:38%}}@media (max-width: 1304.98px){.sore .h3{max-width:50%}}@media (max-width: 991.98px){.sore .h3{max-width:65%;margin-bottom:21px}}@media (max-width: 479.98px){.sore .h3{max-width:100%;margin-bottom:17px}}@media (max-width: 479.98px){.sore__btn{padding-top:8px;padding-bottom:8px;padding-left:15px;padding-right:15px;display:flex}} diff --git a/static/css/moover/about.css b/static/css/moover/about.css new file mode 100644 index 0000000..191fba1 --- /dev/null +++ b/static/css/moover/about.css @@ -0,0 +1,178 @@ +.about { + margin-bottom: 168px; +} + +@media (min-width: 1720px) { + .about { + margin-bottom: 188px; + } +} + +@media (max-width: 1304.98px) { + .about { + margin-bottom: 138px; + } +} + +@media (max-width: 991.98px) { + .about { + margin-bottom: 110px; + } +} + +.about .title { + margin-bottom: 60px; +} + +@media (min-width: 1720px) { + .about .title { + margin-bottom: 49px; + } +} + +@media (max-width: 1304.98px) { + .about .title { + margin-bottom: 39px; + } +} + +@media (max-width: 991.98px) { + .about .title { + margin-bottom: 48px; + } +} + +@media (max-width: 479.98px) { + .about .title { + margin-bottom: 37px; + } +} + +.about__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); +} + +@media (max-width: 991.98px) { + .about__grid { + display: block; + } +} + +.about__img { + box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC, inset -18.19px -1.21px 18.19px 0 #4052801A, 48.5px 36.38px 36.38px 0 #6B7F9933; + border-radius: 31px; + margin-left: -20px; + margin-top: 8px; +} + +@media (min-width: 1720px) { + .about__img { + margin-top: 19px; + } +} + +@media (max-width: 1304.98px) { + .about__img { + margin-left: -10px; + } +} + +@media (max-width: 991.98px) { + .about__img { + margin-left: 0; + margin-bottom: 49px; + display: block; + } +} + +@media (max-width: 479.98px) { + .about__img { + margin-bottom: 38px; + } +} + +.about__right { + text-align: left; + padding-top: 43px; + padding-left: 50px; +} + +@media (min-width: 1720px) { + .about__right { + padding-top: 90px; + padding-left: 21px; + } +} + +@media (max-width: 1304.98px) { + .about__right { + padding-left: 11px; + padding-top: 19px; + } +} + +@media (max-width: 991.98px) { + .about__right { + padding: 0 8px; + text-align: center; + } +} + +@media (max-width: 479.98px) { + .about__right { + padding: 0; + } +} + +.about__right::after { + content: ''; + display: block; + clear: both; +} + +.about__half { + max-width: 50%; + float: left; +} + +@media (max-width: 991.98px) { + .about__half { + max-width: initial; + } +} + +.about__half:last-child { + padding-left: 16px; + max-width: 47%; +} + +@media (max-width: 991.98px) { + .about__half:last-child { + max-width: initial; + padding-left: 0; + } +} + +.about b { + letter-spacing: 0.4px; +} + +@media (min-width: 1720px) { + .about b { + font-weight: 700; + letter-spacing: 0; + } +} + +@media (max-width: 479.98px) { + .about b { + letter-spacing: 0.9px; + } +} + +@media (min-width: 1720px) { + .about p { + margin-bottom: 39px; + } +} diff --git a/static/css/moover/animate.css b/static/css/moover/animate.css index f3eb592..b7c5d7b 100644 --- a/static/css/moover/animate.css +++ b/static/css/moover/animate.css @@ -7,6 +7,34 @@ margin-bottom: 160px; } +@media (min-width: 1720px) { + .animate { + padding-top: 100px; + padding-bottom: 89px; + margin-bottom: 180px; + } +} + +@media (max-width: 1304.98px) { + .animate { + margin-bottom: 141px; + } +} + +@media (max-width: 991.98px) { + .animate { + padding-top: 40px; + padding-bottom: 29px; + margin-bottom: 121px; + } +} + +@media (max-width: 479.98px) { + .animate { + padding: 30px 7px 19px; + } +} + .animate.left { transform: translateX(-180px); } @@ -15,6 +43,47 @@ transform: translateX(180px); } +.animate.right .title { + margin-bottom: 17px; +} + +@media (min-width: 1720px) { + .animate.right .title { + max-width: 80%; + margin-bottom: 40px; + } +} + +@media (max-width: 1304.98px) { + .animate.right .title { + margin-bottom: 25px; + } +} + +@media (max-width: 991.98px) { + .animate.right .title { + margin-bottom: 31px; + } +} + +@media (max-width: 479.98px) { + .animate.right .title { + margin-bottom: 20px; + } +} + +@media (max-width: 991.98px) { + .animate.right .subtitle { + margin-bottom: 31px; + } +} + +@media (max-width: 479.98px) { + .animate.right .use__btn { + margin-top: -11px; + } +} + .animate__link { color: var(--color-orange); text-decoration: underline !important; @@ -26,7 +95,64 @@ /*width: 90%;*/ } +@media (min-width: 1720px) { + .animate .title { + margin-bottom: 40px; + } +} + +@media (max-width: 1304.98px) { + .animate .title { + max-width: 99%; + } +} + +@media (max-width: 991.98px) { + .animate .title { + max-width: 85%; + font-size: 24px; + line-height: 29.05px; + } +} + +@media (max-width: 767.98px) { + .animate .title { + max-width: 100%; + margin-bottom: 14px; + } +} + .animate .subtitle { width: 47%; margin: 0 auto 23px; } + +@media (min-width: 1720px) { + .animate .subtitle { + line-height: 26px; + letter-spacing: 0.1px; + margin-bottom: 40px; + } +} + +@media (max-width: 1304.98px) { + .animate .subtitle { + width: 54%; + } +} + +@media (max-width: 991.98px) { + .animate .subtitle { + width: 102%; + margin-bottom: 26px; + } +} + +@media (max-width: 479.98px) { + .animate .use__btn { + margin-top: -6px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } +} diff --git a/static/css/moover/benefits.css b/static/css/moover/benefits.css index fd502f0..d689a13 100644 --- a/static/css/moover/benefits.css +++ b/static/css/moover/benefits.css @@ -2,28 +2,156 @@ margin-bottom: 132px; } +@media (min-width: 1720px) { + .benefits { + margin-bottom: 147px; + } +} + +@media (max-width: 1304.98px) { + .benefits { + margin-bottom: 101px; + } +} + +@media (max-width: 991.98px) { + .benefits { + margin-bottom: 93px; + } +} + +@media (max-width: 479.98px) { + .benefits { + margin-bottom: 103px; + } +} + .benefits__grid { text-align: left; display: grid; grid-template-columns: 1.5fr 3fr 1.5fr; } +@media (max-width: 991.98px) { + .benefits__grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 479.98px) { + .benefits__grid { + grid-template-columns: 1fr; + text-align: center; + } +} + .benefits__item { min-height: 122px; padding-right: 7px; margin-bottom: 22px; } +@media (min-width: 1720px) { + .benefits__item { + min-height: 145px; + } +} + +@media (max-width: 991.98px) { + .benefits__item { + padding-right: 25px; + } +} + +@media (max-width: 479.98px) { + .benefits__item { + padding-right: 0; + margin-bottom: 19px; + min-height: 90px; + } +} + +@media (max-width: 991.98px) { + .benefits__second { + grid-column: 1 / 3; + order: -1; + margin-bottom: 56px; + } +} + +@media (max-width: 479.98px) { + .benefits__second { + grid-column: 1/2; + margin-bottom: 31px; + } +} + .benefits__third { padding-left: 16px; } +@media (min-width: 1720px) { + .benefits__third { + padding-left: 31px; + margin-right: 5px; + } +} + +@media (max-width: 991.98px) { + .benefits__third { + padding-left: 11px; + } +} + +@media (max-width: 479.98px) { + .benefits__third { + padding-left: 0; + } +} + .benefits .title { margin-bottom: 76px; } +@media (min-width: 1720px) { + .benefits .title { + margin-bottom: 93px; + } +} + +@media (max-width: 991.98px) { + .benefits .title { + margin-bottom: 19px; + } +} + .benefits img { position: relative; top: 14px; right: -11px; } + +@media (min-width: 1720px) { + .benefits img { + top: -33px; + } +} + +@media (max-width: 1304.98px) { + .benefits img { + top: 20px; + right: 0; + } +} + +@media (min-width: 1720px) { + .benefits h2 { + margin-bottom: 10px; + } +} + +@media (max-width: 479.98px) { + .benefits p { + margin-bottom: 13px; + } +} diff --git a/static/css/moover/cards.css b/static/css/moover/cards.css new file mode 100644 index 0000000..a2acbce --- /dev/null +++ b/static/css/moover/cards.css @@ -0,0 +1,194 @@ +.cards__list { + display: grid; + grid-template-columns: repeat(4, 1fr); +} + +.cards__item { + position: relative; +} + +@media (max-width: 991.98px) { + .cards__item { + max-width: 270px; + } +} + +@media (max-width: 767.98px) { + .cards__item { + max-width: 251px; + margin-right: 18px; + } +} + +.slick-active .cards__item .cards__desc, .cards__item:hover .cards__desc, .cards__item:focus .cards__desc { + -webkit-line-clamp: initial; + /* number of lines to show */ + line-clamp: initial; + max-height: 17em; +} + +.cards__img { + margin-bottom: 5px; +} + +@media (min-width: 1720px) { + .cards__img { + width: 100%; + margin-bottom: 15px; + } +} + +@media (max-width: 1304.98px) { + .cards__img { + margin-bottom: 8px; + } +} + +@media (max-width: 991.98px) { + .cards__img { + margin-bottom: 8px; + } +} + +@media (max-width: 767.98px) { + .cards__img { + margin-bottom: 10px; + } +} + +.cards__img:hover { + scale: 1.05; + transition: scale 0.15s linear; +} + +.cards__desc { + font-weight: 500; + line-height: 22px; + padding: 0 5px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 7; + /* number of lines to show */ + line-clamp: 7; + -webkit-box-orient: vertical; + transition: all 0.3s ease-in-out; + max-height: 10em; +} + +@media (min-width: 1720px) { + .cards__desc { + font-size: 20px; + line-height: 26px; + padding-left: 20px; + padding-right: 20px; + } +} + +@media (max-width: 1279.98px) { + .cards__desc { + padding-left: 5px; + padding-right: 5px; + margin-bottom: 3px; + } +} + +@media (max-width: 991.98px) { + .cards__desc { + padding-left: 8px; + padding-right: 8px; + } +} + +.slick-active .cards__desc, .cards__desc:hover, .cards__desc:focus { + -webkit-line-clamp: initial; + /* number of lines to show */ + line-clamp: initial; + max-height: 999em; +} + +.cards__desc a { + color: var(--color-orange); +} + +.cards__arrow { + width: 62px; + height: 20px; + position: absolute; + right: -30px; + top: -21px; + background-image: url("/static/img/svg/Arrow23.svg"); +} + +@media (min-width: 1720px) { + .cards__arrow { + right: -45px; + top: -29px; + } +} + +@media (max-width: 1304.98px) { + .cards__arrow { + top: -8%; + } +} + +@media (max-width: 991.98px) { + .cards__arrow { + display: none; + } +} + +.cards .slick-list { + overflow: visible; +} + +@media (max-width: 767.98px) { + .cards .slick-list { + margin-bottom: 1px; + padding-left: 58px; + } +} + +.cards .slick-dots { + display: flex; + justify-content: center; + margin: 0; + padding: 1rem 0; + list-style-type: none; +} + +.cards .slick-dots li { + margin: 0 0.25rem; +} + +@media (max-width: 767.98px) { + .cards .slick-dots li { + margin: 0 0.31rem; + } +} + +.cards .slick-dots button { + display: block; + width: 8px; + height: 8px; + padding: 0; + border: none; + border-radius: 100%; + background-color: #D9D9D9; + text-indent: -9999px; +} + +.cards .slick-dots li.slick-active button { + background-color: var(--color-orange); +} + +.cards--cstmr .cards__desc { + padding: 0 50px; +} + +@media (max-width: 1304.98px) { + .cards--cstmr .cards__desc { + padding-left: 10px; + padding-right: 10px; + } +} diff --git a/static/css/moover/chatterbox.css b/static/css/moover/chatterbox.css index 0599c85..38e8e22 100644 --- a/static/css/moover/chatterbox.css +++ b/static/css/moover/chatterbox.css @@ -2,11 +2,72 @@ margin-bottom: 160px; } +@media (min-width: 1720px) { + .chatterbox { + margin-bottom: 180px; + } +} + +@media (max-width: 1304.98px) { + .chatterbox { + margin-bottom: 142px; + } +} + +@media (max-width: 991.98px) { + .chatterbox { + margin-left: -50vw; + margin-right: -50vw; + margin-bottom: 122px; + } +} + +@media (max-width: 767.98px) { + .chatterbox { + max-width: 100vw; + margin: 0 auto 121px; + position: relative; + } +} + .chatterbox__slider { max-width: 1200px; margin: 0 auto; } +@media (min-width: 1720px) { + .chatterbox__slider { + max-width: 1640px; + } +} + +@media (max-width: 1304.98px) { + .chatterbox__slider { + max-width: 1100px; + } +} + +@media (max-width: 991.98px) { + .chatterbox__slider { + max-width: 720px; + } +} + +@media (max-width: 767.98px) { + .chatterbox__slider { + width: 720px; + left: 50%; + transform: translateX(-50%); + } +} + +@media (max-width: 479.98px) { + .chatterbox__slider { + width: 830px; + max-width: initial; + } +} + .chatterbox__slide { width: 335px; height: 615px; @@ -16,6 +77,38 @@ position: relative; } +@media (min-width: 1720px) { + .chatterbox__slide { + width: 456px; + height: 836px; + background-size: 456px 836px; + } +} + +@media (max-width: 1304.98px) { + .chatterbox__slide { + width: 308px; + height: 565px; + background-size: 308px 565px; + } +} + +@media (max-width: 991.98px) { + .chatterbox__slide { + width: 206px; + height: 377px; + background-size: 206px 377px; + } +} + +@media (max-width: 767.98px) { + .chatterbox__slide { + width: 234px; + height: 429px; + background-size: 234px 429px; + } +} + .chatterbox__slide.loaded video { opacity: 1; } @@ -31,6 +124,13 @@ pointer-events: none; } +@media (max-width: 767.98px) { + .chatterbox__slide video { + position: relative; + top: -4px; + } +} + .chatterbox__slide img { position: absolute; scale: 1.32; @@ -48,6 +148,12 @@ overflow: hidden; } +@media (min-width: 1720px) { + .chatterbox__wrap { + border-radius: 50px; + } +} + .chatterbox__vbtn { position: absolute; left: 0; @@ -75,6 +181,27 @@ transition: opacity 100ms linear; } +@media (min-width: 1720px) { + .chatterbox__vbtn::before { + width: 109px; + height: 109px; + } +} + +@media (max-width: 991.98px) { + .chatterbox__vbtn::before { + width: 48px; + height: 48px; + } +} + +@media (max-width: 767.98px) { + .chatterbox__vbtn::before { + width: 55px; + height: 55px; + } +} + .chatterbox__vbtn::before, .chatterbox__vbtn::after { content: ""; position: absolute; @@ -92,6 +219,19 @@ margin-left: 2px; } +@media (min-width: 1720px) { + .chatterbox__vbtn::after { + border-width: 23px 0 23px 35px; + margin-left: 4px; + } +} + +@media (max-width: 991.98px) { + .chatterbox__vbtn::after { + border-width: 10px 0 10px 14px; + } +} + .chatterbox__vbox { position: relative; display: flex; @@ -100,22 +240,132 @@ height: 600px; } +@media (min-width: 1720px) { + .chatterbox__vbox { + height: 827px; + } +} + +@media (max-width: 1304.98px) { + .chatterbox__vbox { + height: 530px; + } +} + +@media (max-width: 991.98px) { + .chatterbox__vbox { + height: 370px; + } +} + +.chatterbox__mbtns { + position: absolute; + top: 58%; + transform: translateY(-50%); + left: 0; + right: 0; +} + +@media (max-width: 479.98px) { + .chatterbox__mbtns { + top: 61.6%; + } +} + .chatterbox .title { margin-bottom: 60px; } +@media (max-width: 1304.98px) { + .chatterbox .title { + margin-bottom: 39px; + } +} + +@media (max-width: 767.98px) { + .chatterbox .title { + margin-bottom: 50px; + } +} + .chatterbox .slick-next { right: -40px; } +@media (max-width: 1304.98px) { + .chatterbox .slick-next { + right: -10px; + } +} + +@media (max-width: 991.98px) { + .chatterbox .slick-next { + width: 40px; + height: 40px; + background-size: 32%; + right: 5%; + } +} + +@media (max-width: 479.98px) { + .chatterbox .slick-next { + right: 0; + } +} + .chatterbox .slick-prev { left: -40px; } +@media (max-width: 1304.98px) { + .chatterbox .slick-prev { + left: -10px; + } +} + +@media (max-width: 991.98px) { + .chatterbox .slick-prev { + width: 40px; + height: 40px; + background-size: 32%; + left: 5%; + } +} + +@media (max-width: 479.98px) { + .chatterbox .slick-prev { + left: 0; + } +} + +@media (max-width: 991.98px) { + .chatterbox .slick-list { + overflow: visible; + } +} + .slick-slide:not(.slick-center) .chatterbox__slide { scale: 0.72; } +@media (max-width: 1304.98px) { + .slick-slide:not(.slick-center) .chatterbox__slide { + scale: 0.69; + } +} + +@media (max-width: 991.98px) { + .slick-slide:not(.slick-center) .chatterbox__slide { + scale: 0.8; + } +} + +@media (max-width: 479.98px) { + .slick-slide:not(.slick-center) .chatterbox__slide { + scale: 0.85; + } +} + .slick-center .chatterbox__vbtn { opacity: 1; pointer-events: initial; diff --git a/static/css/moover/diff.css b/static/css/moover/diff.css new file mode 100644 index 0000000..de06af5 --- /dev/null +++ b/static/css/moover/diff.css @@ -0,0 +1,347 @@ +.diff { + margin-bottom: 179px; +} + +@media (min-width: 1720px) { + .diff { + margin-bottom: 172px; + } +} + +@media (max-width: 1304.98px) { + .diff { + margin-bottom: 140px; + } +} + +@media (max-width: 991.98px) { + .diff { + margin-bottom: 125px; + } +} + +@media (max-width: 767.98px) { + .diff { + margin-bottom: 139px; + } +} + +.diff .title { + width: 60%; + margin-bottom: 65px; +} + +@media (min-width: 1720px) { + .diff .title { + width: 49%; + margin-bottom: 60px; + } +} + +@media (max-width: 1304.98px) { + .diff .title { + width: 73%; + margin-bottom: 40px; + } +} + +@media (max-width: 991.98px) { + .diff .title { + width: 90%; + margin-bottom: 40px; + } +} + +@media (max-width: 767.98px) { + .diff .title { + width: 100%; + margin-bottom: 30px; + } +} + +.diff__grid { + display: flex; + position: relative; + margin-bottom: 30px; +} + +.diff__grid::before { + content: ''; + position: absolute; + height: 96%; + width: 5px; + border-radius: 5px; + background-color: #EDEDED; + left: 50%; + transform: translateX(-50%); + bottom: 0; +} + +@media (max-width: 1304.98px) { + .diff__grid::before { + height: 90%; + } +} + +@media (max-width: 991.98px) { + .diff__grid::before { + display: none; + } +} + +@media (max-width: 991.98px) { + .diff__grid { + display: block; + } +} + +.diff__coll { + width: 50%; +} + +@media (max-width: 991.98px) { + .diff__coll { + width: 100%; + } +} + +.diff__coll.left { + margin-right: 29px; +} + +@media (min-width: 1720px) { + .diff__coll.left { + margin-right: 12px; + } +} + +@media (max-width: 1304.98px) { + .diff__coll.left { + margin-right: 10px; + } +} + +@media (max-width: 991.98px) { + .diff__coll.left { + margin-right: 0; + } +} + +.diff__coll.left .diff__coll-title { + padding-left: 39px; +} + +@media (min-width: 1720px) { + .diff__coll.left .diff__coll-title { + padding-left: 2px; + } +} + +@media (max-width: 1304.98px) { + .diff__coll.left .diff__coll-title { + padding-left: 0; + } +} + +@media (max-width: 991.98px) { + .diff__coll.left .diff__coll-title { + padding-left: 0; + } +} + +.diff__coll.right { + margin-left: 29px; +} + +@media (max-width: 1304.98px) { + .diff__coll.right { + margin-left: 10px; + } +} + +@media (max-width: 991.98px) { + .diff__coll.right { + margin-left: 0; + display: none; + } +} + +.diff__coll.right .diff__coll-title { + padding-right: 39px; +} + +@media (min-width: 1720px) { + .diff__coll.right .diff__coll-title { + padding-right: 0; + } +} + +@media (max-width: 1304.98px) { + .diff__coll.right .diff__coll-title { + padding-right: 0; + } +} + +@media (max-width: 991.98px) { + .diff__coll.right .diff__coll-title { + padding-right: 0; + } +} + +.diff__coll-title { + margin-bottom: 38px; +} + +@media (max-width: 1304.98px) { + .diff__coll-title { + margin-bottom: 18px; + } +} + +@media (max-width: 991.98px) { + .diff__coll-title { + margin-bottom: 19px; + } +} + +@media (max-width: 767.98px) { + .diff__coll-title { + margin-bottom: 29px; + } +} + +.diff__item { + position: relative; + text-align: left; + padding-left: 10px; + padding-top: 11px; + padding-bottom: 11px; + display: flex; + gap: 11px; + align-items: center; + background-color: #FFFFFF; + border-radius: 15px; + font-weight: 500; + font-size: 20px; + line-height: 28px; + margin-bottom: 35px; + cursor: default; +} + +@media (min-width: 1720px) { + .diff__item { + padding: 20px; + gap: 20px; + margin-bottom: 40px; + } +} + +@media (max-width: 1304.98px) { + .diff__item { + margin-bottom: 18px; + } +} + +@media (max-width: 991.98px) { + .diff__item { + font-size: 18px; + margin-bottom: 25px; + padding-bottom: 9px; + } +} + +@media (max-width: 767.98px) { + .diff__item { + font-size: 16px; + line-height: 19.36px; + padding-right: 15px; + margin-bottom: 14px; + } +} + +.diff__item:last-child { + margin-bottom: 0; +} + +.diff__item:hover .diff__status::before { + scale: 1.2; +} + +.diff__status { + position: relative; + height: 48px; + width: 48px; + border-radius: 5px; + flex-shrink: 0; +} + +@media (min-width: 1720px) { + .diff__status { + border-radius: 12px; + } +} + +@media (max-width: 1304.98px) { + .diff__status { + border-radius: 13px; + } +} + +@media (max-width: 991.98px) { + .diff__status { + border-radius: 11px; + } +} + +@media (max-width: 767.98px) { + .diff__status { + width: 35px; + height: 35px; + } +} + +.diff__status::before { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + transform-origin: 0% 15%; +} + +.diff__status::before { + content: ''; + width: 36px; + height: 36px; +} + +.diff__item--done .diff__status { + background-color: #CCF9D9; +} + +.diff__item--done .diff__status::before { + width: 26px; + height: 26px; + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==); +} + +@media (max-width: 767.98px) { + .diff__item--done .diff__status::before { + scale: 0.7; + } +} + +.diff__item--error .diff__status { + background-color: #F9CCCC; +} + +.diff__item--error .diff__status::before { + width: 36px; + height: 36px; + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==); +} + +@media (max-width: 767.98px) { + .diff__item--error .diff__status::before { + scale: 0.7; + } +} diff --git a/static/css/moover/easy.css b/static/css/moover/easy.css new file mode 100644 index 0000000..0056e25 --- /dev/null +++ b/static/css/moover/easy.css @@ -0,0 +1,418 @@ +.easy { + margin-bottom: 162px; +} + +@media (min-width: 1720px) { + .easy { + margin-bottom: 180px; + } +} + +@media (max-width: 1304.98px) { + .easy { + margin-bottom: 140px; + } +} + +@media (max-width: 991.98px) { + .easy { + margin-bottom: 121px; + } +} + +.easy .title { + max-width: 55%; + margin-bottom: 21px; +} + +@media (min-width: 1720px) { + .easy .title { + max-width: 45%; + margin-bottom: 23px; + } +} + +@media (max-width: 991.98px) { + .easy .title { + max-width: 75%; + } +} + +@media (max-width: 767.98px) { + .easy .title { + max-width: 95%; + margin-bottom: 30px; + } +} + +.easy .subtitle { + margin-bottom: 41px; +} + +@media (min-width: 1720px) { + .easy .subtitle { + margin-bottom: 59px; + } +} + +@media (max-width: 767.98px) { + .easy .subtitle { + max-width: 90%; + margin: 0 auto 23px; + } +} + +.easy__grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(2, minmax(186px, auto)); + grid-template-areas: 'a b' 'a c'; + grid-column-gap: 20px; + grid-row-gap: 80px; + margin-bottom: 46px; +} + +@media (min-width: 1720px) { + .easy__grid { + grid-column-gap: 147px; + grid-template-rows: repeat(2, minmax(245px, auto)); + grid-row-gap: 136px; + margin-bottom: 63px; + } +} + +@media (max-width: 1304.98px) { + .easy__grid { + grid-column-gap: 69px; + grid-template-rows: repeat(2, minmax(172px, auto)); + margin-bottom: 41px; + } +} + +@media (max-width: 991.98px) { + .easy__grid { + display: block; + margin-bottom: 37px; + } +} + +@media (max-width: 767.98px) { + .easy__grid { + margin-bottom: 40px; + } +} + +.easy__item { + border-radius: 30px; + background-color: var(--color-grey); + /*background-color: #a72525;*/ + text-align: left; + padding: 21px; + box-shadow: var(--box-shadow-primary); +} + +.easy__item--fir { + grid-area: a; + margin-right: 60px; + padding-bottom: 0; +} + +@media (min-width: 1720px) { + .easy__item--fir { + margin-right: -10px; + padding-top: 31px; + } +} + +@media (max-width: 1304.98px) { + .easy__item--fir { + margin-right: 13px; + } +} + +@media (max-width: 991.98px) { + .easy__item--fir { + padding-top: 17px; + margin-right: 0; + margin-bottom: 49px; + } +} + +@media (max-width: 767.98px) { + .easy__item--fir { + margin-bottom: 42px; + } +} + +.easy__item--fir p { + width: 93%; + margin-bottom: 29px; +} + +@media (min-width: 1720px) { + .easy__item--fir p { + width: 89%; + margin-bottom: 53px; + } +} + +@media (max-width: 991.98px) { + .easy__item--fir p { + max-width: 78%; + } +} + +.easy__item--sec { + grid-area: b; + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (min-width: 1720px) { + .easy__item--sec { + padding-left: 15px; + } +} + +@media (max-width: 991.98px) { + .easy__item--sec { + padding-top: 35px; + padding-bottom: 37px; + margin-bottom: 46px; + } +} + +@media (max-width: 767.98px) { + .easy__item--sec { + display: block; + padding-top: 0; + padding-bottom: 0; + margin-bottom: 49px; + } +} + +.easy__item--sec img { + margin-bottom: -10px; + margin-right: -5px; + max-width: 50.1%; +} + +@media (min-width: 1720px) { + .easy__item--sec img { + max-width: 53%; + } +} + +@media (max-width: 1304.98px) { + .easy__item--sec img { + max-width: 42%; + margin-bottom: -4px; + margin-right: 0; + } +} + +@media (max-width: 991.98px) { + .easy__item--sec img { + margin-right: 0; + margin-bottom: 0; + } +} + +@media (max-width: 767.98px) { + .easy__item--sec img { + max-width: 104%; + position: relative; + left: -6px; + top: -4px; + } +} + +.easy__item--sec p { + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (max-width: 767.98px) { + .easy__item--sec p { + margin-bottom: 22px; + } +} + +.easy__item--thr { + grid-area: c; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (min-width: 1720px) { + .easy__item--thr { + padding-left: 15px; + } +} + +@media (max-width: 991.98px) { + .easy__item--thr { + padding-top: 42px; + padding-bottom: 46px; + } +} + +@media (max-width: 767.98px) { + .easy__item--thr { + display: block; + padding-top: 0; + padding-bottom: 0; + } +} + +.easy__item--thr .img { + margin-bottom: -10px; + margin-right: 24px; + max-width: 80%; +} + +@media (max-width: 1279.98px) { + .easy__item--thr .img { + max-width: 35%; + } +} + +@media (max-width: 1304.98px) { + .easy__item--thr .img { + margin-right: 2px; + } +} + +@media (max-width: 991.98px) { + .easy__item--thr .img { + margin-right: 0; + max-width: 34%; + } +} + +@media (max-width: 767.98px) { + .easy__item--thr .img img { + display: block; + margin: 0 auto; + } +} + +.easy__item--thr p { + max-width: 50%; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + +@media (max-width: 991.98px) { + .easy__item--thr p { + max-width: 60%; + } +} + +@media (max-width: 767.98px) { + .easy__item--thr p { + margin-bottom: 22px; + max-width: 100%; + } +} + +.easy__arrow { + width: 68px; + height: 18px; + background-image: url("/static/img/svg/Arrow08.svg"); + position: absolute; + z-index: 1; +} + +@media (min-width: 1720px) { + .easy__arrow { + scale: 1.4; + } +} + +@media (max-width: 1304.98px) { + .easy__arrow { + scale: 0.8; + } +} + +@media (max-width: 991.98px) { + .easy__arrow { + display: none; + } +} + +.easy__arrow--fir { + top: 46%; + right: 101%; +} + +@media (min-width: 1720px) { + .easy__arrow--fir { + right: 105%; + top: 34%; + } +} + +@media (max-width: 1304.98px) { + .easy__arrow--fir { + top: 48%; + } +} + +.easy__arrow--sec { + top: 117%; + left: 30%; + transform: rotate(90deg); +} + +@media (min-width: 1720px) { + .easy__arrow--sec { + left: 45%; + top: 124%; + } +} + +@media (max-width: 1304.98px) { + .easy__arrow--sec { + left: 38%; + } +} + +.easy__btn { + margin-top: -21px; +} + +@media (max-width: 1304.98px) { + .easy__btn { + margin-top: -20px; + } +} + +@media (max-width: 991.98px) { + .easy__btn { + margin-top: -19px; + padding-left: 54px; + padding-right: 54px; + } +} + +@media (max-width: 767.98px) { + .easy__btn { + padding-left: 50px; + padding-right: 50px; + margin-top: -8px; + max-width: 100%; + } +} diff --git a/static/css/moover/header.css b/static/css/moover/header.css new file mode 100644 index 0000000..5759f27 --- /dev/null +++ b/static/css/moover/header.css @@ -0,0 +1 @@ +.header{margin-top:0;position:fixed;left:0;top:0;width:100vw;padding:40px 5px;transition:all 0.1s ease-in-out}@media (max-width: 1304.98px){.header{padding-top:37px;padding-bottom:41px}}@media (max-width: 991.98px){.header{padding-top:19px;padding-bottom:19px}}.header.scrolled{padding-top:20px;padding-bottom:20px;box-shadow:var(--box-shadow-primary);border-bottom:1px solid var(--color-grey)}.header__grid,.header__list{display:flex;align-items:center;justify-content:space-between}.header__logo{width:48px;height:48px;position:relative;left:5px}@media (max-width: 1304.98px){.header__logo{left:6px}}@media (max-width: 991.98px){.header__logo{left:0}}@media (max-width: 767.98px){.header__logo{left:-3px}}.header__nav{flex-grow:1;max-width:41%;margin-left:auto}@media (min-width: 1720px){.header__nav{max-width:34%}}@media (max-width: 1304.98px){.header__nav{max-width:46.5%}}.header__link{color:var(--color-black2);text-decoration:none}.header__btn{padding:8px 0 6px;font-size:16px;margin-left:61px;margin-right:-3px}@media (min-width: 1720px){.header__btn{margin-left:81px}}@media (max-width: 1304.98px){.header__btn{margin-right:0}}@media (max-width: 991.98px){.header__btn{display:none}}.header .dropdown{left:-4px}@media (max-width: 767.98px){.header .dropdown{left:-8px}}.header .dropdown-content{right:0;height:initial}@media (max-width: 575px){.header .dropdown-content{right:0;left:initial}} diff --git a/static/css/moover/presentation.css b/static/css/moover/presentation.css index 7bbcc8f..bb9fb26 100644 --- a/static/css/moover/presentation.css +++ b/static/css/moover/presentation.css @@ -1,11 +1,24 @@ .presentation { - margin: 20px -65px 140px; + margin: 12px -65px 140px; } @media (min-width: 1720px) { .presentation { margin-left: 0; margin-right: 0; + margin-bottom: 160px; + } +} + +@media (max-width: 1304.98px) { + .presentation { + margin-bottom: 118px; + } +} + +@media (max-width: 991.98px) { + .presentation { + margin-bottom: 105px; } } @@ -17,7 +30,7 @@ background-image: url(/static/img/png/Box9.png), url(/static/img/png/Box10.png), url(/static/img/png/Box11.png), url(/static/img/png/Box12.png); background-position: top -4px left 46px, top -30px right -14px, bottom 73px left 278px, bottom 71px right 276px; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; - background-size: 17.5%,21.8%,8.5%,8.8%; + background-size: 17.5%, 21.8%, 8.5%, 8.8%; } @media (min-width: 1720px) { @@ -29,19 +42,97 @@ } } +@media (max-width: 1304.98px) { + .presentation__top { + background-size: 16%, 20%, 9.5%, 10.1%; + background-position: top -2.8% left 6.5%, top -19% right 3.5%, bottom 32% left 23%, bottom 29% right 22.6%; + margin-bottom: 96px; + } +} + +@media (max-width: 991.98px) { + .presentation__top { + background-size: 14.5%, 17%, 8.3%, 9.1%; + background-position: top 9% left 7%, top 5% right 6%, bottom 51% left 14.8%, bottom 47.5% right 13.8%; + padding-top: 31px; + margin-bottom: 76px; + } +} + +@media (max-width: 767.98px) { + .presentation__top { + margin-bottom: 77px; + } +} + +@media (max-width: 991.98px) { + .presentation__bottom .subtitle { + max-width: 40%; + margin: 0 auto 30px; + } +} + +@media (max-width: 767.98px) { + .presentation__bottom .subtitle { + max-width: 65%; + margin-bottom: 21px; + } +} + .presentation__title { margin-bottom: 23px; } +@media (max-width: 991.98px) { + .presentation__title { + max-width: 75%; + margin: 0 auto 19px; + } +} + +@media (max-width: 767.98px) { + .presentation__title { + margin-bottom: 15px; + } +} + .presentation__subtitle { margin-bottom: 41px; font-weight: 600; } +@media (max-width: 991.98px) { + .presentation__subtitle { + max-width: 55%; + margin: 0 auto 40px; + font-size: 16px; + } +} + +@media (max-width: 767.98px) { + .presentation__subtitle { + margin-bottom: 30px; + max-width: 77%; + } +} + .presentation__btn { margin-bottom: 40px; } +@media (max-width: 991.98px) { + .presentation__btn { + padding-left: 82px; + padding-right: 82px; + } +} + +@media (max-width: 767.98px) { + .presentation__btn { + margin-bottom: 30px; + } +} + .presentation__next { font-weight: 500; line-height: 22px; @@ -53,6 +144,29 @@ animation: jump 2s ease-in-out infinite; } +.presentation__cards { + max-width: 1300px; + margin: 0 auto; +} + +@media (min-width: 1720px) { + .presentation__cards { + max-width: initial; + margin-left: -10px; + margin-right: -10px; + } +} + +@media (max-width: 1304.98px) { + .presentation__cards { + max-width: 1140px; + } +} + +.presentation__bottom .presentation__title { + margin-bottom: 13px; +} + @keyframes jump { 0% { transform: translateY(0px); @@ -73,12 +187,3 @@ transform: translateY(0px); } } - -.presentation__bottom .presentation__title { - margin-bottom: 13px; -} - -.presentation__cards { - max-width: 1300px; - margin: 0 auto; -} diff --git a/static/css/moover/root.css b/static/css/moover/root.css index 81068b6..4567ceb 100644 --- a/static/css/moover/root.css +++ b/static/css/moover/root.css @@ -1,137 +1,2 @@ -.container { - margin: 0 auto; - width: 1280px; - position: relative; - min-height: 695px; -} - -@media (min-width: 1720px) { - .container { - width: 1720px; - } -} - -/*@media (max-width: 1019.98px) {*/ -/* .container {*/ -/* width: 720px*/ -/* }*/ -/*}*/ -/*@media (max-width: 767.98px) {*/ -/* .container {*/ -/* margin: 0 15px;*/ -/* width: auto*/ -/* }*/ -/*}*/ -:root { - --color-primary: #FF613A; - --color-white: #FFFFFF; - --color-black: #000000; - --color-black2: #272424; - --color-grey: #F1F1F1; - --color-grey2: #7A7979; - --color-orange: #FF613A; - --box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), - 0 -1px 10px 0 rgba(198, 199, 203, 0.20); - text-align: center; - color: var(--color-black2); -} - -.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { - font-weight: 700; -} - -h1, .h1 { - font-size: 44px; - line-height: 52px; -} - -@media (min-width: 1720px) { - h1, .h1 { - font-size: 48px; - line-height: 52px; - } -} - -h2, .h2 { - font-size: 24px; - line-height: 36px; - margin-bottom: 10px; -} - -h3, .h3 { - font-size: 20px; - line-height: 28px; - margin-bottom: 12px; -} - -h4, .h4 { - font-size: 18px; - line-height: 26px; - margin-bottom: 20px; -} - -p { - line-height: 22px; - margin-bottom: 20px; -} - -b { - font-weight: 500; -} - -.btn { - display: inline-flex; - text-decoration: none; - color: black; - line-height: 22px; - border-radius: 10px; - padding: 20px 76px 18px; - justify-content: center; - align-items: center; - margin: 0 3px; - letter-spacing: 0.2px; - font-size: 18px; -} - -.btn--primary { - background: var(--color-primary); - color: var(--color-white); -} - -.title { - font-size: 44px; - font-weight: 700; - line-height: 52px; - margin-bottom: 13px; - margin-left: auto; - margin-right: auto; -} - -@media (min-width: 1720px) { - .title { - font-size: 44px; - margin-bottom: 22px; - } -} - -.subtitle { - margin-bottom: 81px; - line-height: 22px; -} - -@media (min-width: 1720px) { - .subtitle { - font-size: 20px; - margin-bottom: 97px; - } -} - -.hide { - display: none; -} - -@media (min-width: 1440px) { - .is-container.wrapper_main { - max-width: initial; - } -} +.container{margin:0 auto;width:1280px;position:relative}@media (min-width: 1720px){.container{width:1720px}}@media (max-width: 1304.98px){.container{width:1120px;max-width:88vw}}@media (max-width: 991.98px){.container{width:640px;max-width:100vw}}@media (max-width: 767.98px){.container{margin:0 16px;width:auto}}:root{--color-primary: #FF613A;--color-white: #FFFFFF;--color-black: #000000;--color-black2: #272424;--color-grey: #F1F1F1;--color-grey2: #7A7979;--color-orange: #FF613A;--box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), + 0 -1px 10px 0 rgba(198, 199, 203, 0.20);text-align:center;color:var(--color-black2)}body{overflow-x:hidden;padding-top:129px}@media (max-width: 1304.98px){body{padding-top:126px}}@media (max-width: 991.98px){body{padding-top:85px}}@media (max-width: 767.98px){body{padding-top:57px}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-weight:700}h1,.h1{font-size:44px;line-height:52px}@media (min-width: 1720px){h1,.h1{font-size:48px;line-height:52px}}h2,.h2{font-size:24px;line-height:36px;margin-bottom:10px}@media (min-width: 1720px){h2,.h2{font-size:28px;margin-bottom:20px}}h3,.h3{font-size:20px;line-height:28px;margin-bottom:12px}@media (max-width: 1304.98px){h3,.h3{margin-bottom:13px}}h4,.h4{font-size:18px;line-height:26px;margin-bottom:20px}p{line-height:22px;margin-bottom:20px}@media (min-width: 1720px){p{font-size:20px;line-height:26px}}@media (max-width: 991.98px){p{margin-bottom:18px}}@media (max-width: 479.98px){p{margin-bottom:14px}}b{font-weight:500}@media (max-width: 991.98px){b{font-size:16px;line-height:22px}}.btn{display:inline-flex;text-decoration:none;color:black;line-height:22px;border-radius:10px;padding:20px 76px 18px;justify-content:center;align-items:center;margin:0 3px;letter-spacing:0.2px;font-size:18px}.btn--primary{background:var(--color-primary);color:var(--color-white)}.title{font-size:44px;font-weight:700;line-height:52px;margin-bottom:13px;margin-left:auto;margin-right:auto}@media (min-width: 1720px){.title{font-size:48px;margin-bottom:22px}}@media (max-width: 1304.98px){.title{margin-bottom:20px}}@media (max-width: 991.98px){.title{font-size:32px;line-height:38.73px}}@media (max-width: 767.98px){.title{margin-bottom:14px}}.subtitle{margin-bottom:81px;line-height:22px}@media (min-width: 1720px){.subtitle{font-size:20px;margin-bottom:105px}}@media (max-width: 1304.98px){.subtitle{margin-bottom:71px}}.hide{display:none}.hide__xxl{display:inline-flex}@media (min-width: 1720px){.hide__xxl{display:none}}@media (max-width: 991.98px){.hide__md{display:none}}@media (max-width: 479.98px){.hide__xs{display:none}}.show__xxl{display:none}@media (min-width: 1720px){.show__xxl{display:block}}.show__md{display:none}@media (max-width: 991.98px){.show__md{display:initial}}@media (min-width: 480px){.show__xs{display:none}}@media (min-width: 1440px){.br--xxl{display:none}}@media (max-width: 991.98px){.br--md{display:none}}@media (max-width: 767.98px){.br--sm{display:none}}@media (min-width: 1440px){.is-container.wrapper_main{max-width:initial}}.is-container.wrapper_main>.container{position:relative;left:15px}@media (min-width: 1720px){.is-container.wrapper_main>.container{left:17px}}@media (max-width: 767.98px){.is-container.wrapper_main>.container{left:0}} diff --git a/static/css/moover/sore.css b/static/css/moover/sore.css index a6e7efd..1ff0e29 100644 --- a/static/css/moover/sore.css +++ b/static/css/moover/sore.css @@ -1,23 +1,161 @@ .sore { margin-bottom: 160px; + margin-top: 1px; +} + +@media (min-width: 1720px) { + .sore { + margin-bottom: 178px; + } +} + +@media (max-width: 1304.98px) { + .sore { + margin-bottom: 140px; + } +} + +@media (max-width: 991.98px) { + .sore { + margin-bottom: 60px; + } +} + +@media (max-width: 479.98px) { + .sore { + margin-bottom: 40px; + } } .sore__img { - margin: 0 auto 26px; + margin: 0 auto 13px; position: relative; left: -17px; + top: -13px; +} + +@media (min-width: 1720px) { + .sore__img { + margin-bottom: 40px; + top: -5px; + left: -21px; + } +} + +@media (max-width: 1304.98px) { + .sore__img { + left: 2px; + top: -22px; + margin-bottom: 4px; + } +} + +@media (max-width: 991.98px) { + .sore__img { + top: -8px; + left: -15px; + margin-bottom: 18px; + } +} + +@media (max-width: 479.98px) { + .sore__img { + max-width: 106%; + top: -26px; + left: -18px; + margin-bottom: 4px; + } } .sore .title { margin-bottom: 40px; } +@media (min-width: 1720px) { + .sore .title { + margin-bottom: 61px; + } +} + +@media (max-width: 991.98px) { + .sore .title { + margin-bottom: 20px; + } +} + +@media (max-width: 479.98px) { + .sore .title { + margin-bottom: 29px; + } +} + .sore .subtitle { max-width: 62%; - margin: 0 auto -1px; + margin: 0 auto 10px; +} + +@media (min-width: 1720px) { + .sore .subtitle { + line-height: 26px; + max-width: 60%; + } +} + +@media (max-width: 1304.98px) { + .sore .subtitle { + max-width: 65%; + } +} + +@media (max-width: 991.98px) { + .sore .subtitle { + max-width: 85%; + } +} + +@media (max-width: 479.98px) { + .sore .subtitle { + max-width: 99%; + } } .sore .h3 { max-width: 47%; margin: 0 auto 19px; } + +@media (min-width: 1720px) { + .sore .h3 { + max-width: 38%; + } +} + +@media (max-width: 1304.98px) { + .sore .h3 { + max-width: 50%; + } +} + +@media (max-width: 991.98px) { + .sore .h3 { + max-width: 65%; + margin-bottom: 21px; + } +} + +@media (max-width: 479.98px) { + .sore .h3 { + max-width: 100%; + margin-bottom: 17px; + } +} + +@media (max-width: 479.98px) { + .sore__btn { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } +} diff --git a/static/css/moover/use.css b/static/css/moover/use.css index 07f4cfc..6614976 100644 --- a/static/css/moover/use.css +++ b/static/css/moover/use.css @@ -1,51 +1 @@ -.use { - margin-bottom: 123px; -} - -.use__img { - width: 67.5%; - margin-left: 16px; - margin-bottom: 31px; -} - -.use__btn { - margin-bottom: 11px; -} - -.use__link { - font-size: 18px; - font-weight: 600; - line-height: 26px; - color: var(--color-grey2); -} - -.use .title { - max-width: 80%; - margin-bottom: 49px; -} - -.use--diff .title { - width: 60%; - margin-bottom: 60px; -} - -.use--diff .use__img { - width: 100%; - margin-left: 0; - margin-bottom: 17px; -} - -.use--lett { - margin-bottom: 120px; -} - -.use--lett .title { - margin-bottom: 51px; -} - -.use--lett .use__img { - margin-left: -5px; - margin-right: -5px; - max-width: 110%; - width: 1290px; -} +.use{margin-bottom:123px}@media (min-width: 1720px){.use{margin-bottom:184px}}@media (max-width: 1304.98px){.use{margin-bottom:142px}}@media (max-width: 991.98px){.use{margin-bottom:121px}}.use__img{width:67.5%;margin-left:16px;margin-bottom:31px}@media (min-width: 1720px){.use__img{width:50.2%;margin-left:15px;margin-bottom:46px}}@media (max-width: 1304.98px){.use__img{width:77%;margin-left:10px;margin-bottom:34px}}@media (max-width: 991.98px){.use__img{margin-left:0;width:100%;margin-bottom:40px}}@media (max-width: 767.98px){.use__img{margin-bottom:30px}}.use__btn{margin-bottom:11px;text-align:center}@media (max-width: 767.98px){.use__btn{max-width:100%;padding-left:50px;padding-right:50px}}.use__link{font-size:18px;font-weight:600;line-height:26px;color:var(--color-grey2)}.use .title{max-width:80%;margin-bottom:49px}@media (min-width: 1720px){.use .title{max-width:40%}}@media (max-width: 991.98px){.use .title{margin-bottom:40px}}@media (max-width: 767.98px){.use .title{max-width:100%;margin-bottom:29px}}.use--lett{margin-bottom:120px}@media (min-width: 1720px){.use--lett{margin-bottom:126px}}@media (max-width: 1304.98px){.use--lett{margin-bottom:106px}}@media (max-width: 991.98px){.use--lett{margin-bottom:79px}}@media (max-width: 767.98px){.use--lett{margin-bottom:81px}}.use--lett .title{margin-bottom:51px}@media (max-width: 1304.98px){.use--lett .title{margin-bottom:39px}}@media (max-width: 767.98px){.use--lett .title{margin-bottom:0}}.use--lett .use__img{margin-left:-5px;margin-right:-5px;max-width:110%;width:1290px}@media (min-width: 1720px){.use--lett .use__img{width:initial}}@media (max-width: 1304.98px){.use--lett .use__img{margin-left:0;margin-right:0;max-width:100%;width:1120px}}@media (max-width: 767.98px){.use--lett .use__img{max-width:103%;margin-left:-5px;margin-top:-6px}}@media (max-width: 479.98px){.use--lett .use__img{margin-bottom:3px}}@media (max-width: 991.98px){.use .h3{max-width:75%;margin:0 auto 22px}}@media (max-width: 767.98px){.use .h3{max-width:100%;margin-bottom:16px}} diff --git a/static/css/moover/uses.css b/static/css/moover/uses.css index 57cf5a7..6ca2ed0 100644 --- a/static/css/moover/uses.css +++ b/static/css/moover/uses.css @@ -1,5 +1,29 @@ .uses { - margin-bottom: 122px; + margin-bottom: 120px; +} + +@media (min-width: 1720px) { + .uses { + margin-bottom: 136px; + } +} + +@media (max-width: 1304.98px) { + .uses { + margin-bottom: 125px; + } +} + +@media (max-width: 991.98px) { + .uses { + margin-bottom: 100px; + } +} + +@media (max-width: 479.98px) { + .uses { + margin-bottom: 199px; + } } .uses__grid { @@ -10,17 +34,156 @@ /* width: 101.5%; */ } +@media (max-width: 991.98px) { + .uses__grid { + grid-template-columns: 1fr 1fr; + column-gap: 15px; + } +} + +@media (max-width: 479.98px) { + .uses__grid { + display: block; + text-align: center; + } +} + .uses__item { min-height: 50px; - margin-bottom: 43px; + margin-bottom: 19px; padding: 0 50px 0 2px; } +@media (min-width: 1720px) { + .uses__item { + margin-bottom: 22px; + } +} + +@media (max-width: 991.98px) { + .uses__item { + padding-right: 0; + } +} + +@media (max-width: 991.98px) { + .uses__item p:last-child { + margin-bottom: 0; + } +} + .uses__icon { margin-bottom: 11px; } +@media (min-width: 1720px) { + .uses__icon { + width: 147px; + height: 147px; + margin-bottom: 20px; + } +} + .uses .title { max-width: 50%; margin: 0 auto 60px; } + +@media (max-width: 1304.98px) { + .uses .title { + max-width: 70%; + margin-bottom: 39px; + } +} + +@media (max-width: 479.98px) { + .uses .title { + margin-bottom: 30px; + } +} + +.uses__title { + font-size: 24px; + font-weight: 700; + line-height: 36px; + margin-bottom: 10px; +} + +.uses--cstmr .uses__item { + text-align: center; + padding: 0 15px; +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__item { + margin-bottom: 42px; + min-height: 255px; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .uses__item { + margin-bottom: 25px; + min-height: 194px; + } +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__item p { + max-width: 90%; + margin: 0 auto; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .uses__item p { + max-width: 100%; + } +} + +.uses--cstmr .uses__icon { + width: 118px; + height: 118px; +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__icon { + width: 142px; + height: 142px; + margin-bottom: 23px; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .uses__icon { + width: 117px; + height: 117px; + margin-bottom: 8px; + } +} + +@media (max-width: 991.98px) { + .uses--cstmr .uses__grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 1304.98px) { + .uses--cstmr .title { + margin-bottom: 61px; + max-width: 80%; + } +} + +@media (max-width: 991.98px) { + .uses--cstmr .title { + margin-bottom: 44px; + } +} + +@media (max-width: 479.98px) { + .uses--cstmr .title { + max-width: 90%; + margin-bottom: 31px; + } +} diff --git a/static/css/styles.css b/static/css/styles.css index 7dae002..938fd62 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -253,6 +253,7 @@ footer { height: 318px; background: #272424; margin-top: 50px; + text-align: left; } section.register>h1 { @@ -419,6 +420,7 @@ footer>div { font-style: normal; font-weight: 400; line-height: 22px; + } .footer_text_contact { diff --git a/static/img/png/about.png b/static/img/png/about.png deleted file mode 100644 index b73a9d0..0000000 Binary files a/static/img/png/about.png and /dev/null differ diff --git a/static/img/png/customer/sender-card2.png b/static/img/png/customer/sender-card2.png new file mode 100644 index 0000000..27ceabf Binary files /dev/null and b/static/img/png/customer/sender-card2.png differ diff --git a/static/img/png/customer/sender-card3-md.png b/static/img/png/customer/sender-card3-md.png new file mode 100644 index 0000000..5ab78f1 Binary files /dev/null and b/static/img/png/customer/sender-card3-md.png differ diff --git a/static/img/png/customer/sender-card3.png b/static/img/png/customer/sender-card3.png new file mode 100644 index 0000000..b5ab195 Binary files /dev/null and b/static/img/png/customer/sender-card3.png differ diff --git a/static/img/png/customer/use-1120.png b/static/img/png/customer/use-1120.png new file mode 100644 index 0000000..9fad15b Binary files /dev/null and b/static/img/png/customer/use-1120.png differ diff --git a/static/img/png/customer/use-1280.png b/static/img/png/customer/use-1280.png new file mode 100644 index 0000000..9fad15b Binary files /dev/null and b/static/img/png/customer/use-1280.png differ diff --git a/static/img/png/customer/use-1720.png b/static/img/png/customer/use-1720.png new file mode 100644 index 0000000..95a6bac Binary files /dev/null and b/static/img/png/customer/use-1720.png differ diff --git a/static/img/png/customer/use-328.png b/static/img/png/customer/use-328.png new file mode 100644 index 0000000..2dbe10a Binary files /dev/null and b/static/img/png/customer/use-328.png differ diff --git a/static/img/png/customer/use-640.png b/static/img/png/customer/use-640.png new file mode 100644 index 0000000..ad79b70 Binary files /dev/null and b/static/img/png/customer/use-640.png differ diff --git a/static/img/png/mover/about-1120.png b/static/img/png/mover/about-1120.png new file mode 100644 index 0000000..ac84913 Binary files /dev/null and b/static/img/png/mover/about-1120.png differ diff --git a/static/img/png/mover/about-1280.png b/static/img/png/mover/about-1280.png new file mode 100644 index 0000000..99e8f93 Binary files /dev/null and b/static/img/png/mover/about-1280.png differ diff --git a/static/img/png/mover/about-1720.png b/static/img/png/mover/about-1720.png new file mode 100644 index 0000000..9ac1767 Binary files /dev/null and b/static/img/png/mover/about-1720.png differ diff --git a/static/img/png/mover/about-328.png b/static/img/png/mover/about-328.png new file mode 100644 index 0000000..d427276 Binary files /dev/null and b/static/img/png/mover/about-328.png differ diff --git a/static/img/png/mover/about-640.png b/static/img/png/mover/about-640.png new file mode 100644 index 0000000..67df903 Binary files /dev/null and b/static/img/png/mover/about-640.png differ diff --git a/static/img/png/mover/benefits-1120.png b/static/img/png/mover/benefits-1120.png new file mode 100644 index 0000000..7236995 Binary files /dev/null and b/static/img/png/mover/benefits-1120.png differ diff --git a/static/img/png/benefits.png b/static/img/png/mover/benefits-1280.png similarity index 100% rename from static/img/png/benefits.png rename to static/img/png/mover/benefits-1280.png diff --git a/static/img/png/mover/benefits-1720.png b/static/img/png/mover/benefits-1720.png new file mode 100644 index 0000000..daa26e5 Binary files /dev/null and b/static/img/png/mover/benefits-1720.png differ diff --git a/static/img/png/mover/benefits-328.png b/static/img/png/mover/benefits-328.png new file mode 100644 index 0000000..0a04ed5 Binary files /dev/null and b/static/img/png/mover/benefits-328.png differ diff --git a/static/img/png/mover/benefits-640.png b/static/img/png/mover/benefits-640.png new file mode 100644 index 0000000..1a5474a Binary files /dev/null and b/static/img/png/mover/benefits-640.png differ diff --git a/static/img/png/mover/image1.png b/static/img/png/mover/image1.png new file mode 100644 index 0000000..1acadf9 Binary files /dev/null and b/static/img/png/mover/image1.png differ diff --git a/static/img/png/mover/image2.png b/static/img/png/mover/image2.png new file mode 100644 index 0000000..7601421 Binary files /dev/null and b/static/img/png/mover/image2.png differ diff --git a/static/img/png/mover/image3.png b/static/img/png/mover/image3.png new file mode 100644 index 0000000..02c8d5a Binary files /dev/null and b/static/img/png/mover/image3.png differ diff --git a/static/img/png/mover/image4.png b/static/img/png/mover/image4.png new file mode 100644 index 0000000..33ed773 Binary files /dev/null and b/static/img/png/mover/image4.png differ diff --git a/static/img/png/mover/sender-card1.png b/static/img/png/mover/sender-card1.png new file mode 100644 index 0000000..d6eb8c0 Binary files /dev/null and b/static/img/png/mover/sender-card1.png differ diff --git a/static/img/png/mover/sender-card2.png b/static/img/png/mover/sender-card2.png new file mode 100644 index 0000000..a2c8e88 Binary files /dev/null and b/static/img/png/mover/sender-card2.png differ diff --git a/static/img/png/mover/sender-card3-md.png b/static/img/png/mover/sender-card3-md.png new file mode 100644 index 0000000..4407a80 Binary files /dev/null and b/static/img/png/mover/sender-card3-md.png differ diff --git a/static/img/png/mover/sender-card3.png b/static/img/png/mover/sender-card3.png new file mode 100644 index 0000000..b5ab195 Binary files /dev/null and b/static/img/png/mover/sender-card3.png differ diff --git a/static/img/png/mover/sore-1120.png b/static/img/png/mover/sore-1120.png new file mode 100644 index 0000000..29b46b6 Binary files /dev/null and b/static/img/png/mover/sore-1120.png differ diff --git a/static/img/png/mover/sore-1280.png b/static/img/png/mover/sore-1280.png new file mode 100644 index 0000000..a950ced Binary files /dev/null and b/static/img/png/mover/sore-1280.png differ diff --git a/static/img/png/mover/sore-1720.png b/static/img/png/mover/sore-1720.png new file mode 100644 index 0000000..6e2762b Binary files /dev/null and b/static/img/png/mover/sore-1720.png differ diff --git a/static/img/png/mover/sore-328.png b/static/img/png/mover/sore-328.png new file mode 100644 index 0000000..bdfe9f0 Binary files /dev/null and b/static/img/png/mover/sore-328.png differ diff --git a/static/img/png/mover/sore-640.png b/static/img/png/mover/sore-640.png new file mode 100644 index 0000000..671febe Binary files /dev/null and b/static/img/png/mover/sore-640.png differ diff --git a/static/img/png/mover/use-1120.png b/static/img/png/mover/use-1120.png new file mode 100644 index 0000000..9bc4588 Binary files /dev/null and b/static/img/png/mover/use-1120.png differ diff --git a/static/img/png/mover/use-1280.png b/static/img/png/mover/use-1280.png new file mode 100644 index 0000000..0f501ee Binary files /dev/null and b/static/img/png/mover/use-1280.png differ diff --git a/static/img/png/mover/use-1720.png b/static/img/png/mover/use-1720.png new file mode 100644 index 0000000..ca86f65 Binary files /dev/null and b/static/img/png/mover/use-1720.png differ diff --git a/static/img/png/mover/use-328.png b/static/img/png/mover/use-328.png new file mode 100644 index 0000000..a124bc4 Binary files /dev/null and b/static/img/png/mover/use-328.png differ diff --git a/static/img/png/mover/use-640.png b/static/img/png/mover/use-640.png new file mode 100644 index 0000000..7a05977 Binary files /dev/null and b/static/img/png/mover/use-640.png differ diff --git a/static/img/png/mover/use-letters-1120.png b/static/img/png/mover/use-letters-1120.png new file mode 100644 index 0000000..242b860 Binary files /dev/null and b/static/img/png/mover/use-letters-1120.png differ diff --git a/static/img/png/mover/use-letters-1280.png b/static/img/png/mover/use-letters-1280.png new file mode 100644 index 0000000..af214fe Binary files /dev/null and b/static/img/png/mover/use-letters-1280.png differ diff --git a/static/img/png/mover/use-letters-1739.png b/static/img/png/mover/use-letters-1739.png new file mode 100644 index 0000000..d5ce5f2 Binary files /dev/null and b/static/img/png/mover/use-letters-1739.png differ diff --git a/static/img/png/mover/use-letters-328.png b/static/img/png/mover/use-letters-328.png new file mode 100644 index 0000000..159eac6 Binary files /dev/null and b/static/img/png/mover/use-letters-328.png differ diff --git a/static/img/png/mover/use-letters-640.png b/static/img/png/mover/use-letters-640.png new file mode 100644 index 0000000..12a7bd1 Binary files /dev/null and b/static/img/png/mover/use-letters-640.png differ diff --git a/static/img/png/mover/use-letters-s1.png b/static/img/png/mover/use-letters-s1.png new file mode 100644 index 0000000..64337c7 Binary files /dev/null and b/static/img/png/mover/use-letters-s1.png differ diff --git a/static/img/png/mover/use-letters-s2.png b/static/img/png/mover/use-letters-s2.png new file mode 100644 index 0000000..191a886 Binary files /dev/null and b/static/img/png/mover/use-letters-s2.png differ diff --git a/static/img/png/mover/use-letters-s3.png b/static/img/png/mover/use-letters-s3.png new file mode 100644 index 0000000..1c63345 Binary files /dev/null and b/static/img/png/mover/use-letters-s3.png differ diff --git a/static/img/png/mover/use-letters-s4.png b/static/img/png/mover/use-letters-s4.png new file mode 100644 index 0000000..e6a567e Binary files /dev/null and b/static/img/png/mover/use-letters-s4.png differ diff --git a/static/img/png/mover/use-letters-s5.png b/static/img/png/mover/use-letters-s5.png new file mode 100644 index 0000000..93c85dc Binary files /dev/null and b/static/img/png/mover/use-letters-s5.png differ diff --git a/static/img/png/mover/use-letters-s6.png b/static/img/png/mover/use-letters-s6.png new file mode 100644 index 0000000..a52e6c3 Binary files /dev/null and b/static/img/png/mover/use-letters-s6.png differ diff --git a/static/img/png/mover/use-letters-s7.png b/static/img/png/mover/use-letters-s7.png new file mode 100644 index 0000000..95b7224 Binary files /dev/null and b/static/img/png/mover/use-letters-s7.png differ diff --git a/static/img/png/mover/use-letters-s8.png b/static/img/png/mover/use-letters-s8.png new file mode 100644 index 0000000..778a4a7 Binary files /dev/null and b/static/img/png/mover/use-letters-s8.png differ diff --git a/static/img/png/sore2.png b/static/img/png/sore2.png deleted file mode 100644 index 8a3d14b..0000000 Binary files a/static/img/png/sore2.png and /dev/null differ diff --git a/static/img/png/use-letterss.png b/static/img/png/use-letterss.png deleted file mode 100644 index decd800..0000000 Binary files a/static/img/png/use-letterss.png and /dev/null differ diff --git a/static/img/svg/airplane_takeoff.svg b/static/img/svg/airplane_takeoff.svg new file mode 100644 index 0000000..411fee9 --- /dev/null +++ b/static/img/svg/airplane_takeoff.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/img/svg/briefcase.svg b/static/img/svg/briefcase.svg new file mode 100644 index 0000000..dfd7c28 --- /dev/null +++ b/static/img/svg/briefcase.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/img/webp/customer/image1.webp b/static/img/webp/customer/image1.webp new file mode 100644 index 0000000..0663e3c Binary files /dev/null and b/static/img/webp/customer/image1.webp differ diff --git a/static/img/webp/customer/image2.webp b/static/img/webp/customer/image2.webp new file mode 100644 index 0000000..09ccb25 Binary files /dev/null and b/static/img/webp/customer/image2.webp differ diff --git a/static/img/webp/customer/image3.webp b/static/img/webp/customer/image3.webp new file mode 100644 index 0000000..6dc196b Binary files /dev/null and b/static/img/webp/customer/image3.webp differ diff --git a/static/img/webp/customer/image4.webp b/static/img/webp/customer/image4.webp new file mode 100644 index 0000000..2f7f19a Binary files /dev/null and b/static/img/webp/customer/image4.webp differ diff --git a/static/img/webp/image1.webp b/static/img/webp/mover/image1.webp similarity index 100% rename from static/img/webp/image1.webp rename to static/img/webp/mover/image1.webp diff --git a/static/img/webp/image2.webp b/static/img/webp/mover/image2.webp similarity index 100% rename from static/img/webp/image2.webp rename to static/img/webp/mover/image2.webp diff --git a/static/img/webp/image3.webp b/static/img/webp/mover/image3.webp similarity index 100% rename from static/img/webp/image3.webp rename to static/img/webp/mover/image3.webp diff --git a/static/img/webp/image4.webp b/static/img/webp/mover/image4.webp similarity index 100% rename from static/img/webp/image4.webp rename to static/img/webp/mover/image4.webp diff --git a/styles/moover.scss b/styles/moover.scss index 5b6a646..9022f20 100644 --- a/styles/moover.scss +++ b/styles/moover.scss @@ -1,9 +1,11 @@ @import "./moover/root"; +@import "./moover/header"; @import "./moover/presentation"; @import "./moover/cards"; @import "./moover/easy"; @import "./moover/chatterbox"; @import "./moover/use"; +@import "./moover/diff"; @import "./moover/animate"; @import "./moover/about"; @import "./moover/benefits"; diff --git a/styles/moover/about.scss b/styles/moover/about.scss index 01d615f..6176e2b 100644 --- a/styles/moover/about.scss +++ b/styles/moover/about.scss @@ -1,42 +1,141 @@ .about { margin-bottom: 168px; -} -.about .title { - margin-bottom: 60px; -} + @media (min-width: 1720px) { + margin-bottom: 188px; + } -.about__grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - -} + @media (max-width: 1304.98px) { + margin-bottom: 138px; + } -.about__img { - box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC, - inset -18.19px -1.21px 18.19px 0 #4052801A, - 48.5px 36.38px 36.38px 0 #6B7F9933; - border-radius: 31px; - margin-left: 8px; - margin-top: 8px; -} + @media (max-width: 991.98px) { + margin-bottom: 110px; + } -.about__right { - text-align: left; - padding-top: 43px; - padding-left: 50px; -} + .title { + margin-bottom: 60px; -.about__half { - max-width: 50%; - float: left; -} + @media (min-width: 1720px) { + margin-bottom: 49px; + } -.about__half:last-child { - padding-left: 16px; - max-width: 47%; -} + @media (max-width: 1304.98px) { + margin-bottom: 39px; + } -.about b { - letter-spacing: 0.4px; + @media (max-width: 991.98px) { + margin-bottom: 48px; + } + + @media (max-width: 479.98px) { + margin-bottom: 37px; + } + } + + &__grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + + + @media (max-width: 991.98px) { + display: block; + } + } + + &__img { + box-shadow: inset 18.19px 1.21px 18.19px 0 #FFFFFFCC, + inset -18.19px -1.21px 18.19px 0 #4052801A, + 48.5px 36.38px 36.38px 0 #6B7F9933; + border-radius: 31px; + margin-left: -20px; + margin-top: 8px; + + @media (min-width: 1720px) { + margin-top: 19px; + } + + @media (max-width: 1304.98px) { + margin-left: -10px; + } + + @media (max-width: 991.98px) { + margin-left: 0; + margin-bottom: 49px; + display: block; + } + + @media (max-width: 479.98px) { + margin-bottom: 38px; + } + } + + &__right { + text-align: left; + padding-top: 43px; + padding-left: 50px; + + @media (min-width: 1720px) { + padding-top: 90px; + padding-left: 21px; + } + + @media (max-width: 1304.98px) { + padding-left: 11px; + padding-top: 19px; + } + + @media (max-width: 991.98px) { + padding: 0 8px; + text-align: center; + } + + @media (max-width: 479.98px) { + padding: 0; + } + + &::after { + content: ''; + display: block; + clear: both; + } + } + + &__half { + max-width: 50%; + float: left; + + @media (max-width: 991.98px) { + max-width: initial; + } + + &:last-child { + padding-left: 16px; + max-width: 47%; + + @media (max-width: 991.98px) { + max-width: initial; + padding-left: 0; + } + } + } + + b { + letter-spacing: 0.4px; + + @media (min-width: 1720px) { + font-weight: 700; + letter-spacing: 0; + } + + @media (max-width: 479.98px) { + letter-spacing: 0.9px; + } + } + + p { + @media (min-width: 1720px) { + margin-bottom: 39px; + } + } } \ No newline at end of file diff --git a/styles/moover/animate.scss b/styles/moover/animate.scss index 7364eef..8a621d0 100644 --- a/styles/moover/animate.scss +++ b/styles/moover/animate.scss @@ -6,12 +6,67 @@ color: white; margin-bottom: 160px; + @media (min-width: 1720px) { + padding-top: 100px; + padding-bottom: 89px; + margin-bottom: 180px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 141px; + } + + @media (max-width: 991.98px) { + padding-top: 40px; + padding-bottom: 29px; + margin-bottom: 121px; + } + + @media (max-width: 479.98px) { + padding: 30px 7px 19px; + } + &.left { transform: translateX(-180px); } &.right { transform: translateX(180px); + + .title { + margin-bottom: 17px; + + @media (min-width: 1720px) { + max-width: 80%; + margin-bottom: 40px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 25px; + } + + @media (max-width: 991.98px) { + margin-bottom: 31px; + } + + @media (max-width: 479.98px) { + margin-bottom: 20px; + } + } + + .subtitle { + + @media (max-width: 991.98px) { + margin-bottom: 31px; + } + } + + .use__btn { + @media (max-width: 479.98px) { + margin-top: -11px; + } + } + } &__link { @@ -23,10 +78,55 @@ margin-bottom: 25px; max-width: 87%; /*width: 90%;*/ + + @media (min-width: 1720px) { + margin-bottom: 40px; + } + + @media (max-width: 1304.98px) { + max-width: 99%; + } + + @media (max-width: 991.98px) { + max-width: 85%; + font-size: 24px; + line-height: 29.05px; + } + + @media (max-width: 767.98px) { + max-width: 100%; + margin-bottom: 14px; + } } .subtitle { width: 47%; margin: 0 auto 23px; + + @media (min-width: 1720px) { + line-height: 26px; + letter-spacing: 0.1px; + margin-bottom: 40px; + } + + @media (max-width: 1304.98px) { + width: 54%; + } + + @media (max-width: 991.98px) { + width: 102%; + margin-bottom: 26px; + } } + + .use__btn { + + @media (max-width: 479.98px) { + margin-top: -6px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } + } + } diff --git a/styles/moover/benefits.scss b/styles/moover/benefits.scss index ee87a13..73eece7 100644 --- a/styles/moover/benefits.scss +++ b/styles/moover/benefits.scss @@ -1,29 +1,126 @@ .benefits { margin-bottom: 132px; + @media (min-width: 1720px) { + margin-bottom: 147px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 101px; + } + + @media (max-width: 991.98px) { + margin-bottom: 93px; + } + + @media (max-width: 479.98px) { + margin-bottom: 103px; + } + &__grid { text-align: left; display: grid; grid-template-columns: 1.5fr 3fr 1.5fr; + + @media (max-width: 991.98px) { + grid-template-columns: 1fr 1fr; + } + + @media (max-width: 479.98px) { + grid-template-columns: 1fr; + text-align: center; + } } &__item { min-height: 122px; padding-right: 7px; margin-bottom: 22px; + + @media (min-width: 1720px) { + min-height: 145px; + } + + @media (max-width: 991.98px) { + padding-right: 25px; + } + + @media (max-width: 479.98px) { + padding-right: 0; + margin-bottom: 19px; + min-height: 90px; + } + } + + + &__second { + + @media (max-width: 991.98px) { + grid-column: 1 / 3; + order: -1; + margin-bottom: 56px; + } + + @media (max-width: 479.98px) { + grid-column: 1/2; + margin-bottom: 31px; + } } &__third { padding-left: 16px; + + @media (min-width: 1720px) { + padding-left: 31px; + margin-right: 5px; + } + + @media (max-width: 991.98px) { + padding-left: 11px; + } + + @media (max-width: 479.98px) { + padding-left: 0; + } } .title { margin-bottom: 76px; + + @media (min-width: 1720px) { + margin-bottom: 93px; + } + + @media (max-width: 991.98px) { + margin-bottom: 19px; + } } img { position: relative; top: 14px; right: -11px; + + @media (min-width: 1720px) { + top: -33px; + } + + @media (max-width: 1304.98px) { + top: 20px; + right: 0; + } + } + + h2 { + @media (min-width: 1720px) { + margin-bottom: 10px; + } + } + + p { + @media (max-width: 479.98px) { + margin-bottom: 13px; + + } } } \ No newline at end of file diff --git a/styles/moover/cards.scss b/styles/moover/cards.scss index 4cc63d0..a1fbb4c 100644 --- a/styles/moover/cards.scss +++ b/styles/moover/cards.scss @@ -1,34 +1,179 @@ .cards { + + &__list { + display: grid; + grid-template-columns: repeat(4, 1fr); + } + + &__item { + position: relative; + + @media (max-width: 991.98px) { + max-width: 270px; + } + + @media (max-width: 767.98px) { + max-width: 251px; + margin-right: 18px; + } + + .slick-active &, + &:hover, &:focus { + + .cards__desc { + -webkit-line-clamp: initial; /* number of lines to show */ + line-clamp: initial; + max-height: 17em; + + } + } + } + + &__img { + margin-bottom: 5px; + + @media (min-width: 1720px) { + width: 100%; + margin-bottom: 15px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 8px; + } + + @media (max-width: 991.98px) { + margin-bottom: 8px; + } + + @media (max-width: 767.98px) { + margin-bottom: 10px; + } + + &:hover { + scale: 1.05; + transition: scale 0.15s linear; + } + } + + &__desc { + font-weight: 500; + line-height: 22px; + padding: 0 5px; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 7; /* number of lines to show */ + line-clamp: 7; + -webkit-box-orient: vertical; + transition: all 0.3s ease-in-out; + max-height: 10em; + + + @media (min-width: 1720px) { + font-size: 20px; + line-height: 26px; + padding-left: 20px; + padding-right: 20px; + } + + @media (max-width: 1279.98px) { + padding-left: 5px; + padding-right: 5px; + margin-bottom: 3px; + } + + @media (max-width: 991.98px) { + padding-left: 8px; + padding-right: 8px; + } + + .slick-active &, + &:hover, &:focus { + -webkit-line-clamp: initial; /* number of lines to show */ + line-clamp: initial; + max-height: 999em; + } + + a { + color: var(--color-orange); + } + } + + &__arrow { + width: 62px; + height: 20px; + position: absolute; + right: -30px; + top: -21px; + background-image: url("/static/img/svg/Arrow23.svg"); + + @media (min-width: 1720px) { + right: -45px; + top: -29px; + } + + @media (max-width: 1304.98px) { + top: -8%; + } + + @media (max-width: 991.98px) { + display: none; + } + } + + .slick-list { + overflow: visible; + + @media (max-width: 767.98px) { + margin-bottom: 1px; + padding-left: 58px; + } + } + + .slick-dots { + display: flex; + justify-content: center; + + margin: 0; + padding: 1rem 0; + + list-style-type: none; + + li { + margin: 0 0.25rem; + + @media (max-width: 767.98px) { + margin: 0 0.31rem; + } + } + + button { + display: block; + width: 8px; + height: 8px; + padding: 0; + + border: none; + border-radius: 100%; + background-color: #D9D9D9; + + text-indent: -9999px; + } + + li.slick-active button { + background-color: var(--color-orange); + } + + } + + &--cstmr .cards { + &__desc { + padding: 0 50px; + + @media (max-width: 1304.98px) { + padding-left: 10px; + padding-right: 10px; + } + } + } } -.cards__list { - display: grid; - grid-template-columns: repeat(4, 1fr); -} - -.cards__item { - position: relative; -} - -.cards__img:hover { - scale: 1.05; - transition: scale 0.15s linear; -} - -.cards__img { - margin-bottom: 5px; -} - -.cards__desc { - font-weight: 500; - line-height: 22px; -} - -.cards__arrow { - width: 62px; - height: 20px; - position: absolute; - right: -30px; - top: -21px; - background-image: url("/static/img/svg/Arrow23.svg"); -} \ No newline at end of file diff --git a/styles/moover/chatterbox.scss b/styles/moover/chatterbox.scss index c0f6aa2..d823d27 100644 --- a/styles/moover/chatterbox.scss +++ b/styles/moover/chatterbox.scss @@ -1,9 +1,55 @@ .chatterbox { margin-bottom: 160px; + @media (min-width: 1720px) { + margin-bottom: 180px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 142px; + } + + @media (max-width: 991.98px) { + margin-left: -50vw; + margin-right: -50vw; + margin-bottom: 122px; + //max-width: 100vw; + } + + @media (max-width: 767.98px) { + max-width: 100vw; + margin: 0 auto 121px; + position: relative; + } + &__slider { max-width: 1200px; margin: 0 auto; + + @media (min-width: 1720px) { + max-width: 1640px; + } + + @media (max-width: 1304.98px) { + max-width: 1100px; + } + + @media (max-width: 991.98px) { + max-width: 720px; + //position: relative; + } + + @media (max-width: 767.98px) { + width: 720px; + left: 50%; + transform: translateX(-50%); + //position: relative; + } + + @media (max-width: 479.98px) { + width: 830px; + max-width: initial; + } } &__slide { @@ -14,6 +60,30 @@ margin: auto; position: relative; + @media (min-width: 1720px) { + width: 456px; + height: 836px; + background-size: 456px 836px; + } + + @media (max-width: 1304.98px) { + width: 308px; + height: 565px; + background-size: 308px 565px; + } + + @media (max-width: 991.98px) { + width: 206px; + height: 377px; + background-size: 206px 377px; + } + + @media (max-width: 767.98px) { + width: 234px; + height: 429px; + background-size: 234px 429px; + } + &.loaded { video { opacity: 1; @@ -29,6 +99,11 @@ opacity: 0; transition: opacity 0.2s ease-in-out; pointer-events: none; + + @media (max-width: 767.98px) { + position: relative; + top: -4px; + } } img { @@ -47,6 +122,10 @@ border-radius: 25px; background-color: grey; overflow: hidden; + + @media (min-width: 1720px) { + border-radius: 50px; + } } &__vbtn { @@ -73,6 +152,21 @@ border: 0; border-radius: 50%; transition: opacity 100ms linear; + + @media (min-width: 1720px) { + width: 109px; + height: 109px; + } + + @media (max-width: 991.98px) { + width: 48px; + height: 48px; + } + + @media (max-width: 767.98px) { + width: 55px; + height: 55px; + } } &::before, @@ -91,6 +185,16 @@ border-width: 15px 0 15px 25px; display: inline-block; margin-left: 2px; + + @media (min-width: 1720px) { + border-width: 23px 0 23px 35px; + margin-left: 4px; + } + + @media (max-width: 991.98px) { + border-width: 10px 0 10px 14px; + + } } } @@ -100,32 +204,121 @@ justify-content: center; align-items: center; height: 600px; + + @media (min-width: 1720px) { + height: 827px; + } + + @media (max-width: 1304.98px) { + height: 530px; + } + + @media (max-width: 991.98px) { + height: 370px; + } + } + + &__mbtns { + position: absolute; + top: 58%; + transform: translateY(-50%); + left: 0; + right: 0; + + @media (max-width: 479.98px) { + top: 61.6%; + } } .title { margin-bottom: 60px; + + @media (max-width: 1304.98px) { + margin-bottom: 39px; + } + + @media (max-width: 767.98px) { + margin-bottom: 50px; + } } .slick-next { right: -40px; + + @media (max-width: 1304.98px) { + right: -10px; + } + + @media (max-width: 991.98px) { + width: 40px; + height: 40px; + background-size: 32%; + right: 5%; + } + + @media (max-width: 479.98px) { + right: 0; + } } .slick-prev { left: -40px; + + @media (max-width: 1304.98px) { + left: -10px; + } + + @media (max-width: 991.98px) { + width: 40px; + height: 40px; + background-size: 32%; + left: 5%; + } + + @media (max-width: 479.98px) { + left: 0; + } } + + .slick-list { + @media (max-width: 991.98px) { + overflow: visible; + } + } + } .slick-slide:not(.slick-center) .chatterbox__slide { scale: 0.72; + + @media (max-width: 1304.98px) { + scale: 0.69; + } + + @media (max-width: 991.98px) { + scale: 0.8; + } + + @media (max-width: 479.98px) { + scale: 0.85; + } } -.slick-center .chatterbox__vbtn { - opacity: 1; - pointer-events: initial; - z-index: 1; -} +.slick-center { + + .chatterbox__vbtn { + opacity: 1; + pointer-events: initial; + z-index: 1; + } + + .chatterbox__vbox video { + pointer-events: initial; + cursor: pointer; + } + + .chatterbox__slide { + + } -.slick-center .chatterbox__vbox video { - pointer-events: initial; - cursor: pointer; } diff --git a/styles/moover/diff.scss b/styles/moover/diff.scss new file mode 100644 index 0000000..9d15964 --- /dev/null +++ b/styles/moover/diff.scss @@ -0,0 +1,283 @@ +.diff { + margin-bottom: 179px; + + @media (min-width: 1720px) { + margin-bottom: 172px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 140px; + } + + @media (max-width: 991.98px) { + margin-bottom: 125px; + } + + @media (max-width: 767.98px) { + margin-bottom: 139px; + } + + .title { + width: 60%; + margin-bottom: 65px; + + @media (min-width: 1720px) { + width: 49%; + margin-bottom: 60px; + } + + @media (max-width: 1304.98px) { + width: 73%; + margin-bottom: 40px; + } + + @media (max-width: 991.98px) { + width: 90%; + margin-bottom: 40px; + } + + @media (max-width: 767.98px) { + width: 100%; + margin-bottom: 30px; + } + } + + &__grid { + display: flex; + position: relative; + margin-bottom: 30px; + + &::before { + content: ''; + position: absolute; + height: 96%; + width: 5px; + border-radius: 5px; + background-color: #EDEDED; + left: 50%; + transform: translateX(-50%); + bottom: 0; + + @media (max-width: 1304.98px) { + height: 90%; + } + + @media (max-width: 991.98px) { + display: none; + } + } + + @media (max-width: 991.98px) { + display: block; + } + } + + &__coll { + width: 50%; + + @media (max-width: 991.98px) { + width: 100%; + } + + &.left { + margin-right: 29px; + @media (min-width: 1720px) { + margin-right: 12px; + } + + @media (max-width: 1304.98px) { + margin-right: 10px; + } + + @media (max-width: 991.98px) { + margin-right: 0; + } + + .diff__coll-title { + padding-left: 39px; + + @media (min-width: 1720px) { + padding-left: 2px; + } + + @media (max-width: 1304.98px) { + padding-left: 0; + } + + @media (max-width: 991.98px) { + padding-left: 0; + } + } + } + + &.right { + margin-left: 29px; + + @media (max-width: 1304.98px) { + margin-left: 10px; + } + + @media (max-width: 991.98px) { + margin-left: 0; + display: none; + } + + .diff__coll-title { + padding-right: 39px; + + @media (min-width: 1720px) { + padding-right: 0; + } + @media (max-width: 1304.98px) { + padding-right: 0; + } + + @media (max-width: 991.98px) { + padding-right: 0; + } + + @media (max-width: 767.98px) { + //margin-bottom: 29px; + } + } + } + + } + + &__coll-title { + margin-bottom: 38px; + + @media (max-width: 1304.98px) { + margin-bottom: 18px; + } + + @media (max-width: 991.98px) { + margin-bottom: 19px; + } + + @media (max-width: 767.98px) { + margin-bottom: 29px; + } + } + + &__item { + position: relative; + text-align: left; + padding-left: 10px; + padding-top: 11px; + padding-bottom: 11px; + display: flex; + gap: 11px; + align-items: center; + background-color: #FFFFFF; + border-radius: 15px; + font-weight: 500; + font-size: 20px; + line-height: 28px; + margin-bottom: 35px; + cursor: default; + + @media (min-width: 1720px) { + padding: 20px; + gap: 20px; + margin-bottom: 40px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 18px; + } + + @media (max-width: 991.98px) { + font-size: 18px; + margin-bottom: 25px; + padding-bottom: 9px; + } + + @media (max-width: 767.98px) { + font-size: 16px; + line-height: 19.36px; + padding-right: 15px; + margin-bottom: 14px; + } + + &:last-child { + margin-bottom: 0; + } + + + &:hover { + .diff__status::before { + scale: 1.2; + } + } + } + + &__status { + position: relative; + height: 48px; + width: 48px; + border-radius: 5px; + flex-shrink: 0; + + @media (min-width: 1720px) { + border-radius: 12px; + } + + @media (max-width: 1304.98px) { + border-radius: 13px; + } + + @media (max-width: 991.98px) { + border-radius: 11px; + } + + @media (max-width: 767.98px) { + width: 35px; + height: 35px; + } + + &::before { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + transform-origin: 0% 15%; + } + + &::before { + content: ''; + width: 36px; + height: 36px; + } + + .diff__item--done & { + background-color: #CCF9D9; + + &::before { + width: 26px; + height: 26px; + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDJMOS4zMzMzMyAyNEwyIDEzLjAwMDUiIHN0cm9rZT0iIzQ1QzIyNiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==); + + @media (max-width: 767.98px) { + scale: 0.7; + } + } + } + + .diff__item--error & { + background-color: #F9CCCC; + + &::before { + width: 36px; + height: 36px; + background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI4LjEyNSA3Ljg3NUw3Ljg3NSAyOC4xMjUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTI4LjEyNSAyOC4xMjVMNy44NzUgNy44NzUiIHN0cm9rZT0iI0ZGMDAwMCIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==); + + @media (max-width: 767.98px) { + scale: 0.7; + } + } + } + } + + +} \ No newline at end of file diff --git a/styles/moover/easy.scss b/styles/moover/easy.scss index 1dbbdf0..c03fa48 100644 --- a/styles/moover/easy.scss +++ b/styles/moover/easy.scss @@ -1,105 +1,334 @@ .easy { margin-bottom: 162px; -} -.easy .title { - max-width: 55%; - margin-bottom: 21px; -} + @media (min-width: 1720px) { + margin-bottom: 180px; + } -.easy .subtitle { - margin-bottom: 41px; -} + @media (max-width: 1304.98px) { + margin-bottom: 140px; + } -.easy__grid { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: repeat(2, minmax(186px, auto)); - grid-template-areas: + @media (max-width: 991.98px) { + margin-bottom: 121px; + } + + + .title { + max-width: 55%; + margin-bottom: 21px; + + @media (min-width: 1720px) { + max-width: 45%; + margin-bottom: 23px; + } + + @media (max-width: 991.98px) { + max-width: 75%; + } + + @media (max-width: 767.98px) { + max-width: 95%; + margin-bottom: 30px; + } + } + + .subtitle { + margin-bottom: 41px; + + @media (min-width: 1720px) { + margin-bottom: 59px; + } + + @media (max-width: 767.98px) { + max-width: 90%; + margin: 0 auto 23px; + } + } + + &__grid { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(2, minmax(186px, auto)); + grid-template-areas: 'a b' 'a c'; - grid-column-gap: 20px; - grid-row-gap: 80px; - margin-bottom: 46px; -} + grid-column-gap: 20px; + grid-row-gap: 80px; + margin-bottom: 46px; -.easy__item { - border-radius: 30px; - background-color: var(--color-grey); - /*background-color: #a72525;*/ - text-align: left; - padding: 21px; - box-shadow: var(--box-shadow-primary); -} + @media (min-width: 1720px) { + grid-column-gap: 147px; + grid-template-rows: repeat(2, minmax(245px, auto)); + grid-row-gap: 136px; + margin-bottom: 63px; + } -.easy__item--fir { - grid-area: a; - margin-right: 60px; - padding-bottom: 0; -} + @media (max-width: 1304.98px) { + grid-column-gap: 69px; + grid-template-rows: repeat(2, minmax(172px, auto)); + margin-bottom: 41px; + } -.easy__item--fir p { - width: 93%; - margin-bottom: 29px; -} + @media (max-width: 991.98px) { + display: block; + margin-bottom: 37px; + } -.easy__item--sec img { - margin-bottom: -10px; - margin-right: -5px; -} + @media (max-width: 767.98px) { + margin-bottom: 40px; + } + } -.easy__item--thr img { - margin-bottom: -10px; - margin-right: 24px; -} + &__item { + border-radius: 30px; + background-color: var(--color-grey); + /*background-color: #a72525;*/ + text-align: left; + padding: 21px; + box-shadow: var(--box-shadow-primary); -.easy__item--sec { - grid-area: b; - position: relative; - display: flex; - align-items: center; - justify-content: space-between; -} + &--fir { + grid-area: a; + margin-right: 60px; + padding-bottom: 0; -.easy__item--sec p, -.easy__item--thr p, -.easy__item--sec, -.easy__item--thr { - margin-bottom: 0; - padding-top: 0; - padding-bottom: 0; -} + @media (min-width: 1720px) { + margin-right: -10px; + padding-top: 31px; + } -.easy__item--thr { - grid-area: c; - display: flex; - align-items: center; - justify-content: space-between; -} + @media (max-width: 1304.98px) { + margin-right: 13px; + } -.easy__item--thr p { - max-width: 50%; -} + @media (max-width: 991.98px) { + padding-top: 17px; + margin-right: 0; + margin-bottom: 49px; + } -.easy__arrow { - width: 68px; - height: 18px; - background-image: url("/static/img/svg/Arrow08.svg"); - position: absolute; - z-index: 1; -} + @media (max-width: 767.98px) { + margin-bottom: 42px; + } -.easy__arrow--fir { - top: 46%; - right: 101%; -} + p { + width: 93%; + margin-bottom: 29px; -.easy__arrow--sec { - top: 117%; - left: 30%; - transform: rotate(90deg); -} + @media (min-width: 1720px) { + width: 89%; + margin-bottom: 53px; + } -.easy__btn { - margin-top: -21px; + @media (max-width: 991.98px) { + max-width: 78%; + } + } + } + + &--sec { + grid-area: b; + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + + @media (min-width: 1720px) { + padding-left: 15px; + } + + @media (max-width: 991.98px) { + padding-top: 35px; + padding-bottom: 37px; + margin-bottom: 46px; + } + + @media (max-width: 767.98px) { + display: block; + padding-top: 0; + padding-bottom: 0; + margin-bottom: 49px; + } + + img { + margin-bottom: -10px; + margin-right: -5px; + max-width: 50.1%; + + @media (min-width: 1720px) { + max-width: 53%; + } + + @media (max-width: 1304.98px) { + max-width: 42%; + margin-bottom: -4px; + margin-right: 0; + } + + @media (max-width: 991.98px) { + margin-right: 0; + margin-bottom: 0; + } + + @media (max-width: 767.98px) { + max-width: 104%; + position: relative; + left: -6px; + top: -4px; + } + } + + p { + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + + @media (max-width: 767.98px) { + margin-bottom: 22px; + } + } + } + + &--thr { + grid-area: c; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + //background-color: #00a420; + + @media (min-width: 1720px) { + padding-left: 15px; + } + + @media (max-width: 991.98px) { + padding-top: 42px; + padding-bottom: 46px; + } + + @media (max-width: 767.98px) { + display: block; + padding-top: 0; + padding-bottom: 0; + } + + .img { + margin-bottom: -10px; + margin-right: 24px; + max-width: 80%; + + @media (max-width: 1279.98px) { + max-width: 35%; + } + + @media (max-width: 1304.98px) { + margin-right: 2px; + } + + @media (max-width: 991.98px) { + margin-right: 0; + max-width: 34%; + } + + img { + + @media (max-width: 767.98px) { + display: block; + margin: 0 auto; + } + } + } + + p { + max-width: 50%; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; + + @media (max-width: 991.98px) { + max-width: 60%; + } + + @media (max-width: 767.98px) { + margin-bottom: 22px; + max-width: 100%; + } + } + } + } + + &__arrow { + width: 68px; + height: 18px; + background-image: url("/static/img/svg/Arrow08.svg"); + position: absolute; + z-index: 1; + + @media (min-width: 1720px) { + scale: 1.4; + } + + @media (max-width: 1304.98px) { + scale: 0.8; + } + + @media (max-width: 991.98px) { + display: none; + } + + &--fir { + top: 46%; + right: 101%; + + @media (min-width: 1720px) { + right: 105%; + top: 34%; + } + @media (max-width: 1304.98px) { + top: 48%; + } + } + + &--sec { + top: 117%; + left: 30%; + transform: rotate(90deg); + + @media (min-width: 1720px) { + left: 45%; + top: 124%; + } + + @media (max-width: 1304.98px) { + left: 38%; + } + } + } + + &__btn { + margin-top: -21px; + + @media (max-width: 1304.98px) { + margin-top: -20px; + } + + @media (max-width: 991.98px) { + margin-top: -19px; + padding-left: 54px; + padding-right: 54px; + } + + @media (max-width: 767.98px) { + padding-left: 50px; + padding-right: 50px; + margin-top: -8px; + max-width: 100%; + } + } } diff --git a/styles/moover/header.scss b/styles/moover/header.scss new file mode 100644 index 0000000..bfc2ced --- /dev/null +++ b/styles/moover/header.scss @@ -0,0 +1,108 @@ +.header { + margin-top: 0; + position: fixed; + left: 0; + top: 0; + width: 100vw; + padding: 40px 5px; + transition: all 0.1s ease-in-out; + + @media (max-width: 1304.98px) { + padding-top: 37px; + padding-bottom: 41px; + } + + @media (max-width: 991.98px) { + padding-top: 19px; + padding-bottom: 19px; + } + + &.scrolled { + padding-top: 20px; + padding-bottom: 20px; + box-shadow: var(--box-shadow-primary); + border-bottom: 1px solid var(--color-grey); + } + + &__grid, + &__list { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__logo { + width: 48px; + height: 48px; + position: relative; + left: 5px; + + @media (max-width: 1304.98px) { + left: 6px; + } + + @media (max-width: 991.98px) { + left: 0; + } + + @media (max-width: 767.98px) { + left: -3px; + } + } + + &__nav { + flex-grow: 1; + max-width: 41%; + margin-left: auto; + + @media (min-width: 1720px) { + max-width: 34%; + } + + @media (max-width: 1304.98px) { + max-width: 46.5%; + } + } + + &__link { + color: var(--color-black2); + text-decoration: none; + } + + &__btn { + padding: 8px 0 6px; + font-size: 16px; + margin-left: 61px; + margin-right: -3px; + + @media (min-width: 1720px) { + margin-left: 81px; + } + + @media (max-width: 1304.98px) { + margin-right: 0; + } + + @media (max-width: 991.98px) { + display: none; + } + } + + .dropdown { + left: -4px; + + @media (max-width: 767.98px) { + left: -8px; + } + + &-content { + right: 0; + height: initial; + + @media (max-width: 575px) { + right: 0; + left: initial; + } + } + } +} diff --git a/styles/moover/presentation.scss b/styles/moover/presentation.scss index 8ff4492..97cc9cf 100644 --- a/styles/moover/presentation.scss +++ b/styles/moover/presentation.scss @@ -1,64 +1,163 @@ .presentation { - margin: 20px -65px 140px; + margin: 12px -65px 140px; @media (min-width: 1720px) { margin-left: 0; margin-right: 0; + margin-bottom: 160px; } -} -.presentation__top { - position: relative; - min-height: 270px; - margin: 0 auto 116px; - padding: 29px 0 40px; - background-image: url(/static/img/png/Box9.png), - url(/static/img/png/Box10.png), - url(/static/img/png/Box11.png), - url(/static/img/png/Box12.png); - background-position: top -4px left 46px, - top -30px right -14px, - bottom 73px left 278px, - bottom 71px right 276px; - background-repeat: no-repeat, - no-repeat, - no-repeat, - no-repeat; - background-size: 17.5%,21.8%,8.5%,8.8%; - - @media (min-width: 1720px) { - background-size: 18.5%, 22%, 9%, 10.1%; - background-position: top -47px left 58px, - top -31px right 20px, - bottom 8px left 347px, - bottom -5px right 352px; - padding-top: 95px; - margin-bottom: 176px; + @media (max-width: 1304.98px) { + margin-bottom: 118px; } -} -.presentation__title { - margin-bottom: 23px; -} + @media (max-width: 991.98px) { + margin-bottom: 105px; + } -.presentation__subtitle { - margin-bottom: 41px; - font-weight: 600; -} + &__top { + position: relative; + min-height: 270px; + margin: 0 auto 116px; + padding: 29px 0 40px; + background-image: url(/static/img/png/Box9.png), + url(/static/img/png/Box10.png), + url(/static/img/png/Box11.png), + url(/static/img/png/Box12.png); + background-position: top -4px left 46px, + top -30px right -14px, + bottom 73px left 278px, + bottom 71px right 276px; + background-repeat: no-repeat, + no-repeat, + no-repeat, + no-repeat; + background-size: 17.5%, 21.8%, 8.5%, 8.8%; -.presentation__btn { - margin-bottom: 40px; -} + @media (min-width: 1720px) { + background-size: 18.5%, 22%, 9%, 10.1%; + background-position: top -47px left 58px, + top -31px right 20px, + bottom 8px left 347px, + bottom -5px right 352px; + padding-top: 95px; + margin-bottom: 176px; + } -.presentation__next { - font-weight: 500; - line-height: 22px; - padding-right: 5px; -} + @media (max-width: 1304.98px) { + background-size: 16%, 20%, 9.5%, 10.1%; + background-position: top -2.8% left 6.5%, + top -19% right 3.5%, + bottom 32% left 23%, + bottom 29% right 22.6%; + margin-bottom: 96px; + } -.presentation__arrows { - padding-top: 2px; - animation: jump 2s ease-in-out infinite; + @media (max-width: 991.98px) { + background-size: 14.5%, 17%, 8.3%, 9.1%; + background-position: top 9% left 7%, + top 5% right 6%, + bottom 51% left 14.8%, + bottom 47.5% right 13.8%; + padding-top: 31px; + margin-bottom: 76px; + } + + @media (max-width: 767.98px) { + margin-bottom: 77px; +} + } + + &__bottom { + + .subtitle { + @media (max-width: 991.98px) { + max-width: 40%; + margin: 0 auto 30px; + } + + @media (max-width: 767.98px) { +max-width: 65%; + margin-bottom: 21px; +} + } + } + + &__title { + margin-bottom: 23px; + + @media (max-width: 991.98px) { + max-width: 75%; + margin: 0 auto 19px; + } + + @media (max-width: 767.98px) { + margin-bottom: 15px; +} + } + + &__subtitle { + margin-bottom: 41px; + font-weight: 600; + + @media (max-width: 991.98px) { + max-width: 55%; + margin: 0 auto 40px; + font-size: 16px; + } + + @media (max-width: 767.98px) { + margin-bottom: 30px; + max-width: 77%; +} + } + + &__btn { + margin-bottom: 40px; + + @media (max-width: 991.98px) { + padding-left: 82px; + padding-right: 82px; + } + + @media (max-width: 767.98px) { + margin-bottom: 30px; +} + } + + &__next { + font-weight: 500; + line-height: 22px; + padding-right: 5px; + } + + &__arrows { + padding-top: 2px; + animation: jump 2s ease-in-out infinite; + } + + &__cards { + max-width: 1300px; + margin: 0 auto; + + @media (min-width: 1720px) { + max-width: initial; + margin-left: -10px; + margin-right: -10px; + } + + @media (max-width: 1304.98px) { + max-width: 1140px; + } + + @media (max-width: 767.98px) { + //padding-left: 58px; +} + } + + &__bottom .presentation__title { + margin-bottom: 13px; + } } @keyframes jump { @@ -81,12 +180,3 @@ transform: translateY(0px); } } - -.presentation__bottom .presentation__title { - margin-bottom: 13px; -} - -.presentation__cards { - max-width: 1300px; - margin: 0 auto; -} \ No newline at end of file diff --git a/styles/moover/root.scss b/styles/moover/root.scss index 0a2c9b7..9f2e41a 100644 --- a/styles/moover/root.scss +++ b/styles/moover/root.scss @@ -2,7 +2,6 @@ margin: 0 auto; width: 1280px; position: relative; - min-height: 695px; } @media (min-width: 1720px) { @@ -12,18 +11,26 @@ } -/*@media (max-width: 1019.98px) {*/ -/* .container {*/ -/* width: 720px*/ -/* }*/ -/*}*/ +@media (max-width: 1304.98px) { + .container { + width: 1120px; + max-width: 88vw; + } +} -/*@media (max-width: 767.98px) {*/ -/* .container {*/ -/* margin: 0 15px;*/ -/* width: auto*/ -/* }*/ -/*}*/ +@media (max-width: 991.98px) { + .container { + width: 640px; + max-width: 100vw; + } +} + +@media (max-width: 767.98px) { + .container { + margin: 0 16px; + width: auto; + } +} :root { --color-primary: #FF613A; @@ -41,6 +48,24 @@ color: var(--color-black2); } + +body { + overflow-x: hidden; + + padding-top: 129px; + + @media (max-width: 1304.98px) { + padding-top: 126px; + } + @media (max-width: 991.98px) { + padding-top: 85px; + } + + @media (max-width: 767.98px) { + padding-top: 57px; + } +} + .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 700; @@ -60,12 +85,21 @@ h2, .h2 { font-size: 24px; line-height: 36px; margin-bottom: 10px; + + @media (min-width: 1720px) { + font-size: 28px; + margin-bottom: 20px; + } } h3, .h3 { font-size: 20px; line-height: 28px; margin-bottom: 12px; + + @media (max-width: 1304.98px) { + margin-bottom: 13px; + } } h4, .h4 { @@ -77,10 +111,28 @@ h4, .h4 { p { line-height: 22px; margin-bottom: 20px; + + @media (min-width: 1720px) { + font-size: 20px; + line-height: 26px; + } + + @media (max-width: 991.98px) { + margin-bottom: 18px; + } + + @media (max-width: 479.98px) { + margin-bottom: 14px; + } } b { font-weight: 500; + + @media (max-width: 991.98px) { + font-size: 16px; + line-height: 22px; + } } @@ -111,9 +163,22 @@ b { margin-left: auto; margin-right: auto; - @media (min-width: 1720px) { - font-size: 44px; - margin-bottom: 22px; + @media (min-width: 1720px) { + font-size: 48px; + margin-bottom: 22px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 20px; + } + + @media (max-width: 991.98px) { + font-size: 32px; + line-height: 38.73px; + } + + @media (max-width: 767.98px) { + margin-bottom: 14px; } } @@ -121,18 +186,107 @@ b { margin-bottom: 81px; line-height: 22px; - @media (min-width: 1720px) { - font-size: 20px; - margin-bottom: 97px; + @media (min-width: 1720px) { + font-size: 20px; + margin-bottom: 105px; } + + @media (max-width: 1304.98px) { + margin-bottom: 71px; + } + + } .hide { display: none; + + &__xxl { + display: inline-flex; + + @media (min-width: 1720px) { + display: none; + } + } + + &__md { + + @media (max-width: 991.98px) { + display: none; + } + } + + &__xs { + @media (max-width: 479.98px) { + display: none; + } + } + } -@media (min-width: 1440px) { - .is-container.wrapper_main { +.show { + + &__xxl { + display: none; + + @media (min-width: 1720px) { + display: block; + } + } + + &__md { + display: none; + + @media (max-width: 991.98px) { + display: initial; + } + } + + &__xs { + @media (min-width: 480px) { + display: none; + } + } +} + +.br { + &--xxl { + @media (min-width: 1440px) { + display: none; + } + } + + &--md { + @media (max-width: 991.98px) { + display: none; + } + } + + &--sm { + @media (max-width: 767.98px) { + display: none; + } + } +} + +.is-container.wrapper_main { + + @media (min-width: 1440px) { max-width: initial; } -} \ No newline at end of file + + & > .container { + position: relative; + left: 15px; + + @media (min-width: 1720px) { + left: 17px; + } + + @media (max-width: 767.98px) { + left: 0; + } + } +} + + diff --git a/styles/moover/sore.scss b/styles/moover/sore.scss index 59fdb8d..365c113 100644 --- a/styles/moover/sore.scss +++ b/styles/moover/sore.scss @@ -1,27 +1,124 @@ .sore { margin-bottom: 160px; + margin-top: 1px; + + @media (min-width: 1720px) { + margin-bottom: 178px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 140px; + } + + @media (max-width: 991.98px) { + margin-bottom: 60px; + } + + @media (max-width: 479.98px) { + margin-bottom: 40px; + } &__img { - margin: 0 auto 26px; + margin: 0 auto 13px; position: relative; left: -17px; + top: -13px; + @media (min-width: 1720px) { + margin-bottom: 40px; + top: -5px; + left: -21px; + } + + @media (max-width: 1304.98px) { + left: 2px; + top: -22px; + margin-bottom: 4px; + } + + @media (max-width: 991.98px) { + top: -8px; + left: -15px; + margin-bottom: 18px; + } + + @media (max-width: 479.98px) { + max-width: 106%; + top: -26px; + left: -18px; + margin-bottom: 4px; + } } .title { margin-bottom: 40px; + + @media (min-width: 1720px) { + margin-bottom: 61px; + } + + @media (max-width: 991.98px) { + margin-bottom: 20px; + } + + @media (max-width: 479.98px) { + margin-bottom: 29px; + } } .subtitle { max-width: 62%; - margin: 0 auto -1px; + margin: 0 auto 10px; + @media (min-width: 1720px) { + line-height: 26px; + max-width: 60%; + } + + @media (max-width: 1304.98px) { + max-width: 65%; + } + + @media (max-width: 991.98px) { + max-width: 85%; + } + + @media (max-width: 479.98px) { + max-width: 99%; + } } .h3 { max-width: 47%; - margin: 0 auto 19px; + margin: 0 auto 19px; + @media (min-width: 1720px) { + max-width: 38%; + } + + @media (max-width: 1304.98px) { + max-width: 50%; + } + + @media (max-width: 991.98px) { + max-width: 65%; + margin-bottom: 21px; + } + @media (max-width: 479.98px) { + max-width: 100%; + margin-bottom: 17px; + } } + + &__btn { + @media (max-width: 479.98px) { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 15px; + padding-right: 15px; + display: flex; + } + } + } diff --git a/styles/moover/use.scss b/styles/moover/use.scss index 892de9a..2ac3a83 100644 --- a/styles/moover/use.scss +++ b/styles/moover/use.scss @@ -1,14 +1,55 @@ .use { margin-bottom: 123px; + @media (min-width: 1720px) { + margin-bottom: 184px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 142px; + } + + @media (max-width: 991.98px) { + margin-bottom: 121px; + } + &__img { width: 67.5%; margin-left: 16px; margin-bottom: 31px; + + @media (min-width: 1720px) { + width: 50.2%; + margin-left: 15px; + margin-bottom: 46px; + } + + @media (max-width: 1304.98px) { + width: 77%; + margin-left: 10px; + margin-bottom: 34px; + } + + @media (max-width: 991.98px) { + margin-left: 0; + width: 100%; + margin-bottom: 40px; + } + + @media (max-width: 767.98px) { + margin-bottom: 30px; + } } &__btn { margin-bottom: 11px; + text-align: center; + + @media (max-width: 767.98px) { + max-width: 100%; + padding-left: 50px; + padding-right: 50px; + } } &__link { @@ -21,26 +62,51 @@ .title { max-width: 80%; margin-bottom: 49px; - } - &--diff { - .title { - width: 60%; - margin-bottom: 60px; + @media (min-width: 1720px) { + max-width: 40%; } - .use__img { - width: 100%; - margin-left: 0; - margin-bottom: 17px; + @media (max-width: 991.98px) { + margin-bottom: 40px; + } + + @media (max-width: 767.98px) { + max-width: 100%; + margin-bottom: 29px; } } &--lett { margin-bottom: 120px; + @media (min-width: 1720px) { + margin-bottom: 126px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 106px; + } + + @media (max-width: 991.98px) { + margin-bottom: 79px; + } + + @media (max-width: 767.98px) { + margin-bottom: 81px; + } + + .title { margin-bottom: 51px; + + @media (max-width: 1304.98px) { + margin-bottom: 39px; + } + + @media (max-width: 767.98px) { + margin-bottom: 0; + } } .use__img { @@ -48,6 +114,39 @@ margin-right: -5px; max-width: 110%; width: 1290px; + + @media (min-width: 1720px) { + width: initial; + } + + @media (max-width: 1304.98px) { + margin-left: 0; + margin-right: 0; + max-width: 100%; + width: 1120px; + } + + @media (max-width: 767.98px) { + max-width: 103%; + margin-left: -5px; + margin-top: -6px; + } + + @media (max-width: 479.98px) { + margin-bottom: 3px; + } + } + } + + .h3 { + @media (max-width: 991.98px) { + max-width: 75%; + margin: 0 auto 22px; + } + + @media (max-width: 767.98px) { + max-width: 100%; + margin-bottom: 16px; } } } diff --git a/styles/moover/uses.scss b/styles/moover/uses.scss index 039b017..ab0db53 100644 --- a/styles/moover/uses.scss +++ b/styles/moover/uses.scss @@ -1,5 +1,21 @@ .uses { - margin-bottom: 122px; + margin-bottom: 120px; + + @media (min-width: 1720px) { + margin-bottom: 136px; + } + + @media (max-width: 1304.98px) { + margin-bottom: 125px; + } + + @media (max-width: 991.98px) { + margin-bottom: 100px; + } + + @media (max-width: 479.98px) { + margin-bottom: 199px; + } &__grid { text-align: left; @@ -7,22 +23,140 @@ grid-template-columns: repeat(3, 1fr); /* max-width: 101.5%; */ /* width: 101.5%; */ + + @media (max-width: 991.98px) { + grid-template-columns: 1fr 1fr; + column-gap: 15px; + } + + @media (max-width: 479.98px) { + display: block; + text-align: center; + } } &__item { min-height: 50px; - margin-bottom: 43px; + margin-bottom: 19px; padding: 0 50px 0 2px; + + @media (min-width: 1720px) { + margin-bottom: 22px; + } + + @media (max-width: 991.98px) { + padding-right: 0; + } + + p:last-child { + @media (max-width: 991.98px) { + margin-bottom: 0; + } + } } &__icon { margin-bottom: 11px; + + @media (min-width: 1720px) { + width: 147px; + height: 147px; + margin-bottom: 20px; + } } + .title { max-width: 50%; margin: 0 auto 60px; + + @media (max-width: 1304.98px) { + max-width: 70%; + margin-bottom: 39px; + } + + @media (max-width: 479.98px) { + margin-bottom: 30px; + } } + &__title { + font-size: 24px; + font-weight: 700; + line-height: 36px; + margin-bottom: 10px; + } + + + &--cstmr { + & .uses { + &__item { + text-align: center; + padding: 0 15px; + + @media (max-width: 991.98px) { + margin-bottom: 42px; + min-height: 255px; + } + + @media (max-width: 479.98px) { + margin-bottom: 25px; + min-height: 194px; + } + + p { + @media (max-width: 991.98px) { + max-width: 90%; + margin: 0 auto; + } + + @media (max-width: 479.98px) { + max-width: 100%; + } + } + } + + &__icon { + width: 118px; + height: 118px; + + @media (max-width: 991.98px) { + width: 142px; + height: 142px; + margin-bottom: 23px; + } + + @media (max-width: 479.98px) { + width: 117px; + height: 117px; + margin-bottom: 8px; + } + } + + + &__grid { + @media (max-width: 991.98px) { + grid-template-columns: 1fr; + } + } + } + + .title { + + @media (max-width: 1304.98px) { + margin-bottom: 61px; + max-width: 80%; + } + + @media (max-width: 991.98px) { + margin-bottom: 44px; + } + + @media (max-width: 479.98px) { + max-width: 90%; + margin-bottom: 31px; + } + } + } } \ No newline at end of file diff --git a/templates/blocks/n_header.html b/templates/blocks/n_header.html new file mode 100644 index 0000000..801c0c4 --- /dev/null +++ b/templates/blocks/n_header.html @@ -0,0 +1,77 @@ +{% load i18n %} +{% load base_tags_extra %} +{% load webpush_notifications %} + +
+
+ + + + + + {% trans "Регистрируйся" %} + +
+ +
+ {% trans "Преимущества" %} + {% trans "Отзывы" %} + {% trans "Как это работает" %} + {% trans "О сервисе" %} +
+
+
+
+ \ No newline at end of file diff --git a/templates/pages/p_customer_landing_page.html b/templates/pages/p_customer_landing_page.html index 2bec917..82bc25a 100644 --- a/templates/pages/p_customer_landing_page.html +++ b/templates/pages/p_customer_landing_page.html @@ -5,25 +5,20 @@ {% block meta %} -{# #} + {% endblock %} -{#{% block before_close %}#} -{# #} -{# #} -{#{% endblock %}#} {% block content %} -
-

+

{% blocktrans %} Сервис попутных посылок {% endblocktrans %}

- {% translate "Отправляй посылки с попутчиками в любую точку, быстро и недорого" %} + {% translate "Перевози посылки и окупай стоимость дороги, отдыха или топлива" %}
{% translate "Узнать подробнее" %}
@@ -46,47 +41,101 @@ {% translate "Маленькая история о том, как работает наш сервис" %}

{############cards###############} -
+
- img1 + img1

- {% translate "Мария, хочет отправить
посылку, но её не устраивает
цена доставки почтовых
" %} - {% translate "сервисов и она устала искать в
чатах тех, кто сможет перевезти
посылку." %} + {% translate "Олег планирует поездку в другой город, задался вопросом, как окупить стоимость дороги?" %}

- img1 + img2

- {% translate "Мария, узнаёт о нашем сервисе
" %} + {% translate "Олег зашел на сайт " %} TripWB.com. - {% translate "Регистрируется
и очень быстро размещает
объявление." %} + {% translate "быстро разместил объявление, что планирует поездку из одного города в другой и готов взять с собой посылку до 10 кг." %}

- img1 + img3

- {% translate "Попутчик Егор увидел
объявление Марии, нажал
откликнуться и получил
возможность связаться с ней,
удобным для него способом." %} + {% translate "На объявление Олега откликнулась Аня, ей как раз и нужно отправить посылку своему другу в город, куда следует Олег, но обычными почтовыми сервисами очень дорого и долго ждать." %}

- img1 + img4

- {% translate "Мария и Егор обговорили детали
доставки и потом встретились в
удобном для всех месте. После
чего Мария передала посылку
Егору и он её доставил." %} + {% translate "Аня с Олегом созвонились, обсудили условия и договорились о месте и времени передачи посылки." %}

+
- {############easy###############} +
- {% translate "Один простой шаг, чтобы отправить посылку" %} + {% translate "Один простой шаг, чтобы взять с собой посылку" %}
{% translate "Еще легче, чем писать в чаты и группы в социальных сетях" %} @@ -94,133 +143,349 @@

{% translate "Один простой шаг" %}

-

{% translate "За пару кликов размещаешь объявление на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}

- sender1 +

{% translate "За пару кликов размещаешь объявление на нашем сайте, о том, что готов перевезти посылку, а также указываешь удобный способ связи." %}

+ sender1
-

{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}

- sender1 +

{% translate "Люди, которым нужно отправить посылку по пути твоего следования, видят объявление и откликаются на него или связываются напрямую или оставляют отклики на него." %}

+ sender2
-

{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}

- sender1 +

{% translate "Выбираешь объявление отправителя, посылку которого ты готов перевезти, созваниваетесь или переписываетесь и обсуждаете условия и стоимость, а также удобное время и место для передачи посылки." %}

+ + + + sender3 +
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
- {% translate "Разместить объявление" %} + {% translate "Разместить объявление" %}
- {############use###############} +
-
{% translate "Уже пользуются сайтом и находят перевозчиков" %}
- list users +
{% translate "Уже пользуются сайтом и находят посылки для перевозок" %}
+ + + + + + + list users + +
- {% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %} + {% translate "Хотите перевезти посылку и окупить стоимость дороги, топлива?" %}
- {% translate "Найти перевозчика" %} + {% translate "Найти посылку" %}
- {% translate "Зарегистрироваться" %} + {% translate "Зарегистрироваться" %}
-
-
{% translate "Чем мы отличаемся от классических почтовых сервисов" %}
- list differences + +
+
{% translate "Преимущества сервиса" %}
+
+
+
+

{% translate "Прямой контакт" %}

+

{% translate "Общаешься напрямую с отправителем, никаких посредников" %}

+
+
+

{% translate "Своя цена" %}

+

{% translate "Стоимость перевозки назначаете самостоятельно." %}

+
+
+

{% translate "Любой тип и вес посылки" %}

+

{% translate "Можешь брать любые посылки по типу, весу и пр. параметрам без ограничений и доп. расходов." %}

+
+
+
+ + + + + + benefits + +
+
+
+

{% translate "Уведомления" %}

+

{% translate "Как только по твоему объявлению найдется посылка мы сообщим на E-mail." %}

+
+
+

{% translate "Удобный поиск" %}

+

{% translate "Можешь самостоятельно найти посылку или разместить объявление на сайте." %}

+
+
+

{% translate "Экономия времени" %}

+

{% translate "Не нужно искать группы, чаты, и кидать «клич», а просто достаточно разместить объявление на сайте." %}

+
+
+
-
+ +
{% translate "Что о нас говорят люди" %}
- {% for media_item in page.get_media_items %} -
-
-
- - - +
+
+
+
+
+ user + +
+ +
{% endfor %} -{#
#} -{#
#} -{#
#} -{##} -{# #} -{##} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{##} -{# #} -{##} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{##} -{##} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{##} -{##} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{##} -{##} -{#
#} -{#
#} -{#
#} -{#
#} -{#
#} -{# #} -{# #} +
+
+
+
{% translate "Что о нас пишут люди" %}
+ + + + + + list letters + +
+ + + list letters + + + + list letters + + + + list letters + + + + list letters + + + + list letters + + + + list letters + + + + list letters + + + + list letters + +
+
+
+
+ {% translate "Хочешь вернуть стоимость билета, топлива или окупить свое путешествие?" %} +
+
+ {% translate "Зарегистрируйся на Trip With Bonus прямо сейчас, размести бесплатно объявление и получи отклики от людей с посылками" %} +
+ {% translate "Разместить объявление" %} + +
+
+
{% translate "О сервисе Trip With Bonus" %}
+
+ + + + + + about + + {# about#} +
+

{% translate "TripWB - это сервис попутных посылок, который соединяет отправителя посылки того, кому нужно что-то передать в другой город или страну, и перевозчика посылки, а именно попутчика или путешественника, который следует по пути назначения." %}

+

{% translate "Тебе не нужно больше бежать в чаты и группы в социальных сетях и искать тех, кто сможет перевезти посылку, а достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %} +

{% translate "Мы не являемся почтовым сервисом, т.к. мы не доставляем посылки, а только даем возможность отправителю и перевозчику найти друг друга." %}

+

{% translate "Если не хочешь размещать объявление и ждать, то можешь самостоятельно на нашем сайте найти перевозчика через удобную систему поиска" %}

+
+
+
+
+
{% translate "Когда актуально пользоваться нашим сервисом" %}
+
+
+ image icon +
{% translate "Экономия" %}
+

+ {% translate "Когда нужно отбить стоимость дороги или топлива, или дополнительно заработать" %} +

+
+
+ image icon +
{% translate "Путешествия" %}
+

+ {% translate "Когда часто путешествуешь" %} +

+
+
+ image icon +
{% translate "Работа" %}
+

+ {% translate "Когда твоя работа связана с частыми переездами" %} +

+
+
+
+
+
+ {% translate "Размести свое объявление какую посылку ты можешь перевезти прямо сейчас " %} +
+ {% translate "Разместить объявление" %} +
+ +
+
+ {% translate "О наболевшем..." %} +
+
+ {% translate "Мы знаем, каково это без конца и края просматривать чаты и группы социальных сетей, писать туда по 5-10 сообщений в день, чтобы найти посылки, которые можно перевезти и сэкономить на топливе или билете." %} +
+ + + + + + sore image + +
+ {% translate "Зарегистрируйся бесплатно прямо сейчас и начни размещать объявления о перевозки посылки" %} +
+ {% translate "Зарегистрироваться и разместить" %} +
+ +
{% endblock %} \ No newline at end of file diff --git a/templates/pages/p_mover_landing_page.html b/templates/pages/p_mover_landing_page.html index 99b0191..34f4899 100644 --- a/templates/pages/p_mover_landing_page.html +++ b/templates/pages/p_mover_landing_page.html @@ -45,37 +45,92 @@
- img1 + img1

- {% translate "Мария, хочет отправить
посылку, но её не устраивает
цена доставки почтовых
" %} - {% translate "сервисов и она устала искать в
чатах тех, кто сможет перевезти
посылку." %} + {% translate "Мария, хочет отправить
посылку, но её не устраивает
цена доставки почтовых
" %} + {% translate "сервисов и она устала искать в
чатах тех, кто сможет перевезти
посылку." %}

- img1 + img1

- {% translate "Мария, узнаёт о нашем сервисе
" %} + {% translate "Мария, узнаёт о нашем сервисе
" %} TripWB.com. - {% translate "Регистрируется
и очень быстро размещает
объявление." %} + {% translate "Регистрируется
и очень быстро размещает
объявление." %}

- img1 + img1

- {% translate "Попутчик Егор увидел
объявление Марии, нажал
откликнуться и получил
возможность связаться с ней,
удобным для него способом." %} + {% translate "Попутчик Егор увидел
объявление Марии, нажал
откликнуться и получил
возможность связаться с ней,
удобным для него способом." %}

- img1 + img1

- {% translate "Мария и Егор обговорили детали
доставки и потом встретились в
удобном для всех месте. После
чего Мария передала посылку
Егору и он её доставил." %} + {% translate "Мария и Егор обговорили детали
доставки и потом встретились в
удобном для всех месте. После
чего Мария передала посылку
Егору и он её доставил." %}

+
@@ -89,143 +144,132 @@

{% translate "Один простой шаг" %}

{% translate "За пару кликов размещаешь объявление на нашем сайте, о том, что необходимо перевезти посылку, а также указываешь удобный способ связи." %}

- sender1 + sender1

{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}

- sender1 + sender2
-

{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}

- sender1 +

{% translate "Тебе остаётся только выбрать перевозчика, связаться и обсудить детали перевозки." %}

+

{% translate "Попутчики видят твое объявление и оставляют отклики на него." %}

+ + + + sender3 +
{% translate "Чтобы разместить объявление - зарегистрируйтесь" %}
- {% translate "Разместить объявление" %} + {% translate "Разместить объявление" %}
{% translate "Уже пользуются сайтом и находят перевозчиков" %}
- list users + + + + + + + list users + + +
{% translate "Нужно отправить посылку партнеру, родителям или знакомым?" %}
- {% translate "Найти перевозчика" %} + {% translate "Найти перевозчика" %}
- {% translate "Зарегистрироваться" %} + {% translate "Зарегистрироваться" %}
-
+
{% translate "Чем мы отличаемся от классических почтовых сервисов" %}
- list differences -
-
-
{% translate "Что о нас говорят люди" %}
-
- {# {% for media_item in page.get_media_items %}#} - {#
#} - {#
#} - {#
#} - {#
#} - {#
#} - {##} - {# #} - {#
#} - {#
#} - {#
#} - {#
#} - {# {% endfor %}#} -
-
-
-
-
- user - -
-
+
+
+
+ Trip With Bonus
- -
-
-
-
-
-
- user - -
-
+
+
+ Стоимость перевозки назначаете сами +
+
+
+ Возможность контакта с перевозчиком в режиме онлайн +
+
+
+ Встреча с перевозчиком в удобном для вас месте +
+
+
+ Без дополнительных платежей и комиссий за параметры посылки +
+
+
+ Вы сами выбираете оптимальный маршрут и время доставки
-
-
-
-
-
- user - -
-
+
+
+ Другие почтовые сервисы +
+
+
+ Стоимость перевозки назначает сервис +
+
+
+ Автоматический трекинг не всегда даёт актуальную информацию +
+
+
+ + Нужно ехать только в пункт отправки посылки +
+
+
+ Дополнительная стоимость за разные параметры посылки +
+
+
+ Посылка может перевозиться долго и с большим количеством перегрузок
-
-
-
-
-
- user - -
-
-
-
-
-
-
-
-
- user - -
-
- - -
-
+
+
+
{% translate "Что о нас говорят люди" %}
+
+ {% for media_item in page.get_media_items %} +
+
+
+
+
+ user + +
+
+
+ +
+ {% endfor %} +
+
+
-
+
{% translate "Что о нас пишут люди" %}
- list letters + + + + + + list letters + +
+ + + list letters + + + + list letters + + + + list letters + + + + list letters + + + + list letters + + + + list letters + + + + list letters + + + + list letters + +
@@ -297,7 +391,8 @@
{% translate "Зарегистрируйся на Trip With Bonus прямо сейчас, размести бесплатно объявление и получи запросы на перевозку твоей посылки" %}
- {% translate "Разместить объявление" %} + {% translate "Разместить объявление" %}
-
+
{% translate "О сервисе Trip With Bonus" %}
- + + + + + + about + + {# about#}

{% translate "TripWB - это сервис попутных посылок, который соединяет отправителя посылки того, кому нужно что-то передать в другой город или страну, и перевозчика посылки, а именно попутчика или путешественника, который следует по пути назначения." %}

{% translate "Тебе не нужно больше бежать в чаты и группы в социальных сетях и искать тех, кто сможет перевезти посылку, а достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %} @@ -336,9 +438,9 @@

{% translate "Если не хочешь размещать объявление и ждать, то можешь самостоятельно на нашем сайте найти перевозчика через удобную систему поиска" %}

- {# #} +
-
+
{% translate "Преимущества сервиса" %}
@@ -356,7 +458,13 @@
- benefits + + + + + + benefits +
@@ -380,39 +488,39 @@
image icon -
+

{% translate "Когда нужно отправить документы партнеру или родственнику" %} -

+

image icon -
+

{% translate "Когда необходимо отправить посылку в другую страну" %} -

+

image icon -
+

{% translate "Когда нужно отправить подарок семье, друзьям или знакомым" %} -

+

image icon -
+

{% translate "Когда стоимость пересылки через почтовый сервис высокая или перевозка занимает длительное время" %} -

+

image icon -
+

{% translate "Когда нужно отправить не только маленькую посылку, но и крупногабаритный груз" %} -

+

image icon -
+

{% translate "Когда нет прямого сообщения из пункта А в пункт Б обычными сервисами доставки" %} -

+

@@ -423,7 +531,8 @@
{% translate "Достаточно просто зайти на сайт, разместить объявление в пару кликов и дождаться откликов от попутчиков." %}
- {% translate "Разместить объявление" %} + {% translate "Разместить объявление" %}
@@ -432,11 +541,18 @@
{% translate "Мы знаем, каково это без конца и края закидывать сообщения в чаты и группы в социальных сетях, в надежде найти человека, который едет или летит в нужном направлении, чтобы передать посылоку своим родным или близким. Очень часто ещё и стоимость пересылки в обычных почтовых сервисах выше стоимости самой посылки." %}
- sore image + + + + + + sore image +
{% translate "Зарегистрируйте бесплатно прямо сейчас и размести свое первое объявление об отправке посылки" %}
- {% translate "Зарегистрироваться и разместить" %} + {% translate "Зарегистрироваться и разместить" %}
diff --git a/templates/tb_base.html b/templates/tb_base.html index 2439e96..f9b4c20 100644 --- a/templates/tb_base.html +++ b/templates/tb_base.html @@ -176,9 +176,12 @@ function gtag_report_conversion(url) { {% if mobile == 'false' or mobile %} {% endif %}
-
- - {% include 'blocks/b_header.html' %} +
+ {% if page.url == "landing_mover" or page.url == 'landing_customer' %} + {% include 'blocks/n_header.html' %} + {% else %} + {% include 'blocks/b_header.html' %} + {% endif %}
"> @@ -213,7 +216,7 @@ function gtag_report_conversion(url) {
{% endif %} -
+
{% block content %} {% endblock %}