/* SpecPrice ui_refresh: calmer, more readable layer on top of style.css + nav.css (loaded last, wrap.js). Round 2 (owner feedback): no RGB/multicolour anywhere; the logo cyan (#00f0ff) is the only accent; every price is the same green (--price, class .price added by lib/price.js); neutral greys for everything else; easier phone navigation (end of file). Inter for text, JetBrains Mono only for prices (design C: Sora headings; the wordmark font lives only in the logo image). */ :root,[data-theme="dark"]{ --bg:#0c0e13;--bg2:#10131a;--panel:#141820;--panel2:#1a1f29;--hdr:#0e1117;--track:#262c38; --line:#262c38;--line2:#363e4d;--text:#e9ecf2;--text2:#cdd2dc;--mute:#a6aebc;--dim:#98a0ae;--hi:#fff;--on-ac:#061218;--img-bg:#fff; --ac:#00f0ff;--ac-rgb:0,240,255;--deal:var(--ac);--deal-rgb:var(--ac-rgb);--price:#4fdc8a;--red:var(--mute);--red-rgb:166,174,188; --cyan:var(--ac);--mag:var(--ac);--violet:var(--ac);--green:var(--ac);--amber:var(--ac); --cyan-rgb:var(--ac-rgb);--mag-rgb:var(--ac-rgb);--violet-rgb:var(--ac-rgb);--green-rgb:var(--ac-rgb);--amber-rgb:var(--ac-rgb); --panel-rgb:20,24,32;--panel2-rgb:26,31,41;--bg-rgb:12,14,19;--bg2-rgb:16,19,26; --amb:0;--gk:0;--sh:0;--card-a:var(--panel);--card-b:var(--panel);--sunk:var(--panel2) } [data-theme="light"]{ --bg:#f5f6f9;--bg2:#fff;--panel:#fff;--panel2:#f0f2f6;--hdr:#fff;--track:#dde1e9; --line:#dde1e9;--line2:#c3c9d4;--text:#13161d;--text2:#2c323e;--mute:#4a5262;--dim:#535b6b;--hi:#0b0d12;--on-ac:#fff; --ac:#00707d;--ac-rgb:0,112,125;--deal:var(--ac);--deal-rgb:var(--ac-rgb);--price:#0a7a3d;--amber:var(--ac);--amber-rgb:var(--ac-rgb);--red:var(--mute);--red-rgb:74,82,98; --panel-rgb:255,255,255;--panel2-rgb:240,242,246;--bg-rgb:245,246,249;--bg2-rgb:255,255,255 } :root{ --rgb:var(--ac); --glow-c:0 0 0 1px rgba(var(--ac-rgb),.5);--glow-m:var(--glow-c);--glow-g:var(--glow-c); --body:"Inter","Inter fb",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--head:var(--body);--mono:var(--body); --num:"JetBrains Mono","JBMono fb",ui-monospace,SFMono-Regular,Consolas,monospace;--h1:var(--disp); --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--r:12px;--wide:1200px } /* calm: no glows, text shadows, gradient text or caps+tracking anywhere; a few things opt back in below */ *,*::before,*::after{box-shadow:none!important;text-shadow:none!important} body *,body *::before,body *::after{text-transform:none!important;letter-spacing:normal!important} body{font:400 17px/1.6 var(--body);background:var(--bg);font-variant-numeric:tabular-nums} body::before{display:none} ::selection{background:rgba(var(--ac-rgb),.35);color:var(--hi)} a{color:var(--ac);text-decoration-color:rgba(var(--ac-rgb),.45)} a:hover{color:var(--hi)} :focus-visible{outline:2px solid var(--ac);outline-offset:2px} small{color:var(--mute)} main{max-width:var(--wide);padding:var(--s6) var(--s5) var(--s4)} main>p,.doc,.cr-lead{max-width:75ch} main>p{color:var(--text2)} h1{font:800 clamp(26px,3vw,36px)/1.25 var(--h1);margin:var(--s2) 0 var(--s4);background:none;color:var(--hi);-webkit-text-fill-color:currentColor;max-width:28.35em} h2{font:700 24px/1.3 var(--body);color:var(--hi);margin:var(--s7) 0 var(--s4)} h3{font:600 19px/1.35 var(--body);color:var(--hi)} .intro{font-size:18px} .fx{font-size:15px;line-height:1.6;color:var(--mute);border-left:2px solid var(--line2);padding:var(--s1) 0 var(--s1) var(--s3);margin:var(--s5) 0;max-width:75ch!important} .crumb{font-size:14px} /* ---------- ui_refresh: type floor (auto-listed from style.css + nav.css rules under 14px; nothing below 14px except legal small print) ---------- */ .aff-note, .alrt, .alrt summary, .alrt-f button, .alrt-f label, .alrt.big summary, .badge, .bf-card ul, .bl-l, .bp-buy .ckd, .bp-buy small, .bp-go, .bp-per, .bp-tag, .bp-tx small, .btn, .bud-cats button, .bud-ctl .bud-eu, .bud-ctl .eunote, .bud-scale, .bud-types button, .catsign button, .cnt, .cr-card.cr-first::before, .cr-ctl .eunote, .cr-ix, .cr-nl small, .cr-nl span, .cr-no, .cr-notes p, .cr-rtab td, .cr-rtab td[data-l]::before, .crumb, .ctl label, .cur, .cur small, .dc-big, .dc-btn, .fbar .eunote, .fbar label, .fx, .hb-deal small, .hb-deal small:first-child, .hb-go, .hb-q, .hb-stat, .hb-top li small, .hcell small, .hd .hd-ck, .hd small, .hd-c, .hub-kick, .hub-pop, .hub-pop a, .lb small, .mk-c, .mk-h small, .mk-low h3 small, .mk-n .badge, .mk-n small, .mk-p, .mk-stat span, .mtabs a, .mtabs a small, .past, .pill, .rt, .sr-eu, .sr-ext, .sr-gh, .sr-gh span, .sr-more, .sr-p, .sr-tabs button, .sr-tabs i, .sr-tx small, .srch kbd, .srch-big kbd, .stabs a, .tag, .va, .verdict, .vs tbody th, .vs thead th, .vsm, button, footer, footer .fl, nav a, table.ft td::before, th{font-size:14px} /* ---------- controls ---------- */ input,select{font:400 16px var(--body);min-height:44px;border-radius:8px;background:var(--bg2);border-color:var(--line2)} input:focus,select:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(var(--ac-rgb),.2)!important} input[type=checkbox]{min-height:0;width:20px;height:20px} input[type=checkbox]:checked{border-color:var(--ac)} button{font:600 15px/1.2 var(--body);border-radius:8px;padding:10px 16px;min-height:40px;background:var(--panel2);border:1px solid var(--line2);color:var(--text)} button:hover{border-color:var(--ac);background:rgba(var(--ac-rgb),.08);color:var(--hi)} button.on,.sr-tabs button.on,.bud-cats button[aria-pressed=true],.mtabs a.on{background:var(--ac);color:var(--on-ac);border-color:var(--ac)} .mtabs a.on small,.sr-tabs button.on i,.bud-cats button[aria-pressed=true] .ic{color:var(--on-ac)} /* the one primary button style: solid accent, subtle glow on hover/focus only */ .go,.btn,.bp-go,.news button,.alrt-f button,.catsign button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border:0;border-radius:8px; background:var(--ac);color:var(--on-ac);font:600 15px/1.2 var(--body);text-decoration:none;white-space:nowrap;cursor:pointer} .go:hover,.go:focus-visible,.btn:hover,.bp-go:hover,.news button:hover,.alrt-f button:hover,.catsign button:hover{color:var(--on-ac);background:var(--ac);filter:brightness(1.08);box-shadow:0 0 0 3px rgba(var(--ac-rgb),.25),0 0 14px rgba(var(--ac-rgb),.25)!important} .btn{margin:var(--s1)} /* secondary links (Amazon, eBay, socials): outlined, neutral */ .amz,.ebay,.dc-btn,.dc-btn.rd,.dc-btn.xx{display:inline-flex;align-items:center;gap:6px;font:500 14px/1.3 var(--body);color:var(--text2);background:transparent;border:1px solid var(--line2);border-radius:8px;padding:6px 12px;text-decoration:none} .amz.sm,.ebay.sm{font-size:14px;padding:2px 8px} .amz.big{padding:10px 16px;font-size:15px} .amz:hover,.ebay:hover,.dc-btn:hover{color:var(--hi);border-color:var(--ac);background:rgba(var(--ac-rgb),.06)} .dc-btn .ic{width:18px;height:18px} /* ---------- badges / pills: neutral, one coloured deal state ---------- */ .pill,.badge,.verdict{font:500 14px/1.4 var(--body);padding:1px 8px;border-radius:6px;border:1px solid var(--line2);color:var(--mute);background:transparent} .reg,.conv,.samp,.badge.drop,.badge.new,.v-same,.v-early,.pill.cr-bord{color:var(--mute);border-color:var(--line2);background:transparent} .badge.low,.v-deal{color:var(--deal);border-color:rgba(var(--deal-rgb),.5);background:rgba(var(--deal-rgb),.1)} .v-up{color:var(--red);border-color:rgba(var(--red-rgb),.5);background:transparent} .va,.vsm{font:500 14px var(--body)} .va.dn,.vsm.dn,.mk-d.dn{color:var(--deal)}.va.up,.vsm.up{color:var(--mute)} time.ckd::before{background:var(--mute)} .rt{font:500 14px var(--body)} /* stars: grey row with a cyan overlay cut to the rating (no gradient) */ .rt .st{position:relative;display:inline-block;background:none;color:var(--line2);-webkit-text-fill-color:currentColor} .rt .st::after{content:"★★★★★";position:absolute;left:0;top:0;width:var(--p);overflow:hidden;white-space:nowrap;color:var(--ac);-webkit-text-fill-color:currentColor} /* ---------- header: one row on desktop, Menu below 1220px ---------- */ header.na{position:sticky;top:0;z-index:40;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s4);padding:10px max(24px,calc((100% - var(--wide))/2 + 24px));background:var(--hdr)!important;border-bottom:1px solid var(--line)} header.na::after{display:none} header.na .logo{flex:none;margin-right:var(--s2)} header.na .logo img{height:26px} .na-mob a:hover{color:var(--hi);background:rgba(var(--ac-rgb),.08)} .na-mob a.on{color:var(--hi);background:rgba(var(--ac-rgb),.12);box-shadow:inset 0 -2px 0 var(--ac)!important} details.more>summary::-webkit-details-marker,.catsign-d>summary::-webkit-details-marker{display:none} .na-mob{position:absolute;z-index:70;top:calc(100% + 8px);display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35)!important} .na-mob a{display:flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:8px;color:var(--text);text-decoration:none;font:500 16px var(--body)} header.na .srch{flex:1 1 220px;min-width:220px;max-width:none;margin:0 0 0 auto} .srch input{font:400 16px var(--body);min-height:42px;background:var(--bg2);border:1px solid var(--line2)} .srch::before,.srch::after{border-color:var(--mute)}.srch::after{background:var(--mute)} .srch kbd{font:500 13px var(--body)} .srch.sr-open input{box-shadow:0 0 0 3px rgba(var(--ac-rgb),.2)!important} .sr-panel{box-shadow:0 0 0 1px var(--line2),0 24px 60px rgba(0,0,0,.4)!important} .sr-tx b{font-size:15px} .sr-p{font:600 15px var(--num);color:var(--ac)} .sr-it:hover,.sr-it.act{box-shadow:inset 3px 0 0 var(--ac)!important} .thm{flex:none;width:40px;height:40px;border-color:var(--line2)} .na-mob{right:0;width:min(340px,calc(100vw - 24px));display:grid;grid-template-columns:1fr 1fr} @media(max-width:1300px){header.na .srch kbd{display:none}header.na .srch input{padding-right:14px}} @media(max-width:1279px){header.na{gap:var(--s3)}header.na .logo{margin-right:0}header.na .logo img{height:24px}} @media(max-width:1219px){ header.na{flex-wrap:wrap;gap:var(--s3);padding:10px 16px} header.na .logo{margin-right:auto} header.na .srch{order:10;flex:1 1 100%} } @media(max-width:760px){header.na{position:relative}header.na .logo img{height:22px}} @media(max-width:480px){.thm{width:44px;height:44px}header.na{gap:var(--s2)}} /* ---------- filters, tabs, alerts ---------- */ .fbar,.ctl{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);gap:var(--s3) var(--s4);margin:var(--s4) 0} .fbar::before,.ctl::before,.bud::before{display:none} .fbar label,.ctl label{font:500 14px var(--body);color:var(--mute);gap:6px} .fbar label>select,.fbar label>input,.ctl label>select,.ctl label>input{font:400 16px var(--body)} .fbar .clear,.ctl .clear{background:transparent;border-color:var(--line2);color:var(--text2);min-height:44px} .fbar .clear:hover,.ctl .clear:hover{color:var(--hi);border-color:var(--ac);background:transparent} .cnt{font:500 14px var(--body);color:var(--mute)} .fbar .chk,.ctl label.chk{font:400 15px var(--body);color:var(--text)} .mtabs{gap:var(--s2);margin:var(--s2) 0 var(--s4)} .mtabs a{font:600 15px/1.25 var(--body);padding:10px 18px;border:1px solid var(--line2);background:transparent;color:var(--text)} .mtabs a small{font:400 14px var(--body)} .mtabs a:hover{border-color:var(--ac)} .stabs a{font-size:15px;padding:8px 16px} .catsign-d{margin:var(--s3) 0 var(--s2)} .catsign-d>summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border:1px solid var(--line2);border-radius:999px;font:500 15px var(--body);color:var(--text2);cursor:pointer;list-style:none} .catsign-d>summary:hover,.catsign-d[open]>summary{border-color:var(--ac);color:var(--hi)} .catsign{border:1px solid var(--line);border-left:1px solid var(--line);background:var(--panel);margin:var(--s2) 0 0;max-width:640px} .catsign span{font-size:15px} .alrt summary{font:500 14px var(--body);color:var(--text2);border-color:var(--line2);padding:4px 12px} .alrt.big summary{font-size:15px;padding:8px 16px;min-height:40px;display:inline-flex;align-items:center} .alrt-f label,.alrt-n{font-size:14px} .guides-l{font-size:15px} .cur{font:500 14px var(--body)} /* ---------- tables ---------- */ .tw{border-radius:var(--r);background:var(--panel);border:1px solid var(--line);margin:var(--s3) 0} td,th{padding:14px 16px;vertical-align:middle} th{font:600 14px var(--body);color:var(--mute);background:var(--panel2)} td{font-size:16px} tbody tr:hover{background:rgba(var(--ac-rgb),.035)} .lb small,.lb td small{font-size:14px;line-height:1.5} .rank,.rank.r1,.rank.r2,.rank.r3{font:600 16px var(--body);color:var(--dim);width:48px} .rank.r1,.rank.r2,.rank.r3{color:var(--text)} .pc{gap:var(--s3)} .pc>div{min-width:0;flex:1} .thumb{width:56px;border-radius:8px} .thumb.ph span{font:600 14px/1.1 var(--body);color:var(--mute)} .thumb.ph{background:var(--panel2)} .lb td:has(>.pc){width:42%;min-width:280px} .lb .nm{display:block;width:0;min-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--hi);text-decoration:none} .lb .nm:hover{color:var(--ac);text-decoration:underline} .lb .spec{display:block;margin-top:2px;font-size:14px;color:var(--mute)} .lb .badge{margin:4px 4px 0 0} td.p,td.b,.lb td.b,td.p.b{font:600 16px var(--num);color:var(--text);white-space:nowrap} .lb td.pr,td.p.pr{font:700 19px var(--num);color:var(--ac)} .lb td.b small,.lb td.mc small{font-family:var(--body)} td.pf b{font:600 16px var(--num);color:var(--text)} td.shop{min-width:190px} details.more{margin-top:var(--s2)} /* rows: outlined CTA so a column of buttons stays calm; it fills on hover */ .lb .go{background:transparent;color:var(--ac);border:1px solid rgba(var(--ac-rgb),.6);min-height:40px;padding:8px 14px} .lb .go:hover,.lb .go:focus-visible{background:var(--ac);color:var(--on-ac)} details.more>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;font:500 14px var(--body);color:var(--mute);cursor:pointer;list-style:none} details.more>summary::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s} details.more[open]>summary::before{transform:rotate(45deg)} details.more>summary:hover{color:var(--hi)} .more-b{margin-top:var(--s2);padding:var(--s3);background:var(--panel2);border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:1.55;max-width:440px} .more-b small,.more-b .also{font-size:14px;color:var(--text2)} .ml{margin:0 0 var(--s2)}.ml:last-child{margin:0} .ml>span{font-weight:600;color:var(--mute)} .more-b .hcell{margin:0} .hcell small{font-size:14px} .more-b .alrt{margin-top:var(--s1)} .also{opacity:1} /* Stock (tasks/stock_fix): quiet "stock not checked" label for prices whose stock we can't confirm (lib/stock.js). Muted text only: not cyan (not clickable), not a pill or badge, no popup; the full reason is in the title attribute and in the page's price notes. */ .nsc{display:block;margin-top:4px;font:400 14px/1.3 var(--body);color:var(--dim);letter-spacing:.01em;white-space:nowrap} .nsc::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border:1px solid currentColor;border-radius:50%;vertical-align:middle;opacity:.8} .intro .nsc,.buy-s .nsc,.lede .nsc,p .nsc{display:inline;margin:0 0 0 4px} td>.nsc:first-child{margin-top:0} @media(max-width:760px){.lb.ft td.shop .nsc{text-align:center;margin-top:6px}} @media(min-width:761px) and (max-width:1000px){ .lb td:has(>.pc){min-width:200px}td.shop{min-width:0}.lb .go{white-space:normal;text-align:center}td,th{padding:12px 10px}.lb .thumb{display:none} } @media(min-width:1001px){ .tw-ft{overflow:visible} .tw-ft table.ft thead th{position:sticky;top:61px;z-index:3} .tw-ft table.ft thead th:first-child{border-top-left-radius:var(--r)}.tw-ft table.ft thead th:last-child{border-top-right-radius:var(--r)} } /* ---------- mobile: listing tables become compact cards (no sideways scrolling) ---------- */ @media(max-width:760px){ main{padding:var(--s5) var(--s4) var(--s3)} h1{font-size:clamp(24px,7vw,28px)} h2{font-size:21px;margin-top:var(--s6)} .ftoggle{border-color:var(--line2);color:var(--text);min-height:48px;font-size:16px} .lb.ft tr{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--s3) var(--s4);padding:var(--s4)!important;margin:0 0 var(--s3)} .lb.ft td{grid-column:auto!important;font-size:15px} .lb.ft tr>td:first-child,.lb.ft td.rank+td,.lb.ft td.shop{grid-column:1/-1!important} .lb.ft td.rank{grid-column:auto!important;top:14px;right:16px;font-size:16px} .lb.ft td.rank+td{padding-right:40px} table.ft td[data-l]::before,.pg-gpus table.ft td[data-l]::before,.pg-laptops table.ft td[data-l]::before,.pg-ram table.ft td[data-l]::before,.pg-cpu table.ft td[data-l]::before,.pg-ssd table.ft td[data-l]::before{content:attr(data-l);font:500 14px var(--body);color:var(--mute);margin-bottom:2px} .lb.ft tr>td:first-child[data-l]::before,.lb.ft td.rank+td[data-l]::before,.lb.ft td.shop[data-l]::before{content:none!important} .lb.ft td.pr,.pg-gpus .lb.ft td.p.pr{font-size:21px} .lb.ft td.b:not(.pr),.pg-gpus table.ft td.p:not(.pr){font-size:16px;align-self:start} .lb td:has(>.pc){width:auto;min-width:0} .lb .nm{white-space:normal;width:auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .lb.ft td.shop .go{width:100%} td.shop{min-width:0} details.more>summary{min-height:44px} .more-b{max-width:none} .thumb{width:48px} .tw{margin:var(--s2) 0} } /* ---------- home ---------- */ .hub{padding-top:0} .hub-hero{padding:var(--s6) 0 var(--s6)} .hub-kick{font:500 14px var(--body);color:var(--mute);border:1px solid var(--line2);background:transparent;padding:4px 12px} .hub-hero h1{font-size:clamp(28px,3.6vw,40px);max-width:18.35em;margin:0 auto var(--s3)} .hub-sub{font-size:18px;max-width:36.65em;margin:0 auto var(--s5);color:var(--text2)} .srch-big{max-width:720px} .srch-big input{min-height:60px;font-size:18px;border:1px solid var(--line2);background:var(--panel)} .srch-big input:focus{border-color:var(--ac)} .hub-pop{font:500 14px var(--body);color:var(--mute);margin-top:var(--s4);align-items:center} .hub-pop a{font:500 15px var(--body);padding:6px 14px;border-radius:999px;border:1px solid var(--line2);color:var(--text2);background:transparent} .hub-pop a:hover{border-color:var(--ac);color:var(--hi)} .bud{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:var(--s6);margin:0 0 var(--s7)} .bud-head .hub-kick{margin-bottom:var(--s3)} .bud h2{font:700 clamp(24px,2.8vw,30px)/1.25 var(--body);margin:0} .bud-amt{color:var(--ac);font-family:var(--num)} .bud-sub{font-size:16px;margin:var(--s2) 0 var(--s4)} .bud-cats button{font:500 15px var(--body);padding:8px 14px;min-height:40px;background:transparent} .bud-cats button .ic{color:var(--mute)} .bud-types button{font-size:14px;min-height:36px} .bud-types button[aria-pressed=true]{border-color:var(--ac);background:rgba(var(--ac-rgb),.12);color:var(--hi)} #bud-r::-webkit-slider-thumb{border-color:var(--ac)} .bud-scale,.bl-l{font:500 13px/16px var(--body)} .bud-picks{gap:var(--s3)} .bp{padding:var(--s4);border-radius:12px;background:var(--panel2);border:1px solid var(--line);gap:var(--s2) var(--s3)} .bp:hover{border-color:var(--line2)} .bp.top{border-color:rgba(var(--ac-rgb),.6)} .bp-tag{font:500 14px var(--body);color:var(--mute)} .bp.top .bp-tag{color:var(--ac)} .bp h3{font:600 17px/1.3 var(--body)} .bp-tx small{font-size:14px} .bp-per{font:400 14px var(--body);color:var(--mute)} .bp-buy{border-top-color:var(--line)} .bp-buy i{font:700 22px var(--num);color:var(--ac)} .bp-buy small{font-size:14px} .bp-go{flex-basis:100%;margin-top:var(--s2)} .bud-more{font-size:15px} .bud-none{color:var(--text2)} .hub-cats>h2{margin:0 0 var(--s4)} .hub-cats .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:var(--s4);margin:0 0 var(--s7)} .hub-cats .tile{display:grid;grid-template-columns:30px minmax(0,1fr);align-content:start;column-gap:var(--s3);row-gap:var(--s1);grid-column:auto!important;grid-row:auto!important;padding:20px var(--s5);border-radius:14px;background:var(--panel);border:1px solid var(--line);transform:none!important} .hub-cats .tile::before{display:none} .hub-cats .tile,.hub-cats .tile[class]{--ac:var(--cyan)} /* old tiles set their own --ac colour */ .hub-cats .tile:hover{border-color:var(--ac)} .hub-cats .tile-ic,.hub-cats .t-gpu .tile-ic{width:30px;height:30px;color:var(--ac)} .hub-cats .tile>*{grid-column:1/-1}.hub-cats .tile>.tile-ic{grid-column:1;align-self:center}.hub-cats .tile>h3{grid-column:2;align-self:center} .hub-cats .tile h3{margin:0;font:700 20px/1.3 var(--body)} .hub-cats .tile p{display:block;margin:0;font-size:15px;color:var(--mute)} .t-pick{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)} .t-pick small{flex-basis:100%;font-size:14px;color:var(--mute)} .t-pick b{font-weight:600;font-size:16px;color:var(--text)} .t-pick i{font:700 18px var(--num);font-style:normal;color:var(--ac)} .hub-dc{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:var(--s5);margin:0 0 var(--s7);gap:var(--s5)} .hub-dc h2{font:700 21px var(--body);margin:0 0 var(--s1)} .hub-dc p{font-size:15px} .hub-dc-ic{color:var(--ac);width:36px;height:36px} .dc-big{padding:10px 16px;font-size:15px} .hub-guides{margin:0 0 var(--s5)} .hub-guides h2{margin:0 0 var(--s3)} .hub-guides .hub-more{border-top:1px solid var(--line);margin:0;padding:var(--s2) 0} .hub-guides .hub-more:last-child{border-bottom:1px solid var(--line)} .hub-more>summary{min-height:40px;display:flex;align-items:center;gap:var(--s2);font:600 16px var(--body);color:var(--text);margin:0} .hub-more>summary small{font-size:14px} .hub-guides div{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s2) 0 var(--s3)} .hub-guides a{font-size:15px;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:transparent} @media(max-width:1020px){.hub-cats .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.bud-picks{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){ .hub-hero{padding:var(--s5) 0 var(--s5)} .hub-sub{font-size:16px} .srch-big input{min-height:54px;font-size:16px} .hub-pop a{white-space:nowrap} .bud{padding:var(--s4);border-radius:14px} .bud-picks{grid-template-columns:1fr} .bud .bp:not(.top){grid-template-columns:48px minmax(0,1fr)} .bud .bp:not(.top) .bp-img,.bud .bp:not(.top) .thumb{width:48px;height:48px} .bud .bp:not(.top) .bp-go{min-height:44px} .bud .bp:not(.top) .bp-tx small,.bud .bp:not(.top) .bp-per{display:none} .bud .bp:not(.top) .bp-buy{padding-top:6px} .hub-dc p{display:none} .hub-cats .tiles{gap:var(--s3)} .hub-cats .tile{padding:var(--s4)} .hub-cats .tile p{display:none} .hub-cats .tile h3{font-size:17px} .t-pick small{display:none} .t-pick b{font-size:14px;line-height:1.35} .hub-dc{flex-direction:column;align-items:flex-start} } /* ---------- product page: price is the focus ---------- */ .buy{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s5);align-items:start;padding:var(--s5);margin:var(--s2) 0 var(--s5);background:var(--panel);border:1px solid var(--line);border-radius:16px} .buy .thumb.big{width:200px;margin:0;border-radius:12px} .buy-tx{min-width:0} .buy-tx>p{margin:0} .buy-b{margin-bottom:var(--s2)!important} .buy-l{font-size:15px;color:var(--mute);font-weight:500} .buy-p{font:700 44px/1.1 var(--num);color:var(--ac);margin:2px 0 var(--s1)!important} .buy-s{color:var(--text2)} .buy-n{font-size:14px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0 var(--s4)!important} .buy-go .go{font-size:17px;padding:12px 24px} .buy .also{display:block;margin-top:var(--s2);font-size:14px} .buy .hcell{margin-top:var(--s3)} .buy .alrt.big{display:block;margin:var(--s3) 0 0} details.shops-d{margin:0 0 var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:var(--s2) var(--s4)} details.shops-d>summary{min-height:44px;font:600 16px var(--body);color:var(--text)} details.shops-d .tw{border:0;margin:var(--s2) 0} .aff{gap:var(--s2)} .hist{background:var(--panel);border-color:var(--line)} @media(max-width:760px){ .buy{grid-template-columns:minmax(0,1fr);padding:var(--s4);gap:var(--s3)} .buy .thumb.big{width:120px} .buy-p{font-size:36px} .buy-go .go{width:100%} } /* ---------- Can I Run It, market, Black Friday ---------- */ .cr-nl span{font:500 14px var(--body);color:var(--mute)} .cr-nl b,.cr-pr,.mk-stat b{font-family:var(--num);color:var(--ac)} .cr-card.cr-first{border-color:rgba(var(--ac-rgb),.6)} .cr-card.cr-first::before{font:600 13px/1.4 var(--body);background:var(--panel);color:var(--ac)} .cr-warn{border-color:var(--line2);background:var(--panel)} .cr-warn b:first-child{color:var(--text)} .cr-rt td,.cr-rtab td{font-size:15px} .cr-notes p{font-size:15px} .hb-deal i,.hb-top li i,.hd i{color:var(--ac);font-family:var(--num)} .mk-c,.hd-c,.mk-h small,.mk-low h3 small{font:500 14px var(--body)} .mk-p,.mk-d{font-family:var(--num)} .bf-card:hover{border-color:var(--ac)} .bf-note{border-color:var(--line2);background:var(--panel)} .faq details[open]{border-color:var(--line2)} .vs tbody th{font:500 14px var(--body);background:var(--panel2)} .vs thead th{font-size:15px} /* ---------- newsletter + footer: one prompt per page ---------- */ .news{max-width:var(--wide);margin:var(--s7) auto 0;padding:var(--s6) var(--s5);border:1px solid var(--line);border-radius:16px;background:var(--panel)} @media(min-width:1249px){.news{max-width:calc(var(--wide) - 48px)}} .news h3{font:700 22px var(--body);margin:0 0 var(--s4)} .news input[type=email]{min-height:48px} .news button{min-height:48px} .past{font-size:14px} .aff-note{font-size:14px;opacity:1;color:var(--mute);margin-top:var(--s5)} footer{font:400 14px/1.6 var(--body);color:var(--mute);padding:var(--s5) var(--s4) var(--s6)} footer p{font-size:13px;max-width:80ch} footer .fl{font-size:15px;gap:var(--s2) var(--s5)} footer .dc-foot{margin:var(--s1) var(--s1) var(--s3)} footer .dc-foot+.dc-foot{margin-left:var(--s1)} @media(max-width:760px){.news{margin:var(--s6) var(--s4) 0;padding:var(--s5) var(--s4)}footer .fl a{padding:8px 4px}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* leftovers found by tasks/ui_refresh_test.py: nested small/time/code/sup and price-line labels */ small,small small,small time,small a,small b,time.ckd,.bud-scale,.bl-l,.srch kbd,.srch-big kbd,main code,sup{font-size:14px} .bl-l{line-height:18px} /* placeholder thumbs (no product photo): a plain tile; the kind label stays for screen readers only */ .thumb.ph>span,.thumb.ph[class]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .thumb.ph{position:relative;background:var(--panel2)!important;border:1px dashed var(--line2)} .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.two>*{min-width:0} .cr-card>.pc,.cr-card>.pc>div{min-width:0} @media(max-width:760px){.two{grid-template-columns:minmax(0,1fr)}} /* every tile (home, /peripherals/ hub) uses the one accent, no corner glow */ .tile,.tile[class]{--ac:var(--cyan)} .tile::before{display:none} .tile{background:var(--panel);transform:none!important} .tile:hover{border-color:var(--ac)} .hd{background:var(--panel)} .hd-c .ic{color:var(--mute)} @media(max-width:760px){ table.ft td:has(.pc){grid-column:1/-1!important} .mtabs{flex-wrap:wrap}.mtabs a{flex:1 1 auto;padding:8px 12px;text-align:center;align-items:center} .tw:not(.tw-ft) table:has(tr>*:nth-child(4)){min-width:600px} } @media(max-width:760px){.ctl.cr-ctl label:not(.chk),.ctl label:not(.chk){flex:1 1 calc(50% - 8px)!important;min-width:0}} /* budget picker extras from the consoles/peripherals picker (nav.css): star ratings and "also at" on cards */ .bp-tx .rt,.bp-buy .also{font-size:14px} .bp-buy .also{color:var(--mute)} .bud-sep{flex-basis:100%;height:0} @media(max-width:760px){ /* picker categories: one swipeable row on phones (11 categories) */ .bud-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px} .bud-cats::-webkit-scrollbar{display:none} .bud-cats button{flex:none;min-height:44px} .bud-sep{display:none} .bud-sub{display:none} .bud-types{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .bud-types button{flex:none} } /* ================= round 2: no RGB, one cyan accent, one price green, easier phone navigation ================= */ /* no rainbow/multicolour anywhere: style.css + nav.css still carry the old gradients, animations and glows; switch them all off here (select arrows get a plain chevron image, the slider and stars get flat fills below) */ body *:not(select),body *::before,body *::after{background-image:none!important;border-image:none!important;animation:none!important} body *,body *::before,body *::after{-webkit-background-clip:border-box!important;background-clip:border-box!important} body *:not(.logo img){filter:none!important} select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a6aebc' stroke-width='2'/%3E%3C/svg%3E")!important;background-size:12px 8px!important;background-position:right 12px center!important;background-repeat:no-repeat!important;padding-right:34px} [data-theme="light"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234a5262' stroke-width='2'/%3E%3C/svg%3E")!important} .sr-panel{background:var(--panel)} .bl-fill{background:var(--ac)} #bud-r::-webkit-slider-runnable-track{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%2300f0ff'/%3E%3C/svg%3E") 0/var(--f,0%) 100% no-repeat,var(--track)!important} [data-theme="light"] #bud-r::-webkit-slider-runnable-track{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%2300707d'/%3E%3C/svg%3E") 0/var(--f,0%) 100% no-repeat,var(--track)!important} #bud-r::-moz-range-progress{background:var(--ac)} #bud-r{accent-color:var(--ac)} .sr-tabs button.on,.mtabs a.on,.bud-cats button[aria-pressed=true]{background:var(--ac)} .banner{background:var(--panel);color:var(--text);border-bottom-color:var(--line2)} .dc-btn,.dc-btn.rd,.dc-btn.xx{background:transparent} .cr-none{color:var(--text2)} /* the logo keeps its files; its magenta/violet/green glitch layers are drawn in the one cyan (SVG filters in wrap.js) */ header.na .logo .lg-d{filter:url(#sp-cy-d)} header.na .logo .lg-l{filter:url(#sp-cy-l)} .sp-fx{position:absolute;width:0;height:0;overflow:hidden} /* every price: one green, via one class (.price, added by lib/price.js and search.js); size/weight still follow the context */ .price,.price[class],a.price,td.price,.lp.price{color:var(--price)!important;-webkit-text-fill-color:currentColor} .lb td.pr,td.p.pr,.buy-p,.bp-buy i,.t-pick i,.sr-p,.cr-pr,.cr-nl b,.hb-deal i,.hb-top li i,.hd i,.mk-p b{color:var(--price)} .mk-p s,.mk-p s.price{opacity:.85} /* "lowest we've seen", real deals and drops are said in words (badge text), not by colour: outlined, neutral text, cyan outline */ .badge.low,.v-deal{color:var(--text);border-color:var(--ac);background:transparent} .badge.low::before{content:"▼ ";color:var(--ac)} .v-up,.badge.drop{color:var(--text2);border-color:var(--line2);background:transparent} .va.dn,.vsm.dn,.mk-d.dn,.va.up,.vsm.up,.mk-d.up,.mk-d small{color:var(--text2)} .va.dn::before,.vsm.dn::before{content:"▼ "}.va.up::before,.vsm.up::before{content:"▲ "} /* live.js marks a price that changed since the build: same green, plus an arrow */ .lp-dn,.lp-up{color:var(--price)} .lp-dn::after{content:" ▼";font-size:.7em}.lp-up::after{content:" ▲";font-size:.7em} .lv-tag{color:var(--ac);border-color:var(--ac);background:transparent} /* ---------- header extras (hidden on desktop) ---------- */ .na-sbtn,.chips,.totop,.na-bd,.na-msrch{display:none} .na-sbtn{flex:none;place-items:center;width:44px;height:44px;padding:0;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--text)} .na-sbtn .ic{width:22px;height:22px} .na-sbtn[aria-expanded=true]{border-color:var(--ac);color:var(--hi)} /* the Menu panel (761-1219px: dropdown; phones: full-width sheet) */ .na-mob{display:block;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 90px);overflow:auto;overscroll-behavior:contain;padding:8px 12px 12px} .na-mob .na-home-l{margin:0 0 2px} .na-g{margin:12px 4px 6px;font:600 14px var(--body);color:var(--mute)} .na-gl{display:grid;grid-template-columns:1fr 1fr;gap:4px} .na-mob a,.na-msrch{min-height:48px;font:500 17px/1.25 var(--body);padding:10px 14px;border-radius:10px} .na-mob .na-gl a{background:var(--panel2);border:1px solid var(--line)} .na-mob a.on{background:rgba(var(--ac-rgb),.14);border-color:var(--ac)} .na-soc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 2px} .na-mob .na-soc a{min-height:44px;font-size:15px;padding:8px 14px;border-radius:8px} .na-msrch{align-items:center;gap:10px;width:100%;margin:0 0 8px;border:1px solid var(--line2);background:var(--bg2);color:var(--text);font-weight:400;cursor:pointer} .na-msrch .ic{width:20px;height:20px;color:var(--mute)} @media(max-width:760px){ /* compact one-row header that stays at the top: logo (home), search, theme, Menu */ header.na{position:sticky;top:0;flex-wrap:wrap;gap:6px;padding:8px 12px;min-height:60px} header.na .logo img{height:20px;width:auto} .na-sbtn{display:inline-grid} header.na .srch,header.na.na-home .srch{display:none} header.na.na-sopen .srch{display:block;visibility:visible;opacity:1;order:10;flex:1 1 100%;margin:4px 0 2px} .na-mob{position:fixed;left:0;right:0;top:var(--hh,60px);width:auto;max-height:calc(100dvh - var(--hh,60px));border-radius:0 0 16px 16px;border-width:0 0 1px;padding:12px 16px 20px} .na-msrch{display:flex} .na-mob{z-index:70} html.na-lock{overflow:hidden} /* category chips under the header: one tap to switch; scrolls sideways inside itself only */ .chips{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg);max-width:100%} .chips::-webkit-scrollbar{display:none} .chips a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);color:var(--text2);font:500 15px var(--body);text-decoration:none;white-space:nowrap} .chips a.on{background:var(--ac);border-color:var(--ac);color:var(--on-ac);font-weight:600} /* filters + sort: one compact button that opens the panel (filters.js toggles .fbar.open) */ .ftoggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:0 16px;margin:var(--s3) 0 0;border-radius:10px;font:600 16px var(--body);background:var(--panel)} .ftoggle[aria-expanded=true]{border-color:var(--ac);border-bottom-left-radius:0;border-bottom-right-radius:0} .ftoggle[aria-expanded=true]::after{content:"−"} .fbar.open{margin-top:0;border-top-left-radius:0;border-top-right-radius:0;border-color:var(--ac)} .fbar .cnt{flex-basis:100%} /* big tap targets on cards */ .lb.ft td.shop .go,.lb .go,.bp-go,.go{min-height:48px} /* back to top: small cyan pill, bottom right, only while scrolling back up a long page */ .totop{display:inline-flex;position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--ac);color:var(--on-ac);font:600 15px var(--body);text-decoration:none;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s} .totop::before{content:"↑"} .totop.show{opacity:1;transform:none;pointer-events:auto} .totop:hover,.totop:focus-visible{color:var(--on-ac);box-shadow:0 0 0 3px rgba(var(--ac-rgb),.3)!important} } /* round 2 fixes from the phone screenshots */ .bl-l.pk{color:var(--hi);background:var(--bg2);border-color:var(--ac)} .bl-l.pk::after{background:var(--ac)} .na-gl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .na-mob .na-gl a{min-width:0;overflow-wrap:anywhere} @media(max-width:760px){ .chips{flex-wrap:nowrap!important;margin:0!important} .fbar.open{display:flex;flex-wrap:wrap;gap:12px} .fbar.open label{flex:1 1 calc(50% - 6px)!important;min-width:0!important;width:auto} .fbar.open label:has(#sort){flex-basis:100%!important} .fbar.open label.chk{flex-basis:100%!important} .fbar.open .clear{flex:1 1 100%} } .na-mob a{white-space:normal} @media(max-width:760px){.btn{white-space:normal;max-width:100%;text-align:center}} @media(max-width:760px){[id]{scroll-margin-top:72px}} /* ---------- round 3: short intro line + "How we rank" toggle (lib/howto.js) ---------- */ .lede{font-size:16px;line-height:1.5;color:var(--text2);margin:var(--s2) 0 var(--s1);max-width:75ch} details.howto{margin:0 0 var(--s4)} details.howto>summary{display:inline-flex;align-items:center;gap:6px;min-height:32px;font:600 15px var(--body);color:var(--ac);cursor:pointer;list-style:none;border-radius:6px} details.howto>summary::-webkit-details-marker{display:none} details.howto>summary::before{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(-45deg);transition:transform .15s} details.howto[open]>summary::before{transform:rotate(45deg)} details.howto>summary:hover{text-decoration:underline} details.howto>summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px} .howto-b{border-left:2px solid var(--line2);padding:var(--s1) 0 var(--s1) var(--s3);margin:var(--s2) 0 0;max-width:75ch} .howto-b>p,.howto-b .fx{font-size:15px;line-height:1.6;color:var(--mute);margin:0 0 var(--s2);border:0;padding:0;max-width:none!important} .howto-b>p:last-child{margin-bottom:0} @media (prefers-reduced-motion:reduce){details.howto>summary::before{transition:none}} @media (max-width:1023px){details.howto>summary{min-height:44px}} /* ---------- round 3: menu on the left (wrap.js aside#na-drawer, ui.js) ---------- <1024px: header = Menu button, logo, search, theme; the aside is a drawer sliding in from the left. >=1024px: no top header; the aside is a fixed left sidebar and the page sits to its right. */ :root{--sbw:232px} .na-mbtn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 10px;border:1px solid var(--line2);border-radius:8px;background:transparent;color:var(--text);font:600 15px var(--body);cursor:pointer} .na-mbtn .ic{width:20px;height:20px} .na-mbtn:hover,.na-mbtn[aria-expanded=true]{border-color:var(--ac);color:var(--hi)} header.na .na-mbtn+.logo{margin-left:4px} .na-side .logo .lg-d{filter:url(#sp-cy-d)} .na-side .logo .lg-l{filter:url(#sp-cy-l)} .na-side .logo .lg-l,[data-theme="light"] .na-side .logo .lg-d{display:none} [data-theme="light"] .na-side .logo .lg-l{display:block} .na-side .logo{display:inline-flex;align-items:center;min-height:44px;line-height:0;background:none;animation:none;filter:none} .na-side .logo img{height:22px;width:auto} .na-side-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)} .na-close{display:none;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line2);border-radius:8px;background:transparent;color:var(--text);cursor:pointer} .na-close .ic{width:22px;height:22px} .na-close:hover{border-color:var(--ac);color:var(--hi)} .na-side .na-mob{position:static;display:block;width:auto;max-height:none;overflow:visible;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} .na-side .na-mob a{display:flex;align-items:center;text-decoration:none;color:var(--text)} .na-side .na-mob a[aria-current=page]{color:var(--hi);background:rgba(var(--ac-rgb),.14);border-color:var(--ac)} .na-side .na-soc{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .na-side .na-soc .thm{display:inline-grid;place-items:center} .na-side .na-soc a{min-height:44px;font-size:15px;padding:8px 12px;border-radius:8px} html.na-lock,html.na-lock body{overflow:hidden} @media(max-width:1023px){ header.na{flex-wrap:nowrap;gap:8px;min-height:60px;padding:8px 16px} header.na .logo{margin-right:auto} .na-side{position:fixed;left:0;top:0;bottom:0;z-index:80;width:min(85vw,360px);display:flex;flex-direction:column;gap:var(--s2);padding:10px 16px calc(24px + env(safe-area-inset-bottom,0px)); background:var(--panel);border-right:1px solid var(--line2);box-shadow:0 0 40px rgba(0,0,0,.5);overflow-y:auto;overscroll-behavior:contain; transform:translateX(-100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s} html.na-dopen .na-side{transform:none;visibility:visible;transition:transform .25s ease} html.na-dopen .na-bd{display:block;position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.55)} .na-close{display:inline-grid} header.na .thm,.na-side .na-soc .thm{width:44px;height:44px} .na-side-srch{display:none!important} .na-side .na-msrch{display:flex;margin:4px 0 0} .na-side .na-soc{margin-top:var(--s3)} } @media(min-width:761px) and (max-width:1023px){ header.na .srch{order:0;flex:0 1 380px;min-width:0;margin:0} header.na .srch kbd{display:none} } @media(max-width:760px){ header.na{padding:8px 12px;gap:6px} header.na .logo img{height:18px} header.na.na-sopen{flex-wrap:wrap} } @media(max-width:360px){.na-mbtn span{display:none}.na-mbtn{width:44px;padding:0;justify-content:center}} @media(prefers-reduced-motion:reduce){.na-side{transition:none!important}} @media(min-width:1024px){ body{padding-left:var(--sbw)} header.na{display:none} .na-side{position:fixed;left:0;top:0;bottom:0;z-index:45;width:var(--sbw);display:flex;flex-direction:column;padding:16px 12px 16px; background:var(--hdr);border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin} .na-side-top{padding:0 6px} .na-side-srch{display:block;flex:none;margin:10px 0 6px;max-width:none} .na-side>*{flex-shrink:0}.na-side .na-mob{flex:none} .na-side-srch input{min-height:40px;font-size:15px;padding-right:34px} .na-side .na-g{margin:14px 10px 4px;font:600 14px var(--body);color:var(--mute)} .na-side .na-gl{display:flex;flex-direction:column;gap:1px} .na-side .na-mob a{min-height:34px;padding:5px 10px;border:0;border-radius:8px;background:transparent;font:500 15px/1.3 var(--body);color:var(--text2)} .na-side .na-mob a:hover{color:var(--hi);background:rgba(var(--ac-rgb),.08)} .na-side .na-mob a[aria-current=page]{color:var(--hi);background:rgba(var(--ac-rgb),.14);box-shadow:inset 3px 0 0 var(--ac)!important} .na-side .na-soc{margin-top:auto;padding:14px 4px 0;border-top:1px solid var(--line)} .na-side .na-soc .thm{width:40px;height:40px} .na-side .na-soc a{min-height:36px;padding:6px 10px} .tw-ft table.ft thead th{top:0} .chips{display:none!important} } /* sidebar layouts: the content column is ~230px narrower, so card grids use minmax(0,1fr) and tables get the compact cells sooner */ @media(min-width:1024px){.hd-row{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1280px){.hd-row{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:1440px){.hd-row{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(min-width:1024px) and (max-width:1279px){ .lb td:has(>.pc){min-width:200px}td.shop{min-width:0}.lb .go{white-space:normal;text-align:center}td,th{padding:12px 10px}.lb .thumb{display:none} } /* wide tables on SEO / tool pages scroll inside their own frame (their sticky header is not needed there) */ @media(min-width:1001px){.pg-landing .tw-ft,.pg-vs .tw-ft,.pg-cheap .tw-ft,.pg-bf .tw-ft,.pg-canrun .tw-ft{overflow-x:auto}} @media(max-width:760px){.lb.ft tbody,.lb.ft tr{max-width:100%;min-width:0}.lb.ft td{min-width:0;overflow-wrap:anywhere}.lb.ft td time.ckd,.lb.ft td .va,.lb.ft td .hcell{white-space:normal}} /* ================= round 4: polish ================= */ /* drawer without JS: Menu links to #na-drawer, CSS :target slides it in; close/backdrop link to #close. ui.js adds html.na-js and takes over */ a.na-mbtn,a.na-close{text-decoration:none} @media(max-width:1023px){ html:not(.na-js) .na-side:target{transform:none;visibility:visible;transition:transform .25s ease} html:not(.na-js) .na-side:target+.na-bd{display:block;position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.55)} html:not(.na-js):has(.na-side:target),html:not(.na-js):has(.na-side:target) body{overflow:hidden} } /* notes under tables: same toggle as the intro one (wrap.js fold) */ details.howto-n{margin:var(--s5) 0 var(--s4)} /* sidebar search results (>=1024px): the sidebar scrolls, so the panel opens beside it instead of being clipped inside it */ @media(min-width:1024px){.na-side .sr-panel{position:fixed;left:calc(var(--sbw) + 8px);right:auto;top:12px;width:min(600px,calc(100vw - var(--sbw) - 32px));min-width:0;max-height:calc(100vh - 24px)}} /* newsletter box lines up with the content column (it ran edge to edge between 761 and 1440px) and sits closer to the page */ @media(min-width:761px){.news{max-width:none;margin:var(--s6) max(24px,calc((100% - var(--wide))/2 + 24px)) 0}} /* budget picker beside the sidebar: 4 cards are too narrow below 1280px */ @media(min-width:1024px) and (max-width:1279px){.bud-picks{grid-template-columns:repeat(2,minmax(0,1fr))}} /* product page "Fits at Q4" table: keep "✅ 4.7 GB" on one line on phones */ .pg-product .tw table:not(.ft) td+td{white-space:nowrap} /* footer links on phones: a tidy 2×2 grid instead of one link left alone on its own row */ @media(max-width:480px){footer .fl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px;margin:0 auto var(--s3)}footer .fl a{text-align:center}} /* no layout shift when the Google fonts arrive (they use display=swap): local fallbacks sized to the same text width (ratios measured in Chrome against Arial-metric Liberation Sans/Mono: Inter 400 1.063, Inter 600 1.02, JetBrains Mono 1.0) */ @font-face{font-family:"Inter fb";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans");font-weight:300 549;size-adjust:106.3%;ascent-override:91%;descent-override:22.7%;line-gap-override:0%} @font-face{font-family:"Inter fb";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");font-weight:550 900;size-adjust:102%;ascent-override:95%;descent-override:23.7%;line-gap-override:0%} @font-face{font-family:"JBMono fb";src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono");size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%} /* budget picker: with JS on (html.sp-js, set by theme.js in ) keep the slider's room from the first paint, so the page doesn't jump when budget.js shows it */ html.sp-js .bud:not(.js) .bud-ctl[hidden]{display:block!important;visibility:hidden} html.sp-js .bud:not(.js) .bud-scale{display:block} html.sp-js .bud:not(.js) .bl{--lanes:3} @media(max-width:600px){html.sp-js .bud:not(.js) .bl{--lanes:2}} /* one keyboard focus ring everywhere: some buttons and form fields drew it in the background or a grey (invisible), now all cyan */ :is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--ac)!important;outline-offset:2px} :is(input,select,textarea):focus-visible{outline-offset:1px} /* filters with zero matches: say so under the table header instead of showing an empty frame ("0 of N shown" stays in the bar) */ .tw-ft:has(tbody):not(:has(tbody tr:not([hidden])))::after{content:"Nothing matches these filters. Try a wider price range or press Clear filters.";display:block;padding:var(--s5) var(--s4);color:var(--mute);font:400 15px/1.5 var(--body);text-align:center} /* sidebar search: hide the "/" hint once something is typed (it sat on top of the clear ×) */ .srch input:not(:placeholder-shown)~kbd{display:none} /* market stat tiles: a long "checked 1 h 38 min ago" may wrap instead of running out of the tile (390 + 1024px) */ .mk-stat time.ckd{white-space:normal} /* compact tables (761-1000 + 1024-1279px): "View at " fits on one line for all but the longest shop names (tighter button, same link) */ @media(min-width:761px) and (max-width:1000px),(min-width:1024px) and (max-width:1279px){.lb .go{font-size:14px;padding:6px 10px}td.shop{min-width:136px}} @media(min-width:761px) and (max-width:1000px){.pg-laptops td.shop{min-width:0}} /* best-under / guide tables at tablet + small-desktop widths: the price-history cell (sparkline, "Low £x", "▼ 18% below avg") wraps inside its column instead of pushing the 7-column table into a sideways scroll */ @media(min-width:761px) and (max-width:1279px){.lb td .hcell{white-space:normal;max-width:150px}.lb td .hcell .va{white-space:normal}} @media(min-width:761px) and (max-width:1279px){.pg-landing .lb td:has(>.pc){min-width:150px}.pg-landing td.shop{min-width:120px}} /* ================= menu_mobile (21 Oct 2026): phone/tablet top bar + drawer, all below 1024px (the desktop sidebar is untouched) ================= */ /* Logo: only the SPECPRICE wordmark, not the SP mark beside it. The logo files are unchanged: the img is cropped to its right-hand 794/1056 (the mark sits at x 4-214, the wordmark at 309-1052) with object-fit, so alt="SpecPrice" still names the link. */ @media(max-width:1023px){ header.na .logo img,.na-side .logo img{aspect-ratio:794/130;width:auto;object-fit:cover;object-position:100% 50%} /* drawer = the desktop sidebar look: one left-aligned column, no boxed tiles, the same text for every row, thin lines between groups */ .na-side{width:min(86vw,320px);padding:10px 12px calc(24px + env(safe-area-inset-bottom,0px))} .na-side-top{padding:0 0 0 2px} .na-side .na-mob{box-shadow:none!important} .na-side .na-gl{display:flex;flex-direction:column;gap:1px} .na-side .na-mob a{min-height:44px;padding:8px 10px;border:0;border-radius:8px;background:transparent;font:500 16px/1.3 var(--body);color:var(--text2);text-align:left;justify-content:flex-start;white-space:normal;overflow-wrap:normal} .na-side .na-mob a:hover{color:var(--hi);background:rgba(var(--ac-rgb),.08)} .na-side .na-mob a[aria-current=page]{color:var(--hi);background:rgba(var(--ac-rgb),.14);box-shadow:inset 3px 0 0 var(--ac)!important} .na-side .na-g{margin:10px 0 4px;padding:12px 10px 0;border-top:1px solid var(--line);font:600 14px var(--body);color:var(--mute)} .na-side .na-mob .na-home-l{margin:2px 0 0} .na-side .na-soc{margin-top:var(--s3);padding:14px 4px 0;border-top:1px solid var(--line)} } @media(max-width:760px){header.na .logo img{height:20px}} /* touch screens: no sticky hover tint left on the row under the finger after a tap/scroll */ @media(max-width:1023px) and (hover:none){.na-side .na-mob a:hover:not([aria-current]){color:var(--text2);background:transparent}} /* ================= design mock C: PREMIUM DARK (Stripe-like) ================= Sora 600 headings, Inter body, JetBrains Mono for prices/numbers. Depth from shading (card fills + soft shadows), not borders. Cyan (#00f0ff / #00707d) only on clickable things; one price green (#4fdc8a / #0a7a3d). The wordmark font is only in the logo image. */ :root,[data-theme="dark"]{ --bg:#0b0e14;--bg2:#0f131a;--panel:#12161f;--panel2:#1a1f2a;--hdr:#0e1219;--track:#262d3a; --line:#1f2633;--line2:#2b3343;--text:#e6edf3;--text2:#c2cad5;--mute:#8b95a3;--dim:#8b95a3;--hi:#f5f8fb;--on-ac:#03161a; --ac:#00f0ff;--ac-rgb:0,240,255;--price:#4fdc8a; --panel-rgb:18,22,31;--panel2-rgb:26,31,42;--bg-rgb:11,14,20;--bg2-rgb:15,19,26; --zebra:rgba(255,255,255,.018);--hov:rgba(255,255,255,.035); --shc:0 1px 2px rgba(0,0,0,.35),0 8px 28px rgba(0,0,0,.28);--shc-h:0 1px 2px rgba(0,0,0,.4),0 12px 36px rgba(0,0,0,.4); --glow:0 0 16px rgba(0,240,255,.35) } [data-theme="light"]{ --bg:#f6f7f9;--bg2:#fff;--panel:#fff;--panel2:#f1f3f6;--hdr:#fff;--track:#dfe3ea; --line:#e6e9ee;--line2:#d3d8e0;--text:#10151c;--text2:#2b333e;--mute:#525c6b;--dim:#525c6b;--hi:#0a0e14;--on-ac:#fff; --ac:#00707d;--ac-rgb:0,112,125;--price:#0a7a3d; --panel-rgb:255,255,255;--panel2-rgb:241,243,246;--bg-rgb:246,247,249;--bg2-rgb:255,255,255; --zebra:rgba(16,24,40,.022);--hov:rgba(16,24,40,.04); --shc:0 1px 2px rgba(16,24,40,.05),0 4px 18px rgba(16,24,40,.06);--shc-h:0 1px 2px rgba(16,24,40,.07),0 10px 30px rgba(16,24,40,.1); --glow:0 0 14px rgba(0,112,125,.28) } :root{ --disp:"Sora","Sora fb","Inter",system-ui,sans-serif;--h1:var(--disp); --r:12px;--s7:44px } @font-face{font-family:"Sora fb";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");font-weight:500 800;size-adjust:104%} body{font:400 16px/1.6 var(--body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased} /* headings: Sora 600, tight tracking, never caps */ h1,h2,h3,.hub-cats .tile h3,.bud h2,.hub-dc h2,.bp h3,.news h3{font-family:var(--disp)!important;font-weight:600!important;letter-spacing:-.015em!important;color:var(--hi)} h1,.hub-hero h1{font-size:clamp(28px,3.4vw,40px);line-height:1.15} h2{font-size:22px;line-height:1.3;margin:var(--s7) 0 var(--s4)} h3{font-size:17px} /* numbers + prices: JetBrains Mono, one green */ .price,td.p,td.b,.lb td.pr,.bp-buy i,.t-pick i,.hb-p i,.sr-p,.cnt,.rank,.bud-amt,.bud-scale,.bl-l{font-family:var(--num)!important} .price{font-weight:600} /* ---------- mock C: surfaces. Cards = fill + soft shadow, no outline; nothing boxed inside a box ---------- */ .tw,.fbar,.ctl,.bud,.hub-cats .tile,.hub-dc,.hb-card,.news,.faq details,.hist,.bf-card,.bf-how,.catsign,.na-mob:not(.na-side .na-mob),.sr-panel,.hd,.mk-ck,.tile{border:0!important;border-radius:var(--r)!important;background:var(--panel);box-shadow:var(--shc)!important} .fbar,.ctl{padding:var(--s5)!important;gap:var(--s4) var(--s5)!important} .bud{padding:var(--s5) var(--s5) var(--s4)!important;margin:0 0 var(--s7)!important} .bp,.more-b,.alrt-f{border:0!important;background:var(--panel2);border-radius:var(--r)!important} .bp.top{background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line2)!important} .bp-tag,.bp.top .bp-tag{color:var(--mute)} .bp-buy{border-top:0!important;padding-top:var(--s2)} .t-pick{border-top:0!important;padding-top:0;margin-top:var(--s3)} .thumb{border:0!important;border-radius:10px} .fx{border-left:0!important;padding-left:0!important} header.na{border-bottom:0!important;box-shadow:0 1px 0 var(--line)!important} .hub-kick{border:0!important;padding:0!important;background:none!important} /* controls: 12px radius; fields are sunk fills, buttons raised fills */ input,select,button,.srch input,.go,.btn,.bp-go,.amz,.ebay,.dc-btn,.mtabs a,.na-mbtn,.na-close,.thm{border-radius:var(--r)!important} input:not([type=checkbox]):not([type=range]),select{background-color:var(--bg);border:1px solid transparent} .srch input,.srch-big input{background:var(--panel)!important;border:1px solid transparent!important;box-shadow:var(--shc)!important} [data-theme="light"] input:not([type=checkbox]):not([type=range]),[data-theme="light"] select{background-color:var(--panel2);border-color:var(--line)} [data-theme="light"] .srch input{border-color:var(--line)!important} input:focus,select:focus,.srch.sr-open input,.srch input:focus{border-color:var(--ac)!important;box-shadow:0 0 0 3px rgba(var(--ac-rgb),.22)!important} button,.na-mbtn,.na-close,.thm,.fbar .clear,.ctl .clear,.ftoggle{background:var(--panel2);border:1px solid transparent!important;color:var(--text)} button:hover,.na-mbtn:hover,.na-close:hover,.fbar .clear:hover,.ctl .clear:hover{background:rgba(var(--ac-rgb),.1);color:var(--hi)} .amz,.ebay,.dc-btn,.dc-btn.rd,.dc-btn.xx{background:var(--panel2)!important;border:0!important;color:var(--text)} .amz:hover,.ebay:hover,.dc-btn:hover{background:rgba(var(--ac-rgb),.12)!important;color:var(--hi)} .pill,.badge,.verdict,.reg,.conv,.samp,.badge.drop,.badge.new,.v-same,.v-early,.v-up,.badge.low,.v-deal,.lv-tag{border:0!important;background:var(--panel2)!important;color:var(--text2)!important;border-radius:6px} .badge.low::before{color:var(--price)} /* primary buttons: solid cyan + the one soft glow */ .go,.btn,.bp-go,.news button,.alrt-f button,.catsign button,button.on,.sr-tabs button.on,.bud-cats button[aria-pressed=true],.mtabs a.on{background:var(--ac)!important;color:var(--on-ac)!important;border-color:transparent!important;box-shadow:var(--glow)!important} .lb .go{background:transparent!important;color:var(--ac)!important;border:1px solid rgba(var(--ac-rgb),.55)!important;box-shadow:none!important} .lb .go:hover,.lb .go:focus-visible{background:var(--ac)!important;color:var(--on-ac)!important;box-shadow:var(--glow)!important} /* ---------- mock C: tables. No per-row lines: spacing, faint zebra, hover tint ---------- */ td,th{border-bottom:0!important} th{background:transparent!important;color:var(--mute);font:500 13px var(--body)!important;box-shadow:inset 0 -1px 0 var(--line)!important} .tw-ft table.ft thead th{background:var(--panel)!important} td{padding-top:16px;padding-bottom:16px} tbody tr:nth-child(even){background:var(--zebra)} tbody tr:hover{background:var(--hov)} tbody tr:hover td:first-child{box-shadow:none!important} .rank,.rank.r1,.rank.r2,.rank.r3{color:var(--mute);font-weight:500} .lb .nm{color:var(--hi)} .lb .nm:hover{color:var(--ac)} .mtabs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--panel);border-radius:14px;box-shadow:var(--shc)!important} .mtabs a{border:0!important;background:transparent;color:var(--text2)} .mtabs a:hover{background:var(--hov);color:var(--hi)} .stabs a{border-color:transparent!important;background:var(--panel2)} /* ---------- mock C: cyan only where you can click ---------- */ .hub-cats .tile-ic,.hub-cats .t-gpu .tile-ic,.hub-dc-ic,.bud-cats button .ic{color:var(--mute)} .hub-cats .tile:hover .tile-ic{color:var(--ac)} .bud-amt{color:var(--hi)} .spark{color:var(--text2)}.spark circle{fill:var(--text2)} main code{color:var(--text)} .rt .st::after{color:var(--text2)} .cnt{color:var(--mute)} .lp-dn::after,.lp-up::after{color:var(--price)} time.ckd::before{background:var(--price)} /* ---------- mock C: sidebar + drawer. No dividing lines; the active item is the one cyan glow ---------- */ .na-side{border-right:0!important} @media(min-width:1024px){.na-side{background:var(--hdr);box-shadow:1px 0 0 var(--line)!important}} .na-side .na-g{border-top:0!important;font:600 12px var(--body)!important;color:var(--mute);letter-spacing:.06em!important;text-transform:uppercase!important} .na-side .na-soc{border-top:0!important} .na-side .na-mob a{border-radius:10px!important} .na-side .na-mob a[aria-current=page]{color:var(--hi)!important;background:rgba(var(--ac-rgb),.1)!important;box-shadow:inset 3px 0 0 var(--ac),0 0 16px rgba(var(--ac-rgb),.35)!important} [data-theme="light"] .na-side .na-mob a[aria-current=page]{box-shadow:inset 3px 0 0 var(--ac),0 0 14px rgba(var(--ac-rgb),.22)!important} @media(max-width:1023px){.na-side{background:var(--hdr)!important;box-shadow:0 0 60px rgba(0,0,0,.5)!important}} /* ---------- mock C: home ---------- */ .hub-hero{padding:var(--s7) 0 var(--s6)} .hub-kick{color:var(--mute);font:500 14px var(--body)} .hub-pop a{border:0!important;background:var(--panel);box-shadow:var(--shc)!important;color:var(--text2)} .hub-pop a:hover{color:var(--ac);background:var(--panel2)} .hub-cats>h2,.hub-best h2{margin:0 0 var(--s4)} .hub-cats .tiles{gap:var(--s4);margin:0 0 var(--s7)} .hub-cats .tile{padding:var(--s5)!important;transition:box-shadow .15s,background .15s} .hub-cats .tile:hover{background:var(--panel2);box-shadow:var(--shc-h)!important} .hub-cats .tile h3{font-size:18px} .t-pick b{color:var(--text)} .hub-best{margin:0 0 var(--s7)} .hb-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4);margin:0 0 var(--s4)} .hb-head h2{margin:0} .hb-head a{font-size:15px;text-decoration:none} .hb-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} .hb-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s3) var(--s4);align-items:center;padding:var(--s5);color:var(--text);text-decoration:none;transition:box-shadow .15s,background .15s} .hb-card:hover{background:var(--panel2);box-shadow:var(--shc-h)!important;color:var(--text)} .hb-card .thumb{width:56px} .hb-tx{display:flex;flex-direction:column;min-width:0} .hb-tx small{font-size:13px;color:var(--mute)} .hb-tx b{font:600 18px/1.3 var(--disp);color:var(--hi);letter-spacing:-.01em!important} .hb-card:hover .hb-tx b{color:var(--ac)} .hb-spec{font-size:14px;color:var(--mute)} .hb-p{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)} .hb-p i{font-style:normal;font-size:22px;font-weight:600} .hb-p small{font-size:14px;color:var(--mute)} .hub-dc{padding:var(--s5)!important} .hub-guides .hub-more,.hub-guides .hub-more:last-child{border:0!important;padding:var(--s1) 0} .hub-guides a{border:0!important;background:var(--panel);box-shadow:var(--shc)!important} .hub-guides a:hover{background:var(--panel2)} .news{margin-top:var(--s7)!important;padding:var(--s6) var(--s5)!important} /* budget slider: flat cyan track (it's a control), more room for the price line */ .bud-scale{color:var(--mute);height:22px} .bl{height:calc(20px + var(--lanes)*30px);margin-top:18px;margin-bottom:var(--s5)} .bl-l{bottom:calc(24px + var(--k,0)*30px);border:0!important;background:var(--panel2);color:var(--text2)} .bl-l::after{height:calc(var(--k,0)*30px + 6px)} .bl-l.in{color:var(--hi);background:var(--panel2)} .bl-l.pk{color:#04140b;background:var(--price)} [data-theme="light"] .bl-l.pk{color:#fff} .bl-l.pk::after{background:var(--price)} .bl-d.pk{border-color:var(--price);background:var(--price)} html.sp-js .bud:not(.js) .bl{--lanes:3} /* ---------- mock C: tablet + phone ---------- */ @media(max-width:1020px){.hb-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1024px) and (max-width:1279px){.hb-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:767px){ :root{--s7:40px} main{padding:var(--s4) var(--s4) var(--s3)} /* hero = H1 + one short line (shops · products), search, then category chips, then real picks, then the budget picker */ .hub-hero{display:flex;flex-direction:column;padding:var(--s4) 0 var(--s5)} .hub-hero h1{order:0;font-size:28px;margin:0 0 var(--s2)} .hub-hero .hub-kick{order:1;margin:0 0 var(--s4)} .hub-hero .srch{order:2}.hub-hero .hub-pop{order:3} .hub-sub{display:none} .hub-cats>h2{font-size:15px;font-family:var(--body)!important;font-weight:500!important;color:var(--mute);margin:0 0 var(--s3)} .hub-cats .tiles{display:flex!important;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s6)} .hub-cats .tile{display:inline-flex!important;align-items:center;gap:8px;padding:9px 14px!important;border-radius:999px!important;min-height:44px} .hub-cats .tile p,.hub-cats .tile .t-pick{display:none!important} .hub-cats .tile h3{font:500 15px var(--body)!important;letter-spacing:0!important;color:var(--text)} .hub-cats .tile-ic,.hub-cats .t-gpu .tile-ic{width:18px!important;height:18px!important} .hub-best h2,.bud h2{font-size:21px} .hb-list{grid-template-columns:minmax(0,1fr);gap:var(--s3)} .hb-card{grid-template-columns:48px minmax(0,1fr) auto;padding:var(--s4)} .hb-card .thumb{width:48px} .hb-p{grid-column:auto;flex-direction:column;align-items:flex-end;gap:0} .hb-p i{font-size:19px}.hb-p small{font-size:13px} .hb-spec{font-size:13px} .bud{padding:var(--s4)!important} /* slider: 3 scale labels instead of 5, taller lanes so labels never touch */ .bud-scale span:nth-child(2),.bud-scale span:nth-child(4){display:none} .bl{height:calc(20px + var(--lanes)*32px)} .bl-l{bottom:calc(24px + var(--k,0)*32px);font-size:12px!important} .bl-l::after{height:calc(var(--k,0)*32px + 6px)} /* listing cards */ .lb.ft tr,table.ft tr{border:0!important;background:var(--panel)!important;box-shadow:var(--shc)!important;border-radius:var(--r)!important} .tw-ft{background:none!important;box-shadow:none!important} .ftoggle{border:0!important;background:var(--panel)!important;box-shadow:var(--shc)!important} .news{margin:var(--s7) var(--s4) 0!important;padding:var(--s5) var(--s4)!important} } /* only the top budget pick gets the solid glowing button; the others are outlined (still cyan: they're clickable) */ .bud .bp:not(.top) .bp-go{background:transparent!important;color:var(--ac)!important;box-shadow:inset 0 0 0 1px rgba(var(--ac-rgb),.55)!important} .bud .bp:not(.top) .bp-go:hover{background:var(--ac)!important;color:var(--on-ac)!important} @media(max-width:767px){.hub-cats .tile{flex-direction:row!important;grid-template-columns:none!important}.hub-cats .tile>*{margin:0!important}} .bud .bl-l.pk .price,.bud .bl-l.pk .price[class]{color:inherit!important} .na-side .srch input{background:var(--panel2)!important;box-shadow:none!important} /* ================= design C: every page type (21 Oct 2026, design C PREMIUM) ================= Same tokens as above (one place: --bg/--panel/--panel2/--text/--mute/--ac/--price/--r/--shc/--glow). This layer only maps the remaining page components onto them: surfaces = fill + soft shadow, no outlines; cyan only on links/controls; no boxes in boxes. */ :root,[data-theme="dark"],[data-theme="light"]{--cyan:var(--ac);--green:var(--price);--mag:var(--mute);--violet:var(--mute);--amber:var(--mute);--sunk:var(--panel2)} b,strong,th{font-weight:600} /* surfaces */ .buy,details.shops-d,.cr-need,.cr-card,.mk-stat,.hd,.faq details,.cmp,.vs-t{border:0!important;border-radius:var(--r)!important;background:var(--panel);box-shadow:var(--shc)!important} .buy{padding:var(--s5)!important} .mk-mv{border:0!important;background:var(--panel);border-radius:var(--r)!important} .cr-nl li,.hb-deal{border:0!important;background:var(--panel2)!important;border-radius:10px} .cr-card.cr-first{border:0!important;box-shadow:var(--shc),inset 0 0 0 1px var(--line2)!important} .cr-card.cr-first::before{background:var(--panel2)!important;color:var(--text2)!important;box-shadow:var(--shc)!important} details.shops-d .tw,.buy .tw,.cr-card .tw,.hd .tw{box-shadow:none!important;background:transparent} .howto-b,.howto .howto-b{border-left:0!important;padding-left:0!important} nav.chips{border-bottom:0!important;box-shadow:none!important} .srch kbd{border:0!important;background:var(--panel2);color:var(--mute)} .na-side .srch kbd{background:var(--panel)} /* pills that open things (alerts) and footer links: flat fills, no outline */ .catsign-d>summary,.alrt summary,footer .fl a{border:0!important;background:var(--panel2);color:var(--text)} .catsign-d>summary:hover,.catsign-d[open]>summary,.alrt summary:hover,.alrt[open] summary,footer .fl a:hover{background:rgba(var(--ac-rgb),.12);color:var(--hi)} /* numbers and labels that you can't click: neutral, never cyan */ .mk-stat b{color:var(--hi)!important;font-family:var(--num)!important;font-weight:600} .mk-h .ic,.hd-c .ic,.tile-ic,.cr-ix,.cr-nl small.cr-ngl,.hb-deal small:first-child{color:var(--mute)!important} .cr-nl b{color:var(--hi)!important;font-family:var(--num)!important;font-weight:600} .hd:hover .hd-c .ic,.tile:hover .tile-ic{color:var(--ac)!important} /* one primary (solid, glowing) button per block: product "View at" and the top budget pick; other "View at" buttons are outlined */ .bp-go{background:transparent!important;color:var(--ac)!important;box-shadow:inset 0 0 0 1px rgba(var(--ac-rgb),.55)!important} .bp-go:hover,.bp-go:focus-visible{background:var(--ac)!important;color:var(--on-ac)!important;box-shadow:var(--glow)!important} .bud .bp.top .bp-go{background:var(--ac)!important;color:var(--on-ac)!important;box-shadow:var(--glow)!important} /* plain shop lists (laptop tier pages: