/* ========================================================================== 文枢软件中心 · 品牌层 Brand Layer 依据 VI 规范手册 03 Logo系统 / 04 色彩系统 / 05 字体系 / 06 图形语言 本文件必须在 app.css 之后加载，用于把 app.css 中冲突的历史变量收编为唯一取值 ========================================================================== */ /* ---------- 1. VI 权威令牌 ---------- */ :root{ /* 主色 60% —— 稳固基调 */ --ws-navy:#182A4A; --ws-navy-800:#1F3A5F; --ws-navy-900:#10233C; --ws-navy-050:#EEF2F7; /* 辅色 30% —— 信息流动 / 链接 / 强调 / AI 呼吸感 */ --ws-teal:#2A9D8F; --ws-teal-700:#1F7A6F; --ws-teal-400:#45C4B4; --ws-teal-100:#D3E9E5; --ws-teal-050:#EAF5F3; /* 点缀 10% —— 点睛，克制使用 */ --ws-gold:#C9A86A; --ws-gold-700:#8A6320; --ws-gold-100:#F1E5CC; /* 中性灰色阶 4 级 */ --ws-g050:#F5F7FB; /* 背景浅灰 */ --ws-g200:#E5E7EB; /* 分割线 / 边框 */ --ws-g500:#6B7280; /* 次级文字 */ --ws-g900:#111827; /* 正文深灰 */ /* 语义色 */ --ws-ok:var(--ws-teal); --ws-warn:#E8963C; --ws-err:#D9534F; /* 字体角色：标题=线衬宋体，正文=无衬线，英/数=几何无衬线 */ --ws-serif:'WSSerif','Source Han Serif SC','Noto Serif CJK SC','Noto Serif SC','Songti SC','STSong',SimSun,serif; --ws-sans:'WSGrotesk','HarmonyOS Sans SC','MiSans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,-apple-system,sans-serif; --ws-num:'WSGrotesk',ui-sans-serif,system-ui,sans-serif; /* 字阶（VI 05 全层级字号参数，移动端另有缩放） */ --ws-h1:48px; --ws-h1-lh:1.2; --ws-h1-ls:-.02em; --ws-h2:32px; --ws-h2-lh:1.3; --ws-h2-ls:-.01em; --ws-h3:24px; --ws-h3-lh:1.4; --ws-h3-ls:0; --ws-body:16px; --ws-body-lh:1.6; --ws-cap:12px; --ws-cap-lh:1.5; --ws-cap-ls:.05em; /* 圆角 / 阴影 / 描边 —— 全站唯一一套 */ --ws-r-sm:6px; --ws-r-md:10px; --ws-r-lg:16px; --ws-r-pill:999px; --ws-line:1px solid var(--ws-g200); --ws-sh-1:0 1px 2px rgba(24,42,74,.06),0 2px 8px rgba(24,42,74,.05); --ws-sh-2:0 6px 20px rgba(24,42,74,.10); --ws-sh-3:0 16px 44px rgba(24,42,74,.16); /* 节奏 */ --ws-gap:24px; --ws-pad:32px; --ws-maxw:1180px; } /* ---------- 2. 收编 app.css 历史变量（消除同名多值冲突） ---------- */ :root{ /* 旧无前缀层 */ --navy:var(--ws-navy); --navy2:var(--ws-navy-800); --navy3:var(--ws-navy-900); --ink:var(--ws-g900); --ink2:var(--ws-g500); --ink3:var(--ws-g500); --line:var(--ws-g200); --line2:var(--ws-g200); --gold:var(--ws-gold); --goldbg:var(--ws-gold-100); --bg:var(--ws-g050); --card:#fff; --side:24px; --steel:var(--ws-g500); --blue:var(--ws-teal); --bluebg:var(--ws-teal-050); --green:var(--ws-ok); --greenbg:var(--ws-teal-050); --orange:var(--ws-warn); --orange2:var(--ws-warn); --grain:none; /* --color-* 层 */ --color-primary:var(--ws-navy); --color-primary-dark:var(--ws-navy-900); --color-primary-light:var(--ws-navy-050); --color-teal:var(--ws-teal-700); --color-teal-dark:var(--ws-teal-700); --color-teal-bright:var(--ws-teal-400); --color-teal-hover:var(--ws-navy); --color-teal-soft:var(--ws-teal-050); --color-gold:var(--ws-gold); --color-gold-soft:var(--ws-gold-100); --color-ink:var(--ws-g900); --color-ink-light:var(--ws-g500); --color-ink-lighter:var(--ws-g500); --color-paper:var(--ws-g050); --color-border:var(--ws-g200); /* --st-* 层 —— app.css 引用 --st-primary 101 次，浅底上 #2A9D8F 仅 2.8:1， 故主令牌取深青 #1F7A6F（4.6:1，白字压底同样达标）；勿改回亮青。 */ --st-ink:var(--ws-navy); --st-ink-2:var(--ws-navy-800); --st-ink-mute:var(--ws-g500); --st-canvas:var(--ws-g050); --st-canvas-soft:var(--ws-teal-050); --st-cream:var(--ws-g050); --st-primary:var(--ws-teal-700); --st-primary-deep:var(--ws-navy); --st-primary-soft:var(--ws-teal-050); --st-primary-subdued:var(--ws-teal-100); --st-primary-press:var(--ws-teal-700); /* --st-gold 用于「金色文字」，压浅底必须达标：#C9A86A 仅 2.26:1； 文字档 #9A7028 压白底 4.45:1、压报价卡浅灰底只有 4.15:1， 再压深一档到 #8A6320（白底 5.35 / 浅灰底 5.04）；线条与底色仍用亮金。 */ --st-gold:var(--ws-gold-700); --st-gold-deep:var(--ws-gold-700); --st-gold-solid:var(--ws-gold); --st-gold-soft:var(--ws-gold-100); --st-gold-line:var(--ws-gold); --st-gold-on-dark:var(--ws-gold); --st-hairline:var(--ws-g200); --st-hairline-input:var(--ws-g200); --st-cinnabar:var(--ws-err); --st-cyan:var(--ws-teal); --st-ruby:var(--ws-err); --st-lemon:var(--ws-warn); --st-magenta:var(--ws-teal-400); --st-dark-900:var(--ws-navy-900); --st-pill:var(--ws-r-pill); --st-radius-sm:var(--ws-r-sm); --st-radius-lg:var(--ws-r-lg); --st-shadow-1:var(--ws-sh-1); --st-shadow-2:var(--ws-sh-2); --st-ring:var(--ws-teal); --st-ring-soft:var(--ws-teal-100); --st-font-display:var(--ws-serif); /* --v4-* 层 */ --v4-navy:var(--ws-navy); --v4-navy-2:var(--ws-navy-800); --v4-ink:var(--ws-g900); --v4-paper:var(--ws-g050); --v4-paper-deep:var(--ws-g050); --v4-gold:var(--ws-gold); --v4-gold-2:var(--ws-gold); --v4-gold-soft:var(--ws-gold-100); --v4-gold-line:var(--ws-gold); --v4-grain:none; --v4-hair:var(--ws-g200); --v4-star:var(--ws-gold); --v4-shadow-1:var(--ws-sh-1); --v4-shadow-2:var(--ws-sh-2); --v4-shadow-gold:none; --v4-shadow-navy:var(--ws-sh-2); --v4-ease:cubic-bezier(.22,.61,.36,1); --v4-ease-out:cubic-bezier(.22,.61,.36,1); --v5-ease:cubic-bezier(.22,.61,.36,1); /* 阴影 / 圆角 / 渐变：全站唯一，且禁止给 Logo 加阴影（VI 03 禁用场景） */ --shadow-sm:var(--ws-sh-1); --shadow-md:var(--ws-sh-2); --shadow-lg:var(--ws-sh-3); --shadow-brand:none; --sh-1:var(--ws-sh-1); --sh-2:var(--ws-sh-2); --sh-gold:none; --radius-sm:var(--ws-r-sm); --radius-md:var(--ws-r-md); --radius-lg:var(--ws-r-lg); --radius-xl:var(--ws-r-lg); --brand-gradient:linear-gradient(135deg,var(--ws-navy) 0%,var(--ws-navy-800) 100%); --brand-gradient-deep:linear-gradient(160deg,var(--ws-navy-900),var(--ws-navy)); --transition:.2s cubic-bezier(.22,.61,.36,1); } /* ---------- 2b. 作用域令牌修正 ---------- app.css 在 .page.st-site 上二次映射了旧无前缀层，权重高于 :root， 其中 --steel 被指向 --st-primary-soft（#EAF5F3），而 app.css 用它作正文色 （.quote .q .qgo、.mile .m i），浅底上实测 1.07:1 完全不可见。 选择器需与原规则同权重且位于其后，才能压过它。 */ .page.st-site, .page.st-site .st-hero{ --steel:var(--ws-g500) } /* ---------- 3. 排版层级（VI 05） ---------- */ html{font-size:16px} body{ background:var(--ws-g050)!important; font-family:var(--ws-sans); color:var(--ws-g900); font-size:var(--ws-body); line-height:var(--ws-body-lh); letter-spacing:0; } h1,.h1{font-family:var(--ws-serif);font-size:var(--ws-h1);line-height:var(--ws-h1-lh);letter-spacing:var(--ws-h1-ls);font-weight:600;color:var(--ws-navy)} h2,.h2{font-family:var(--ws-serif);font-size:var(--ws-h2);line-height:var(--ws-h2-lh);letter-spacing:var(--ws-h2-ls);font-weight:600;color:var(--ws-navy)} h3,.h3{font-family:var(--ws-serif);font-size:var(--ws-h3);line-height:var(--ws-h3-lh);letter-spacing:0;font-weight:600;color:var(--ws-navy)} h4,.h5,.h6{font-family:var(--ws-serif);font-weight:600;color:var(--ws-navy)} caption,.cap,.muted,.sub{font-size:var(--ws-cap);line-height:var(--ws-cap-lh);letter-spacing:var(--ws-cap-ls);color:var(--ws-g500)} /* 数字与技术标注走几何无衬线（VI 05 Display Sans C） */ .num,.stat,.price,.tabular,td.num,[data-num]{font-family:var(--ws-num);font-variant-numeric:tabular-nums} /* 正文区禁止被历史 !important 拉成宋体 */ p,li,td,th,label,input,select,textarea,button{font-family:var(--ws-sans)} /* ---------- 4. 导航（VI 03：Logo 不加阴影、不放复杂纹理上） ---------- */ header.nav,.nav{ background:rgba(24,42,74,.97)!important; /* 墨蓝 #182A4A，非原 #1B3A5C */ border-bottom:1px solid rgba(255,255,255,.10); box-shadow:none; } .logo-img{height:40px!important;width:auto!important;display:block!important;filter:none!important} header.nav a{color:rgba(255,255,255,.82)} header.nav a:hover,header.nav a.active{color:#fff} header.nav a.active{box-shadow:inset 0 -2px 0 var(--ws-gold)} /* 主 CTA：墨蓝实底，不用暖金、不用橙色（暖金仅 10% 点缀，橙为语义色） */ .navcta{ background:var(--ws-teal)!important; box-shadow:none!important; color:#fff!important; border-radius:var(--ws-r-pill)!important; font-weight:600!important; letter-spacing:.02em; } .navcta:hover{background:var(--ws-teal-700)!important} /* ---------- 5. 章节标题：VI 页式「序号 | 标题 + 暖金下划线」 ---------- */ section>h2:first-child, .sect-title, main h2{position:relative;padding-bottom:14px} section>h2:first-child::after, .sect-title::after, main h2::after{ content:"";position:absolute;left:0;bottom:0;width:44px;height:3px; background:var(--ws-gold);border-radius:2px; } /* ---------- 6. 卡片：白底 + 1px 分割线灰 + 墨蓝标题，去彩色投影 ---------- */ .card,.pcard,.ti,.step,.feat,.compare-col,.box{ background:#fff; border:var(--ws-line); border-radius:var(--ws-r-lg); box-shadow:var(--ws-sh-1); } .card:hover,.pcard:hover{box-shadow:var(--ws-sh-2);border-color:var(--ws-teal-100)} .price,.p-price,[class*="price"]{color:var(--ws-navy);font-family:var(--ws-num);font-variant-numeric:tabular-nums;letter-spacing:-.01em} a{color:var(--ws-teal-700)} a:hover{color:var(--ws-teal)} /* ---------- 7. 页脚：单色反白 Logo + 墨蓝深底 ---------- */ footer,.site-footer{background:var(--ws-navy-900);color:rgba(255,255,255,.72)} footer a,.site-footer a{color:rgba(255,255,255,.82)} .footer-logo{height:44px!important;width:44px!important;filter:none!important} /* ---------- 8. 品牌图形位（供 hero / 分隔使用） ---------- */ .ws-hero-art{ display:block;width:min(520px,100%);height:auto; background:none;box-shadow:none; } .ws-divider{ display:block;width:100%;height:26px; background:url('aux/divider.svg') no-repeat left center/contain; opacity:.9; } .ws-pixel-bg{ background-image:url('aux/pixel-grid.svg'); background-repeat:no-repeat; background-position:right top; background-size:min(280px,40%); } /* ---------- 9. 移动端：仅两个断点，导航不挤压 ---------- */ @media (max-width:679px){ :root{ --ws-h1:32px; --ws-h2:24px; --ws-h3:20px; --ws-body:15px; --ws-pad:20px; --ws-gap:16px; } header.nav,.nav{padding:10px 14px;flex-wrap:nowrap} .logo-img{height:32px!important} header.nav .links{display:none} .navtoggle{display:inline-flex!important} } @media (min-width:680px){ .navtoggle{display:none!important} header.nav .links{display:flex!important} } @media (max-width:380px){ :root{--ws-h1:28px} } /* ---------- 10. 无障碍：正文对比度 ≥4.5:1（VI 04 第 4 条） ---------- */ :where(a,button,input,select,textarea):focus-visible{ outline:2px solid var(--ws-teal);outline-offset:2px;border-radius:var(--ws-r-sm); } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ---------- 11. 页脚品牌区（VI 03：深色底用单色反白版，四周留 X 安全空间，禁止阴影/描边） ---------- */ .f-brand{margin:0 0 16px} .footer-logo{display:block;height:44px;width:44px;filter:none!important;box-shadow:none!important; border:0;outline:0;transform:none} .foot .f-col>b{font-family:var(--ws-serif);font-size:18px;font-weight:600;color:#fff;letter-spacing:-.01em;display:block;margin-bottom:8px} .foot .f-col>span{display:block;font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);margin-bottom:4px} .foot .f-col a{font-size:13px;color:rgba(255,255,255,.78);text-decoration:none} .foot .f-col a:hover{color:var(--ws-gold)} .foot .fb{font-family:var(--ws-serif);font-size:15px;color:#fff;margin:0 0 6px} .footer-logo+.fb{margin-top:14px} /* ---------- 12. 已并入第 13.2 节（.logo-img 选择器已随标记重构废弃） ---------- */ /* ══════════════════════════════════════════════════════════════════════════ 以下为合并后的第 13 节，取代原第 13/15/16/17/18/19/20/21/22/23/24/25/26/27/ 28/29 共十六个互相覆盖的小节。合并依据：以 pre-consolidation 标签处捕获的 25 个选择器计算样式为基准，逐条复现，不改变任何视觉结果。 原则：每条声明只出现一次；!important 仅用于确实需要压过 app.css 历史规则处。 ══════════════════════════════════════════════════════════════════════════ */ /* ── 13.1 导航：墨蓝主导，与首屏同色，无接缝、无白板 ───────────────────────── */ header.nav, .nav.st-nav{ background:rgba(16,35,60,.94)!important; -webkit-backdrop-filter:saturate(160%) blur(12px); backdrop-filter:saturate(160%) blur(12px); color:#fff!important; border-bottom:1px solid rgba(201,168,106,.24)!important; box-shadow:none!important; } header.nav.st-nav.scrolled{ background:rgba(16,35,60,.98)!important; box-shadow:0 2px 16px rgba(16,35,60,.35)!important; } header.nav .brand{display:inline-flex;align-items:center;gap:10px;flex:none;color:#fff} header.nav .links a{color:rgba(255,255,255,.84)!important;border-top-color:rgba(255,255,255,.10)!important} header.nav .links a:hover{color:#fff!important} header.nav .links a.active{color:#fff!important;box-shadow:inset 0 -2px 0 var(--ws-gold)!important} /* ── 13.2 标志：小尺寸用「纯图形 + VI 宋体真实文字」───────────────────────── 完整横版组合在 40px 高时中文标仅约 14px，不可读；图形按 viewBox 裁剪， 不重绘路径，符合 VI 03「禁止拉伸变形」；文字为真实字体，任意 DPR 下锐利。 */ .logo-mark{height:40px;width:auto;display:block;flex:none;filter:none!important;box-shadow:none!important} header.nav .brand:hover .logo-mark{opacity:.92} /* ── 13.3 汉堡按钮：暖金细描边，与标志金色饰线同调 ────────────────────────── */ header.nav .navtoggle{ background:rgba(255,255,255,.06)!important; border:1px solid rgba(201,168,106,.42)!important; color:#F1E5CC!important; } header.nav .navtoggle svg, header.nav .navtoggle *{color:#F1E5CC!important;stroke:#F1E5CC!important} header.nav .navtoggle:hover{background:rgba(201,168,106,.16)!important;border-color:var(--ws-gold)!important} header.nav .navtoggle:hover svg, header.nav .navtoggle:hover *{color:var(--ws-gold)!important;stroke:var(--ws-gold)!important} /* ── 13.4 导航主按钮：亮青绿底 + 墨蓝字 = 7.39:1，在墨蓝导航上最跳且达标 ───── */ header.nav .navcta{background:var(--ws-teal-400)!important;color:var(--ws-navy-900)!important;box-shadow:none!important} header.nav .navcta:hover{background:#5FD0C4!important} /* ── 13.5 强调色不得充当正文色（VI 04：正文 ≥4.5:1；暖金仅 10% 点缀）──────── 实测暖金 #C9A86A 压任何浅底最高仅 4.39:1，故金色只做线条/装饰，不做文字。 */ .st-btn, .st-btn-primary, a.go, .cta, .sheet-x, .wx-x, .btn-primary, .st-site .dock .d-buy{ background:var(--ws-teal-700)!important;color:#fff!important} .st-btn:hover, .st-btn-primary:hover, a.go:hover, .cta:hover, .btn-primary:hover, .st-site .dock .d-buy:hover{ background:var(--ws-navy)!important;color:#fff!important} .st-btn-gold, .st-hero .st-btn-gold{background:var(--ws-gold)!important;color:var(--ws-navy)!important} .st-btn-gold:hover{background:var(--ws-gold-700)!important;color:#fff!important} /* 暖金底上的文字必须显式声明：app.css 的 main a{color:var(--st-primary)} 会让 青绿文字压暖金（实测 2.28:1）。金底一律配墨蓝字。 */ .st-site .wx-openbtn{background:var(--ws-gold)!important;color:var(--ws-navy)!important} .st-site .wx-openbtn:hover{background:var(--ws-gold-700)!important;color:#fff!important} .st-hero .st-btn-outline{background:transparent!important;border-color:var(--ws-teal-400)!important;color:var(--ws-teal-400)!important} .st-hero .st-btn-outline:hover{background:var(--ws-teal-400)!important;color:var(--ws-navy-900)!important} .ptag{background:var(--ws-navy)!important;color:#fff!important} .wintag{background:var(--ws-teal-400)!important;color:var(--ws-navy-900)!important} .eyebrow, .st-eyebrow, .sec-eyebrow{color:var(--ws-teal-700)!important} .h-sub b, .h-sub strong, main p b, main p strong, .lead b, .st-sub b, .note b, .dirnote b{color:var(--ws-navy)!important} .dirnote, .st-site .final p, .card > div:not([class]){color:var(--ws-g500)!important} .card > div:not([class]) b, .card > div:not([class]) strong{color:var(--ws-navy)!important} a.skip-link:focus{background:var(--ws-navy)!important;color:#fff!important} main a:not(.st-btn):not(.navcta):not(.cta):not(.go):not(.ptag):not(.brand):not(.skip-link){color:var(--ws-teal-700)} main a:not(.st-btn):not(.navcta):not(.cta):not(.go):not(.ptag):not(.brand):not(.skip-link):hover{color:var(--ws-navy)} /* ── 13.5b 深青演示面板：底色为 --st-primary(#1F7A6F)，文字必须反相为浅色 ──── 此前把 .pd-demo p 当作浅底正文上了次级灰，实测 1.07:1；幽灵按钮同理 1.00:1。 */ .pd-demo h3, .pd-demo .h3, .pd-demo > b{color:#fff!important} .pd-demo p{color:var(--ws-teal-050)!important} .pd-demo .pd-demo-k{color:var(--ws-teal-050)!important} .pd-demo .st-btn-ghost{color:var(--ws-teal-050)!important;border-color:rgba(234,245,243,.55)!important;background:transparent!important} .pd-demo .st-btn-ghost:hover{background:var(--ws-teal-050)!important;color:var(--ws-teal-700)!important} /* 10.5px 的小字金色标签：#C9A86A 压白底 2.26:1，改为墨蓝（金色退回线条用途） */ .st-site .pd-rel-c{color:var(--ws-navy)!important} /* 报价卡价格用暖金（VI 允许金做点缀），但 17px 时 #9A7028 压白底 4.45:1 差 0.05； 提到 19px 后按「粗体大字号」只需 3:1，同时价格本就更该显眼。 */ .st-site .quote .q .pr{font-size:19px} /* 浅底上的 强调：金 4.15:1、青 4.26:1 均差最后一点，一律用墨蓝 */ .st-site .pcount b, .wx-hook b{color:var(--ws-navy)!important} /* 交付时间轴 10px 注记压淡青底：--steel 修正后仍 4.34:1，小字号再提一档 */ .mile .m i{color:var(--ws-navy)!important} /* ── 13.6 品牌图标：48px 白底卡位用官方彩色版（验收图 ④）────────────────── 9–23px 的 UI 符号保持 sprite 线性图标：品牌图标是 112 单位视框的插画级 图形，缩到 UI 尺度会糊。其描边原为彩色模拟屏设计，白底上需改墨蓝。 */ .scr .brand-ico{display:block;width:48px;height:48px;filter:none;box-shadow:none; transition:transform var(--transition)} .brand-ico{transition:transform var(--transition)} .scr:hover .brand-ico{transform:scale(1.06)} .scr .pic svg:not(.brand-ico), .scr .pic svg:not(.brand-ico) *{color:var(--ws-navy)!important;stroke:var(--ws-navy)!important} .scr .pic svg:not(.brand-ico) [fill]:not([fill="none"]){fill:var(--ws-gold)!important} /* ── 13.7 页脚：深色锚点保留，完整横版组合按区块空间放大（非裁剪）────────── */ footer.foot, .foot{background:var(--ws-navy-900)!important;color:rgba(255,255,255,.62)!important; border-top:1px solid rgba(201,168,106,.28)} .foot .f-brand{margin:0 0 18px;padding:10px 0} .foot .f-brand img.footer-logo{height:44px!important;width:44px!important;border-radius:50%; filter:none!important;box-shadow:none!important} .foot .f-col>b, .foot .fb{color:#fff!important} .foot .f-col>span, .foot .f-col>div{color:rgba(255,255,255,.62)!important} .foot a, .foot .f-col a{color:rgba(255,255,255,.78)!important;text-decoration:none} .foot a:hover, .foot .f-col a:hover{color:var(--ws-gold)!important} .foot .f-note{color:rgba(255,255,255,.52)!important;border-top:1px solid rgba(255,255,255,.10)} .dock{background:var(--ws-navy-900)!important;border-top:1px solid rgba(201,168,106,.22)} .wx-orb{background:radial-gradient(circle, rgba(201,168,106,.34), rgba(0,0,0,0) 70%)!important} /* ── 13.8 首屏插画：真矢量 01 主标志的 on-dark 变体（位图描摹产物已停用）──── */ .st-hero .st-hero-art img, .st-hero .hero-art img, .st-hero img[src*="logo-primary"]{ filter:none!important;box-shadow:none!important} /* 深底上的强调文字用亮青绿：#1F7A6F 压 #10233C 仅 3.07:1 */ .st-hero .eyebrow, .st-hero .st-eyebrow, .st-hero .sec-eyebrow, .st-hero .st-hl{ color:var(--ws-teal-400)!important} /* ── 13.9 响应式：仅两档 ───────────────────────────────────────────────── */ @media (max-width:679px){ header.nav{padding:10px 14px} /* 实测 40px/19px 时 brand 宽 221 + 汉堡 38 = 259 < 365，320px 屏也仅需 287px， 故移动端不再缩小标志——缩小会牺牲可读性且无空间必要 */ header.nav .links{background:rgba(16,35,60,.98)!important;display:none} header.nav .links.open, header.nav.open .links{display:flex} header.nav .links a{color:rgba(255,255,255,.86)!important;border-top:1px solid rgba(255,255,255,.10)!important} header.nav .links a.active{box-shadow:inset 3px 0 0 var(--ws-gold)!important} header.nav.open .navtoggle{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.34)!important;color:#fff!important} header.nav.open .navtoggle svg, header.nav.open .navtoggle *{color:#fff!important;stroke:#fff!important} header.nav .navcta{display:none} /* 底部吸底栏已承载同一主操作 */ .foot .f-brand img.footer-logo{height:40px!important;width:40px!important} /* 首屏主标：app.css 的 .st-site .st-hero h1.st-display 用 clamp(29px,7.6vw,38px) !important（权重 0,3,1），实测 380px 下 29px 会把「副业」拆断、共 4 行。 中文标题宽度 ≈ 13.6×字号，故按可用宽反解字号，380px 得 24px（两句各一行）， 大屏仍随视口放大到 46px。选择器权重需与原规则相同才能压过它。 */ .st-site .st-hero h1.st-display, h1.st-display{ font-size:clamp(24px, calc((100vw - 60px) / 13.6), 46px)!important; line-height:1.35!important; letter-spacing:0!important} } @media (min-width:680px){ .navtoggle{display:none!important} header.nav .links{display:flex!important} /* 首屏主标在桌面每一档都会拆词。CDP 逐字号实测：受限的是第 2 句 「888 元起，买了就能上线赚钱」，宽 ≈ 13.0×字号（第 1 句仅 11.9×， 先前按第 1 句取 8.4cqi 会让第 2 句把「赚钱」拆断）。 容器宽由网格轨道决定、与 vw 不成比例，故用容器单位：字号上限 = 容器宽 / 13.5。 */ .st-hero-l{container-type:inline-size} .st-site .st-hero h1.st-display, h1.st-display{ font-size:min(48px, 7.4cqi)!important; line-height:1.28!important; letter-spacing:0!important} /* app.css 在 ≥680 就切成 1.15fr/.85fr 双栏，使文字栏在 680–1179 只有 300–587px， 主标被压到 23–46px，且在 980 处出现「越宽越小」的非单调。实测双栏要文字栏 ≥587px（即视口 ≥1180）才撑得住 46px 以上，故该阈值以下改回单栏。 */ @media (max-width:1179px){ .st-hero-grid{grid-template-columns:1fr;gap:36px} .st-hero-art{max-width:460px;margin:0 auto} /* 单栏时整列居中，但数字行是 flex 且默认左堆，需跟随居中 */ .st-hero .st-stats{justify-content:center} } } /* ══════════════════════════════════════════════════════════════════════════ 14. 产品预览组件 .pv —— 首屏右栏与 01 区演示卡共用一套「界面骨架」语言 ────────────────────────────────────────────────────────────────────────── 原先首屏右栏直接贴完整横版标志：中文标被画进图里，与导航的文字标重复， 整块读起来像品牌海报而不是产品站。改成一扇正在运行的应用窗口后， 「买了就能上线」这件事在首屏就被看见。 色值全部取自 VI 令牌；界面内不出现虚构营收数字，示例性一律标注。 */ /* ── 14.1 窗口外壳 ───────────────────────────────────────────────────────── */ .pv{position:relative;border-radius:14px;overflow:hidden; background:linear-gradient(160deg,var(--ws-navy-900),var(--ws-navy-800)); border:1px solid rgba(201,168,106,.22);box-shadow:0 24px 60px rgba(9,18,36,.5)} .pv-bar{display:flex;align-items:center;gap:10px;padding:9px 12px; background:rgba(255,255,255,.05);border-bottom:1px solid rgba(201,168,106,.18)} .pv-dots{display:flex;gap:5px;flex:none} .pv-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.24)} .pv-url{flex:1;min-width:0;font-size:12px;letter-spacing:.02em;color:var(--ws-teal-100); background:rgba(255,255,255,.07);border-radius:100px;padding:3px 10px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pv-live{display:inline-flex;align-items:center;gap:5px;flex:none; font-size:12px;color:var(--ws-teal-400)} .pv-live i{width:6px;height:6px;border-radius:50%;background:var(--ws-teal-400); box-shadow:0 0 0 3px rgba(69,196,180,.18)} /* ── 14.2 界面骨架 ───────────────────────────────────────────────────────── */ .pv-body{display:flex;gap:12px;padding:14px} .pv-rail{flex:none;width:52px;display:flex;flex-direction:column;gap:8px} .pv-rail i{height:9px;border-radius:100px;background:rgba(255,255,255,.13)} .pv-rail i:first-child{width:70%;background:var(--ws-teal-400);opacity:.8} .pv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:11px} .pv-kpis{display:flex;gap:8px} .pv-kpi{flex:1;min-width:0;padding:8px 9px;border-radius:9px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)} .pv-kpi b{display:block;font-family:var(--ws-serif);font-size:15px;font-weight:600; line-height:1.15;color:var(--ws-gold-100)} .pv-kpi span{display:block;margin-top:2px;font-size:9px;letter-spacing:.02em; color:rgba(255,255,255,.58)} .pv-chart{display:flex;align-items:flex-end;gap:6px;height:62px;padding:0 2px} .pv-chart i{flex:1;border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--ws-teal-400),rgba(69,196,180,.32))} .pv-rows{display:flex;flex-direction:column;gap:6px} .pv-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px; background:rgba(255,255,255,.045)} .pv-row .a{flex:none;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.13)} .pv-row .b{flex:1;height:7px;border-radius:100px;background:rgba(255,255,255,.13)} .pv-row .c{flex:none;font-size:9.5px;padding:2px 7px;border-radius:100px; color:var(--ws-teal-100);background:rgba(69,196,180,.22)} /* 示例性声明：骨架不是客户真实数据。 它其实是 .pv 的兄弟节点，绝对定位会压到窗口最后一行的「已发货」上， 实测两个矩形重叠；改为窗口下方正常流的一行小字注记。 */ .pv-sample{position:static;display:block;text-align:right;margin-top:8px; font-size:10px;letter-spacing:.06em;padding:0;border-radius:0; color:rgba(255,255,255,.58);background:none;border:0} /* 品牌点缀只留纯图形，不再重复完整文字标 */ .pv-mark{position:absolute;left:12px;bottom:9px;width:26px;height:26px;opacity:.92} /* ── 14.3 01 区演示卡：恢复「应用截图」读法 ─────────────────────────────── app.css 用一组 !important 把渐变瓦片压成纯白（.st-site .showcase .scr 权重 0,4,0），同时把 .ui 骨架条与 .notch 设为 display:none，于是半透明的内容条 彻底消失，卡片只剩一个空白盒子。这里以更高权重（加 .ph 一级）恢复深色瓦片， 并把品牌图标放进白色圆角「应用图标」里——既保住彩色图标在白底上的可读性， 又让卡片重新读作一扇正在运行的界面。notch 属手机隐喻，与桌面窗口不一致， 维持隐藏。 */ .st-site .showcase .ph .scr[class]{ background:linear-gradient(160deg,var(--ws-navy-900),var(--ws-navy-800))!important; border:1px solid rgba(201,168,106,.2)!important} .st-site .showcase .ph .scr .pic{padding:0!important;width:46px;height:46px;flex:none; border-radius:12px;background:#fff!important;color:var(--ws-navy)!important; display:flex!important;align-items:center;justify-content:center;margin-top:0; box-shadow:0 6px 16px rgba(9,18,36,.4);filter:none!important} .st-site .showcase .ph .scr .pic .ico{width:26px!important;height:26px!important} .st-site .showcase .ph .scr .ui{display:flex!important;bottom:12px;left:14px;right:14px;gap:5px} .st-site .showcase .ph .scr .ui i{background:rgba(255,255,255,.16)!important} .st-site .showcase .ph .scr .ui i:last-child{width:58%} .st-site .showcase .ph .scr .play{position:absolute;top:9px;right:9px; display:inline-flex;align-items:center;gap:4px;font-size:9.5px;letter-spacing:.04em; padding:3px 8px;border-radius:100px;color:var(--ws-teal-100); background:rgba(69,196,180,.22);border:1px solid rgba(69,196,180,.34)} .st-site .showcase .ph .scr .play i{width:5px;height:5px;border-radius:50%;background:var(--ws-teal-400)} .ph:hover .scr{transform:translateY(-5px)} /* ── 14.4 预览窗内的品牌点缀 ────────────────────────────────────────────── app.css 的 .st-hero-art img{width:100%;max-width:300px;animation:v5-float} 是给原先那张大插画写的，会把 26px 的小标志撑满整扇窗。需同级压回并停掉浮动。 */ .st-hero-art .pv-mark{width:26px!important;height:26px!important;max-width:none!important; position:absolute;left:12px;bottom:9px;opacity:.92;border-radius:50%; animation:none!important;filter:none!important;box-shadow:none!important} /* ── 14.5 对比表第三列的骑缝徽标 ────────────────────────────────────────── .c.win 的 overflow:hidden 来自 app.css 的 .st-site .cmp .c（权重 0,3,0）， 而 .wintag 是 position:absolute; top:-10px，于是「为什么选我们」被自己的 父级裁掉半截。选择器需同为 .st-site .cmp .c 才能凭后出现顺序压过它。 */ .st-site .cmp .c{overflow:visible} /* ══════════════════════════════════════════════════════════════════════════ 15. 图标瓦片统一（参照 api.wenshu88.cn 的图标搭配规则，色值仍取 VI 令牌） ────────────────────────────────────────────────────────────────────────── 实测主站跨区块并存 4 种底色处理（白 / 墨蓝→淡青渐变 / 淡青 / 暖金实底）、 6 种尺寸（24–46px）、4 种圆角（7/8/9/12px）。参照站只有一条规则： 同一圆角、品牌色低透明度底、图标 ≈ 瓦片 0.5 倍。这里收敛为三档尺寸 + 明/暗两种承托面变体。 关闭按钮（.sheet-x/.wx-x/.bp-x）、回到顶部、客服头像是操作件，正圆是正确的， 不并入本系统。 */ :root{--ws-tile-lg:44px; --ws-tile-md:34px; --ws-tile-sm:26px} /* 按角色分两种变体，而不是把所有图标压成同一种颜色： accent 强调瓦片 = 深色底 + 白图标（8 个定制方向、演示卡应用图标） soft 辅助瓦片 = 淡青底 + 深青图标（资质、认证、提示条等元信息） 统一的是圆角与尺寸档位。app.css 里圆角有 12/9/8/7px 四种，先收敛。 选择器需与 app.css 同级（.st-site .grid .g .ic[class]、.cred-i .cred-ic、 .bmprompt.st-site .bp-ic）才能凭后出现顺序取胜，不必再加 !important。 */ .st-site .grid .g .ic[class]{width:var(--ws-tile-lg);height:var(--ws-tile-lg);border-radius:var(--ws-r-md)} .st-site .grid .g .ic[class] .ico{width:22px;height:22px} .st-site .showcase .ph .scr .pic{width:var(--ws-tile-lg);height:var(--ws-tile-lg);border-radius:var(--ws-r-md)} .st-site .showcase .ph .scr .pic svg{width:22px;height:22px} .cred-i .cred-ic{width:var(--ws-tile-sm);height:var(--ws-tile-sm);border-radius:var(--ws-r-md); background:var(--ws-teal-050);color:var(--ws-teal-700);box-shadow:none} .cred-i .cred-ic .ico{width:13px;height:13px} .bmprompt.st-site .bp-ic{border-radius:var(--ws-r-md);background:var(--ws-teal-050)} .bmprompt.st-site .bp-ic .ico{color:var(--ws-teal-700)} .verif .v-ic{width:var(--ws-tile-sm);height:var(--ws-tile-sm);border-radius:var(--ws-r-md); background:var(--ws-teal-050);color:var(--ws-teal-700)} .verif .v-ic svg{width:13px;height:13px} .safe > div > span{width:var(--ws-tile-sm);height:var(--ws-tile-sm);border-radius:var(--ws-r-md); background:var(--ws-teal-050);color:var(--ws-teal-700)} .safe > div > span svg{width:13px;height:13px} /* 语义色只留在图标本身，瓦片底色一律淡青，避免「每个图标一种背景」 */ .verif .v-ic.v-steel svg{color:var(--ws-g500)} .verif .v-ic.v-orange svg{color:var(--ws-gold-700)} /* 修正：提示条关闭按钮是灰色图标压深青底（实测约 1.9:1，几乎看不见）。 图标不是文本节点，对比度审计抓不到，这里显式给白。 */ .bmprompt .bp-x{color:#fff!important} .bmprompt .bp-x svg{color:#fff!important;stroke:#fff!important} /* ══════════════════════════════════════════════════════════════════════════ 16. 悬停反馈统一（参照 api 站的四通道配方） ────────────────────────────────────────────────────────────────────────── 实测主站有 82 条 :hover 规则、34 条命中卡片容器：.card:hover / .pcard:hover 被定义了 5 次且互相冲突，上浮量 -1/-2/-3/-5px 不等，描边在 --color-primary / --color-teal / --ws-teal-100 之间摇摆， 其中一条（.hero.st-hero ~ .showcase .ph:hover）在悬停时反而把阴影改小。 参照站只有一条配方：表面提亮 + 描边染品牌色 + 光晕 + 上浮 3px。 这里同样只留一条配方，并显式压过那条反向规则。 时间轴 .mile .m、对比表列 .cmp .c 不是可点元素，不套此配方。 */ :root{--ws-glow-teal:0 0 26px rgba(42,157,143,.16)} .st-site .ph:hover, .st-site .card:hover, .st-site .pcard:hover, .st-site .grid .g:hover, .st-site .quote .q:hover, .st-site .opt:hover, .st-site .tier:hover, .st-site .pd-rel-card:hover{ transform:translateY(-3px)!important; border-color:var(--ws-teal)!important; box-shadow:var(--ws-sh-3), var(--ws-glow-teal)!important} /* 图标瓦片跟随轻微放大，作为第五通道（仅图标本身，不影响布局） */ .st-site .ph:hover .pic, .st-site .grid .g:hover .ic{transform:scale(1.06)!important} /* ══════════════════════════════════════════════════════════════════════════ 17. 首页成品索引 .cat-index ────────────────────────────────────────────────────────────────────────── 历史上「方案 7.1」把首页的 8 张产品卡砍成一个"前往产品货架"按钮， 导致首页对 26 个产品页的直达锚点数 = 0（产品网格 #pgrid 连同容器一起被删， 渲染它的 28KB JS 因 if(!grid)return 变成死代码）。 而首页恰是百度 9 天里唯一抓过的页面 —— 所有产品页因此变成两跳之外。 这里把 26 套按品类还原成真实 ，一次修复抓取路径。 配色全部取 VI 令牌；.ci-n 原想用暖金压米色，实测仅 4.15:1 不达标，改墨蓝。 */ /* 排版取「目录」式：每个品类自成一行（标签列 + 链接流）， 不用等分栅格 —— 3 项的小组和 8 项的大组并排时，行高被最长组撑起来， 1440 下实测留下 300px 见方空洞。行式排布在任何宽度都不产生空洞。 */ .cat-index{margin-top:18px} .ci-lead{margin:0 0 6px;font-size:13.5px;line-height:1.6;color:var(--ws-g500)} .ci-groups{display:block} .ci-g{display:grid;grid-template-columns:104px minmax(0,1fr);gap:0 22px; align-items:baseline;padding:11px 0;border-top:1px solid var(--ws-gold-100)} .ci-g:first-child{border-top:0;padding-top:3px} .ci-h{display:flex;align-items:center;gap:8px;margin:0; font-family:var(--ws-serif);font-size:15px;font-weight:600;color:var(--ws-navy);letter-spacing:.01em} .ci-n{font-family:var(--ws-sans);font-size:11px;font-weight:600;color:var(--ws-navy); background:var(--ws-gold-100);border-radius:var(--ws-r-pill);padding:1px 7px} .ci-ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:3px} .ci-ul li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .ci-ul li:not(:last-child)::after{content:"·";margin:0 10px;color:var(--ws-g200);font-weight:700} .ci-ul a{padding:2px 0;font-size:13.5px;line-height:1.55; color:var(--ws-teal-700)!important;text-decoration:none} .ci-ul a:hover{color:var(--ws-navy)!important;text-decoration:underline} .ci-live{flex:none;display:inline-flex;align-items:center;gap:4px; font-size:10px;letter-spacing:.02em;padding:1px 6px;border-radius:var(--ws-r-pill); color:var(--ws-teal-700);background:var(--ws-teal-050)} .ci-live i{width:5px;height:5px;border-radius:50%;background:var(--ws-teal)} .ci-more{margin:20px 0 0;text-align:center} @media (max-width:899px){.ci-g{grid-template-columns:92px minmax(0,1fr);gap:0 14px}} @media (max-width:679px){ .ci-g{grid-template-columns:1fr;gap:5px;padding:13px 0} .ci-ul a{font-size:13px} /* 窄屏每行只容 2~3 项，行尾残留的间隔点像错别字，改用间距分栏 */ .ci-ul{column-gap:14px} .ci-ul li:not(:last-child)::after{content:none} } /* ══════════════════════════════════════════════════════════════════════════ 18. 产品货架静态化 ────────────────────────────────────────────────────────────────────────── 26 张 .pcard 改为直接写在 HTML 里（百度不执行 JS，空容器 = 0 直达锚点）， 筛选按钮由重建 innerHTML 改为切换 .pf-off 显隐。 */ .pgrid .pf-off{display:none!important} /* ══════════════════════════════════════════════════════════════════════════ 19. 控件归一：按钮 / 图标瓦片 / chip ────────────────────────────────────────────────────────────────────────── 1440 下对 7 个页面模板实测同一语义角色的计算值，分歧如下（全部为真实缺陷， 不是按背景有意为之）： · 按钮 3 种形态：.st-btn 在首页 6px/50px/600，在产品页 999px 胶囊/44px/500； .cta 又自成 8px/46~50px。同名组件跨页不一致最伤「像一个产品」。 · 图标瓦片 5 种：.pic/.ic 44 r10，.pi 36 r6，.bp-ic 34 r10，.cred-ic 26 r10。 · chip 4 种：.st-tag r6 pad5/12、.tags span r6 pad2/7、.ci-live/.ci-n 胶囊、 .pd-rel-p 无圆角；且 .tags span 用了 #1F3A5F / #E5E7EB 两个 VI 之外的色。 静止态一律去阴影：VI 的层次靠色块与细线，浮起只作为悬停反馈（见 16 节）。 */ :root{--ws-r-ctl:8px;--ws-btn-h:48px;--ws-btn-h-sm:38px;--ws-btn-h-xs:32px;--ws-btn-px:24px} /* 卡片圆角此前实测三档：.card/.pcard 8px、.ph 10px、.pd-rel-card/.quote .q 14px。 按「越大的面越大圆角」重排为一条递减标尺：卡片 12 > 瓦片 10 > 控件 8 > chip 6。 */ :root{--ws-r-card:12px} .st-site .card, .st-site .pcard, .st-site .ph, .st-site .quote .q, .st-site .pd-rel-card, .st-site .grid .g, .st-site .opt, .st-site .tier{ border-radius:var(--ws-r-card)!important} /* ── 19.1 按钮：全站一套几何，配色仍归 13.5 节 ─────────────────────────── */ .st-btn, [class*="st-btn-"], a.cta, button.cta, .wx-openbtn, a.go, .ec-btn{ display:flex!important;align-items:center;justify-content:center; min-height:var(--ws-btn-h)!important;padding:0 var(--ws-btn-px)!important; border-radius:var(--ws-r-ctl)!important; font-size:15px!important;font-weight:600!important;line-height:1.3!important; text-align:center;box-shadow:none!important} /* 首屏、收尾区与演示面板内的按钮各有更高优先级规则把圆角钉回 6px / 999px 胶囊， #contact .cta 更是 ID 选择器，必须逐一点名才压得动。 */ .st-site [class*="st-btn-"], .st-site .st-hero .st-btn, .st-site .final .cta, #contact .cta{ border-radius:var(--ws-r-ctl)!important;padding:0 var(--ws-btn-px)!important} /* 产品页页首 h1(.pd-name) 比其余模板多 14px 上边距、少 8px 下边距， 同一层级两套垂直节奏；字号 34 也自成一档。 */ .st-site .pd-head .pd-name{font-size:32px!important;line-height:1.3125!important; margin-top:0!important;margin-bottom:8px!important} .st-btn .ico, a.cta .ico, button.cta .ico{width:16px;height:16px} .st-btn:hover, a.cta:hover, button.cta:hover, .wx-openbtn:hover{box-shadow:var(--ws-sh-2)!important} /* 卡片页脚紧凑按钮（货架 26 张卡 .pbtns）：小一档，圆角取 --ws-r-sm 与 chip 同档 */ .pbtns .btn{display:inline-flex!important;align-items:center;justify-content:center; min-height:var(--ws-btn-h-xs)!important;padding:0 12px!important; border-radius:var(--ws-r-sm)!important;font-size:12.5px!important;font-weight:600!important; line-height:1.2!important;box-shadow:none!important} /* 底部常驻条与导航按钮：中一档 */ .st-site .dock .d-buy, .st-site .dock .d-demo, header.nav .navcta{ min-height:var(--ws-btn-h-sm)!important;padding:0 16px!important; border-radius:var(--ws-r-ctl)!important;font-size:14px!important;font-weight:600!important; box-shadow:none!important} /* ── 19.2 图标瓦片：统一到 --ws-tile-* 三档 + r-md，静止无阴影 ─────────── */ .st-site .pcard .pi[class]{width:var(--ws-tile-md)!important;height:var(--ws-tile-md)!important; border-radius:var(--ws-r-md)!important;box-shadow:none!important;margin-bottom:10px} .st-site .pcard .pi .ico{width:18px;height:18px} .st-site .cred-i .cred-ic, .st-site .grid .g .ic[class], .st-site .pic[class]{box-shadow:none!important} /* ── 19.3 chip：一档几何；配色分浅底/深底两种，全部落回 VI 令牌 ────────── */ .tags span, .st-tag{display:inline-flex;align-items:center;gap:5px; font-size:11.5px!important;font-weight:500!important;line-height:1.5; padding:2px 8px!important;border-radius:var(--ws-r-sm)!important;box-shadow:none!important} .st-site .tags span{color:var(--ws-navy)!important;background:var(--ws-teal-050)!important; border:1px solid var(--ws-navy-050)!important} .ci-live, .ci-n{font-size:11px!important;padding:1px 7px!important;line-height:1.5} .pd-rel-p{font-size:12px!important;color:var(--ws-g500)!important} /* ══════════════════════════════════════════════════════════════════════════ 20. 内容层 .art —— 指南长文的排版 ────────────────────────────────────────────────────────────────────────── blog.html 原先把字号/行高/颜色全写成 inline style，h2 实测 15px/800， 与站内其余模板的 32px/600 是两套。长文要成集群，先把正文排版收成类， 新文章与 blog.html 共用同一套。 */ .st-site .art{max-width:820px} .st-site .art h2{font-family:var(--ws-serif);font-size:22px;line-height:1.5;font-weight:600; letter-spacing:.01em;color:var(--ws-navy);margin:30px 0 12px} .st-site .art h2:first-child{margin-top:0} .st-site .art h3{font-size:15.5px;line-height:1.5;font-weight:600;color:var(--ws-navy);margin:22px 0 8px} .st-site .art p{font-size:15px;line-height:1.92;color:var(--ws-g900);margin:0 0 14px} .st-site .art .lead{font-size:16px;line-height:1.85;color:var(--ws-navy);margin-bottom:20px} .st-site .art ul,.st-site .art ol{margin:0 0 16px;padding-left:22px} .st-site .art li{font-size:15px;line-height:1.85;color:var(--ws-g900);margin-bottom:7px} .st-site .art b,.st-site .art strong{color:var(--ws-navy)} /* 事实表：生成式引擎摘引密度最高的结构 */ .st-site .art table{width:100%;border-collapse:collapse;margin:2px 0 18px;font-size:14px} .st-site .art caption{caption-side:top;text-align:left;font-size:12px;letter-spacing:.05em; color:var(--ws-g500);padding:0 0 8px} .st-site .art th,.st-site .art td{text-align:left;padding:9px 12px;vertical-align:top;line-height:1.65; border-bottom:1px solid var(--ws-line)} .st-site .art thead th{font-size:12.5px;font-weight:600;color:var(--ws-navy); background:var(--ws-g050);border-bottom:1px solid var(--ws-g200)} .st-site .art tbody th{font-weight:600;color:var(--ws-navy)} .st-site .art .num{font-family:var(--ws-num);font-variant-numeric:tabular-nums;white-space:nowrap} /* 一句可独立成引的结论 */ .st-site .art .keyfact{border-left:3px solid var(--ws-teal);background:var(--ws-teal-050); border-radius:0 var(--ws-r-card) var(--ws-r-card) 0;padding:13px 16px;margin:0 0 20px} .st-site .art .keyfact p{margin:0;font-size:14.5px;line-height:1.78;color:var(--ws-navy)} .st-site .art .qa{margin:0 0 18px} .st-site .art .qa dt{font-size:15px;font-weight:600;color:var(--ws-navy);margin:0 0 5px} .st-site .art .qa dd{margin:0 0 15px;font-size:14.5px;line-height:1.85;color:var(--ws-g900)} .st-site .art .toc{border:1px solid var(--ws-line);border-radius:var(--ws-r-card); padding:14px 18px;margin:0 0 26px;background:#fff} .st-site .art .toc b{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--ws-g500);margin:0 0 8px} .st-site .art .toc ol{margin:0;padding-left:20px} .st-site .art .toc li{font-size:14px;margin-bottom:4px} .st-site .art .src{font-size:12.5px;line-height:1.8;color:var(--ws-g500); border-top:1px solid var(--ws-line);padding-top:12px;margin-top:24px} .st-site .art .src a{color:var(--ws-teal-700)} .st-site .art .meta{font-size:12.5px;color:var(--ws-g500);margin:10px 0 0;letter-spacing:.02em} /* ── 20.1 长文取「正文衬线 / 数据无衬线」的编辑体例，写成显式规则而非继承 ── */ .st-site .art p, .st-site .art li, .st-site .art dt, .st-site .art dd{font-family:var(--ws-serif)} .st-site .art table, .st-site .art .toc, .st-site .art .src, .st-site .art .meta{font-family:var(--ws-sans)} /* 相关文章卡：与 .grid .g 同一套几何，但去掉图标位 */ .st-site .art .rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:10px;margin-top:4px} .st-site .art .rel a{display:flex;flex-direction:column;gap:4px;padding:12px 14px; border:1px solid var(--ws-line);border-radius:var(--ws-r-card);background:#fff;text-decoration:none} .st-site .art .rel b{font-family:var(--ws-serif);font-size:14.5px;font-weight:600;color:var(--ws-navy)} .st-site .art .rel span{font-size:12px;line-height:1.6;color:var(--ws-g500)} .st-site .art .rel a:hover{border-color:var(--ws-teal);box-shadow:var(--ws-sh-1)} /* 产品页「延伸阅读」行：与卡片同一圆角档，避免又造一种新按钮形状 */ .st-site .pd-read-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .st-site .pd-read-row a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px; border:1px solid var(--ws-line);border-radius:var(--ws-r-card);background:#fff; font-size:13.5px;font-weight:600;color:var(--ws-navy)!important;text-decoration:none} .st-site .pd-read-row a .ico{width:14px;height:14px} .st-site .pd-read-row a:hover{border-color:var(--ws-teal);color:var(--ws-teal-700)!important; box-shadow:var(--ws-sh-1)} /* ── 20.2 blog.html：它是站内唯一还带私有排版的内容页（h2 实测 15px/800、 正文 12.5px 全写成 inline style）。给它一个 .guide-page 作用域， 用 !important 压回 .art 同一套，而不是再抄一遍样式。 */ .st-site.guide-page .card > h2.form-h{font-family:var(--ws-serif)!important;font-size:22px!important; line-height:1.5!important;font-weight:600!important;letter-spacing:.01em!important; color:var(--ws-navy)!important;margin:0 0 12px!important} .st-site.guide-page .card > p{font-family:var(--ws-serif)!important;font-size:15px!important; line-height:1.92!important;color:var(--ws-g900)!important} .st-site.guide-page .card > p[style*="11.5px"],.st-site.guide-page .card > p[style*="12px"]{ font-size:13px!important;line-height:1.8!important;color:var(--ws-g500)!important} /* 文章内多列表格在 390 下会撑破视口（实测 SECTION 横向溢出 375→390+）。 用滚动容器包住，不压字号也不改 display 破坏表格布局。 */ .st-site .art .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch; margin:2px 0 18px;border:1px solid var(--ws-line);border-radius:var(--ws-r-card)} .st-site .art .tscroll table{margin:0;min-width:520px} .st-site .art .tscroll caption{padding:11px 14px 0} .st-site .art .tscroll th,.st-site .art .tscroll td{padding:9px 14px} /* ── 21. 页脚最底行：链接段与版权段分开排版 ───────────────────────── 移动端原先整段居中折行，会在第二行行首留下一个孤立的「·」。 拆成 .fn-l / .fn-c 两段后由 flex 控制：桌面同行、窄屏各占一行。 */ .foot .f-note{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline; column-gap:12px;row-gap:6px} .foot .f-note .fn-l{white-space:nowrap} @media (max-width:679px){ .foot .f-note{flex-direction:column;row-gap:8px} } /* ---- 货架/演示中心的真截图（截图由 refactor/capture_shots.mjs 抓，make_thumbs.py 压） ---- */ .pshot,.dm-shot{width:100%;height:268px;object-fit:cover;object-position:top center; border-radius:10px;border:1px solid var(--ws-line,#E5E7EB);display:block;background:#F4F1EA; margin:2px 0 10px} .dm-shot{margin:0} @media (min-width:860px){.pshot{height:300px}.dm-shot{height:312px}} .pshot:hover,.dm-shot:hover{object-position:top center} .ws-opsbox{margin-top:26px;border:1px solid var(--ws-line,#E5E7EB);border-radius:14px;background:#fff;padding:20px} .ws-opsbox__grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start} @media (min-width:860px){.ws-opsbox__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}} .ws-opsbox img{width:100%;height:auto;border-radius:10px;border:1px solid var(--ws-line,#E5E7EB);display:block} .ws-mods{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0;padding:0;list-style:none} .ws-mods li{font-size:12.5px;padding:4px 9px;border-radius:6px;background:var(--ws-teal-050,#EAF6F3); color:var(--ws-navy,#182A4A);border:1px solid rgba(31,122,111,.2)} .ws-opsnote{font-size:12.5px;color:#6B7280;line-height:1.7;margin:10px 0 0} /* 三按钮（详情/演示/后台）后卡尾会挤：允许换行、价格锁一行 */ .st-site .pcard .pfoot{flex-wrap:wrap;row-gap:8px} .st-site .pcard .price{white-space:nowrap;flex:0 0 auto} .st-site .pcard .pbtns{flex-wrap:wrap;gap:6px;justify-content:flex-end} .st-site .pcard .pbtns .btn{padding-left:11px;padding-right:11px} /* ── 14.5 桌面端(1440)体检实测的三处 ──────────────────────────────── */ /* 「添加到桌面」提示按钮 33px 高，够不到控件 40px 下限 */ .bp-ok{min-height:40px;padding:0 18px} /* 首屏「界面示意 · 示例数据」角标 10px，是全站最后一处小字 */ .pv-sample{font-size:12px} /* 「在线可玩」用青 700 压深蓝卡底只有 3.17:1；改青 400（同色系的点亮态） */ .phshot-wrap .play{color:var(--ws-teal-400,#45C4B4)} /* 货架卡标题链接 20px 高，够不到 WCAG 2.5.8 的 24x24（桌面端体检实测） */ a.pname{display:inline-block;padding:3px 0} /* ═══════════════ V2 深色层 ═══════════════ 令牌取自姊妹站 api.wenshu88.cn 的实测计算样式（同一套品牌色的深色表达）。 两个必须知道的坑（都是实测踩出来的）： ① app.css 里有一批 `background:#fff !important`（.card/.foot/.quote .q）。 !important 压过普通声明且与加载顺序无关，所以本层的覆盖必须同时带 !important 且用 `body ` 前缀抬高一级优先级，否则根本不生效。 ② --ws-navy-900 同时是「页脚底色」和「青绿按钮上的文字色」，两者都要深色， 不能为了文字可读性把它调亮——上一版就是这么把页脚刷成白色的。 删除本段即整体回退 V1。 */ :root{ color-scheme: dark; /* 面 */ --ws-page:#0B1526; --ws-card:#132038; --ws-card-hi:#1A2D4D; --ws-surface:#16263F; --ws-glass:rgba(11,21,38,.82); --ws-hairline:rgba(255,255,255,.08); --ws-g050:#0B1526; --ws-g100:#0F1B2F; --ws-navy-050:#132038; --ws-g200:rgba(255,255,255,.10); --ws-g300:rgba(255,255,255,.16); --ws-line:1px solid rgba(255,255,255,.08); /* 墨蓝系保持深色：它们被当背景用（页脚/按钮文字/dock） */ --ws-navy:#182A4A; --ws-navy-800:#1F3A5F; --ws-navy-900:#0A1322; /* 文字：V1 的「墨蓝标题 + 灰正文」在深底上换成素白系 */ --ws-ink:#F0F4FA; --ws-ink-2:rgba(240,244,250,.72); --ws-ink-3:rgba(240,244,250,.56); --ws-g900:#F0F4FA; --ws-g800:rgba(240,244,250,.88); --ws-g700:rgba(240,244,250,.80); --ws-g600:rgba(240,244,250,.72); --ws-g500:rgba(240,244,250,.58); --ws-g400:rgba(240,244,250,.46); /* 强调色：文字用途要给对比度，按钮底色仍用原深青 */ --ws-teal:#2A9D8F; --ws-teal-400:#45C4B4; --ws-teal-700:#1F7A6F; --ws-teal-ink:#6FDCCB; --ws-teal-100:rgba(42,157,143,.30); --ws-teal-050:rgba(42,157,143,.12); --ws-gold:#C9A86A; --ws-gold-700:#8A6320; --ws-gold-ink:#DCBE84; --ws-gold-100:rgba(201,168,106,.24); --ws-sh-2:0 8px 28px rgba(0,0,0,.34); --ws-sh-3:0 18px 52px rgba(0,0,0,.46); --ws-glow-teal:0 0 40px rgba(42,157,143,.18); --ws-glow-gold:0 0 24px rgba(201,168,106,.12); --ws-font-display:"Noto Serif SC","Source Han Serif SC","STZhongsong","SimSun",serif; --ws-font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --ws-font-num:"DIN Alternate","Outfit","Bahnschrift","Segoe UI",sans-serif; /* app.css 的 !important 规则引用的历史别名，一并改到深色 */ /* app.css 的 --st-* 一族：brand.css 在其之后加载，这里定义即覆盖。 分区标题走的是 .st-site .wrap section .h-title{color:var(--st-ink)!important}， 优先级 0,3,1 堆选择器压不住，改令牌才是对的。 */ --st-ink:#F0F4FA; --st-ink-2:rgba(240,244,250,.78); --st-ink-mute:rgba(240,244,250,.56); --st-canvas:#132038; --st-canvas-soft:#0F1B2F; --st-hairline:rgba(255,255,255,.10); --st-cream:rgba(201,168,106,.22); --st-cinnabar-bg:#0F1B2F; --st-cyan-bg:rgba(42,157,143,.12); --st-gold-bg:rgba(201,168,106,.12); --card:#132038; --color-border:rgba(255,255,255,.08); --line:rgba(255,255,255,.10); --color-primary-dark:#0A1322; --st-dark-900:#0A1322; } /* —— 压过 app.css 的 #fff !important：必须 !important + body 前缀抬一级 —— */ body{background:var(--ws-page)!important;color:var(--ws-ink)!important;font-family:var(--ws-font-body);} body .card,body .pcard,body .box,body .ti,body .feat,body .compare-col,body .pc, body .step,body .q,body .sc-entry,body .st-rev-card,body .wxmodal,body .sheet-head, body .p,body .c,body .note,body .rv-card,body .a-card,body .g, body .showcase,body a.ph,body .ph,body .sc-row,body .st-sla,body .band{ background:var(--ws-card)!important;color:var(--ws-ink)!important; border:1px solid var(--ws-hairline)!important;border-radius:16px; } body .foot,body footer,body .site-footer{background:var(--ws-navy-900)!important;color:var(--ws-ink-2)!important;} body .dock{background:var(--ws-glass)!important;backdrop-filter:blur(14px);} body .ptag{background:var(--ws-surface)!important;color:var(--ws-gold-ink)!important;} body .q.featured,body .q.picked{background:var(--ws-card-hi)!important;} body textarea,body input[type=text],body input[type=tel],body select{ background:#0F1B2F!important;color:var(--ws-ink)!important;border-color:var(--ws-hairline)!important;} body textarea::placeholder,body input::placeholder{color:var(--ws-ink-3)!important;} header.nav,.site-head{background:var(--ws-glass)!important;backdrop-filter:blur(14px) saturate(1.2);} /* —— 文字与标题：衬线显示体是这一版的性格所在 —— */ h1,h2,h3,h4,.h-title,.ti-t{color:var(--ws-ink)!important;font-family:var(--ws-font-display)!important;letter-spacing:-.01em;} .eyebrow{font-family:var(--ws-font-num)!important;color:var(--ws-gold-ink)!important;letter-spacing:.14em;} .price,.num,.stat,.cap{font-family:var(--ws-font-num);} a{color:var(--ws-teal-ink);} p,li,td,th,dd,dt,summary,label,span{color:inherit;} .card p,.card li{color:var(--ws-ink-2);} ::selection{background:rgba(42,157,143,.34);} .hero-mark{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px; padding:26px 18px;filter:drop-shadow(0 18px 46px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(42,157,143,.18));} .hero-mark img{width:min(100%,560px);height:auto;} .hero-mark-cap{font-family:var(--ws-font-num);font-size:12px;letter-spacing:.42em;color:var(--ws-gold-ink);text-transform:uppercase;} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}} /* —— 分区标题：app.css 的 `.st-site .h-title{color:var(--ws-navy)!important}` 优先级更高， 必须用 body 前缀抬一级才压得住（实测标题在深底上几乎看不见）—— */ body h1,body h2,body h3,body h4,body .h-title,body .sc-head h2,body .ti-t, body .st-site .h-title,body .st-site h2,body .st-site h3,body .sec-title{ color:var(--ws-ink)!important;font-family:var(--ws-font-display)!important;} body .h-title em,body h2 em,body .sc-head em{color:var(--ws-teal-ink)!important;font-style:normal;} body .sc-head span,body .h-sub,body .sec-sub{color:var(--ws-ink-2)!important;} body .card *,body .ph *,body .q *,body .step *,body .c *{color:var(--ws-ink-2);} body .card b,body .card strong,body .ph .pn,body .q b,body .c b,body .st-rev-card b{color:var(--ws-ink)!important;} body .pn{color:var(--ws-ink)!important;} body .pl,body .pd,body .desc{color:var(--ws-ink-2)!important;} /* --st-ink 一族在 .st-site 这个类作用域里被重新定义过，:root 的覆盖会被元素级压掉， 所以必须同作用域再声明一遍（实测标题仍是 #182A4A 就是这个原因） */ .st-site, body .st-site, .st-site .wrap{ --st-ink:#F0F4FA; --st-ink-2:rgba(240,244,250,.78); --st-ink-mute:rgba(240,244,250,.56); --st-canvas:#132038; --st-canvas-soft:#0F1B2F; --st-hairline:rgba(255,255,255,.10); --st-cream:rgba(201,168,106,.22); --st-cinnabar-bg:#0F1B2F; --st-cyan-bg:rgba(42,157,143,.12); --st-gold-bg:rgba(201,168,106,.12); --st-dark-900:#0A1322; } /* 分区标题的最终修法：直接抬到 0,4,1 压过 .st-site .wrap section .h-title。 （:root 与 .st-site 两级令牌覆盖都试过，实测仍被这条 !important 压住） */ body .st-site .wrap section .h-title, body .st-site .wrap section h2, body .st-site .st-rev h2, body .st-site .st-rev h3, body .st-site h2, body .st-site h3{color:var(--ws-ink)!important;} body .st-site .wrap section .h-title em, body .st-site h2 em, body .st-site h3 em{color:var(--ws-teal-ink)!important;} body .st-site .h-sub, body .st-site .sec-sub, body .st-site .sc-head span{color:var(--ws-ink-2)!important;} /* ═══════════════ 2026-10-17 首页 IA 收拢 ═══════════════ */ /* 04 · 免费评估 CTA 带 */ body .st-site .sec-cta{ background: radial-gradient(120% 140% at 50% 0%, rgba(42,157,143,.14), rgba(42,157,143,0) 60%), linear-gradient(180deg, rgba(10,19,34,0) 0%, rgba(20,42,72,.62) 34%, rgba(20,42,72,.62) 100%); border-top:1px solid rgba(201,168,106,.20); padding:46px 0 42px; } body .st-site .sec-cta .sec-cta-in{max-width:880px;margin:0 auto;text-align:center} body .st-site .sec-cta .h-title{margin:0 0 8px;font-size:clamp(21px,3.1vw,30px)} body .st-site .sec-cta .h-sub{margin:0 auto 20px;max-width:640px} body .st-site .sec-cta .st-cta-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 14px} body .st-site .sec-cta .safe{max-width:660px;margin:0 auto;text-align:left;font-size:12.5px;line-height:1.75} /* 子页组件的深色面：交付档位卡 / 资质行 / 保障 chip */ body .st-site .st-plans{gap:14px} body .st-site .st-plan{background:var(--ws-card)!important;border:1px solid var(--st-hairline)!important;color:var(--ws-ink)!important} body .st-site .st-plan.feat{border-color:rgba(201,168,106,.42)!important;background:linear-gradient(180deg,rgba(201,168,106,.10),rgba(19,32,56,.9))!important} body .st-site .st-plan-name{color:var(--ws-ink)!important} body .st-site .st-plan-price{color:var(--st-gold-solid)!important} body .st-site .st-plan-sub,body .st-site .st-plan-feats li{color:var(--ws-ink-2)!important} body .st-site .st-plan-feats li:before{color:var(--ws-teal-ink)!important} body .st-site .st-plan-tag{background:var(--st-gold-solid)!important;color:#0B1526!important} body .st-site .cred-i,body .st-site .verif>div{color:var(--ws-ink-2)!important} body .st-site .cred-i b,body .st-site .verif b{color:var(--ws-ink)!important} body .st-site .safe>div{background:rgba(42,157,143,.10)!important;border-color:rgba(42,157,143,.30)!important;color:var(--ws-ink)!important} body .st-site .form-h{color:var(--st-gold-solid)!important} body .st-site .pbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} /* 首屏时效条：V2 层只给了它底色，这里补回它自己的排版 */ body .st-hero .st-sla{ margin-top:18px;display:inline-block; font-size:12.5px;line-height:1.6;letter-spacing:.01em; color:var(--ws-ink-2); padding:7px 14px;border:1px solid rgba(201,168,106,.26);border-radius:var(--st-pill); background:rgba(19,32,56,.72)!important; } /* 推荐档标签是 absolute;top:-11px 挂在卡片上方的；.st-plans 紧跟 h-sub 时 会把小节副标题压掉一行（delivery.html 实测）。给卡片留出悬挂位。 */ body .st-site .st-plans{margin-top:26px} /* ═════════════════ V2 补全层（2026-10-17 三端体检）═════════════════ */ /* A0 整页还是浅底的三页 */ body .page.st-site, body div.page.st-site{background:var(--ws-page)!important;color:var(--ws-ink)!important} /* A1 体检列出的白/米色容器，统一翻成深色卡片面 */ body .st-site :is( .card, .box, .notice, .note, .toc, .tier, .quote, details, summary, table, th, td, table.ws-env-t, table.ws-cmp, .ws-cmp-wrap, .ws-terms, .ws-opsbox, .ws-prep, .ws-hint, .pd-feat, .pd-spec, .pd-rel-card, .pd-rel-grid, .pd-deliver, .pd-sec, .pd-head, .dm-card, .dm-note, .dm-wrap, .dm-shot, .qcard, .price-box, .pq-frame, .typeswitch, .pay-head, .pay-bar, .pay-note, .sheet-body, .sumbox, #WS_FLOAT_BAR, #wsDemoNote, #wsPayTerms, #specificCard, #tierNote, .art, .form-h, .field-h, .step, .mile, .path .p ){ background-color:var(--ws-card)!important; color:var(--ws-ink)!important; border-color:var(--ws-hairline)!important; } body .st-site :is(th, thead th){background-color:var(--ws-surface)!important} body .st-site .note.navybg, body .st-site p.note.navybg, body .st-site .wx-g-tag, body .st-site .dm-badge{ background:rgba(42,157,143,.10)!important;color:var(--ws-teal-ink)!important; border:1px solid rgba(42,157,143,.26)!important; } body .st-site .price-box{background:rgba(201,168,106,.10)!important;border:1px solid rgba(201,168,106,.30)!important} body .st-site .typeswitch{background:rgba(11,21,38,.60)!important} body .st-site :is(code, pre){ background:rgba(11,21,38,.72)!important;color:var(--ws-teal-ink)!important; border:1px solid var(--ws-hairline)!important; } /* A2 表单控件 */ body .st-site :is(input, textarea, select){ background:rgba(11,21,38,.72)!important;color:var(--ws-ink)!important; border:1px solid rgba(255,255,255,.16)!important; } body .st-site :is(input, textarea, select):focus-visible{ outline:2px solid var(--ws-teal-400);outline-offset:1px; border-color:var(--ws-teal-400)!important; } body .st-site ::placeholder{color:var(--ws-ink-3)!important;opacity:1} body .st-site option{background:#132038;color:#F0F4FA} body .st-site .chip{ background:rgba(255,255,255,.05)!important;color:var(--ws-ink-2)!important; border-color:rgba(255,255,255,.16)!important; } body .st-site .chip.on{ background:rgba(42,157,143,.22)!important;color:var(--ws-teal-ink)!important; border-color:var(--ws-teal-400)!important; } /* B1 翻色容器里残留的硬编码墨蓝：整片转成浅色 （按钮都是 ，不在下面的元素清单里，不会被牵连） */ body .st-site :is(.card,.cmp,.toc,.art,.quote,.notice,.box,.tier,.ws-terms,.ws-cmp-wrap, .pd-spec,.pd-feat,.dm-card,.qcard,.step,.path .p,.pay-head,.pay-bar,details,table) :is(h1,h2,h3,h4,h5,b,strong,i,em,dt,dd,summary,th,td,li,p,span,div,dd){ color:var(--ws-ink)!important; } body .st-site :is(.card,.cmp,.toc,.art,.notice,.box,.ws-terms,.pd-spec,.dm-card,details,table) :is(.h-sub,.sec-sub,.desc,.pd,.pl,.dm-desc,.dm-note,.ws-hint,.note,.st-rev-sub,.st-rev-txt){ color:var(--ws-ink-2)!important; } /* B2 强调色在深底上重新给一遍，特异性高于 B1（容器+类），按顺序覆盖 */ body .st-site :is(.card,.quote,.art,.notice,.box,.toc,.ws-terms,.pd-spec,.dm-card,details) a:not(.btn):not(.st-btn):not(.cta):not(.d-buy):not(.d-demo){color:var(--ws-teal-ink)!important} body .st-site .quote .q,body .st-site .quote .qgo,body .st-site .lv,body .st-site .q.featured{ color:var(--ws-teal-ink)!important; } body .st-site .price-box .pr,body .st-site .price,body .st-site .p-price, body .st-site .pd-price,body .st-site .st-plan-price,body .st-site .st-rev-num{ color:var(--st-gold-on-dark)!important; } body .st-site .card .pay-tag,body .st-site .pay-head .pay-tag, body .st-site .badge,body .st-site .ptag{ color:#0B1526!important;background:var(--ws-gold)!important;font-weight:700; } body .st-site .dm-link--none,body .st-site .muted,body .st-site small{color:var(--ws-ink-3)!important} body .st-site .h-title em,body .st-site .sc-head em{color:var(--ws-teal-ink)!important} /* C1 三档对照表在平板溢出 */ /* C1 .cmp 是 flex 而非 grid，且子项默认 min-width:auto 不肯收缩， 实测 834 上整段 927px、390 上把整页顶到 1043px。让它可收缩并允许换行。 */ body .st-site .cmp{flex-wrap:wrap} body .st-site .cmp .c{flex:1 1 260px;min-width:0} body .st-site .cmp .c .row{overflow-wrap:anywhere} @media (max-width:1023px){ body .st-site .cmp .c.win{transform:none} } /* C2 已回退：它本来就是 left:0;right:0 全宽，手机上量到 1043px 是 整页被 .cmp 撑宽带出来的症状；我加的 left:50% 反而让 flex 容器塌成 244px。 */ /* C3 已回退：100vw 含滚动条，实测把每页导航左移 7.5px。 assess / pay 页头窄条的问题改由结构层解决（见任务 #75），不用视口单位硬怼。 */ /* C4 页脚 logo 源图是方的，被 120×40 压扁 */ body .st-site img.footer-logo{object-fit:contain!important;height:auto!important;max-width:120px} /* D 触控目标 */ @media (max-width:900px){ body .st-site :is(.ci-ul a,.f-col a,.guide-index a,.pfoot a,.qa a,.pd-rel-card,.qcard,.dm-link,.pname){ display:flex;align-items:center;min-height:44px;padding:6px 2px; } body .st-site :is(.btn,.st-btn,.d-buy,.d-demo,.ec-btn,.pbtns a){ display:inline-flex!important;align-items:center;justify-content:center; min-height:44px!important; /* .pbtns .btn 用的是 !important，不加就被压回去 */ } body .st-site .foot span[data-wx],body .st-site .f-col span[data-wx]{ display:inline-flex;align-items:center;min-height:44px; } body .st-site :is(.ci-ul,.ci-more,.guide-index,.pfoot) a{display:inline-flex;align-items:center;min-height:44px} body .st-site .pgrid .btn{display:inline-flex;align-items:center;justify-content:center} } /* E 字号地板 */ body .st-site .cmp .c .row{font-size:12.5px!important;line-height:1.65} body .st-site .cmp .c h3{font-size:13.5px!important} body .st-site .cmp .c .row b{font-size:12.5px!important;color:var(--ws-ink)!important} body .st-site :is(#wsPayTerms,.ws-prep) li{font-size:12.5px!important;line-height:1.7} body .st-site :is(#step1Label) ,body .st-site .pay-bar b,body .st-site .pay-head b{font-size:12.5px!important} body .st-site small{font-size:12px!important} body .st-site .toc :is(b,a){font-size:12.5px!important} /* 底部固定条（.dock / #WS_FLOAT_BAR / #wsDemoNote）会永久遮住最后一屏， 给挂了条的页面补下内边距，让页脚最后一行能滚到条上方。 */ body:has(.dock), body:has(#WS_FLOAT_BAR), body:has(#wsDemoNote){padding-bottom:86px} /* ═════════ 补全层 第二轮（bgscan 祖先链逐条收口）═════════ */ /* 1+2+3 只翻了面、没翻字的那批容器 */ body .st-site :is(.pcard,.ws-opsbox,#wsDemoNote,.pfilter,.dm-wrap,.pd-read-row,.cred,.verif,.safe,.st-rev,.st-rev-in,.cat-index,.ci-g) :is(h1,h2,h3,h4,h5,b,strong,i,em,span,div,p,li,dd,dt,a){color:var(--ws-ink)!important} body .st-site :is(.pcard,.ws-opsbox,#wsDemoNote,.dm-wrap) :is(.pl,.desc,.note,.muted,.st-rev-txt,small){color:var(--ws-ink-2)!important} body .st-site :is(.pcard .tags span,.pcard .st,.pcard .ptag,.pcount,#pnum){color:var(--ws-ink)!important} body .st-site .ws-opsbox :is(.ws-opsnote,.ws-mods li){color:var(--ws-ink-2)!important} body .st-site [style*="#374151"],body .st-site [style*="374151"]{color:var(--ws-ink-2)!important} /* 3 .pfilter 的筛选按钮整块没翻 */ body .st-site :is(.pfilter,.pfilter button,.pempty,.chipsel){ background:rgba(11,21,38,.60)!important;color:var(--ws-ink)!important; border-color:rgba(255,255,255,.16)!important; } body .st-site .pfilter button.on{ background:rgba(42,157,143,.22)!important;color:var(--ws-teal-ink)!important; border-color:var(--ws-teal-400)!important; } /* 4 直接挂在页面底上的 teal 链接：#1F7A6F 在 #0B1526 上只有 3.54:1 按钮族逐个排除，避免把白字金底/青底的按钮打成青字 */ body .st-site a:not(.st-btn):not(.navcta):not(.cta):not(.d-buy):not(.d-demo):not(.btn-primary):not(.solid):not(.wx-openbtn):not(.chip):not(.on):not(.st-plan-tag){ color:var(--ws-teal-ink)!important; } body .st-site :is(.btn,.ec-btn,.dm-link,.qgo,.go,.ci-more){color:var(--ws-teal-ink)!important} /* 5 金底小牌：文字必须回到深色，特异性带上容器压过 B1 */ body .st-site :is(.path .p,.pay-head,.card,.quote) :is(.ptag,.pay-tag), body .st-site :is(.ptag,.pay-tag,.badge,.st-plan-tag){ color:#0B1526!important;background:var(--ws-gold)!important; } body .st-site .pcard .ptag,body .st-site .pcard .st{ color:var(--ws-teal-ink)!important;background:rgba(42,157,143,.14)!important; } /* 6 字号地板不再要求 .st-site（pay / assess 拿不到） */ body :is(#wsPayTerms,.ws-prep,.pay-note) li{font-size:12.5px!important;line-height:1.7} body :is(#step1Label,.pay-bar b,.pay-head b,.pay-tag){font-size:12.5px!important} body small{font-size:12px!important} body .page.st-site small,body .page:not(.st-site) small{font-size:12px!important} /* ═════════ 第三轮：内联旧色值 / 旧字号的收口 ═════════ */ /* 内联写死的旧体系文字色，在深底上只有 1.1–1.3:1 */ body .st-site [style*="color:var(--st-primary)"], body .st-site [style*="color: var(--st-primary)"], body .st-site [style*="color:#182A4A"], body .st-site [style*="color:#182a4a"], body .st-site [style*="color:var(--navy)"], body .st-site [style*="color:#1F7A6F"], body .st-site [style*="color:#1f7a6f"]{ color:var(--ws-teal-ink)!important; } /* 但金底/青底小牌上的内联色必须保持深色，否则反过来看不清 */ body .st-site :is(.ptag,.pay-tag,.badge,.st-plan-tag,.chip.on)[style*="color"]{ color:#0B1526!important; } /* 字号地板：内联写了 10.x / 11.x 的，一律抬到 12px */ body [style*="font-size:10"], body [style*="font-size: 10"], body [style*="font-size:11"], body [style*="font-size: 11"]{font-size:12px!important} body .pay-note li, body #wsPayTerms li, body .assess-tease li{font-size:12.5px!important} body #step1Label, body .pay-bar b, body .pay-head b{font-size:12.5px!important} /* 复选框 13×13 点不准；手机上放大到 22px 并配 accent-color， 连同它的 label 一起构成 ≥24px 的命中区 */ body .st-site input[type=checkbox], body .st-site input[type=radio]{ width:18px;height:18px;flex:0 0 auto;accent-color:var(--ws-teal); } @media (max-width:900px){ body .st-site input[type=checkbox], body .st-site input[type=radio]{width:22px;height:22px} body .st-site label:has(input[type=checkbox]), body .st-site label:has(input[type=radio]), body .st-site .addon, body .st-site label.addon{ display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 6px } } /* 目录 / 页脚 / 关联阅读这类独立导航链接，行内高度不足 24px */ @media (max-width:900px){ body .st-site :is(.toc a,.ci-ul a,.ci-more,.f-note a,.fn-c a,.pd-read-row a, .h-sub a,.st-rev-sub a,.dm-note a,.pfoot a,.qcard span){ display:inline-flex;align-items:center;min-height:28px;padding:3px 1px; } } /* ═════════ 第四轮收尾 ═════════ */ body .st-site :is(.wintag,.win .wintag,.st-plan-tag){color:#0B1526!important;background:var(--ws-gold)!important} body .st-site .cmp .c.win{background:linear-gradient(160deg,rgba(42,157,143,.16),var(--ws-card))!important} /* pay / assess 的小字号来自类，不是内联 */ body .st-site :is(.pay-note,.pay-bar,.pay-head,#step1Label,.amt,.pay-tag){font-size:12.5px!important} body .st-site :is(#wsPayTerms,.ws-prep,.box,.notice) :is(li,p,small,b){font-size:12.5px!important} body .st-site .form-h small, body .st-site .field-h small, body .st-site .typeswitch small{font-size:12px!important} body .st-site :is(.chipsel,.chip) small{font-size:12px!important} /* 独立成行的辅助链接，行内高度不足 24px */ @media (max-width:900px){ body .st-site :is(.pd-read-row a,.art .toc a,.art p a,.f-note a,.fn-c a,.pd-crumb a){ display:inline-flex;align-items:center;min-height:26px;padding:3px 1px; } } /* ═════════ 第五轮：pay / assess 的浮动条配色收口 ═════════ */ /* 这两页的 #WS_FLOAT_BAR 由自带