/* ============================================================ 首页 · 页头落到纸底上（第 46 轮） ============================================================ 页头的**结构和导航一个字没动**（Home / Capabilities / Guides / Company / FAQ / Get a quote，四个下拉面板全在），这里只解决一件事： header.css 里那套配色是给「深色照片首屏」配的 —— `.is-top` 状态下 背景透明、logo 反白、导航吃浅色令牌。放到新首页的纸底上， 导航字是浅灰压浅灰，几乎看不见（第一版渲出来就是这样）。 所以：两种状态一律落到纸底，logo 用原色，导航文字回到墨色系。 下面每条都排在 header.css 之后，同特异性下后者胜。 ============================================================ */ header.site, header.site.is-top{ background:rgba(226,226,226,.92); border-bottom:1px solid rgba(12,12,12,.13); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:blur(14px); box-shadow:none; color-scheme:light; } /* logo：`.is-top` 那条 filter:brightness(0) invert(1) 会把彩色标反成白块 */ header.site .brand .logo, header.site.is-top .brand .logo{filter:none;height:32px} /* style.css 第 539 行的全局 a{text-decoration:none} 也没被抽进来 （header.css 只收页头规则），于是浏览器默认下划线回来了 —— 下拉里 每条链接都挂着一条线。这里补上，作用域只到页头。 */ header.site a{text-decoration:none} /* 导航文字 */ nav.main a{color:#2E2E2E} nav.main a:hover{background:rgba(12,12,12,.05);color:#0C0C0C} nav.main a.on{color:#0C0C0C} nav.main a.on::after, header.site.is-top nav.main a.on::after{background:#42A646} /* 报价按钮：**照抄页面里 .btn-primary 那套**（高 46 / 圆角 10 / #42A646 / 0 10px 26px 阴影 / hover 提亮 + 上移 1px），页头里只是缩到 42 高。 原来它是 style.css 的老样式（胶囊圆角 + inset 内阴影），和纸底 新设计里的按钮不是一个东西 —— 用户 2026-10-21 点出来的。 */ nav.main a.cta{ display:inline-flex; align-items:center; height:42px; padding:0 20px; border-radius:10px; font-size:14px; font-weight:650; letter-spacing:.01em; background:#42A646; color:#fff; box-shadow:0 10px 26px rgba(66,166,70,.24); border:0; transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } nav.main a.cta:hover{ background:#4CB950; color:#fff; transform:translateY(-1px); box-shadow:0 16px 34px rgba(66,166,70,.32); } /* 下拉面板：纸面 */ .nav-panel{ background:#F2F2F2; border:1px solid rgba(12,12,12,.13); box-shadow:0 30px 60px -30px rgba(12,12,12,.45); } .nav-feat{background:rgba(12,12,12,.035);border-color:rgba(12,12,12,.13)} .nav-feat:hover{background:rgba(66,166,70,.09);border-color:rgba(42,110,48,.24)} /* 下拉左边的推荐卡：b / span 的色走 var(--ink) / var(--mute)， `.is-top` 那档把 --ink 换成了浅色（深色页头用），落到纸底上就是 白字压白卡 —— 截图里那张卡的文字是看不见的。这里钉死墨色。 另外 style.css 第 537 行有一条全局 img{height:auto}，header.css 只抽 页头的规则、没带上它，结果 的属性值生效， 4:3 的预览图被拉成 190×360 的长条。 */ .nav-feat b{color:#0C0C0C} .nav-feat span{color:#686868} .nav-feat img{height:auto} .nav-cols a:hover{background:rgba(66,166,70,.09);color:#2A6E30} .nav-cols a span{color:#686868} .nav-cols p{color:#808080} /* ≤1020px：两行页头。header.css 那一档又把 .is-top 强制回深底， 纸底上那条也得跟着压掉，否则窄屏一进来就是一条深带。 */ @media(max-width:1020px){ header.site, header.site.is-top{ background:rgba(226,226,226,.97); border-bottom-color:rgba(12,12,12,.13); } header.site .brand .logo, header.site.is-top .brand .logo{filter:none;height:28px} } /* 锚点跳转的落点：demo 那套按 --head-h:72px 算的，站上页头是 84px， 差 12px —— 点「What we do」会有一小条被页头吃掉。按 84 + 16 补齐。 */ section[id],.hero{scroll-margin-top:100px} /* ============================================================ 手机折叠菜单（≤520px，第 59 轮） ------------------------------------------------------------ 原来手机上页头是**三行**：logo / Home Capabilities Guides / Company FAQ + 单独一行的 Get a quote，约 160px，占掉一屏的 19%，还没开始看正文。 现在 ≤520 收成一个「≡ Menu」按钮：收起时页头只剩 logo 那一行（约 60px）， 点开在下面展开成竖排列表。是**往下推**而不是浮层盖住 —— 浮层要处理 z-index、滚动锁、点空白关闭，零 JS 玩不干净，推下来够用。 ⚠️ 三条硬约束，改之前先读： ① input + label 必须排在 nav.main 的**前面**（见 _work/_add_nav.py）， 展开靠 `~` 相邻兄弟选择器。挪到 nav 后面这条就永远打不开。 ② 真正的复选框要留在文档流外但**可聚焦**（clip-path 那种写法）， 不能用 display:none —— 那样键盘和读屏就完全够不到这个开关了。 ③ 断点 520 不是拍的：400–480 实测 CTA 会被挤到第三行；≤390 连 五个文字链接都排不下。520 以上维持原来的两行页头，别往上挪。 ============================================================ */ .nav-check{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%); } .nav-btn{display:none} @media(max-width:520px){ .nav-btn{ display:inline-flex;align-items:center;gap:9px;margin-left:auto; padding:9px 13px;cursor:pointer;touch-action:manipulation; border:1px solid rgba(12,12,12,.16);border-radius:9px; background:rgba(255,255,255,.55); font-family:var(--font-mono,ui-monospace,monospace); font-size:11px;font-weight:600;line-height:1; letter-spacing:.14em;text-transform:uppercase; color:#2E2E2E; -webkit-tap-highlight-color:transparent; -webkit-user-select:none;user-select:none; } .nav-btn .bars{display:flex;flex-direction:column;justify-content:center;gap:3.5px;width:13px;height:11px} .nav-btn .bars i{ display:block;height:1.5px;border-radius:1px;background:currentColor; transition:transform .22s cubic-bezier(.32,.72,0,1),opacity .16s linear; } .nav-check:checked ~ .nav-btn .bars i:nth-child(1){transform:translateY(5px) rotate(45deg)} .nav-check:checked ~ .nav-btn .bars i:nth-child(2){opacity:0} .nav-check:checked ~ .nav-btn .bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)} /* 复选框本体看不见，键盘走到它时焦点环画在按钮上 */ .nav-check:focus-visible ~ .nav-btn{outline:2px solid #2F7D35;outline-offset:3px} nav.main{display:none} .nav-check:checked ~ nav.main{ display:flex;flex-direction:column;align-items:stretch;gap:0; width:100%;margin-top:var(--s-3,16px); border-top:1px solid rgba(12,12,12,.14); } /* ⚠️ width:100% 得显式写。`.nav-grp` 平时是 shrink-to-fit，光靠父级的 align-items:stretch 撑不满 —— 第一版没写，Capabilities / Guides / Company 那三行底下的细线只到文字右边就断了，和 Home / FAQ 的两条长短不一。 */ .nav-check:checked ~ nav.main > a, .nav-check:checked ~ nav.main > .nav-grp{display:block;width:100%} .nav-check:checked ~ nav.main > a, .nav-check:checked ~ nav.main > .nav-grp > .nav-top{ /* display:block 不能省：.nav-top 平时是 inline-flex（右端带 chevron）， 不换成 block 就是 shrink-to-fit，底下的细线只到文字右边就断。 */ display:block;padding:15px 2px; border-bottom:1px solid rgba(12,12,12,.10); /* ⚠️ radius 必须清零。header.css 给 nav.main a 配了 --r-sm，那是给横排 的悬停底色用的；只剩一条下边框时，圆角会把线的两端往上翘，渲出来 像一个个浅 U 形小框，而不是行分隔线。 */ border-radius:0; font-size:15px;line-height:1.2;color:var(--ink,#0C0C0C); } /* ⚠️ 首页（header.site.is-top）必须单独压一次颜色。它平时是压在首屏照片 上的深底页头，链接色是浅的；≤1020 换成纸色背景之后，那套浅色就成了 白字白底 —— 第一版在首页上整个菜单是隐形的。这里比那条规则高两档。 */ header.site .nav-check:checked ~ nav.main > a, header.site .nav-check:checked ~ nav.main > .nav-grp > .nav-top{color:#0C0C0C} /* 当前页的绿色下划线在横排里是指示，竖排里会和行分隔线叠成两条。 ⚠️ 选择器不能再写 `> a.on` —— Capabilities / Guides / Company 的当前项 挂在外层 `.nav-grp` 里（`a.nav-top.on`），子孙选择器才盖得住； 用子选择器时 contact 页那行会留一条 2px 的绿线在分隔线上。 */ header.site .nav-check:checked ~ nav.main a.on::after{display:none} /* CTA 是最后一项，写成药丸、不铺满，也不要有分隔线 （width:auto 必须写回来 —— 上面那条把直接子级 a 全设成了 100%） */ .nav-check:checked ~ nav.main a.cta{ display:inline-block;width:auto;align-self:flex-start;margin:16px 0 2px; padding:12px 22px;border-radius:999px;font-size:14px; border-bottom:0; } /* 展开动画：只在用户没要求减少动效时给 */ @media(prefers-reduced-motion:no-preference){ .nav-check:checked ~ nav.main{animation:navdrop .2s cubic-bezier(.32,.72,0,1)} @keyframes navdrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} } }