[Release] Stage to Main

libs/blocks/aside/aside.css

@@ -997,7 +997,8 @@
   }
 
   .aside.split.media-top-tablet .split-image img,
-  .aside.split.media-bottom-tablet .split-image img {
+  .aside.split.media-bottom-tablet .split-image img,
+  .aside.split:is(.media-top-tablet, .media-bottom-tablet) .split-image video {
     position: relative;
     width: 100%;
     max-width: 100%;

libs/blocks/tabs/tabs.css

@@ -1,35 +1,50 @@
 :root {
   /* Tab Colors */
   --tabs-active-color: #1473e6;
-  --tabs-border-color: #d8d8d8;
+  --tabs-border-color: #909090;
   --tabs-border-hover-color: #acacac;
-  --tabs-text-color: #7e7e7e;
-  --tabs-active-text-color: #2C2C2C;
+  --tabs-text-color: #686868;
+  --tabs-active-text-color: #2c2c2c;
   --tabs-bg-color: #f1f1f1;
   --tabs-active-bg-color: #fff;
-  --tabs-list-bg-gradient: linear-gradient(rgb(255 255 255 / 0%) 60%, rgb(245 245 245 / 80%));
+  --tabs-list-bg-gradient: linear-gradient(
+    to bottom, 
+    rgba(136, 136, 136, 0) 0%,
+    rgba(136, 136, 136, 0) 60%,
+    rgba(136, 136, 136, 0.03) 80%,
+    rgba(136, 136, 136, 0.08) 100%
+  );
   --tabs-pill-bg-color: #e1e1e1;
   --tabs-pill-bg-color-hover: #dadada;
   --tabs-pill-bg-color-active: #c6c6c6;
+  --tabs-mobile-stacked-bg-color: #242424;
+  --tabs-mobile-stacked-text-color: #ffffff;
   --tabs-pill-text-color: #131313;
   --tabs-paddle-bs-color: #0000001a;
-  --tabs-radio-gray: #6D6D6D;
-  --tabs-radio-blue: #0265DC;
+  --tabs-radio-gray: #6d6d6d;
+  --tabs-radio-blue: #0265dc;
   --tabs-radio-bg: #fff;
   --tabs-radio-button-bg: #fdfdfd;
 }
 
 :root .dark {
-  --tabs-border-color: rgb(56 56 56);
-  --tabs-text-color: #cdcdcd;
+  --tabs-border-color: #909090;
+  --tabs-text-color: #b6b6b6;
   --tabs-active-text-color: #fff;
   --tabs-bg-color: #1a1a1a;
-  --tabs-active-bg-color: #111;
-  --tabs-list-bg-gradient: linear-gradient(rgb(0 0 0 / 0%) 60%, rgb(0 0 0 / 80%));
+  --tabs-active-bg-color: #1e1e1e;
+  --tabs-list-bg-gradient: linear-gradient(
+    rgba(0, 0, 0, 0%) 0%,
+    rgba(0, 0, 0, 0%) 60%,
+    rgba(0, 0, 0, 20%) 80%,
+    rgba(0, 0, 0, 40%) 100%
+  );
   --tabs-pill-bg-color: #555;
   --tabs-pill-bg-color-hover: #666;
   --tabs-pill-bg-color-active: #444;
   --tabs-pill-text-color: #fff;
+  --tabs-mobile-stacked-bg-color: #ffffff;
+  --tabs-mobile-stacked-text-color: #131313;
   --tabs-paddle-bs-color: #ffffff1a;
   --tabs-radio-gray: #d4d4d4;
   --tabs-radio-blue: #5eaaf7;
@@ -91,7 +106,6 @@
   display: flex;
   z-index: 2;
   margin: 0 var(--spacing-m);
-
   /* ScrollProps - If content exceeds height of container, overflow! */
   overflow: auto;
   overflow-y: hidden;
@@ -101,6 +115,9 @@
 
   /* default bg */
   background: var(--tabs-list-bg-gradient);
+  background-size: 100% 16px;
+  background-position: bottom;
+  background-repeat: no-repeat;
 }
 
 .tabs div[role="tablist"]::-webkit-scrollbar {
@@ -199,6 +216,10 @@
   align-items: center;
 }
 
+.tabs.quiet .paddle {
+  margin-top: 1px;
+}
+
 .tabs.radio div[role="tablist"],
 .tabs.radio div[role="tablist"] button,
 .tabs.radio .paddle {
@@ -236,6 +257,14 @@
   margin-inline-start: 24px;
 }
 
+.tabs.pill .tabList button {
+  border: none;
+}
+
+.tabs.quiet .tabList {
+  padding-bottom: 1px;
+}
+
 .tabs[class*='pill'] .tab-content {
   border-bottom: none;
 }
@@ -335,6 +364,9 @@
   cursor: default;
   box-shadow: none;
   background: var(--tabs-list-bg-gradient);
+  background-size: 100% 16px;
+  background-position: bottom;
+  background-repeat: no-repeat;
 }
 
 .tabs .paddle-left {
@@ -498,6 +530,10 @@
     width: auto;
   }
 
+  .tabs .tabList {
+    min-height: 62px;
+  }
+
   .tabs div[role="tablist"] button {
     padding: 24px 32px 18px;
     line-height: 18px;
@@ -522,6 +558,10 @@
     margin: 0;
   }
 
+  .tabs.stacked-mobile .paddle {
+    display: none;
+  }
+
   .tabs.stacked-mobile div[role="tablist"] .tab-list-container {
     flex-direction: column;
     margin: 30px auto;
@@ -543,11 +583,8 @@
   }
 
   .tabs.stacked-mobile div[role="tablist"] button[aria-selected="true"] {
-    background-color: #dadada;
-  }
-
-  .tabs.stacked-mobile.dark div[role="tablist"] button[aria-selected="true"] {
-    background-color: #393939;
+    background-color: var(--tabs-mobile-stacked-bg-color);
+    color: var(--tabs-mobile-stacked-text-color);
   }
 
   .tabs.stacked-mobile.center div[role="tablist"] .tab-list-container {

libs/blocks/video/video.css

@@ -157,7 +157,8 @@ video {
 }
 
 @media (min-width: 600px) and (max-width: 1199px) {
-  .hero-marquee.asset-left .video-container.video-holder .pause-play-wrapper {
+  .hero-marquee.asset-left .video-container.video-holder .pause-play-wrapper, 
+  .aside:is(.media-top-tablet, .media-bottom-tablet) .video-container.video-holder .pause-play-wrapper {
     left: auto;
     right: 2%;
   }

libs/utils/utils.js

@@ -1176,6 +1176,8 @@ async function checkForPageMods() {
 }
 
 async function loadPostLCP(config) {
+  const { default: loadFavIcon } = await import('./favicon.js');
+  loadFavIcon(createTag, getConfig(), getMetadata);
   await decoratePlaceholders(document.body.querySelector('header'), config);
   const sk = document.querySelector('aem-sidekick, helix-sidekick');
   if (sk) import('./sidekick-decorate.js').then((mod) => { mod.default(sk); });
@@ -1323,8 +1325,6 @@ async function documentPostSectionLoading(config) {
     addRichResults(richResults, { createTag, getMetadata });
   }
   loadFooter();
-  const { default: loadFavIcon } = await import('./favicon.js');
-  loadFavIcon(createTag, getConfig(), getMetadata);
   if (config.experiment?.selectedVariant?.scripts?.length) {
     config.experiment.selectedVariant.scripts.forEach((script) => loadScript(script));
   }