login dropdown fixes

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,33 +1638,34 @@ 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;
     height: 20px;
   }
 }
 
-.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;

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,
   });
 

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;
   }
 }
 

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" }
           ]
         },
         {

blocks/section-title/section-title.css

@@ -37,6 +37,11 @@
   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) {

component-models.json

@@ -2222,6 +2222,10 @@
           {
             "name": "XS",
             "value": "size-xs"
+          },
+          {
+            "name": "XXS",
+            "value": "size-xxs"
           }
         ]
       },

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 {