fix: align hero/banner/cards/columns with production, remove duplicate design tokens

.gitignore

@@ -18,6 +18,7 @@ migration-work/footer-validation/
 .hlx/.da-token.json
 
 content
+drafts
 
 # Analysis and testing artifacts
 screenshots/

blocks/banner/banner.css

@@ -0,0 +1,169 @@
+/* Banner - full-bleed background-image with navy fade overlay.
+   Caps and centers past --page-max-width on ultra-wide screens. */
+.banner-container .banner-wrapper {
+  max-width: var(--page-max-width);
+  margin: 0 auto;
+  padding: 0;
+}
+
+.banner {
+  position: relative;
+  min-height: 320px;
+  overflow: hidden;
+  padding: 0;
+}
+
+.banner picture {
+  position: absolute;
+  inset: 0;
+  z-index: initial;
+}
+
+.banner img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 50% 50%;
+}
+
+.banner > div:first-child {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.banner::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background-image: linear-gradient(
+    90deg,
+    var(--heading-color) 0%,
+    var(--heading-color) 30%,
+    rgb(0 24 113 / 0%) 80%
+  );
+  pointer-events: none;
+}
+
+.banner > div:last-child {
+  position: relative;
+  z-index: 2;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 320px;
+  box-sizing: border-box;
+  padding: 32px 24px;
+}
+
+.banner > div:last-child > div {
+  width: 100%;
+}
+
+.banner > div:first-child > div {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.banner.no-image {
+  background-color: var(--heading-color);
+}
+
+.banner.no-image > div:first-child,
+.banner.no-image::before {
+  display: none;
+}
+
+.banner h1,
+.banner h2 {
+  margin: 0 0 16px;
+  color: #fff;
+  font-size: 32px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.banner h1 a:any-link,
+.banner h2 a:any-link {
+  color: #fff;
+  text-decoration: none;
+}
+
+.banner p {
+  margin: 0 0 15px;
+  color: #fff;
+  font-size: 18px;
+  line-height: 1.5;
+}
+
+.banner > div:last-child p a:any-link,
+main .banner a.button:any-link {
+  position: relative;
+  display: inline-block;
+  margin: 8px 0 0;
+  padding: 0 32px 0 0;
+  background: transparent;
+  border: 0;
+  color: #80d2f2;
+  font-family: var(--heading-font-family);
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 2.25rem;
+  text-decoration: none;
+  white-space: normal;
+  transition: color 0.3s ease;
+}
+
+.banner > div:last-child p a:any-link::after,
+main .banner a.button:any-link::after {
+  content: '\2192';
+  position: absolute;
+  top: 0;
+  right: 0;
+  transition: transform 0.3s ease;
+}
+
+.banner > div:last-child p a:any-link:hover,
+.banner > div:last-child p a:any-link:focus-visible,
+main .banner a.button:any-link:hover,
+main .banner a.button:any-link:focus-visible {
+  color: #80d2f2;
+  text-decoration: underline;
+}
+
+.banner > div:last-child p a:any-link:hover::after,
+.banner > div:last-child p a:any-link:focus-visible::after,
+main .banner a.button:any-link:hover::after,
+main .banner a.button:any-link:focus-visible::after {
+  transform: translateX(5px);
+}
+
+@media (width >= 900px) {
+  .banner {
+    min-height: clamp(400px, 29.25vw, 640px);
+  }
+
+  .banner > div:last-child {
+    min-height: clamp(400px, 29.25vw, 640px);
+    max-width: 49%;
+    padding: 40px 0 40px 8.33%;
+  }
+
+  .banner h1,
+  .banner h2 {
+    font-size: 44px;
+    line-height: 1.27;
+    margin-bottom: 24px;
+  }
+
+  .banner p {
+    font-size: 20px;
+    line-height: 1.5;
+  }
+}

blocks/banner/banner.js

@@ -0,0 +1,9 @@
+/**
+ * Decorates banner block
+ * @param {Element} block The banner block element
+ */
+export default function decorate(block) {
+  if (!block.querySelector(':scope > div:first-child picture')) {
+    block.classList.add('no-image');
+  }
+}

blocks/cards/cards.css

@@ -8,17 +8,36 @@
   gap: 32px;
 }
 
+/* Cards attached to hero - remove top spacing */
+.cards-container:has(.cards.attached-to-hero) {
+  padding-top: 0;
+}
+
+/* Light variant is full-bleed up to 1920px - background spans the viewport, content stays inset via padding.
+   Beyond 1920px the background caps and centers instead of stretching indefinitely. */
+.cards-container:has(.cards.light) .cards-wrapper {
+  max-width: var(--page-max-width);
+  margin: 0 auto;
+  padding: 0;
+}
+
+.cards.attached-to-hero {
+  margin-top: 0;
+  padding-top: 0;
+}
+
 .cards > ul > li {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: flex-start;
-  gap: 24px;
+  gap: 16px;
   background-color: transparent;
   border: 0;
 }
 
 .cards .cards-card-image {
-  flex: 0 0 auto;
+  flex: 0 0 40%;
+  max-width: 40%;
   line-height: 0;
 }
 
@@ -28,8 +47,9 @@
 }
 
 .cards .cards-card-image img {
-  width: 190px;
-  height: 190px;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1 / 1;
   object-fit: cover;
 }
 
@@ -101,53 +121,28 @@
 @media (width >= 900px) {
   .cards > ul {
     grid-template-columns: 1fr 1fr;
-    gap: 24px 48px;
-  }
-}
-
-/* Story variant with paleblue section - large full-width cards */
-@media (width >= 900px) {
-  .section.paleblue .cards > ul {
-    grid-template-columns: 1fr;
-    gap: 24px;
+    gap: 48px 64px;
   }
 
-  .section.paleblue .cards > ul > li {
-    align-items: center;
+  .cards > ul > li {
+    flex-direction: row;
     gap: 48px;
   }
 
-  .section.paleblue .cards > ul > li:nth-child(odd) {
-    flex-direction: row-reverse;
-  }
-
-  .section.paleblue .cards .cards-card-image {
-    flex: 1 1 55%;
-    max-width: 55%;
-  }
-
-  .section.paleblue .cards .cards-card-image img {
-    width: 100%;
-    height: auto;
-    aspect-ratio: 646 / 283;
-    object-fit: cover;
-  }
-
-  .section.paleblue .cards .cards-card-body {
-    flex: 1 1 45%;
+  .cards .cards-card-image {
+    flex: 0 0 190px;
+    max-width: 190px;
   }
+}
 
-  .section.paleblue .cards .cards-card-body h2,
-  .section.paleblue .cards .cards-card-body h3,
-  .section.paleblue .cards .cards-card-body h4 {
-    font-family: var(--heading-font-family);
-    font-weight: 500;
-    font-size: 28px;
-    line-height: 36px;
-  }
+/* Light variant - pale blue background */
+.cards.light {
+  background-color: var(--paleblue-color);
+  padding: 32px 24px;
+}
 
-  .section.paleblue .cards .cards-card-body p {
-    color: var(--text-color);
-    line-height: 30px;
+@media (width >= 900px) {
+  .cards.light {
+    padding: 48px 8.33%;
   }
 }