Merge branch 'develop' into 70-header-v2

blocks/v2-cards/v2-cards.css

@@ -1,12 +1,7 @@
-main .section.v2-cards-container .v2-cards-wrapper {
-  padding: 0;
-}
-
 .v2-cards {
   display: flex;
   flex-direction: column;
   gap: 24px;
-  padding: 16px;
   justify-content: center;
   max-width: var(--wrapper-width);
   margin: auto;
@@ -76,7 +71,6 @@ main .section.v2-cards-container .v2-cards-wrapper {
   .v2-cards {
     flex-flow: row wrap;
     gap: 16px;
-    padding: 0;
     justify-content: center;
   }
 

blocks/v2-columns/v2-columns.css

@@ -5,6 +5,7 @@
   width: 100%;
   justify-content: center;
   align-items: flex-start;
+  color: var(--c-primary-black);
 }
 
 .v2-columns__column--with-image,
@@ -33,11 +34,13 @@
   padding: 40px 0;
 }
 
-.v2-columns__column--with-text .v2-columns__pretitle {
-  font-family: var(--ff-accents-regular);
-  font-size: var(--accent-2-font-size);
-  line-height: var(--accent-2-line-height);
-  margin: 0;
+.v2-columns__heading {
+  word-wrap: break-word;
+}
+
+.v2-columns-container .default-content-wrapper h2,
+.v2-columns__heading.h2 {
+  font-family: var(--ff-headline-medium);
 }
 
 .v2-columns__column--with-text .v2-columns__heading {
@@ -49,20 +52,21 @@
   margin: 0 0 32px;
 }
 
+.v2-columns__column--with-text .v2-columns__body a {
+  color: var(--c-primary-black);
+  border-bottom: 1px solid var(--c-accent-red);
+  text-decoration: none;
+}
+
 .v2-columns__column--with-text a.button {
   width: fit-content;
-  margin: 0;
+  margin-top: 12px;
 }
 
 .v2-columns__column--with-text a.button:not(a.button:first-of-type) {
   margin: 5px 0 0;
 }
 
-.v2-columns--info {
-  padding: 24px 16px;
-  background: var(--c-primary-white);
-}
-
 .v2-columns--info .v2-columns__column {
   gap: 8px;
 }
@@ -119,22 +123,19 @@
     order: unset;
   }
 
-  .v2-columns__column--with-text {
+  .v2-columns:not(.v2-columns--info) .v2-columns__column--with-text {
     padding: 0 56px;
   }
 
-  .v2-columns__column--with-text .v2-columns__heading {
-    margin: 0;
+  .v2-columns:not(.v2-columns--info) .v2-columns__column--with-text .v2-columns__heading {
+    margin: 24px 0 12px;
+    font-size: var(--headline-1-font-size);
   }
 
   .v2-columns__column--with-text .v2-columns__body {
     margin: 0 0 14px;
   }
 
-  .v2-columns--info {
-    padding: 20px 40px;
-  }
-
   .v2-columns--info .v2-columns__row {
     justify-content: space-between;
     align-items: flex-start;
@@ -154,3 +155,10 @@
     width: 100%;
   }
 }
+
+@media (min-width: 1200px) {
+  .v2-columns--info {
+    padding: 20px 40px;
+    background: var(--c-primary-white);
+  }
+}

blocks/v2-columns/v2-columns.js

@@ -35,7 +35,7 @@ export default async function decorate(block) {
     });
     bodyElmts.forEach((e) => e.classList.add(`${blockName}__body`));
 
