@digital-b2c/coreui-kit 0.14.7 → 0.15.1

package/dist/index.css

@@ -13,6 +13,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+  overscroll-behavior: none;
 }
 :root {
   --color-white: #ffffff;
@@ -296,7 +297,7 @@ a:hover {
 .Button_module_button.Button_module_primary:active {
   background: #0e0e0e;
 }
-.Button_module_button.Button_module_primary:focus {
+.Button_module_button.Button_module_primary:focus-visible {
   background:
     linear-gradient(
       0deg,
@@ -319,7 +320,7 @@ a:hover {
 .Button_module_button.Button_module_secondary:active {
   background: #e3e3e3;
 }
-.Button_module_button.Button_module_secondary:focus {
+.Button_module_button.Button_module_secondary:focus-visible {
   background: #eeeeee;
   outline: 4px solid var(--color-link);
 }
@@ -334,7 +335,7 @@ a:hover {
 .Button_module_button.Button_module_ghost:active {
   background: #c3c3c3;
 }
-.Button_module_button.Button_module_ghost:focus {
+.Button_module_button.Button_module_ghost:focus-visible {
   background: #eeeeee;
   outline: 4px solid var(--color-link);
 }
@@ -349,7 +350,7 @@ a:hover {
 .Button_module_button.Button_module_nofill:active {
   background: rgba(255, 255, 255, 0.3019607843);
 }
-.Button_module_button.Button_module_nofill:focus {
+.Button_module_button.Button_module_nofill:focus-visible {
   background: rgba(255, 255, 255, 0.2);
   outline: 4px solid var(--color-link);
 }
@@ -364,7 +365,7 @@ a:hover {
 .Button_module_button.Button_module_nofillblack:active {
   background: rgba(203, 203, 203, 0.5019607843);
 }
-.Button_module_button.Button_module_nofillblack:focus {
+.Button_module_button.Button_module_nofillblack:focus-visible {
   background: rgba(229, 229, 229, 0.5019607843);
   outline: 4px solid var(--color-link);
 }
@@ -376,6 +377,7 @@ a:hover {
   padding: 0.2813rem 0.3125rem;
   border-radius: 0;
 }
+.Button_module_button.Button_module_navnofillblack:hover,
 .Button_module_button.Button_module_navnofillblack.Button_module_active {
   z-index: 1;
   border-bottom-color: var(--nav-item-color, var(--color-black));
@@ -399,7 +401,7 @@ a:hover {
 .Button_module_button.Button_module_grey:active {
   background: rgba(93, 93, 93, 0.9019607843);
 }
-.Button_module_button.Button_module_grey:focus {
+.Button_module_button.Button_module_grey:focus-visible {
   background: rgba(255, 255, 255, 0.2);
   outline: 4px solid var(--color-link);
 }
@@ -428,7 +430,7 @@ a:hover {
 .Button_module_button.Button_module_shiny:hover {
   background: rgba(255, 255, 255, 0.2);
 }
-.Button_module_button.Button_module_shiny:focus {
+.Button_module_button.Button_module_shiny:focus-visible {
   background: transparent;
   outline: 4px solid var(--color-link);
 }
@@ -469,7 +471,7 @@ a:hover {
       var(--color-white) 0%,
       var(--color-light-gray-2) 830%);
 }
-.Button_module_button.Button_module_tabbutton:focus {
+.Button_module_button.Button_module_tabbutton:focus-visible {
   border-width: 1px 1px 0 1px;
   border-color: var(--color-light-gray-2);
   background: var(--color-white);
@@ -2104,6 +2106,207 @@ a:hover {
   text-align: center;
 }
 
+/* src/components/Search/Search.module.scss */
+.Search_module_search {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+.Search_module_searchButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-black);
+  border-radius: 0.25rem;
+  transition: background-color 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+.Search_module_searchButton:hover {
+  background-color: var(--color-darkerbg);
+}
+.Search_module_searchButton:focus-visible {
+  outline: 3px solid var(--color-link);
+}
+.Search_module_searchField {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.Search_module_searchFieldLine {
+  border-bottom: 1px solid var(--color-black);
+}
+.Search_module_searchFieldLine .Search_module_searchInput {
+  width: 220px;
+  max-width: 40vw;
+}
+.Search_module_searchFieldPill {
+  width: 100%;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid #e0e0e0;
+  border-radius: var(--rounded-full);
+}
+.Search_module_searchInput {
+  flex: 1 0 0;
+  min-width: 0;
+  padding: var(--spacing-xs) 0;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-black);
+  background: none;
+  border: none;
+  outline: none;
+}
+.Search_module_searchInput::placeholder {
+  color: var(--color-gray);
+}
+.Search_module_searchInput::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+.Search_module_searchSubmit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-black);
+}
+.Search_module_searchSubmit:focus-visible {
+  border-radius: 0.25rem;
+  outline: 3px solid var(--color-link);
+}
+
+/* src/components/UserMenu/UserMenu.module.scss */
+.UserMenu_module_userButton {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+  background-color: var(--color-white);
+  border: 1px solid #e0e0e0;
+  border-radius: 29px;
+  cursor: pointer;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.UserMenu_module_userButton:hover {
+  text-decoration: none;
+}
+.UserMenu_module_userButton:focus-visible {
+  outline: 3px solid var(--color-link);
+}
+.UserMenu_module_userMenuWrapper {
+  position: relative;
+  display: inline-flex;
+}
+.UserMenu_module_fullWidth {
+  width: 100%;
+}
+.UserMenu_module_userButton.UserMenu_module_fullWidth {
+  justify-content: flex-start;
+}
+.UserMenu_module_fullWidth .UserMenu_module_userButton {
+  width: 100%;
+  justify-content: flex-start;
+}
+.UserMenu_module_userChevron {
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.3s ease;
+}
+.UserMenu_module_userChevronOpen {
+  transform: scaleY(-1);
+}
+.UserMenu_module_userMenu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 100;
+  min-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-extra-light-gray);
+  border-radius: var(--rounded-md);
+  box-shadow:
+    0 0 3px rgba(54, 54, 54, 0.1),
+    0 0 6px rgba(54, 54, 54, 0.09),
+    0 0 8px rgba(54, 54, 54, 0.05),
+    0 0 9px rgba(54, 54, 54, 0.01);
+}
+.UserMenu_module_userMenuUp {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+.UserMenu_module_userMenuItem {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+  letter-spacing: -0.08px;
+  text-align: left;
+  white-space: nowrap;
+  color: var(--color-black);
+  background: none;
+  border: none;
+  border-radius: var(--rounded-sm);
+  text-decoration: none;
+  cursor: pointer;
+}
+.UserMenu_module_userMenuItem:hover,
+.UserMenu_module_userMenuItem:focus {
+  background-color: #eeeeee;
+  text-decoration: none;
+}
+.UserMenu_module_userMenuItem:focus-visible {
+  outline: 3px solid var(--color-link);
+  outline-offset: -1px;
+}
+.UserMenu_module_userMenuItemDanger {
+  color: #940000;
+}
+.UserMenu_module_userMenuItemDanger:hover,
+.UserMenu_module_userMenuItemDanger:focus-visible {
+  color: #940000;
+}
+.UserMenu_module_userAvatar {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.UserMenu_module_userInner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: 0 var(--spacing-sm);
+}
+.UserMenu_module_userLabel {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+  letter-spacing: -0.08px;
+  color: var(--color-black);
+  white-space: nowrap;
+}
+
 /* src/widgets/CardCollection/CardCollection.module.scss */
 .CardCollection_module_card-collection {
   display: block;
@@ -3831,8 +4034,6 @@ h5,
   }
 }
 .Navigation_module_subheading,
-.Navigation_module_dropdownLink,
-.Navigation_module_dropdownDescription,
 .Navigation_module_mobileItemLink,
 .Navigation_module_mobileItemTrigger,
 .Navigation_module_mobileSubLink {
@@ -3842,8 +4043,6 @@ h5,
 }
 @media (max-width: 768px) {
   .Navigation_module_subheading,
-  .Navigation_module_dropdownLink,
-  .Navigation_module_dropdownDescription,
   .Navigation_module_mobileItemLink,
   .Navigation_module_mobileItemTrigger,
   .Navigation_module_mobileSubLink {
@@ -3851,8 +4050,6 @@ h5,
   }
 }
 .Navigation_module_subheading strong,
-.Navigation_module_dropdownLink strong,
-.Navigation_module_dropdownDescription strong,
 .Navigation_module_mobileItemLink strong,
 .Navigation_module_mobileItemTrigger strong,
 .Navigation_module_mobileSubLink strong {
@@ -3903,7 +4100,7 @@ a:hover {
   --nav-item-color: var(--color-white);
   box-shadow: none;
 }
-.Navigation_module_navigationWrapper.Navigation_module_transparent .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
+.Navigation_module_navigationWrapper.Navigation_module_transparent .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_logo {
   filter: brightness(0) invert(1);
   transition: filter 0.3s ease;
 }
@@ -3926,17 +4123,9 @@ a:hover {
 @media (max-width: 768px) {
   .Navigation_module_navigation .Navigation_module_upperNav {
     align-items: center;
-    padding: 13px 16px;
+    padding: 13px var(--spacing-md);
   }
 }
-.Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogoLink {
-  display: inline-flex;
-  align-items: center;
-}
-.Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogoLink:focus-visible {
-  border-radius: 0.5rem;
-  outline: 3px solid var(--color-link);
-}
 .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
   width: 349px;
   height: 45px;
@@ -3969,83 +4158,30 @@ a:hover {
   z-index: 98;
   pointer-events: none;
 }
+.Navigation_module_mainLogoLink {
+  display: inline-flex;
+  align-items: center;
+}
+.Navigation_module_mainLogoLink:focus-visible {
+  border-radius: 0.5rem;
+  outline: 3px solid var(--color-link);
+}
 .Navigation_module_dropdownTrigger svg {
   transition: transform 0.3s ease;
 }
 .Navigation_module_dropdownTriggerOpen svg {
   transform: scaleY(-1);
 }
-.Navigation_module_dropdownPanel {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  background-color: var(--color-white);
-  padding: 54px 0;
-  box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.2509803922);
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity 0.2s ease, visibility 0.2s ease;
-}
-.Navigation_module_dropdownPanelOpen {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-}
-.Navigation_module_dropdownInner {
-  display: flex;
-  max-width: 1280px;
-  margin: 0 auto;
-}
-.Navigation_module_dropdownLinks {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin: 0;
-  padding: 0 97px 0 0;
-  list-style: none;
-  border-right: 2px solid #ebebeb;
-  transition: 0.2s ease-in-out;
-}
 .Navigation_module_dropdownLinkContainer {
   min-width: 386px;
 }
-.Navigation_module_dropdownLink {
-  display: inline-block;
-  white-space: nowrap;
-  color: var(--color-gray);
-  text-decoration: none;
-  transition: color 0.2s ease-in-out;
-}
-.Navigation_module_dropdownLink:hover {
-  font-weight: var(--font-weight-bold);
-  color: var(--color-true-black);
-  text-decoration: none;
-}
-.Navigation_module_dropdownLink:focus-visible {
-  font-weight: var(--font-weight-bold);
-  color: var(--color-true-black);
-  outline: 3px solid var(--color-link);
-}
-.Navigation_module_dropdownInfo {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 16px;
-  padding-left: 88px;
-}
-.Navigation_module_dropdownTitle {
-  color: #000;
-}
-.Navigation_module_dropdownDescription {
-  font-weight: var(--font-weight-regular);
-  color: var(--color-true-black);
+.Navigation_module_dropdownLinkSpacer {
+  margin-bottom: 16px;
 }
 .Navigation_module_mainLogoMobile {
-  display: block;
   width: 233px;
   height: 30px;
+  object-fit: contain;
 }
 .Navigation_module_hamburgerButton {
   display: flex;
@@ -4085,7 +4221,7 @@ a:hover {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 13px 16px;
+  padding: 13px var(--spacing-md);
   box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
 }
 .Navigation_module_mobileMenuItems {
@@ -4114,6 +4250,7 @@ a:hover {
   text-decoration: none;
 }
 .Navigation_module_mobileItemTrigger {
+  font-family: inherit;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4177,33 +4314,475 @@ a:hover {
 .Navigation_module_mobileMenuCtas > *:first-child {
   border: 1px solid var(--secondary-states-outlinedBorder, #c2c2c2);
 }
-
-/* src/widgets/PracticePathCards/PracticePathCards.module.scss */
-.PracticePathCards_module_practice-path-cards {
-  display: block;
+.Navigation_module_Navigation {
+  position: sticky;
+  top: 0;
+  z-index: 99;
   width: 100%;
   background-color: var(--color-white);
 }
-.PracticePathCards_module_practice-path-cards h2 {
-  color: var(--color-black);
+.Navigation_module_Navigation.Navigation_module_dropdownOpen .Navigation_module_mainBar {
+  box-shadow: none;
 }
-.PracticePathCards_module_practice-path-cards .PracticePathCards_module_container {
+.Navigation_module_Navigation.Navigation_module_variantTransparent {
+  position: fixed;
+}
+.Navigation_module_Navigation.Navigation_module_transparent {
+  background-color: transparent;
+  --nav-item-color: var(--color-white);
+}
+.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_mainBar {
+  background-color: transparent;
+  box-shadow: none;
+}
+.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_logo {
+  filter: brightness(0) invert(1);
+  transition: filter 0.3s ease;
+}
+.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink {
+  color: var(--color-white);
+}
+.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink:hover,
+.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink:focus,
+.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink:focus-visible {
+  border-bottom-color: var(--color-white);
+}
+.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive {
+  border-bottom-color: var(--color-white);
+}
+.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive:hover,
+.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive:focus {
+  border-bottom-color: var(--color-white);
+}
+.Navigation_module_mainBar {
+  width: 100%;
+  background-color: var(--color-white);
+  padding: var(--spacing-md) var(--spacing-7xl);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
+}
+@media (max-width: 768px) {
+  .Navigation_module_mainBar {
+    padding: 13px var(--spacing-md);
+  }
+}
+.Navigation_module_inner {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xl);
+  gap: var(--spacing-sm);
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
 }
-.PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper {
+.Navigation_module_topRow {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-xl);
+  gap: var(--spacing-md);
+  min-height: 52px;
 }
 @media (max-width: 768px) {
-  .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper {
-    flex-direction: column;
+  .Navigation_module_topRow {
+    min-height: 0;
   }
-  .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper .PracticePathCards_module_ctaWrapper {
-    width: 100%;
+}
+.Navigation_module_topRow .Navigation_module_upperRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.Navigation_module_logoLink {
+  display: inline-flex;
+  align-items: center;
+}
+.Navigation_module_logoLink:focus-visible {
+  border-radius: 0.5rem;
+  outline: 3px solid var(--color-link);
+}
+.Navigation_module_logo {
+  width: 349px;
+  height: 48px;
+  object-fit: contain;
+}
+.Navigation_module_logoMobile {
+  width: 233px;
+  height: 30px;
+  object-fit: contain;
+}
+.Navigation_module_hamburger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.Navigation_module_hamburger:focus-visible {
+  border-radius: 0.25rem;
+  outline: 3px solid var(--color-link);
+}
+.Navigation_module_bottomRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xl);
+  min-height: 33px;
+}
+.Navigation_module_navTabs {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xl);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-width: 0;
+}
+@media (max-width: 1024px) {
+  .Navigation_module_navTabs {
+    overflow-x: auto;
+    scrollbar-width: none;
+    padding: 5px;
+    margin: -5px;
+  }
+  .Navigation_module_navTabs::-webkit-scrollbar {
+    display: none;
+  }
+}
+.Navigation_module_navTab {
+  display: block;
+  flex-shrink: 0;
+}
+.Navigation_module_navTabLink {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  height: 33px;
+  padding: 0 var(--spacing-xs);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.5;
+  letter-spacing: -0.08px;
+  color: var(--color-black);
+  text-decoration: none;
+  white-space: nowrap;
+  border-bottom: 3px solid transparent;
+  transition: border-color 0.2s ease;
+}
+.Navigation_module_navTabLink:hover,
+.Navigation_module_navTabLink:focus {
+  text-decoration: none;
+  border-bottom-color: var(--color-black);
+}
+.Navigation_module_navTabLink:focus-visible {
+  outline: 3px solid var(--color-link);
+  outline-offset: 2px;
+  border-bottom-color: var(--color-black);
+}
+.Navigation_module_navTabTrigger {
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  cursor: pointer;
+}
+.Navigation_module_navTabTrigger svg {
+  transition: transform 0.3s ease;
+}
+.Navigation_module_navTabTriggerOpen svg {
+  transform: scaleY(-1);
+}
+.Navigation_module_navTabActive {
+  border-bottom-color: var(--color-black);
+}
+.Navigation_module_navTabActive:hover,
+.Navigation_module_navTabActive:focus {
+  border-bottom-color: var(--color-black);
+}
+.Navigation_module_dropdownPanel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  z-index: 1;
+  background-color: var(--color-white);
+  padding: var(--spacing-xl) 97px;
+  box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.25);
+}
+.Navigation_module_dropdownInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 88px;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+.Navigation_module_dropdownLinks {
+  display: flex;
+  flex-direction: column;
+  width: 386px;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.Navigation_module_dropdownLinkItem {
+  display: flex;
+}
+.Navigation_module_dropdownLink {
+  flex: 1 0 0;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.4;
+  letter-spacing: -0.2px;
+  color: var(--color-gray);
+  text-decoration: none;
+  transition: color 0.2s ease-in-out;
+}
+.Navigation_module_dropdownLink:hover,
+.Navigation_module_dropdownLink:focus {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-true-black);
+  text-decoration: none;
+}
+.Navigation_module_dropdownLink:focus-visible {
+  outline: 3px solid var(--color-link);
+  outline-offset: 2px;
+}
+.Navigation_module_dropdownDivider {
+  width: 2px;
+  height: 160px;
+  flex-shrink: 0;
+  background-color: #ebebeb;
+}
+.Navigation_module_dropdownInfo {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  width: 682px;
+  color: var(--color-true-black);
+}
+.Navigation_module_dropdownTitle {
+  color: var(--color-true-black);
+}
+.Navigation_module_dropdownDescription {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-regular);
+  line-height: 1.4;
+  letter-spacing: -0.2px;
+  color: var(--color-true-black);
+}
+.Navigation_module_brandBars {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+.Navigation_module_brandBar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 8px;
+  transition: height 0.35s ease;
+}
+.Navigation_module_brandBarsUnfolded .Navigation_module_brandBar {
+  height: 95px;
+  box-shadow: 0px 0px 4px rgba(54, 54, 54, 0.1);
+}
+.Navigation_module_brandBarsUnfolded .Navigation_module_brandLogo {
+  opacity: 1;
+}
+.Navigation_module_brandLogo {
+  max-width: 80%;
+  max-height: 70px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  pointer-events: none;
+}
+.Navigation_module_lenscrafters {
+  flex: 366 0 0;
+  background-color: var(--color-lenscrafter-blue);
+}
+.Navigation_module_forEyes {
+  flex: 360 0 0;
+  background-color: var(--color-foreyes-brown);
+}
+.Navigation_module_optical {
+  flex: 360 0 0;
+  background-color: var(--color-targetoptical-red);
+}
+.Navigation_module_pearleVision {
+  flex: 354 0 0;
+  background-color: var(--color-pearlevision-green);
+}
+.Navigation_module_internalMobileMenu {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-white);
+  overflow-y: auto;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+.Navigation_module_internalMobileMenuOpen {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.Navigation_module_mobileHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px var(--spacing-md);
+}
+.Navigation_module_mobileClose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.Navigation_module_mobileClose:focus-visible {
+  border-radius: 0.25rem;
+  outline: 3px solid var(--color-link);
+}
+.Navigation_module_mobileBrandBars {
+  display: flex;
+  width: 100%;
+}
+.Navigation_module_mobileItems {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: var(--spacing-lg) var(--spacing-md);
+  list-style: none;
+}
+.Navigation_module_internalMobileItem {
+  border-bottom: 1px solid #ebebeb;
+}
+.Navigation_module_internalMobileItemLink {
+  display: block;
+  padding: var(--spacing-md) 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-black);
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.Navigation_module_internalMobileItemLink:hover,
+.Navigation_module_internalMobileItemLink:focus-visible {
+  text-decoration: none;
+}
+.Navigation_module_internalMobileItemTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--spacing-md) 0;
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  text-align: left;
+  color: var(--color-black);
+  background: none;
+  border: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.Navigation_module_internalMobileItemChevron {
+  display: flex;
+  align-items: center;
+  transform: rotate(-90deg);
+  transition: transform 0.3s ease;
+}
+.Navigation_module_internalMobileItemChevronOpen {
+  transform: rotate(0deg);
+}
+.Navigation_module_internalMobileSubItems {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease;
+}
+.Navigation_module_internalMobileSubItemsOpen {
+  grid-template-rows: 1fr;
+}
+.Navigation_module_internalMobileSubItemsInner {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.Navigation_module_internalMobileSubItemsInner li:first-child .Navigation_module_internalMobileSubLink {
+  padding-top: var(--spacing-sm);
+}
+.Navigation_module_internalMobileSubItemsInner li:last-child .Navigation_module_internalMobileSubLink {
+  padding-bottom: var(--spacing-md);
+}
+.Navigation_module_internalMobileSubLink {
+  display: block;
+  padding-left: var(--spacing-lg);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-gray);
+  text-decoration: none;
+}
+.Navigation_module_internalMobileSubLink:hover,
+.Navigation_module_internalMobileSubLink:focus-visible {
+  color: var(--color-true-black);
+  text-decoration: none;
+}
+.Navigation_module_mobileFooter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+}
+
+/* src/widgets/PracticePathCards/PracticePathCards.module.scss */
+.PracticePathCards_module_practice-path-cards {
+  display: block;
+  width: 100%;
+  background-color: var(--color-white);
+}
+.PracticePathCards_module_practice-path-cards h2 {
+  color: var(--color-black);
+}
+.PracticePathCards_module_practice-path-cards .PracticePathCards_module_container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+}
+.PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xl);
+}
+@media (max-width: 768px) {
+  .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper {
+    flex-direction: column;
+  }
+  .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper .PracticePathCards_module_ctaWrapper {
+    width: 100%;
     padding: 0 var(--spacing-lg);
   }
   .PracticePathCards_module_practice-path-cards .PracticePathCards_module_wrapper .PracticePathCards_module_ctaWrapper .PracticePathCards_module_cta {
@@ -5683,4 +6262,135 @@ a:hover {
   width: 100%;
   aspect-ratio: 16/9;
 }
+
+/* src/widgets/QuoteSectionBlock/QuoteSectionBlock.module.scss */
+.QuoteSectionBlock_module_quoteSectionBlock {
+  background-color: #f3f3f3;
+  padding: 48px 80px;
+  width: 100%;
+}
+@media (max-width: 768px) {
+  .QuoteSectionBlock_module_quoteSectionBlock {
+    padding: 24px 16px;
+  }
+}
+.QuoteSectionBlock_module_inner {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+.QuoteSectionBlock_module_title {
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.64px;
+  text-align: center;
+  margin-bottom: 32px;
+  color: var(--color-black);
+}
+@media (max-width: 768px) {
+  .QuoteSectionBlock_module_title {
+    font-size: 24px;
+    line-height: 1.2;
+    margin-bottom: 24px;
+  }
+}
+.QuoteSectionBlock_module_swiperContainer {
+  position: relative;
+  overflow: hidden;
+}
+.QuoteSectionBlock_module_swiperContainer .swiper {
+  overflow: visible;
+}
+.QuoteSectionBlock_module_swiperContainer .swiper-wrapper {
+  align-items: stretch;
+}
+.QuoteSectionBlock_module_swiperContainer .swiper-slide {
+  width: 80%;
+  height: auto;
+}
+@media (max-width: 768px) {
+  .QuoteSectionBlock_module_swiperContainer .swiper-slide {
+    width: 100%;
+  }
+}
+.QuoteSectionBlock_module_card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: white;
+  border-radius: 32px;
+  padding: 40px;
+  min-height: 403px;
+  height: 100%;
+  box-shadow:
+    0 0 10px 0 rgba(54, 54, 54, 0),
+    0 0 9px 0 rgba(54, 54, 54, 0.01),
+    0 0 8px 0 rgba(54, 54, 54, 0.05),
+    0 0 6px 0 rgba(54, 54, 54, 0.09),
+    0 0 3px 0 rgba(54, 54, 54, 0.1);
+}
+@media (max-width: 768px) {
+  .QuoteSectionBlock_module_card {
+    padding: 24px;
+    min-height: 543px;
+  }
+}
+.QuoteSectionBlock_module_quoteLogo {
+  height: 32px;
+  width: auto;
+  object-fit: contain;
+  margin-bottom: 24px;
+  align-self: flex-start;
+}
+.QuoteSectionBlock_module_bodyText {
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1.4;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--color-black);
+}
+@media (max-width: 768px) {
+  .QuoteSectionBlock_module_bodyText {
+    font-size: 16px;
+    line-height: 1.5;
+    letter-spacing: -0.08px;
+  }
+}
+.QuoteSectionBlock_module_attribution {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 24px;
+}
+.QuoteSectionBlock_module_displayPhoto {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.QuoteSectionBlock_module_displayName {
+  font-size: 14px;
+  font-weight: 600;
+}
+.QuoteSectionBlock_module_attributionText {
+  display: grid;
+}
+.QuoteSectionBlock_module_jobTitleLogo {
+  height: 13px;
+  width: auto;
+  object-fit: contain;
+}
+.QuoteSectionBlock_module_controls {
+  justify-content: center;
+  margin-top: 32px;
+}
+@media (max-width: 768px) {
+  .QuoteSectionBlock_module_controls {
+    margin-top: 24px;
+  }
+}
 /*# sourceMappingURL=index.css.map */