.tt-nav-menu {
--tt-nav-pointer-color: #2271b1;
--tt-nav-submenu-offset: 6px;
--tt-nav-viewport-left: 0px;
--tt-nav-toggle-panel-offset: 8px;
--tt-nav-toggle-panel-padding: 8px 0;
--tt-nav-toggle-panel-bg: #ffffff;
--tt-nav-toggle-panel-radius: 6px;
--tt-nav-toggle-panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
--tt-nav-toggle-panel-max-height: 75vh;
--tt-nav-toggle-item-gap: 0;
--tt-nav-toggle-submenu-indent: 16px;
position: relative;
display: block;
width: 100%;
}
.tt-nav-menu ul,
.tt-nav-menu .tt-nav-menu__list {
list-style: none;
margin: 0;
padding: 0;
gap: 0;
}
.tt-nav-menu .tt-nav-menu__list {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.tt-nav-menu--layout-vertical .tt-nav-menu__list {
flex-direction: column;
align-items: stretch;
}
.tt-nav-menu .menu-item {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.tt-nav-menu .tt-nav-menu__link {
position: relative;
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
line-height: 1.4;
transition: color 0.2s ease, background-color 0.2s ease;
white-space: nowrap;
cursor: pointer;
}
.tt-nav-menu .tt-nav-menu__link:focus {
outline: 2px solid var(--tt-nav-pointer-color);
outline-offset: 2px;
}
.tt-nav-menu__toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 6px;
padding: 0;
background: #ffffff;
color: #1d2327;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.tt-nav-menu__toggle-wrap {
display: none;
width: 100%;
}
.tt-nav-menu__toggle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.tt-nav-menu__toggle-icon i,
.tt-nav-menu__toggle-icon svg {
display: block;
}
.tt-nav-menu__toggle-icon svg,
.tt-nav-menu__toggle-icon svg * {
fill: currentColor;
}
.tt-nav-menu__toggle-bars {
position: relative;
display: block;
width: 1em;
height: 0.7em;
border-top: 0.1em solid currentColor;
border-bottom: 0.1em solid currentColor;
box-sizing: border-box;
}
.tt-nav-menu__toggle-bars::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
border-top: 0.1em solid currentColor;
transform: translateY(-50%);
} .tt-nav-menu--has-indicator .menu-item-has-children > .tt-nav-menu__link::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-left: 4px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.tt-nav-menu--has-indicator .menu-item-has-children.tt-nav-menu__item--open > .tt-nav-menu__link::after {
transform: rotate(-135deg) translateY(0);
} .tt-nav-menu--layout-vertical .menu-item-has-children .sub-menu .menu-item-has-children > .tt-nav-menu__link::after,
.tt-nav-menu .sub-menu .menu-item-has-children > .tt-nav-menu__link::after {
transform: rotate(-45deg);
} .tt-nav-menu .sub-menu { display: block;
position: absolute;
top: calc(100% + var(--tt-nav-submenu-offset));
left: 0;
z-index: 9999;
list-style: none;
margin: 0;
padding: 8px 0;
min-width: 200px;
width: max-content; max-width: calc(100vw - 16px);
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.tt-nav-menu .sub-menu::-webkit-scrollbar{
display: none;
} .tt-nav-menu .menu-item-has-children::after {
content: "";
position: absolute;
background: transparent;
pointer-events: auto;
} .tt-nav-menu--layout-horizontal > .tt-nav-menu__list > .menu-item-has-children::after {
top: 100%;
left: 0;
right: 0;
height: var(--tt-nav-submenu-offset);
} .tt-nav-menu--layout-vertical > .tt-nav-menu__list > .menu-item-has-children::after,
.tt-nav-menu .sub-menu .menu-item-has-children::after {
top: 0;
bottom: 0;
left: 100%;
width: var(--tt-nav-submenu-offset);
} .tt-nav-menu .sub-menu .menu-item-has-children.tt-nav-menu__item--align-right::after {
left: auto;
right: 100%;
}
.tt-nav-menu .sub-menu .sub-menu {
top: 0;
left: 100%;
margin-left: var(--tt-nav-submenu-offset);
}
.tt-nav-menu .sub-menu .menu-item {
display: block;
}
.tt-nav-menu .sub-menu .tt-nav-menu__link {
display: flex;
width: 100%;
justify-content: flex-start;
text-align: left;
white-space: nowrap;
} .tt-nav-menu--layout-vertical > .tt-nav-menu__list > .menu-item > .sub-menu {
top: 0;
left: 100%;
margin-left: var(--tt-nav-submenu-offset);
} .tt-nav-menu--layout-horizontal > .tt-nav-menu__list > .menu-item:last-child > .sub-menu,
.tt-nav-menu > .tt-nav-menu__list > .menu-item.tt-nav-menu__item--align-right > .sub-menu {
left: auto;
right: 0;
} .tt-nav-menu--layout-horizontal > .tt-nav-menu__list > .menu-item:last-child > .sub-menu .sub-menu,
.tt-nav-menu > .tt-nav-menu__list > .menu-item.tt-nav-menu__item--align-right > .sub-menu .sub-menu,
.tt-nav-menu .sub-menu .menu-item.tt-nav-menu__item--align-right > .sub-menu {
left: auto;
right: 100%;
margin-left: 0;
margin-right: var(--tt-nav-submenu-offset);
} .tt-nav-menu--submenu-hover .menu-item:hover > .sub-menu,
.tt-nav-menu--submenu-hover .menu-item:focus-within > .sub-menu,
.tt-nav-menu .menu-item.tt-nav-menu__item--open > .sub-menu { display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0);
pointer-events: auto !important;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.tt-nav-menu .sub-menu .sub-menu {
transform: translateX(-6px);
}
.tt-nav-menu--submenu-hover .sub-menu .menu-item:hover > .sub-menu,
.tt-nav-menu--submenu-hover .sub-menu .menu-item:focus-within > .sub-menu,
.tt-nav-menu .sub-menu .menu-item.tt-nav-menu__item--open > .sub-menu {
transform: translateX(0);
} .tt-nav-menu--toggle-active .tt-nav-menu__toggle-wrap {
display: block;
}
.tt-nav-menu--toggle-active .tt-nav-menu__toggle {
display: inline-flex;
}
.tt-nav-menu--toggle-active .tt-nav-menu__list {
position: absolute;
top: calc(100% + var(--tt-nav-toggle-panel-offset));
left: 0;
right: 0;
z-index: 1000;
flex-direction: column;
align-items: stretch;
width: 100%;
margin: 0;
padding: var(--tt-nav-toggle-panel-padding);
gap: var(--tt-nav-toggle-item-gap);
background: var(--tt-nav-toggle-panel-bg);
box-shadow: var(--tt-nav-toggle-panel-shadow);
border-radius: var(--tt-nav-toggle-panel-radius);
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.tt-nav-menu--toggle-active.tt-nav-menu--open .tt-nav-menu__list {
max-height: var(--tt-nav-toggle-panel-max-height);
overflow-y: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.tt-nav-menu--toggle-active.tt-nav-menu--toggle-panel-viewport .tt-nav-menu__list {
left: var(--tt-nav-viewport-left);
right: auto;
width: 100vw;
max-width: 100vw;
}
.tt-nav-menu--toggle-active .menu-item-has-children::after {
display: none;
}
.tt-nav-menu--toggle-active .tt-nav-menu__list .menu-item {
display: block;
width: 100%;
min-height: 0;
}
.tt-nav-menu--toggle-active .tt-nav-menu__list .tt-nav-menu__link {
justify-content: flex-start;
width: 100%;
min-height: 0;
box-sizing: border-box;
}
.tt-nav-menu--toggle-active .sub-menu,
.tt-nav-menu--toggle-active .sub-menu .sub-menu,
.tt-nav-menu--toggle-active.tt-nav-menu--layout-vertical > .tt-nav-menu__list > .menu-item > .sub-menu {
position: static;
left: auto;
right: auto;
top: auto;
margin: 0;
padding: 0 0 0 var(--tt-nav-toggle-submenu-indent);
min-width: 0;
max-width: none;
box-shadow: none;
background: transparent;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
max-height: 0;
overflow: hidden;
height: auto;
transition: max-height 0.24s ease;
}
.tt-nav-menu--toggle-active .menu-item.tt-nav-menu__item--open > .sub-menu {
max-height: 1000px;
}
.tt-nav-menu--toggle-active .sub-menu .tt-nav-menu__link {
text-align: inherit;
white-space: normal;
}
@media (max-width: 1024px) {
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet .tt-nav-menu__toggle-wrap {
display: block;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet .tt-nav-menu__toggle {
display: inline-flex;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet .tt-nav-menu__list {
position: absolute;
top: calc(100% + var(--tt-nav-toggle-panel-offset));
left: 0;
right: 0;
z-index: 1000;
flex-direction: column;
align-items: stretch;
width: 100%;
margin: 0;
padding: var(--tt-nav-toggle-panel-padding);
gap: var(--tt-nav-toggle-item-gap);
background: var(--tt-nav-toggle-panel-bg);
box-shadow: var(--tt-nav-toggle-panel-shadow);
border-radius: var(--tt-nav-toggle-panel-radius);
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet.tt-nav-menu--open .tt-nav-menu__list {
max-height: var(--tt-nav-toggle-panel-max-height);
overflow-y: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet.tt-nav-menu--toggle-panel-viewport .tt-nav-menu__list {
left: var(--tt-nav-viewport-left);
right: auto;
width: 100vw;
max-width: 100vw;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet .menu-item-has-children::after {
display: none;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet .tt-nav-menu__list .menu-item {
display: block;
width: 100%;
min-height: 0;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet .tt-nav-menu__list .tt-nav-menu__link {
justify-content: flex-start;
width: 100%;
min-height: 0;
box-sizing: border-box;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet .sub-menu,
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet .sub-menu .sub-menu,
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet.tt-nav-menu--layout-vertical > .tt-nav-menu__list > .menu-item > .sub-menu {
position: static;
left: auto;
right: auto;
top: auto;
margin: 0;
padding: 0 0 0 var(--tt-nav-toggle-submenu-indent);
min-width: 0;
max-width: none;
box-shadow: none;
background: transparent;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
max-height: 0;
overflow: hidden;
height: auto;
transition: max-height 0.24s ease;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-tablet .menu-item.tt-nav-menu__item--open > .sub-menu {
max-height: 1000px;
}
}
@media (max-width: 767px) {
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile .tt-nav-menu__toggle-wrap {
display: block;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile .tt-nav-menu__toggle {
display: inline-flex;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile .tt-nav-menu__list {
position: absolute;
top: calc(100% + var(--tt-nav-toggle-panel-offset));
left: 0;
right: 0;
z-index: 1000;
flex-direction: column;
align-items: stretch;
width: 100%;
margin: 0;
padding: var(--tt-nav-toggle-panel-padding);
gap: var(--tt-nav-toggle-item-gap);
background: var(--tt-nav-toggle-panel-bg);
box-shadow: var(--tt-nav-toggle-panel-shadow);
border-radius: var(--tt-nav-toggle-panel-radius);
overflow: hidden;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile.tt-nav-menu--open .tt-nav-menu__list {
max-height: var(--tt-nav-toggle-panel-max-height);
overflow-y: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile.tt-nav-menu--toggle-panel-viewport .tt-nav-menu__list {
left: var(--tt-nav-viewport-left);
right: auto;
width: 100vw;
max-width: 100vw;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile .menu-item-has-children::after {
display: none;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile .tt-nav-menu__list .menu-item {
display: block;
width: 100%;
min-height: 0;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile .tt-nav-menu__list .tt-nav-menu__link {
justify-content: flex-start;
width: 100%;
min-height: 0;
box-sizing: border-box;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile .sub-menu,
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile .sub-menu .sub-menu,
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile.tt-nav-menu--layout-vertical > .tt-nav-menu__list > .menu-item > .sub-menu {
position: static;
left: auto;
right: auto;
top: auto;
margin: 0;
padding: 0 0 0 var(--tt-nav-toggle-submenu-indent);
min-width: 0;
max-width: none;
box-shadow: none;
background: transparent;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
max-height: 0;
overflow: hidden;
height: auto;
transition: max-height 0.24s ease;
}
.tt-nav-menu--has-toggle.tt-nav-menu--toggle-mobile .menu-item.tt-nav-menu__item--open > .sub-menu {
max-height: 1000px;
}
} .tt-nav-menu--pointer-none .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before {
display: none !important;
} .tt-nav-menu--pointer-underline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link,
.tt-nav-menu--pointer-overline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link {
position: relative;
}
.tt-nav-menu--pointer-underline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-overline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::after {
content: "";
position: absolute;
left: 50%;
width: 0;
height: 2px;
background-color: var(--tt-nav-pointer-color);
transform: translateX(-50%);
transition: width 0.25s ease;
pointer-events: none;
}
.tt-nav-menu--pointer-underline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::after {
bottom: 0;
}
.tt-nav-menu--pointer-overline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before {
top: 0;
}
.tt-nav-menu--pointer-underline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:hover::before,
.tt-nav-menu--pointer-underline .tt-nav-menu__list > .menu-item.current-menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-overline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:hover::before,
.tt-nav-menu--pointer-overline .tt-nav-menu__list > .menu-item.current-menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:hover::before,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:hover::after,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item.current-menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item.current-menu-item > .tt-nav-menu__link::after {
width: 100%;
} .tt-nav-menu--pointer-framed .tt-nav-menu__list > .menu-item > .tt-nav-menu__link {
position: relative;
border: 2px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.tt-nav-menu--pointer-framed .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:hover,
.tt-nav-menu--pointer-framed .tt-nav-menu__list > .menu-item.current-menu-item > .tt-nav-menu__link {
border-color: var(--tt-nav-pointer-color);
} .tt-nav-menu--pointer-background .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:hover,
.tt-nav-menu--pointer-background .tt-nav-menu__list > .menu-item.current-menu-item > .tt-nav-menu__link {
background-color: var(--tt-nav-pointer-color);
color: #ffffff;
} .tt-nav-menu--toggle-active .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:focus {
outline: none;
}
.tt-nav-menu--toggle-active.tt-nav-menu--pointer-underline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--toggle-active.tt-nav-menu--pointer-overline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--toggle-active.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--toggle-active.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::after {
display: none;
}
.tt-nav-menu--toggle-active.tt-nav-menu--pointer-framed .tt-nav-menu__list > .menu-item > .tt-nav-menu__link,
.tt-nav-menu--toggle-active.tt-nav-menu--pointer-framed .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:hover,
.tt-nav-menu--toggle-active.tt-nav-menu--pointer-framed .tt-nav-menu__list > .menu-item.current-menu-item > .tt-nav-menu__link {
border-color: transparent;
} @media (max-width: 767px) {
.tt-nav-menu .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:focus {
outline: none;
}
.tt-nav-menu--pointer-underline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-overline .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::before,
.tt-nav-menu--pointer-double-line .tt-nav-menu__list > .menu-item > .tt-nav-menu__link::after {
display: none;
}
.tt-nav-menu--pointer-framed .tt-nav-menu__list > .menu-item > .tt-nav-menu__link,
.tt-nav-menu--pointer-framed .tt-nav-menu__list > .menu-item > .tt-nav-menu__link:hover,
.tt-nav-menu--pointer-framed .tt-nav-menu__list > .menu-item.current-menu-item > .tt-nav-menu__link {
border-color: transparent;
}
.tt-nav-menu:not(.tt-nav-menu--has-toggle) .tt-nav-menu__list {
flex-direction: column;
align-items: stretch;
}
.tt-nav-menu:not(.tt-nav-menu--has-toggle) .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
box-shadow: none;
padding-left: 16px;
background: transparent;
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
margin-left: 0;
} .tt-nav-menu:not(.tt-nav-menu--has-toggle) .menu-item-has-children::after {
display: none;
}
.tt-nav-menu:not(.tt-nav-menu--has-toggle) .sub-menu .sub-menu {
margin-left: 0;
}
.tt-nav-menu:not(.tt-nav-menu--has-toggle) .menu-item.tt-nav-menu__item--open > .sub-menu {
max-height: 1000px;
}
}