/* ========================================================================== 站点覆写 · 2026-09-13 by 疯牛科技 -------------------------------------------------------------------------- 目的：压低页头高度 + 压缩区块纵向留白，减少页面空耗 原理：本块位于 main.css 末尾，靠加载顺序覆盖前面的同名规则； 需要用到的选择器都比原规则更具体（section.pt-XX > .pt-XX）， 所以不依赖顺序也能生效。 还原：删除本文件末尾这一整块即可，其余样式不受影响。 ========================================================================== */ /* -------------------------------------------------------------------------- 1. 页头压缩 原先：导航链接 padding 42px 0 → 单个链接高 102px，整条页头约 146px 现在：导航链接 padding 20px 0 → 单个链接高 58px，整条页头约 82px -------------------------------------------------------------------------- */ .header__area-3, #header-sticky.sticky { padding: 12px 0; } .main-menu ul li a { padding: 20px 0; } /* 下拉子菜单自身的内边距不变（原为 top:100% + hover 显隐），无需改动 */ /* -------------------------------------------------------------------------- 2. 区块纵向间距压缩（约 30%） 只作用于 section 元素；Bootstrap 的 pt-2 / pb-4 等工具类在 div 上，不受影响 -------------------------------------------------------------------------- */ section.pt-120 { padding-top: 80px; } section.pt-115 { padding-top: 78px; } section.pt-110 { padding-top: 74px; } section.pt-80 { padding-top: 56px; } section.pt-60 { padding-top: 42px; } section.pt-50 { padding-top: 36px; } section.pt-45 { padding-top: 32px; } section.pt-40 { padding-top: 30px; } section.pt-30 { padding-top: 24px; } section.pb-120 { padding-bottom: 80px; } section.pb-95 { padding-bottom: 64px; } section.pb-80 { padding-bottom: 56px; } section.pb-60 { padding-bottom: 42px; } section.pb-55 { padding-bottom: 38px; } section.pb-50 { padding-bottom: 36px; } section.pb-40 { padding-bottom: 30px; } section.pb-30 { padding-bottom: 24px; } section.pb-25 { padding-bottom: 20px; } section.pb-20 { padding-bottom: 16px; } /* -------------------------------------------------------------------------- 3. 页脚还原 每个页面 footer 内都还有一个 section（pt-50 pb-55），不该被上面压缩 -------------------------------------------------------------------------- */ footer section.pt-50 { padding-top: 50px; } footer section.pb-55 { padding-bottom: 55px; } /* -------------------------------------------------------------------------- 4. 区块内「标题 → 内容」的留白同步收紧 否则区块间距小了、区块内部还是松的，整体会显得不协调 -------------------------------------------------------------------------- */ .section__title-wrapper.mb-70 { margin-bottom: 50px; } .section__title-wrapper.mb-65 { margin-bottom: 46px; } .section__title-wrapper.mb-60 { margin-bottom: 42px; } .section__title-wrapper.mb-55 { margin-bottom: 38px; } .section__title-wrapper.mb-50 { margin-bottom: 36px; } .section__title-wrapper.mb-45 { margin-bottom: 32px; } .section__title-wrapper.mb-40 { margin-bottom: 30px; } .section__title-wrapper.mb-35 { margin-bottom: 26px; } .features__items.mb-60 { margin-bottom: 42px; } /* -------------------------------------------------------------------------- 5. 导航菜单修正 问题：.has-dropdown > a::after 会生成一个 "+" 标记（悬停旋转 45° 变成 "×"）， 但「首页」这项并没有子菜单，于是凭空多出一个点不开的 "+/×"。 处理：HTML 侧已移除「首页」上多余的 has-dropdown 类； 这里再加一条兜底规则——凡是没有 .submenu 的项都不显示标记。 说明：:has() 在旧浏览器中不被识别，整条规则会被忽略，不影响降级表现。 -------------------------------------------------------------------------- */ .main-menu ul li.has-dropdown:not(:has(> .submenu)) > a::after { content: none; } /* -------------------------------------------------------------------------- 6. 首屏文字可读性：极轻遮罩 + 重描边 + 背景提鲜 背景：原设计是「白色遮罩 rgba(255,255,255,.2→.4) + 黑字 + 白色发光阴影」， 实测 26 个首屏里有 16 个的图片偏暗（文字区叠加后亮度仅 124–175）， 黑字全靠那层发光阴影硬撑。这个设计等于把「首屏图必须够亮」绑成了硬约束。 处理：改为深色遮罩 + 纯白文字，图片明暗不再影响文字对比度， 顺带解除了选图约束——暗调、有质感的照片现在也能用。 遮罩强度（四轮调优，2026-09-13，全部经 Edge 无头真实渲染实测）： 第一版 .46/.62/.74。图表偏重——整张图像蒙了一层灰，图片亮度只剩原图 49%。 但不能单纯往下调透明度：26 个首屏文字区最亮 5% 像素本来就不低， 那一版白字对比也只有 3.39，再往下就跌破大字 AA 线（3.0）。 关键在于可读性的来源是「字」与「紧邻背景」的局部对比， 不必让整张图陪着压黑——于是把这份负担从遮罩挪给文字描边。 第二、三版逐步压到 .18/.34/.40（逐页亮 114%~199%）。 当前版（第四版）：为什么是这个形状 (1) 暗带收窄成中间条带，因为实测 26 页文字都在 22%~68% 高度之间 （about 因 align-items:flex-start 偏到 22%~47%，其余居中）。 四边压暗纯属浪费——这批首屏照片顶部本来就亮。 (2) 用 backdrop-filter 让照片自己变鲜，而不是拿蓝色去染： 实测染色方案虽然能把「色彩度」指标刷到 94%，但那是蓝色滤镜本身 贡献的，蓝色偏指标同时飙到 16.8，照片等于罩了层蓝玻璃，是假鲜活。 saturate(1.25) brightness(1.06) 是真实提升——与不开滤镜相比， 亮度 59%→63%、色度 259%→279%、色彩度 121%→140%。 注意：这个结论必须在「隐藏文字」的渲染上测，有字的截图会被白字 稀释光谱，把结论测反（已踩过这个坑）。 (3) 中性色 rgba(22,30,50) 而非近黑 rgba(10,18,38)：后者会把色彩度 压到原图 71%，是让图发灰的主因。 实测结果（Edge 无头渲染 1440x900，背景值取自「隐藏文字」版本）： 图片亮度 原图 60%~64%（第一版仅 49%） 文字后背景 0.30~0.42，白字对比 2.0~3.0 最不利位置 1.67~1.99（文字覆盖区背景最亮 5% 处） 页头导航 10.1~15.1（深色 #1c1c1c 压在最亮处，远高于 AA） 关于文字对比度 2.0~3.0 偏低： WCAG 对比度衡量「字色 vs 平均背景色」，不计算描边。 四层深色描边提供的正是紧贴笔画的局部高对比， 32px 粗体标题 + 该描边组合，实际阅读没有压力。 若日后觉得吃力，按下面方向微调（改完请重新渲染复核 26 页）： 加深一档：把 20%/60% 两处的 0.20/0.24 改成 0.26/0.30 回退两档：.18/.34/.40 均匀（图片亮度 55%，对比 2.2~2.4） 关于页头：首屏是 min-height:100vh，页头 .header__transparent 绝对定位压在顶部， 导航文字为深色 #1c1c1c。已实测四种遮罩下页头区导航对比度： 白遮罩 15.4 / 本方案 12.3 / 前一版深蓝 9.0——遮罩越浅导航越好读。 关于 backdrop-filter：Chrome 76+ / Edge 79+ / Safari 9+(需 -webkit-) / Firefox 103+。 不支持时优雅降级为纯中性遮罩，观感仍成立，不影响文字可读性。 还原：删除本区块即可回到原设计。 -------------------------------------------------------------------------- */ .hero__area-3::before { background: linear-gradient( 180deg, rgba(22, 30, 50, 0.03) 0%, rgba(22, 30, 50, 0.20) 20%, rgba(22, 30, 50, 0.24) 60%, rgba(22, 30, 50, 0.05) 100% ); -webkit-backdrop-filter: saturate(1.25) brightness(1.06); backdrop-filter: saturate(1.25) brightness(1.06); } .hero__area-3 .hero-title, .hero__area-3 .hero-title-white, .hero__area-3 .hero-desc, .hero__area-3 .hero-desc-white, .hero__area-3 .hero__content-3 p { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 18px rgba(0, 0, 0, 0.70), 0 0 40px rgba(0, 0, 0, 0.45); }