.rs-nav {
position: relative;
}
.rs-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 48px;
}
.rs-item {
position: relative;
}
.rs-link {
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 14px;
color: inherit;
outline: none;
line-height: 1;
}
.rs-link--top {
font-size: 17px;
font-weight: 700;
padding: 10px 0;
}
.rs-link--sub {
width: 100%;
justify-content: space-between;
padding: 10px 14px;
font-size: 15px;
font-weight: 600;
color: #111827;
}
.rs-submenu {
list-style: none;
margin: 0;
padding: 8px;
position: absolute;
min-width: 260px;
background: rgba(255, 255, 255, 0.92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow:
0 22px 55px rgba(17, 24, 39, 0.14),
0 2px 0 rgba(17, 24, 39, 0.03);
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: 16px;
z-index: 9999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(6px) scale(0.99);
transform-origin: top left;
transition:
opacity 0.18s ease,
visibility 0.18s ease,
transform 0.18s ease;
}
.rs-submenu > li {
position: relative;
}
.rs-submenu--lvl1 {
left: 0;
top: 100%;
margin-top: 12px;
}
.rs-submenu--lvlN {
left: 100%;
top: 0;
margin-left: 12px;
}
.rs-item--has-children:hover > .rs-submenu,
.rs-item--has-children:focus-within > .rs-submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.rs-item--sub {
width: 100%;
}
.rs-caret {
width: 12px;
height: 12px;
display: inline-block;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
opacity: 0.75;
}
.rs-caret--down {
transform: rotate(45deg);
}
.rs-caret--right {
transform: rotate(-45deg);
}
.rs-submenu .rs-item {
width: 100%;
}
.rs-submenu .rs-link--sub {
color: #111827;
}
.rs-submenu .rs-link--top {
font-size: 15px;
font-weight: 600;
padding: 10px 14px;
}
.rs-submenu .rs-link--top,
.rs-submenu .rs-link--sub {
border-radius: 12px;
transition:
background-color 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
outline: none;
}
.rs-submenu .rs-link--top:hover,
.rs-submenu .rs-link--top:focus,
.rs-submenu .rs-link--sub:hover,
.rs-submenu .rs-link--sub:focus {
background: rgba(17, 24, 39, 0.06);
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.06) inset;
transform: translateY(-1px);
}
.rs-submenu .rs-link--top:focus-visible,
.rs-submenu .rs-link--sub:focus-visible {
box-shadow:
0 0 0 3px rgba(0, 57, 118, 0.18),
0 1px 0 rgba(17, 24, 39, 0.06) inset;
}
.rs-submenu > li + li {
margin-top: 2px;
}
.rs-item--has-children > .rs-link {
cursor: pointer;
}
.rs-menu > .rs-item--has-children::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 12px;
}
.rs-submenu .rs-item--has-children::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 12px;
}
.rs-item--has-children > .rs-link .rs-caret {
transition: transform 0.18s ease;
transform-origin: 50% 50%;
}
.rs-item--has-children:hover > .rs-link .rs-caret,
.rs-item--has-children:focus-within > .rs-link .rs-caret {
transform: rotate(225deg);
}
.rs-submenu .rs-item--has-children:hover > .rs-link .rs-caret,
.rs-submenu .rs-item--has-children:focus-within > .rs-link .rs-caret {
transform: rotate(135deg);
}
@media (prefers-reduced-motion: reduce) {
.rs-item--has-children > .rs-link .rs-caret {
transition: none;
}
}
@media (prefers-reduced-motion: reduce) {
.rs-submenu {
transition: none;
}
}
header {
gap: 12px;
}
.rs-nav {
min-width: 0;
}
.rs-menu {
min-width: 0;
flex-wrap: wrap;
justify-content: center;
gap: clamp(12px, 3vw, 48px);
}
.rs-link--top {
font-size: clamp(14px, 1.1vw, 17px);
padding: clamp(6px, 1vw, 10px) 0;
white-space: nowrap;
}
@media (max-width: 1280px) {
header {
flex-wrap: wrap;
}
header > div {
min-width: 0;
}
.rs-menu {
row-gap: 10px;
}
}
@media (max-width: 1024px) {
.rs-submenu {
display: none;
}
}
header {
flex-wrap: wrap;
}
.rs-nav {
width: 100%;
}
.rs-menu {
flex-wrap: wrap;
justify-content: center;
row-gap: 12px;
}
@media (min-width: 1024px) {
header {
flex-wrap: nowrap;
column-gap: 20px;
}
header > div:first-child {
flex: 0 0 auto;
}
header > div:nth-child(2) {
flex: 1 1 auto;
min-width: 0;
padding: 0 12px;
}
header > div:last-child {
flex: 0 0 auto;
flex-wrap: nowrap;
white-space: nowrap;
gap: 16px;
}
.rs-nav {
width: 100%;
min-width: 0;
}
.rs-menu {
flex-wrap: wrap;
justify-content: center;
gap: 12px 40px;
min-width: 0;
}
.rs-link--top {
white-space: nowrap;
}
}
.rs-mobile-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 9998;
opacity: 0;
transition: opacity 0.18s ease;
}
.rs-mobile-backdrop.is-open {
opacity: 1;
}
.rs-mobile {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(360px, 92vw);
background: #fff;
z-index: 9999;
transform: translateX(100%);
transition: transform 0.22s ease;
display: flex;
flex-direction: column;
box-shadow: -18px 0 40px rgba(0, 0, 0, 0.1);
padding-bottom: var(--rs-safe-bottom);
}
.rs-mobile.is-open {
transform: translateX(0);
}
.rs-mobile__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.rs-mobile__close {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
}
.rs-mobile__nav {
padding: 10px 10px 0;
overflow: auto;
flex: 1 1 auto;
}
.rs-mobile-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.rs-mobile-menu .rs-item {
width: 100%;
position: relative;
}
.rs-mobile-menu .rs-link {
width: 100%;
justify-content: space-between;
padding: 12px 56px 12px 12px;
border-radius: 12px;
color: #111827;
font-weight: 700;
font-size: 16px;
position: relative;
}
.rs-mobile-menu .rs-link:active {
background: #f5f5f5;
}
.rs-mobile-menu .rs-item--has-children > .rs-link {
cursor: pointer;
}
.rs-mobile-menu .rs-submenu {
position: static;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
box-shadow: none;
border: 0;
padding: 0 0 8px 0;
margin: 0;
display: none;
}
.rs-mobile-menu .rs-submenu .rs-link--sub,
.rs-mobile-menu .rs-submenu .rs-link--top {
font-size: 15px;
font-weight: 600;
padding: 10px 12px;
border-radius: 12px;
}
.rs-mobile-menu .rs-submenu .rs-link--sub:active,
.rs-mobile-menu .rs-submenu .rs-link--top:active {
background: #f5f5f5;
}
.rs-mobile-menu .rs-item.is-expanded > .rs-submenu {
display: block;
}
.rs-mobile-menu .rs-item--has-children > .rs-link .rs-caret {
transition: transform 0.18s ease;
transform: rotate(45deg);
position: absolute;
right: 18px;
top: 50%;
margin-top: -7px;
width: 14px;
height: 14px;
}
.rs-mobile-menu .rs-item.is-expanded > .rs-link .rs-caret {
transform: rotate(225deg);
}
.rs-mobile__actions {
border-top: 1px solid rgba(0, 0, 0, 0.06);
padding: 12px 16px 16px;
display: grid;
gap: 10px;
padding-bottom: calc(16px + var(--rs-safe-bottom));
}
.rs-mobile__action {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
background: #f7f7f7;
text-decoration: none;
color: #111827;
font-weight: 700;
}
.rs-mobile__badge {
min-width: 1.35rem;
height: 1.35rem;
padding: 0 6px;
border-radius: 9999px;
background: #003976;
color: #fff;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.rs-mobile__account {
background: #003976;
color: #fff;
}
@media (min-width: 1024px) {
.rs-mobile,
.rs-mobile-backdrop {
display: none !important;
}
}
body.rs-no-scroll {
overflow: hidden;
}
:root {
--rs-safe-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (height: 100dvh) {
.rs-mobile {
height: 100dvh;
}
}
@supports not (height: 100dvh) {
.rs-mobile {
height: 100vh;
}
}
@media (max-width: 1023px) {
.rs-mobile-menu .rs-submenu .rs-link {
padding-left: 24px;
}
.rs-mobile-menu .rs-submenu .rs-submenu .rs-link {
padding-left: 36px;
}
.rs-mobile-menu .rs-submenu .rs-submenu .rs-submenu .rs-link {
padding-left: 48px;
}
.rs-mobile-menu .rs-submenu .rs-submenu .rs-submenu .rs-submenu .rs-link {
padding-left: 60px;
}
}