TRI-283: start adaptive 1920

static/css/moover.css

@@ -1,15 +1,16 @@
 .container {
   margin: 0 auto;
-  max-width: 1280px;
+  width: 1280px;
   position: relative;
   min-height: 695px;
 }
 
-/*@media (max-width: 1339.98px) {*/
-/*  .container {*/
-/*    width: 992px*/
-/*  }*/
-/*}*/
+@media (min-width: 1720px) {
+  .container {
+    width: 1720px;
+  }
+}
+
 /*@media (max-width: 1019.98px) {*/
 /*  .container {*/
 /*    width: 720px*/
@@ -39,11 +40,18 @@
   font-weight: 700;
 }
 
-h1, .title {
+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;
@@ -99,27 +107,64 @@ b {
   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/webp/Box9.webp), url(/static/img/webp/Box10.webp), url(/static/img/webp/Box11.webp), url(/static/img/webp/Box12.webp);
-  background-position: top -5px left 44px, top -30px right -15px, bottom 70px left 276px, bottom 67px right 274px;
+  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 {

static/css/moover/presentation.css

@@ -0,0 +1,84 @@
+.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;
+}

static/css/moover/root.css

@@ -0,0 +1,137 @@
+.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;
+  }
+}