From 15c1f34111093c0c1d862e6106e9dda854013459 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Sat, 25 Jul 2026 09:47:16 +0200 Subject: [PATCH] Fix collapsed promo bar height, article title spacing, and flat header icons Collapsed promo bar: the panel could not crush to zero, so the bar showed a tall orange band. The grid item carried the 32px padding, and a grid item's padding box is not collapsible by a 0fr track. Move the padding to an inner wrapper. The collapsed panel is now 0px and the bar is 39px. Article title spacing: titles sat flush against the nav. Add top padding to the title section. It now has breathing room below the header, like the live article. Header utility items: Chat now, help, and search rendered as a white pill and bordered circles. The live header draws these flat. Remove the pill and circle backgrounds so they are flat dark icons. --- blocks/header/header.css | 59 +++++++++------------------------- blocks/promo-bar/promo-bar.css | 14 +++++--- blocks/promo-bar/promo-bar.js | 10 +++++- styles/article.css | 11 ++++++- 4 files changed, 43 insertions(+), 51 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 5351a42..feea104 100644 --- a/blocks/header/header.css +++ b/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,50 +251,31 @@ 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, @@ -299,25 +283,12 @@ 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 { diff --git a/blocks/promo-bar/promo-bar.css b/blocks/promo-bar/promo-bar.css index 0901e23..58a0388 100644 --- a/blocks/promo-bar/promo-bar.css +++ b/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; } } diff --git a/blocks/promo-bar/promo-bar.js b/blocks/promo-bar/promo-bar.js index 0c9f121..f49acd7 100644 --- a/blocks/promo-bar/promo-bar.js +++ b/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'; }); diff --git a/styles/article.css b/styles/article.css index c1347df..62cad23 100644 --- a/styles/article.css +++ b/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);