-    const buttons = [...col.querySelectorAll('a')];
+    const buttons = [...col.querySelectorAll('.button-container a')];
     buttons.forEach((btn) => {
       btn.classList.add('button', 'button--large', 'button--primary');
 
@@ -59,7 +59,7 @@ export default async function decorate(block) {
     const pretitleText = prevEl && !prevEl.classList.contains('icon') && prevEl.textContent;
 
     if (pretitleText) {
-      const pretitle = createElement('span', { classes: `${blockName}__pretitle` });
+      const pretitle = createElement('span', { classes: 'pretitle' });
       pretitle.textContent = pretitleText;
       prevEl.replaceWith(pretitle);
     }
@@ -89,7 +89,7 @@ export default async function decorate(block) {
       heading.replaceWith(newHeadingEl);
     });
 
-    const buttons = [...block.querySelectorAll('a')];
+    const buttons = [...block.querySelectorAll('.button-container a')];
     buttons.forEach((button) => {
       button.classList.add('standalone-link', `${blockName}__button`);
       button.classList.remove('button', 'button--primary', 'button--large');

blocks/v2-hero/v2-hero.css

@@ -24,7 +24,8 @@
   padding: 40px 16px;
   display: flex;
   flex-direction: column;
-  max-width: 1040px;
+  max-width: var(--wrapper-width);
+  width: 100%;
 }
 
 .v2-hero__heading {
@@ -60,8 +61,6 @@
 
 @media (min-width: 1200px) {
   .v2-hero__content {
-    max-width: 1040px;
-    width: 1040px;
     margin: 0 auto;
     padding: 0 0 78px;
   }
@@ -92,7 +91,6 @@
   height: 68px;
   padding: 0;
   max-width: unset;
-  width: 100%;
 
   @media (min-width: 1200px) {
     min-height: 160px;

blocks/v2-solutions/v2-solutions.css

@@ -0,0 +1,74 @@
+.v2-solutions-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.v2-solutions-wrapper {
+  flex-basis: 33.33%;
+}
+
+.v2-solutions-container.v2-cards-container {
+  margin: auto;
+}
+
+.v2-solutions-container.v2-cards-container .v2-cards-wrapper {
+  flex-basis: 66.66%;
+}
+
+.v2-solutions-container.v2-cards-container .v2-cards__card-item {
+  width: 100%;
+}
+
+.v2-solutions h1 {
+  font: normal var(--headline-1-font-size)/1.15 var(--ff-headline-medium);
+  margin-top: 12px;
+}
+
+.v2-solutions h1 + p {
+  font: normal var(--body-font-size-s)/1.5 var(--ff-body);
+}
+
+@media (min-width: 744px) {
+  .v2-solutions-container {
+    flex-direction: row;
+  }
+
+  .v2-solutions-container.v2-cards-container {
+    margin: auto;
+  }
+
+  .v2-solutions-container.v2-cards-container .v2-cards-wrapper {
+    padding-left: 0;
+  }
+
+  .v2-solutions-container.v2-cards-container .v2-cards {
+    justify-content: flex-end;
+  }
+
+  .v2-solutions-container.v2-cards-container .v2-cards__card-item {
+    max-width: calc(50% - 8px);
+  }
+}
+
+@media (min-width: 1200px) {
+  .v2-solutions {
+    padding-right: 16px;
+  }
+
+  .v2-solutions-container.v2-cards-container {
+    display: grid;
+    grid-template-columns: 1fr 320px 720px 1fr;
+  }
+
+  .v2-solutions-container.v2-cards-container .v2-solutions-wrapper {
+    grid-column: 2;
+  }
+
+  .v2-solutions-container.v2-cards-container .v2-cards__card-item {
+    max-width: calc(50% - 24px);
+  }
+
+  .v2-solutions h1 {
+    font-size: var(--headline-1-font-size);
+  }
+}

blocks/v2-solutions/v2-solutions.js

@@ -0,0 +1,7 @@
+import { adjustPretitle, unwrapDivs } from '../../scripts/common.js';
+
+export default function decorate(block) {
+  const content = block.querySelector(':scope > div > div');
+  adjustPretitle(content);
+  unwrapDivs(block);
+}

blocks/v2-tabbed-carousel/v2-tabbed-carousel.css

@@ -16,6 +16,10 @@
   background-color: var(--bg-color);
 }
 
+main .section.v2-tabbed-carousel-container {
+  padding: 0;
+}
+
 .v2-tabbed-carousel__items {
   align-items: flex-end;
   display: flex;

blocks/v2-testimonial/v2-testimonial.css

@@ -1,38 +1,51 @@
 /* stylelint-disable selector-class-pattern */
 
+.v2-testimonial-wrapper {
+  --testimonial-padding: 90px;
+}
+
 .v2-testimonial {
   position: relative;
   display: flex;
   flex-direction: column;
+  margin: 0 auto;
 }
 
 .v2-testimonial__blockquote-column {
-  background-color: #2b2b2b;
+  background-color: var(--c-secondary-graphite);
   padding: 48px 16px;
   color: var(--c-primary-white);
   font: var(--body-2-font-size)/var(--body-2-line-height) var(--ff-body);
   letter-spacing: 0.3px;
-  padding-right: calc(100vw - 510px);
 }
 
 .v2-testimonial__blockquote-column strong {
   font-family: var(--ff-body-bold);
+  font-weight: normal;
 }
 
 .v2-testimonial__heading {
   color: var(--c-primary-white);
-  font: var(--headline-1-font-size)/var(--headline-1-line-height) var(--ff-headline-medium);
+  font: var(--headline-2-font-size)/var(--headline-2-line-height) var(--ff-headline-medium);
   letter-spacing: -0.64px;
   margin: 24px 0;
 }
 
 .v2-testimonial__blockquote {
   font: var(--testimonial-font-size)/var(--testimonial-line-height) var(--ff-testimonial);
-  letter-spacing: -0.36px;
+  letter-spacing: var(--testimonial-letter-spacing);
   margin: 40px 0;
   text-indent: 0;
 }
 
+@supports not (hanging-punctuation: first) {
+  .v2-testimonial__blockquote p::before {
+    display: inline-block;
+    width: 0.75rem;
+    margin-left: -0.75rem;
+  }
+}
+
 .v2-testimonial__image {
   width: 100%;
   display: flex;
@@ -64,6 +77,11 @@
   height: 32px;
 }
 
+.v2-testimonial__author strong {
+  font-family: var(--ff-body-bold);
+  font-weight: normal;
+}
+
 .v2-testimonial__video-link-wrapper {
   margin: 0;
   display: flex;
@@ -112,7 +130,9 @@
 
 @media (min-width: 1200px) {
   .v2-testimonial {
-    padding-bottom: 100px;
+    margin: 0 auto;
+    max-width: 1440px;
+    padding-bottom: 60px;
   }
 
   .v2-testimonial__image-row {
@@ -130,8 +150,13 @@
     z-index: 1;
   }
 
+  .v2-testimonial__blockquote-column > * {
+    max-width: 430px;
+    margin-left: auto;
+  }
+
   .v2-testimonial__blockquote-column {
-    padding: 54px 200px 34px 90px;
+    padding: 54px var(--testimonial-padding) 34px;
   }
 
   .v2-testimonial__video-section {
@@ -143,12 +168,21 @@
     width: calc(50% + 80px);
   }
 
+  .v2-testimonial--overlap .v2-testimonial__blockquote-column > * {
+    max-width: 510px;
+  }
+
   .v2-testimonial--media-left {
     display: flex;
     justify-content: flex-end;
     flex-direction: row;
   }
 
+  .v2-testimonial--media-left .v2-testimonial__blockquote-column > * {
+    margin-right: auto;
+    margin-left: unset;
+  }
+
   .v2-testimonial--media-left .v2-testimonial__image-row {
     left: 0;
     right: unset;

blocks/v2-testimonial/v2-testimonial.js

@@ -63,7 +63,15 @@ export default async function decorate(block) {
     });
 
     const blockquotes = [...col.querySelectorAll('blockquote')];
-    blockquotes.forEach((bq) => bq.classList.add(`${blockClass}__blockquote`));
+    blockquotes.forEach((bq) => {
+      const em = bq.querySelector('em');
+
+      if (em) {
+        em.outerHTML = em.innerHTML;
+      }
+
+      bq.classList.add(`${blockClass}__blockquote`);
+    });
 
     // recognizing the column with blockquotes
     blockquotes.forEach((bq) => {