/* ===================================================================== * TG × WP 会员整合套件 — 产品站样式 * 深色科技风 + 白天模式 · 移动端适配 · 无外部依赖（可离线 file:// 打开） * * 主题：颜色全部走 CSS 变量，深色写在 :root，浅色写在 * html[data-theme="light"]。切换只改 上的 data-theme。 * ===================================================================== */ :root{ color-scheme: dark; --bg: #070a12; --bg-soft: #0c111d; --panel: #101827; --panel-2: #141d30; --line: #1f2b44; --line-soft: #182338; --fg: #e8edf7; --fg-mid: #a7b3c9; --fg-dim: #6d7c98; --acc: #4ea8ff; --acc-2: #7b6bff; --acc-3: #2ee6c5; --warn: #ffb547; --danger: #ff6b6b; /* 主题相关的复合色（浅色模式下会整组替换） */ --on-acc: #06101d; /* 渐变底上的文字色 */ --tint: rgba(255,255,255,.02); /* 幽灵按钮/淡底 */ --nav-bg: rgba(7,10,18,.82); --cta-r-bg: rgba(7,10,18,.42); --input-bg: var(--bg); --acc-shadow: rgba(78,168,255,.85); --acc-shadow-2:rgba(78,168,255,.95); --mark-glow: 0 0 22px -4px rgba(78,168,255,.6); --acc3-bd: rgba(46,230,197,.35); --acc3-bg: rgba(46,230,197,.09); --glow-1: rgba(78,168,255,.16); --glow-2: rgba(123,107,255,.14); --glow-3: rgba(46,230,197,.07); --r-sm: 8px; --r: 14px; --r-lg: 22px; --maxw: 1160px; --shadow: 0 18px 50px -18px rgba(0,0,0,.75); --grad: linear-gradient(115deg, var(--acc) 0%, var(--acc-2) 55%, var(--acc-3) 130%); } /* ---------- 白天模式 ---------- */ html[data-theme="light"]{ color-scheme: light; --bg: #f6f8fc; --bg-soft: #ffffff; --panel: #ffffff; --panel-2: #f2f6fc; --line: #ccd6e6; --line-soft: #e3e9f3; --fg: #101a2c; --fg-mid: #465469; --fg-dim: #5a687f; /* 比深色模式收紧过：要在白底上过 AA 4.5:1 */ --acc: #1566d2; --acc-2: #5843d6; --acc-3: #077a64; --warn: #9a5900; --danger: #c62828; --on-acc: #ffffff; --tint: rgba(16,26,44,.03); --nav-bg: rgba(255,255,255,.86); --cta-r-bg: rgba(255,255,255,.66); --input-bg: #ffffff; --acc-shadow: rgba(21,102,210,.34); --acc-shadow-2:rgba(21,102,210,.44); --mark-glow: 0 6px 16px -8px rgba(21,102,210,.75); --acc3-bd: rgba(7,122,100,.38); --acc3-bg: rgba(7,122,100,.09); --glow-1: rgba(21,102,210,.10); --glow-2: rgba(88,67,214,.08); --glow-3: rgba(10,135,112,.06); --shadow: 0 18px 44px -22px rgba(20,35,70,.30); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:82px; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--fg); font-family:"Inter","Segoe UI",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB", "Microsoft YaHei","Noto Sans SC",sans-serif; font-size:16px; line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ambient glow */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(760px 480px at 12% -6%, var(--glow-1), transparent 62%), radial-gradient(680px 460px at 88% 4%, var(--glow-2), transparent 60%), radial-gradient(900px 620px at 50% 108%, var(--glow-3), transparent 66%); } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } /* ---------- language switching ---------- */ .en{ display:none; } body[data-lang="en"] .zh{ display:none; } body[data-lang="en"] .en{ display:inline; } body[data-lang="en"] li.en, body[data-lang="en"] p.en, body[data-lang="en"] div.en, body[data-lang="en"] h2.en, body[data-lang="en"] h3.en, body[data-lang="en"] h4.en, body[data-lang="en"] span.en-block{ display:block; } /* ---------- layout ---------- */ .wrap{ width:min(var(--maxw), calc(100% - 44px)); margin-inline:auto; position:relative; z-index:1; } section{ padding:96px 0; position:relative; z-index:1; } section + section{ border-top:1px solid var(--line-soft); } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc-3); font-weight:600; margin:0 0 14px; } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--acc-3); opacity:.7; } h1,h2,h3,h4{ line-height:1.28; margin:0 0 14px; font-weight:700; letter-spacing:-.01em; } h2{ font-size:clamp(26px,3.4vw,40px); } h3{ font-size:19px; } .lead{ color:var(--fg-mid); font-size:clamp(15px,1.6vw,17.5px); max-width:64ch; margin:0 0 8px; } .sec-head{ margin-bottom:52px; } /* ---------- nav ---------- */ header.nav{ position:sticky; top:0; z-index:50; background:var(--nav-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line-soft); } .nav-in{ display:flex; align-items:center; gap:20px; height:70px; } .brand{ display:flex; align-items:center; gap:11px; font-weight:700; font-size:15.5px; white-space:nowrap; } .brand .mark{ width:30px; height:30px; border-radius:9px; background:var(--grad); display:grid; place-items:center; font-size:14px; color:var(--on-acc); font-weight:800; box-shadow:var(--mark-glow); } .brand small{ display:block; font-size:10.5px; font-weight:500; color:var(--fg-dim); letter-spacing:.08em; } .nav-links{ display:flex; gap:26px; margin-left:auto; font-size:14px; color:var(--fg-mid); } .nav-links a{ transition:color .16s; white-space:nowrap; } .nav-links a:hover{ color:var(--fg); } .nav-act{ display:flex; align-items:center; gap:10px; margin-left:auto; } .nav-links + .nav-act{ margin-left:24px; } .lang{ display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--panel); } .lang button{ appearance:none; border:0; background:transparent; color:var(--fg-dim); font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; cursor:pointer; transition:.16s; } .lang button.on{ background:var(--grad); color:var(--on-acc); } /* ---------- 日/夜 主题切换 ---------- */ .thm{ appearance:none; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--fg-mid); font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; cursor:pointer; transition:.16s; white-space:nowrap; } .thm:hover{ color:var(--fg); border-color:var(--acc); } .thm .ic{ font-size:13.5px; line-height:1; } /* 按钮显示的是「点下去会变成的模式」：深色时显示 ☀ 日间 */ .thm .t-light{ display:none; } html[data-theme="light"] .thm .t-dark{ display:none; } html[data-theme="light"] .thm .t-light{ display:inline-flex; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-size:14.5px; font-weight:600; border:1px solid transparent; cursor:pointer; transition:.18s; white-space:nowrap; font-family:inherit; } .btn-p{ background:var(--grad); color:var(--on-acc); box-shadow:0 10px 30px -12px var(--acc-shadow); } .btn-p:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -12px var(--acc-shadow-2); } .btn-g{ border-color:var(--line); color:var(--fg); background:var(--tint); } .btn-g:hover{ border-color:var(--acc); color:var(--acc); } .btn-sm{ padding:8px 16px; font-size:13px; } /* ---------- hero ---------- */ .hero{ padding:104px 0 88px; } .hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; } .hero h1{ font-size:clamp(32px,5.2vw,58px); letter-spacing:-.025em; margin-bottom:20px; } .hero h1 .g{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero .sub{ font-size:clamp(15.5px,1.8vw,19px); color:var(--fg-mid); max-width:52ch; margin:0 0 30px; } .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; } .hero-note{ font-size:13px; color:var(--fg-dim); display:flex; gap:8px; align-items:flex-start; max-width:48ch; } .hero-note b{ color:var(--fg-mid); font-weight:600; } .pill{ display:inline-flex; align-items:center; gap:9px; padding:6px 15px 6px 8px; border:1px solid var(--line); border-radius:999px; background:var(--panel); font-size:12.5px; color:var(--fg-mid); margin-bottom:22px; } .pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--acc-3); box-shadow:0 0 10px var(--acc-3); } /* flow diagram */ .flow{ background:linear-gradient(160deg, var(--panel) 0%, var(--bg-soft) 100%); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; box-shadow:var(--shadow); } .flow-t{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:20px; } .node{ display:flex; gap:14px; align-items:center; border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2); padding:14px 16px; } .node .ic{ width:38px; height:38px; flex:0 0 38px; border-radius:11px; display:grid; place-items:center; font-size:16px; background:rgba(78,168,255,.11); border:1px solid rgba(78,168,255,.26); color:var(--acc); } .node.v .ic{ background:rgba(123,107,255,.11); border-color:rgba(123,107,255,.28); color:var(--acc-2); } .node.t .ic{ background:rgba(46,230,197,.10); border-color:rgba(46,230,197,.26); color:var(--acc-3); } .node b{ display:block; font-size:14px; } .node span{ font-size:12px; color:var(--fg-dim); } .link{ height:34px; margin-left:34px; border-left:2px dashed var(--line); position:relative; display:flex; align-items:center; padding-left:16px; font-size:11.5px; color:var(--fg-dim); letter-spacing:.04em; } /* ---------- stats ---------- */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden; margin-top:64px; } .stat{ background:var(--bg-soft); padding:26px 22px; text-align:center; } .stat b{ display:block; font-size:30px; font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } .stat span{ font-size:12.5px; color:var(--fg-dim); } /* ---------- module matrix ---------- */ .fam{ margin-bottom:44px; } .fam-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); } .fam-head .ic{ font-size:15px; color:var(--acc); } .fam-head h3{ margin:0; font-size:20px; } .fam-head p{ margin:0; font-size:13.5px; color:var(--fg-dim); } .mods{ display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:14px; } .mod{ border:1px solid var(--line-soft); border-radius:var(--r); background:var(--panel); padding:18px 18px 16px; transition:.18s; position:relative; overflow:hidden; } .mod::after{ content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--grad); opacity:0; transition:.18s; } .mod:hover{ border-color:var(--line); transform:translateY(-2px); background:var(--panel-2); } .mod:hover::after{ opacity:1; } .mod-t{ display:flex; align-items:center; gap:9px; margin-bottom:9px; flex-wrap:wrap; } .mod-t h4{ margin:0; font-size:15.5px; } .mod p{ margin:0 0 13px; font-size:13.3px; color:var(--fg-mid); line-height:1.68; } .tag{ font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:2.5px 8px; border-radius:999px; text-transform:uppercase; border:1px solid; } .t-core{ color:var(--on-acc); background:var(--grad); border-color:transparent; } .t-v1{ color:var(--acc-3); border-color:var(--acc3-bd); background:var(--acc3-bg); } .t-v2{ color:var(--fg-dim); border-color:var(--line); background:var(--tint); } .meters{ display:flex; gap:16px; font-size:11.5px; color:var(--fg-dim); align-items:center; } .meter{ display:flex; align-items:center; gap:6px; } .bars{ display:flex; gap:3px; } .bars i{ width:14px; height:4px; border-radius:2px; background:var(--line); display:block; } .bars i.on{ background:var(--acc); } .bars.eff i.on{ background:var(--warn); } .flag{ margin-top:11px; font-size:11.8px; color:var(--warn); display:flex; gap:7px; align-items:flex-start; border-top:1px dashed var(--line-soft); padding-top:10px; } /* ---------- pricing ---------- */ .pk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:16px; } .pk{ border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--panel); padding:26px 24px; display:flex; flex-direction:column; position:relative; transition:.18s; } .pk:hover{ border-color:var(--line); transform:translateY(-3px); } .pk.core{ border-color:rgba(78,168,255,.42); background:linear-gradient(165deg,rgba(78,168,255,.07),var(--panel) 55%); } .pk-badge{ position:absolute; top:-11px; right:20px; font-size:10.5px; font-weight:700; letter-spacing:.07em; padding:4px 12px; border-radius:999px; background:var(--grad); color:var(--on-acc); text-transform:uppercase; } .pk h3{ margin:0 0 4px; font-size:19px; } .pk .tagline{ font-size:13px; color:var(--fg-dim); margin:0 0 20px; } .pk .price{ font-size:29px; font-weight:700; margin-bottom:2px; } .pk .price.tbd{ font-size:22px; color:var(--fg-mid); font-weight:600; } .pk .price-sub{ font-size:12px; color:var(--fg-dim); margin-bottom:20px; } .pk ul{ list-style:none; margin:0 0 22px; padding:0; font-size:13.4px; color:var(--fg-mid); flex:1; } .pk li{ padding:6px 0 6px 22px; position:relative; border-bottom:1px solid var(--line-soft); } .pk li:last-child{ border-bottom:0; } .pk li::before{ content:"→"; position:absolute; left:0; color:var(--acc); font-size:12px; } .note-row{ margin-top:36px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; } .note{ border:1px solid var(--line-soft); border-radius:var(--r); padding:18px 20px; background:var(--bg-soft); font-size:13.3px; color:var(--fg-mid); } /* 只有作为直接子元素的标题 才独占一行；正文里的 保持内联 */ .note > b{ display:block; color:var(--fg); font-size:14px; margin-bottom:6px; } .note span b{ color:var(--fg); } /* ---------- steps ---------- */ .steps{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; } .step{ border:1px solid var(--line-soft); border-radius:var(--r); background:var(--panel); padding:20px; } .step .n{ font-size:12px; font-weight:700; color:var(--acc); letter-spacing:.1em; margin-bottom:8px; } .step h4{ margin:0 0 7px; font-size:15px; } .step p{ margin:0 0 12px; font-size:13px; color:var(--fg-mid); } .step .meta{ display:flex; gap:8px; font-size:11px; color:var(--fg-dim); } .step .meta span{ border:1px solid var(--line-soft); border-radius:999px; padding:2px 9px; } /* ---------- requirement / exclusion lists ---------- */ .two{ display:grid; grid-template-columns:1fr 1fr; gap:56px; } .req{ border-left:2px solid var(--line); padding:0 0 0 20px; margin-bottom:22px; } .req h4{ margin:0 0 5px; font-size:14.5px; } .req p{ margin:0; font-size:13.3px; color:var(--fg-mid); } .req b{ color:var(--fg); } .exc{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); } .exc:last-child{ border-bottom:0; } .exc .x{ color:var(--danger); flex:0 0 auto; font-size:13px; line-height:1.8; } .exc h4{ margin:0 0 3px; font-size:14px; } .exc p{ margin:0; font-size:12.8px; color:var(--fg-dim); } /* ---------- faq ---------- */ .faq details{ border:1px solid var(--line-soft); border-radius:var(--r); background:var(--panel); margin-bottom:10px; overflow:hidden; } .faq summary{ cursor:pointer; padding:17px 22px; font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; color:var(--acc); font-size:19px; font-weight:400; flex:0 0 auto; } .faq details[open] summary::after{ content:"−"; } .faq details[open]{ border-color:var(--line); } .faq .a{ padding:0 22px 20px; font-size:13.8px; color:var(--fg-mid); border-top:1px solid var(--line-soft); padding-top:16px; } /* ---------- contact ---------- */ .cta{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(150deg, rgba(78,168,255,.10), rgba(123,107,255,.07) 48%, var(--panel) 100%); display:grid; grid-template-columns:1.05fr .95fr; gap:0; } .cta-l{ padding:46px 42px; } .cta-l h2{ margin-bottom:12px; } .cta-r{ padding:38px 42px; border-left:1px solid var(--line); background:var(--cta-r-bg); } .field{ margin-bottom:14px; } .field label{ display:block; font-size:12px; color:var(--fg-dim); margin-bottom:6px; letter-spacing:.04em; } .field input, .field select, .field textarea{ width:100%; padding:11px 13px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--input-bg); color:var(--fg); font:inherit; font-size:14px; transition:.16s; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--acc); } .field textarea{ resize:vertical; min-height:78px; } .form-note{ font-size:11.5px; color:var(--fg-dim); margin-top:12px; } /* 直联 CTA（已撤表单）：右栏纵向排两颗联系按钮 */ .direct{ display:flex; flex-direction:column; justify-content:center; height:100%; } .direct-t{ font-size:15px; color:var(--fg); margin-bottom:18px; font-weight:600; } .btn-block{ width:100%; justify-content:center; text-align:center; margin-bottom:12px; white-space:normal; } .contact-lines{ margin-top:26px; display:grid; gap:10px; } .cl{ display:flex; gap:11px; align-items:center; font-size:13.5px; color:var(--fg-mid); flex-wrap:wrap; } .cl .k{ color:var(--fg-dim); min-width:74px; font-size:12px; } .cl code{ background:var(--input-bg); border:1px solid var(--line); border-radius:6px; padding:2px 9px; font-size:12.5px; color:var(--acc-3); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } .cl code a{ color:inherit; text-decoration:none; } .cl code a:hover{ text-decoration:underline; } /* ---------- footer ---------- */ footer{ border-top:1px solid var(--line-soft); padding:34px 0; font-size:12.5px; color:var(--fg-dim); } .foot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; } .foot-warn{ margin-top:18px; padding:13px 17px; border:1px dashed var(--line); border-radius:var(--r-sm); font-size:11.8px; color:var(--fg-dim); line-height:1.7; } /* ===================================================================== * 滚动渐显（scroll reveal）—— 渐进增强 * 只有 JS 成功接管后才会给 加 .rv、给元素加 .rv-i， * 所以禁用 JS / IntersectionObserver 不可用 / 脚本报错时， * 这些规则一条都不生效，内容完整可见，绝不会被 opacity:0 藏死。 * ===================================================================== */ html.rv .rv-i{ opacity:0; transform:translate3d(0,22px,0); transition:opacity .72s cubic-bezier(.22,.68,.32,1), transform .72s cubic-bezier(.22,.68,.32,1); transition-delay:var(--rvd, 0ms); will-change:opacity, transform; } html.rv .rv-i.rv-on{ opacity:1; transform:none; } /* 移动端：位移更小、时长更短，省一点合成开销 */ @media (max-width:640px){ html.rv .rv-i{ transform:translate3d(0,13px,0); transition-duration:.5s; } } /* ---------- responsive ---------- */ @media (max-width:1000px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } .two{ grid-template-columns:1fr; gap:44px; } .cta{ grid-template-columns:1fr; } .cta-r{ border-left:0; border-top:1px solid var(--line); } .nav-links{ display:none; } } @media (max-width:640px){ .wrap{ width:calc(100% - 32px); } section{ padding:66px 0; } .hero{ padding:64px 0 56px; } .stats{ grid-template-columns:repeat(2,1fr); } .cta-l,.cta-r{ padding:32px 24px; } .mods{ grid-template-columns:1fr; } .brand small{ display:none; } .nav-in{ height:62px; gap:10px; } /* 窄屏放不下三件套：隐藏导航里的 CTA，Hero 内已有同样入口 */ .nav-act .btn{ display:none; } /* 主题按钮只留图标 */ .thm{ padding:6px 10px; } .thm .tx{ display:none !important; } .brand{ font-size:13.5px; } .brand .mark{ width:27px; height:27px; font-size:12.5px; border-radius:8px; } .two{ gap:38px; } .pk{ padding:22px 20px; } .pk ul[style*="columns"]{ columns:1 !important; } .cl .k{ min-width:62px; } } @media (max-width:400px){ .brand span span{ font-size:12.5px; } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; } /* 用户要求减少动效时，渐显直接跳过（JS 侧也不会启动，这里是双保险） */ html.rv .rv-i{ opacity:1 !important; transform:none !important; } } /* ---------- legal section (2026-09-04 3号 追加) ---------- */ #legal .legal-body{ padding:14px 22px 20px; line-height:1.7; color:var(--fg-mid); font-size:13.8px; border-top:1px solid var(--line-soft); } #legal .legal-body p{ margin:0 0 10px; } #legal .legal-body ul{ margin:0; padding-left:18px; } #legal .legal-body li{ margin:0 0 9px; } #legal .legal-body b{ color:var(--fg, inherit); } .foot-legal a:hover{ opacity:.8; } /* ---------- version comparison table (2026-09-05 3号 追加) ---------- * 行=30 个模块 / 列=核心包+6 扩展包+全家桶。设计约束： * 1) 颜色一律走 CSS 变量，深色白天两套主题共用这一份规则（别写死色值）； * 2) 首列与表头都 sticky —— 横向滑到最后一列时还得知道自己在看哪个模块、哪个包； * 3) 窄屏不折叠成卡片，改横向滚动：矩阵的价值就在于「横着一眼扫过去」， * 折叠成一包一张卡等于把对比表变回产品包区块，白做。 */ .cmp-scroll{ overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--panel); /* position:relative 不是装饰 —— 它让本容器成为格子里 .sr（绝对定位的屏读文案）的 * 包含块。少了这行，那些 .sr 的包含块会一路退到 ，于是它们不被本容器裁剪， * 反而把表格 860px 的宽度算进整个文档的滚动宽度：390 视口下整页横向溢出 457px， * 全站排版跟着横移。表格自己滚得好好的，页面却被撑破，很难往表格身上想。 */ position:relative; } .cmp-scroll:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; } /* 宽屏给一个视口高的上限, 让容器自己也纵向滚 —— 表头的 sticky 是相对「滚动容器」定位的, * 容器不纵向滚, sticky top:0 就是死的: 30 行往下扫到一半, 列名早滚出屏幕, 你就不知道 * 手里这个 ✓ 是哪个包的了。窄屏不设上限, 让表格跟着页面自然流 —— * 手机上再套一层内嵌纵向滚动会抢走页面滚动手势, 得不偿失。 */ @media (min-width:1000px){ .cmp-scroll{ max-height:min(76vh, 780px); overflow-y:auto; } } .cmp{ border-collapse:separate; border-spacing:0; width:100%; min-width:860px; font-size:13.2px; } .cmp th,.cmp td{ padding:10px 12px; text-align:center; vertical-align:middle; border-bottom:1px solid var(--line-soft); } /* 表头：包名 + 价格，价格读自 PRICE，与下方产品包同源 */ .cmp thead th{ position:sticky; top:0; z-index:3; background:var(--panel-2); border-bottom:1px solid var(--line); padding:12px 12px 11px; } .cmp .cmp-pk{ display:block; font-size:13px; font-weight:700; color:var(--fg); line-height:1.35; } .cmp .cmp-px{ display:block; margin-top:3px; font-size:12.5px; font-weight:700; color:var(--acc-3); font-variant-numeric:tabular-nums; } .cmp thead th.suite .cmp-pk{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* 首列：模块名，sticky 在左 */ .cmp .cmp-rowhead{ position:sticky; left:0; z-index:2; background:var(--panel); text-align:left; font-weight:600; color:var(--fg); min-width:210px; border-right:1px solid var(--line-soft); } .cmp thead .cmp-rowhead{ z-index:4; background:var(--panel-2); } .cmp .cmp-rowhead .tag{ margin-left:8px; vertical-align:middle; } /* 模块组分段行 */ .cmp .cmp-fam th{ position:sticky; left:0; text-align:left; background:var(--bg-soft); padding:11px 12px; font-size:12.5px; letter-spacing:.02em; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .cmp .cmp-fam .ic{ color:var(--acc); margin-right:8px; } .cmp .cmp-fam em{ font-style:normal; margin-left:10px; font-size:11.5px; color:var(--fg-dim); } /* 格内三态 */ .cmp td .mk{ font-size:15px; font-weight:700; line-height:1; } .cmp .c-y .mk{ color:var(--acc-3); } .cmp .c-d .mk{ color:var(--warn); } .cmp .c-n .mk{ color:var(--fg-dim); opacity:.55; } .cmp td.suite{ background:var(--tint); } .cmp tbody tr:hover .cmp-rowhead{ background:var(--panel-2); } .cmp tbody tr:hover td{ background:var(--panel-2); } .cmp tbody tr:hover td.suite{ background:var(--panel-2); } /* 合计行 */ .cmp .cmp-sum td,.cmp .cmp-sum th{ border-bottom:0; border-top:1px solid var(--line); padding-top:13px; padding-bottom:13px; } .cmp .cmp-sum b{ font-size:15px; color:var(--fg); font-variant-numeric:tabular-nums; } /* 屏幕阅读器专用：格子里除了符号还得有一句话，不然读屏只念得出「✓」。 * clip 是旧写法、已废弃，clip-path 是现行写法，两条都留着照顾老浏览器。 */ .cmp .sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .cmp-legend{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; margin:16px 0 0; font-size:12.6px; color:var(--fg-dim); } .cmp-legend > span{ display:inline-flex; align-items:center; gap:7px; } .cmp-legend b{ font-size:14px; } .cmp-legend .c-y{ color:var(--acc-3); } .cmp-legend .c-d{ color:var(--warn); } .cmp-legend .c-n{ color:var(--fg-dim); } .cmp-legend .cmp-hint{ flex-basis:100%; color:var(--fg-dim); opacity:.85; } @media (max-width:640px){ .cmp{ font-size:12.6px; } .cmp th,.cmp td{ padding:9px 10px; } .cmp .cmp-rowhead{ min-width:158px; } .cmp .cmp-rowhead .tag{ display:none; } /* 窄屏首列要窄，tier 徽章让位给模块名 */ }