.theme-main-navigation {
position: relative;
z-index: 1000;
background-color: var(--wp--preset--color--white);
}
.theme-main-navigation::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 100%;
background-color: var(--wp--preset--color--white);
transform: translateX(-50%);
}
.theme-main-navigation.is-sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2000;
}
.theme-main-navigation.is-sticky::before {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.theme-main-navigation,
.theme-main-navigation__logo-wrapper {
transition:
height 0.25s ease,
width 0.25s ease,
margin 0.25s ease,
font-size 0.25s ease,
transform 0.25s ease;
}
.theme-main-navigation.is-sticky .theme-main-navigation__container {
height: 92px;
transition: height 0.25s ease;
}
.theme-main-navigation.is-sticky .theme-main-navigation__logo-wrapper {
margin: 0 var(--wp--preset--spacing--4);
}
.theme-main-navigation.is-sticky .theme-main-navigation__logo-link {
width: 80px;
height: 80px;
}
.theme-main-navigation.is-sticky .theme-main-navigation__link,
.theme-main-navigation.is-sticky .theme-main-navigation__trigger {
font-size: var(--wp--preset--font-size--4);
}
.theme-main-navigation__placeholder {
width: 100%;
} .theme-main-navigation__burger {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
background: transparent;
cursor: pointer;
padding: 0;
}
.theme-main-navigation__burger-lines {
position: relative;
width: 22px;
height: 2px;
background: var(--wp--preset--color--default);
border-radius: 2px;
}
.theme-main-navigation__burger-lines::before,
.theme-main-navigation__burger-lines::after {
content: '';
position: absolute;
left: 0;
width: 22px;
height: 2px;
background: var(--wp--preset--color--default);
border-radius: 2px;
transition: transform 0.25s ease, top 0.25s ease, opacity 0.25s ease;
}
.theme-main-navigation__burger-lines::before {
top: -7px;
}
.theme-main-navigation__burger-lines::after {
top: 7px;
}
.theme-main-navigation.is-mobile-open .theme-main-navigation__burger-lines {
background: transparent;
}
.theme-main-navigation.is-mobile-open .theme-main-navigation__burger-lines::before {
top: 0;
transform: rotate(45deg);
}
.theme-main-navigation.is-mobile-open .theme-main-navigation__burger-lines::after {
top: 0;
transform: rotate(-45deg);
}
.theme-main-navigation__mobile {
display: none;
}
.theme-main-navigation__mobile-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
}
.theme-main-navigation__mobile-panel {
position: fixed;
top: 0;
left: 0;
width: min(88vw, 420px);
height: 100dvh;
background: var(--wp--preset--color--white);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
overflow: auto;
transform: translateX(-102%);
transition: transform 0.28s ease;
}
.theme-main-navigation.is-mobile-open .theme-main-navigation__mobile-panel {
transform: translateX(0);
}
.theme-main-navigation__mobile-header {
display: flex;
justify-content: flex-end;
padding: var(--wp--preset--spacing--2);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-main-navigation__mobile-close {
border: 0;
background: transparent;
cursor: pointer;
font-family: var(--wp--preset--font-family--cera-pro);
font-weight: 400;
text-transform: uppercase;
font-size: var(--wp--preset--font-size--3);
color: var(--wp--preset--color--default);
}
.theme-main-navigation__mobile-list,
.theme-main-navigation__mobile-sublinks {
list-style: none;
margin: 0;
padding: 0;
}
.theme-main-navigation__mobile-sublinks {
padding: 0 var(--wp--preset--spacing--1);
}
.theme-main-navigation__mobile-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-main-navigation__mobile-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wp--preset--spacing--2);
padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
}
.theme-main-navigation__mobile-link {
display: inline-flex;
align-items: center;
min-height: 44px;
font-family: var(--wp--preset--font-family--cera-pro);
font-size: var(--wp--preset--font-size--4);
font-weight: 800;
color: var(--wp--preset--color--default);
text-transform: uppercase;
text-decoration: none;
}
.theme-main-navigation__mobile-link--nolink {
cursor: default;
}
.theme-main-navigation__mobile-subtoggle {
width: 44px;
height: 44px;
border: 0;
background: transparent;
cursor: pointer;
position: relative;
}
.theme-main-navigation__mobile-subtoggle-label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.theme-main-navigation__mobile-subtoggle::before,
.theme-main-navigation__mobile-subtoggle::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 14px;
height: 2px;
background: var(--wp--preset--color--default);
border-radius: 2px;
}
.theme-main-navigation__mobile-subtoggle::after {
transform: rotate(90deg);
transition: transform 0.2s ease;
}
.theme-main-navigation__mobile-subtoggle[aria-expanded="true"]::after {
transform: rotate(0deg);
}
.theme-main-navigation__mobile-subpanel {
background-color: #fafafa;
padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--2);
}
.theme-main-navigation__mobile-sublink-item {
padding: 3px 0;
}
.theme-main-navigation__mobile-sublink {
font-family: var(--wp--preset--font-family--cera-pro);
font-size: var(--wp--preset--font-size--3);
color: var(--wp--preset--color--default);
text-decoration: none;
padding-left: var(--wp--preset--spacing--1);
}
.theme-main-navigation__mobile-sublink:hover,
.theme-main-navigation__mobile-sublink:focus-visible {
color: var(--wp--preset--color--primary);
}
.theme-main-navigation__mobile-sublink-item--show-all {
display: flex;
justify-content: flex-end;
padding-top: var(--wp--preset--spacing--1);
}
.theme-main-navigation__mobile-show-all {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--wp--preset--font-family--cera-pro);
font-size: var(--wp--preset--font-size--3);
font-weight: 700;
text-transform: uppercase;
color: var(--wp--preset--color--default);
text-decoration: none;
}
.theme-main-navigation__mobile-show-all-arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.theme-main-navigation__mobile-show-all:hover .theme-main-navigation__mobile-show-all-arrow,
.theme-main-navigation__mobile-show-all:focus-visible .theme-main-navigation__mobile-show-all-arrow {
transform: translateX(4px);
}
.theme-main-navigation__mobile-sublink-item--heading {
padding-top: var(--wp--preset--spacing--3);
}
.theme-main-navigation__mobile-sublinks
> .theme-main-navigation__mobile-sublink-item--heading:first-child {
padding-top: 0;
}
.theme-main-navigation__mobile-sublink-heading {
display: block;
font-family: var(--wp--preset--font-family--cera-pro);
font-size: var(--wp--preset--font-size--3);
font-weight: 800;
text-transform: uppercase;
color: var(--wp--preset--color--default);
}
.theme-main-navigation__mobile-sublink-heading[href] {
text-decoration: none;
color: inherit;
}
.theme-main-navigation__container {
position: relative;
display: flex;
align-items: center;
height: 140px;
margin-inline: auto;
transition: height 0s ease;
} .theme-main-navigation__group {
flex: 1;
min-width: 0;
height: 100%;
}
.theme-main-navigation__list {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--2);
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.theme-main-navigation__group--left .theme-main-navigation__list {
justify-content: space-between;
}
.theme-main-navigation__group--right .theme-main-navigation__list {
justify-content: space-between;
} .theme-main-navigation__item {
position: static;
height: 100%;
}
.theme-main-navigation__item--megamenu-contained {
position: relative;
}
.theme-main-navigation__item--megamenu-contained.theme-main-navigation__item--megamenu-centered {
position: static;
}
.theme-main-navigation__link,
.theme-main-navigation__trigger {
position: relative;
display: inline-flex;
align-items: center;
height: 100%;
padding: 0;
background: none;
border: none;
cursor: pointer;
font-family: var(--wp--preset--font-family--cera-pro);
font-size: var(--wp--preset--font-size--5);
font-weight: 800;
color: var(--wp--preset--color--default);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: color 0.3s ease, font-size 0.25s ease;
}
.theme-main-navigation__link:hover,
.theme-main-navigation__link:focus-visible,
.theme-main-navigation__trigger:hover,
.theme-main-navigation__trigger:focus-visible,
.theme-main-navigation__item.is-active > .theme-main-navigation__trigger {
color: var(--wp--preset--color--primary);
}
.theme-main-navigation__trigger:focus-visible {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
border-radius: 2px;
}
.theme-main-navigation__link::after,
.theme-main-navigation__trigger::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 27px;
height: 3px;
background-color: var(--wp--preset--color--primary);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s ease;
}
.theme-main-navigation__link:hover::after,
.theme-main-navigation__link:focus-visible::after,
.theme-main-navigation__trigger:hover::after,
.theme-main-navigation__trigger:focus-visible::after,
.theme-main-navigation__item.is-active > .theme-main-navigation__trigger::after {
transform: scaleX(1);
} .theme-main-navigation__logo-wrapper {
position: relative;
width: 182px;
height: 40px;
margin: 0 var(--wp--preset--spacing--4);
}
.theme-main-navigation__logo-link {
position: absolute;
top: 0;
left: 50%;
width: 182px;
height: 182px;
text-decoration: none;
transform: translateX(-50%);
transition: width 0.35s, height 0.35s;
}
.theme-main-navigation__logo-img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 1024px) {
.theme-main-navigation__logo-img {
width: 120%;
height: 120%;
}
} .theme-main-navigation__megamenu {
position: absolute;
top: calc(100% + var(--wp--preset--spacing--3));
left: 0;
right: 0;
z-index: 100;
opacity: 0;
visibility: hidden;
--theme-mn-megamenu-tx: 0px;
transform: translate3d(var(--theme-mn-megamenu-tx), -8px, 0);
transition:
opacity 0.3s ease,
transform 0.3s ease,
visibility 0.3s ease;
pointer-events: none;
}
.theme-main-navigation__megamenu--contained {
left: 0;
right: auto;
width: max-content;
max-width: calc(100vw - (var(--wp--preset--spacing--2) * 2));
}
.theme-main-navigation__megamenu--contained.theme-main-navigation__megamenu--centered {
left: 50%;
right: auto;
--theme-mn-megamenu-tx: -50%;
}
.theme-main-navigation__item.is-active > .theme-main-navigation__megamenu {
opacity: 1;
visibility: visible;
transform: translate3d(var(--theme-mn-megamenu-tx), 0, 0);
pointer-events: auto;
}
.theme-main-navigation__megamenu-inner {
background-color: var(--wp--preset--color--white);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
padding-block: var(--wp--preset--spacing--3);
padding-inline: var(--wp--preset--spacing--2);
} .theme-main-navigation__megamenu--contained .theme-main-navigation__megamenu-inner {
width: fit-content;
max-width: calc(100vw - (var(--wp--preset--spacing--2) * 2));
margin-inline: 0;
box-sizing: border-box;
} .theme-main-navigation__megamenu-grid { display: flex;
gap: var(--wp--preset--spacing--3);
justify-content: center;
align-items: stretch;
align-content: flex-start;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
} .theme-main-navigation__column--links {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.theme-main-navigation__column-title {
margin: 0 0 var(--wp--preset--spacing--2);
font-size: var(--wp--preset--font-size--4);
font-weight: 700;
line-height: 1;
color: var(--wp--preset--color--default);
text-transform: uppercase;
}
.theme-main-navigation__column-title a {
color: inherit;
text-decoration: none;
}
.theme-main-navigation__sublinks {
margin: 0 0 var(--wp--preset--spacing--2) 0;
padding: 0;
list-style: none;
max-width: 230px;
display: flex;
flex-direction: column;
gap: 12px;
}
.theme-main-navigation__sublink-item {
position: relative;
padding-left: 12px;
line-height: 1.2
}
.theme-main-navigation__sublink {
font-size: var(--wp--preset--font-size--3);
color: var(--wp--preset--color--default);
text-decoration: none;
line-height: 1.2;
transition: color 0.3s ease;
}
.theme-main-navigation__sublink::before {
content: '';
position: absolute;
left: 0;
top: 10px;
display: inline-block;
width: 5px;
height: 5px;
background-color: var(--wp--preset--color--primary);
border-radius: 50%;
margin-right: 4px;
transform: translateY(-3px);
}
.theme-main-navigation__sublink:hover,
.theme-main-navigation__sublink:focus-visible {
color: var(--wp--preset--color--primary);
} .theme-main-navigation__show-all {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: auto;
font-size: var(--wp--preset--font-size--3);
font-weight: 700;
color: var(--wp--preset--color--default);
text-transform: uppercase;
text-decoration: none;
transition: color 0.3s ease;
}
.theme-main-navigation__show-all-arrow {
display: inline-block;
transition: transform 0.3s ease;
}
.theme-main-navigation__show-all:hover .theme-main-navigation__show-all-arrow {
transform: translateX(4px);
} .theme-main-navigation__visual-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--wp--preset--spacing--1);
max-width: 400px;
}
@supports selector(.theme-main-navigation__visual-grid:has(*)) {
.theme-main-navigation__visual-grid:has(> .theme-main-navigation__visual-card:only-child) {
grid-template-columns: 1fr;
}
}
.theme-main-navigation__visual-card {
display: flex;
flex-direction: column;
text-decoration: none;
}
.theme-main-navigation__visual-image-wrap {
position: relative;
overflow: hidden;
line-height: 0;
}
.theme-main-navigation__visual-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.theme-main-navigation__visual-card:hover .theme-main-navigation__visual-image {
transform: scale(1.05);
}
.theme-main-navigation__visual-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
}
.theme-main-navigation__visual-card:hover .theme-main-navigation__visual-overlay {
opacity: 1;
}
.theme-main-navigation__visual-label {
align-self: flex-start;
font-size: var(--wp--preset--font-size--3);
font-weight: 700;
line-height: 1.1;
text-transform: uppercase;
color: var(--wp--preset--color--white);
transform: translateY(-50%);
}
.theme-main-navigation__visual-label > span {
background-color: var(--wp--preset--color--primary);
padding: 2px 4px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
} .theme-main-navigation__mobile-visuals {
padding-top: var(--wp--preset--spacing--2);
}
.theme-main-navigation__mobile-visuals-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wp--preset--spacing--1);
}
.theme-main-navigation__mobile-visual-card {
display: flex;
flex-direction: column;
text-decoration: none;
}
.theme-main-navigation__mobile-visual-image-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.theme-main-navigation__mobile-visual-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.theme-main-navigation__mobile-visual-label {
margin-top: 4px;
font-family: var(--wp--preset--font-family--cera-pro);
font-size: var(--wp--preset--font-size--3);
font-weight: 700;
text-transform: uppercase;
color: var(--wp--preset--color--default);
} @media (max-width: 1024px) {
.theme-main-navigation__megamenu {
display: none;
}
.theme-main-navigation__burger {
display: inline-flex;
}
.theme-main-navigation__group {
display: none;
}
.theme-main-navigation__logo-wrapper {
width: 80px;
height: 80px;
margin: 0!important;
}
.theme-main-navigation__logo-wrapper .theme-main-navigation__logo-link {
width: 100%;
height: 100%;
}
.theme-main-navigation__container {
height: 80px;
justify-content: space-between;
}
.theme-main-navigation.is-sticky .theme-main-navigation__container {
height: 76px;
}
.theme-main-navigation__mobile {
display: block;
position: fixed;
inset: 0;
z-index: 3000;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
pointer-events: none;
}
.theme-main-navigation.is-mobile-open .theme-main-navigation__mobile {
opacity: 1;
visibility: visible;
pointer-events: auto;
} .theme-main-navigation__mobile-panel #site-header-top {
width: 100%;
margin: 0;
padding: var(--wp--preset--spacing--2);
box-sizing: border-box;
}
.theme-main-navigation__mobile-panel #site-header-top.alignfull {
max-width: none;
}
.theme-main-navigation__mobile-panel #site-header-top .wp-block-navigation {
width: 100%;
}
.theme-main-navigation__mobile-visuals--1 {
display: inline-block!important;
width: calc(50% - 0.5rem)!important;
padding-right: 0.5rem!important;
}
.theme-main-navigation__mobile-visuals--1 .theme-main-navigation__mobile-visuals-grid {
display: flex!important;
}
}