.sls-hm-wrapper {
--sls-hm-primary: var(--sdb-color-primary, #0058b7);
--sls-hm-secondary: var(--sdb-color-secondary, #009bd8);
--sls-hm-title: var(--sdb-color-title, #364048);
--sls-hm-text: var(--sdb-color-text, #364048);
--sls-hm-muted: var(--sdb-color-muted, #6b7785);
--sls-hm-border: var(--sdb-color-border, #eef3f8);
--sls-hm-surface: var(--sdb-color-surface, #ffffff);
--sls-hm-background: var(--sdb-color-background, #f5f8fb);
--sls-hm-radius: var(--sdb-nav-strip-radius, var(--sdb-radius-pill, 999px));
--sls-hm-focus: var(--sdb-nav-strip-focus-ring, rgba(0, 88, 183, 0.35));
display: block;
width: 100%;
max-width: 100%;
clear: both;
margin: 0.95rem 0 1.35rem;
padding: 0;
font-family: var(--sdb-nav-font, inherit);
} .sls-hm-wrapper.sdb-nav-strip {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
border-radius: 0 !important;
}
.sls-hm-wrapper.sdb-nav-strip::before,
.sls-hm-wrapper.sdb-nav-strip::after {
display: none !important;
content: none !important;
}
.sls-hm-wrapper > ul.sls-hm-menu {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
background: transparent;
row-gap: var(--sdb-space-sm, 10px);
}
.sls-hm-align-left > ul.sls-hm-menu {
justify-content: flex-start;
}
.sls-hm-align-center > ul.sls-hm-menu {
justify-content: center;
}
.sls-hm-wrapper > ul.sls-hm-menu > li {
margin: 0;
padding: 0;
position: relative;
list-style: none;
display: block;
}
.sls-hm-wrapper > ul.sls-hm-menu > li > a.sls-hm-link {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
white-space: nowrap;
}
.sls-hm-wrapper a:focus-visible {
outline: 2px solid var(--sls-hm-focus);
outline-offset: 4px;
border-radius: var(--sdb-radius-sm, 7px);
} .sls-hm-wrapper > ul.sls-hm-menu > li > a.sdb-nav-strip__link {
min-height: 38px;
padding: var(--sdb-nav-strip-link-padding-y, 9px) var(--sdb-nav-strip-link-padding-x, 0);
color: var(--sdb-nav-strip-color, var(--sls-hm-text));
background: transparent !important;
border: 0 !important;
border-bottom: 2px solid var(--sdb-nav-strip-border-color, rgba(0, 88, 183, 0.16)) !important;
box-shadow: none !important;
border-radius: 0;
font-size: var(--sdb-nav-strip-font-size, var(--sdb-nav-font-size, 0.98rem));
font-weight: var(--sdb-nav-strip-font-weight, var(--sdb-nav-font-weight, 520));
line-height: 1.35;
letter-spacing: var(--sdb-nav-letter-spacing, -0.01em);
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sls-hm-wrapper > ul.sls-hm-menu > li:hover > a.sdb-nav-strip__link,
.sls-hm-wrapper > ul.sls-hm-menu > li > a.sdb-nav-strip__link:hover,
.sls-hm-wrapper > ul.sls-hm-menu > li > a.sdb-nav-strip__link:focus-visible {
color: var(--sdb-nav-strip-color-hover, var(--sls-hm-primary)) !important;
border-bottom-color: var(--sdb-nav-strip-color-hover, var(--sls-hm-primary)) !important;
}
.sls-hm-wrapper > ul.sls-hm-menu > li.current-menu-item > a.sdb-nav-strip__link,
.sls-hm-wrapper > ul.sls-hm-menu > li.current-menu-ancestor > a.sdb-nav-strip__link,
.sls-hm-wrapper > ul.sls-hm-menu > li.current-menu-parent > a.sdb-nav-strip__link,
.sls-hm-wrapper > ul.sls-hm-menu > li > a.sdb-nav-strip__link--active,
.sls-hm-wrapper > ul.sls-hm-menu > li > a[aria-current="page"] {
color: var(--sdb-nav-strip-color-active, var(--sls-hm-primary)) !important;
border-bottom-color: var(--sdb-nav-strip-active-border, var(--sls-hm-primary)) !important;
} .sls-hm-style-1 > ul.sls-hm-menu {
gap: var(--sdb-nav-strip-gap, clamp(26px, 3.7vw, 48px));
flex-wrap: wrap;
}
.sls-hm-style-2 > ul.sls-hm-menu {
gap: var(--sdb-nav-strip-gap, 16px);
flex-wrap: wrap;
}
.sls-hm-style-2 > ul.sls-hm-menu > li > a.sdb-nav-strip__link {
padding-inline: 12px;
}
.sls-hm-style-3 > ul.sls-hm-menu {
gap: var(--sdb-nav-strip-gap-mobile, 10px);
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.sls-hm-style-3 > ul.sls-hm-menu::-webkit-scrollbar {
display: none;
}
.sls-hm-style-3 > ul.sls-hm-menu > li {
flex-shrink: 0;
} .sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-back > a.sls-hm-link,
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-home > a.sls-hm-link {
min-height: 34px;
gap: 8px;
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-back > a.sls-hm-link::before,
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-home > a.sls-hm-link::before {
content: '';
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: currentColor;
line-height: 1;
transition: transform 0.2s ease;
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-back > a.sls-hm-link::before {
content: '←';
font-size: 17px;
font-weight: 600;
margin-top: -1px;
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-home > a.sls-hm-link::before {
width: 15px;
height: 15px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5.25a1 1 0 0 1-1-1v-4.75h-3.5v4.75a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8Z'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5.25a1 1 0 0 1-1-1v-4.75h-3.5v4.75a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8Z'/%3E%3C/svg%3E");
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-back:hover > a.sls-hm-link::before,
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-back > a.sls-hm-link:focus-visible::before {
transform: translateX(-2px);
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-home:hover > a.sls-hm-link::before,
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-home > a.sls-hm-link:focus-visible::before {
transform: translateY(-1px);
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-home > a.sdb-nav-strip__link--chip {
padding-inline: var(--sdb-nav-strip-link-padding-x, 13px);
border-radius: var(--sdb-nav-strip-radius, var(--sls-hm-radius));
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-back > a.sdb-nav-strip__link--muted {
color: var(--sdb-nav-strip-muted-color, var(--sls-hm-muted));
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-back > a.sdb-nav-strip__link--muted {
border-bottom-color: var(--sdb-nav-strip-border-color, rgba(107, 119, 133, 0.22)) !important;
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-home > a.sdb-nav-strip__link--chip {
border-bottom-color: var(--sdb-nav-strip-border-color, rgba(0, 88, 183, 0.18)) !important;
} .sls-hm-wrapper .menu-item-has-children > a.sls-hm-link::after {
content: '';
display: inline-block;
margin-left: 6px;
vertical-align: middle;
border-top: 4px solid currentColor;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
transition: transform 0.2s ease;
}
.sls-hm-wrapper ul.sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
min-width: 220px;
display: flex;
flex-direction: column;
list-style: none;
margin: 10px 0 0;
padding: 8px 0;
background-color: var(--sdb-nav-dropdown-bg, var(--sls-hm-surface));
border: 1px solid var(--sls-hm-border);
border-radius: var(--sdb-radius-md, 10px);
box-shadow: var(--sdb-nav-dropdown-shadow, 0 10px 30px rgba(31, 42, 54, 0.10));
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.sls-hm-align-center ul.sub-menu {
left: 50%;
transform: translate(-50%, 8px);
}
.sls-hm-wrapper .menu-item-has-children:hover > ul.sub-menu,
.sls-hm-wrapper .menu-item-has-children:focus-within > ul.sub-menu,
.sls-hm-wrapper .menu-item-has-children.sls-hm-mobile-open > ul.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sls-hm-align-center .menu-item-has-children:hover > ul.sub-menu,
.sls-hm-align-center .menu-item-has-children:focus-within > ul.sub-menu,
.sls-hm-align-center .menu-item-has-children.sls-hm-mobile-open > ul.sub-menu {
transform: translate(-50%, 0);
}
.sls-hm-wrapper .menu-item-has-children:hover > a.sls-hm-link::after,
.sls-hm-wrapper .menu-item-has-children.sls-hm-mobile-open > a.sls-hm-link::after {
transform: rotate(180deg);
}
.sls-hm-wrapper ul.sub-menu li {
display: block;
width: 100%;
margin: 0;
padding: 0;
}
.sls-hm-wrapper ul.sub-menu li a {
display: block;
width: 100%;
box-sizing: border-box;
min-height: 0;
padding: 10px 18px;
color: var(--sls-hm-text);
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: 0.94rem;
font-weight: 500;
line-height: 1.45;
text-decoration: none;
text-transform: none;
white-space: nowrap;
}
.sls-hm-wrapper ul.sub-menu li a::after {
display: none;
}
.sls-hm-wrapper ul.sub-menu li a:hover,
.sls-hm-wrapper ul.sub-menu li a:focus-visible {
background-color: var(--sls-hm-background);
color: var(--sls-hm-primary);
} .sls-hm-wrapper .sdb-btn.sls-hm-link,
.sls-hm-wrapper .sdb-btn--text.sls-hm-link,
.sls-hm-wrapper .sdb-btn--neutral.sls-hm-link {
background: transparent;
border: 0;
box-shadow: none;
}
@media screen and (max-width: 768px) {
.sls-hm-wrapper {
margin: 0.75rem 0 1.1rem;
}
.sls-hm-wrapper > ul.sls-hm-menu {
gap: var(--sdb-nav-strip-gap-mobile, 12px);
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.sls-hm-wrapper > ul.sls-hm-menu::-webkit-scrollbar {
display: none;
}
.sls-hm-wrapper > ul.sls-hm-menu > li {
flex-shrink: 0;
}
.sls-hm-wrapper > ul.sls-hm-menu > li > a.sdb-nav-strip__link {
min-height: 34px;
font-size: 0.9rem;
padding-top: 7px;
padding-bottom: 8px;
}
.sls-hm-wrapper > ul.sls-hm-menu > li.sls-menu-home > a.sls-hm-link::before {
width: 14px;
height: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.sls-hm-wrapper *,
.sls-hm-wrapper *::before,
.sls-hm-wrapper *::after {
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
scroll-behavior: auto;
}
}