From e17f0bc2f147d2790a5dc0082b6d73e3ab45a9e9 Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Wed, 8 Apr 2026 11:35:08 -0400 Subject: [PATCH 1/4] updated nav --- blocks/category-nav/category-nav.css | 11 ++++--- blocks/header/header.css | 42 ++++++++++++++++++++++++-- blocks/header/header.js | 44 +++++++++++++++++++++++++--- 3 files changed, 86 insertions(+), 11 deletions(-) diff --git a/blocks/category-nav/category-nav.css b/blocks/category-nav/category-nav.css index 2013f33..f5d2c80 100644 --- a/blocks/category-nav/category-nav.css +++ b/blocks/category-nav/category-nav.css @@ -424,12 +424,15 @@ body.is-framework-page .section#bell-outline { .category-nav-card .category-nav-tag { padding: 4px 10px; border-radius: 8px; - font-size: 11px; - line-height: 1.5; + font-size: 9px; + line-height: 11px; + font-weight: 600; letter-spacing: 0; white-space: nowrap; - box-shadow: 0 2px 4px rgb(0 0 0 / 12%); + border: 1px solid rgb(0 0 0 / 12%); display: inline-block; + text-transform: uppercase; + color: var(--text-color); } /* Remove the red arrow pseudo-element from tags (override nav-pane.css) */ @@ -531,7 +534,7 @@ header nav .nav-sections .nav-fragment-section-content .category-nav-explore-lin } .nav-fragment-content .category-nav-card-link > .category-nav-card-title{ - color: var(--text-red-color); + color: var(--color-red-800); font-weight: 600; font-size: 13px; line-height: 17px; diff --git a/blocks/header/header.css b/blocks/header/header.css index 9c540aa..ad87b45 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -72,6 +72,18 @@ header nav .nav-sections .default-content-wrapper>ul>li p a { text-decoration: none; } +header nav .new-tag { + display: inline-block; + padding: 4px 10px; + background: linear-gradient(135deg, #9B1E26 0%, #56070C 98.08%); + border-radius: 6px; + color: #fff; + font-size: 10px; + line-height: 14px; + font-weight: 700; + margin-left: 8px; +} + /* Accordion chevron icon */ header nav .nav-sections .default-content-wrapper>ul>li::after { content: ''; @@ -1671,6 +1683,11 @@ header nav .nav-sections .default-content-wrapper>ul>li .nav-h4-section-content cursor: pointer; } +header nav li.nav-link-only, +header nav .category-nav-eyebrow-title { + display: none !important; +} + /* Mobile: Search input in expanded nav */ header nav[aria-expanded='true'] .nav-tools #search-box .search-input { flex: 1; @@ -2027,7 +2044,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input { background: var(--color-white-200); box-shadow: none; border-radius: 0; - height: 520px; /* Fixed default height */ + height: 565px; max-height: calc(100vh - 150px); /* Constrain on smaller viewports */ overflow: visible; /* Parent doesn't scroll, only children */ } @@ -2044,7 +2061,8 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input { padding-right: 236px; /* Reserve space for discover card: 220px width + 16px gap */ background: var(--color-white-200); border-radius: 8px; - height: 520px; /* Fixed default height - matches parent */ + + /* height: 520px; Fixed default height - matches parent */ max-height: calc(100vh - 150px); /* Constrain on smaller viewports */ overflow-y: auto; /* Scroll the entire content area */ display: grid; @@ -2263,6 +2281,25 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input { display: none; } + header nav li.nav-link-only { + padding: var(--spacing-xs) 20px; + transition: color 0.2s ease; + border-left: 3px solid transparent; + border-bottom: none !important; + display: block !important; + + a.category-nav-explore-link { + font-size: var(--body-font-size-xs); + font-weight: 600; + color: var(--color-red-600); + text-decoration: none; + } + } + + header nav .category-nav-eyebrow-title { + display: block !important; + } + /* ================================================================= DESKTOP: COLUMN 2 CONTENT STYLING ================================================================= */ @@ -2276,7 +2313,6 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input { height: auto; border-bottom: none; font-size: var(--body-font-size-xs); - font-weight: 400; line-height: 1.3; display: block; white-space: normal; diff --git a/blocks/header/header.js b/blocks/header/header.js index 0074e36..537d8d1 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1290,6 +1290,30 @@ export default async function decorate(block) { } } + /** + * Wrap literal "NEW" in nav fragment section titles so it can be styled (e.g. badge). + * @param {Element} ul Root ul.nav-fragment-content + */ + function wrapNavFragmentNewBadgeInTitles(ul) { + ul.querySelectorAll( + ':scope > li.nav-fragment-section > p:first-child', + ).forEach((p) => { + const text = p.textContent; + if (!text.includes('NEW') || p.querySelector('span.new-tag')) return; + const parts = text.split('NEW'); + p.textContent = ''; + parts.forEach((part, i) => { + p.append(document.createTextNode(part)); + if (i < parts.length - 1) { + const badge = document.createElement('span'); + badge.className = 'new-tag'; + badge.textContent = 'NEW'; + p.append(badge); + } + }); + }); + } + /** * Load fragment content and build structure based on viewport. * Both Desktop and Mobile: use nested accordion structure. @@ -1312,12 +1336,24 @@ export default async function decorate(block) { return false; } + if (fragmentPath === '/framework/ccnav1') { + const allCardsLi = document.createElement('li'); + allCardsLi.classList.add('nav-link-only'); + const allCardsLink = document.createElement('a'); + allCardsLink.href = '/credit-card'; + allCardsLink.className = 'category-nav-explore-link'; + allCardsLink.textContent = 'All Credit Cards'; + allCardsLi.appendChild(allCardsLink); + ul.prepend(allCardsLi); + } + navSection.appendChild(ul); navSection.setAttribute('data-fragment-loaded', 'true'); navSection.removeAttribute('data-fragment-loading'); navSection.classList.add('nav-drop'); decorateCategoryNavBlocks(ul); await decorateFragmentBlocks(ul); + wrapNavFragmentNewBadgeInTitles(ul); if (isMobile) setupMobileAccordionBehavior(ul); else setupDesktopAccordionBehavior(ul); return true; @@ -1356,8 +1392,8 @@ export default async function decorate(block) { toggleAllNavSections(navSections); navSection.setAttribute('aria-expanded', 'true'); - // Auto-expand first section in the dropdown - const firstSection = navSection.querySelector('.nav-fragment-section:first-child'); + // First accordion row (skip leading all-cards li) + const firstSection = navSection.querySelector('.nav-fragment-content > .nav-fragment-section'); if (firstSection) { firstSection.setAttribute('aria-expanded', 'true'); } @@ -1375,8 +1411,8 @@ export default async function decorate(block) { toggleAllNavSections(navSections); navSection.setAttribute('aria-expanded', 'true'); - // Auto-expand first section in the dropdown - const firstSection = navSection.querySelector('.nav-fragment-section:first-child'); + // First accordion row (skip leading all-cards li) + const firstSection = navSection.querySelector('.nav-fragment-content > .nav-fragment-section'); if (firstSection) { firstSection.setAttribute('aria-expanded', 'true'); } From 1e26bdf2f6cdb18f4b2887b66e71b5c814756073 Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Wed, 8 Apr 2026 13:42:44 -0400 Subject: [PATCH 2/4] padding and alignment changes --- blocks/category-nav/category-nav.css | 6 ++---- blocks/header/header.css | 8 ++++---- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/blocks/category-nav/category-nav.css b/blocks/category-nav/category-nav.css index f5d2c80..410e0f8 100644 --- a/blocks/category-nav/category-nav.css +++ b/blocks/category-nav/category-nav.css @@ -407,7 +407,6 @@ body.is-framework-page .section#bell-outline { gap: 6px; flex-wrap: wrap; position: relative; - z-index: 2; align-items: flex-start; justify-content: flex-start; top: -12px; @@ -446,7 +445,7 @@ body.is-framework-page .section#bell-outline { .category-nav-card .category-nav-tag.tg-clr-pale-yellow { background-color: #fffbe6; } .category-nav-card .category-nav-tag.tg-clr-pale-cyan { background-color: #ebffff; } .category-nav-card .category-nav-tag.tg-clr-pale-lavender { background-color: #ffeffd; } -.category-nav-card .category-nav-tag.tg-clr-pale-rose { background-color: #ffcece; } +.category-nav-card .category-nav-tag.tg-clr-pale-rose { background-color: #fae1e1; } .category-nav-card .category-nav-tag.tg-clr-pale-pink { background-color: #ffe1ec; } .category-nav-card .category-nav-tag.tg-clr-pale-purple { background-color: #f2e5ff; } .category-nav-card .category-nav-tag.tg-clr-pale-mint { background-color: #eefff2; } @@ -463,7 +462,6 @@ body.is-framework-page .section#bell-outline { font-weight: 700; line-height: 1.4; position: relative; - z-index: 1; } /* Icon Right Arrow */ @@ -544,7 +542,7 @@ header nav .nav-sections .nav-fragment-section-content .category-nav-explore-lin .nav-fragment-content .category-nav-card .category-nav-tags { position: relative; display: flex; - width: fit-content; + width: 75%; margin-left: 11px; top: unset; left: unset; diff --git a/blocks/header/header.css b/blocks/header/header.css index ad87b45..4d4bd9c 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -287,7 +287,7 @@ header nav .nav-sections .nav-fragment-section[aria-expanded='true']::after { header nav .nav-sections .nav-fragment-section-content { list-style: none; padding-left: 0; - margin: 0; + margin: 0 16px; overflow: hidden; max-height: 0; transition: max-height 0.3s ease-in-out; @@ -687,7 +687,7 @@ header nav .nav-sections.tab-view-active .nav-h4-section-content > li { /* Tab view: Ensure H4 content has same indentation as other content */ header nav .nav-sections.tab-view-active .nav-fragment-section-content p.button-container { - padding-left: 40px; + padding-left: 24px; padding-right: 20px; border-bottom: none; font-size: var(--body-font-size-s); @@ -1973,6 +1973,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input { align-self: start; position: relative; z-index: 1; + margin: 0; } header nav .nav-sections .default-content-wrapper>ul>li>ul>li { @@ -2061,8 +2062,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input { padding-right: 236px; /* Reserve space for discover card: 220px width + 16px gap */ background: var(--color-white-200); border-radius: 8px; - - /* height: 520px; Fixed default height - matches parent */ + height: 565px; /* Fixed default height - matches parent */ max-height: calc(100vh - 150px); /* Constrain on smaller viewports */ overflow-y: auto; /* Scroll the entire content area */ display: grid; From eea6af957d38c4eef169a255ab3e7fa429a56fa6 Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Wed, 8 Apr 2026 13:58:38 -0400 Subject: [PATCH 3/4] cards fix --- blocks/header/header.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index 4d4bd9c..05d8363 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -2201,7 +2201,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input { padding-top: var(--spacing-xs); } - header nav .nav-sections .nav-discover-section .cards-card-image { + header nav .nav-sections .nav-discover-section .cards.blog-posts .blog-post-card .cards-card-image { width: 100%; overflow: hidden; max-height: 110px; From 5e82697785354edc76487c7b89ddd9166b0310a6 Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Wed, 8 Apr 2026 14:17:03 -0400 Subject: [PATCH 4/4] height fix --- blocks/category-nav/category-nav.css | 4 ++-- blocks/header/header.css | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/blocks/category-nav/category-nav.css b/blocks/category-nav/category-nav.css index 410e0f8..fca6d06 100644 --- a/blocks/category-nav/category-nav.css +++ b/blocks/category-nav/category-nav.css @@ -542,7 +542,7 @@ header nav .nav-sections .nav-fragment-section-content .category-nav-explore-lin .nav-fragment-content .category-nav-card .category-nav-tags { position: relative; display: flex; - width: 75%; + width: 71%; margin-left: 11px; top: unset; left: unset; @@ -552,7 +552,7 @@ header nav .nav-sections .nav-fragment-section-content .category-nav-explore-lin .nav-fragment-content .category-nav-card .category-nav-card-image { margin: 10px 0 0; display: inline-block; - width: fit-content; + width: 23%; height: auto; } diff --git a/blocks/header/header.css b/blocks/header/header.css index 05d8363..e2b8e38 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -57,7 +57,7 @@ header nav .nav-sections .default-content-wrapper>ul>li { header nav .nav-sections .default-content-wrapper>ul>li p { display: block; min-width: 70px; - min-height: 52px; + min-height: 46px; padding: 16px 40px 16px 20px; margin: 0; font-size: var(--body-font-size-l); @@ -2490,8 +2490,7 @@ header nav[aria-expanded='true'] .nav-tools #search-box .search-input { box-shadow: none; border-bottom: 1px solid var(--color-gray-100); z-index: 2; - - /* height: 518px; */ + height: 566px; max-height: 100%; overflow-y: auto; }