.mco-mobile-menu {
--mco-accent: #ffce00;
--mco-phone-button: #ffce00;
--mco-phone-text: #111214;
--mco-menu-font-size: 28px;
--mco-submenu-font-size: 15px;
--mco-panel: #ffffff;
--mco-text: #111214;
--mco-trigger-background: var(--mco-panel);
--mco-trigger-icon: var(--mco-text);
--mco-menu-background: var(--mco-panel);
--mco-muted: #74777d;
--mco-border: rgba(17, 18, 20, 0.12);
--mco-soft: #f4f4f2;
--mco-shadow: rgba(0, 0, 0, 0.18);
--mco-ease: cubic-bezier(0.77, 0, 0.18, 1);
position: relative;
z-index: 99990;
font-family: inherit;
}
.mco-mobile-menu--dark {
--mco-panel: #101113;
--mco-text: #ffffff;
--mco-muted: #9b9da2;
--mco-border: rgba(255, 255, 255, 0.14);
--mco-soft: #191a1d;
--mco-shadow: rgba(0, 0, 0, 0.42);
}
.mco-mobile-menu,
.mco-mobile-menu * {
box-sizing: border-box;
}
.mco-mobile-menu .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
html.mco-menu-lock,
body.mco-menu-lock {
overflow: hidden !important;
overscroll-behavior: none;
}
.mco-mobile-menu__trigger {
position: relative;
width: 50px;
height: 50px;
min-width: 50px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--mco-border);
border-radius: 50%;
background: var(--mco-trigger-background);
color: var(--mco-trigger-icon);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.1);
cursor: pointer;
appearance: none;
transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}
.mco-mobile-menu__trigger--floating {
position: fixed;
z-index: 99989;
top: max(20px, env(safe-area-inset-top));
}
.mco-mobile-menu--right .mco-mobile-menu__trigger--floating { right: max(20px, env(safe-area-inset-right)); }
.mco-mobile-menu--left .mco-mobile-menu__trigger--floating { left: max(20px, env(safe-area-inset-left)); }
.mco-mobile-menu__trigger:hover,
.mco-mobile-menu__trigger:focus-visible {
border-color: var(--mco-accent);
transform: scale(1.04);
outline: none;
}
.mco-mobile-menu__trigger-line {
position: absolute;
left: 12px;
width: 25px;
height: 1.5px;
border-radius: 2px;
background: currentColor;
transition: top 300ms ease, transform 300ms ease, width 300ms ease;
}
.mco-mobile-menu__trigger-line:nth-child(1) { top: 17px; }
.mco-mobile-menu__trigger-line:nth-child(2) { top: 24px; width: 19px; }
.mco-mobile-menu__trigger-line:nth-child(3) { top: 31px; }
.mco-mobile-menu__trigger:hover .mco-mobile-menu__trigger-line:nth-child(2) { width: 25px; }
.mco-mobile-menu__overlay {
position: fixed;
z-index: 99990;
inset: 0;
display: flex;
justify-content: flex-end;
visibility: hidden;
pointer-events: none;
background: rgba(5, 7, 10, 0);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
transition: background 480ms ease, backdrop-filter 480ms ease, visibility 0s linear 560ms;
}
.mco-mobile-menu--left .mco-mobile-menu__overlay { justify-content: flex-start; }
.mco-mobile-menu.is-open .mco-mobile-menu__overlay {
visibility: visible;
pointer-events: auto;
background: rgba(5, 7, 10, 0.64);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
transition-delay: 0s;
}
.mco-mobile-menu__panel {
position: relative;
width: min(92vw, 520px);
height: 100%;
min-height: 100vh;
min-height: 100dvh;
padding: clamp(24px, 4vw, 38px);
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--mco-menu-background);
color: var(--mco-text);
box-shadow: -30px 0 90px var(--mco-shadow);
transform: translate3d(105%, 0, 0);
transition: transform 560ms var(--mco-ease);
outline: none;
}
.mco-mobile-menu--left .mco-mobile-menu__panel {
box-shadow: 30px 0 90px var(--mco-shadow);
transform: translate3d(-105%, 0, 0);
}
.mco-mobile-menu.is-open .mco-mobile-menu__panel { transform: translate3d(0, 0, 0); }
.mco-mobile-menu__top {
min-height: 58px;
padding-bottom: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid var(--mco-border);
}
.mco-mobile-menu__brand {
width: min(230px, 65%);
max-width: min(230px, 65%);
min-width: 0;
display: inline-flex;
align-items: center;
color: var(--mco-text);
text-decoration: none;
}
.mco-mobile-menu__logo {
width: 100%;
max-width: 230px;
height: auto;
max-height: 54px;
display: block;
object-fit: contain;
object-position: left center;
}
.mco-mobile-menu__site-name {
font-size: 18px;
line-height: 1.2;
font-weight: 600;
}
.mco-mobile-menu__close {
position: relative;
width: 46px;
height: 46px;
min-width: 46px;
padding: 0;
border: 1px solid var(--mco-border);
border-radius: 50%;
background: transparent;
color: var(--mco-text);
cursor: pointer;
appearance: none;
transition: background 250ms ease, color 250ms ease, border-color 250ms ease, transform 300ms ease;
}
.mco-mobile-menu__close:hover,
.mco-mobile-menu__close:focus-visible {
border-color: var(--mco-accent);
background: var(--mco-accent);
color: #111214;
transform: rotate(90deg);
outline: none;
}
.mco-mobile-menu__close span {
position: absolute;
top: 21px;
left: 11px;
width: 22px;
height: 1.5px;
border-radius: 2px;
background: currentColor;
}
.mco-mobile-menu__close span:first-child { transform: rotate(45deg); }
.mco-mobile-menu__close span:last-child { transform: rotate(-45deg); }
.mco-mobile-menu__search {
position: relative;
min-height: 54px;
margin-top: 22px;
display: flex;
align-items: center;
flex: 0 0 auto;
overflow: hidden;
border: 1px solid var(--mco-border);
border-radius: 16px;
background: var(--mco-soft);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
opacity: 0;
transform: translate3d(0, 10px, 0);
transition: border-color 220ms ease, box-shadow 220ms ease, opacity 420ms ease, transform 420ms ease;
}
.mco-mobile-menu.is-open .mco-mobile-menu__search {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 120ms;
}
.mco-mobile-menu__search:focus-within {
border-color: var(--mco-accent);
box-shadow: 0 0 0 3px var(--mco-accent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.mco-mobile-menu__search-icon {
position: absolute;
z-index: 1;
left: 15px;
width: 20px;
height: 20px;
fill: none;
stroke: var(--mco-muted);
stroke-width: 1.7;
stroke-linecap: round;
pointer-events: none;
}
.mco-mobile-menu__search input[type="search"] {
width: 100%;
height: 52px;
min-width: 0;
margin: 0;
padding: 0 58px 0 44px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--mco-text);
font: inherit;
font-size: 16px;
line-height: 1;
box-shadow: none;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.mco-mobile-menu__search input[type="search"]::placeholder {
color: var(--mco-muted);
opacity: 1;
}
.mco-mobile-menu__search input[type="search"]::-webkit-search-cancel-button {
margin-right: 2px;
}
.mco-mobile-menu__search button {
position: absolute;
right: 7px;
width: 38px;
height: 38px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 12px;
background: var(--mco-phone-button);
color: var(--mco-phone-text);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: filter 180ms ease, transform 180ms ease;
}
.mco-mobile-menu__search button:hover { filter: brightness(0.95); }
.mco-mobile-menu__search button:focus-visible { outline: 2px solid var(--mco-phone-text); outline-offset: -4px; }
.mco-mobile-menu__search button:active { transform: scale(0.96); }
.mco-mobile-menu__search button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mco-mobile-menu__navigation {
margin-bottom: auto;
padding: 28px 0 34px;
}
.mco-mobile-menu__search + .mco-mobile-menu__navigation { padding-top: 20px; }
.mco-mobile-menu__list,
.mco-mobile-menu__submenu {
margin: 0;
padding: 0;
list-style: none;
}
.mco-mobile-menu__item { margin: 0; padding: 0; }
.mco-mobile-menu__item-row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
overflow: hidden;
border-bottom: 1px solid var(--mco-border);
opacity: 0;
transform: translate3d(28px, 0, 0);
transition: opacity 420ms ease, transform 420ms ease;
}
.mco-mobile-menu--left .mco-mobile-menu__item-row { transform: translate3d(-28px, 0, 0); }
.mco-mobile-menu__item-row > a {
min-width: 0;
padding: 15px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
color: var(--mco-text);
text-decoration: none;
}
.mco-mobile-menu__item-row::after {
content: "";
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 2px;
background: var(--mco-accent);
transform: scaleX(0);
transform-origin: right;
transition: transform 350ms ease;
}
.mco-mobile-menu__item-row:hover::after,
.mco-mobile-menu__item.current-menu-item > .mco-mobile-menu__item-row::after,
.mco-mobile-menu__item.current-menu-parent > .mco-mobile-menu__item-row::after,
.mco-mobile-menu__item.current-menu-ancestor > .mco-mobile-menu__item-row::after {
transform: scaleX(1);
transform-origin: left;
}
.mco-mobile-menu__label {
font-size: min(var(--mco-menu-font-size), 8vw);
line-height: 1.15;
font-weight: 500;
transition: transform 280ms ease, color 280ms ease;
}
.mco-mobile-menu__number {
color: var(--mco-muted);
font-size: 10px;
line-height: 1;
font-weight: 600;
transition: color 280ms ease;
}
.mco-mobile-menu__item-row > a:hover .mco-mobile-menu__label,
.mco-mobile-menu__item.current-menu-item > .mco-mobile-menu__item-row .mco-mobile-menu__label,
.mco-mobile-menu__item.current-menu-parent > .mco-mobile-menu__item-row .mco-mobile-menu__label,
.mco-mobile-menu__item.current-menu-ancestor > .mco-mobile-menu__item-row .mco-mobile-menu__label {
color: var(--mco-accent);
transform: translateX(7px);
}
.mco-mobile-menu__item-row > a:hover .mco-mobile-menu__number,
.mco-mobile-menu__item.current-menu-item > .mco-mobile-menu__item-row .mco-mobile-menu__number,
.mco-mobile-menu__item.current-menu-parent > .mco-mobile-menu__item-row .mco-mobile-menu__number,
.mco-mobile-menu__item.current-menu-ancestor > .mco-mobile-menu__item-row .mco-mobile-menu__number { color: var(--mco-accent); }
.mco-mobile-menu__submenu-toggle {
position: relative;
z-index: 1;
width: 40px;
height: 40px;
min-width: 40px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--mco-border);
border-radius: 50%;
background: var(--mco-soft);
color: var(--mco-text);
cursor: pointer;
appearance: none;
transition: background 240ms ease, border-color 240ms ease, color 240ms ease, transform 240ms ease;
}
.mco-mobile-menu__submenu-toggle:hover,
.mco-mobile-menu__submenu-toggle:focus-visible {
border-color: var(--mco-accent);
background: var(--mco-accent);
color: #111214;
outline: none;
}
.mco-mobile-menu__submenu-toggle svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 320ms var(--mco-ease);
}
.mco-mobile-menu__submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mco-mobile-menu__submenu-wrap {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
transition: grid-template-rows 380ms var(--mco-ease), opacity 260ms ease, visibility 0s linear 380ms;
}
.mco-mobile-menu__submenu-wrap.is-open {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mco-mobile-menu__submenu {
min-height: 0;
padding: 0 0 0 18px;
overflow: hidden;
border-left: 1px solid var(--mco-border);
}
.mco-mobile-menu__subitem:first-child { margin-top: 10px; }
.mco-mobile-menu__subitem:last-child { margin-bottom: 12px; }
.mco-mobile-menu__subitem + .mco-mobile-menu__subitem { margin-top: 3px; }
.mco-mobile-menu__subitem > .mco-mobile-menu__item-row {
border-bottom: 0;
border-radius: 9px;
opacity: 1;
transform: none;
}
.mco-mobile-menu__subitem > .mco-mobile-menu__item-row::after { display: none; }
.mco-mobile-menu__subitem > .mco-mobile-menu__item-row > a { padding: 10px 12px; }
.mco-mobile-menu__subitem .mco-mobile-menu__label { color: var(--mco-muted); font-size: var(--mco-submenu-font-size); line-height: 1.35; font-weight: 500; }
.mco-mobile-menu__subitem > .mco-mobile-menu__item-row:hover { background: var(--mco-soft); }
.mco-mobile-menu__subitem > .mco-mobile-menu__item-row > a:hover .mco-mobile-menu__label,
.mco-mobile-menu__subitem.current-menu-item > .mco-mobile-menu__item-row .mco-mobile-menu__label { color: var(--mco-accent); transform: translateX(4px); }
.mco-mobile-menu__bottom { padding-top: 8px; }
.mco-mobile-menu__phone {
position: relative;
min-height: 76px;
padding: 15px 18px;
display: grid;
grid-template-columns: 42px 1fr 22px;
align-items: center;
gap: 14px;
overflow: hidden;
border-radius: 14px;
background: var(--mco-phone-button);
color: var(--mco-phone-text);
text-decoration: none;
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity 420ms ease, transform 420ms ease, filter 250ms ease;
}
.mco-mobile-menu__phone::before {
content: "";
position: absolute;
top: -60%;
bottom: -60%;
left: -45%;
width: 35%;
background: rgba(255, 255, 255, 0.3);
transform: skewX(-18deg);
transition: left 600ms ease;
}
.mco-mobile-menu__phone:hover { filter: brightness(0.96); transform: translate3d(0, -2px, 0) !important; }
.mco-mobile-menu__phone:hover::before { left: 125%; }
.mco-mobile-menu__phone-icon {
position: relative;
z-index: 1;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(17, 18, 20, 0.1);
}
.mco-mobile-menu__phone-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mco-mobile-menu__phone > span:nth-child(2) { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; font-size: 15px; line-height: 1.1; font-weight: 600; }
.mco-mobile-menu__phone small { font-size: 9px; line-height: 1; font-weight: 600; text-transform: uppercase; }
.mco-mobile-menu__phone-arrow { position: relative; z-index: 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 250ms ease; }
.mco-mobile-menu__phone:hover .mco-mobile-menu__phone-arrow { transform: translateX(4px); }
.mco-mobile-menu__empty { margin: 30px 0; padding: 16px; border: 1px dashed var(--mco-border); border-radius: 10px; color: var(--mco-muted); font-size: 13px; }
.mco-mobile-menu.is-open .mco-mobile-menu__list > .mco-mobile-menu__item > .mco-mobile-menu__item-row,
.mco-mobile-menu.is-open .mco-mobile-menu__phone { opacity: 1; transform: translate3d(0, 0, 0); }
.mco-mobile-menu.is-open .mco-mobile-menu__item:nth-child(1) > .mco-mobile-menu__item-row { transition-delay: 140ms; }
.mco-mobile-menu.is-open .mco-mobile-menu__item:nth-child(2) > .mco-mobile-menu__item-row { transition-delay: 180ms; }
.mco-mobile-menu.is-open .mco-mobile-menu__item:nth-child(3) > .mco-mobile-menu__item-row { transition-delay: 220ms; }
.mco-mobile-menu.is-open .mco-mobile-menu__item:nth-child(4) > .mco-mobile-menu__item-row { transition-delay: 260ms; }
.mco-mobile-menu.is-open .mco-mobile-menu__item:nth-child(5) > .mco-mobile-menu__item-row { transition-delay: 300ms; }
.mco-mobile-menu.is-open .mco-mobile-menu__item:nth-child(6) > .mco-mobile-menu__item-row { transition-delay: 340ms; }
.mco-mobile-menu.is-open .mco-mobile-menu__item:nth-child(7) > .mco-mobile-menu__item-row { transition-delay: 380ms; }
.mco-mobile-menu.is-open .mco-mobile-menu__item:nth-child(8) > .mco-mobile-menu__item-row { transition-delay: 420ms; }
.mco-mobile-menu.is-open .mco-mobile-menu__phone { transition-delay: 440ms; }
@media (min-width: 1025px) {
.mco-mobile-menu__trigger--floating { display: none; }
}
@media (max-width: 600px) {
.mco-mobile-menu__panel { width: 100%; padding: 22px; }
.mco-mobile-menu__navigation { padding-top: 20px; }
.mco-mobile-menu__item-row > a { padding: 13px 0; }
.mco-mobile-menu__subitem > .mco-mobile-menu__item-row > a { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.mco-mobile-menu *,
.mco-mobile-menu *::before,
.mco-mobile-menu *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}