Merge branch 'main' into 239-sidekickupgrade

.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
 	}
 }

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);

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;
   }
 }

blocks/iframe/iframe.css

@@ -0,0 +1,24 @@
+.section.iframe-container .iframe-wrapper {
+  padding-bottom: 0;
+  width: auto;
+  margin: 0;
+  max-width: unset;
+  padding-top: 90px;
+}
+
+.section.iframe-container .iframe-wrapper .iframe iframe {
+  display: block;
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+  .section.iframe-container .iframe-wrapper {
+    padding-top: var(--spacer-layout-06);
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .section.iframe-container .iframe-wrapper {
+    padding-top: var(--spacer-layout-06);
+  }
+}

blocks/iframe/iframe.js

@@ -0,0 +1,21 @@
+import { createTag } from '../../scripts/scripts.js';
+
+export default function decorate(block) {
+  // Fetch the iframe link
+  const link = block.querySelector('a');
+  const path = link ? link.getAttribute('href') : '';
+
+  // Create the iframe tag
+  const iframe = createTag('iframe', { class: 'iframe-window', id: 'navattic-iframe' });
+  iframe.src = path;
+
+  // Set the height and width
+  iframe.width = '100%';
+  iframe.height = 1200;
+
+  // Remove the elements inside iframe block
+  block.innerHTML = '';
+
+  // Append iframe to block
+  block.appendChild(iframe);
+}

blocks/image-content-grid/image-content-grid.css

@@ -0,0 +1,196 @@
+main .image-content-grid-container {
+  width: 100%;
+}
+
+main .image-content-grid-container .main-image-content-grid-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.image-content-grid-container .image-content-grid-wrapper > p {
+  font-size: var(--font-size-11);
+  font-family: var(--sans-serif-font-medium);
+  line-height: var(--line-height-120); /* 16.8px */
+  letter-spacing: var(--letter-spacing-02-em);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.image-content-grid-container .image-content-grid-wrapper > h2 {
+  margin: unset;
+  margin-top: var(--spacer-element-08);
+  width: 85%;
+}
+
+.image-content-grid-container .default-content-wrapper {
+  display: none;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div p {
+  font-size: var(--font-size-16);
+  letter-spacing: var(--letter-spacing-001-em);
+  margin: var(--spacer-element-05) 0 var(--spacer-element-07) 0;
+  line-height: var(--line-height-160);
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div p span svg {
+  height: var(--spacer-layout-03);
+  width: auto;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div p:first-child {
+  margin: unset;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div {
+  width: 100%;
+  margin: 0 auto;
+  padding-top: var(--spacer-element-10);
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div h3 {
+  font-family: var(--sans-serif-font-medium);
+  font-size: var(--font-size-18);
+  line-height: var(--line-height-160);
+  letter-spacing: var(--letter-spacing-1);
+  margin: 0;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div .button-container {
+  margin: 0;
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div a {
+  display: inline-block;
+  text-decoration: none;
+  font-family: var(--sans-serif-font-medium);
+  font-size: var(--font-size-16);
+  letter-spacing: var(--letter-spacing-1);
+  height: var(--spacer-element-06);
+  border-bottom: var(--spacer-element-01) solid var(--primary-purple);
+  color: var(--primary-purple);
+}
+
+.image-content-grid-container .image-content-grid-wrapper .image-content-grid div a:hover {
+  background: var(--gradient-left-right);
+  background-clip: text;
+  -webkit-background-clip: text; /* stylelint-disable-line */
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  border-image-slice: 1;
+  border-image-source: var(--gradient-left-right);
+}
+
+@media only screen and (min-width: 768px) {
+  main .image-content-grid-container .main-image-content-grid-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    padding: var(--spacer-layout-06) 0;
+    align-items: flex-start;
+    gap: 84px;
+    flex-shrink: 0;
+    margin: 0 auto;
+    width: calc(100% - 72px);
+  }
+
+  .section.image-content-grid-container .image-content-grid-wrapper  {
+    padding-bottom: 0;
+  }
+
+  .image-content-grid-container .default-content-wrapper {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper > h2 {
+    margin: unset;
+    margin-top: var(--spacer-element-07);
+    margin-bottom: var(--spacer-element-10);
+    width: 100%;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:first-child {
+    padding-top: 0;
+  }
+
+  .main-image-content-grid-wrapper .default-content-wrapper > p > picture > img {
+    width: 163px;
+    border-bottom-right-radius: 163px;
+    border-top-right-radius: 163px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  main .image-content-grid-container .main-image-content-grid-wrapper {
+    width: var(--section-width-desktop);
+    padding: var(--spacer-layout-07) 0;
+    gap: var(--gap-120);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper > p {
+    font-size: var(--font-size-14);
+    letter-spacing: var(--letter-spacing-02-em);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div p {
+    max-width: 305px;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper > h2 {
+    margin: unset;
+    margin-top: var(--spacer-element-08);
+    margin-bottom: var(--spacer-element-05);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto auto auto;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:first-child {
+    padding-top: var(--spacer-layout-04);
+  }
+
+  .main-image-content-grid-wrapper .default-content-wrapper > p > picture > img {
+    width: 265px;
+    border-bottom-right-radius: 265px;
+    border-top-right-radius: 265px;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div h3 {
+    font-size: var(--font-size-21);
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(odd) > *, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(odd) > p {
+    margin-right: 39px;
+  }
+
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(even) > *, .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(even) > p {
+    margin-left: 39px;
+  }
+
+  /* no bottom padding for last row of cards */
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-last-child(2), .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:last-child {
+    padding-bottom: 0;
+  }
+
+  /* no border on last row of cards */
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(2n + 1):nth-last-child(-n + 2),
+  .image-content-grid-container .image-content-grid-wrapper .image-content-grid div:nth-child(2n + 1):nth-child(2n + 1):nth-last-child(-n + 2) ~ .image-content-grid-container .image-content-grid-wrapper .image-content-grid div {
+    border-bottom: none;
+  }
+}

blocks/image-content-grid/image-content-grid.js

@@ -0,0 +1,54 @@
+/* eslint-disable max-len */
+export default async function decorate(block) {
+  // Remove first level of nesting
+  const childDivs = block.querySelectorAll('.image-content-grid > div');
+
+  childDivs.forEach((childDiv) => {
+    while (childDiv.firstChild) {
+      block.appendChild(childDiv.firstChild);
+    }
+    childDiv.remove();
+  });
+
+  // Function to find the ancestor with the class .image-content-grid-container
+  function findImageContentGridContainer(element) {
+    let parent = element.parentElement;
+
+    while (parent) {
+      if (parent.classList.contains('image-content-grid-container')) {
+        return parent; // Return the element with the desired class
+      }
+      parent = parent.parentElement; // Move up to the next parent element
+    }
+
+    return null; // Return null if the ancestor isn't found
+  }
+
+  const imageContentGridContainer = findImageContentGridContainer(block);
+
+  // Create a new div element
+  const newWrapper = document.createElement('div');
+  newWrapper.classList.add('main-image-content-grid-wrapper');
+
+  // Iterate through the existing children and move them into the new div
+  while (imageContentGridContainer.firstChild) {
+    newWrapper.appendChild(imageContentGridContainer.firstChild);
+  }
+
+  // Append the new div back to the solution-list-container
+  imageContentGridContainer.appendChild(newWrapper);
+
+  // Get the parent element with class "default-content-wrapper"
+  const defaultContentWrapper = imageContentGridContainer.querySelector('.default-content-wrapper');
+
+  // Get the first p element among all p elements inside the default content wrapper
+  const firstPTag = defaultContentWrapper.querySelector('p');
+
+  // Get the h2 tag from default content wrapper
+  const heading = defaultContentWrapper.querySelector('h2');
+
+  // Select the image-content-grid-wrapper element
+  const imageContentGridWrapper = imageContentGridContainer.querySelector('.image-content-grid-wrapper');
+  imageContentGridWrapper.insertBefore(heading, imageContentGridWrapper.firstChild);
+  imageContentGridWrapper.insertBefore(firstPTag, imageContentGridWrapper.firstChild);
+}

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 */