@tet/tet-components 1.4.71-testing → 1.4.72-staging

package/dist/collection/components/simple/menu/tet-menu/tet-menu.css

@@ -369,30 +369,644 @@
   font-display: swap;
   src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
 }
+.tet-grid--col-12, .tet-grid--col-8, .tet-grid--col-4, .tet-grid, .tet-grid--no-limit, .tet-grid--no-margin, .tet-grid--no-padding {
+  box-sizing: border-box;
+  display: grid;
+  position: relative;
+  width: 100%;
+  max-width: none;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  column-gap: 1rem;
+  padding: 0 1rem;
+  margin: 0 auto;
+}
+
+.tet-grid--no-padding {
+  column-gap: 0 !important;
+}
+.tet-grid--no-margin {
+  padding: 0 !important;
+}
+.tet-grid--no-limit {
+  max-width: unset !important;
+}
+.tet-grid--col-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+}
+.tet-grid--col-8 {
+  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
+}
+.tet-grid--col-8 .tet-grid__cell--span-all {
+  grid-column: span 8;
+}
+.tet-grid--col-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
+}
+.tet-grid--col-12 .tet-grid__cell--span-all {
+  grid-column: span 12;
+}
+.tet-grid__cell, .tet-grid__cell--df-show, .tet-grid__cell--xs-show, .tet-grid__cell--sm-show, .tet-grid__cell--md-show, .tet-grid__cell--lg-show, .tet-grid__cell--xl-show, .tet-grid__cell--2k-show, .tet-grid__cell--gg-show {
+  grid-column: span 1;
+}
+.tet-grid__cell--span-2-rows {
+  grid-row: span 2;
+}
+.tet-grid__cell--span-3-rows {
+  grid-row: span 3;
+}
+.tet-grid__cell--span-4-rows {
+  grid-row: span 4;
+}
+.tet-grid__cell--span-5-rows {
+  grid-row: span 5;
+}
+.tet-grid__cell--span-6-rows {
+  grid-row: span 6;
+}
+.tet-grid__cell--span-7-rows {
+  grid-row: span 7;
+}
+.tet-grid__cell--span-8-rows {
+  grid-row: span 8;
+}
+.tet-grid__cell--span-9-rows {
+  grid-row: span 9;
+}
+.tet-grid__cell--span-10-rows {
+  grid-row: span 10;
+}
+.tet-grid__cell--span-11-rows {
+  grid-row: span 11;
+}
+.tet-grid__cell--span-12-rows {
+  grid-row: span 12;
+}
+.tet-grid__cell--span-all {
+  grid-column: span 4;
+}
+.tet-grid__cell--span-1 {
+  display: block;
+  grid-column: span 1;
+}
+.tet-grid__cell--span-2 {
+  display: block;
+  grid-column: span 2;
+}
+.tet-grid__cell--span-3 {
+  display: block;
+  grid-column: span 3;
+}
+.tet-grid__cell--span-4 {
+  display: block;
+  grid-column: span 4;
+}
+.tet-grid__cell--span-5 {
+  display: block;
+  grid-column: span 4;
+}
+.tet-grid__cell--span-6 {
+  display: block;
+  grid-column: span 4;
+}
+.tet-grid__cell--span-7 {
+  display: block;
+  grid-column: span 4;
+}
+.tet-grid__cell--span-8 {
+  display: block;
+  grid-column: span 4;
+}
+.tet-grid__cell--span-9 {
+  display: block;
+  grid-column: span 4;
+}
+.tet-grid__cell--span-10 {
+  display: block;
+  grid-column: span 4;
+}
+.tet-grid__cell--span-11 {
+  display: block;
+  grid-column: span 4;
+}
+.tet-grid__cell--span-12 {
+  display: block;
+  grid-column: span 4;
+}
+.tet-grid__cell--hide {
+  display: none;
+}
+.tet-grid__cell--show {
+  display: block;
+}
+@media all and (min-width: 22.5rem) {
+  .tet-grid, .tet-grid--no-padding, .tet-grid--no-margin, .tet-grid--no-limit {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    column-gap: 1rem;
+    padding: 0 1rem;
+  }
+  .tet-grid__cell--span-all {
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-span-1 {
+    display: block;
+    grid-column: span 1;
+  }
+  .tet-grid__cell--df-span-2 {
+    display: block;
+    grid-column: span 2;
+  }
+  .tet-grid__cell--df-span-3 {
+    display: block;
+    grid-column: span 3;
+  }
+  .tet-grid__cell--df-span-4 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-span-5 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-span-6 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-span-7 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-span-8 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-span-9 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-span-10 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-span-11 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-span-12 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--df-hide {
+    display: none;
+  }
+  .tet-grid__cell--df-show {
+    display: block;
+  }
+}
+@media all and (min-width: 31.25rem) {
+  .tet-grid, .tet-grid--no-padding, .tet-grid--no-margin, .tet-grid--no-limit {
+    column-gap: 1.5rem;
+    padding: 0 2rem;
+  }
+  .tet-grid__cell--xs-span-1 {
+    display: block;
+    grid-column: span 1;
+  }
+  .tet-grid__cell--xs-span-2 {
+    display: block;
+    grid-column: span 2;
+  }
+  .tet-grid__cell--xs-span-3 {
+    display: block;
+    grid-column: span 3;
+  }
+  .tet-grid__cell--xs-span-4 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xs-span-5 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xs-span-6 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xs-span-7 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xs-span-8 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xs-span-9 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xs-span-10 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xs-span-11 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xs-span-12 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xs-hide {
+    display: none;
+  }
+  .tet-grid__cell--xs-show {
+    display: block;
+  }
+}
+@media all and (min-width: 46.25rem) {
+  .tet-grid__cell--sm-span-1 {
+    display: block;
+    grid-column: span 1;
+  }
+  .tet-grid__cell--sm-span-2 {
+    display: block;
+    grid-column: span 2;
+  }
+  .tet-grid__cell--sm-span-3 {
+    display: block;
+    grid-column: span 3;
+  }
+  .tet-grid__cell--sm-span-4 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--sm-span-5 {
+    display: block;
+    grid-column: span 5;
+  }
+  .tet-grid__cell--sm-span-6 {
+    display: block;
+    grid-column: span 6;
+  }
+  .tet-grid__cell--sm-span-7 {
+    display: block;
+    grid-column: span 7;
+  }
+  .tet-grid__cell--sm-span-8 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--sm-span-9 {
+    display: block;
+    grid-column: span 9;
+  }
+  .tet-grid__cell--sm-span-10 {
+    display: block;
+    grid-column: span 10;
+  }
+  .tet-grid__cell--sm-span-11 {
+    display: block;
+    grid-column: span 11;
+  }
+  .tet-grid__cell--sm-span-12 {
+    display: block;
+    grid-column: span 12;
+  }
+  .tet-grid__cell--sm-hide {
+    display: none;
+  }
+  .tet-grid__cell--sm-show {
+    display: block;
+  }
+}
+@media all and (min-width: 48rem) {
+  .tet-grid, .tet-grid--no-padding, .tet-grid--no-margin, .tet-grid--no-limit {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  .tet-grid__cell--span-all {
+    grid-column: span 8;
+  }
+  .tet-grid__cell--md-span-1 {
+    display: block;
+    grid-column: span 1;
+  }
+  .tet-grid__cell--md-span-2 {
+    display: block;
+    grid-column: span 2;
+  }
+  .tet-grid__cell--md-span-3 {
+    display: block;
+    grid-column: span 3;
+  }
+  .tet-grid__cell--md-span-4 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--md-span-5 {
+    display: block;
+    grid-column: span 5;
+  }
+  .tet-grid__cell--md-span-6 {
+    display: block;
+    grid-column: span 6;
+  }
+  .tet-grid__cell--md-span-7 {
+    display: block;
+    grid-column: span 7;
+  }
+  .tet-grid__cell--md-span-8 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--md-span-9 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--md-span-10 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--md-span-11 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--md-span-12 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--md-hide {
+    display: none;
+  }
+  .tet-grid__cell--md-show {
+    display: block;
+  }
+}
+@media all and (min-width: 64rem) {
+  .tet-grid, .tet-grid--no-padding, .tet-grid--no-margin, .tet-grid--no-limit {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .tet-grid__cell--span-all {
+    grid-column: span 12;
+  }
+  .tet-grid__cell--lg-span-1 {
+    display: block;
+    grid-column: span 1;
+  }
+  .tet-grid__cell--lg-span-2 {
+    display: block;
+    grid-column: span 2;
+  }
+  .tet-grid__cell--lg-span-3 {
+    display: block;
+    grid-column: span 3;
+  }
+  .tet-grid__cell--lg-span-4 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--lg-span-5 {
+    display: block;
+    grid-column: span 5;
+  }
+  .tet-grid__cell--lg-span-6 {
+    display: block;
+    grid-column: span 6;
+  }
+  .tet-grid__cell--lg-span-7 {
+    display: block;
+    grid-column: span 7;
+  }
+  .tet-grid__cell--lg-span-8 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--lg-span-9 {
+    display: block;
+    grid-column: span 9;
+  }
+  .tet-grid__cell--lg-span-10 {
+    display: block;
+    grid-column: span 10;
+  }
+  .tet-grid__cell--lg-span-11 {
+    display: block;
+    grid-column: span 11;
+  }
+  .tet-grid__cell--lg-span-12 {
+    display: block;
+    grid-column: span 12;
+  }
+  .tet-grid__cell--lg-hide {
+    display: none;
+  }
+  .tet-grid__cell--lg-show {
+    display: block;
+  }
+}
+@media all and (min-width: 80rem) {
+  .tet-grid, .tet-grid--no-padding, .tet-grid--no-margin, .tet-grid--no-limit {
+    padding: 0 4rem;
+  }
+  .tet-grid__cell--xl-span-1 {
+    display: block;
+    grid-column: span 1;
+  }
+  .tet-grid__cell--xl-span-2 {
+    display: block;
+    grid-column: span 2;
+  }
+  .tet-grid__cell--xl-span-3 {
+    display: block;
+    grid-column: span 3;
+  }
+  .tet-grid__cell--xl-span-4 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--xl-span-5 {
+    display: block;
+    grid-column: span 5;
+  }
+  .tet-grid__cell--xl-span-6 {
+    display: block;
+    grid-column: span 6;
+  }
+  .tet-grid__cell--xl-span-7 {
+    display: block;
+    grid-column: span 7;
+  }
+  .tet-grid__cell--xl-span-8 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--xl-span-9 {
+    display: block;
+    grid-column: span 9;
+  }
+  .tet-grid__cell--xl-span-10 {
+    display: block;
+    grid-column: span 10;
+  }
+  .tet-grid__cell--xl-span-11 {
+    display: block;
+    grid-column: span 11;
+  }
+  .tet-grid__cell--xl-span-12 {
+    display: block;
+    grid-column: span 12;
+  }
+  .tet-grid__cell--xl-hide {
+    display: none;
+  }
+  .tet-grid__cell--xl-show {
+    display: block;
+  }
+}
+@media all and (min-width: 90rem) {
+  .tet-grid, .tet-grid--no-padding, .tet-grid--no-margin, .tet-grid--no-limit {
+    padding: 0 4.5rem;
+  }
+  .tet-grid__cell--mg-span-1 {
+    display: block;
+    grid-column: span 1;
+  }
+  .tet-grid__cell--mg-span-2 {
+    display: block;
+    grid-column: span 2;
+  }
+  .tet-grid__cell--mg-span-3 {
+    display: block;
+    grid-column: span 3;
+  }
+  .tet-grid__cell--mg-span-4 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--mg-span-5 {
+    display: block;
+    grid-column: span 5;
+  }
+  .tet-grid__cell--mg-span-6 {
+    display: block;
+    grid-column: span 6;
+  }
+  .tet-grid__cell--mg-span-7 {
+    display: block;
+    grid-column: span 7;
+  }
+  .tet-grid__cell--mg-span-8 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--mg-span-9 {
+    display: block;
+    grid-column: span 9;
+  }
+  .tet-grid__cell--mg-span-10 {
+    display: block;
+    grid-column: span 10;
+  }
+  .tet-grid__cell--mg-span-11 {
+    display: block;
+    grid-column: span 11;
+  }
+  .tet-grid__cell--mg-span-12 {
+    display: block;
+    grid-column: span 12;
+  }
+  .tet-grid__cell--mg-hide {
+    display: none;
+  }
+  .tet-grid__cell--mg-show {
+    display: block;
+  }
+}
+@media all and (min-width: 120rem) {
+  .tet-grid, .tet-grid--no-padding, .tet-grid--no-margin, .tet-grid--no-limit {
+    max-width: 111rem;
+    padding: 0;
+  }
+  .tet-grid__cell--gg-span-1 {
+    display: block;
+    grid-column: span 1;
+  }
+  .tet-grid__cell--gg-span-2 {
+    display: block;
+    grid-column: span 2;
+  }
+  .tet-grid__cell--gg-span-3 {
+    display: block;
+    grid-column: span 3;
+  }
+  .tet-grid__cell--gg-span-4 {
+    display: block;
+    grid-column: span 4;
+  }
+  .tet-grid__cell--gg-span-5 {
+    display: block;
+    grid-column: span 5;
+  }
+  .tet-grid__cell--gg-span-6 {
+    display: block;
+    grid-column: span 6;
+  }
+  .tet-grid__cell--gg-span-7 {
+    display: block;
+    grid-column: span 7;
+  }
+  .tet-grid__cell--gg-span-8 {
+    display: block;
+    grid-column: span 8;
+  }
+  .tet-grid__cell--gg-span-9 {
+    display: block;
+    grid-column: span 9;
+  }
+  .tet-grid__cell--gg-span-10 {
+    display: block;
+    grid-column: span 10;
+  }
+  .tet-grid__cell--gg-span-11 {
+    display: block;
+    grid-column: span 11;
+  }
+  .tet-grid__cell--gg-span-12 {
+    display: block;
+    grid-column: span 12;
+  }
+  .tet-grid__cell--gg-hide {
+    display: none;
+  }
+  .tet-grid__cell--gg-show {
+    display: block;
+  }
+}
 :host {
   /**
-  * @prop --menu-text-size: The text size of the menu elements.
-  * @prop --menu-line-height: The line height of the menu elements.
-  * @prop --menu-font-family: The font family of the menu elements.
   * @prop --menu-border-radius: The border-radius of the various menu elements.
   */
-  --menu-text-size: 0.875rem;
-  --menu-line-height: 1.25rem;
-  --menu-font-family: "Inter", var(--font-family-fallback);
   --menu-border-radius: 0.625rem;
   --menu-text-color: var(--tc-text-primary);
   --menu-text-inverse-color: var(--tc-button-text-primary);
   --menu-text-secondary-color: var(--tc-text-secondary);
   --menu-background-color: var(--tc-background-white-black);
-  --menu-link-active-background-color: var(--tc-blue-00);
-  --menu-link-hover-background-color: var(--tc-menu-item-hover);
+  --menu-link-hover-background-color: var(--tc-navigation-menu-item-hover);
+  --menu-link-pressed-background-color: var(--tc-navigation-menu-item-pressed);
+  --menu-link-active-background-color: var(--tc-navigation-menu-item-active);
   --menu-dropdown-border-color: var(--tc-grey-20);
   --menu-dropdown-box-shadow: var(--tc-elevation-three);
   --menu-focus-outline-color: var(--tc-blue-40);
   --menu-login-button-background-color: var(--tc-button-primary-background-default);
   --menu-login-button-background-hover-color: var(--tc-button-primary-background-hover);
   --menu-separator-line-color: var(--tc-grey-20);
-  --menu-badge-background-color: var(--tc-menu-item-badge);
+  --menu-badge-background-color: var(--tc-navigation-menu-item-tag);
+  --menu-active-item-badge-background-color: var(--tc-layer-permanent-white);
+  --menu-badge-text-color: var(--tc-text-black-permanent);
+  --menu-mega-second-level-width: 27.25rem;
+  --menu-mega-third-level-width: 22.6875rem;
+  --menu-mega-banner-slot-max-width: 20rem;
+  --menu-mega-dropdown-menu-height: 28.625rem;
+  --menu-mega-separator-color: var(--tc-border-quaternary);
+  --menu-mega-dropdown-background-color: var(--tc-layer-primary);
   display: inline-block;
   position: relative;
   box-sizing: border-box;
@@ -402,25 +1016,27 @@
   position: relative;
   padding: 0.25rem 0;
   color: var(--menu-text-color);
-  line-height: var(--menu-line-height);
-  font-family: var(--menu-font-family);
-  font-size: var(--menu-text-size);
-  font-weight: 500;
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
 .menu.menu__dark {
   --menu-text-color: var(--tc-text-primary-dark);
   --menu-text-inverse-color: var(--tc-button-text-primary-dark);
   --menu-text-secondary-color: var(--tc-text-secondary-dark);
   --menu-background-color: var(--tc-background-secondary-dark);
-  --menu-link-active-background-color: rgba(24, 40, 59, 1);
-  --menu-link-hover-background-color: var(--tc-menu-item-hover-dark);
+  --menu-link-hover-background-color: var(--tc-navigation-menu-item-hover-dark);
+  --menu-link-pressed-background-color: var(--tc-navigation-menu-item-pressed-dark);
+  --menu-link-active-background-color: var(--tc-navigation-menu-item-active-dark);
   --menu-dropdown-border-color: var(--tc-grey-80);
   --menu-dropdown-box-shadow: var(--tc-elevation-three-dark);
   --menu-focus-outline-color: var(--tc-blue-40-dark);
   --menu-login-button-background-color: var(--tc-button-primary-background-default-dark);
   --menu-login-button-background-hover-color: var(--tc-button-primary-background-hover-dark);
   --menu-separator-line-color: var(--tc-grey-80);
-  --menu-badge-background-color: var(--tc-menu-item-badge-dark);
+  --menu-badge-background-color: var(--tc-navigation-menu-item-tag-dark);
+  --menu-active-item-badge-background-color: var(--tc-layer-permanent-white-dark);
+  --menu-badge-text-color: var(--tc-text-black-permanent-dark);
+  --menu-mega-separator-color: var(--tc-border-quaternary-dark);
+  --menu-mega-dropdown-background-color: var(--tc-layer-primary-dark);
 }
 .menu.menu__dark .menu__first-level--theme-yellow {
   --menu-item-theme-bg: var(--tc-menu-item-yellow-background-default-dark);
@@ -486,6 +1102,9 @@
   color: var(--menu-text-color);
   text-decoration: none;
 }
+.menu--active {
+  background-color: var(--menu-link-active-background-color);
+}
 .menu__first-level {
   display: flex;
   flex-direction: row;
@@ -500,12 +1119,15 @@
   margin-left: 0.4rem;
   transition: transform 150ms ease-out;
 }
-.menu__first-level:hover {
+:hover > .menu__first-level, :focus > .menu__first-level, :focus-within > .menu__first-level, .menu--mega-open > .menu__first-level {
   background-color: var(--menu-link-hover-background-color);
 }
-.menu__first-level:hover .chevron {
+:hover > .menu__first-level .chevron, :focus > .menu__first-level .chevron, :focus-within > .menu__first-level .chevron, .menu--mega-open > .menu__first-level .chevron {
   transform: rotate(-180deg);
 }
+.menu__first-level:active {
+  background-color: var(--menu-link-pressed-background-color);
+}
 .menu__first-level:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: 0.125rem;
@@ -517,6 +1139,7 @@
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
   background-color: var(--menu-badge-background-color);
+  color: var(--menu-badge-text-color);
 }
 .menu__icon {
   display: none;
@@ -539,7 +1162,11 @@
   animation-timing-function: ease-out;
   right: 0;
 }
-:hover > .menu__dropdown, :focus > .menu__dropdown, :focus-within > .menu__dropdown {
+.menu__dropdown.menu__dropdown--mega {
+  animation-name: none;
+  animation-duration: 0s;
+}
+:hover > .menu__dropdown:not(.menu__dropdown--mega), :focus > .menu__dropdown:not(.menu__dropdown--mega), :focus-within > .menu__dropdown:not(.menu__dropdown--mega) {
   max-height: 100rem;
   transform: scaleY(1);
   animation-name: showDropdown;
@@ -548,24 +1175,58 @@
   animation-timing-function: ease-out;
   outline: none;
 }
-.menu__dropdown__list {
+.menu:not(.menu--mega-escape-closed):hover > .menu__dropdown.menu__dropdown--mega, .menu:not(.menu--mega-escape-closed):focus > .menu__dropdown.menu__dropdown--mega, .menu:not(.menu--mega-escape-closed):focus-within > .menu__dropdown.menu__dropdown--mega, .menu--mega-open > .menu__dropdown.menu__dropdown--mega {
+  max-height: 100%;
+  transform: scaleY(1);
+  animation-name: none;
+  animation-duration: 0s;
+  transition-delay: 0s;
+  outline: none;
+}
+.menu__dropdown__list, .menu__dropdown__mega-third-list {
   padding: 0.625rem 0 0.438rem 0;
 }
-.menu__dropdown__list__sub-title {
+.menu__dropdown__list__sub-title, .menu__dropdown__mega-third-list__sub-title {
   display: none;
 }
-.menu__dropdown__list li {
+.menu__dropdown__list li, .menu__dropdown__mega-third-list li {
   list-style: none;
   white-space: nowrap;
   padding-bottom: 0.063rem;
 }
+.menu__dropdown__wrapper {
+  position: relative;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+}
+.menu__dropdown__wrapper .menu__dropdown__list--mega {
+  box-sizing: border-box;
+  border-right: 0.0625rem solid var(--menu-mega-separator-color);
+  border-left: 0.0625rem solid var(--menu-mega-separator-color);
+  height: 100%;
+}
+.menu__dropdown__mega-lists {
+  display: flex;
+  align-items: stretch;
+  margin-right: 2.5rem;
+  height: 100%;
+}
+.menu__dropdown__list > li > a .menu__badge {
+  margin-bottom: 0.125rem;
+  display: inline-block;
+}
 .menu__dropdown a {
   padding: 0.5rem 1rem;
   display: block;
+  border-radius: 0.375rem;
 }
 .menu__dropdown a:hover {
   background-color: var(--menu-link-hover-background-color);
 }
+.menu__dropdown a:active {
+  background-color: var(--menu-link-pressed-background-color);
+}
 .menu__dropdown a:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: -0.125rem;
@@ -573,15 +1234,23 @@
   outline-color: var(--menu-focus-outline-color);
   border-radius: 0.5rem;
 }
-.menu__dropdown a.menu--active {
+.menu__dropdown a.menu--active:not(:hover):not(:active):not(.menu--mega-current) {
   background-color: var(--menu-link-active-background-color);
 }
-.menu__dropdown a.menu--active:hover {
+.menu__dropdown a.menu--active:not(:hover):not(:active):not(.menu--mega-current) .menu__badge {
+  background: var(--menu-active-item-badge-background-color);
+}
+.menu__dropdown__list:not(.menu__dropdown__list--mega) li:hover > a.menu--submenu:not(:hover):not(:active):not(.menu--mega-current), .menu__dropdown__list:not(.menu__dropdown__list--mega) li:has(> .menu__sublist a:focus-visible) > a.menu--submenu:not(:hover):not(:active):not(.menu--mega-current) {
   background-color: var(--menu-link-hover-background-color);
 }
-.menu__main {
-  --menu-text-size: 1rem;
-  --menu-line-height: 1.5rem;
+.menu__dropdown__list:not(.menu__dropdown__list--mega) li:hover > a.menu--submenu:not(:hover):not(:active):not(.menu--mega-current) .menu__badge, .menu__dropdown__list:not(.menu__dropdown__list--mega) li:has(> .menu__sublist a:focus-visible) > a.menu--submenu:not(:hover):not(:active):not(.menu--mega-current) .menu__badge {
+  background: var(--menu-badge-background-color);
+}
+.menu__dropdown__mega-third {
+  box-sizing: border-box;
+  width: var(--menu-mega-third-level-width);
+  min-width: var(--menu-mega-third-level-width);
+  display: flex;
 }
 .menu__main .menu__first-level {
   padding: 0.375rem 0.75rem;
@@ -680,11 +1349,8 @@
 .menu__main .menu__first-level--themed.show-animation:not(:hover, .menu--active) {
   animation: gradient-border-cycle 4s ease-in-out infinite;
 }
-.menu__main .menu__first-level.menu--active {
-  background-color: var(--menu-link-active-background-color);
-}
-.menu__main .menu__first-level.menu--active:hover {
-  background-color: var(--menu-link-hover-background-color);
+.menu__main:not(:hover):not(:focus-within) .menu__dropdown__wrapper {
+  overflow: hidden;
 }
 .menu__main .menu__dropdown {
   min-width: 21.625rem;
@@ -692,9 +1358,80 @@
   right: auto;
   left: 0;
 }
+.menu__main .menu__dropdown__wrapper .menu__dropdown__list--mega {
+  width: var(--menu-mega-second-level-width);
+  min-width: var(--menu-mega-second-level-width);
+}
+.menu__main .menu__dropdown--mega {
+  background-color: var(--menu-mega-dropdown-background-color);
+  position: fixed;
+  left: 0;
+  right: auto;
+  top: 0;
+  margin-top: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  width: 100vw;
+  transition: transform 0s linear 100ms;
+  height: var(--mega-menu-dropdown-height);
+  overflow-y: hidden;
+}
+.menu__main .menu__dropdown--mega .menu__dropdown__wrapper {
+  min-height: inherit;
+  align-items: stretch;
+  box-sizing: border-box;
+  padding: 0.5rem 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: var(--menu-mega-dropdown-menu-height);
+}
+.menu__main .menu__dropdown--mega .menu__dropdown__mega-lists {
+  align-self: flex-start;
+}
+.menu__main .menu__dropdown--mega .menu__dropdown__mega-third-list {
+  height: 100%;
+  box-sizing: border-box;
+  width: 100%;
+}
+.menu__main .menu__dropdown--mega::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  height: var(--menu-dropdown-hover-bridge-height, 0);
+}
 .menu__main .menu__dropdown__list {
   padding: 0.5rem;
 }
+.menu__main .menu__dropdown__list--mega {
+  padding: 0 0.5rem 1rem;
+}
+.menu__main .menu__dropdown__list--mega li {
+  white-space: normal;
+}
+.menu__main .menu__dropdown__list--mega li a {
+  padding: 0.625rem 0.75rem;
+}
+.menu__main .menu__dropdown__list--mega a > div {
+  min-width: 0;
+}
+.menu__main .menu__dropdown__list--mega .menu__dropdown__list__sub-title {
+  white-space: normal;
+}
+.menu__main .menu__dropdown__list--mega a:hover .menu__dropdown__list__sub-title--mega,
+.menu__main .menu__dropdown__list--mega a:focus-visible .menu__dropdown__list__sub-title--mega,
+.menu__main .menu__dropdown__list--mega a.menu--mega-current .menu__dropdown__list__sub-title--mega {
+  max-height: 8rem;
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+  transition-delay: 0s;
+}
+.menu__main .menu__dropdown__list--mega a.menu--mega-current:not(:active) {
+  background-color: var(--menu-link-hover-background-color);
+}
 .menu__main .menu__dropdown__list a {
   border-radius: var(--menu-border-radius);
   display: flex;
@@ -725,11 +1462,40 @@
   background: var(--menu-separator-line-color);
 }
 .menu__main .menu__dropdown__list__sub-title {
+  font: 500 0.75rem/1rem "Inter", "Gilroy, Arial, sans-serif";
   display: block;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
   color: var(--menu-text-secondary-color);
 }
+.menu__main .menu__dropdown__list__sub-title--mega {
+  display: block;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transform: translateY(-0.25rem);
+  visibility: hidden;
+  transition: max-height 360ms ease, opacity 300ms ease, transform 360ms ease, visibility 0s linear 360ms;
+}
+.menu__main .menu__dropdown__mega-third-list {
+  border-right: 0.0625rem solid var(--menu-mega-separator-color);
+  height: 100%;
+  padding: 0 0.5rem 1rem;
+}
+.menu__main .menu__dropdown__mega-third-list a {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  display: block;
+  white-space: normal;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+}
+.menu__main .menu__dropdown__mega-third-list a .menu__badge {
+  margin: 0 0 0 0.25rem;
+  vertical-align: middle;
+}
+.menu__main .menu__dropdown__mega-banner {
+  margin-left: auto;
+  overflow: hidden;
+  max-width: var(--menu-mega-banner-slot-max-width);
+}
 .menu__main .menu__first-level > .menu__icon {
   display: flex;
   margin-right: 0.25rem;
@@ -752,6 +1518,7 @@
 }
 .menu__chevron {
   margin-left: auto;
+  padding-left: 0.75rem;
 }
 .menu__sublist {
   transform: scaleX(0);
@@ -787,7 +1554,7 @@
   white-space: normal;
 }
 .menu__sublist .content a .menu__badge {
-  margin-left: 0.25rem;
+  margin: 0 0 0 0.25rem;
   vertical-align: middle;
 }
 .menu__sublist .content a:focus-visible {
@@ -798,11 +1565,14 @@
   border-radius: 0.5rem;
 }
 .menu__sublist .content a.menu--active {
-  background-color: var(--menu-link-hover-background-color);
+  background-color: var(--menu-link-active-background-color);
 }
 .menu__sublist .content a.menu--active:hover {
   background-color: var(--menu-link-hover-background-color);
 }
+.menu__sublist .content a.menu--active:active {
+  background-color: var(--menu-link-pressed-background-color);
+}
 .menu__login .menu__first-level {
   border-radius: 2rem;
   padding: 0.5rem 0.875rem;
@@ -858,6 +1628,15 @@
 .menu__login .menu__dropdown__list a.text-color-secondary {
   color: var(--menu-text-secondary-color);
 }
+.menu__language > .menu__first-level {
+  border: var(--menu-lang-border);
+}
+.menu__language:is(:hover, :focus-within) > .menu__first-level {
+  border: var(--menu-lang-active-border);
+}
+.menu__language:not(:hover):not(:focus-within) > .menu__first-level:not(.menu--active):not(:active) {
+  background-color: var(--menu-lang-background-color);
+}
 .menu__language .menu__dropdown {
   min-width: 6rem;
   white-space: nowrap;
@@ -866,10 +1645,11 @@
   position: relative;
 }
 .menu__language .menu__dropdown__list__checkmark {
-  --icon-size: 1.125rem;
+  --icon-size: 1.25rem;
   position: absolute;
-  right: 0.782rem;
-  top: 0.563rem;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 @keyframes showDropdown {