.nav-mega__panel {
padding: 16px 20px;
max-height: calc(100dvh - var(--header-h) - 16px);
}
.nav-mega__groups {
gap: 16px;
}
.nav-mega__group h3 {
font-size: 13px;
line-height: 1.3;
padding-bottom: 7px;
}
.nav-mega__link {
font-size: 12px;
line-height: 1.35;
padding-block: 4px;
}
.nav-mega__all {
font-size: 12px;
margin-top: 8px;
} .nav-mega:not(.nav-mega--mobile) > .nav-mega__panel {
position: fixed !important;
z-index: 120;
left: 50% !important;
right: auto !important;
top: var(--header-h) !important;
transform: translate(-50%, -8px) !important;
width: min(calc(100vw - 24px), 1120px) !important;
max-width: calc(100vw - 24px) !important;
max-height: calc(100dvh - var(--header-h) - 16px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
box-sizing: border-box;
}
.nav-mega:not(.nav-mega--mobile).is-open > .nav-mega__panel {
transform: translate(-50%, 0) !important;
}
.nav-mega--mobile .nav-mega__toggle,
.nav-mega--mobile > .nav-mega__panel {
display: none !important;
} footer .sub-menu,
footer .children {
display: none !important;
} footer .footer__grid > nav.footer__col:nth-of-type(3) .footer__list li:nth-child(n + 6) {
display: none !important;
} @media (max-width: 767px) {
.nav-mega__panel {
max-height: calc(100dvh - var(--header-h) - 12px);
}
.nav-mega__link {
font-size: 14px;
}
} .nav-mega:not(.nav-mega--mobile) .nav-mega__panel {
top: calc(100% + 14px);
padding: 0;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.1);
background:
radial-gradient(130% 150% at 100% 0%, rgba(30, 141, 233, 0.09), transparent 58%),
linear-gradient(180deg, #0d1118 0%, #08090d 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
inset 0 2px 0 rgba(30, 141, 233, 0.35),
0 30px 80px rgba(0, 0, 0, 0.55);
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__groups {
grid-template-columns: 1.35fr 1fr 1fr 1.1fr;
gap: 0;
counter-reset: biid-mega-group;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__group {
position: relative;
min-width: 0;
padding: 26px 20px 28px;
border-right: 1px solid rgba(255, 255, 255, 0.07);
counter-increment: biid-mega-group;
transition: background 0.25s ease;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__group:last-child {
border-right: 0;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__group:hover {
background: rgba(255, 255, 255, 0.018);
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__group h3,
.nav-mega:not(.nav-mega--mobile) .nav-mega__group summary {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
padding: 0 0 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
line-height: 1.4;
text-transform: uppercase;
color: rgba(245, 245, 245, 0.5);
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__group h3::before {
content: counter(biid-mega-group, decimal-leading-zero);
flex: none;
font-size: 10px;
letter-spacing: 0.06em;
color: var(--c-accent);
opacity: 0.85;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__group ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__link {
position: relative;
display: flex;
align-items: center;
min-height: 36px;
padding: 8px 20px 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.055);
font-size: 13.5px;
line-height: 1.35;
color: rgba(245, 245, 245, 0.64);
text-decoration: none;
transition: color 0.18s ease;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__link::after {
content: "→";
position: absolute;
top: 50%;
right: 0;
font-family: var(--font-mono);
font-size: 12px;
color: var(--c-accent);
opacity: 0;
transform: translate(-4px, -50%);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__link:hover,
.nav-mega:not(.nav-mega--mobile) .nav-mega__link:focus-visible {
color: #fff;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__link:hover::after,
.nav-mega:not(.nav-mega--mobile) .nav-mega__link:focus-visible::after {
opacity: 1;
transform: translate(0, -50%);
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__group li:last-child .nav-mega__link {
border-bottom: 0;
}
.nav-mega:not(.nav-mega--mobile) .nav-mega__link:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
border-radius: 4px;
}
@keyframes biid-mega-row-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li {
animation: biid-mega-row-in 0.28s ease both;
}
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li:nth-child(1) { animation-delay: 0.02s; }
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li:nth-child(2) { animation-delay: 0.05s; }
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li:nth-child(3) { animation-delay: 0.08s; }
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li:nth-child(4) { animation-delay: 0.11s; }
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li:nth-child(5) { animation-delay: 0.14s; }
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li:nth-child(6) { animation-delay: 0.17s; }
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li:nth-child(7) { animation-delay: 0.2s; }
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li:nth-child(8) { animation-delay: 0.23s; }
@media (prefers-reduced-motion: reduce) {
.nav-mega:not(.nav-mega--mobile).is-open .nav-mega__group li {
animation: none;
}
}