/* 导航胶囊（款式C）：base.html / public.html / download.html 共用 */
/* ═══ 款式 C：滑块追随式液态玻璃胶囊导航（仅桌面 >768px；移动端保持原汉堡布局） ═══ */
.nav-tools { display: contents; }
@media (min-width: 769px) {
.site-nav {
top: 0.75rem;
width: min(1180px, calc(100% - 2rem));
margin: 0.75rem auto 0;
border-radius: 999px;
border: 1px solid var(--liquid-rim) !important;
padding: 0 1.1rem;
--glass-x: 30%; --glass-y: 20%;
background:
radial-gradient(circle at var(--glass-x, 30%) var(--glass-y, 20%), rgba(255,255,255,0.65), transparent 34%),
linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.32)) !important;
backdrop-filter: blur(30px) saturate(170%) !important;
-webkit-backdrop-filter: blur(30px) saturate(170%) !important;
box-shadow:
0 18px 44px rgba(93,48,36,0.10), 0 3px 12px rgba(93,48,36,0.06),
inset 0 1px 0 rgba(255,255,255,0.92), inset 0 -1px 0 rgba(255,255,255,0.30) !important;
transition: height .28s cubic-bezier(.22,1,.36,1), top .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease;
}
:root[data-theme="dark"] .site-nav {
background:
radial-gradient(circle at var(--glass-x, 30%) var(--glass-y, 20%), rgba(255,255,255,0.11), transparent 34%),
linear-gradient(135deg, rgba(38,34,31,0.64), rgba(25,22,20,0.40)) !important;
border-color: rgba(255,255,255,0.12) !important;
box-shadow:
0 20px 48px rgba(0,0,0,0.34), 0 3px 14px rgba(0,0,0,0.22),
inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(255,255,255,0.05) !important;
}
.site-nav::after {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.50), inset -1px -1px 0 rgba(255,255,255,0.10);
}
:root[data-theme="dark"] .site-nav::after {
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.10), inset -1px -1px 0 rgba(255,255,255,0.03);
}
.site-nav.scrolled {
top: .45rem;
height: 48px;
background:
radial-gradient(circle at var(--glass-x, 30%) var(--glass-y, 20%), rgba(255,255,255,0.74), transparent 32%),
linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.44)) !important;
box-shadow:
0 14px 34px rgba(93,48,36,0.13), 0 2px 9px rgba(93,48,36,0.08),
inset 0 1px 0 rgba(255,255,255,0.94), inset 0 -1px 0 rgba(255,255,255,0.34) !important;
}
:root[data-theme="dark"] .site-nav.scrolled {
background:
radial-gradient(circle at var(--glass-x, 30%) var(--glass-y, 20%), rgba(255,255,255,0.10), transparent 32%),
linear-gradient(135deg, rgba(38,34,31,0.72), rgba(25,22,20,0.48)) !important;
box-shadow:
0 16px 38px rgba(0,0,0,0.40), 0 2px 10px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.13), inset 0 -1px 0 rgba(255,255,255,0.04) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-nav { background: color-mix(in srgb, var(--card) 94%, transparent) !important; }
}
/* active：红调糖玻璃胶囊——纯 CSS 首屏即生效，无 JS 依赖不闪旧样式 */
.site-nav .links .nav-link.active {
color: var(--accent); font-weight: 600;
background:
linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.40) 42%, rgba(232,84,61,0.16)),
linear-gradient(135deg, rgba(232,84,61,0.10), rgba(232,84,61,0.04));
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
box-shadow:
inset 0 0 0 1px rgba(232,84,61,0.30),
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -1px 2px rgba(232,84,61,0.12),
0 3px 14px rgba(232,84,61,0.22);
}
:root[data-theme="dark"] .site-nav .links .nav-link.active {
background: linear-gradient(135deg, rgba(240,112,96,0.24), rgba(240,112,96,0.10));
box-shadow:
inset 0 0 0 1px rgba(240,112,96,0.30),
inset 0 1px 0 rgba(255,255,255,0.12),
0 2px 10px rgba(0,0,0,0.28);
}
/* 真正的活动滑块由共享脚本定位；脚本不可用时保留上面的 active 兜底。 */
.site-nav .links { position: relative; }
.site-nav .links .nav-link,
.site-nav .links .nav-tools > * { position: relative; z-index: 1; }
.nav-active-slider {
position: absolute;
left: 0; top: 0;
height: 34px;
border-radius: 999px;
pointer-events: none;
z-index: 0;
background:
linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.40) 42%, rgba(232,84,61,0.16)),
linear-gradient(135deg, rgba(232,84,61,0.10), rgba(232,84,61,0.04));
box-shadow:
inset 0 0 0 1px rgba(232,84,61,0.30),
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 -1px 2px rgba(232,84,61,0.12),
0 3px 14px rgba(232,84,61,0.22);
transition: width .30s cubic-bezier(.22,1,.36,1), transform .30s cubic-bezier(.22,1,.36,1);
view-transition-name: lychee-nav-active;
}
:root[data-theme="dark"] .nav-active-slider {
background: linear-gradient(135deg, rgba(240,112,96,0.24), rgba(240,112,96,0.10));
box-shadow:
inset 0 0 0 1px rgba(240,112,96,0.30),
inset 0 1px 0 rgba(255,255,255,0.12),
0 2px 10px rgba(0,0,0,0.28);
}
.site-nav.nav-slider-ready .links .nav-link.active {
background: transparent !important;
box-shadow: none !important;
border-radius: 999px;
}
.site-nav .links .nav-link { border-radius: 999px; }
:root[data-theme="dark"] .site-nav .links .nav-link:not(.active) {
color: color-mix(in srgb, var(--text) 74%, transparent);
}
.site-nav .links .nav-link:hover { background: rgba(232,84,61,0.10); color: var(--accent); }
.site-nav .links .nav-link .nav-ico { margin-right: 0.28rem; }
/* 低配降级：玻璃关掉，胶囊形状与滑块保留 */
.no-glass .site-nav {
background: var(--card) !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
border-color: var(--border) !important;
box-shadow: var(--shadow) !important;
}
.no-glass .site-nav::after { display: none; }
.no-glass .nav-active-slider {
background: var(--accent-light);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}
}
::view-transition-group(lychee-nav-active) {
animation-duration: .32s;
animation-timing-function: cubic-bezier(.22,1,.36,1);
}
@media (min-width: 901px) and (max-width: 1080px) {
.site-nav { width: calc(100% - 1rem); padding-inline: .7rem; }
.site-nav .nav-settings-label { display: none; }
.site-nav .nav-settings-btn { width: 32px; padding: 0; justify-content: center; }
.site-nav .links .nav-link { padding-inline: .5rem; }
}
@media (min-width: 769px) and (max-width: 900px) {
.site-nav { width: calc(100% - .75rem); padding-inline: .55rem; }
.site-nav .nav-settings-label,
.site-nav .links .nav-ico { display: none; }
.site-nav .nav-settings-btn { width: 32px; padding: 0; justify-content: center; }
.site-nav .brand { font-size: 0; gap: 0; }
.site-nav .brand img { width: 26px; height: 26px; }
.site-nav .links { gap: 0; }
.site-nav .links .nav-link { padding-inline: .44rem; font-size: .8rem; }
}
@media (max-width: 768px) {
/* 移动端保持原样：不显示导航图标 */
#navLinks .nav-ico { display: none; }
.site-nav .nav-tools {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .4rem;
width: 100%;
margin-top: .35rem;
padding-top: .55rem;
border-top: 1px solid var(--border);
}
.site-nav .nav-tools > .nav-mobile-settings,
.site-nav .nav-tools > .theme-toggle,
.site-nav .nav-tools > .lang-switch {
width: 100% !important;
min-width: 0;
height: 40px;
margin: 0 !important;
padding: 0 .35rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .3rem;
border: 1px solid var(--border2);
border-radius: 10px;
background: color-mix(in srgb, var(--card, var(--surface)) 88%, transparent);
color: var(--text2);
font-size: .74rem;
line-height: 1;
opacity: 1;
transform: none;
}
:root[data-a11y="on"] .site-nav .nav-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-a11y="on"] .site-nav .nav-tools > .nav-mobile-settings { display: none; }
.nav-active-slider { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.nav-active-slider { transition: none !important; }
::view-transition-group(lychee-nav-active) { animation: none; }
}