:root{ --ink:#0C1A1D; --muted:#40565B; --surface:#F4F8F9; --paper:#FFFFFF; --p900:#06474C; --p700:#0A6A71; --p600:#0F828A; --p100:#DBEFF0; --line:#D3E2E4; --band:1080px; --r:4px; --r2:8px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --disp:"Space Grotesk",var(--sans); /* 本站只有一套亮色。已在 `prefers-color-scheme: dark` 下逐件取过计算值， body/输入框/按钮/标题/链接全部与亮色一致，没有 UA 反色（见 verification/taste-17.md）。 但那是「碰巧没坏」——把它写出来才是「说定了不会坏」：声明之后浏览器不会再拿 暗色默认样式去渲滚动条和表单控件。 */ color-scheme:light; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--sans); overflow-x:hidden} img{display:block;max-width:100%;height:auto} a{color:var(--p700)} /* 触点上去掉移动端的双击缩放等待（约 300ms）。只给交互元素，不给 body —— 给 body 会连带禁掉正文的双指缩放，那是 A11y 倒退。 */ a,button,input,label,summary{touch-action:manipulation} a:focus-visible,button:focus-visible,input:focus-visible{ outline:3px solid var(--p600);outline-offset:2px} /* 跳到主内容：站头有品牌字标 + 7 条导航，键盘和读屏用户每翻一页都要先趟过去。 平时用 clip 藏起来（不是 display:none —— 那样焦点根本落不上去）， 拿到焦点才落下来。硬门 16 点名要这个。 */ .skip{position:absolute;left:12px;top:-60px;z-index:60; padding:10px 16px;min-height:44px;display:inline-flex;align-items:center; background:var(--p900);color:#fff;text-decoration:none; border-radius:var(--r);font:500 15px/1 var(--disp)} /* 不给它加过渡：一是 `top` 不是合成器友好的属性（要动也该动 transform）， 二是跳转链接要的就是「一按 Tab 立刻在那儿」，滑进来反而慢半拍。 */ .skip:focus{top:9px} .band{width:100%;max-width:var(--band);margin:0 auto;padding:0 20px} /* ---- 站头：左品牌字标，右一行导航。桌面单行，窄屏横向滚动（不撑文档） ---- */ .top{border-bottom:1px solid var(--line);background:var(--paper); position:sticky;top:0;z-index:30} .top .band{display:flex;align-items:center;gap:24px;min-height:62px} /* 站头的链接都用 inline-flex + min-height 撑到 44px 触点（硬门 16）。 不靠加 padding 撑 —— 字号一改 padding 就又不够，min-height 才是跟着门走的。 */ .brandmark{font:700 19px/1 var(--disp);letter-spacing:-.4px;color:var(--p900); text-decoration:none;white-space:nowrap;flex:0 0 auto; display:inline-flex;align-items:center;min-height:44px} .brandmark span{color:var(--p700)} .nav{flex:1 1 auto;overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} /* 右对齐必须用 `margin-left:auto`，**不能**用 `justify-content:flex-end`： 后者在内容溢出时会把溢出的部分甩到容器**左边**，那一侧滚不到 —— 375px 下实测前五项（Home…Check it yourself）全在负坐标上，点不到也看不见， 站头只剩一个没头没尾的「f How it works Choosing」。 `width:max-content` + 自动左外边距：有余量时照样贴右，不够时正常向右溢出可滚。 */ .nav ul{display:flex;gap:20px;margin:0;padding:0;list-style:none;white-space:nowrap; width:max-content;margin-left:auto} .nav a{font:500 14px/1 var(--disp);color:var(--muted);text-decoration:none; display:inline-flex;align-items:center;min-height:44px;min-width:44px; border-bottom:2px solid transparent} .nav a:hover{color:var(--p900);border-bottom-color:var(--p600)} .nav a[aria-current]{color:var(--p900);border-bottom-color:var(--p700)} /* ---- Hero：h1 → 一句 lede → 搜索框。中间不许插任何按钮（硬门 0.6） ---- */ .op{background:linear-gradient(180deg,var(--p100) 0%,var(--paper) 100%); border-bottom:1px solid var(--line);padding:56px 0 40px} .op h1{font:700 clamp(30px,4.4vw,46px)/1.12 var(--disp);letter-spacing:-1px; margin:0 0 16px;max-width:19ch;color:var(--p900)} .op .lede{margin:0 0 26px;max-width:62ch;font-size:19px;color:var(--muted)} .find{display:flex;gap:10px;flex-wrap:wrap;max-width:660px;margin:0 0 18px} .find label{flex:1 1 320px;display:block} .find .cue{display:block;font:500 12px/1 var(--disp);letter-spacing:.08em; text-transform:uppercase;color:var(--p700);margin:0 0 7px} .find input{width:100%;height:56px;padding:0 16px;font-size:17px;color:var(--ink); background:var(--paper);border:2px solid var(--p700);border-radius:var(--r)} .find input::placeholder{color:#6B8085} .find button{height:56px;align-self:flex-end;padding:0 28px;border:0;cursor:pointer; border-radius:var(--r);background:var(--p900);color:#fff; font:500 16px/1 var(--disp)} .find button:hover{background:var(--p700)} .subnav{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none} /* 下划线从 border-bottom 换成 text-decoration：inline-flex 撑到 44px 之后， border 会画在 44px 盒子的底边上、离字十几个像素，看着像脱开的一条线； text-decoration 跟着字走，撑高触点不改长相（硬门 16）。 */ .subnav a{font:500 14px/1.5 var(--disp);color:var(--p700); display:inline-flex;align-items:center;min-height:44px; text-decoration:underline;text-decoration-color:var(--p100); text-underline-offset:4px;text-decoration-thickness:1px} .subnav a:hover{text-decoration-color:var(--p700)} /* ---- 区块：靠交替底色与图位分节奏，不靠左右分栏（证据条都是超宽图） ---- */ section{padding:52px 0} section[data-l="fig-over"],section[data-l="pairs"]{background:var(--surface)} section[data-l="wall"]{background:var(--paper);padding-top:44px} h2{font:700 clamp(23px,2.6vw,31px)/1.2 var(--disp);letter-spacing:-.5px; margin:0 0 14px;max-width:26ch;color:var(--p900)} h3{font:500 19px/1.3 var(--disp);margin:30px 0 8px;color:var(--p900)} /* 标题匀行，避免末行吊一个孤字。只给标题，不给正文 —— `balance` 在长段落上会被浏览器放弃（有行数上限），给了也是白给。 不支持的浏览器直接忽略这一行，退回默认断行，没有回退成本。 */ h1,h2,h3{text-wrap:balance} p{margin:0 0 16px;max-width:68ch} .lead{font-size:19px;color:var(--muted);max-width:66ch} /* 小字附注：披露、口径说明这类不该抢正文的话。比正文小一号，不小到看不清。 */ .note{margin-top:20px;font-size:14.5px;color:var(--muted);max-width:72ch} ul.pts{margin:0 0 16px;padding-left:20px;max-width:66ch} ul.pts li{margin:0 0 8px} /* ---- 配图：一律整幅通栏 + 横向滚动条（硬门 0.8 的结构解法） ---- 所有裁片宽高比都在 6:1 以上，塞进左右分栏必然缩到读不出字。 上界靠 max-width:原生宽（比值 ≤1.0，1.02 够不到）， 下界靠 min-width:原生宽×0.62（比值 ≥0.62，0.55 够不到）。 容器 overflow-x:auto 不改 document.scrollWidth，硬门 16 不受影响。 */ /* `.prose` 存在的唯一理由是硬门 0.9：对齐门只跟 figure 的**紧邻兄弟**比宽度。 如果紧邻兄弟是

（max-width 68ch ≈ 640px），跟通栏图一比就差 38%， 直接踩 WARN 线。把文案裹进一个满幅的块里，两边宽度就一样了 —— 段落该多窄还多窄，那是 .prose 内部的事。 */ .prose{width:100%} .prose>*:first-child{margin-top:0} figure{margin:26px 0} .fig-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r2); background:var(--paper)} .fig-scroll img{width:100%} figcaption{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted); max-width:78ch} figcaption b{color:var(--p900);font-weight:500} /* ---- 招牌模块：左边逐字原话，右边去哪自己核 ---- */ .pair{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line); border-radius:var(--r2);background:var(--paper);overflow:hidden;margin:0 0 16px} @media(min-width:820px){.pair{grid-template-columns:1.25fr 1fr}} .pair .said{padding:20px 22px;border-left:4px solid var(--p600)} /* 双栏时左格跟着右格拉齐高度，但左边只有一句引语加一行出处（实测 77px）， 右边要写清在哪一屏、哪个位置、读于哪天、去哪开原页（实测 173-247px）—— 于是 11 组每一组左下角都空掉五到七成。硬门 0.9 量的是两栏**元素**高度差， 两格是 stretch 等高，逐条全过；空的是格子里的内容，门看不见这个。 居中之后那片空白分到上下两头，读起来是留白不是漏排。只作用于 ≥820px： 窄屏单栏时左格高度本来就等于内容高，没有洞可填。 */ @media(min-width:820px){.pair .said{display:flex;flex-direction:column; justify-content:center}} .pair .said q{quotes:none;display:block;font-size:18px;line-height:1.5;color:var(--ink)} .pair .said q::before{content:'"'} .pair .said q::after{content:'"'} .pair .who{margin:12px 0 0;font:500 13px/1.4 var(--disp);color:var(--p700)} .pair .look{padding:20px 22px;background:var(--surface);border-top:1px solid var(--line)} @media(min-width:820px){.pair .look{border-top:0;border-left:1px solid var(--line)}} .pair .look .cue{font:500 11px/1 var(--disp);letter-spacing:.09em; text-transform:uppercase;color:var(--p700);margin:0 0 8px;display:block} .pair .look p{margin:0 0 10px;font-size:15px;color:var(--muted)} .pair .look a{font-size:15px} /* 「去原页自己看」是这个站唯一真正要人点的动作，之前它只是一条 22px 高的文字链。 撑到 44px 不只是过硬门 16，它本来就该是一个点得到的东西。 */ .cite{display:inline-flex;align-items:center;min-height:44px;font-weight:500} /* ---- 来源清单：十二家原页，两列，名字在左、域名在右 ---- 分栏用 `columns` 不用 `grid`：grid 是**按行**填的，A、B 落在第一行的左右两格， 于是左栏读下来是 ACBuy / Joyagoo / LoongBuy… —— 两栏各自有序但互相交错， 想找 Superbuy 得两栏都扫一遍。`columns` 按**列**填，前六家在左、后六家在右， 扫一栏就知道该不该看另一栏。这页的整个主张就是「你自己能核」， 那这份清单首先得查得动。 列数不写死行数：代理增减时 `kit.sources()` 由 `CITE` 表生成，多列少列自己分。 */ .srcs{list-style:none;margin:18px 0 0;padding:0} @media(min-width:720px){.srcs{columns:2;column-gap:36px}} .srcs li{display:flex;align-items:center;justify-content:space-between;gap:14px; border-bottom:1px solid var(--line);break-inside:avoid} .srcs span{font:400 13.5px/1 var(--disp);color:var(--muted);white-space:nowrap} /* ---- 16 类商品墙：2 / 4 列，不用 3 列（Taste：禁三个等宽卡片横排） ---- */ .wall{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 0; padding:0;list-style:none} @media(min-width:900px){.wall{grid-template-columns:repeat(4,1fr);gap:18px}} .wall li{display:flex} .wall a{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit; border:1px solid var(--line);border-radius:var(--r2);overflow:hidden; background:var(--paper);transition:border-color .18s,box-shadow .18s} .wall a:hover{border-color:var(--p600);box-shadow:0 2px 0 var(--p100)} .wall img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface)} .wall .nm{font:500 16px/1.25 var(--disp);color:var(--p900);padding:13px 14px 0} .wall .nt{font-size:13.5px;line-height:1.5;color:var(--muted);padding:6px 14px 15px; margin:0;flex:1 1 auto} /* ---- 步骤条 ---- */ ol.steps{counter-reset:s;list-style:none;margin:24px 0 0;padding:0;max-width:74ch} ol.steps>li{counter-increment:s;position:relative;padding:0 0 22px 52px; border-left:2px solid var(--p100);margin-left:16px} ol.steps>li:last-child{border-left-color:transparent;padding-bottom:0} ol.steps>li::before{content:counter(s);position:absolute;left:-17px;top:-2px; width:32px;height:32px;border-radius:50%;background:var(--p900);color:#fff; font:500 15px/32px var(--disp);text-align:center} ol.steps h3{margin:0 0 6px} ol.steps p{margin:0 0 8px} /* ---- 表（复核日志 / FAQ 之外的结构化内容） ---- */ .tbl{width:100%;overflow-x:auto;margin:22px 0 0} table{border-collapse:collapse;min-width:520px;font-size:15.5px} th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line); vertical-align:top} th{font:500 13px/1.3 var(--disp);letter-spacing:.04em;text-transform:uppercase; color:var(--p700);white-space:nowrap} /* ---- FAQ ---- */ .qa{border-top:1px solid var(--line);padding:20px 0 4px;max-width:74ch} .qa h3{margin:0 0 8px} .qa .short{font-size:18px;color:var(--ink);margin:0 0 10px} /* ---- 复核日志：日期在标题之上，读者先看到「什么时候」再看到「做了什么」 ---- */ .logitem{border-top:1px solid var(--line);padding:22px 0 2px;max-width:76ch} .logitem .when{font:500 13px/1 var(--disp);letter-spacing:.06em; text-transform:uppercase;color:var(--p700);margin:0 0 7px} .logitem h3{margin:0 0 10px} /* ---- 相关 / 页脚 ---- */ .rel{background:var(--p900);color:#DCEBEC;padding:38px 0} .rel h2{color:#fff;font-size:20px;margin:0 0 14px} .rel ul{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0;padding:0;list-style:none} .rel a{color:#fff;font:500 15px/1.5 var(--disp); display:inline-flex;align-items:center;min-height:44px} .foot{background:var(--surface);border-top:1px solid var(--line);padding:34px 0; font-size:14.5px;color:var(--muted)} .foot ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 14px;padding:0; list-style:none} /* 短标签（FAQ / Home）是栽在**宽度**上不是高度上，门查的是 `w<44 || h<44`。 */ .foot ul a{display:inline-flex;align-items:center;min-height:44px;min-width:44px} .foot p{max-width:78ch;margin:0 0 10px} .foot .site{font:700 15px/1 var(--disp);color:var(--p900);margin:0 0 12px} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }