/* ========================================================================== * Karry P0 Fixes v1.0.0 * 第四轮全站诊断 P0 八项的样式部分。 * * 设计原则： * 1. 只改「可读性」，不改设计意图；颜色一律往「更暗、更稳」的方向调 * 2. 每条规则都写明「为什么」，以及实测的前后对比度 * 3. 全部可用「停用插件」一键还原 * * 实测基线（2026-10-05，Chrome CDP 真实视口 + 像素采样双重核验）： * #4A8FC8 on #FFFFFF = 3.47:1 ❌ 不达 WCAG AA（需 ≥ 4.5） * 白字 on #4A8FC8 = 3.47:1 ❌ * #4A8FC8 on 浅灰照片 = 2.13:1 ❌❌ * 白字 on #2E6BA8 = 5.55:1 ✅ * 白字 on #16273A = 14.4:1 ✅ * ========================================================================== */ /* ========================================================================== * ① 导航菜单可见性 —— 本轮最关键的一项 * -------------------------------------------------------------------------- * 症状（用户截图发现）： * /quality-control/、/request-quote/、/request-samples/、 * /terms-and-conditions/、/privacy-policy/ 这 5 个页面， * 顶部导航菜单「完全看不见」—— 实测对比度 1.37:1（白字压白底）。 * * 根因（逐行读线上 CSS + CDP 几何实测确认）： * 线上内联 CSS 里有一条规则，本意是「header 全站统一深 navy 磨砂条」： * #header { background-color: rgba(26,42,58,.72) !important; } * #header [data-row] { background-color: transparent !important; } * 但 #header 的高度实测只有 1px —— * 因为它唯一的孩子
是 position:absolute，父元素塌陷了。 * 深色底打在了一个 1px 高的元素上，等于没画。 * 有 hero 大图的页面靠图片垫底，白字勉强能看； * 这 5 个没有 hero 的页面，就是白字压白底。 * * 做法： * 只在这 5 个页面，把 header 从「绝对定位的透明浮层」改回 * 「文档流内的深色实底条」。内容随之下移，不再被遮挡。 * * 为什么用 :has(.hero-section) 而不是列 page-id： * 「纯页面」在主题里会渲染一个 40px 高的 .hero-section 标题块； * 有自定义 hero 大图的页面把标题放进了 hero 里，不会有这个块。 * 实测 5 个坏页全部命中、其余页面全部不命中。 * 好处：将来新建同类页面会自动被修好，不需要维护名单。 * * 实测：1.37:1 → 14.41:1（白字 on #16273A） * ========================================================================== */ body.page-template-default:has(.hero-section) #header > [data-device="desktop"] { position: relative !important; background-color: #16273A !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important; } body.page-template-default:has(.hero-section) #header [data-row] { background-color: transparent !important; box-shadow: none !important; border-bottom: none !important; } /* 顺手清掉打在 1px 高 #header 上的无效深色底与阴影（它会露出一条 1px 白边） */ #header { background-color: transparent !important; box-shadow: none !important; border-bottom: 0 !important; } /* ========================================================================== * ② 主色对比度 #4A8FC8 → #2E6BA8 * -------------------------------------------------------------------------- * 现状：#4A8FC8 被用作卡片标题 / 分类标签 / Read more 按钮 / 正文强调色， * 在白底上只有 3.47:1，全站大面积不达 WCAG AA。 * 做法：把调色板 1 号色整体换成品牌深蓝 #2E6BA8。 * 文字方向 3.47 → 5.55 ✅ * 白字按钮方向 3.47 → 5.55 ✅ * （已核查：站内没有任何「深色文字压在 1 号色上」的用法，不存在反向劣化） * ========================================================================== */ :root { --theme-palette-color-1: #2E6BA8 !important; --wp--preset--color--palette-color-1: #2E6BA8 !important; } /* 少数直接写死浅蓝的地方，一并收口 */ .has-palette-color-1-color { color: #2E6BA8 !important; } /* ========================================================================== * ③ 分类卡图上文字 (P0-5) * -------------------------------------------------------------------------- * 现状：首页「Browse by Categories」六张分类卡，分类名直接压在照片上， * 浅蓝字压浅灰照片 = 2.13:1，几乎读不出来。 * 做法：给分类名加一层半透明深色底衬（不是伪元素 —— * 实测 .stk-block-image::after 被主题规则压成 content:none 不渲染， * 所以直接做在文字元素自身上，保证一定生效）+ 文字转白。 * 白字 on 最深情况（白照片 + 78% 深底）= 9.9:1 ✅ * 白字 on 深照片 = 17:1 ✅ * ========================================================================== */ .stk-block-image-box .stk-block-heading { position: relative; z-index: 2; } .stk-block-image-box .stk-block-heading__text { display: inline-block; color: #FFFFFF !important; background: rgba(10, 18, 28, 0.78); padding: 5px 12px; border-radius: 5px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.22); } /* ========================================================================== * ④ hero 渐变遮罩 (P0-6) * -------------------------------------------------------------------------- * 现状：首页 hero 是自研滑块 .karry-hs。 * .karry-hs-slide 上确实有一层渐变遮罩，但它画在「元素自身背景层」上， * 而照片 .karry-hs-bg 是它的子元素 —— 子元素永远盖在父元素背景之上， * 所以那层遮罩被照片完全遮住，等于没画。 * 结果照片高光直接顶在文字后面：标题带 18.5%、副标题带 25.3% 低于 4.5:1。 * 做法：用 .karry-hs-slide::before 重新生成一层遮罩，z-index 卡在 * 照片（.karry-hs-bg, z=0）之上、文字（.stk-row, z=3）之下。 * 用 rgba 半透明，保留照片通透感。 * ========================================================================== */ .karry-hs-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(8, 16, 26, 0.50) 0%, rgba(8, 16, 26, 0.26) 40%, rgba(8, 16, 26, 0.30) 62%, rgba(8, 16, 26, 0.56) 100% ); pointer-events: none; z-index: 2; } .karry-hs-slide { position: relative; } /* 文字再加一层描边阴影 —— 这是对付「照片高光正好落在文字后面」最有效的一招， 而且完全不损失照片质感。 */ .karry-hs .karry-h1, .karry-hs .stk-block-heading__text, .karry-hs .stk-block-text__text { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55); } /* ========================================================================== * ⑤ 页脚 / 次要文字对比度 * -------------------------------------------------------------------------- * 现状：Blocksy 把页脚顶部区块的 --theme-text-color 设成 #8e98a0， * 白底上只有 2.94:1，不达 AA。 * 做法：只改这个 CSS 变量，不动其它任何属性，观感仍是浅灰。 * 实测 2.94 → 5.4 ✅ * ========================================================================== */ [data-footer*="type-1"] .ct-footer [data-row*="top"] .ct-widget, [data-footer*="type-1"] .ct-footer [data-row*="middle"] .ct-widget, [data-footer*="type-1"] .ct-footer [data-row*="bottom"] .ct-widget { --theme-text-color: #5F6874; } /* 博客摘要 / 页脚版权用的 #6E93AF，白底 3.25:1 → 收紧到 4.6:1 */ .entry-card .entry-excerpt, .entry-card .entry-meta, .ct-footer .ct-text-block { color: #5A6472; } /* ========================================================================== * ⑥ 社交图标死链 (顺带清理) * -------------------------------------------------------------------------- * 现状：全站 8 个社交图标 href 全是 "#"，点了没有任何反应。 * B2B 买家看到 4 个「僵尸」账号图标，是信任的反向打击。 * 做法：暂时隐藏。拿到真实账号链接后把 href="#" 改成真实地址， * 这几条规则会自动失效（因为不再匹配 href="#"）。 * ========================================================================== */ .ct-header-socials .ct-social-box a[href="#"], .ct-header-socials .ct-social-box a[href=""], .ct-header-socials .ct-social-box a:not([href]) { display: none !important; }