Merge branch 'develop'

blocks/v2-banner/v2-banner.js

@@ -31,6 +31,8 @@ export default async function decorate(block) {
     const video = createVideo(link.getAttribute('href'), `${blockName}__video`, {
       muted: true,
       autoplay: true,
+      loop: true,
+      playsinline: true,
     });
     block.prepend(video);
     link.remove();

blocks/v2-content-card/v2-content-card.css

@@ -165,6 +165,7 @@
 
   .v2-content-card--images-grid .v2-content-card__item:nth-child(5) .v2-content-card__media {
     aspect-ratio: 2/1;
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
   }
 
   /* Specific styles for images-grid-masonry variant */

blocks/v2-content-card/v2-content-card.js

@@ -54,7 +54,8 @@ export default async function decorate(block) {
       const newVideo = createVideo(videoLinks[0].getAttribute('href'), `${blockName}__media`, {
         muted: true,
         autoplay: true,
-        loop: 'loop',
+        loop: true,
+        playsinline: true,
       });
       section.prepend(newVideo);
       videoLinks[0].remove();

blocks/v2-hero/v2-hero.css

@@ -36,8 +36,18 @@
   height: calc(100vh - (var(--nav-height) + var(--inpage-navigation-height) - 2px));
 }
 
+@supports (height: 1svh) {
+  .v2-hero {
+    height: calc(100svh - var(--nav-height));
+  }
+
+  .v2-inpage-navigation-wrapper + .v2-hero-container .v2-hero {
+    height: calc(100svh - (var(--nav-height) + var(--inpage-navigation-height) - 2px));
+  }
+}
+
 .section.v2-hero-container {
-  padding-bottom: 0;
+  padding-bottom: 40px;
 }
 
 .v2-hero__image,
@@ -172,6 +182,10 @@
     --v2-hero-padding: 50px;
   }
 
