/* ═══════════════════════════════════════════════════════════ 全站抬头样式 —— 和 nav.html 配套，**这是唯一一份**。 ⚠⚠ **所有选择器都必须挂在 `#nav` 上，不许用裸的 `nav {}`。** 裸元素选择器命中页面上**每一个**

。主页只有一个

，所以这条一直没出事；一共享出去就炸了：道具库的分页条外面包着

，被 `nav{position:fixed;z-index:50;left:0;right:0}` 钉到屏幕顶上， **还盖住了真正的抬头 —— 导航链接和语言按钮全点不动。** 分页条、面包屑、侧栏都常用

，别再放宽。 ⚠ 主页和道具库的 :root 变量名不完全一样（主页 --red，道具库 --primary），所以这里全部走**回退链**，两边都能用： var(--red, var(--primary, #c8102e)) 别在这里直接写 var(--red) —— 道具库上取不到就变成继承色。 ═══════════════════════════════════════════════════════════ */ #nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px 30px; transition: .3s; background: transparent; } /* 主页首屏是视频，抬头压在上面是透明的，滚动后由 JS 加 .solid。没有 hero 的子页面（道具库）直接用 .sc-static：常驻实色 + 吸顶。 */ #nav.sc-static { position: sticky; } #nav.solid, #nav.sc-static { background: rgba(241, 235, 221, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line, #ddd3c0); } #nav .brand { display: flex; align-items: center; } #nav .brand img { height: 36px; width: auto; display: block; } #nav .brand .logo-d { display: none; } #nav.solid .brand .logo-w, #nav.sc-static .brand .logo-w { display: none; } #nav.solid .brand .logo-d, #nav.sc-static .brand .logo-d { display: block; } #nav .navlinks { display: flex; gap: 28px; align-items: center; font-size: 13px; font-weight: 300; letter-spacing: .1em; text-transform: uppercase; } #nav .navlinks a { color: #fff; opacity: .85; transition: .25s; text-decoration: none; } #nav.solid .navlinks a, #nav.sc-static .navlinks a { color: var(--ink, #1c1a17); opacity: .7; } #nav .navlinks a:hover { color: var(--red-2, var(--primary, #ff3a52)); } #nav.solid .navlinks a:hover, #nav.sc-static .navlinks a:hover { color: var(--red, var(--primary, #c8102e)); } /* 当前页高亮： + data-nav="props" */ .sc-page-props #nav .navlinks a[data-nav="props"], .sc-page-locations #nav .navlinks a[data-nav="locations"] { color: var(--red, var(--primary, #c8102e)) !important; opacity: 1; } #nav .lang { display: flex; gap: 4px; } #nav .lang button { background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 12px; font-weight: 400; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-family: var(--sans, system-ui); transition: .2s; } #nav.solid .lang button, #nav.sc-static .lang button { background: transparent; border-color: var(--line, #ddd3c0); color: var(--muted, #8b8579); } #nav .lang button.on, #nav.solid .lang button.on, #nav.sc-static .lang button.on { background: var(--red, var(--primary, #c8102e)); border-color: var(--red, var(--primary, #c8102e)); color: #fff; } /* 子页面插进来的东西（道具库的选品车） */ #nav .navlinks .btn-cart { position: relative; border: 0; background: transparent; color: inherit; font-size: 13px; padding: 0; text-decoration: none; } #nav .navlinks .btn-cart .badge-count { position: absolute; top: -8px; right: -14px; background: var(--red, var(--primary, #c8102e)); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 999px; font-weight: 400; letter-spacing: 0; } @media (max-width: 880px) { #nav { padding: 12px 16px; } #nav .navlinks { gap: 14px; font-size: 11px; } #nav .navlinks .nl { display: none; } #nav .brand img { height: 26px; } }