Curam missouri microsite page fixes. (#353)

* Curam missouri microsite page fixes. * Webkit lint fix. * Curam microsite updated css. * Curam microsite latest fixes. * Solution header changes. * Curam missouri microsite pending changes. --------- Co-authored-by: keith-kaplan <[email protected]>
hlxsites · Nov 1, 2023 · 5e68c62 · 5e68c62
1 parent 4718185
commit 5e68c62
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 15 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,6 +1,7 @@
 {
   "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
   "rules": {
-		"selector-class-pattern": null
+		"selector-class-pattern": null,
+    "property-no-vendor-prefix": null
 	}
 }
diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
@@ -325,10 +325,6 @@ main .section.stat-container.carousel-container div.carousel-wrapper {
         padding: var(--spacer-layout-06) 0 var(--spacer-layout-06);
     }
 
-    main .section div.carousel-wrapper {
-        padding-top: var(--spacer-layout-07);
-    }
-
     .section.carousel-container .default-content-wrapper {
         padding-top: 0;
         padding-bottom: var(--spacer-layout-07);

diff --git a/blocks/content-intro/content-intro.css b/blocks/content-intro/content-intro.css
@@ -19,6 +19,10 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe
   line-height: 160%;
 }
 
+.content-intro .content-intro__col-1 h1 {
+  margin: unset;
+}
+
 .content-intro .content-intro__col-2 blockquote {
   margin: var(--spacer-element-05) 0 0;
 }
@@ -106,10 +110,16 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe
 }
 
 .content-intro-stat .content-intro .content-intro__col-2 h2 {
+  width: 150px;
   font-size: var(--font-size-96);
   margin-top: 0;
   margin-bottom: var(--spacer-element-05);
   line-height: 120%;
+  background: var(--gradient-vertical);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
 }
 
 .content-intro-stat .content-intro .content-intro__col-2 p {
@@ -176,6 +186,11 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe
     flex-shrink: 0;
     gap: var(--gap-120);
     max-width: 1128px;
+    padding-bottom: var(--spacer-element-10);
+  }
+
+  .content-intro .content-intro__col-1 h2#explore-our-platform {
+    font-size: 64px;
   }
 
   .content-intro .content-intro__inner h2 + p {
@@ -231,5 +246,6 @@ main .section.content-intro-container > .content-intro-wrapper + [class*="wrappe
 
   .content-intro-stat .content-intro .content-intro__col-2 h2 {
     font-size: var(--font-size-128);
+    width: 195px;
   }
 }
diff --git a/blocks/image-flush-bottom/image-flush-bottom.css b/blocks/image-flush-bottom/image-flush-bottom.css
@@ -7,7 +7,7 @@ main .section.image-flush-bottom-container > .image-flush-bottom-wrapper {
 }
 
 main .section > .columns-wrapper + .image-flush-bottom-wrapper {
-  margin-top: var(--spacer-layout-06);
+  margin-top: var(--spacer-layout-04);
 }
 
 /* Block - Image Flush Bottom */
@@ -34,6 +34,10 @@ main .section > .columns-wrapper + .image-flush-bottom-wrapper {
   .image-flush-bottom {
     width: calc(100% - 72px);
   }
+
+  main .section > .columns-wrapper + .image-flush-bottom-wrapper {
+    margin-top: var(--spacer-layout-06);
+  }
 }
 
 /* Desktop */

diff --git a/blocks/linkable-cards/linkable-cards.css b/blocks/linkable-cards/linkable-cards.css
@@ -62,7 +62,6 @@ main .section > .linkable-cards-wrapper:last-child {
   border-style: solid;
   border-color: var(--primary-purple);
   border-radius: 50%;
-  background-image: var(--gradient-to-right-white);
   background-position: 0 0;
   background-size: 200% auto;
   transition: all .3s ease-in;
@@ -105,7 +104,6 @@ main .section > .linkable-cards-wrapper:last-child {
 
 .section[data-theme] .linkable-cards .card span.icon {
   border-color: var(--theme-button-border);
-  background-image: var(--theme-button-bg);
 }
 
 .section[data-theme] .linkable-cards .card a:hover span.icon {

diff --git a/blocks/solution-header/solution-header.css b/blocks/solution-header/solution-header.css
@@ -2,7 +2,6 @@
 .solution-header-wrapper {
   opacity: 0;
   position: fixed;
-  border-bottom: 1px solid var(--neutral-sand);
   width: 100%;
   height: 140px;
   background-color: var(--neutral-bone);
@@ -62,6 +61,37 @@
   visibility: hidden;
 }
 
+.solution-header-wrapper .solution-header .gradient-left {
+  position: absolute;
+  left: 0;
+  top: 65px;
+  width: var(--spacer-element-09);
+  height: 40px;
+  background: linear-gradient(90deg, #FAF8F6 0%, #faf8f600 50%);
+}
+
+.solution-header-wrapper.is-sticky .solution-header .gradient-left {
+  height: 50px;
+  top: 0;
+  left: 88px;
+  background: linear-gradient(90deg, #20201F 0%, #20201f00 50%);
+}
+
+.solution-header-wrapper .solution-header .gradient-right {
+  position: absolute;
+  right: 0;
+  top: 65px;
+  width: var(--spacer-element-09);
+  height: 40px;
+  background: linear-gradient(270deg, #FAF8F6 0%, #faf8f600 50%);
+}
+
+.solution-header-wrapper.is-sticky .solution-header .gradient-right {
+  height: 50px;
+  top: 0;
+  background: linear-gradient(270deg, #20201F 0%, #20201f00 50%);
+}
+
 .solution-header ul {
   display: flex;
   align-items: flex-end;
@@ -74,11 +104,15 @@
   font-family: var(--sans-serif-font-medium);
   list-style: none;
   height: 100%;
+  padding-left: var(--spacer-element-05);
+}
+
+.solution-header ul li:first-child {
   padding-left: var(--spacer-element-07);
 }
 
 .solution-header ul li:last-child {
-  padding-right: var(--spacer-element-07);
+  padding-right: var(--spacer-element-05);
 }
 
 .solution-header ul li a {
@@ -126,23 +160,22 @@ body.microsites.header-visible main {
 
 .solution-header-wrapper.is-sticky .solution-header .icon {
   display: block;
-  width: var(--spacer-layout-03);
+  width: 56px;
   height: var(--spacer-layout-03);
-  clip-path: circle(50% at 50% 50%);
+  border-right: 1px solid var(--neutral-grey-tint140);
 }
 
 .solution-header-wrapper.is-sticky .solution-header .icon svg {
   height: var(--spacer-layout-03);
 }
 
 .solution-header-wrapper.is-sticky .solution-header .solution-header__col-1 {
-  margin: var(--spacer-element-05) var(--spacer-element-07);
+  margin: var(--spacer-element-05) var(--spacer-element-01) var(--spacer-element-05) var(--spacer-element-08);
 }
 
 .solution-header-wrapper.is-sticky .solution-header .solution-header__col-2 {
   border-color: transparent;
   margin: 0;
-  border-left: 1px solid var(--neutral-grey-tint140);
 }
 
 .solution-header-wrapper.is-sticky .solution-header ul li a {
@@ -157,6 +190,34 @@ body.microsites.header-visible main {
     justify-content: center;
   }
 
+  .solution-header-wrapper .solution-header .gradient-left {
+    display: none;
+  }
+
+  .solution-header-wrapper.is-sticky .solution-header .gradient-left {
+    display: none;
+  }
+
+  .solution-header-wrapper .solution-header .gradient-right {
+    display: none;
+  }
+
+  .solution-header-wrapper.is-sticky .solution-header .gradient-right {
+    display: none;
+  }
+
+  .solution-header ul li:first-child {
+    padding-left: unset;
+  }
+
+  .solution-header-wrapper.is-sticky .solution-header .icon {
+    width: 68px;
+  }
+
+  .solution-header-wrapper.is-sticky .solution-header .icon svg {
+    width: 106px;
+  }
+
   .solution-header .solution-header__inner .solution-header__col-1 {
     margin: var(--spacer-element-07) var(--spacer-element-08);
   }
@@ -246,6 +307,7 @@ body.microsites.header-visible main {
   }
 
   .solution-header-wrapper {
+    border-bottom: 1px solid var(--neutral-sand);
     height: var(--nav-height-desktop);
   }
 
@@ -279,9 +341,11 @@ body.microsites.header-visible main {
     width: var(--spacer-element-09);
     height: var(--spacer-element-09);
     clip-path: circle(50% at 50% 50%);
+    border: unset;
   }
 
   .solution-header-wrapper.is-sticky .solution-header .icon svg {
     height: var(--spacer-element-09);
+    width: unset;
   }
 }
diff --git a/blocks/solution-header/solution-header.js b/blocks/solution-header/solution-header.js
@@ -1,3 +1,5 @@
+import { createTag } from '../../scripts/scripts.js';
+
 export default function decorate(block) {
   const blockName = block.getAttribute('data-block-name');
   if (!blockName) {
@@ -77,7 +79,7 @@ export default function decorate(block) {
   const observerOptions = {
     root: null,
     rootMargin: '0px',
-    threshold: 0.5, // Trigger when 50% of the element is in the viewport
+    threshold: 0.2, // Trigger when 50% of the element is in the viewport
   };
 
   // Create Intersection Observer callback function
@@ -124,4 +126,31 @@ export default function decorate(block) {
       }
     });
   });
+
+  const navbar = document.querySelector('.solution-header__col-2');
+  window.addEventListener('scroll', () => {
+    // Find the selected navigation item
+    const selectedNavItem = navbar.querySelector('a.active');
+
+    // Scroll to the selected navigation item if it's not fully visible
+    if (selectedNavItem) {
+      const navbarRect = navbar.getBoundingClientRect();
+      const selectedItemRect = selectedNavItem.getBoundingClientRect();
+      if (selectedItemRect.right > navbarRect.right) {
+      // Scroll to the right to make the selected item fully visible
+        navbar.scrollLeft += (selectedItemRect.right - navbarRect.right) + 20;
+      } else if (selectedItemRect.left < navbarRect.left) {
+      // Scroll to the left to make the selected item fully visible
+        navbar.scrollLeft -= (navbarRect.left - selectedItemRect.left) + 20;
+      }
+    }
+  });
+
+  // Create new div element to inject
+  const gradientLeft = createTag('div', { class: 'gradient-left' });
+  const gradientRight = createTag('div', { class: 'gradient-right' });
+
+  // Insert the new div elements before and after the target div
+  navbar.insertBefore(gradientLeft, navbar.firstChild);
+  navbar.appendChild(gradientRight);
 }