+  .section.v2-hero-container {
+    padding-bottom: 56px;
+  }
+
   .v2-hero__title {
     font-size: 92px;
     line-height: 100%;

blocks/v2-inpage-navigation/v2-inpage-navigation.css

@@ -11,7 +11,7 @@
   top: var(--nav-height);
   width: 100%;
   z-index: var(--z-index-inpage-nav);
-  transition: transform 300ms ease-in-out;
+  transition: transform var(--duration-medium) ease-in-out;
 }
 
 /* As the first section in main doesn't need to have padding-top
@@ -23,7 +23,7 @@ then we change it for the next section item in main */
 
 .v2-inpage-navigation--open .v2-inpage-navigation__items-container {
   transform: translateY(-100%);
-  transition: transform 450ms var(--easing-entrance);
+  transition: transform var(--duration-large) var(--easing-entrance);
 }
 
 .v2-inpage-navigation--hidden.v2-inpage-navigation-wrapper {

blocks/v2-masonry-grid/v2-masonry-grid.js

@@ -33,7 +33,8 @@ export default function decorate(block) {
           const video = createVideo(videos[0].getAttribute('href'), `${blockName}__video`, {
             muted: true,
             autoplay: true,
-            loop: 'loop',
+            loop: true,
+            playsinline: true,
           });
           li.prepend(video);
           videos[0].remove();

blocks/v2-stories-carousel/v2-stories-carousel.css

@@ -72,6 +72,7 @@ main .section.v2-stories-carousel-container .v2-stories-carousel-wrapper {
   text-align: center;
   text-wrap: balance;
   transition: opacity var(--duration-small) var(--easing-exit);
+  will-change: opacity;
 }
 
 .v2-stories-carousel-item.active .v2-stories-carousel-text {

blocks/v2-stories-carousel/v2-stories-carousel.js

@@ -27,29 +27,38 @@ const listenScroll = (carousel) => {
   });
 };
 
+const getScrollOffset = (ulItems) => {
+  const first = ulItems.firstElementChild;
+  const second = first.nextElementSibling;
+  return second.getBoundingClientRect().x - first.getBoundingClientRect().x;
+};
+
+const scrollToIndex = (ulItems, index) => {
+  const scrollOffset = getScrollOffset(ulItems);
+  ulItems.scrollTo({
+    left: index * scrollOffset,
+    behavior: 'smooth',
+  });
+};
+
 const createArrowControls = (ulItems) => {
-  function scroll(direction) {
+  function navigate(direction) {
     const activeItem = ulItems.querySelector('.v2-stories-carousel-item.active');
     let index = [...activeItem.parentNode.children].indexOf(activeItem);
-    const first = ulItems.firstElementChild;
-    const second = first.nextElementSibling;
-    const scrollOffset = second.getBoundingClientRect().x - first.getBoundingClientRect().x;
+
     if (direction === 'left') {
       index -= 1;
-      if (index === -1) {
+      if (index === -1) { // Go to the last item if at the start
         index = ulItems.childElementCount;
       }
     } else {
       index += 1;
       if (index > ulItems.childElementCount - 1) {
-        index = 0;
+        index = 0; // Go to the first item if at the end
       }
     }
 
-    ulItems.scrollTo({
-      left: index * scrollOffset,
-      behavior: 'smooth',
-    });
+    scrollToIndex(ulItems, index);
   }
 
   const arrowControls = createElement('ul', { classes: ['v2-stories-carousel-arrowcontrols'] });
@@ -72,8 +81,8 @@ const createArrowControls = (ulItems) => {
   arrowControls.append(...arrows.children);
   ulItems.insertAdjacentElement('beforebegin', arrowControls);
   const [prevButton, nextButton] = arrowControls.querySelectorAll(':scope button');
-  prevButton.addEventListener('click', () => scroll('left'));
-  nextButton.addEventListener('click', () => scroll('right'));
+  prevButton.addEventListener('click', () => navigate('left'));
+  nextButton.addEventListener('click', () => navigate('right'));
   return arrowControls;
 };
 
@@ -163,4 +172,11 @@ export default async function decorate(block) {
 
   createArrowControls(ulItems);
   listenScroll(ulItems);
+  requestAnimationFrame(() => {
+    setTimeout(() => {
+      if (ulItems) {
+        scrollToIndex(ulItems, 1); // Scroll to the second item
+      }
+    });
+  });
 }

blocks/v2-truck-lineup/v2-truck-lineup.css

@@ -17,6 +17,11 @@
   }
 }
 
+.section + .v2-truck-lineup-container {
+  /* remove 40px section padding, add 16px margin  */
+  margin-top: -24px;
+}
+
 /* Full width block */
 main .section.v2-truck-lineup-container .v2-truck-lineup-wrapper {
   margin: 0;
@@ -111,7 +116,7 @@ main .section.v2-truck-lineup-container .v2-truck-lineup-wrapper {
 
 .v2-truck-lineup__text {
   margin: 0 auto;
-  max-width: 400px;
+  max-width: 506px;
   text-wrap: balance;
 }
 
@@ -128,11 +133,15 @@ p.v2-truck-lineup__description {
 }
 
 .v2-truck-lineup__buttons-container {
-  margin-top: 32px;
+  margin-top: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
 }
 
 .v2-truck-lineup__buttons-container .button-container {
-  margin: 10px 0;
+  margin: 16px 0 0;
 }
 
 /* Navigation */
@@ -262,17 +271,13 @@ ul.v2-truck-lineup__navigation {
 }
 
 @media screen and (min-width: 744px) {
-  .v2-truck-lineup__arrow-controls {
-    display: block;
+  .section + .v2-truck-lineup-container {
+    /* remove 56px section padding, add 16px margin  */
+    margin-top: -40px;
   }
 
-  .v2-truck-lineup__buttons-container {
-    display: flex;
-    justify-content: center;
-  }
-
-  .v2-truck-lineup__buttons-container .button-container {
-    margin-left: 16px;
+  .v2-truck-lineup__arrow-controls {
+    display: block;
   }
 }
 
@@ -281,28 +286,41 @@ ul.v2-truck-lineup__navigation {
     --truck-lineup-img-width: 60%;
   }
 
+  .section + .v2-truck-lineup-container {
+    /* remove 136px section padding, add 24px margin  */
+    margin-top: -112px;
+  }
+
   .v2-truck-lineup__image-item img {
     aspect-ratio: 16 / 9;
   }
 
   .v2-truck-lineup__content {
-    max-width: 1000px;
+    max-width: var(--wrapper-width);
   }
 
   .v2-truck-lineup__content .default-content-wrapper {
     align-items: flex-start;
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 1fr 567px 80px 430px 1fr;
   }
 
   .v2-truck-lineup__text {
-    flex-basis: 60%;
+    width: 567px;
+    max-width: none;
     margin: 0;
     text-align: left;
+    text-wrap: wrap;
+    grid-column: 2;
   }
 
-  .v2-truck-lineup__buttons-container {
-    flex-direction: row;
+  .v2-truck-lineup__buttons-container,
+  .v2-truck-lineup__buttons-container .button-container {
     margin-top: 0;
   }
+
+  .v2-truck-lineup__buttons-container {
+    justify-content: start;
+    grid-column: 4;
+  }
 }

blocks/v2-truck-lineup/v2-truck-lineup.js

@@ -92,10 +92,12 @@ const updateActiveItem = (index) => {
   // Update description position
   const descriptionWidth = descriptions.offsetWidth;
 
-  descriptions.scrollTo({
-    left: descriptionWidth * index,
-    behavior: 'smooth',
-  });
+  setTimeout(() => {
+    descriptions.scrollTo({
+      left: descriptionWidth * index,
+      behavior: 'smooth',
+    });
+  }, 50);
 };
 
 const listenScroll = (carousel) => {
@@ -122,6 +124,12 @@ const listenScroll = (carousel) => {
     });
 
     elements.forEach((el) => io.observe(el));
+
+    // force to go to the first item on load
+    carousel.scrollTo({
+      left: 0,
+      behavior: 'instant',
+    });
   });
 };
 

blocks/v2-video/v2-video.js

@@ -47,7 +47,8 @@ export default async function decorate(block) {
   const video = createVideo(videoLink.getAttribute('href'), `${blockClass}__video`, {
     muted: true,
     autoplay: true,
-    loop: 'loop',
+    loop: true,
+    playsinline: true,
   });
 
   contentWrapper.classList.add(`${blockClass}__content-wrapper`);

styles/styles.css

@@ -1095,17 +1095,17 @@ main.blue-contract .section.section-with-title p {
   display: inline-flex;
   font-family: var(--font-family-body);
   font-size: 14px;
-  gap: 10px;
+  gap: 8px;
   justify-content: center;
   letter-spacing: 1.25px;
-  line-height: 100%;
+  line-height: 1.4;
   max-width: 21.5em;
   height: 48px;
-  padding: 0 36px;
+  padding: 0 32px;
   text-align: left;
   text-transform: uppercase;
   transition: all var(--duration-small) var(--easing-standard);
-  white-space: wrap;
+  white-space: normal;
 }
 
 .redesign-v2 a.button.primary,