sync projects

express/blocks/ax-columns/ax-columns.css

@@ -31,7 +31,7 @@
   gap: 40px;
 }
 
-.ax-columns:first-child {
+.ax-columns:not(.extra-wide):first-child {
   padding-top: 60px;
 }
 
@@ -1070,4 +1070,56 @@
   .ax-columns h1.columns-heading-x-long {
     font-size: var(--heading-font-size-l);
   }
+
+  .ax-columns.extra-wide > div {
+    align-items: flex-start;
+  }
+
+  .section >  .ax-columns.extra-wide {
+    max-width: 1440px;
+    margin-top: -60px;
+  }
+  .ax-columns.extra-wide .button-container, .ax-columns.extra-wide .con-button{
+    margin-top: 0;
+  }
+}
+
+.ax-columns.extra-wide {
+  text-align: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.ax-columns.extra-wide .column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 250px;
+  width: fit-content;
+  margin: auto;
+  flex: 1;
+}
+
+.ax-columns.extra-wide > div {
+  align-items: flex-start;
+}
+
+.ax-columns.extra-wide .column:has(a:only-of-type) {
+  text-align: center;
+}
+
+.ax-columns.extra-wide .column > div{
+  text-align: center;
+}
+
+.ax-columns.slim-button  a.button {
+  padding: 5px 19.5px;
+}
+
+.ax-columns.slim-padding > div {
+  padding: 0px;
+}
+
+.ax-columns.slim-padding .column {
+  padding: 20px;
 }

express/blocks/banner/banner.css

@@ -1,11 +1,20 @@
 .banner,
 .banner.compact {
-  background-color: var(--color-info-accent);
   padding: 80px 15px;
   text-align: center;
 }
 
-.banner p {
+.banner,
+.banner.compact,
+.banner.standout {
+  background-color: var(--color-info-accent);
+}
+
+.banner.standout {
+  padding: 48px 0;
+}
+
+.section .banner p {
   margin: 32px 0;
 }
 
@@ -42,11 +51,11 @@
   margin: 24px;
 }
 
-.banner.compact p.button-container {
+.banner.compact p.button-container, .banner.compact .con-button {
   margin-bottom: 0;
 }
 
-.banner.compact p.button-container ~ p {
+.banner.compact p.button-container ~ p, .banner.compact .con-button ~ p {
   margin-top: 0;
 }
 
@@ -55,6 +64,11 @@
   color: var(--color-white);
 }
 
+.banner.standout h2,
+.banner.standout h3 {
+  color: var(--heading-color);
+}
+
 main .banner h2 {
   margin-top: 0;
   margin-bottom: 0;
@@ -78,14 +92,43 @@ main .banner h2 {
   width: 72px;
 }
 
-.banner.multi-button .button-container {
+.banner.multi-button .button-container, .banner.multi-button .con-button {
   display: inline-block;
 }
 
 .banner p:last-of-type {
   margin-bottom: 0;
 }
 
+.banner .standout-container {
+  color: var(--body-color);
+}
+
+.banner .standout-container > div {
+  padding: 33px 28%;
+  background-color: var(--body-background-color);
+  border-radius: 12px;
+}
+
+.banner .standout-container strong {
+  background: linear-gradient(180deg, #FF4DD2 20%, #FF993B 80%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-weight: 900;
+}
+
+@media (max-width: 900px) {
+  .section .banner {
+    padding-left: 6%;
+    padding-right: 6%;
+  }
+
+  .banner .standout-container > div{
+    padding: 33px 9%;
+  }
+}
+
 @media (min-width: 900px) {
   .banner {
     padding-left: 56px;
@@ -95,10 +138,18 @@ main .banner h2 {
   .banner > div {
     max-width: var(--block-md-max-width);
   }
+
+  .banner .standout-container {
+    max-width: 830px;
+  }
 }
 
 @media (min-width: 1200px) {
   .banner > div {
     max-width: var(--block-lg-max-width);
   }
+
+  .banner .standout-container {
+    max-width: 1024px;
+  }
 }

express/blocks/banner/banner.js

@@ -1,9 +1,26 @@
+import { getLibs } from '../../scripts/utils.js';
 import { formatSalesPhoneNumber } from '../../scripts/utils/location-utils.js';
 import { decorateButtonsDeprecated, normalizeHeadings } from '../../scripts/utils/decorate.js';
 import { fixIcons } from '../../scripts/utils/icons.js';
 
+const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+
 export default async function decorate(block) {
   decorateButtonsDeprecated(block);
+
+  const isBannerLightVariant = block.classList.contains('light');
+  const isBannerStandoutVariant = block.classList.contains('standout');
+
+  if (isBannerStandoutVariant) {
+    const standoutContainer = createTag('div', { class: 'standout-container' });
+
+    for (const child of block.children) {
+      standoutContainer.append(child);
+    }
+
+    block.replaceChildren(standoutContainer);
+  }
+
   normalizeHeadings(block, ['h2', 'h3']);
   const buttons = block.querySelectorAll('a.button');
   if (buttons.length > 1) {
@@ -14,7 +31,10 @@ export default async function decorate(block) {
     button.classList.remove('primary');
     button.classList.remove('secondary');
 
-    if (block.classList.contains('light')) {
+    if (isBannerStandoutVariant) {
+      button.classList.remove('accent');
+      button.classList.add('large', 'primary');
+    } else if (isBannerLightVariant) {
       button.classList.remove('accent');
       button.classList.add('large', 'primary', 'reverse');
     } else {

express/blocks/browse-by-category/browse-by-category.css

@@ -1,7 +1,7 @@
 .browse-by-category.fullwidth {
-  margin: 0;
   padding: 0 28px;
-  max-width: fit-content;
+  max-width: 1440px;
+  margin: auto;
 }
 
 .browse-by-category {

express/blocks/browse-by-category/browse-by-category.js

@@ -41,10 +41,11 @@ export function decorateCategories(block, payload) {
     const categoryImageShadowWrapper = createTag('div', { class: 'browse-by-category-image-shadow-wrapper' });
     const categoryImageShadow = createTag('div', { class: 'browse-by-category-image-shadow' });
     const categoryImage = categoryCard.image;
-    const categoryTitle = createTag('h4', { class: 'browse-by-category-card-title' });
+    const categoryTitle = createTag('p', { class: 'browse-by-category-card-title' });
     const categoryAnchor = createTag('a', { class: 'browse-by-category-card-link' });
 
     categoryTitle.textContent = categoryCard.text;
+    categoryAnchor.title = categoryCard.text;
     categoryAnchor.href = categoryCard.link;
     categoryImageShadowWrapper.append(categoryImageShadow, categoryImage);
     categoryImageWrapper.append(categoryImageShadowWrapper);