.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
color: var(--color-black);
background: var(--color-white);
border-bottom: var(--border-width) solid var(--color-line);
transition:
transform var(--duration-base) var(--ease-out),
background-color var(--duration-base) var(--ease-out),
border-color var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out);
} .site-header--overlay {
position: absolute;
left: 0;
right: 0;
color: var(--color-on-dark);
background: transparent;
border-bottom-color: transparent;
}
.luchi-js .site-header--overlay {
position: fixed;
} .site-header--on-light {
color: var(--color-black);
}
.site-header--overlay.is-solid {
color: var(--color-black);
background: var(--color-white);
border-bottom-color: var(--color-line);
}
.site-header.is-hidden {
transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
} body.admin-bar .site-header {
top: var(--wp-admin--admin-bar--height, 0px);
}
@media (max-width: 600px) { #wpadminbar {
position: fixed;
}
} .navbar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: var(--header-height-compact);
padding: 0 var(--container-padding);
transition: height var(--duration-base) var(--ease-out);
}
.site-header--overlay:not(.is-solid) .navbar {
height: var(--header-height);
}
.navbar-logo {
grid-column: 2;
grid-row: 1;
height: var(--logo-height-compact);
transition: height var(--duration-base) var(--ease-out);
}
.site-header--overlay:not(.is-solid) .navbar-logo {
height: var(--logo-height);
}
.navbar-logo a {
display: block;
height: 100%;
color: inherit;
} .navbar-menu {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.navbar-menu--left  { grid-column: 1; grid-row: 1; } .navbar-end {
grid-column: 3;
grid-row: 1;
justify-self: end;
display: flex;
align-items: center;
gap: var(--space-m);
}
.navbar-menu a {
position: relative;
display: inline-flex;
align-items: center;
min-height: var(--touch-target);
font-size: var(--text-label);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
text-decoration: none;
color: inherit;
white-space: nowrap;
} .navbar-menu a::after {
content: '';
position: absolute;
left: 0;
right: var(--tracking-label); bottom: 10px;
height: var(--border-width);
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration-base) var(--ease-out);
}
.navbar-menu a:hover::after,
.navbar-menu a:focus-visible::after,
.navbar-menu .current-menu-item > a::after,
.navbar-menu .current-menu-ancestor > a::after,
.navbar-menu .current_page_parent > a::after,
.navbar-langs a[aria-current="true"]::after {
transform: scaleX(1);
} .navbar-langs {
position: relative;
padding-left: var(--space-m);
}
.navbar-langs::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: var(--border-width);
height: 16px;
background: currentColor;
opacity: 0.4;
transform: translateY(-50%);
} .navbar-toggle {
grid-column: 3;
grid-row: 1;
justify-self: end;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 7px;
width: var(--touch-target);
height: var(--touch-target);
margin-right: -10px; padding: 0;
border: 0;
border-radius: var(--radius);
background: none;
color: inherit;
cursor: pointer;
}
.luchi-js .navbar-toggle {
display: inline-flex;
}
.navbar-toggle__line {
display: block;
width: 24px;
height: var(--border-width);
background: currentColor;
transition: transform var(--duration-base) var(--ease-out);
} .navbar-toggle[aria-expanded="true"] .navbar-toggle__line:first-child {
transform: translateY(4px) rotate(45deg);
}
.navbar-toggle[aria-expanded="true"] .navbar-toggle__line:nth-child(2) {
transform: translateY(-4px) rotate(-45deg);
} .site-header.is-menu-open {
color: var(--color-black);
background: var(--color-paper);
border-bottom-color: transparent;
}
.mobile-menu {
position: fixed;
inset: 0;
z-index: -1; overflow-y: auto;
overscroll-behavior: contain;
background: var(--color-paper);
color: var(--color-black);
animation: luchi-menu-in var(--duration-base) var(--ease-out);
}
.mobile-menu[hidden] {
display: none;
} .mobile-menu:focus {
outline: none;
}
.mobile-menu__inner {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-xl);
min-height: 100%;
padding: calc(var(--header-height-compact) + var(--space-l)) var(--container-padding) var(--space-l);
}
.mobile-menu__list {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-menu__list a {
display: flex;
align-items: center;
min-height: var(--touch-target);
padding: 4px 0;
font-size: var(--text-h2);
font-weight: var(--weight-light);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
text-decoration: none;
color: inherit;
}
.mobile-menu__list .current-menu-item > a,
.mobile-menu__list .current_page_parent > a {
text-decoration: underline;
text-decoration-thickness: var(--border-width);
text-underline-offset: 0.2em;
}
.mobile-menu__contacts {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.mobile-menu__contacts a,
.mobile-menu__social a {
display: inline-flex;
align-items: center;
min-height: var(--touch-target);
text-decoration: none;
}
.mobile-menu__social {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-m);
margin: var(--space-s) 0 0;
padding: 0;
list-style: none;
} .mobile-menu__langs {
display: flex;
gap: 0 var(--space-m);
margin: var(--space-m) 0 0;
padding: 0;
list-style: none;
}
.mobile-menu__langs a {
display: inline-flex;
align-items: center;
min-width: var(--touch-target);
min-height: var(--touch-target);
font-size: var(--text-label);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
text-decoration: none;
color: inherit;
}
.mobile-menu__langs a[aria-current="true"] {
text-decoration: underline;
text-decoration-thickness: var(--border-width);
text-underline-offset: 0.4em;
}
@keyframes luchi-menu-in {
from { opacity: 0; }
to   { opacity: 1; }
} html.luchi-menu-open {
overflow: hidden;
} @media (min-width: 1200px) {
.navbar-menu {
display: flex;
gap: var(--space-l);
}
.navbar-langs {
gap: var(--space-s);
}
.luchi-js .navbar-toggle,
.mobile-menu {
display: none;
}
}