/* ============================================================ OctoLab 全站统一导航 + 页面氛围层(子页面共用;首页样式内联,保持两边一致) 用法(skills.html 与 skills/* 详情页): 1. 引入本文件 + site-chrome.js(defer) 2. 起始处放统一导航 DOM(grid-lines + nav#nav + mobile-menu) ⚠️ 改动本文件后,须递增所有引用页的 ?v=N(CF 边缘缓存 24h) ============================================================ */ /* ---------- 页面氛围层(与首页一致:径向辉光 + 颗粒 + 蓝图网格) ---------- */ body::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(900px 600px at 78% -8%, rgba(168,191,212,.18), transparent 60%), radial-gradient(800px 700px at 8% 12%, rgba(27,42,61,.45), transparent 55%), radial-gradient(700px 700px at 50% 115%, rgba(242,234,217,.08), transparent 60%), linear-gradient(180deg,var(--bg),var(--bg2)); } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .grid-lines{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%);} /* ---------- 导航(与 index.html 内联版逐条一致) ---------- */ nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:.4s; border-bottom:1px solid transparent} nav.scrolled{background:rgba(13,27,42,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} nav .wrap{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:72px} .brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.02em} .brand .mark{width:30px;height:30px;border-radius:50%;display:block} .brand .brand-sub{font-weight:600;font-size:.82rem;color:var(--muted);margin-left:2px} .navlinks{display:flex;gap:32px;align-items:center} .navlinks a{font-size:.9rem;color:var(--muted);transition:.25s;position:relative} .navlinks a:hover{color:var(--text)} .navlinks a.active,.navlinks a[aria-current]{color:var(--text)} .lang-toggle{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);background:transparent;border:1px solid var(--line-bright);border-radius:100px;padding:5px 12px;cursor:pointer;transition:.25s;line-height:1} @media(hover:hover){.lang-toggle:hover{color:var(--glow);border-color:var(--glow)}} .mm-lang{align-self:flex-start;margin:12px 28px 8px;min-height:44px;padding:0 22px;display:inline-flex;align-items:center;font-size:.78rem} .navlinks a.cta{padding:9px 18px;border:1px solid var(--line-bright);border-radius:100px;color:var(--text); background:linear-gradient(180deg,rgba(168,191,212,.14),transparent)} .navlinks a.cta:hover{border-color:var(--accent);box-shadow:0 0 24px rgba(168,191,212,.35)} .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;border:1px solid var(--line-bright); border-radius:11px;background:rgba(255,255,255,.02);cursor:pointer;padding:0 11px} .hamburger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:.3s} .hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.is-open span:nth-child(2){opacity:0} .hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{position:fixed;left:0;right:0;top:72px;z-index:48;display:flex;flex-direction:column; background:rgba(8,11,20,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-bright); transform:translateY(-130%);transition:transform .4s cubic-bezier(.2,.7,.3,1);max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto} .mobile-menu.open{transform:translateY(0)} .mobile-menu a{padding:17px 28px;color:var(--text);font-size:1.05rem;border-bottom:1px solid var(--line);transition:.2s} .mobile-menu a:active,.mobile-menu a:hover{background:rgba(168,191,212,.1);color:var(--glow)} .mobile-menu a.mm-cta{color:var(--glow);font-weight:600} .mobile-menu a.active,.mobile-menu a[aria-current]{color:var(--glow)} /* 8 个导航项在 900px 以下放不下(会换行挤压),汉堡断点取 900,与 index.html 内联版保持一致; 语言药丸保留在顶栏(海外访客第一眼要能切语言) */ @media(max-width:900px){.navlinks{display:flex;margin-left:auto;margin-right:14px}.navlinks a{display:none}.hamburger{display:flex} .navlinks .lang-toggle{min-height:42px;padding:0 16px;display:inline-flex;align-items:center}} @media(max-width:374px){.brand .brand-sub{display:none}} /* 顶栏三件套(品牌+药丸+汉堡)在极窄屏挤压,收起中文副标 */ /* 兜底:任何语言任何宽度,导航件不允许内部折行(防副标竖排/CTA 多行) */ .brand,.navlinks a,.lang-toggle{white-space:nowrap} /* EN 导航自然宽 ≈1130px(links 875.6 + brand 198.6 + padding 56),加经典滚动条 17px: 901–1150 英文态收进汉堡,但顶栏保留 CTA + 语言药丸;中文态(自然宽 904.1)零变化 */ @media(min-width:901px) and (max-width:1150px){ html[lang="en"] .navlinks{margin-left:auto;margin-right:14px} html[lang="en"] .navlinks a:not(.cta){display:none} html[lang="en"] .navlinks .lang-toggle{min-height:42px;padding:0 16px;display:inline-flex;align-items:center} html[lang="en"] .hamburger{display:flex} html[lang="en"] .mobile-menu{display:flex} } /* :not(.open):开着菜单切语言/拉宽窗口时菜单不被吞掉,可正常点击关闭并解锁滚动 */ @media(min-width:901px){.mobile-menu:not(.open){display:none}} /* ---------- 排版与 A11Y(与 index.html 内联版一致) ---------- */ h1,h2,h3{text-wrap:balance} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} :where(a,button,[tabindex],.card,.btn-get,summary):focus-visible{ outline:2px solid var(--glow); outline-offset:3px; border-radius:10px; } :focus:not(:focus-visible){outline:none}