/* ========================================================================= A7验证 统一导航栏样式（nav.css） ------------------------------------------------------------------------- 用途：配合 /partials/nav.html 使用，提供顶部导航栏（含品牌 logo、主导航链接、 「下载中心」/「登录」纯 CSS 下拉菜单、移动端汉堡按钮）的全部样式。 引入：在页面 中加入 说明：本文件自包含——下方 :root 内置了导航所需的全部设计 Token 兜底值， 即使页面未加载 tokens.css / a7p-theme.css 也能正确渲染；若同时加载， 由于取值完全一致，也不会产生冲突。 交互：下拉菜单为纯 CSS（:hover / :focus-within），无需 JS； 滚动阴影（#a7pNav 加 .scrolled）与移动端汉堡展开（#a7pBurger 切换 .open） 由 /js/a7p-common.js 负责，请在 前引入。 范围：仅包含导航相关样式，不含 hero / footer / 卡片等其它模块样式。 ========================================================================= */ :root{ --paper:#FBFAF6; --paper-2:#F4F2E9; --paper-3:#EFEDE2; --ink:#16201B; --ink-soft:#4C564F; --ink-faint:#8A938C; --line:#E3E0D4; --line-strong:#D2CEBE; --lime:#84CC16; --lime-deep:#4D7C0F; --lime-bright:#A3E635; --lemon:#FDE047; --lemon-soft:#FEF9C3; --panel:#0F1B16; --panel-2:#16271F; --panel-line:#243a2f; --ok:#16A34A; --warn:#D97706; --err:#DC2626; --info:#0E7490; --f-display:"Space Grotesk","Noto Sans SC",system-ui,sans-serif; --f-body:"Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px; --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px; --sh-1:0 1px 2px rgba(22,32,27,.06); --sh-2:0 6px 18px -6px rgba(22,32,27,.12); --sh-3:0 18px 40px -16px rgba(22,32,27,.20); --sh-lime:0 12px 28px -10px rgba(132,204,22,.45); --ease:cubic-bezier(.22,1,.36,1); --t-fast:.18s var(--ease); --t:.32s var(--ease); } /* 容器限宽 + 最小重置（作用域限定在 .a7p-nav，保证仅引入 nav.css 也能正确渲染） */ .a7p-nav .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--s5)} .a7p-nav *{box-sizing:border-box} .a7p-nav a{color:inherit;text-decoration:none} /* ---------- 顶栏 ---------- */ .a7p-nav{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.82); backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent; transition:border-color var(--t),box-shadow var(--t)} .a7p-nav.scrolled{border-color:var(--line);box-shadow:var(--sh-1)} .a7p-nav__in{display:flex;align-items:center;gap:var(--s6);height:68px} .a7p-brand{display:flex;align-items:center;gap:var(--s3);font-family:var(--f-display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;color:var(--ink)} .a7p-brand__logo{width:200px;height:60px;flex:none} .a7p-nav__links{display:flex;gap:var(--s2);margin-left:var(--s4);align-items:center} .a7p-nav__links>a{font-size:1rem;color:var(--ink-soft);padding:var(--s2) var(--s3);border-radius:999px;transition:color var(--t-fast),background var(--t-fast)} .a7p-nav__links>a:hover{color:var(--ink);background:var(--paper-3)} .a7p-nav__links>a[aria-current="page"]{color:var(--lime-deep);background:var(--lemon-soft)} .a7p-nav-drop{position:relative} .a7p-nav-drop>a{display:inline-flex;align-items:center;gap:5px;font-size:1rem;color:var(--ink-soft);padding:var(--s2) var(--s3);border-radius:999px;cursor:pointer} .a7p-nav-drop>a:hover{color:var(--ink);background:var(--paper-3)} .a7p-nav-drop .caret{width:14px;height:14px;transition:transform var(--t-fast)} .a7p-nav-drop:hover .caret,.a7p-nav-drop:focus-within .caret{transform:rotate(180deg)} .a7p-nav-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px); min-width:222px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--sh-3);padding:var(--s2);opacity:0;visibility:hidden;transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);z-index:60} .a7p-nav-drop:hover .a7p-nav-menu,.a7p-nav-drop:focus-within .a7p-nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .a7p-nav-menu a{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-sm);color:var(--ink-soft);font-size:1rem;font-weight:600;transition:background var(--t-fast),color var(--t-fast)} .a7p-nav-menu a:hover{background:var(--paper-3);color:var(--ink)} .a7p-nav-menu .d-ico{width:30px;height:30px;border-radius:9px;background:var(--lemon-soft);color:var(--lime-deep);display:flex;align-items:center;justify-content:center;flex:none} .a7p-nav-menu .d-text{display:flex;flex-direction:column;line-height:1.3} .a7p-nav-menu .d-name{font-weight:600;color:var(--ink)} .a7p-nav-menu .d-sub{font-size:.8rem;color:var(--ink-faint);font-weight:400} .a7p-nav__cta{margin-left:auto;display:flex;align-items:center} /* 汉堡按钮可视样式（自包含，独立于 a7p-theme.css）。 span 为绝对定位，故 @media 内保留 display:block 即可居中。 */ .a7p-nav__burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;position:relative} .a7p-nav__burger span,.a7p-nav__burger span::before,.a7p-nav__burger span::after{content:"";position:absolute;left:11px;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t-fast),opacity var(--t-fast)} .a7p-nav__burger span{top:20px} .a7p-nav__burger span::before{top:-6px} .a7p-nav__burger span::after{top:6px} /* 展开态：汉堡变 X */ .a7p-nav.open .a7p-nav__burger span{background:transparent} .a7p-nav.open .a7p-nav__burger span::before{transform:translateY(6px) rotate(45deg)} .a7p-nav.open .a7p-nav__burger span::after{transform:translateY(-6px) rotate(-45deg)} /* ---------- 响应式（移动端导航） ---------- */ @media (max-width:860px){ .a7p-nav__links{display:none} .a7p-nav__burger{display:block} .a7p-nav.open .a7p-nav__links{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:var(--s4) var(--s5);gap:var(--s1);box-shadow:var(--sh-2);margin-left:0} .a7p-nav.open .a7p-nav__links a{padding:var(--s3)} .a7p-nav.open .a7p-nav-drop{position:static} .a7p-nav.open .a7p-nav-menu{position:static;transform:none;border:none;box-shadow:none;background:transparent;opacity:1;visibility:visible;padding:0 0 0 var(--s4);min-width:0} .a7p-nav.open .a7p-nav-menu a{padding:var(--s3) var(--s2)} .a7p-nav-drop>a{width:100%} }