.kp-global-header__panel-body .tab {
display: flex;
width: 100%;
align-items: center;
gap: 12px;
padding: 13px 16px;
border-radius: var(--n-r-lg);
color: var(--n-text-soft);
font-size: .92rem;
font-weight: 600;
text-decoration: none;
transition: all .14s var(--n-ease);
border: 1px solid transparent;
margin-bottom: 6px;
}
.kp-global-header__panel-body .tab:hover {
background: var(--n-accent-soft);
color: var(--n-accent);
border-color: transparent;
}
.kp-global-header__panel-body .tab.active {
background: var(--n-accent);
border-color: var(--n-accent);
color: #fff;
font-weight: 700;
}
.kp-global-header__panel-body .tab.active .tab-icon,
.kp-global-header__panel-body .tab[aria-current="page"] .tab-icon { color: #fff; }
[data-theme="light"] .kp-global-header__panel-body .tab.active {
background: var(--n-accent);
border-color: var(--n-accent);
color: #fff;
}
[data-theme="light"] .kp-global-header__panel-body .tab:hover {
background: color-mix(in srgb, var(--n-accent) 12%, transparent);
color: var(--n-accent);
border-color: transparent;
}
.tabs--menu .tab,
.tabs--submenu .tab {
display: inline-flex;
align-items: center;
gap: var(--n-s-2);
padding: 9px 14px;
border: 1px solid transparent;
border-radius: var(--n-r-pill);
color: var(--n-text-soft);
text-decoration: none;
font-family: inherit;
font-size: var(--n-fs);
font-weight: var(--n-w-med);
line-height: 1.2;
white-space: nowrap;
transition:
color var(--n-dur-base) var(--n-ease),
background var(--n-dur-base) var(--n-ease),
border-color var(--n-dur-base) var(--n-ease);
}
.tabs--menu .tab:hover,
.tabs--submenu .tab:hover {
color: var(--n-text);
background: var(--n-bg-hover);
}
.tabs--menu .tab:focus-visible,
.tabs--submenu .tab:focus-visible {
outline: none;
box-shadow: var(--n-focus-ring);
}
.tabs--menu .tab.active,
.tabs--submenu .tab.active,
.tabs--menu .tab[aria-current="page"],
.tabs--submenu .tab[aria-current="page"] {
color: var(--n-accent);
background: var(--n-accent-soft);
font-weight: var(--n-w-sem);
}
.tabs--menu .tab.tab--is-ghost,
.tabs--menu .tab.tab--ghost {
background: transparent;
border-color: var(--n-line);
}
.tabs--menu .tab.tab--is-primary,
.tabs--menu .tab.tab--primary {
color: var(--n-text-on-accent);
background: var(--n-accent);
border-color: transparent;
}
.tabs--menu .tab.tab--is-primary:hover,
.tabs--menu .tab.tab--primary:hover {
background: var(--n-accent-hover);
color: var(--n-text-on-accent);
}
.tabs--menu .tab-icon,
.tabs--submenu .tab-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: currentColor;
opacity: .82;
}
.tabs--menu .tab-icon svg,
.tabs--submenu .tab-icon svg {
width: 18px;
height: 18px;
}
.tabs--menu .tab.active .tab-icon,
.tabs--submenu .tab.active .tab-icon,
.tabs--menu .tab[aria-current="page"] .tab-icon {
opacity: 1;
}
.tabs--menu .tab-label,
.tabs--submenu .tab-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.kp-menu-grid {
display: grid;
gap: var(--n-s-3);
align-items: start;
}
.kp-menu-section {
display: grid;
gap: var(--n-s-2);
padding: var(--n-s-3);
border: 1px solid var(--n-line);
border-radius: var(--n-r-lg);
background: var(--n-bg-2);
min-width: 0;
}
.kp-menu-section__title {
color: var(--n-text-mute);
font-size: var(--n-fs);
font-weight: var(--n-w-bold);
letter-spacing: .08em;
text-transform: uppercase;
}
.tabs--menu--header-panel .tab {
justify-content: flex-start;
white-space: normal;
padding: 10px 12px;
}
@media (max-width: 640px) {
.tabs--menu--header-panel {
grid-template-columns: 1fr;
}
.kp-menu-section {
padding: var(--n-s-3);
border-radius: var(--n-r-md);
}
}
.kp-menu-grid--header-panel .kp-menu-section {
padding: 0;
border: 0;
background: transparent;
}
.kp-menu-grid--header-panel .kp-menu-section__title {
font-family: var(--n-font-mono);
font-size: 10.5px;
font-weight: var(--n-w-sem);
letter-spacing: .2em;
color: var(--n-text-mute);
padding: 16px 6px 2px;
}
.tabs--menu--header-panel .tab {
border-radius: var(--n-r-sm);
padding: 12px 14px;
font-weight: var(--n-w-sem);
}
.tabs--menu--header-panel .tab:hover {
color: var(--n-accent);
background: var(--n-bg-soft);
}
.tabs--menu--header-panel .tab.active,
.tabs--menu--header-panel .tab[aria-current="page"] {
color: var(--n-accent);
background: color-mix(in srgb, var(--n-accent) 10%, transparent);
}
.tabs--menu--header-panel .tab.active .tab-icon,
.tabs--menu--header-panel .tab[aria-current="page"] .tab-icon {
color: var(--n-accent);
}