From 37f50d48f7b7b9c5c1df5729aaa7c4770d78ccd8 Mon Sep 17 00:00:00 2001
From: nimithshetty17 <111452145+nimithshetty17@users.noreply.github.com>
Date: Tue, 5 Dec 2023 19:20:57 +0530
Subject: [PATCH] Zelta page updates (#360)

* Navattic hamburger icons.

* Zelta page feedback.

* Lint fix for css.

* Zelta page fixes.

* Cta css lint fix.

* Zelta page round 2 fixes.

* Zelta page new updates.

---------

Co-authored-by: keith-kaplan <111377779+keith-kaplan@users.noreply.github.com>
---
 blocks/carousel/carousel.css                  |  6 +-
 blocks/columns/columns.css                    |  4 ++
 blocks/content-intro/content-intro.css        |  5 +-
 blocks/cta/cta.css                            |  3 +-
 blocks/footer/footer.css                      | 68 +++++++++++++++----
 .../image-flush-bottom/image-flush-bottom.css |  9 +++
 blocks/leadspace/leadspace.css                | 11 +--
 blocks/stat/stat.css                          |  7 ++
 8 files changed, 90 insertions(+), 23 deletions(-)

diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
index 0d66c47e..62be629f 100644
--- a/blocks/carousel/carousel.css
+++ b/blocks/carousel/carousel.css
@@ -326,10 +326,14 @@ main .section.stat-container.carousel-container div.carousel-wrapper {
     }
 
     .section.carousel-container .default-content-wrapper {
-        padding-top: 0;
+        padding-top: var(--spacer-layout-05);
         padding-bottom: var(--spacer-layout-07);
     }
 
+    main .section div.carousel-wrapper {
+        padding-top: var(--spacer-layout-07);
+    }
+
     .carousel .carousel-slide-container {
         width: 100%;
         position: relative;
diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
index 2d674a10..6887c219 100644
--- a/blocks/columns/columns.css
+++ b/blocks/columns/columns.css
@@ -333,6 +333,10 @@ main .columns > div > div > h4:first-child {
   padding: 0;
 }
 
+.columns.solution-header.columns-2-cols .icon svg {
+  height: 96px;
+}
+
 /* teaser-list-manual */
 .teaser-list-manual.columns-container {
   background-color: var(--neutral-white);
diff --git a/blocks/content-intro/content-intro.css b/blocks/content-intro/content-intro.css
index 9d8e9e50..70e49037 100644
--- a/blocks/content-intro/content-intro.css
+++ b/blocks/content-intro/content-intro.css
@@ -53,7 +53,7 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe
 .content-intro ul {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: var(--gap-24);
+  gap: var(--gap-16);
   width: 100%;
   margin: var(--spacer-layout-04) 0 0 0;
   padding-inline-start: 0;
@@ -185,8 +185,7 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe
     align-items: flex-start;
     flex-shrink: 0;
     gap: var(--gap-120);
-    max-width: 1128px;
-    padding-bottom: var(--spacer-element-10);
+    max-width: 1128px; /* padding-bottom: var(--spacer-element-10); */
   }
   
   .content-intro .content-intro__col-1 h2#explore-our-platform {
diff --git a/blocks/cta/cta.css b/blocks/cta/cta.css
index 83cb735b..94f031d4 100644
--- a/blocks/cta/cta.css
+++ b/blocks/cta/cta.css
@@ -12,7 +12,8 @@
 
 .section.cta-container.bg-white .cta-wrapper {
   border-top: 1px solid var(--neutral-sand);
-  border-bottom: 1px solid var(--neutral-sand);
+
+  /* border-bottom: 1px solid var(--neutral-sand); */
 }
 
 .section.cta-container .cta.block > div,
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
index 902237cc..fe73d48f 100644
--- a/blocks/footer/footer.css
+++ b/blocks/footer/footer.css
@@ -28,6 +28,10 @@ footer .footer-links > div > div:last-of-type {
   flex: 1 1 6.825rem;
 }
 
+footer .footer-links > div > div > p {
+  margin-bottom: 48px;
+}
+
 footer .footer-links > div > div > h3 {
   color: var(--neutral-grey-tint120);
   font-size: var(--font-size-18);
@@ -35,6 +39,7 @@ footer .footer-links > div > div > h3 {
   margin: 0 0 24px;
   letter-spacing: .01em;
   line-height: 160%;
+  white-space: nowrap;
 }
 
 footer .footer-links .icon {
@@ -50,6 +55,13 @@ footer .footer-links .icon {
   transition: all .3s ease-in-out;
 }
 
+footer .footer-links .icon-linkedin,
+footer .footer-links .icon-twitter {
+  position: absolute;
+  bottom: -90px;
+  right: 0;
+}
+
 footer .footer-links p .icon:hover {
   background-image: var(--gradient-to-right);
   background-position: 100% 0;
@@ -74,10 +86,6 @@ footer .footer-links .icon-email > svg {
   height: 23.86px;
 }
 
-footer .footer-links .icon.icon-email, footer .footer-links .icon.icon-linkedin {
-  margin: 0 0 36px;
-}
-
 footer .footer-links .icon.icon-twitter {
   margin: 0 0 0 24px;
 }
@@ -131,7 +139,7 @@ footer .footer-links ul li a {
 
 footer .footer-links + ul > li a {
   text-decoration: none;
-  color: var(--neutral-white);
+  color: var(--neutral-grey-tint120);
 }
 
 footer .footer-links ul li a:hover {
@@ -156,12 +164,15 @@ footer .footer-links + ul li {
 }
 
 footer .footer-links + ul > li a:hover {
-  text-decoration: underline;
-  text-decoration-color: var(--primary-purple);
+  border-bottom: 1px solid var(--neutral-grey-tint120);
+}
+
+footer .footer-links + ul > li .cookie-consent {
+  cursor: pointer;
 }
 
-footer div:last-of-type > ul:last-of-type > li:last-of-type span.cookie-consent:hover {
-  text-decoration: underline;
+footer .footer-links + ul > li .cookie-consent:hover {
+  border-bottom: 1px solid var(--neutral-grey-tint120);
 }
 
 footer div:last-of-type > ul:last-of-type > li:last-of-type a:hover {
@@ -232,6 +243,11 @@ footer div:last-of-type > ul:last-of-type > li:last-of-type a:hover {
     color: var(--neutral-grey-tint120);
   }
 
+  footer .footer-links > div p a:has(.icon-linkedin) {
+    padding-right: 32px;
+    margin-top: -5px;
+  }
+
   footer .footer-links #contact-us + p > a {
     display: block;
     width: 35px;
@@ -244,6 +260,14 @@ footer div:last-of-type > ul:last-of-type > li:last-of-type a:hover {
     display: none;
   }
 
+  footer .footer-links .icon {
+    position: unset;
+  }
+
+  footer .footer-links .icon.icon-linkedin {
+    margin: 0 0 36px;
+  }
+
   footer .footer-links .icon-linkedin,
   footer .footer-links .icon-twitter {
     width: 35px;
@@ -255,18 +279,21 @@ footer div:last-of-type > ul:last-of-type > li:last-of-type a:hover {
   }
 
   footer .footer-links + ul {
-    max-width: 70vw;
+    max-width: 86vw;
     padding: 0;
     border-top: none;
     margin-top: 12px;
     margin-bottom: 12px;
+    margin-left: 32px;
   }
 
   footer .footer-links + ul li {
     color: var(--neutral-grey-tint120);
     flex: 1 1 fit-content;
     position: relative;
-    right: calc(15vw - 32px);
+
+    /* right: calc(15vw - 32px); */
+    font-size: var(--font-size-14);
   }
   }
 
@@ -417,14 +444,29 @@ footer div:last-of-type > ul:last-of-type > li:last-of-type a:hover {
     max-width: 80vw;
   }
 
+  footer .footer-links + ul > li, footer .footer-links + ul > li a {
+    color: var(--neutral-white);
+  }
+
+  footer .footer-links + ul > li a:hover {
+    border-bottom: 1px solid var(--neutral-white);
+  }
+  
+  footer .footer-links + ul > li .cookie-consent:hover {
+    border-bottom: 1px solid var(--neutral-white);
+  }
+
   footer .footer-links + ul > li:first-of-type {
-    flex: 1 1 480px;
+    flex: 1 1 400px;
     display: flex;
-    font-family: var(--sans-serif-font-regular);
     font-size: var(--font-size-16);
     letter-spacing: .01em;
     line-height: 160%;
     font-weight: 400;
     width: 100%;
   }
+
+  footer .footer-links .icon-linkedin, footer .footer-links .icon-twitter {
+    position: unset;
+  }
 }
diff --git a/blocks/image-flush-bottom/image-flush-bottom.css b/blocks/image-flush-bottom/image-flush-bottom.css
index 947e6bad..f62e28d9 100644
--- a/blocks/image-flush-bottom/image-flush-bottom.css
+++ b/blocks/image-flush-bottom/image-flush-bottom.css
@@ -17,6 +17,11 @@ main .section > .columns-wrapper + .image-flush-bottom-wrapper {
   width: calc(100% - var(--spacer-layout-04));
 }
 
+.image-flush-bottom > div {
+  display: flex;
+  justify-content: center;
+}
+
 .image-flush-bottom .only-picture {
   border-radius: 10px 10px 0 0;
   border-top: 1px solid var(--neutral-sand);
@@ -38,6 +43,10 @@ main .section > .columns-wrapper + .image-flush-bottom-wrapper {
   main .section > .columns-wrapper + .image-flush-bottom-wrapper {
     margin-top: var(--spacer-layout-06);
   }
+
+  .image-flush-bottom .only-picture {
+    max-width: 576px;
+  }
 }
 
 /* Desktop */
diff --git a/blocks/leadspace/leadspace.css b/blocks/leadspace/leadspace.css
index 62511633..f61e982d 100644
--- a/blocks/leadspace/leadspace.css
+++ b/blocks/leadspace/leadspace.css
@@ -60,6 +60,7 @@ main .leadspace-container > div:last-child { /* needs this specificity */
 }
 
 .section.leadspace-container {
+  position: relative;
   background: var(--neutral-bone);
   padding: 0;
   overflow-x: clip;
@@ -216,11 +217,7 @@ main div.leadspace-wrapper {
 
 .leadspace.brand-logo .button-group .button-container a {
   font-weight: var(--font-weight-regular);
-  height: unset;
-}
-
-.leadspace.brand-logo .button-group .button-container a.tertiary {
-  margin-left: var(--spacer-element-05);
+  height: var(--spacer-element-10);
 }
 
 .leadspace.brand-logo .button-group .button-container:nth-child(3){
@@ -640,6 +637,10 @@ main div.leadspace-wrapper {
     letter-spacing: var(--letter-spacing-001-em);
   }
 
+  .leadspace.brand-logo .button-group .button-container a.tertiary {
+    margin-left: var(--spacer-element-05);
+  }
+
   .leadspace.video .video-wrapper {
     clip-path: circle(60% at 105% 42%);
     margin-top: 0;
diff --git a/blocks/stat/stat.css b/blocks/stat/stat.css
index 18547c18..c8e02788 100644
--- a/blocks/stat/stat.css
+++ b/blocks/stat/stat.css
@@ -88,6 +88,13 @@ div.stat-container .stat::after {
     padding-top: var(--spacer-element-08);
 }
 
+/* Remove Gray bar If we don't have the bottom elements */
+div.stat-container .stat:last-child::after {
+    border-top: none;
+    padding-top: 0;
+    height: 0;
+}
+
 /* Tablet (and larger) styles */
 @media (min-width: 768px) {
     div.stat-container .stat {