/** * 全站导航：盒子按钮 + 导航岛（减轻拥挤） * 在各页 中引入： */ .site-nav-header { --nav-primary: #47a3da; --nav-secondary: #4dbd90; } /* 顶栏单行容器 */ .site-nav-header > .container:first-of-type { padding-top: 0.5rem; padding-bottom: 0.5rem; } /* 导航岛：半透明底 + 细边框 + 轻阴影（收紧） */ .site-nav-island { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.28rem 0.4rem; padding: 0.3rem 0.45rem; max-width: 56rem; margin-left: auto; margin-right: auto; background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 250, 255, 0.92) 100%); border: 1px solid rgba(71, 163, 218, 0.14); border-radius: 0.75rem; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 3px 14px rgba(15, 23, 42, 0.05); } /* 与首行同一行时：宽度随内容，不独占整行 */ .site-nav-island.site-nav-island--row { max-width: min(56rem, 100%); width: fit-content; } /* 盒子按钮 */ .nav-box { display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.28rem 0.55rem; font-size: 0.75rem; font-weight: 600; color: #334155; line-height: 1.2; white-space: nowrap; background: #fff; border: 1px solid rgba(71, 163, 218, 0.16); border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease, background 0.2s ease; } @media (min-width: 1280px) { .nav-box { font-size: 0.8125rem; padding: 0.32rem 0.65rem; } } .nav-box:hover { color: #1e4d72; border-color: rgba(71, 163, 218, 0.38); box-shadow: 0 4px 14px rgba(71, 163, 218, 0.12); transform: translateY(-1px); } /* 当前页高亮 */ .nav-box-active { color: #14532d; background: linear-gradient(135deg, rgba(71, 163, 218, 0.14) 0%, rgba(77, 189, 144, 0.14) 100%); border-color: rgba(71, 163, 218, 0.35); box-shadow: 0 2px 10px rgba(71, 163, 218, 0.15); } .nav-box-active:hover { color: #14532d; transform: translateY(-1px); } /* 移动端抽屉里的盒子行 */ .nav-box-mobile { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; font-weight: 600; color: #334155; background: #fff; border: 1px solid rgba(71, 163, 218, 0.12); border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); transition: background 0.2s ease, border-color 0.2s ease; } .nav-box-mobile:hover { border-color: rgba(71, 163, 218, 0.28); background: rgba(71, 163, 218, 0.05); } .nav-box-mobile.nav-box-active { background: linear-gradient(135deg, rgba(71, 163, 218, 0.12) 0%, rgba(77, 189, 144, 0.1) 100%); border-color: rgba(71, 163, 218, 0.3); } .nav-icon-btn { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: rgba(71, 163, 218, 0.1); border: 1px solid rgba(71, 163, 218, 0.15); transition: background 0.2s ease; } .nav-icon-btn:hover { background: rgba(71, 163, 218, 0.18); } /* 首屏留白：单行顶栏（桌面与导航岛同排） */ .site-nav-offset { padding-top: 4.75rem; } @media (min-width: 1024px) { .site-nav-offset { padding-top: 5.25rem; } } @media (prefers-reduced-motion: reduce) { .nav-box, .nav-box:hover, .nav-box-active:hover { transform: none; } }