/* ============================================================ * buy-shared.css —— 官网头部/页脚共享样式（自动生成，勿手改） * * 来源：www/assets/css/site.css（提取 Nav / Footer / Mobile menu / 主题变量） * 生成：node tools/sync-shared-css.cjs（官网改版后重跑一次） * ★ 必须在 buy.css 之后加载：buy.css 中的旧版导航/页脚规则靠本文件覆盖 * ============================================================ */ /* ---------- 主题变量（与官网一致，含 buy 页依赖的 --menu-bg/--tag-bg 等） ---------- */ /* ===== Light (Paper) ===== */ [data-theme="light"]{ --bg:#ffffff; --surface:#f7f8fa; --card:#ffffff; --border:#e6e8ec; --text:#0f172a; --sub:#475569; --muted:#94a3b8; --accent:#10b981; --accent2:#059669; --glow:rgba(16,185,129,.18); --amber:#d97706; --radius:16px; --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06); --nav-bg:rgba(255,255,255,.82); --nav-border:var(--border); --card-grad:linear-gradient(180deg,#fff,var(--surface)); --card-hover-shadow:0 18px 40px rgba(15,23,42,.1); --card-hover-border:rgba(16,185,129,.4); --dl-bg:linear-gradient(135deg,#f0fdf4,#ecfeff); --dl-border:rgba(16,185,129,.25); --shot-bg:#fff; --shot-border:var(--border); --shot-shadow:0 24px 60px rgba(15,23,42,.12); --cap-bg:rgba(255,255,255,.9); --dot-color:#cbd5e1; --btn-nav-bg:rgba(255,255,255,.92); --btn-nav-color:var(--sub); --code-bg:#0d1117; --code-text:#e6edf3; --code-border:var(--border); --top-bar:linear-gradient(90deg,#10b981,#34d399,#10b981); --foot-border:var(--border); --tag-bg:rgba(16,185,129,.08); --tag-border:rgba(16,185,129,.28); /* 悬浮菜单（顶栏「更多」下拉）：必须完全不透明 + 明确的描边， 否则叠在首页截图/卡片这类杂乱背景上时文字读不清 */ --menu-bg:#ffffff; --menu-border:rgba(15,23,42,.14); } /* ---------- 桌面导航 ---------- */ /* ===== Nav ===== */ nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between; padding:13px 24px;backdrop-filter:blur(16px);background:var(--nav-bg);border-bottom:1px solid var(--nav-border); transition:background .3s,border-color .3s} nav .wrap2{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;width:100%} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;text-decoration:none;color:inherit} .logo-img{height:30px;width:auto;border-radius:8px;object-fit:contain} .links{display:flex;gap:28px} .links a{position:relative;color:var(--sub);text-decoration:none;font-size:14px;font-weight:600;transition:color .2s} .links a:hover{color:var(--text)} /* 当前页选中态：主题色文字 + 底部渐变指示条 */ .links a.active{color:var(--accent);font-weight:700} .links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-10px;height:2.5px;border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent2))} .nav-right{display:flex;align-items:center;gap:12px} .theme-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--card); color:var(--sub);cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s,background .3s;flex-shrink:0;position:relative;overflow:hidden} .theme-btn:hover{color:var(--accent);border-color:var(--card-hover-border)} .theme-btn .ic-sun,.theme-btn .ic-moon{position:absolute;grid-area:1/1} .is-dark .theme-btn .ic-sun{opacity:0} .is-dark .theme-btn .ic-moon{opacity:1} .theme-btn .ic-moon{opacity:0} .lang-btn{height:38px;min-width:38px;padding:0 12px;border-radius:11px;border:1px solid var(--border);background:var(--card); color:var(--sub);font-size:13px;font-weight:600;cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s;flex-shrink:0} .lang-btn:hover{color:var(--accent);border-color:var(--card-hover-border)} .search-btn{height:38px;min-width:38px;padding:0 12px;border-radius:11px;border:1px solid var(--border);background:var(--card); color:var(--sub);cursor:pointer;display:grid;grid-auto-flow:column;align-items:center;gap:8px;transition:color .2s,border-color .2s;flex-shrink:0} .search-btn:hover{color:var(--accent);border-color:var(--card-hover-border)} .search-btn .search-keys{display:flex;gap:3px} .search-btn kbd{font-family:inherit;font-size:10px;line-height:1;color:var(--muted);background:var(--surface); border:1px solid var(--border);border-radius:5px;padding:3px 4px;min-width:15px;text-align:center} .search-btn:hover kbd{color:var(--accent);border-color:var(--card-hover-border)} .mobile-search-btn{margin-top:6px;width:100%;font-size:15px;padding:12px} /* ---------- 页脚 ---------- */ /* ===== Footer ===== */ footer{border-top:1px solid var(--foot-border);padding:40px 0 32px;color:var(--muted);font-size:13px} footer .f-grid{max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.1fr;gap:32px} footer .f-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--text);margin-bottom:12px} footer .f-logo .logo-img{height:26px} footer .foot-mail{margin-top:10px;font-size:13px;color:var(--sub)} footer .foot-mail a{color:var(--accent);text-decoration:none} footer .foot-mail a:hover{text-decoration:underline} footer .f-col h4{font-size:14px;color:var(--text);margin-bottom:12px;font-weight:600} /* 微信交流群列：二维码白底卡片，避免暗色主题下透明底影响扫码 */ footer .f-col.f-wx h4{margin-bottom:10px} /* 二维码：图片铺满卡片（width:100% 撑满内框），卡片本身限宽，避免在列里显得过大 */ footer .f-wx-img{display:block;width:100%;max-width:140px;height:auto;background:#fff;padding:6px;border-radius:12px; border:1px solid var(--foot-border);box-shadow:var(--shadow)} footer .f-wx-tip{margin-top:10px;font-size:12px;line-height:1.6;color:var(--muted)} footer .f-col a{display:block;color:var(--muted);text-decoration:none;padding:5px 0;font-size:13px;transition:color .2s} footer .f-col a:hover{color:var(--accent)} footer .f-bottom{text-align:center;margin-top:32px;padding-top:20px;border-top:1px solid var(--foot-border);color:var(--muted)} footer .f-bottom a{color:var(--muted);text-decoration:none} footer .f-bottom a:hover{color:var(--accent)} /* ---------- 移动端导航基础态 ---------- */ /* ===== Mobile menu ===== */ .hamburger{display:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--card); color:var(--text);font-size:18px;cursor:pointer;align-items:center;justify-content:center} /* 移动端专属元素（桌面隐藏）：顶栏右侧 订阅+更多 / 更多下拉菜单 / 底部固定导航栏（参照旧官网形态） */ .nav-m-actions{display:none;align-items:center;gap:8px} .nav-m-buy{display:inline-flex;align-items:center;background:var(--accent);color:#fff;font-size:12px;font-weight:700; padding:7px 12px;border-radius:8px;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px var(--glow);transition:transform .15s} .nav-m-buy:active{transform:scale(.96)} .nav-more-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--card); color:var(--sub);cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s;flex-shrink:0} .nav-more-btn:hover,.nav-more-btn.active{color:var(--accent);border-color:var(--card-hover-border)} .nav-more-menu{display:none} .nav-bottom{display:none} .mobile-menu{display:none;flex-direction:column;gap:2px;padding:10px 16px 16px;background:var(--nav-bg); border-bottom:1px solid var(--border);backdrop-filter:blur(16px)} .mobile-menu a{color:var(--sub);text-decoration:none;font-size:15px;font-weight:600;padding:12px 6px;border-bottom:1px solid var(--border)} .mobile-menu a.active{color:var(--accent);font-weight:700;position:relative} .mobile-menu a.active::before{content:'';position:absolute;left:-16px;top:12px;bottom:12px;width:3px;border-radius:2px; background:linear-gradient(180deg,var(--accent),var(--accent2))} .mobile-menu a:last-child{border-bottom:none} .mobile-menu.show{display:flex} /* ---------- 移动端导航实现（与官网同一断点 (max-width:860px)） ---------- */ @media(max-width:860px){ .links{display:none} /* 移动端导航形态（参照旧官网）：顶栏只留 logo + 订阅 + 更多；主导航移到底部固定栏 */ nav{padding:10px 16px} .logo{gap:8px;font-size:17px} .logo-img{height:26px} .nav-right{display:none} .nav-m-actions{display:flex} /* 更多下拉菜单（顶栏右侧浮层，带淡入下滑动画） */ /* 下拉窗：完全不透明 + 明显描边 + 更重的投影。 ★ 刻意不使用 backdrop-filter，也不用任何带 alpha 的背景色 —— 浮层要保证「背景再乱也不影响文字」，半透明毛玻璃做不到这一点。 */ .nav-more-menu{display:none;position:fixed;top:56px;right:8px;z-index:1001;min-width:190px;padding:6px; background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.28)} .nav-more-menu.open{display:block;animation:moreMenuIn .18s ease-out} @keyframes moreMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.nav-more-menu.open{animation:none}} .nav-more-menu a,.nav-more-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;font-size:14px; font-family:inherit;color:var(--text);font-weight:500;text-decoration:none;background:transparent;border:none;border-radius:8px; cursor:pointer;text-align:left;transition:background .15s,color .15s} .nav-more-menu svg{width:16px;height:16px;flex-shrink:0} .nav-more-menu a:active,.nav-more-menu a:hover, .nav-more-menu button:active,.nav-more-menu button:hover{background:var(--tag-bg);color:var(--accent)} /* 底部固定导航栏：5 项平均排布，替代汉堡菜单 */ /* 底栏高度只此一处定义：.nav-bottom 的 height、body 的下内边距、 回到顶部按钮的抬高量全部从 --navbar-h 派生，避免三处各写一个 56px 改一处漏两处 */ :root{--navbar-h:56px} /* ★ top:auto 与 border-bottom:none 必须显式写： 本元素是