Align homepage and header to the live design

blocks/cards/cards.css

@@ -158,24 +158,30 @@ main .section.cards-container {
 
 /* ---- category: tire/product category tiles ---- */
 .cards.category > ul {
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 16px;
+  grid-template-columns: 1fr;
+  gap: 0;
+}
+
+@media (width >= 900px) {
+  .cards.category > ul {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 .cards.category > ul > li {
-  border: 1px solid var(--conti-grey);
+  border: 0;
   border-radius: 0;
   box-shadow: none;
-  min-height: 176px;
+  min-height: 200px;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .cards.category .cards-card-image {
   position: absolute;
   z-index: 0;
   inset-block-end: 0;
-  inset-inline-end: -8px;
-  width: 130px;
+  inset-inline-end: 0;
+  width: 210px;
 }
 
 .cards.category > ul > li img {
@@ -218,7 +224,7 @@ main .section.cards-container {
   }
 }
 
-/* ---- coverage: plain icon-less items on a dark band (warranty coverage row) ---- */
+/* ---- coverage: icon-over-label items on a dark band (warranty coverage row) ---- */
 .cards.coverage > ul {
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 24px;
@@ -232,6 +238,10 @@ main .section.cards-container {
 }
 
 .cards.coverage .cards-card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
   margin: 0;
   color: inherit;
   font-family: var(--heading-font-family);
@@ -241,6 +251,15 @@ main .section.cards-container {
   text-transform: uppercase;
 }
 
+.cards.coverage .cards-card-body p {
+  margin: 0;
+}
+
+.cards.coverage .cards-card-body .icon {
+  width: 40px;
+  height: 40px;
+}
+
 .cards.category > ul > li:hover,
 .cards.category > ul > li:focus-within {
   background-color: var(--conti-dark-black);
@@ -257,6 +276,10 @@ main .section.cards-container {
   transform: translateY(-6px);
 }
 
+.cards.coverage .cards-card-body .icon img {
+  filter: invert(1);
+}
+
 /* ---- news inside a dark/black band: plain text teasers, no card chrome ---- */
 main .section.dark .cards.news > ul > li,
 main .section.black .cards.news > ul > li {
@@ -291,3 +314,18 @@ main .section.black .cards.news .cards-card-body a:hover {
     padding-inline-start: 24px;
   }
 }
+
+/* the confidence band wraps a badge image, heading, copy, the coverage
+   cards and a Learn More button - all centered, matching the live page */
+main .section.dark.cards-container {
+  text-align: center;
+}
+
+main .section.dark.cards-container .default-content-wrapper .icon {
+  width: 100px;
+  height: 120px;
+}
+
+main .section.dark.cards-container .cards-wrapper {
+  margin-top: 32px;
+}

blocks/footer/footer.css

@@ -52,13 +52,22 @@ footer .footer-links-group ul {
 }
 
 footer .footer-links-group a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   color: var(--conti-black);
   font-size: 14px;
   font-weight: bold;
   line-height: 20px;
   letter-spacing: 0.5px;
 }
 
+footer .footer-links-group a .icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
 /* social icon row: dark bar, icons only, text kept for screen readers */
 footer .footer-links-group.footer-social {
   order: 99;
@@ -152,7 +161,9 @@ footer .footer-bottom a:focus-visible {
   }
 
   footer .footer-cta {
-    flex: 1 1 100%;
+    flex: 0 1 160px;
+    flex-direction: column;
+    align-items: flex-start;
   }
 
   footer .footer-links-group.footer-social {

blocks/header/header.css

@@ -434,9 +434,15 @@ header nav .nav-sections .default-content-wrapper > ul > li > ul > li > a {
     align-self: unset;
   }
 
+  header nav .nav-sections .default-content-wrapper {
+    height: 100%;
+  }
+
   header nav .nav-sections .default-content-wrapper > ul {
     display: flex;
+    align-items: center;
     height: 100%;
+    margin: 0;
   }
 
   header nav .nav-sections .default-content-wrapper > ul > li {

blocks/perfect-fit/perfect-fit.css

@@ -0,0 +1,63 @@
+/* slim black bar under the hero: "Find your perfect fit:" plus three
+   icon+label shortcuts, matching the live continentaltire.com homepage */
+main .section.perfect-fit-container {
+  padding: 0;
+}
+
+.perfect-fit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  text-align: center;
+}
+
+.perfect-fit-label {
+  margin: 0;
+  font-family: var(--heading-font-family);
+  font-size: var(--body-font-size-xs);
+  font-weight: 700;
+  letter-spacing: 1.25px;
+  text-transform: uppercase;
+}
+
+.perfect-fit-items {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px 32px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.perfect-fit-items p {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-family: var(--heading-font-family);
+  font-size: var(--body-font-size-xs);
+  font-weight: 700;
+  letter-spacing: 1.25px;
+  text-transform: uppercase;
+}
+
+.perfect-fit-items .icon {
+  width: 20px;
+  height: 20px;
+}
+
+.perfect-fit-items .icon img {
+  filter: invert(1);
+}
+
+@media (width >= 700px) {
+  .perfect-fit {
+    flex-direction: row;
+    justify-content: center;
+    gap: 24px;
+    padding: 14px 32px;
+  }
+}

blocks/perfect-fit/perfect-fit.js

@@ -0,0 +1,24 @@
+/**
+ * "Find your perfect fit:" bar: a label followed by a row of icon+label
+ * shortcut links. The first authored row is the label, the second row's
+ * cells are the items.
+ * @param {Element} block the perfect-fit block
+ */
+export default function decorate(block) {
+  const [labelRow, itemsRow] = [...block.children];
+
+  const label = labelRow ? labelRow.querySelector('p') : null;
+  if (label) label.className = 'perfect-fit-label';
+
+  const list = document.createElement('ul');
+  list.className = 'perfect-fit-items';
+  const cells = itemsRow ? [...itemsRow.children] : [];
+  cells.forEach((cell) => {
+    const li = document.createElement('li');
+    while (cell.firstElementChild) li.append(cell.firstElementChild);
+    list.append(li);
+  });
+
+  const children = label ? [label, list] : [list];
+  block.replaceChildren(...children);
+}

styles/styles.css

@@ -111,9 +111,9 @@ h5,
 h6 {
   margin-top: 0.8em;
   margin-bottom: 0.25em;
-  font-family: var(--heading-font-family);
-  font-weight: 600;
-  line-height: 1.25;
+  font-family: var(--body-font-family);
+  font-weight: 300;
+  line-height: 1.2;
   scroll-margin: 40px;
 }