/* ─── topnav · 全局组件 ───────────────────────────────────── 使用：在 引入 依赖：使用方页面需自带 .btn / .btn-primary / .btn-arrow 样式 ─────────────────────────────────────────────────────────── */ .topnav { position: sticky; top: 0; z-index: 50; background: var(--surface); box-shadow: 0 4px 20px rgba(15, 27, 45, 0.06); } .topnav-inner { display: flex; align-items: center; height: 64px; gap: 24px; } .topnav nav { margin-right: auto; margin-left: 32px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.005em; } .logo-mark { width: 36px; height: 36px; display: block; border-radius: 9px; box-shadow: 0 4px 12px rgba(22, 93, 255, 0.18); overflow: hidden; } .logo-mark img { width: 100%; height: 100%; display: block; object-fit: cover; } .logo small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; letter-spacing: 0.02em; } .topnav nav { display: flex; gap: 28px; } .topnav nav a { position: relative; font-size: 14px; color: var(--fg-2); padding-block: 4px; transition: color 0.15s ease; } .topnav nav a:hover { color: var(--accent); } .topnav nav a.is-active { color: var(--accent); font-weight: 600; } .topnav nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -22px; height: 2px; background: var(--accent); border-radius: 2px; } .topnav-actions { display: flex; align-items: center; gap: 12px; } .topnav-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-2); border-radius: 10px; color: var(--fg); transition: border-color 0.15s ease, color 0.15s ease; } .topnav-burger:hover { border-color: var(--accent); color: var(--accent); } .topnav-burger svg { width: 20px; height: 20px; } .topnav-mobile { display: none; flex-direction: column; gap: 4px; position: absolute; top: 64px; left: 0; right: 0; background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); padding: 12px var(--gutter) 20px; box-shadow: var(--shadow-2); } .topnav-mobile.is-open { display: flex; } .topnav-mobile a { display: block; font-size: 15px; color: var(--fg-2); padding: 14px 4px; border-bottom: 1px solid var(--border); } .topnav-mobile a:hover { color: var(--accent); } .topnav-mobile a.is-active { color: var(--accent); font-weight: 600; background: var(--accent-soft); border-bottom-color: transparent; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; margin: 0 -8px; padding-left: 12px; padding-right: 12px; } .topnav-mobile a.is-active::after { content: '当前'; font-size: 10px; letter-spacing: 0.04em; background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 999px; font-weight: 500; flex-shrink: 0; } .topnav-mobile a.btn { border-bottom: 0; margin-top: 12px; justify-content: center; padding: 12px 22px; } @media (max-width: 880px) { .topnav nav { display: none; } .topnav nav { margin-left: 0; } .topnav-burger { display: inline-flex; } .topnav-inner { gap: 12px; } .logo small { display: none; } .topnav-actions { margin-left: auto; } .topnav-actions .btn { padding: 8px 14px; font-size: 14px; } }