Fix promo bar gap, article title spacing, and flat header icons

blocks/header/header.css

@@ -240,6 +240,9 @@ header nav .nav-search-toggle {
   cursor: pointer;
 }
 
+/* utility icons are flat on the live header: a dark line icon with no chip,
+   circle, or pill behind it. Keep a 30px box for the tap target, but draw
+   nothing around the glyph. */
 header nav .nav-tools-utility-item .icon,
 header nav .nav-search-toggle .icon {
   display: flex;
@@ -248,76 +251,44 @@ header nav .nav-search-toggle .icon {
   width: 30px;
   height: 30px;
   flex-shrink: 0;
-  border: 1px solid var(--conti-yellow);
-  border-radius: 50%;
-  background-color: var(--conti-white);
 }
 
 header nav .nav-tools-utility-item .icon img,
 header nav .nav-search-toggle .icon img {
-  width: 16px;
-  height: 16px;
+  width: 22px;
+  height: 22px;
 }
 
-/* Chat now: a pill, not a circle, and (unlike Customer support / Site
-   search) its label is always visible on desktop - matching the live
-   header, where Chat now is the one utility item with an inline label.
-   Selector needs the "a" tag (not just the class) to out-specificity
-   "header nav a:any-link" below, which also sets color. */
+/* Chat now is the one utility item with an inline label on desktop, flat
+   like the rest. Selector needs the "a" tag (not just the class) to
+   out-specificity "header nav a:any-link" below, which also sets color. */
 header nav a.nav-tools-utility-item-pill {
-  border-radius: 20px;
-  padding: 0 16px;
+  padding: 0;
   height: 30px;
-  background-color: var(--conti-white);
   color: var(--conti-black);
 }
 
 header nav .nav-tools-utility-item-pill .icon {
-  width: 18px;
-  height: 18px;
-  border: 0;
-  border-radius: 0;
-  background: none;
+  width: 22px;
+  height: 22px;
 }
 
 header nav .nav-tools-utility-item-pill .icon img {
-  width: 16px;
-  height: 16px;
-}
-
-header nav .nav-tools-utility-item:hover .icon,
-header nav .nav-tools-utility-item:focus-visible .icon,
-header nav .nav-search-toggle:hover .icon,
-header nav .nav-search-toggle:focus-visible .icon,
-header nav .nav-search-toggle[aria-expanded='true'] .icon {
-  background-color: var(--conti-dark-black);
-  border-color: var(--conti-dark-black);
+  width: 22px;
+  height: 22px;
 }
 
 header nav .nav-tools-utility-item:hover .icon img,
 header nav .nav-tools-utility-item:focus-visible .icon img,
 header nav .nav-search-toggle:hover .icon img,
 header nav .nav-search-toggle:focus-visible .icon img,
 header nav .nav-search-toggle[aria-expanded='true'] .icon img {
-  filter: invert(1);
+  opacity: 0.6;
 }
 
 header nav .nav-tools-utility-item-pill:hover,
 header nav .nav-tools-utility-item-pill:focus-visible {
-  background-color: var(--conti-lightest-grey);
-}
-
-/* override the generic dark-circle hover/focus above: the pill has no
-   circle to invert */
-header nav .nav-tools-utility-item-pill:hover .icon,
-header nav .nav-tools-utility-item-pill:focus-visible .icon {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-header nav .nav-tools-utility-item-pill:hover .icon img,
-header nav .nav-tools-utility-item-pill:focus-visible .icon img {
-  filter: none;
+  color: var(--conti-darkest-grey);
 }
 
 header nav .nav-tools-utility-label {

blocks/promo-bar/promo-bar.css

@@ -80,8 +80,12 @@ main .section.promo-bar-container {
 }
 
 .promo-bar-panel-inner {
-  box-sizing: border-box;
+  min-height: 0;
   overflow: hidden;
+}
+
+.promo-bar-panel-content {
+  box-sizing: border-box;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
@@ -91,16 +95,16 @@ main .section.promo-bar-container {
   transition: opacity 0.2s ease;
 }
 
-.promo-bar-panel-open .promo-bar-panel-inner {
+.promo-bar-panel-open .promo-bar-panel-content {
   opacity: 1;
   transition-delay: 0.05s;
 }
 
-.promo-bar-panel-inner h3 {
+.promo-bar-panel-content h3 {
   margin-top: 0;
 }
 
-.promo-bar-panel-inner p {
+.promo-bar-panel-content p {
   margin: 0.25em 0;
 }
 
@@ -109,7 +113,7 @@ main .section.promo-bar-container {
     padding: 0 32px;
   }
 
-  .promo-bar-panel-inner {
+  .promo-bar-panel-content {
     padding: 32px;
   }
 }

blocks/promo-bar/promo-bar.js

@@ -41,7 +41,15 @@ export default function decorate(block) {
   panelRow.id = panelId;
   panelRow.setAttribute('inert', '');
   panelCell.className = 'promo-bar-panel-inner';
-  panelCell.querySelectorAll('a[href]').forEach((a) => {
+
+  // hold the visual padding on an inner wrapper, not on the grid item itself,
+  // so the collapsed panel can crush to zero height (a padded grid item cannot)
+  const panelContent = document.createElement('div');
+  panelContent.className = 'promo-bar-panel-content';
+  panelContent.append(...panelCell.childNodes);
+  panelCell.append(panelContent);
+
+  panelContent.querySelectorAll('a[href]').forEach((a) => {
     a.classList.add('button', 'secondary');
     if (a.parentElement.tagName === 'P') a.parentElement.className = 'button-wrapper';
   });

styles/article.css

@@ -24,12 +24,21 @@ body.article main .section > div {
   padding: 0;
 }
 
-/* title section spans wider than the reading column, centered like live */
+/* title section spans wider than the reading column, centered like live.
+   the top padding gives the title breathing room below the nav, matching
+   the space the live article carries above its headline */
 body.article main .section:first-of-type {
   max-width: 940px;
+  padding-top: 40px;
   padding-bottom: 8px;
 }
 
+@media (width <= 600px) {
+  body.article main .section:first-of-type {
+    padding-top: 24px;
+  }
+}
+
 body.article main .section:first-of-type h1 {
   margin: 0 auto;
   font-family: var(--body-font-family);