/* SITE_CSS_v6 - typography + manual theme toggle + polish 2026-07-12 (v5 in git history) */ /* Brand: deep navy + electric blue + amber CTAs. Same class names as v4/v5 - safe for regen. */ /* Theming: data-theme="light|dark" on , set pre-paint by an inline head snippet */ /* (localStorage choice, else system preference). Dark styles key off [data-theme="dark"]. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); } /* -- Design tokens ----------------------------------------------- */ :root { --blue: #2563eb; --blue-dark: #1d4ed8; --blue-deep: #1e3a8a; --blue-ink: #172554; --blue-light: #eff6ff; --blue-mid: #bfdbfe; --amber: #f59e0b; --amber-bg: #fffbeb; --green: #16a34a; --red: #dc2626; --cta: #f59e0b; --cta-hover: #fbbf24; --cta-edge: #b45309; --text: #111827; --text-soft: #374151; --muted: #6b7280; --border: #e5e7eb; --border-mid: #d1d5db; --bg: #ffffff; --bg-soft: #f8faff; --bg-grey: #f9fafb; --radius: 14px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 4px rgba(16,24,40,.06); --shadow-md: 0 4px 10px rgba(16,24,40,.06), 0 12px 28px rgba(30,58,138,.10); --shadow-cta: 0 2px 6px rgba(180,83,9,.30); --ring: 0 0 0 3px rgba(37,99,235,.35); } /* -- Reset ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; line-height: 1.65; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv02", "cv11"; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } /* Prose links read as links without hovering (operator 2026-09-12): a plain that is a direct child of a paragraph or list item in body copy or on the trust pages. Buttons and badges carry a class and bold pick-name links sit inside , so neither is touched. */ .content p > a:not([class]), .content li > a:not([class]), .page-card p > a:not([class]), .page-card li > a:not([class]) { color: var(--blue-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(37,99,235,.45); } .content p > a:not([class]):hover, .content li > a:not([class]):hover, .page-card p > a:not([class]):hover, .page-card li > a:not([class]):hover { text-decoration-color: currentColor; } [data-theme="dark"] .content p > a:not([class]), [data-theme="dark"] .content li > a:not([class]), [data-theme="dark"] .page-card p > a:not([class]), [data-theme="dark"] .page-card li > a:not([class]) { color: #93b4ff; text-decoration-color: rgba(147,180,255,.5); } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; } ::selection { background: var(--blue-mid); color: var(--blue-ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } /* -- Layout ------------------------------------------------------ */ .wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; } main { max-width: 960px; margin: 0 auto; padding: 0 20px 88px; } /* -- Header / Nav ------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, var(--blue-ink) 0%, var(--blue-deep) 100%); border-bottom: 1px solid rgba(255,255,255,.08); padding: 0; box-shadow: 0 2px 16px rgba(23,37,84,.45); } /* Single-row: brand left, nav right */ .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; } .topbar { display: none; } .brand-title { font-size: 15px; font-weight: 800; color: #ffffff; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; } .brand-title:hover { text-decoration: none; opacity: 0.9; } .back-link { font-size: 14px; font-weight: 700; color: #ffffff; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; opacity: 0.85; } .back-link:hover { opacity: 1; text-decoration: none; color: #ffffff; } .site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { padding: 7px 13px; border-radius: 999px; color: #bfdbfe; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background 0.15s, color 0.15s; } .site-nav a:hover { background: rgba(255,255,255,.14); color: #ffffff; text-decoration: none; } .sep { display: none; } /* -- Post hero ---------------------------------------------------- */ .hero.panel, .hero-section { background: linear-gradient(180deg, var(--bg-soft) 0%, #ffffff 85%); border: none; border-bottom: 1px solid var(--border); padding: 34px 20px 24px; max-width: 960px; margin: 0 auto; box-sizing: border-box; } .hero-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #78350f; background: linear-gradient(135deg, var(--cta-hover) 0%, var(--cta) 100%); border: none; display: inline-block; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(180,83,9,.25); } .hero-title { font-size: clamp(21px, 4.5vw, 38px); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 10px; line-height: 1.12; color: var(--blue-ink); text-wrap: balance; } .hero-sub { font-size: 15px; color: var(--muted); margin: 6px 0 0; } .trust-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .trust-item { font-size: 12.5px; font-weight: 600; color: var(--text-soft); display: inline-flex; align-items: center; gap: 5px; background: #ffffff; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; box-shadow: var(--shadow-sm); } .trust-item::before { color: var(--green); font-size: 14px; } .hero-img { box-shadow: var(--shadow-md); } /* 2026-09-08: one-line attribution under a Creative Commons hero (Wikimedia Commons pool) */ .hero-credit { font-size: 12px; color: var(--muted); margin: 6px 0 0; text-align: right; } .hero-credit a { color: var(--muted); text-decoration: underline; } /* Two-column editorial hero on wide screens: text left, category image right */ @media (min-width: 861px) { .hero.panel, .hero-section { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; align-items: center; } .hero-kicker { grid-column: 1; justify-self: start; } .hero-title, .hero-sub, .post-byline, .trust-bar { grid-column: 1; } .hero-img { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0 !important; max-height: 210px !important; } } /* -- Homepage hero ----------------------------------------------- */ .home-hero { background: radial-gradient(700px 320px at 15% 0%, rgba(96,165,250,.28), transparent 60%), radial-gradient(600px 300px at 90% 110%, rgba(245,158,11,.18), transparent 55%), linear-gradient(150deg, var(--blue-ink) 0%, var(--blue-deep) 55%, var(--blue-dark) 100%); padding: 18px 20px 16px; text-align: center; } .home-hero h1 { font-size: clamp(26px, 5.5vw, 46px); font-weight: 800; color: #ffffff; letter-spacing: -0.03em; margin: 0 0 10px; line-height: 1.08; text-wrap: balance; } .home-hero p { font-size: 17px; color: #bfdbfe; margin: 0 auto 16px; max-width: 720px; line-height: 1.5; } .home-hero .badge { display: inline-block; background: linear-gradient(135deg, var(--cta-hover) 0%, var(--cta) 100%); color: #78350f; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.25); } .hero-cta { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; color: var(--blue-deep); font-size: 16px; font-weight: 700; padding: 12px 28px; border-radius: 10px; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,.28); transition: transform 0.15s, box-shadow 0.15s; margin-bottom: 16px; } .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.32); text-decoration: none; color: var(--blue-deep); } .hero-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 0 4px; } .hero-cat { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.10); color: #ffffff; font-size: 13px; font-weight: 600; padding: 8px 17px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); text-decoration: none; backdrop-filter: blur(4px); transition: background 0.15s, border-color 0.15s, transform 0.15s; } .hero-cat:hover { background: rgba(255,255,255,.20); border-color: rgba(255,255,255,.45); transform: translateY(-1px); text-decoration: none; color: #ffffff; } /* Home category section headings */ .cat-section { margin: 10px 0 0; scroll-margin-top: 72px; } .cat-section-title { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-deep); display: flex; align-items: center; gap: 10px; padding: 0 0 12px; border-bottom: none; margin-bottom: 14px; } .cat-section-title::before { content: ""; display: inline-block; width: 22px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--amber), var(--blue)); } .cat-section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* -- Post cards (index page) ------------------------------------- */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 12px 0; } .post-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s; overflow: hidden; } .post-card .card-thumb { width: calc(100% + 44px); margin: -20px -22px 14px; height: 130px; object-fit: cover; display: block; border-bottom: 1px solid var(--border); transition: transform 0.25s ease; } .post-card:hover .card-thumb { transform: scale(1.03); } .post-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue-mid); transform: translateY(-3px); text-decoration: none; } .post-card strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--blue-ink); margin-bottom: 6px; line-height: 1.35; } .post-card .card-cat { font-size: 11px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; } .post-card .card-arrow { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: auto; padding-top: 10px; transition: color 0.15s, transform 0.15s; } .post-card:hover .card-arrow { color: var(--blue); transform: translateX(3px); } .post-card .slug { display: none; } /* -- Panels ------------------------------------------------------ */ .panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin: 24px 0; box-shadow: var(--shadow-sm); } /* -- Comparison table ------------------------------------------- */ .table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); /* scroll shadows so a clipped table reads as scrollable on mobile */ background: linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)), linear-gradient(to left, #ffffff 30%, rgba(255,255,255,0)) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(16,24,40,.18), transparent), radial-gradient(farthest-side at 100% 50%, rgba(16,24,40,.18), transparent) 100% 0; background-repeat: no-repeat; background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; } .compare-table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 560px; } .thead-cell { background: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-ink) 100%); color: #ffffff; font-weight: 700; text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--blue); white-space: nowrap; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; } .cell-row, .cell { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-soft); font-size: 15px; } .compare-table tbody tr:last-child .cell-row, .compare-table tbody tr:last-child .cell { border-bottom: none; } /* Best overall row - highlighted */ .compare-table tbody tr:first-child .cell-row, .compare-table tbody tr:first-child .cell { background: var(--amber-bg); font-weight: 600; border-bottom: 1px solid #fde68a; } .compare-table tbody tr:first-child .cell-row:first-child { box-shadow: inset 4px 0 0 var(--amber); } .compare-table tbody tr:nth-child(even):not(:first-child) .cell-row, .compare-table tbody tr:nth-child(even):not(:first-child) .cell { background: var(--bg-grey); } .compare-table tbody tr:hover .cell-row, .compare-table tbody tr:hover .cell { background: var(--blue-light); } .compare-table tbody tr:first-child:hover .cell-row, .compare-table tbody tr:first-child:hover .cell { background: #fef3c7; } /* Score column (3rd): emphasize our SPP score */ .compare-table tbody td:nth-child(3) { font-weight: 800; color: var(--blue-deep); white-space: nowrap; font-variant-numeric: tabular-nums; } /* -- CTA link (inline in table) ---------------------------------- */ .cta-link { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(180deg, var(--cta-hover) 0%, var(--cta) 100%); color: #1a1a2e; font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: var(--shadow-cta); border-bottom: 3px solid var(--cta-edge); transition: filter 0.15s, box-shadow 0.15s, transform 0.1s; } .cta-link::after { content: " \2192"; font-size: 12px; } .cta-link:hover { filter: brightness(1.05); text-decoration: none; box-shadow: 0 4px 14px rgba(180,83,9,.40); transform: translateY(-1px); } .cta-link:active { transform: translateY(1px); border-bottom-width: 1px; } /* -- Buttons ----------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1; cursor: pointer; transition: all 0.15s; text-align: center; } .btn.primary { background: linear-gradient(180deg, var(--cta-hover) 0%, var(--cta) 100%); color: #1a1a2e; border: none; box-shadow: inset 0 -2px 0 rgba(146,64,14,.45), var(--shadow-cta); } .btn.primary:hover { filter: brightness(1.05); transform: translateY(-1px); text-decoration: none; } .btn.secondary { background: var(--bg); color: var(--blue); border: 2px solid var(--blue); } .btn.secondary:hover { background: var(--blue-light); text-decoration: none; } #content { max-width: 780px; margin: 0 auto; } /* -- Content typography ----------------------------------------- */ .content h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.2; color: var(--text); } /* Every post .md opens with an h1 that duplicates the hero title - hide the repeat */ #content > h1:first-child { display: none; } .content h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; margin: 46px 0 16px; color: var(--blue-ink); border-bottom: none; padding-bottom: 0; display: flex; align-items: center; gap: 10px; } .content h2::before { content: ""; display: inline-block; flex-shrink: 0; width: 5px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, var(--amber), var(--blue)); } .content h3 { font-size: 19px; font-weight: 700; margin: 30px 0 8px; color: var(--text); line-height: 1.3; } .content p, .content li { font-size: 18px; line-height: 1.65; color: var(--text-soft); } .content ul, .content ol { padding-left: 22px; margin: 10px 0 16px; } .content li { margin-bottom: 6px; } /* CTA button - only applied via JS to standalone Check price links */ .content a.cta-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, var(--cta-hover) 0%, var(--cta) 100%); color: #1a1a2e !important; font-size: 15px; font-weight: 700; padding: 12px 26px; border-radius: var(--radius-sm); text-decoration: none !important; margin: 16px 0 8px; box-shadow: inset 0 -2px 0 rgba(146,64,14,.45), var(--shadow-cta); transition: filter 0.15s, transform 0.1s, box-shadow 0.1s; } .content a.cta-btn:hover { filter: brightness(1.06); text-decoration: none !important; transform: translateY(-1px); box-shadow: inset 0 -2px 0 rgba(146,64,14,.45), 0 6px 16px rgba(180,83,9,.4); } .content a.cta-btn:active { transform: translateY(1px); filter: brightness(.98); } /* Heading and verdict links - plain styled, not buttons */ .content h3 a, .content h2 a { color: var(--text); text-decoration: none; font-weight: inherit; } .content h3 a:hover, .content h2 a:hover { color: var(--blue); text-decoration: underline; } .content strong a { color: var(--blue-deep); text-decoration: none; font-weight: 700; } .content strong a:hover { text-decoration: underline; } .content hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; } .content strong { font-weight: 700; color: var(--text); } /* Product pick cards - JS adds .pick-card class to h3+content blocks */ .pick-card { background: var(--bg-soft); border: 1px solid var(--blue-mid); border-left: 4px solid var(--blue); border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm); padding: 22px 26px; margin: 26px 0; box-shadow: var(--shadow-sm); transition: box-shadow 0.18s; } .pick-card:hover { box-shadow: var(--shadow-md); } .pick-card h3 { margin-top: 0; } /* Page-level hero (non-post pages) - clean, no left border */ .page-hero { background: linear-gradient(180deg, var(--bg-soft) 0%, #ffffff 85%); border-bottom: 1px solid var(--border); padding: 40px 20px 30px; max-width: 960px; margin: 0 auto; box-sizing: border-box; } .page-hero .hero-kicker { display: inline-block; background: linear-gradient(135deg, var(--cta-hover) 0%, var(--cta) 100%); color: #78350f; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; } .page-hero .hero-title { font-size: clamp(26px, 4.5vw, 36px); font-weight: 800; color: var(--blue-ink); margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.12; } .page-hero .hero-sub { font-size: 15px; color: var(--muted); margin: 0; } /* -- Tables in content ------------------------------------------ */ .content table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 12px 0; overflow-x: auto; display: block; border-radius: var(--radius-sm); } .content th { background: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-ink) 100%); color: #fff; font-weight: 600; text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--blue); } .content td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-soft); } .content tr:nth-child(even) td { background: var(--bg-grey); } /* -- Section layout --------------------------------------------- */ .row-between { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .h2-tight { font-size: 18px; font-weight: 800; margin: 0; color: var(--blue-ink); } .h2-block { font-size: 18px; font-weight: 800; margin: 0 0 12px; color: var(--blue-ink); } .section-divider { margin: 28px 0; padding-top: 12px; border-top: 1px solid var(--border); } /* -- Verdict / info boxes --------------------------------------- */ .verdict-box { border: 1px solid var(--blue-mid); border-left: 5px solid var(--blue); background: linear-gradient(180deg, var(--blue-light) 0%, #f5f9ff 100%); border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm); padding: 16px 18px; box-shadow: var(--shadow-sm); } /* -- Pills / badges --------------------------------------------- */ .pill { display: inline-block; font-size: 12px; font-weight: 600; color: var(--blue); border: 1px solid var(--blue-mid); background: var(--blue-light); border-radius: 999px; padding: 2px 10px; } .pill.amber { color: #92400e; background: var(--amber-bg); border-color: #fcd34d; } /* -- Note / muted ----------------------------------------------- */ .note { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 6px; } .price-note { font-size: 14px; color: #4b5563; margin: 0 0 12px; font-weight: 500; } .muted { color: var(--muted); font-size: 13px; } .site-header .muted { display: none; } /* -- SPP scorecard line (scorer v2 per-criterion breakdown) ------- */ .spp-breakdown { display: inline-block; font-size: 12.5px !important; font-weight: 600; color: var(--muted) !important; background: var(--bg-grey); border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; margin: 2px 0 10px; letter-spacing: 0.01em; } [data-theme="dark"] .spp-breakdown { background: #101a30; border-color: var(--border-mid); } /* -- "What keeps it off a 10" + Hands-on lines (2026-09-03, published re-scale) ---- */ .spp-off-ten { font-size: 15px; color: var(--muted); margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--cta); } .spp-off-ten b { color: var(--text); font-weight: 700; } /* -- "Fit for this guide" line (2026-09-08, option B: the fifth mark's printed reason) -- */ .spp-fit { font-size: 15px; color: var(--muted); margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--border-mid); } .spp-fit b { color: var(--text); font-weight: 700; } .hands-on { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #78350f; background: linear-gradient(135deg, var(--cta-hover) 0%, var(--cta) 100%); cursor: help; vertical-align: middle; white-space: nowrap; } .hands-on::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: 260px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.45; color: #fff; background: var(--blue-deep); box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .15s, transform .15s; white-space: normal; } .hands-on:hover::after, .hands-on:focus::after, .hands-on:focus-visible::after { opacity: 1; transform: none; } .row-caveat { color: var(--muted); font-size: 0.85em; font-weight: 400; } .spp-handson { font-size: 15px; margin: 0 0 12px; } .spp-handson b { font-weight: 700; } /* -- "How we test" pointer under the first scorecard (2026-09-06) --- */ .score-note { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: -2px 0 14px; } .score-note a { font-weight: 600; text-decoration: underline; } /* -- Sticky bottom CTA bar ---------------------------------------- */ .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(16,24,40,.14); transform: translateY(100%); transition: transform 0.25s ease; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); } .sticky-cta.sticky-visible { transform: translateY(0); } .sticky-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .sticky-cta-label { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-cta-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, var(--cta-hover) 0%, var(--cta) 100%); color: #1a1a2e; font-size: 14px; font-weight: 700; padding: 9px 20px; border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 rgba(146,64,14,.45), var(--shadow-cta); transition: filter 0.15s; flex-shrink: 0; } .sticky-cta-btn:hover { filter: brightness(1.05); text-decoration: none; color: #1a1a2e; } /* -- Footer ----------------------------------------------------- */ footer { border-top: none; background: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-ink) 100%); padding: 32px 0; font-size: 13px; color: #93c5fd; text-align: center; line-height: 1.8; } footer a { color: #bfdbfe; } footer a:hover { color: #ffffff; } /* -- Code ------------------------------------------------------- */ .content code { background: var(--bg-grey); padding: 2px 5px; border-radius: 4px; font-size: 13px; } .content pre { background: var(--bg-grey); padding: 14px; border-radius: 8px; overflow-x: auto; } /* -- Grid ------------------------------------------------------- */ .grid2 { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; } .grid1 { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .ctaRow { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; } .relatedGrid { display: flex; flex-direction: column; gap: 8px; } .relatedItem { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: var(--text-soft); background: var(--bg); box-shadow: var(--shadow-sm); transition: background 0.15s, border-color 0.15s, transform 0.15s; } .relatedItem:hover { background: var(--blue-light); border-color: var(--blue-mid); transform: translateX(3px); text-decoration: none; } /* -- Static page content ---------------------------------------- */ .page-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px; margin: 18px 0; box-shadow: var(--shadow-sm); } .page-card h2 { font-size: 17px; font-weight: 800; margin: 0 0 10px; color: var(--blue-ink); } /* -- Responsive ------------------------------------------------- */ @media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } .home-hero { padding: 24px 16px 20px; } .post-grid { grid-template-columns: 1fr; } .hero.panel, .hero-section { padding: 26px 16px 20px; } main, .wrap { padding-left: 16px; padding-right: 16px; } } @media (max-width: 480px) { .site-header .wrap { gap: 8px; } .brand-title { font-size: 13.5px; } .site-nav a { padding: 6px 9px; font-size: 13px; } .cta-link { padding: 8px 14px; font-size: 13px; } .pick-card { padding: 18px 18px; } .panel { padding: 16px; } } /* -- Breadcrumbs ------------------------------------------------- */ .breadcrumbs { max-width: 960px; margin: 0 auto; font-size: 13px; color: var(--muted); } .breadcrumbs .wrap { display: flex; align-items: center; gap: 8px; padding-top: 12px; padding-bottom: 0; white-space: nowrap; overflow: hidden; } .breadcrumbs a { color: var(--blue); font-weight: 600; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs .bc-sep { color: var(--border-mid); font-size: 15px; } .breadcrumbs .bc-here { overflow: hidden; text-overflow: ellipsis; } /* -- Pros / cons list items (server-rendered classes) ------------ */ .content li.pro { list-style: none; color: var(--green); font-weight: 500; font-size: 16px; } .content li.con { list-style: none; color: var(--red); font-weight: 500; font-size: 16px; } /* -- Dark mode (manual toggle; data-theme set pre-paint from localStorage/system) -- */ :root[data-theme="dark"] { --text: #e7ecf5; --text-soft: #c3cbd9; --muted: #8b96a8; --border: #223052; --border-mid: #2d3d63; --bg: #0b1220; --bg-soft: #0f1830; --bg-grey: #101a2e; --blue-light: #14213d; --blue-mid: #2b436f; --amber-bg: #2a2109; --green: #4ade80; --red: #f87171; --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3); --shadow-md: 0 4px 10px rgba(0,0,0,.4), 0 12px 28px rgba(0,0,0,.45); } /* tokens used as TEXT colors on light surfaces need light equivalents */ [data-theme="dark"] .hero-title, [data-theme="dark"] .page-hero .hero-title, [data-theme="dark"] .h2-tight, [data-theme="dark"] .h2-block, [data-theme="dark"] .post-card strong { color: #dbe7ff; } [data-theme="dark"] .content h2, [data-theme="dark"] .page-card h2 { color: #b6ccff; } [data-theme="dark"] .content strong a { color: #93b4ff; } [data-theme="dark"] .content h3 a:hover, [data-theme="dark"] .content h2 a:hover { color: #93b4ff; } [data-theme="dark"] .compare-table tbody td:nth-child(3) { color: #b6ccff; } [data-theme="dark"] .breadcrumbs a { color: #7ea6ff; } [data-theme="dark"] .post-card .card-cat { color: #7ea6ff; } [data-theme="dark"] .cat-section-title { color: #b6ccff; } [data-theme="dark"] .price-note { color: var(--text-soft); } /* surfaces */ [data-theme="dark"] .hero.panel, [data-theme="dark"] .hero-section, [data-theme="dark"] .page-hero { background: linear-gradient(180deg, #0e1730 0%, #0b1220 85%); } [data-theme="dark"] .trust-item { background: #101a30; border-color: var(--border-mid); } [data-theme="dark"] .compare-table tbody tr:first-child .cell-row, [data-theme="dark"] .compare-table tbody tr:first-child .cell { background: var(--amber-bg); border-bottom-color: #4a3a10; } [data-theme="dark"] .compare-table tbody tr:first-child:hover .cell-row, [data-theme="dark"] .compare-table tbody tr:first-child:hover .cell { background: #332a0d; } [data-theme="dark"] .table-wrap { background: linear-gradient(to right, var(--bg) 30%, rgba(11,18,32,0)), linear-gradient(to left, var(--bg) 30%, rgba(11,18,32,0)) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.6), transparent), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.6), transparent) 100% 0; background-repeat: no-repeat; background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; } [data-theme="dark"] .verdict-box { background: linear-gradient(180deg, #14213d 0%, #101a30 100%); } [data-theme="dark"] .sticky-cta { background: rgba(11,18,32,.92); box-shadow: 0 -6px 24px rgba(0,0,0,.5); } [data-theme="dark"] .hero-kicker, [data-theme="dark"] .page-hero .hero-kicker, [data-theme="dark"] .home-hero .badge { color: #4a2c05; } /* -- Theme toggle button (injected by assets/theme.js into .site-nav) ---- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); color: #ffffff; cursor: pointer; flex-shrink: 0; margin-left: 6px; transition: background 0.15s, transform 0.15s; padding: 0; } .theme-toggle:hover { background: rgba(255,255,255,.22); transform: rotate(12deg); } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* -- Reading progress bar (posts, injected by theme.js) ------------------ */ .progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--amber), #fbbf24); z-index: 300; pointer-events: none; transition: width 0.1s linear; } /* -- Sticky table of contents (injected by theme.js, >=1240px posts) ----- */ .toc { position: fixed; top: 110px; left: calc(50% - 480px - 200px); width: 178px; font-size: 12.5px; z-index: 50; } .toc-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .toc a { display: block; padding: 5px 10px; margin: 0 0 2px -10px; color: var(--muted); border-left: 2px solid var(--border); border-radius: 0 6px 6px 0; line-height: 1.35; transition: color 0.15s, border-color 0.15s, background 0.15s; } .toc a:hover { color: var(--blue); text-decoration: none; background: var(--blue-light); } .toc a.active { color: var(--blue-deep); font-weight: 700; border-left-color: var(--amber); background: var(--blue-light); } [data-theme="dark"] .toc a.active { color: #b6ccff; } @media (max-width: 1379px) { .toc { display: none; } } /* -- Read-time pill (injected) ------------------------------------------- */ .trust-item.read-time::before { content: none; } .trust-item.read-time { color: var(--muted); } /* -- Related-guide hover preview (injected) ------------------------------ */ .related-preview { position: absolute; z-index: 400; width: 240px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(4px) scale(.98); pointer-events: none; transition: opacity 0.15s, transform 0.15s; } .related-preview.show { opacity: 1; transform: translateY(0) scale(1); } .related-preview img { width: 100%; height: 126px; object-fit: cover; display: block; } .related-preview span { display: block; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); line-height: 1.4; } /* -- Sticky bar dismiss + skip link (injected by theme.js) ---------------- */ body.sticky-dismissed .sticky-cta { display: none; } .sticky-close { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s, background 0.15s; } .sticky-close:hover { color: var(--text); border-color: var(--border-mid); background: var(--bg-grey); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 500; background: var(--blue-deep); color: #ffffff; padding: 10px 18px; border-radius: 0 0 8px 0; font-weight: 700; font-size: 14px; } .skip-link:focus { left: 0; text-decoration: none; } /* -- Back to top (injected by theme.js) ---------------------------------- */ .back-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 250; width: 42px; height: 42px; border-radius: 999px; background: var(--blue-deep); color: #ffffff; border: none; box-shadow: 0 4px 14px rgba(16,24,40,.35); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.2s, transform 0.2s, background 0.15s; font-size: 18px; line-height: 1; } .back-to-top.show { opacity: 0.88; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { opacity: 1; background: var(--blue); } .back-to-top.above-sticky { bottom: 78px; } /* ================================================================= */ /* MOBILE PASS (2026-09-02) - round 1. Nothing in THIS block applies */ /* above 760px; the deliberate desktop tightening came later (rounds */ /* 2 and 3) and lives in the base rules + the tail block below. */ /* The phone problems it fixes: crowded text, a light/dark toggle */ /* you could not see, and nav links running off the edge. The */ /* reference width is 390px. */ /* ================================================================= */ /* -- Header: brand + toggle on row 1, nav links on row 2 ------------ */ /* The toggle is injected INSIDE .site-nav by theme.js, so it is */ /* absolutely positioned out of the nav row (no JS/markup change). */ @media (max-width: 760px) { .site-header .wrap { position: relative; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0; min-height: 0; padding-top: 4px; padding-bottom: 8px; } .brand-title, .back-link { flex: 1 1 100%; display: flex; align-items: center; min-height: 44px; padding-right: 50px; } .site-nav { flex: 1 1 100%; width: 100%; margin: 0; gap: 3px; /* one row, never two: five entries fit a 390px phone, and a narrower screen scrolls the row instead of stacking a lone link underneath */ flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; } .site-nav a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 40px; padding: 8px 7px; font-size: 12.5px; border-radius: 10px; } .theme-toggle { position: absolute; top: 6px; right: 0; width: 40px; height: 40px; margin-left: 0; } .theme-toggle svg { width: 19px; height: 19px; } .theme-toggle:hover { transform: none; } .cat-section { scroll-margin-top: 104px; } } /* -- Home hero on a phone ------------------------------------------ */ @media (max-width: 700px) { .home-hero { padding: 20px 16px 20px; } .home-hero .badge { font-size: 10px; letter-spacing: 0.07em; padding: 3px 10px; margin-bottom: 8px; } .home-hero p { font-size: 15px; line-height: 1.5; margin-bottom: 14px; } .hero-cta { font-size: 15px; padding: 12px 24px; max-width: 280px; justify-content: center; margin-bottom: 14px; } .hero-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hero-cat { justify-content: center; text-align: center; font-size: 13px; padding: 9px 6px; min-height: 40px; gap: 5px; } } /* -- Post pages on a phone ----------------------------------------- */ @media (max-width: 700px) { .hero-img { max-height: 190px !important; } .table-wrap { max-width: 100%; } .compare-table { min-width: 600px; } .sticky-cta-label { font-size: 12.5px; } .sticky-cta-btn { font-size: 13px; padding: 9px 14px; } .sticky-cta-inner { flex-wrap: nowrap; gap: 8px; } .trust-item { font-size: 12px; padding: 5px 10px; } .breadcrumbs .wrap { font-size: 12.5px; } } /* -- Card grid: one column on phones, two on tablet ----------------- */ @media (min-width: 701px) and (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .post-card strong { font-size: 15px; } } /* ===== MOBILE PASS, rounds 2 and 3 (2026-09-02) ===== */ /* Round 2: hero sub-copy reworded (no orphan line), site-2 light headline to espresso, hero tightened. Round 3: "the Updated September 2026 badge is way too in your face and too close to the headline"; "does everything need as much size, width, height as it has?"; "the scrolling strip under the hero is a good idea" -> the strip is now the base. Minimum sizes held throughout: nav 40px, other tap targets 36px, body text 15px. */ /* -- Sub-copy: no orphan last line, at any width ------------------- */ .home-hero p { text-wrap: balance; text-wrap: pretty; } /* -- Phone hero: ONE 16px inset ------------------------------------ */ /* The hero used to add its own 16px on top of .wrap's 16px, so the sub-copy ran in a 326px column at 390px and needed a 4th line. */ @media (max-width: 700px) { .home-hero { padding: 18px 0 18px; } .home-hero h1 { margin: 0 0 8px; } .home-hero p { font-size: 15px; line-height: 1.5; margin: 0 auto 12px; } } /* -- Chips as a category bar under the hero (round 2 "V2") --------- */ /* Phone only. The chips keep their place in the markup (last child of the hero's .wrap) but are full-bled onto the page surface with their own background, so they read as a category bar sitting under the hero. Desktop keeps them inside the hero. */ @media (max-width: 700px) { .home-hero { padding-bottom: 0; } .hero-cats { display: flex; flex-wrap: nowrap; justify-content: flex-start; background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hero-cats::-webkit-scrollbar { display: none; } .hero-cat { flex: 0 0 auto; scroll-snap-align: start; background: var(--bg-grey); border: 1px solid var(--border); color: var(--text-soft); backdrop-filter: none; } [data-theme="dark"] .home-hero .hero-cat { background: var(--bg-grey); border-color: var(--border-mid); color: var(--text); } } /* -- Round 3 SIZE PASS: header ------------------------------------- */ /* 86px total: 2 + 40 (brand row) + 40 (nav row) + 3 + 1px border. Nav links keep their 40px minimum height; the toggle fills the brand row. */ @media (max-width: 760px) { .site-header .wrap { padding-top: 2px; padding-bottom: 3px; } .brand-title, .back-link { min-height: 40px; } .theme-toggle { top: 2px; } .cat-section { scroll-margin-top: 92px; } } /* -- Round 3 SIZE PASS: hero --------------------------------------- */ @media (max-width: 700px) { .home-hero { position: relative; padding: 15px 0 0; } .home-hero h1 { margin: 0 0 6px; } .home-hero p { margin: 0 auto 12px; } .hero-cta { display: flex; width: auto; max-width: 240px; margin: 0 auto; padding: 6px 20px; min-height: 42px; font-size: 15px; justify-content: center; } .hero-cats { gap: 4px; margin: 12px -16px 0; padding: 8px 6px; } .hero-cat { min-height: 36px; padding: 6px 8px; font-size: 12.5px; gap: 4px; } .cat-section { margin-top: 10px; } .cat-section-title { padding-bottom: 8px; margin-bottom: 10px; } .post-grid { padding: 10px 0; gap: 12px; } } /* -- Round 3 SIZE PASS: post cards on phones ----------------------- */ /* Title 16px (above the 15px minimum for body copy), "Read guide" 14px (a control label, not body copy), 12px card padding, so roughly two cards land in a screen. */ @media (max-width: 700px) { .post-card { padding: 12px; } .post-card .card-thumb { width: calc(100% + 24px); margin: -12px -12px 10px; height: 150px; } .post-card strong { font-size: 16px; margin-bottom: 4px; line-height: 1.3; } .post-card .card-arrow { font-size: 14px; padding-top: 8px; } } /* -- Round 3: sticky-bar dismiss button was a 28px tap target ------ */ /* 28px sat under the 36px minimum tap target, so it is 36px here. Phone only, so the desktop bar is unchanged. */ @media (max-width: 700px) { .sticky-close { width: 36px; height: 36px; } } /* -- Round 3 BADGE: right-aligned small line above the headline ---- */ /* The operator's stated fallback. The corner pill collides with the centred two-line headline at every phone width we support (the headline's first line runs under it), so the badge sits on its own right-aligned line with a 4px gap instead - still ~9px and no longer competing with the h1 for attention. */ @media (max-width: 700px) { .home-hero .badge { display: block; width: -moz-fit-content; width: fit-content; margin: 0 auto 10px; font-size: 8px; padding: 2px 7px; opacity: .92; letter-spacing: 0.08em; } } /* ================================================================= */ /* PASS 4 (2026-09-02) - "sleek, premium, professional on phones AND */ /* desktop". Two things only: a scroll cue on the phone chip strip, */ /* and a desktop rhythm pass (spacing scale 8/12/16/24/32, one hero */ /* action row, calmer cards, lighter footer). No colour token moves, */ /* no structural change - the colour tokens and the page structure */ /* stay exactly as they were. */ /* ================================================================= */ /* -- Phone: the chip strip tells you it scrolls -------------------- */ /* The cut-off chip dissolves into the page surface instead of being */ /* guillotined by the viewport edge. A sticky pseudo-element pinned */ /* to the scrollport's right edge, drawn in --bg so it is correct in */ /* both themes; no JS, no animation. The strip's hairline moves to */ /* .home-hero so the fade never eats the rule. */ @media (max-width: 700px) { .home-hero { border-bottom: 1px solid var(--border); } .hero-cats { border-bottom: none; } .hero-cats::after { content: ""; position: sticky; right: 0; flex: 0 0 28px; align-self: stretch; margin-left: -28px; background: linear-gradient(to right, transparent 0%, var(--bg) 88%); pointer-events: none; } } /* -- Eyebrow labels: one letter-spacing across the family ---------- */ .hero-kicker, .page-hero .hero-kicker, .post-card .card-cat, .cat-section-title, .thead-cell, .toc-title { letter-spacing: 0.08em; } /* -- Focus is always visible, even on surfaces with their own shadow */ /* .post-card / .cta-link / .btn each set box-shadow later in the file */ /* than the global :focus-visible rule, which silently ate the ring. */ .post-card:focus-visible, .hero-cta:focus-visible, .hero-cat:focus-visible, .cta-link:focus-visible, .btn:focus-visible, .theme-toggle:focus-visible, .sticky-cta-btn:focus-visible, .relatedItem:focus-visible, .site-nav a:focus-visible, .brand-title:focus-visible { box-shadow: var(--ring); } /* ===== DESKTOP RHYTHM (nothing below 701px is touched) ============ */ @media (min-width: 701px) { /* Hero: one spacing scale, a 640px measure (60-75 chars), a whisper badge at the same size the phone uses. */ .home-hero { padding: 32px 20px 28px; } .home-hero .badge { font-size: 8px; letter-spacing: 0.08em; padding: 2px 7px; margin-bottom: 10px; } .home-hero h1 { margin: 0 0 12px; } .home-hero p { max-width: 640px; margin: 0 auto 24px; } /* Section headings: tighter above, thinner rule, even gap below. */ .cat-section { margin: 32px 0 0; } .cat-section-title { padding: 0 0 8px; margin-bottom: 0; } .cat-section-title::before { width: 20px; height: 3px; } .post-grid { padding: 0; margin: 16px 0 0; gap: 16px; } main { padding-bottom: 56px; } /* Cards: equal heights, one 16:10 image ratio, 1px border, and the shadow only on hover so a grid at rest is flat and calm. */ .post-card { padding: 16px; box-shadow: none; } .post-card .card-thumb { width: calc(100% + 32px); margin: -16px -16px 12px; height: auto; aspect-ratio: 16 / 10; } .post-card .card-cat { margin-bottom: 4px; } .post-card strong { font-size: 16px; margin-bottom: 8px; } .post-card .card-arrow { padding-top: 12px; } /* Post pages: 720px measure, headings on the same scale. */ #content { max-width: 665px; } /* 2026-09-02 operator: 18px in 665px = ~74 chars a line */ .content h2 { margin: 40px 0 16px; } .content h3 { margin: 32px 0 8px; } .content hr { margin: 32px 0; } .panel { padding: 24px; margin: 24px 0; } .pick-card { padding: 24px; margin: 24px 0; } .section-divider { margin: 32px 0; padding-top: 12px; } .hero.panel, .hero-section { padding: 32px 20px 24px; } .page-hero { padding: 32px 20px 24px; } .trust-bar { margin-top: 16px; } /* Footer: same information, less bulk. */ footer { padding: 24px 0; line-height: 1.7; } } /* -- Desktop hero action row: CTA and chips on ONE row ------------- */ /* Both are inline-level boxes inside the centred hero, so they share a line when they fit and stack cleanly when they do not. Scoped to 901px+ so the tablet band keeps today's stacked hero. */ @media (min-width: 901px) { .hero-cta { vertical-align: middle; margin: 0 8px 0 0; min-height: 40px; padding: 8px 24px; font-size: 15px; } .hero-cats { display: inline-flex; vertical-align: middle; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; } .hero-cat { min-height: 40px; padding: 8px 16px; } } /* ===== CHIP ICONS (2026-09-02) ====================================== */ /* The four home-hero category chips used to lead with an EMOJI. Emoji are someone else's artwork: a different glyph on every OS, a colour we do not control, and no relationship to the brand. They are now an inline monoline SVG set (24px grid, 1.75px stroke, round caps, no fills except the tiny joint dots) drawn in currentColor, so each icon is always EXACTLY the colour of its own chip's label - white inside the hero on desktop, the muted text colour in the phone category bar, and the dark-theme text colour in dark mode. No icon font, no extra request. Site 1 authors them in index.html; site 2 generates them from config/site.json via scripts/build_pages.py (ICONS). Sizing lives here so both sites stay identical. */ .hero-cat .chip-ico { width: 17px; height: 17px; flex: 0 0 auto; vertical-align: middle; overflow: visible; /* 1.75px stroke on the 24px grid edge is never clipped */ } @media (max-width: 700px) { /* Phone category bar: slightly smaller glyph, and the icon-to-label gap goes back to 6px. An emoji carries its own side bearing; an SVG does not, so the 4px the emoji chips used reads as touching once the glyph is a real icon. Chip height is unchanged (36px minimum tap target). */ .hero-cat { gap: 6px; } .hero-cat .chip-ico { width: 16px; height: 16px; } } /* -- Brand wordmark (2026-09-05) ---------------------------------- */ /* The header brand is the wordmark IMAGE (capitals: white "Simple Product", amber #f59e0b "Picks", transparent PNG that sits on the navy header), replacing the old mark-64 icon + text. 28px tall keeps the header on ONE row at desktop; the phone step below matches the old 13.5px text footprint so the theme toggle and nav stay in the viewport at 390px. ONE BRAND PER PAGE: the header carries it, no page body repeats it - the 404's old body mark was removed in the same pass. */ .brand-wordmark { display: block; width: 268px; height: 28px; } @media (max-width: 640px) { .brand-wordmark { width: 230px; height: 24px; } } /* -- Answer-first verdict + links-checked line + team byline --------------------------- The quick verdict a reader (and a search snippet) should get before the comparison table, the visible note that the links were checked, and the site-team byline. Tokens only, so each theme paints it in its own palette; spacing on the 8/12/16/24 scale and body copy 16px desktop / 15px phone. */ .post-byline { font-size: 13px; color: var(--muted); margin: 8px 0 0; } .answer-first { background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--cta); border-radius: var(--radius-sm); padding: 16px 20px; margin: 24px 0 16px; } .af-label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .af-lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-soft); } .af-lead b { color: var(--text); font-weight: 700; } .links-checked { margin: 12px 0 0; font-size: 13px; color: var(--muted); } @media (max-width: 700px) { .answer-first { padding: 12px 16px; margin: 16px 0 12px; } .af-lead { font-size: 15px; } .links-checked { font-size: 12.5px; margin-top: 8px; } }