diff --git a/blocks/category-nav/category-nav.css b/blocks/category-nav/category-nav.css index 2013f33..fca6d06 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; @@ -424,12 +423,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) */ @@ -443,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; } @@ -460,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 */ @@ -531,7 +532,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; @@ -541,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: 71%; margin-left: 11px; top: unset; left: unset; @@ -551,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 9c540aa..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); @@ -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: ''; @@ -275,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; @@ -675,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); @@ -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; @@ -1956,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 { @@ -2027,7 +2045,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 +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; @@ -2183,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; @@ -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; @@ -2454,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; } 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'); }