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) {*/
+@media (min-width: 1720px) {
-/*  .container {*/
+  .container {
-/*    width: 992px*/
+    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-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 -5px left 44px, top -30px right -15px, bottom 70px left 276px, bottom 67px right 274px;
+  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;
+  }
+}

styles/moover/presentation.scss

@@ -1,5 +1,10 @@
 .presentation {
   margin: 20px -65px 140px;
+
+  @media (min-width: 1720px) {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 .presentation__top {
@@ -7,18 +12,29 @@
   min-height: 270px;
   margin: 0 auto 116px;
   padding: 29px 0 40px;
-  background-image: url(/static/img/webp/Box9.webp),
+  background-image: url(/static/img/png/Box9.png),
-  url(/static/img/webp/Box10.webp),
+  url(/static/img/png/Box10.png),
-  url(/static/img/webp/Box11.webp),
+  url(/static/img/png/Box11.png),
-  url(/static/img/webp/Box12.webp);
+  url(/static/img/png/Box12.png);
-  background-position: top -5px left 44px,
+  background-position: top -4px left 46px,
-  top -30px right -15px,
+  top -30px right -14px,
-  bottom 70px left 276px,
+  bottom 73px left 278px,
-  bottom 67px right 274px;
+  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;
+  }
 }
 
 .presentation__title {

styles/moover/root.scss

@@ -1,15 +1,16 @@
 .container {
   margin: 0 auto;
-  max-width: 1280px;
+  width: 1280px;
   position: relative;
   min-height: 695px;
 }
 
-/*@media (max-width: 1339.98px) {*/
+@media (min-width: 1720px) {
-/*  .container {*/
+  .container {
-/*    width: 992px*/
+    width: 1720px;
-/*  }*/
+  }
-/*}*/
+}
+
 
 /*@media (max-width: 1019.98px) {*/
 /*  .container {*/
@@ -23,6 +24,7 @@
 /*    width: auto*/
 /*  }*/
 /*}*/
+
 :root {
   --color-primary: #FF613A;
   --color-white: #FFFFFF;
@@ -33,8 +35,6 @@
   --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;
@@ -46,9 +46,14 @@
 
 }
 
-h1, .title {
+h1, .h1 {
   font-size: 44px;
   line-height: 52px;
+
+  @media (min-width: 1720px) {
+    font-size: 48px;
+    line-height: 52px;
+  }
 }
 
 h2, .h2 {
@@ -58,8 +63,8 @@ h2, .h2 {
 }
 
 h3, .h3 {
-font-size: 20px;
+  font-size: 20px;
-line-height: 28px;
+  line-height: 28px;
   margin-bottom: 12px;
 }
 
@@ -105,13 +110,29 @@ b {
   margin-bottom: 13px;
   margin-left: auto;
   margin-right: auto;
+
+   @media (min-width: 1720px) {
+    font-size: 44px;
+     margin-bottom: 22px;
+  }
 }
 
 .subtitle {
   margin-bottom: 81px;
   line-height: 22px;
+
+   @media (min-width: 1720px) {
+     font-size: 20px;
+     margin-bottom: 97px;
+  }
 }
 
 .hide {
   display: none;
+}
+
+@media (min-width: 1440px) {
+  .is-container.wrapper_main {
+    max-width: initial;
+  }
 }

templates/pages/p_mover_landing_page.html

@@ -12,7 +12,7 @@
 {% block content %}
   <section class="presentation">
     <div class="presentation__top">
-      <h1 class="presentation__title title">
+      <h1 class="presentation__title">
         {% blocktrans %}
           Сервис попутных посылок
         {% endblocktrans %}

templates/tb_base.html

@@ -176,7 +176,7 @@ function gtag_report_conversion(url) {
     {% if mobile == 'false' or mobile %}
     {% endif %}
         <div class="block_overlay  {% if page_type == 'profile' %}hidden{% elif page_type == 'routes' %} routes n_profile hidden{% else %}hidden n_profile{% endif %}" onclick="close_open_curtain()"></div>
-        <div class="wrapper_main">
+        <div class="wrapper_main{% if page.url == "landing_mover" %} is-container{% endif %}">
 
             {% include 'blocks/b_header.html' %}