/* ============================================================ Enhanced Navigation — Peter·Dobby Server Loaded LAST in so it upgrades each page's inline nav. Self-contained, theme-aware (dark-first + light fallback). ============================================================ */ :root{ --nav-accent: #2f8bff; --nav-accent2: #a779ff; --nav-fg: rgba(235,240,248,.92); --nav-fg-dim: rgba(235,240,248,.55); --nav-glass: rgba(10,14,22,.92); --nav-glass-2: rgba(255,255,255,.06); --nav-line: rgba(255,255,255,.10); --nav-ease: cubic-bezier(.22,.61,.36,1); } /* ---------- NAV SHELL ---------- */ .nav{ position: sticky; top: 0; z-index: 1000; background: var(--nav-glass); border-bottom: 1px solid var(--nav-line); box-shadow: 0 12px 34px -20px rgba(0,0,0,.85); isolation: isolate; } /* aurora glow behind the bar */ .nav::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background: radial-gradient(640px 210px at 16% -50%, rgba(47,139,255,.22), transparent 60%), radial-gradient(540px 210px at 88% -60%, rgba(167,121,255,.17), transparent 60%); opacity:.75; } /* living accent line */ .nav::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background: linear-gradient(90deg, transparent, var(--nav-accent), var(--nav-accent2), transparent); opacity:.9; pointer-events:none; } .nav-inner, .nav-in{ max-width: var(--max, 1180px); margin: 0 auto; padding: 10px 10px; display:flex; align-items:center; gap:10px; position:relative; flex-wrap:nowrap; /* 左(返回+品牌) · 中(链接, flex:1 居中) · 右(操作) 三段式，不再用 space-between 硬均分 */ /* 不裁切：pill 自身已 overflow:hidden 裁住 shine；保留完整纵向空间让主题下拉菜单完整展开 */ overflow:visible; } /* ---------- BRAND ---------- */ .nav .brand{ display:flex; align-items:center; gap:10px; padding:7px 14px 7px 9px; border-radius:999px; border:1px solid var(--nav-line); background: var(--nav-glass-2); box-shadow: 0 8px 24px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07); min-width:0; flex-shrink:0; position:relative; overflow:hidden; text-decoration:none; color:inherit; transition: transform .3s var(--nav-ease), border-color .3s var(--nav-ease), box-shadow .3s var(--nav-ease); } .nav .brand:hover{ transform: translateY(-1px); border-color: rgba(47,139,255,.45); box-shadow: 0 12px 28px -14px rgba(47,139,255,.7), inset 0 1px 0 rgba(255,255,255,.1); } .nav .logo, .nav .apple{ width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center; border-radius:50%; font-size:15px; line-height:1; color:#fff; background: conic-gradient(from 200deg, var(--nav-accent), var(--nav-accent2), var(--nav-accent)); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 6px 16px -6px rgba(47,139,255,.6); } .nav .brand-title{ display:flex; flex-direction:column; line-height:1.12; min-width:0; } .nav .brand b{ font-size:14px; letter-spacing:.2px; font-weight:800; background: linear-gradient(120deg, #ffffff, #cfe0ff 58%, #d9c6ff); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .nav .brand small{ font-size:11.5px; color: var(--nav-fg-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---------- BACK ---------- */ .nav .nav-back{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; color: var(--nav-fg-dim); font-size:13px; white-space:nowrap; flex-shrink:0; border:1px solid transparent; text-decoration:none; transition: background .25s var(--nav-ease), transform .25s var(--nav-ease), color .25s var(--nav-ease), border-color .25s var(--nav-ease); } .nav .nav-back:hover{ background: var(--nav-glass-2); color: var(--nav-fg); border-color: var(--nav-line); transform: translateY(-1px); } /* ---------- LINKS ---------- */ /* 三段式：品牌(最左) · 链接(中段, 居中占满) · 操作(最右)。 默认在 1180 容器内 8 个链接可完整放下；更窄时优先收缩内边距/字距， 只在极端窄屏(≤720)才允许横向滚动，避免末项「设备资料库」被裁切看不见。 */ .nav .nav-links{ display:flex; gap:4px; flex-wrap:wrap; /* 空间不足时自动换行，绝不压成窄缝裁掉末项 */ justify-content:safe center; /* 溢出时自动回退左对齐，避免首项(内网穿透)左侧被裁 */ overflow:visible; flex:1 1 auto; min-width:0; /* 占据中段并自动居中，把品牌推向最左、操作推向最右 */ padding:2px 2px; /* 给首/末项留出焦点/描边呼吸位，不贴边被裁 */ scrollbar-width:none; -webkit-overflow-scrolling:touch; } .nav .nav-links::-webkit-scrollbar{ display:none; } .nav .nav-links a{ padding:7px 11px; border-radius:11px; color: var(--nav-fg); font-size:13.5px; font-weight:600; letter-spacing:.2px; white-space:nowrap; position:relative; text-decoration:none; flex-shrink:0; transition: background .25s var(--nav-ease), transform .25s var(--nav-ease), color .25s var(--nav-ease); } /* 笔记本/平板：导航链接整行换行到第二行、占满宽度居中， 保证 8 个链接(含末项「设备资料库」)在任何桌面宽度下都完整可见、不被裁切 */ @media (max-width: 1100px){ .nav-inner, .nav-in{ flex-wrap:wrap; row-gap:8px; } .nav .nav-links{ flex:1 1 100%; order:5; justify-content:safe center; overflow-x:auto; overflow-y:hidden; } .nav .nav-links a{ padding:7px 10px; font-size:13px; letter-spacing:0; } .nav .brand small{ display:none; } /* 收起副标题腾出首行空间 */ .nav .brand{ padding:7px 12px 7px 9px; } } @media (max-width: 920px){ .nav .nav-links a{ padding:6px 9px; font-size:12.5px; } .nav .brand b{ font-size:13px; } } .nav .nav-links a::after{ /* sliding underline */ content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--nav-accent), var(--nav-accent2)); transform: scaleX(0); transform-origin:left; opacity:0; transition: transform .3s var(--nav-ease), opacity .3s var(--nav-ease); } .nav .nav-links a:hover{ background: var(--nav-glass-2); transform: translateY(-1px); color:#fff; } .nav .nav-links a:hover::after{ transform: scaleX(1); opacity:.9; } .nav .nav-links a.active{ color:#fff; background: linear-gradient(180deg, rgba(47,139,255,.24), rgba(167,121,255,.14)); box-shadow: inset 0 0 0 1px rgba(47,139,255,.38), 0 8px 22px -10px rgba(47,139,255,.7); } .nav .nav-links a.active::after{ transform: scaleX(1); opacity:1; } /* ---------- CLICK-TO-OPEN CATEGORY MENUS ---------- */ .nav .nav-category{position:relative;flex:0 0 auto} .nav .nav-category-button{display:flex;align-items:center;gap:7px;padding:7px 10px;border:0;border-radius:11px;background:transparent;color:var(--nav-fg);font:inherit;font-size:13px;font-weight:650;white-space:nowrap;cursor:pointer;transition:background .22s var(--nav-ease),transform .22s var(--nav-ease),color .22s var(--nav-ease)} .nav .nav-category-button>i{font-style:normal;font-size:11px;opacity:.5;transition:transform .22s ease}.nav .nav-category-icon{font-size:12px;color:#79c3ff} .nav .nav-category-button:hover,.nav .nav-category.open .nav-category-button{color:#fff;background:var(--nav-glass-2);transform:translateY(-1px)} .nav .nav-category.has-current .nav-category-button{color:#fff;background:linear-gradient(180deg,rgba(47,139,255,.24),rgba(167,121,255,.14));box-shadow:inset 0 0 0 1px rgba(47,139,255,.34)} .nav .nav-category.open .nav-category-button>i{transform:rotate(180deg)} .nav.lg-surface{overflow:visible!important} .nav .nav-category-menu{position:fixed;inset:auto;margin:0;z-index:2147483600;width:230px;padding:7px;border:1px solid rgba(255,255,255,.22);border-radius:19px;color:var(--nav-fg);background:linear-gradient(145deg,rgba(23,35,59,.88),rgba(7,14,29,.92));-webkit-backdrop-filter:blur(26px) saturate(180%) brightness(1.04);backdrop-filter:blur(26px) saturate(180%) brightness(1.04);box-shadow:0 28px 80px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.20),inset 0 -1px rgba(90,154,255,.10);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.97);transform-origin:50% 0;transition:opacity .18s linear,transform .18s linear,visibility .18s;overflow:hidden} .nav .nav-category-menu::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(220px circle at 18% 0,rgba(255,255,255,.30),transparent 48%),radial-gradient(180px circle at 94% 100%,rgba(75,165,255,.20),transparent 58%),linear-gradient(135deg,rgba(255,255,255,.10),transparent 36%)} .nav .nav-category-menu>*{position:relative;z-index:1} .nav .nav-category.open .nav-category-menu,.nav .nav-category-menu:popover-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);animation:nav-liquid-unfold 280ms cubic-bezier(.18,.84,.2,1) both} .nav .nav-category-menu:popover-open::before{animation:nav-liquid-shine 520ms cubic-bezier(.2,.75,.2,1) both} @keyframes nav-liquid-unfold{0%{opacity:0;transform:translateY(-12px) scale(.90) rotateX(-7deg)}62%{opacity:1;transform:translateY(2px) scale(1.015) rotateX(0)}100%{opacity:1;transform:translateY(0) scale(1) rotateX(0)}} @keyframes nav-liquid-shine{0%{opacity:.15;transform:translate3d(-16px,-8px,0)}55%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0)}} .nav .nav-category-menu a{display:grid;grid-template-columns:29px 1fr 12px;align-items:center;gap:9px;width:100%;padding:10px 11px;border-radius:11px;color:var(--nav-fg);font-size:13px;text-align:left} .nav .nav-category-menu a::after{display:none}.nav .nav-category-menu a>span{font-size:18px;line-height:1}.nav .nav-category-menu a>b{font-weight:650}.nav .nav-category-menu a>i{font-style:normal;opacity:.35}.nav .nav-category-menu a:hover{background:rgba(255,255,255,.08);transform:none}.nav .nav-category-menu a.active{background:linear-gradient(135deg,rgba(47,139,255,.24),rgba(167,121,255,.16));box-shadow:inset 0 0 0 1px rgba(73,154,255,.26)} html.lg-ready .nav .nav-category-menu{border-color:rgba(201,230,255,.34);background:linear-gradient(145deg,rgba(36,72,119,.48),rgba(7,20,42,.58));-webkit-backdrop-filter:blur(30px) saturate(205%) brightness(1.08);backdrop-filter:blur(30px) saturate(205%) brightness(1.08);box-shadow:0 30px 90px rgba(0,0,0,.50),0 0 0 1px rgba(77,163,255,.10),inset 1px 1px rgba(255,255,255,.25),inset -1px -1px rgba(59,137,255,.12)} html[data-theme="light"] .nav .nav-category-menu{color:#102039;border-color:rgba(255,255,255,.82);background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(226,239,255,.72));box-shadow:0 24px 70px rgba(32,60,95,.22),inset 1px 1px #fff}html[data-theme="light"] .nav .nav-category-button:hover{color:#102039;background:rgba(15,23,42,.06)}html[data-theme="light"] .nav .nav-category.has-current .nav-category-button{color:#102039} @media(max-width:760px){ .nav .nav-category{width:100%}.nav .nav-category-button{width:100%;justify-content:flex-start;padding:12px 14px;font-size:15px}.nav .nav-category-button>i{margin-left:auto} .nav .nav-category-menu{position:static;width:100%;margin:0;padding:4px 4px 4px 12px;border:0;border-radius:12px;background:rgba(0,0,0,.14);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:none;display:none;overflow:visible} .nav .nav-category.open .nav-category-menu{display:block;transform:none}.nav .nav-category-menu a{display:grid!important;padding:10px 11px;font-size:14px} html[data-theme="light"] .nav .nav-category-menu{background:rgba(15,23,42,.045);box-shadow:none} } @media(prefers-reduced-motion:reduce){.nav .nav-category-menu:popover-open,.nav .nav-category-menu:popover-open::before{animation:none!important}} /* ---------- ACTIONS / PILLS / BUTTONS ---------- */ .nav .nav-actions{ display:flex; gap:8px; align-items:center; flex-shrink:0; } .nav .pill, .nav .button, .nav .icon-btn{ position:relative; overflow:hidden; white-space:nowrap; border:1px solid var(--nav-line); background: var(--nav-glass-2); color: var(--nav-fg); padding:8px 13px; border-radius:999px; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none; transition: transform .25s var(--nav-ease), background .25s var(--nav-ease), border-color .25s var(--nav-ease), box-shadow .25s var(--nav-ease); } .nav .pill::before, .nav .button::before, .nav .icon-btn::before{ /* shine sweep */ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .6s var(--nav-ease); pointer-events:none; } .nav .pill:hover::before, .nav .button:hover::before, .nav .icon-btn:hover::before{ left:150%; } .nav .pill:hover, .nav .button:hover, .nav .icon-btn:hover{ transform: translateY(-2px); border-color: rgba(47,139,255,.5); box-shadow: 0 12px 24px -12px rgba(47,139,255,.75); } .nav .pill:active, .nav .button:active, .nav .icon-btn:active{ transform: translateY(0) scale(.97); } .nav .icon-btn{ padding:9px; width:38px; height:38px; justify-content:center; font-size:16px; } .nav .pill.active, .nav .button.active{ color:#fff; border-color: transparent; background: linear-gradient(135deg, var(--nav-accent), var(--nav-accent2)); box-shadow: 0 12px 26px -10px rgba(47,139,255,.6); } .nav .pill.primary, .nav .button.primary{ color:#fff; border-color: transparent; background: linear-gradient(135deg, var(--nav-accent), var(--nav-accent2)); box-shadow: 0 12px 26px -10px rgba(47,139,255,.6); } /* ---------- LIGHT THEME ---------- */ html[data-theme="light"] .nav{ --nav-fg: rgba(20,28,44,.9); --nav-fg-dim: rgba(20,28,44,.55); --nav-glass: rgba(255,255,255,.94); --nav-glass-2: rgba(255,255,255,.55); --nav-line: rgba(15,23,42,.10); background: var(--nav-glass); box-shadow: 0 12px 30px -22px rgba(15,23,42,.5); } html[data-theme="light"] .nav .brand{ box-shadow: 0 8px 24px -16px rgba(15,23,42,.35), inset 0 1px 0 rgba(255,255,255,.7); } html[data-theme="light"] .nav .brand b{ background: linear-gradient(120deg, #0b1f4d, #2f4bff 58%, #7a3bff); -webkit-background-clip:text; background-clip:text; color:transparent; } html[data-theme="light"] .nav .nav-links a{ color: var(--nav-fg); } html[data-theme="light"] .nav .nav-links a:hover{ background: rgba(15,23,42,.06); color:#0b1733; } html[data-theme="light"] .nav .nav-links a.active{ background: linear-gradient(180deg, rgba(47,139,255,.16), rgba(167,121,255,.12)); box-shadow: inset 0 0 0 1px rgba(47,139,255,.32), 0 8px 20px -12px rgba(47,139,255,.5); } html[data-theme="light"] .nav .nav-back:hover{ background: rgba(15,23,42,.06); color: var(--nav-fg); } html[data-theme="light"] .nav .pill, html[data-theme="light"] .nav .button, html[data-theme="light"] .nav .icon-btn{ background: rgba(255,255,255,.6); color: var(--nav-fg); } html[data-theme="light"] .nav .pill:hover, html[data-theme="light"] .nav .button:hover, html[data-theme="light"] .nav .icon-btn:hover{ background: rgba(255,255,255,.88); } /* ---------- PERFORMANCE: 去掉导航内嵌套 backdrop-filter + 尊重减少动效 ---------- */ /* 导航外壳已做 backdrop-filter，内部 brand/pill/button 再模糊会在滚动时每帧重复重滤， 是 sticky 导航滚动卡顿的主因之一，这里移除内部模糊保留外观。 */ .nav .brand, .nav .pill, .nav .button, .nav .icon-btn{ backdrop-filter: none; -webkit-backdrop-filter: none; } @media (prefers-reduced-motion: reduce){ .nav, .nav::after, .nav .logo, .nav .apple, .nav .brand, .nav .nav-links a, .nav .pill, .nav .button, .nav .icon-btn{ animation: none !important; transition: none !important; } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 720px){ .nav .nav-back{ display:none; } .nav .brand{ min-width:0; padding:6px 11px 6px 8px; gap:8px; } .nav .brand b{ font-size:13px; } .nav .brand small{ font-size:11px; } .nav .nav-links{ flex-wrap:wrap; justify-content:center; overflow:visible; } /* 手机端换行居中，无需右滑即可看全 */ .nav .nav-links a{ padding:6px 8px; font-size:12.5px; } .nav .nav-actions{ gap:7px; } .nav .pill, .nav .button{ padding:7px 10px; font-size:13px; } } /* 主题菜单内的液态玻璃动画开关 */ .theme-motion-toggle{display:flex;align-items:center;justify-content:space-between;gap:18px;width:calc(100% - 12px);margin:6px;padding:10px 8px 6px;border:0;border-top:1px solid rgba(255,255,255,.12);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer} .theme-motion-toggle span{display:block;min-width:0}.theme-motion-toggle b{display:block;font-size:13px;font-weight:600}.theme-motion-toggle small{display:block;margin-top:2px;font-size:10px;opacity:.58;white-space:nowrap} .theme-motion-toggle i{position:relative;width:36px;height:21px;flex:0 0 36px;border-radius:999px;background:rgba(130,142,164,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .2s ease} .theme-motion-toggle i::after{content:"";position:absolute;left:2px;top:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.32);transition:transform .2s ease} .theme-motion-toggle.is-on i{background:#2997ff}.theme-motion-toggle.is-on i::after{transform:translateX(15px)} .theme-motion-toggle:focus-visible{outline:2px solid rgba(74,160,255,.9);outline-offset:-2px;border-radius:10px}