TRI-283: edit some code

static/css/moover/animate.css

@@ -1,158 +1 @@
-.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%;
-  /*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;
-  }
-}
+.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:scale(0);opacity:0}.animate.right{opacity:0;transform:scale(0)}.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}}

styles/moover/animate.scss

@@ -27,11 +27,13 @@
   }
 
   &.left {
-    transform: translateX(-180px);
+    transform: scale(0);
+    opacity: 0;
   }
 
   &.right {
-    transform: translateX(180px);
+    opacity: 0;
+    transform: scale(0);
 
     .title {
       margin-bottom: 17px;

templates/pages/p_customer_landing_page.html

@@ -397,7 +397,7 @@
                 }
                 (() => {
                   el.style.opacity = 1;
-                  el.style.transform = 'translateX(0)';
+                  el.style.transform = 'scale(1)';
                   el.style.transition = 'opacity 1.3s ease, transform 1.5s ease';
                 })();
               }

templates/pages/p_mover_landing_page.html

@@ -409,7 +409,7 @@
                 }
                 (() => {
                   el.style.opacity = 1;
-                  el.style.transform = 'translateX(0)';
+                  el.style.transform = 'scale(1)';
                   el.style.transition = 'opacity 1.3s ease, transform 1.5s ease';
                 })();
               }