.pavo-menu {
position: relative;
--pavo-menu-panel-width: 300px;
--pavo-menu-offcanvas-duration: 300ms;
--pavo-menu-overlay-color: #000000;
--pavo-menu-overlay-opacity: 0.5;
--pavo-menu-toggle-size: 24px;
--pavo-menu-tint: color-mix(in srgb, currentColor 8%, transparent);
--pavo-menu-tint-strong: color-mix(in srgb, currentColor 14%, transparent);
}
.pavo-menu__list,
.pavo-menu__submenu {
list-style: none;
margin: 0;
padding: 0;
}
.pavo-menu__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
} .pavo-menu--vertical .pavo-menu__list {
flex-direction: column;
align-items: stretch;
}
.pavo-menu__item {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px;
}
.pavo-menu__link {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 0.4em;
padding: 0.6em 1em;
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.pavo-menu__link:focus-visible {
outline: 2px solid currentColor;
outline-offset: -2px;
} .pavo-menu__link .menu-icon {
flex: 0 0 auto;
font-size: 1em;
line-height: 1;
}
.pavo-menu__link-text {
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.pavo-menu__link .menu-badge {
flex: 0 0 auto;
padding: 0.1em 0.5em;
font-size: 0.7em;
font-weight: 700;
line-height: 1.6;
text-transform: uppercase;
letter-spacing: 0.02em;
border-radius: 3px;
background: var(--pavo-menu-tint-strong);
} .pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
content: '';
position: absolute;
left: 1em;
right: 1em;
height: 2px;
background: var(--pavo-menu-pointer-color, currentColor);
transform: scaleX(0);
}
.pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
bottom: 0.3em;
}
.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
top: 0.3em;
} .pavo-menu--pointer-anim-grow .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
transition: transform 0.25s ease;
}
.pavo-menu--pointer-anim-fade .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
transform: scaleX(1);
opacity: 0;
transition: opacity 0.25s ease;
}
.pavo-menu--pointer-anim-slide .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
transform-origin: left;
transition: transform 0.25s ease;
}
.pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item:hover > .pavo-menu__link::after,
.pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item.current-menu-item > .pavo-menu__link::after,
.pavo-menu--pointer-underline .pavo-menu__list > .pavo-menu__item.current-menu-ancestor > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item:hover > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item.current-menu-ancestor > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu__list > .pavo-menu__item.current-menu-item > .pavo-menu__link::after {
transform: scaleX(1);
opacity: 1;
}
.pavo-menu--pointer-framed .pavo-menu__list > .pavo-menu__item > .pavo-menu__link {
border-radius: 4px;
box-shadow: inset 0 0 0 1px transparent;
}
.pavo-menu--pointer-framed .pavo-menu__list > .pavo-menu__item:hover > .pavo-menu__link,
.pavo-menu--pointer-framed .pavo-menu__list > .pavo-menu__item.current-menu-item > .pavo-menu__link,
.pavo-menu--pointer-framed .pavo-menu__list > .pavo-menu__item.current-menu-ancestor > .pavo-menu__link {
box-shadow: inset 0 0 0 1px var(--pavo-menu-pointer-color, currentColor);
}
.pavo-menu--pointer-background .pavo-menu__list > .pavo-menu__item > .pavo-menu__link {
border-radius: 4px;
}
.pavo-menu--pointer-background .pavo-menu__list > .pavo-menu__item:hover > .pavo-menu__link,
.pavo-menu--pointer-background .pavo-menu__list > .pavo-menu__item.current-menu-item > .pavo-menu__link,
.pavo-menu--pointer-background .pavo-menu__list > .pavo-menu__item.current-menu-ancestor > .pavo-menu__link {
background-color: var(--pavo-menu-pointer-color, var(--pavo-menu-tint-strong));
} .pavo-menu__caret {
display: inline-flex;
align-items: center;
justify-content: center; margin-inline-start: 0.3em;
} .pavo-menu__caret-icon {
display: inline-flex;
font-size: 0.75em;
transition: transform 0.2s ease;
}
.pavo-menu__item--open .pavo-menu__caret-icon {
transform: rotate(180deg);
}
.pavo-menu__caret-icon--default {
width: 0.5em;
height: 0.5em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-top: -0.2em;
}
.pavo-menu__item--open .pavo-menu__caret-icon--default {
transform: rotate(225deg);
margin-top: 0.2em;
} .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__caret-icon--default.pavo-menu__caret-icon--nested { transform: rotate(-45deg);
margin-top: 0;
}
.pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__item--flyout-left > .pavo-menu__link .pavo-menu__caret-icon--default.pavo-menu__caret-icon--nested {
transform: rotate(135deg);
} .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__item--flyout-left > .pavo-menu__link .pavo-menu__caret-icon--nested:not(.pavo-menu__caret-icon--default) {
transform: scaleX(-1);
} .pavo-menu__submenu {
position: absolute;
top: 100%; inset-inline-start: 0;
z-index: 100;
min-width: 100%;
padding: 8px; background: var(--e-global-color-surface, #fff); color: #1a1a1a;
font-size: 0.95em;
border-radius: 6px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
visibility: hidden;
opacity: 0;
}
.pavo-menu__submenu .pavo-menu__link {
border-radius: 4px; white-space: normal;
}
.pavo-menu__submenu .pavo-menu__link-text {
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: break-word;
} .pavo-menu__submenu .pavo-menu__item:hover > .pavo-menu__link {
background-color: var(--pavo-menu-tint);
}
.pavo-menu--anim-fade .pavo-menu__submenu,
.pavo-menu--anim-slide .pavo-menu__submenu {
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.pavo-menu--anim-slide .pavo-menu__submenu {
transform: translateY(6px);
} .pavo-menu--is-mobile .pavo-menu__item > .pavo-menu__submenu {
position: static;
display: none;
flex: 0 0 100%;
padding-left: 1em;
visibility: visible;
opacity: 1;
transform: none;
box-shadow: none;
border-radius: 0;
}
.pavo-menu--is-mobile .pavo-menu__item--open > .pavo-menu__submenu {
display: block;
} .pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) {
width: max-content;
max-width: 100%;
} .pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__item > .pavo-menu__submenu {
top: 0;
left: calc(100% + var(--pavo-menu-dropdown-offset, 0px));
right: auto;
}
.pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__submenu.pavo-vertical-menu--open-right {
left: calc(100% + var(--pavo-menu-dropdown-offset, 0px));
right: auto;
}
.pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__submenu.pavo-vertical-menu--open-left {
left: auto;
right: calc(100% + var(--pavo-menu-dropdown-offset, 0px));
} .pavo-menu--vertical .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__submenu--mega-full {
width: max-content;
max-width: 90vw;
}
.pavo-menu__submenu .pavo-menu__submenu {
top: 0;
left: calc(100% + var(--pavo-menu-dropdown-offset, 0px));
} .pavo-menu__submenu .pavo-menu__submenu.pavo-vertical-menu--open-left {
left: auto;
right: calc(100% + var(--pavo-menu-dropdown-offset, 0px));
} .pavo-menu--horizontal .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item > .pavo-menu__submenu {
top: calc(100% + var(--pavo-menu-dropdown-offset, 0px));
} .pavo-menu--horizontal .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item > .pavo-menu__submenu.pavo-menu__submenu--align-right {
left: auto;
right: 0;
} .pavo-menu--horizontal .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children:hover::after,
.pavo-menu--horizontal .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children > .pavo-menu__submenu::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
height: var(--pavo-menu-dropdown-offset, 0px);
}
.pavo-menu--horizontal .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children:hover::after {
top: 100%;
}
.pavo-menu--horizontal .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children > .pavo-menu__submenu::before {
bottom: 100%;
} .pavo-menu--vertical .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children:hover::after,
.pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__submenu > .pavo-menu__item--has-children:hover::after,
.pavo-menu--vertical .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children > .pavo-menu__submenu::before,
.pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__submenu > .pavo-menu__item--has-children > .pavo-menu__submenu::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: var(--pavo-menu-dropdown-offset, 0px);
} .pavo-menu--vertical .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children:not(.pavo-menu__item--flyout-left):hover::after,
.pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__submenu > .pavo-menu__item--has-children:not(.pavo-menu__item--flyout-left):hover::after {
left: 100%;
}
.pavo-menu--vertical .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children > .pavo-menu__submenu:not(.pavo-vertical-menu--open-left)::before,
.pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__submenu > .pavo-menu__item--has-children > .pavo-menu__submenu:not(.pavo-vertical-menu--open-left)::before {
right: 100%;
} .pavo-menu--vertical .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children.pavo-menu__item--flyout-left:hover::after,
.pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__submenu > .pavo-menu__item--has-children.pavo-menu__item--flyout-left:hover::after {
right: 100%;
}
.pavo-menu--vertical .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__list > .pavo-menu__item--has-children > .pavo-menu__submenu.pavo-vertical-menu--open-left::before,
.pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__submenu > .pavo-menu__item--has-children > .pavo-menu__submenu.pavo-vertical-menu--open-left::before {
left: 100%;
} .pavo-menu--dropdown-hover:not(.pavo-menu--is-mobile) .pavo-menu__item:hover > .pavo-menu__submenu {
visibility: visible;
opacity: 1;
transform: translateY(0);
} .pavo-menu__list > .pavo-menu__item--open > .pavo-menu__submenu {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.pavo-menu__submenu > .pavo-menu__item:not(:last-child) {
border-bottom: 1px solid transparent;
} .pavo-menu__submenu--mega {
padding: 0;
} .pavo-menu:not(.pavo-menu--is-mobile) .pavo-menu__item--mega > .pavo-menu__submenu:not(.pavo-menu__submenu--mega) {
display: none;
} .pavo-menu--is-mobile .pavo-menu__submenu--mega {
display: none !important;
}
.pavo-menu--is-mobile .pavo-menu__item--mega-only > .pavo-menu__link > .pavo-menu__caret {
display: none;
} .pavo-menu__item--mega-static {
position: static;
}
.pavo-menu__submenu--mega-full {
left: 0;
right: 0;
width: 100%;
} .pavo-menu__item--mega-left > .pavo-menu__submenu--mega-custom {
inset-inline-start: 0;
inset-inline-end: auto;
}
.pavo-menu__item--mega-right > .pavo-menu__submenu--mega-custom {
inset-inline-start: auto;
inset-inline-end: 0;
}  .pavo-menu__toggle {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(var(--pavo-menu-toggle-size) * 1.6);
height: calc(var(--pavo-menu-toggle-size) * 1.6);
padding: calc(var(--pavo-menu-toggle-size) * 0.3);
background: none;
border: 0;
border-radius: 4px;
cursor: pointer;
color: inherit;
transition: background-color 0.2s ease;
}
.pavo-menu__toggle:hover {
background-color: var(--pavo-menu-tint);
}
.pavo-menu__toggle-bar {
position: relative;
display: block;
width: 100%;
height: 2px;
background: currentColor;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.pavo-menu__toggle-bar + .pavo-menu__toggle-bar {
margin-top: 5px;
} .pavo-menu--panel-open .pavo-menu__toggle--hamburger .pavo-menu__toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.pavo-menu--panel-open .pavo-menu__toggle--hamburger .pavo-menu__toggle-bar:nth-child(2) {
opacity: 0;
}
.pavo-menu--panel-open .pavo-menu__toggle--hamburger .pavo-menu__toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
} .pavo-menu__toggle--dots {
flex-direction: row;
gap: 4px;
}
.pavo-menu__toggle--dots .pavo-menu__toggle-bar {
width: 5px;
height: 5px;
border-radius: 50%;
margin-top: 0;
} .pavo-menu__toggle-plus {
position: relative;
width: 1em;
height: 1em;
}
.pavo-menu__toggle-plus::before,
.pavo-menu__toggle-plus::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 2px;
background: currentColor;
transition: transform 0.2s ease;
}
.pavo-menu__toggle-plus::before {
transform: translate(-50%, -50%) rotate(0deg);
}
.pavo-menu__toggle-plus::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.pavo-menu--panel-open .pavo-menu__toggle-plus::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.pavo-menu--panel-open .pavo-menu__toggle-plus::after {
transform: translate(-50%, -50%) rotate(-45deg);
} .pavo-menu__close {
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-left: auto;
padding: 0;
background: none;
border: 0;
border-radius: 4px;
cursor: pointer;
color: inherit;
transition: background-color 0.2s ease;
}
.pavo-menu__close:hover {
background-color: var(--pavo-menu-tint);
}
.pavo-menu__close-icon {
position: relative;
width: 16px;
height: 16px;
}
.pavo-menu__close-icon::before,
.pavo-menu__close-icon::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
}
.pavo-menu__close-icon::before {
transform: rotate(45deg);
}
.pavo-menu__close-icon::after {
transform: rotate(-45deg);
} .pavo-menu__offcanvas-header {
display: none;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}
.pavo-menu__offcanvas-header .pavo-menu__close {
margin-left: 0;
}
.pavo-menu__offcanvas-title {
font-weight: 700;
font-size: 1.05em;
text-transform: uppercase;
letter-spacing: 0.02em;
} .pavo-menu__offcanvas {
display: contents;
}
.pavo-menu__overlay {
position: fixed;
inset: 0;
background: var(--pavo-menu-overlay-color);
opacity: 0;
visibility: hidden;
transition: opacity var(--pavo-menu-offcanvas-duration) ease, visibility var(--pavo-menu-offcanvas-duration);
z-index: 9998;
}
.pavo-menu--panel-open .pavo-menu__overlay {
opacity: var(--pavo-menu-overlay-opacity);
visibility: visible;
} .pavo-menu--is-mobile {
display: flex;
flex-wrap: wrap;
align-items: center;
} .pavo-menu--pointer-underline .pavo-menu--is-mobile .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after,
.pavo-menu--pointer-overline .pavo-menu--is-mobile .pavo-menu__list > .pavo-menu__item > .pavo-menu__link::after {
display: none;
} .pavo-menu--is-mobile .pavo-menu__link {
justify-content: space-between;
}
.pavo-menu--is-mobile .pavo-menu__list > .pavo-menu__item:not(:last-child) {
border-bottom: 1px solid transparent;
} .pavo-menu--is-mobile .pavo-menu__caret-icon--default {
margin-top: 0;
transform: rotate(-45deg);
}
.pavo-menu--is-mobile .pavo-menu__item--open .pavo-menu__caret-icon--default {
margin-top: 0;
transform: rotate(45deg);
} .pavo-menu--is-mobile .pavo-menu__item.current-menu-item > .pavo-menu__link,
.pavo-menu--is-mobile .pavo-menu__item.current-menu-ancestor > .pavo-menu__link {
border-radius: 6px;
}
.pavo-menu--is-mobile .pavo-menu__toggle {
display: flex;
}
.pavo-menu--is-mobile:not(.pavo-menu--offcanvas) .pavo-menu__offcanvas {
display: block;
flex: 0 0 100%;
}
.pavo-menu--is-mobile:not(.pavo-menu--offcanvas) .pavo-menu__list {
display: none;
flex-direction: column;
align-items: stretch;
flex: 0 0 100%;
width: 100%;
}
.pavo-menu--is-mobile:not(.pavo-menu--offcanvas).pavo-menu--panel-open .pavo-menu__list {
display: flex;
}
.pavo-menu--dropdown-full-width.pavo-menu--is-mobile:not(.pavo-menu--offcanvas) .pavo-menu__list {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
} .pavo-menu--offcanvas.pavo-menu--is-mobile .pavo-menu__close {
display: flex;
}
.pavo-menu--offcanvas.pavo-menu--is-mobile .pavo-menu__offcanvas-header {
display: flex;
}
.pavo-menu--offcanvas.pavo-menu--is-mobile .pavo-menu__offcanvas {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
bottom: 0;
width: var(--pavo-menu-panel-width);
max-width: 100%; background: var(--e-global-color-surface, #fff); color: #1a1a1a;
overflow-y: auto;
z-index: 9999;
padding: 16px;
box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
transition: transform var(--pavo-menu-offcanvas-duration) ease;
}
.pavo-menu--offcanvas.pavo-menu--is-mobile .pavo-menu__list {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
margin-top: 16px;
}
.pavo-menu--offcanvas-right.pavo-menu--is-mobile .pavo-menu__offcanvas {
right: 0;
transform: translateX(100%);
}
.pavo-menu--offcanvas-left.pavo-menu--is-mobile .pavo-menu__offcanvas {
left: 0;
transform: translateX(-100%);
}
.pavo-menu--offcanvas.pavo-menu--is-mobile.pavo-menu--panel-open .pavo-menu__offcanvas {
transform: translateX(0);
}
html.pavo-menu-scroll-lock {
overflow: hidden;
}