From 741acb0b530010b4ee5942e6a51b67c9824cfc24 Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Thu, 5 Mar 2026 09:16:16 -0500 Subject: [PATCH 1/2] login dropdown fixes --- blocks/header/header.css | 47 ++++++++++++++---------- blocks/header/header.js | 2 +- blocks/modal/modal.css | 2 +- blocks/section-title/_section-title.json | 3 +- blocks/section-title/section-title.css | 4 ++ component-models.json | 4 ++ styles/styles.css | 5 +++ 7 files changed, 45 insertions(+), 22 deletions(-) diff --git a/blocks/header/header.css b/blocks/header/header.css index fe8a0f7..e40a812 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -1511,7 +1511,7 @@ header nav .nav-sections .default-content-wrapper>ul>li .nav-h4-section-content bottom: 0; left: 0; width: 100vw; - background: linear-gradient(180deg, #511211 0%, #6b1a19 50%, #511211 100%); + background: var(--gradient-silver-red); z-index: 1001; visibility: hidden; overflow-y: auto; @@ -1591,6 +1591,13 @@ header nav .nav-sections .default-content-wrapper>ul>li .nav-h4-section-content &.has-bg-images .columns { display: none; } + + .columns > div:last-child > div:last-child { + background: rgb(255 255 255 / 20%); + padding: 0 24px 10px; + margin-top: 16px; + border-radius: 12px; + } } .section.has-bg-images { @@ -1603,14 +1610,14 @@ header nav .nav-sections .default-content-wrapper>ul>li .nav-h4-section-content } /* Login dropdown cards - compact list layout */ -.cards .grid-cards { +.cards-icon.image-left-arrow .cards-icon-grid { gap: var(--spacing-xs); padding-top: var(--spacing-s); display: grid; grid-template-columns: 1fr; } -.cards .grid-cards .benefit-cards { +.cards-icon.image-left-arrow .cards-icon-grid .cards-icon-card { display: grid; grid-template-columns: 20px 1fr; text-align: left; @@ -1620,7 +1627,8 @@ header nav .nav-sections .default-content-wrapper>ul>li .nav-h4-section-content padding-bottom: var(--spacing-xs); width: 100%; /* Override global 50% width from cards.css */ - /* Remove default benefit-cards styling */ + /* Remove default styling */ + height: unset; box-shadow: none; border-radius: 0; background: transparent; @@ -1630,15 +1638,12 @@ header nav .nav-sections .default-content-wrapper>ul>li .nav-h4-section-content color: var(--color-gray-300); margin-top: 0; } - - &:last-child { - border-bottom: none; - } } -.cards .grid-cards .benefit-cards .cards-card-image { +.cards-icon-card .cards-icon-image { text-align: center; padding-top: 4px; + align-self: start; img { width: 20px; @@ -1646,17 +1651,21 @@ header nav .nav-sections .default-content-wrapper>ul>li .nav-h4-section-content } } -.cards .grid-cards .benefit-cards .cards-card-body { +.cards-icon-card .cards-icon-body { margin: 0; + align-self: start; } -.cards .benefit-cards .cards-card-body p { - font-size: var(--body-font-size-xs); +.cards-icon-card .cards-icon-body p { + font-size: var(--body-font-size-xxs); } -.cards .card-clickable:hover { - box-shadow: none; - transform: none; +.cards-icon.image-left-arrow .cards-icon-card::after { + height: 24px; + width: 24px; + background-size: 18px 18px; + top: 12px; + right: 0; } .login-dropdown-close-btn { @@ -2703,14 +2712,14 @@ minmax(auto, calc(1200px - 400px - var(--spacing-s))) /* Left content area */ 400px /* Right content area */ 1fr; grid-template-rows: auto auto; -gap: var(--spacing-s); +gap: 0 var(--spacing-s); border-radius: 0; .section { width: unset; max-width: 1300px; - .columns { + &.has-bg-images .columns { display: unset; } } @@ -2723,7 +2732,7 @@ border-radius: 0; display: none; } -.section.cards-container { +.section.cards-icon-container { grid-column: 3; grid-row: 1; max-width: 335px; @@ -2737,7 +2746,7 @@ border-radius: 0; flex: 1; h4 { - font-size: var(--heading-font-size-s); + font-size: var(--heading-font-size-m); line-height: 34px; background: linear-gradient(93.81deg, #E9E9E9 0%, #838383 154.51%); background-clip: text; diff --git a/blocks/header/header.js b/blocks/header/header.js index 9dc115f..771b358 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -265,7 +265,7 @@ function setupLoginDropdown(navToolsWrapper) { const login = createDropdown({ className: 'login-dropdown', overlayClassName: 'login-dropdown-overlay', - fragmentPath: '/fragments/login', + fragmentPath: '/framework/login', closeDelay: 200, }); diff --git a/blocks/modal/modal.css b/blocks/modal/modal.css index e26b62d..76fed33 100644 --- a/blocks/modal/modal.css +++ b/blocks/modal/modal.css @@ -192,7 +192,7 @@ body.modal-open { cursor: pointer; &:focus-visible { - outline: rgb(0 0 0 / 50%) auto 1px; + outline: rgb(0 0 0 / 50%) 1px; } } diff --git a/blocks/section-title/_section-title.json b/blocks/section-title/_section-title.json index f84cbce..0981f64 100644 --- a/blocks/section-title/_section-title.json +++ b/blocks/section-title/_section-title.json @@ -55,7 +55,8 @@ { "name": "L", "value": "size-l" }, { "name": "M", "value": "size-m" }, { "name": "S", "value": "size-s" }, - { "name": "XS", "value": "size-xs" } + { "name": "XS", "value": "size-xs" }, + { "name": "XXS", "value": "size-xxs" } ] }, { diff --git a/blocks/section-title/section-title.css b/blocks/section-title/section-title.css index 555cd96..faae85a 100644 --- a/blocks/section-title/section-title.css +++ b/blocks/section-title/section-title.css @@ -37,6 +37,10 @@ font-size: var(--heading-font-size-xs); } +.section-title.size-xxs .title, +.section-title.subtitle-size-xxs .subtitle { + font-size: var(--body-font-size-l); +} /* Icon vertical alignment: center icons with text at any size */ .section-title .title:has(.icon), .section-title .subtitle:has(.icon) { diff --git a/component-models.json b/component-models.json index 67becf5..f545adc 100644 --- a/component-models.json +++ b/component-models.json @@ -2222,6 +2222,10 @@ { "name": "XS", "value": "size-xs" + }, + { + "name": "XXS", + "value": "size-xxs" } ] }, diff --git a/styles/styles.css b/styles/styles.css index 31818d5..b9fb495 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -52,6 +52,7 @@ --gradient-pink-red: linear-gradient(to bottom, #C5767D, #9E1E29); --gradient-earn-rewards: radial-gradient(231% 135.8% at 0.9% 2.98%, #FFF6 0%, #FFF0 100%); --gradient-red: linear-gradient(92deg, #5D2227 36.27%, #982B35 70.68%, #5D2227 85.89%); + --gradient-silver-red: radial-gradient(107.48% 419.43% at -9.67% 117.43%, rgb(0 0 0 / 0%) 46.13%, rgb(0 0 0 / 20%) 94.71%), linear-gradient(0deg, var(--color-red-800), var(--color-red-800)), var(--color-white-100); --gradient-light-red: linear-gradient(97.67deg, rgb(55 10 14 / 80%) 6.64%, rgb(157 29 39 / 80%) 90.39%); --gradient-blue: linear-gradient(137deg, #08133C 4.07%, #2E3E79 75.46%); --gradient-indigo: linear-gradient(308deg, #110140 4.16%, #1E2A8E 44.91%, #010740 88.8%); @@ -251,6 +252,10 @@ main > h1:first-of-type { .center { text-align: center; + + &.columns > div > div { + justify-content: center; + } } .hide-mobile { From e060bfbc3f20e0af5f9686bd5514920fcc4e9999 Mon Sep 17 00:00:00 2001 From: Charity Helms Date: Thu, 5 Mar 2026 09:20:44 -0500 Subject: [PATCH 2/2] spacing --- blocks/section-title/section-title.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/section-title/section-title.css b/blocks/section-title/section-title.css index faae85a..d0af49a 100644 --- a/blocks/section-title/section-title.css +++ b/blocks/section-title/section-title.css @@ -41,6 +41,7 @@ .section-title.subtitle-size-xxs .subtitle { font-size: var(--body-font-size-l); } + /* Icon vertical alignment: center icons with text at any size */ .section-title .title:has(.icon), .section-title .subtitle:has(.icon) {