@digital-b2c/coreui-kit 0.17.0 → 0.17.1

package/dist/index.css

@@ -107,6 +107,22 @@ html {
   white-space: nowrap;
   border: 0;
 }
+.text-left,
+.align--left {
+  text-align: left;
+}
+.text-center,
+.align--center {
+  text-align: center;
+}
+.text-right,
+.align--right {
+  text-align: right;
+}
+.text-justified,
+.align--justify {
+  text-align: justify;
+}
 @font-face {
   font-family: "Instrument Sans";
   font-weight: 400 700;
@@ -4125,7 +4141,194 @@ a:hover {
   }
 }
 
-/* src/widgets/Navigation/Navigation.module.scss */
+/* src/widgets/Navigation/NavigationLogo.module.scss */
+.NavigationLogo_module_mainLogoLink {
+  display: inline-flex;
+  align-items: center;
+}
+.NavigationLogo_module_mainLogoLink:focus-visible {
+  border-radius: 0.5rem;
+  outline: 3px solid var(--color-link);
+}
+
+/* src/widgets/Navigation/NavigationBrandBars.module.scss */
+.NavigationBrandBars_module_brandBars {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+.NavigationBrandBars_module_brandBar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  height: 8px;
+  padding: 0 51px;
+  transition:
+    height 0.35s ease,
+    padding 0.35s ease,
+    box-shadow 0.35s ease;
+}
+@media (max-width: 768px) {
+  .NavigationBrandBars_module_brandBar {
+    padding: 0 var(--spacing-md);
+  }
+}
+.NavigationBrandBars_module_brandBar:first-child {
+  align-items: flex-end;
+  padding-left: 0;
+}
+.NavigationBrandBars_module_brandBar:last-child {
+  align-items: flex-start;
+  padding-right: 0;
+}
+.NavigationBrandBars_module_brandBar:not(:first-child):not(:last-child) {
+  max-width: 360px;
+}
+.NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar {
+  height: 95px;
+  box-shadow: 0 0 4px rgba(54, 54, 54, 0.1);
+  padding: 24px 51px;
+  transition:
+    height 0.35s ease 0.3s,
+    padding 0.35s ease 0.3s,
+    box-shadow 0.35s ease 0.3s;
+}
+@media (max-width: 768px) {
+  .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar {
+    height: 64px;
+    padding: var(--spacing-md);
+  }
+}
+.NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:first-child {
+  padding-left: 0;
+}
+@media (max-width: 768px) {
+  .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:first-child {
+    padding-left: var(--spacing-md);
+  }
+}
+.NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:last-child {
+  padding-right: 0;
+}
+@media (max-width: 768px) {
+  .NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandBar:last-child {
+    padding-right: var(--spacing-md);
+  }
+}
+.NavigationBrandBars_module_brandBarsUnfolded .NavigationBrandBars_module_brandLogo {
+  opacity: 1;
+  transition: opacity 0.35s ease 0.3s;
+}
+.NavigationBrandBars_module_brandLogo {
+  max-width: 100%;
+  max-height: 70px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  pointer-events: none;
+}
+@media (max-width: 768px) {
+  .NavigationBrandBars_module_brandLogo {
+    max-height: 40px;
+  }
+}
+.NavigationBrandBars_module_lenscrafters {
+  flex: 366 0 0;
+  background-color: var(--color-lenscrafter-blue);
+}
+.NavigationBrandBars_module_forEyes {
+  flex: 360 0 0;
+  background-color: var(--color-foreyes-brown);
+}
+.NavigationBrandBars_module_optical {
+  flex: 360 0 0;
+  background-color: var(--color-targetoptical-red);
+}
+.NavigationBrandBars_module_pearleVision {
+  flex: 354 0 0;
+  background-color: var(--color-pearlevision-green);
+}
+
+/* src/widgets/Navigation/NavigationDesktop.module.scss */
+.NavigationDesktop_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) {
+  .NavigationDesktop_module_navTabs {
+    overflow-x: auto;
+    scrollbar-width: none;
+    padding: 5px;
+    margin: -5px;
+  }
+  .NavigationDesktop_module_navTabs::-webkit-scrollbar {
+    display: none;
+  }
+}
+.NavigationDesktop_module_navTab {
+  display: block;
+  flex-shrink: 0;
+}
+.NavigationDesktop_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(--nav-tab-color, var(--color-black));
+  text-decoration: none;
+  white-space: nowrap;
+  border-bottom: 3px solid transparent;
+  transition: border-color 0.2s ease, color 0.3s ease;
+}
+.NavigationDesktop_module_navTabLink:hover,
+.NavigationDesktop_module_navTabLink:focus {
+  text-decoration: none;
+  border-bottom-color: var(--nav-tab-accent, var(--color-black));
+}
+.NavigationDesktop_module_navTabLink:focus-visible {
+  outline: 3px solid var(--color-link);
+  outline-offset: 2px;
+  border-bottom-color: var(--nav-tab-accent, var(--color-black));
+}
+.NavigationDesktop_module_navTabTrigger {
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  cursor: pointer;
+}
+.NavigationDesktop_module_navTabTrigger svg {
+  filter: var(--nav-trigger-svg-filter, none);
+  transition: transform 0.3s ease, filter 0.3s ease;
+}
+.NavigationDesktop_module_navTabTriggerOpen svg {
+  transform: scaleY(-1);
+}
+.NavigationDesktop_module_navTabActive {
+  border-bottom-color: var(--nav-tab-accent, var(--color-black));
+}
+.NavigationDesktop_module_navTabActive:hover,
+.NavigationDesktop_module_navTabActive:focus {
+  border-bottom-color: var(--nav-tab-accent, var(--color-black));
+}
+
+/* src/widgets/Navigation/NavigationDropdown.module.scss */
 html,
 body {
   font-family: "Instrument Sans", sans-serif;
@@ -4135,102 +4338,93 @@ body {
   color: #4d4d4d;
 }
 h1,
-.Navigation_module_h1 {
+.NavigationDropdown_module_h1 {
   font-size: 3rem;
   font-weight: 600;
   line-height: 1.17;
 }
 @media (max-width: 768px) {
   h1,
-  .Navigation_module_h1 {
+  .NavigationDropdown_module_h1 {
     font-size: 2rem;
   }
 }
 h2,
-.Navigation_module_h2,
-.Navigation_module_dropdownTitle {
+.NavigationDropdown_module_h2,
+.NavigationDropdown_module_dropdownTitle {
   font-size: 2.5rem;
   font-weight: 600;
   line-height: 1.2;
 }
 @media (max-width: 768px) {
   h2,
-  .Navigation_module_h2,
-  .Navigation_module_dropdownTitle {
+  .NavigationDropdown_module_h2,
+  .NavigationDropdown_module_dropdownTitle {
     font-size: 1.5rem;
   }
 }
 h3,
-.Navigation_module_h3 {
+.NavigationDropdown_module_h3 {
   font-size: 2rem;
   font-weight: 600;
   line-height: 1.25;
 }
 @media (max-width: 768px) {
   h3,
-  .Navigation_module_h3 {
+  .NavigationDropdown_module_h3 {
     font-size: 1.25rem;
   }
 }
 h4,
-.Navigation_module_h4 {
+.NavigationDropdown_module_h4 {
   font-size: 1.5rem;
   font-weight: 600;
   line-height: 1.33;
 }
 @media (max-width: 768px) {
   h4,
-  .Navigation_module_h4 {
+  .NavigationDropdown_module_h4 {
     font-size: 18px;
   }
 }
 h5,
-.Navigation_module_h5 {
+.NavigationDropdown_module_h5 {
   font-size: 1.25rem;
   font-weight: 500;
   line-height: 1.4;
 }
 @media (max-width: 768px) {
   h5,
-  .Navigation_module_h5 {
+  .NavigationDropdown_module_h5 {
     font-size: 18px;
   }
 }
-.Navigation_module_subheading,
-.Navigation_module_mobileItemLink,
-.Navigation_module_mobileItemTrigger,
-.Navigation_module_mobileSubLink {
+.NavigationDropdown_module_subheading {
   font-size: 1.25rem;
   font-weight: 500;
   line-height: 1.4;
 }
 @media (max-width: 768px) {
-  .Navigation_module_subheading,
-  .Navigation_module_mobileItemLink,
-  .Navigation_module_mobileItemTrigger,
-  .Navigation_module_mobileSubLink {
+  .NavigationDropdown_module_subheading {
     font-size: 18px;
   }
 }
-.Navigation_module_subheading strong,
-.Navigation_module_mobileItemLink strong,
-.Navigation_module_mobileItemTrigger strong,
-.Navigation_module_mobileSubLink strong {
+.NavigationDropdown_module_subheading strong {
   font-weight: 500;
   color: #000000;
 }
-.Navigation_module_body {
+.NavigationDropdown_module_body {
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.5;
 }
 small,
-.Navigation_module_small {
+.NavigationDropdown_module_small {
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.5;
 }
-.Navigation_module_smallest {
+.NavigationDropdown_module_smallest {
   font-size: 0.75rem;
   font-weight: 500;
   line-height: 1.5;
@@ -4243,349 +4437,214 @@ a {
 a:hover {
   text-decoration: underline;
 }
-.Navigation_module_navigationWrapper {
-  position: sticky;
-  top: 0;
-  z-index: 99;
-  width: 100%;
+.NavigationDropdown_module_dropdownPanel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  z-index: 1;
   background-color: var(--color-white);
-  transition: background-color 0.3s ease;
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
-}
-.Navigation_module_navigationWrapper.Navigation_module_dropdownOpen {
-  box-shadow: none;
-}
-.Navigation_module_navigationWrapper.Navigation_module_variantTransparent {
-  position: fixed;
-}
-.Navigation_module_navigationWrapper.Navigation_module_transparent {
-  background-color: transparent;
-  --nav-item-color: var(--color-white);
-  box-shadow: none;
-}
-.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;
+  padding: var(--spacing-xl) 97px;
+  box-shadow: 0 6px 8px -4px rgba(0, 0, 0, 0.25);
 }
-.Navigation_module_navigation {
-  max-height: 7.5625rem;
-  width: 100%;
+.NavigationDropdown_module_dropdownInner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 88px;
   max-width: 1280px;
   margin: 0 auto;
-  padding: var(--spacing-md) 0;
-}
-@media (max-width: 768px) {
-  .Navigation_module_navigation {
-    padding: 0;
-  }
-}
-.Navigation_module_navigation .Navigation_module_upperNav {
-  display: flex;
-  justify-content: space-between;
-}
-@media (max-width: 768px) {
-  .Navigation_module_navigation .Navigation_module_upperNav {
-    align-items: center;
-    padding: 13px var(--spacing-md);
-  }
 }
-.Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
-  width: 349px;
-  height: 45px;
-}
-@media (max-width: 768px) {
-  .Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_mainLogo {
-    width: 233px;
-    height: 30px;
-  }
-}
-.Navigation_module_navigation .Navigation_module_upperNav .Navigation_module_upperRight {
-  display: flex;
-  gap: 8px;
-}
-.Navigation_module_navigation .Navigation_module_lowerNav {
+.NavigationDropdown_module_dropdownLinks {
   display: flex;
-  gap: 32px;
-  list-style: none;
+  flex-direction: column;
+  width: 386px;
+  flex-shrink: 0;
   margin: 0;
   padding: 0;
+  list-style: none;
 }
-.Navigation_module_navigation .Navigation_module_lowerNavItem {
-  display: block;
+.NavigationDropdown_module_dropdownLinkItem {
+  display: flex;
 }
-.Navigation_module_overlay {
-  position: fixed;
-  inset: 0;
-  background-color: var(--color-black);
-  opacity: 0.5;
-  z-index: 98;
-  pointer-events: none;
+.NavigationDropdown_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_mainLogoLink {
-  display: inline-flex;
-  align-items: center;
+.NavigationDropdown_module_dropdownLink:hover,
+.NavigationDropdown_module_dropdownLink:focus {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-true-black);
+  text-decoration: none;
 }
-.Navigation_module_mainLogoLink:focus-visible {
-  border-radius: 0.5rem;
+.NavigationDropdown_module_dropdownLink:focus-visible {
   outline: 3px solid var(--color-link);
+  outline-offset: 2px;
 }
-.Navigation_module_dropdownTrigger svg {
-  transition: transform 0.3s ease;
-}
-.Navigation_module_dropdownTriggerOpen svg {
-  transform: scaleY(-1);
-}
-.Navigation_module_dropdownLinkContainer {
-  min-width: 386px;
-}
-.Navigation_module_dropdownLinkSpacer {
+.NavigationDropdown_module_dropdownLinkSpacer {
   margin-bottom: 16px;
 }
-.Navigation_module_mainLogoMobile {
-  width: 233px;
-  height: 30px;
-  object-fit: contain;
+.NavigationDropdown_module_dropdownDivider {
+  width: 2px;
+  height: 160px;
+  flex-shrink: 0;
+  background-color: #ebebeb;
 }
-.Navigation_module_hamburgerButton {
+.NavigationDropdown_module_dropdownInfo {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  width: 682px;
+  color: var(--color-true-black);
 }
-.Navigation_module_hamburgerButton:focus-visible {
-  border-radius: 0.25rem;
-  outline: 3px solid var(--color-link);
-}
-.Navigation_module_mobileMenu {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  background-color: var(--color-white);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-.Navigation_module_mobileMenuOpen {
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-}
-.Navigation_module_mobileMenuHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 13px var(--spacing-md);
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2509803922);
-}
-.Navigation_module_mobileMenuItems {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  margin: 0;
-  padding: 24px var(--spacing-md);
-  list-style: none;
-}
-.Navigation_module_mobileItem {
-  padding-bottom: var(--spacing-sm);
-  border-bottom: 1px solid #ebebeb;
-}
-.Navigation_module_mobileItemLink {
-  display: block;
+.NavigationDropdown_module_dropdownTitle {
   color: var(--color-true-black);
-  text-decoration: none;
-  padding-bottom: var(--spacing-sm);
-  border-bottom: 1px solid #ebebeb;
-  -webkit-tap-highlight-color: transparent;
 }
-.Navigation_module_mobileItemLink:hover,
-.Navigation_module_mobileItemLink:focus-visible {
-  text-decoration: none;
-}
-.Navigation_module_mobileItemTrigger {
-  font-family: inherit;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  background: none;
-  border: none;
-  text-align: left;
-  color: var(--color-true-black);
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-.Navigation_module_mobileItemChevron {
-  display: flex;
-  align-items: center;
-  transform: rotate(-90deg);
-  transition: transform 0.3s ease;
-}
-.Navigation_module_mobileItemChevronOpen {
-  transform: rotate(0deg);
-}
-.Navigation_module_mobileSubItems {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.3s ease;
-}
-.Navigation_module_mobileSubItemsOpen {
-  grid-template-rows: 1fr;
-}
-.Navigation_module_mobileSubItemsInner {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.Navigation_module_mobileSubItemsInner li:first-child .Navigation_module_mobileSubLink {
-  padding-top: var(--spacing-md);
-}
-.Navigation_module_mobileSubLink {
-  display: block;
+.NavigationDropdown_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);
-  text-decoration: none;
-  padding-left: var(--spacing-lg);
-  font-weight: var(--font-weight-medium);
 }
-.Navigation_module_mobileSubLink:hover,
-.Navigation_module_mobileSubLink:focus-visible {
-  font-weight: var(--font-weight-bold);
-  text-decoration: none;
-}
-.Navigation_module_mobileSubLinkActive {
-  font-weight: var(--font-weight-bold);
-}
-.Navigation_module_mobileMenuCtas {
-  position: sticky;
-  bottom: 0;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-md);
-  background-color: var(--color-white);
-}
-.Navigation_module_mobileMenuCtas > * {
-  width: 100%;
-  height: 48px;
-}
-.Navigation_module_mobileMenuCtas > *:first-child {
-  border: 1px solid var(--secondary-states-outlinedBorder, #c2c2c2);
-}
-.Navigation_module_Navigation {
-  position: sticky;
-  top: 0;
-  z-index: 99;
-  width: 100%;
-  background-color: var(--color-white);
-  transition: background-color 0.3s ease;
+
+/* src/widgets/Navigation/NavigationMobile.module.scss */
+html,
+body {
+  font-family: "Instrument Sans", sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
+  color: #4d4d4d;
 }
-.Navigation_module_Navigation.Navigation_module_dropdownOpen .Navigation_module_mainBar {
-  box-shadow: none;
+h1,
+.NavigationMobile_module_h1 {
+  font-size: 3rem;
+  font-weight: 600;
+  line-height: 1.17;
 }
-.Navigation_module_Navigation.Navigation_module_variantTransparent {
-  position: fixed;
+@media (max-width: 768px) {
+  h1,
+  .NavigationMobile_module_h1 {
+    font-size: 2rem;
+  }
 }
-.Navigation_module_Navigation.Navigation_module_transparent {
-  background-color: transparent;
-  --nav-item-color: var(--color-white);
+h2,
+.NavigationMobile_module_h2 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  line-height: 1.2;
 }
-.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_mainBar {
-  background-color: transparent;
-  box-shadow: none;
+@media (max-width: 768px) {
+  h2,
+  .NavigationMobile_module_h2 {
+    font-size: 1.5rem;
+  }
 }
-.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_logo {
-  filter: brightness(0) invert(1);
-  transition: filter 0.3s ease;
+h3,
+.NavigationMobile_module_h3 {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1.25;
 }
-.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabLink {
-  color: var(--color-white);
+@media (max-width: 768px) {
+  h3,
+  .NavigationMobile_module_h3 {
+    font-size: 1.25rem;
+  }
 }
-.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);
+h4,
+.NavigationMobile_module_h4 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.33;
 }
-.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabTrigger svg {
-  filter: brightness(0) invert(1);
+@media (max-width: 768px) {
+  h4,
+  .NavigationMobile_module_h4 {
+    font-size: 18px;
+  }
 }
-.Navigation_module_Navigation.Navigation_module_transparent .Navigation_module_navTabActive {
-  border-bottom-color: var(--color-white);
+h5,
+.NavigationMobile_module_h5 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.4;
 }
-.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);
+@media (max-width: 768px) {
+  h5,
+  .NavigationMobile_module_h5 {
+    font-size: 18px;
+  }
 }
-.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);
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+.NavigationMobile_module_subheading,
+.NavigationMobile_module_mobileItemLink,
+.NavigationMobile_module_mobileItemTrigger,
+.NavigationMobile_module_mobileSubLink {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.4;
 }
 @media (max-width: 768px) {
-  .Navigation_module_mainBar {
-    padding: 13px var(--spacing-md);
+  .NavigationMobile_module_subheading,
+  .NavigationMobile_module_mobileItemLink,
+  .NavigationMobile_module_mobileItemTrigger,
+  .NavigationMobile_module_mobileSubLink {
+    font-size: 18px;
   }
 }
-.Navigation_module_inner {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  width: 100%;
-  max-width: 1280px;
-  margin: 0 auto;
+.NavigationMobile_module_subheading strong,
+.NavigationMobile_module_mobileItemLink strong,
+.NavigationMobile_module_mobileItemTrigger strong,
+.NavigationMobile_module_mobileSubLink strong {
+  font-weight: 500;
+  color: #000000;
 }
-.Navigation_module_topRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  min-height: 52px;
+.NavigationMobile_module_body {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
 }
-@media (max-width: 768px) {
-  .Navigation_module_topRow {
-    min-height: 0;
-  }
+small,
+.NavigationMobile_module_small {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.5;
 }
-.Navigation_module_topRow .Navigation_module_upperRight {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.NavigationMobile_module_smallest {
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+a {
+  color: var(--color-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+a:hover {
+  text-decoration: underline;
 }
-.Navigation_module_logoLink {
+.NavigationMobile_module_logoLink {
   display: inline-flex;
   align-items: center;
 }
-.Navigation_module_logoLink:focus-visible {
+.NavigationMobile_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 {
+.NavigationMobile_module_logoMobile,
+.NavigationMobile_module_mainLogoMobile {
   width: 233px;
   height: 30px;
   object-fit: contain;
 }
-.Navigation_module_hamburger {
+.NavigationMobile_module_hamburgerButton {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4597,263 +4656,151 @@ a:hover {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
-.Navigation_module_hamburger:focus-visible {
+.NavigationMobile_module_hamburgerButton:focus-visible {
   border-radius: 0.25rem;
   outline: 3px solid var(--color-link);
 }
-.Navigation_module_bottomRow {
+.NavigationMobile_module_mobileClose {
   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;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
   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, color 0.3s 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;
+  border: none;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
-.Navigation_module_navTabTrigger svg {
-  transition: transform 0.3s ease, filter 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);
+.NavigationMobile_module_mobileClose:focus-visible {
+  border-radius: 0.25rem;
+  outline: 3px solid var(--color-link);
 }
-.Navigation_module_dropdownPanel {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 100%;
-  z-index: 1;
+.NavigationMobile_module_mobileMenu {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
   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;
+  overflow-y: auto;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
 }
-.Navigation_module_dropdownLink:focus-visible {
-  outline: 3px solid var(--color-link);
-  outline-offset: 2px;
+.NavigationMobile_module_mobileMenuOpen {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
 }
-.Navigation_module_dropdownDivider {
-  width: 2px;
-  height: 160px;
-  flex-shrink: 0;
-  background-color: #ebebeb;
+.NavigationMobile_module_mobileMenuHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px var(--spacing-md);
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25);
 }
-.Navigation_module_dropdownInfo {
+.NavigationMobile_module_mobileMenuItems {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
-  width: 682px;
-  color: var(--color-true-black);
+  margin: 0;
+  padding: 24px var(--spacing-md);
+  list-style: none;
 }
-.Navigation_module_dropdownTitle {
-  color: var(--color-true-black);
+.NavigationMobile_module_mobileItem {
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid #ebebeb;
 }
-.Navigation_module_dropdownDescription {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-regular);
-  line-height: 1.4;
-  letter-spacing: -0.2px;
+.NavigationMobile_module_mobileItemLink {
+  display: block;
   color: var(--color-true-black);
+  text-decoration: none;
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid #ebebeb;
+  -webkit-tap-highlight-color: transparent;
+}
+.NavigationMobile_module_mobileItemLink:hover,
+.NavigationMobile_module_mobileItemLink:focus-visible {
+  text-decoration: none;
 }
-.Navigation_module_brandBars {
+.NavigationMobile_module_mobileItemTrigger {
+  font-family: inherit;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
-  overflow: hidden;
+  background: none;
+  border: none;
+  text-align: left;
+  color: var(--color-true-black);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
-.Navigation_module_brandBar {
+.NavigationMobile_module_mobileItemChevron {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  height: 8px;
-  padding: 0 51px;
-  transition:
-    height 0.35s ease 0.3s,
-    padding 0.35s ease 0.3s,
-    box-shadow 0.35s ease 0.3s;
-}
-@media (max-width: 768px) {
-  .Navigation_module_brandBar {
-    padding: 0 var(--spacing-md);
-  }
-}
-.Navigation_module_brandBar:first-child {
-  align-items: flex-end;
-  padding-left: 0;
-}
-.Navigation_module_brandBar:last-child {
-  align-items: flex-start;
-  padding-right: 0;
-}
-.Navigation_module_brandBar:not(:first-child):not(:last-child) {
-  max-width: 360px;
-}
-.Navigation_module_brandBarsUnfolded .Navigation_module_brandBar {
-  height: 95px;
-  box-shadow: 0px 0px 4px rgba(54, 54, 54, 0.1);
-  padding: 24px 51px;
-  transition:
-    height 0.35s ease,
-    padding 0.35s ease,
-    box-shadow 0.35s ease;
-}
-@media (max-width: 768px) {
-  .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar {
-    height: 64px;
-    padding: var(--spacing-md);
-  }
+  transform: rotate(-90deg);
+  transition: transform 0.3s ease;
 }
-.Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:first-child {
-  padding-left: 0;
+.NavigationMobile_module_mobileItemChevronOpen {
+  transform: rotate(0deg);
 }
-@media (max-width: 768px) {
-  .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:first-child {
-    padding-left: var(--spacing-md);
-  }
+.NavigationMobile_module_mobileSubItems {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease;
 }
-.Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:last-child {
-  padding-right: 0;
+.NavigationMobile_module_mobileSubItemsOpen {
+  grid-template-rows: 1fr;
 }
-@media (max-width: 768px) {
-  .Navigation_module_brandBarsUnfolded .Navigation_module_brandBar:last-child {
-    padding-right: var(--spacing-md);
-  }
+.NavigationMobile_module_mobileSubItemsInner {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-.Navigation_module_brandBarsUnfolded .Navigation_module_brandLogo {
-  opacity: 1;
-  transition: opacity 0.35s ease;
+.NavigationMobile_module_mobileSubItemsInner li:first-child .NavigationMobile_module_mobileSubLink {
+  padding-top: var(--spacing-md);
 }
-.Navigation_module_brandLogo {
-  max-width: 100%;
-  max-height: 70px;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-  opacity: 0;
-  transition: opacity 0.35s ease 0.3s;
-  pointer-events: none;
+.NavigationMobile_module_mobileSubLink {
+  display: block;
+  color: var(--color-true-black);
+  text-decoration: none;
+  padding-left: var(--spacing-lg);
+  font-weight: var(--font-weight-medium);
 }
-@media (max-width: 768px) {
-  .Navigation_module_brandLogo {
-    max-height: 40px;
-  }
+.NavigationMobile_module_mobileSubLink:hover,
+.NavigationMobile_module_mobileSubLink:focus-visible {
+  font-weight: var(--font-weight-bold);
+  text-decoration: none;
 }
-.Navigation_module_lenscrafters {
-  flex: 366 0 0;
-  background-color: var(--color-lenscrafter-blue);
+.NavigationMobile_module_mobileSubLinkActive {
+  font-weight: var(--font-weight-bold);
 }
-.Navigation_module_forEyes {
-  flex: 360 0 0;
-  background-color: var(--color-foreyes-brown);
+.NavigationMobile_module_mobileMenuCtas {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  background-color: var(--color-white);
 }
-.Navigation_module_optical {
-  flex: 360 0 0;
-  background-color: var(--color-targetoptical-red);
+.NavigationMobile_module_mobileMenuCtas > * {
+  width: 100%;
+  height: 48px;
 }
-.Navigation_module_pearleVision {
-  flex: 354 0 0;
-  background-color: var(--color-pearlevision-green);
+.NavigationMobile_module_mobileMenuCtas > *:first-child {
+  border: 1px solid var(--secondary-states-outlinedBorder, #c2c2c2);
 }
-.Navigation_module_internalMobileMenu {
+.NavigationMobile_module_internalMobileMenu {
   position: fixed;
   inset: 0;
   z-index: 100;
@@ -4866,38 +4813,22 @@ a:hover {
   pointer-events: none;
   transition: opacity 0.3s ease, visibility 0.3s ease;
 }
-.Navigation_module_internalMobileMenuOpen {
+.NavigationMobile_module_internalMobileMenuOpen {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
 }
-.Navigation_module_mobileHeader {
+.NavigationMobile_module_mobileHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 13px var(--spacing-md);
 }
-.Navigation_module_mobileBrandBars {
+.NavigationMobile_module_mobileBrandBars {
   display: flex;
   flex-shrink: 0;
 }
-.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_mobileItems {
+.NavigationMobile_module_mobileItems {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -4905,10 +4836,10 @@ a:hover {
   padding: var(--spacing-lg) var(--spacing-md);
   list-style: none;
 }
-.Navigation_module_internalMobileItem {
+.NavigationMobile_module_internalMobileItem {
   border-bottom: 1px solid #ebebeb;
 }
-.Navigation_module_internalMobileItemLink {
+.NavigationMobile_module_internalMobileItemLink {
   display: block;
   padding: var(--spacing-md) 0;
   font-size: var(--font-size-md);
@@ -4917,11 +4848,11 @@ a:hover {
   text-decoration: none;
   -webkit-tap-highlight-color: transparent;
 }
-.Navigation_module_internalMobileItemLink:hover,
-.Navigation_module_internalMobileItemLink:focus-visible {
+.NavigationMobile_module_internalMobileItemLink:hover,
+.NavigationMobile_module_internalMobileItemLink:focus-visible {
   text-decoration: none;
 }
-.Navigation_module_internalMobileItemTrigger {
+.NavigationMobile_module_internalMobileItemTrigger {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -4937,24 +4868,24 @@ a:hover {
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
 }
-.Navigation_module_internalMobileItemChevron {
+.NavigationMobile_module_internalMobileItemChevron {
   display: flex;
   align-items: center;
   transform: rotate(-90deg);
   transition: transform 0.3s ease;
 }
-.Navigation_module_internalMobileItemChevronOpen {
+.NavigationMobile_module_internalMobileItemChevronOpen {
   transform: rotate(0deg);
 }
-.Navigation_module_internalMobileSubItems {
+.NavigationMobile_module_internalMobileSubItems {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.3s ease;
 }
-.Navigation_module_internalMobileSubItemsOpen {
+.NavigationMobile_module_internalMobileSubItemsOpen {
   grid-template-rows: 1fr;
 }
-.Navigation_module_internalMobileSubItemsInner {
+.NavigationMobile_module_internalMobileSubItemsInner {
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -4963,13 +4894,13 @@ a:hover {
   padding: 0;
   list-style: none;
 }
-.Navigation_module_internalMobileSubItemsInner li:first-child .Navigation_module_internalMobileSubLink {
+.NavigationMobile_module_internalMobileSubItemsInner li:first-child .NavigationMobile_module_internalMobileSubLink {
   padding-top: var(--spacing-sm);
 }
-.Navigation_module_internalMobileSubItemsInner li:last-child .Navigation_module_internalMobileSubLink {
+.NavigationMobile_module_internalMobileSubItemsInner li:last-child .NavigationMobile_module_internalMobileSubLink {
   padding-bottom: var(--spacing-md);
 }
-.Navigation_module_internalMobileSubLink {
+.NavigationMobile_module_internalMobileSubLink {
   display: block;
   padding-left: var(--spacing-lg);
   font-size: var(--font-size-md);
@@ -4977,17 +4908,17 @@ a:hover {
   color: var(--color-gray);
   text-decoration: none;
 }
-.Navigation_module_internalMobileSubLink:hover,
-.Navigation_module_internalMobileSubLink:focus-visible {
+.NavigationMobile_module_internalMobileSubLink:hover,
+.NavigationMobile_module_internalMobileSubLink:focus-visible {
   font-weight: var(--font-weight-bold);
   color: var(--color-true-black);
   text-decoration: none;
 }
-.Navigation_module_internalMobileSubLinkActive {
+.NavigationMobile_module_internalMobileSubLinkActive {
   font-weight: var(--font-weight-bold);
   color: var(--color-true-black);
 }
-.Navigation_module_mobileFooter {
+.NavigationMobile_module_mobileFooter {
   position: sticky;
   bottom: 0;
   z-index: 1;
@@ -4998,6 +4929,131 @@ a:hover {
   background-color: var(--color-white);
 }
 
+/* src/widgets/Navigation/Navigation.module.scss */
+.Navigation_module_overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-black);
+  opacity: 0.5;
+  z-index: 98;
+  pointer-events: none;
+}
+.Navigation_module_navigation {
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  width: 100%;
+  background-color: var(--color-white);
+  transition: background-color 0.3s ease;
+}
+.Navigation_module_navigation.Navigation_module_dropdownOpen .Navigation_module_mainBar {
+  box-shadow: none;
+}
+.Navigation_module_navigation.Navigation_module_variantTransparent {
+  position: fixed;
+}
+.Navigation_module_navigation.Navigation_module_transparent {
+  background-color: transparent;
+  --nav-item-color: var(--color-white);
+  --nav-tab-color: var(--color-white);
+  --nav-tab-accent: var(--color-white);
+  --nav-trigger-svg-filter: brightness(0) invert(1);
+}
+.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_mainBar {
+  width: 100%;
+  background-color: var(--color-white);
+  padding: var(--spacing-md) var(--spacing-7xl);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+@media (max-width: 768px) {
+  .Navigation_module_mainBar {
+    padding: 13px var(--spacing-md);
+  }
+}
+.Navigation_module_inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+.Navigation_module_topRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  min-height: 52px;
+}
+@media (max-width: 768px) {
+  .Navigation_module_topRow {
+    min-height: 0;
+  }
+}
+.Navigation_module_topRow .Navigation_module_upperRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.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_hamburgerButton {
+  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_hamburgerButton: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;
+}
+
 /* src/widgets/PracticePathCards/PracticePathCards.module.scss */
 .PracticePathCards_module_practice-path-cards {
   display: block;
@@ -5712,7 +5768,7 @@ a:hover {
   }
 }
 .TextBody_module_textBody .TextBody_module_title {
-  margin-bottom: var(--spacing-xl);
+  margin-bottom: var(--spacing-xs);
   color: var(--color-black);
 }
 @media (max-width: 768px) {