/*! * GAX Online theme — Tierline (Direction A: Indigo Studio) * Adapted from Anthropic Design Tierline prototype * Supports light/dark via [data-theme] attribute on */ /* ============================================================ 1. Design tokens Direction A — "Indigo Studio" (warm editorial SaaS) Light by default; dark via [data-theme="dark"] ============================================================ */ :root, :root[data-theme="light"] { /* Surfaces — warm, editorial */ --bg: #FAFAF7; --bg-elev: #FFFFFF; --bg-sunken: #F2F1EC; --bg-inverse: #0E0E12; /* Text */ --fg: #0E0E12; --fg-muted: #5A5A66; --fg-subtle: #8B8B95; --fg-on-accent: #FFFFFF; /* Lines */ --line: rgba(14, 14, 18, 0.08); --line-strong: rgba(14, 14, 18, 0.14); /* Accent (indigo) */ --acc: oklch(0.55 0.20 268); --acc-hover: oklch(0.50 0.20 268); --acc-soft: oklch(0.96 0.04 268); --acc-soft-ink: oklch(0.45 0.20 268); /* Semantic */ --good: oklch(0.58 0.16 155); --good-soft: oklch(0.96 0.04 155); --warn: oklch(0.72 0.16 75); --bad: oklch(0.60 0.20 25); --bad-soft: oklch(0.96 0.04 25); /* Medals */ --gold: oklch(0.78 0.14 85); --gold-deep: oklch(0.55 0.14 75); --silver: oklch(0.78 0.01 270); --silver-deep: oklch(0.55 0.01 270); --bronze: oklch(0.68 0.12 45); --bronze-deep: oklch(0.48 0.12 45); /* Radius & shadow — soft SaaS */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(14,14,18,.04), 0 1px 1px rgba(14,14,18,.03); --sh-2: 0 4px 12px rgba(14,14,18,.06), 0 1px 2px rgba(14,14,18,.04); --sh-3: 0 14px 40px rgba(14,14,18,.10), 0 2px 6px rgba(14,14,18,.04); --sh-acc: 0 10px 30px oklch(0.55 0.20 268 / .22); /* Type */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --tracking-tight: -0.022em; --tracking-tighter: -0.032em; --tracking-wide: 0.06em; /* Layout */ --maxw: 1240px; --pad-page: clamp(16px, 3vw, 28px); /* App chrome */ --nav-h: 68px; --mob-cta-h: 76px; } :root[data-theme="dark"] { --bg: #0E0E12; --bg-elev: #16161D; --bg-sunken: #08080C; --bg-inverse: #FAFAF7; --fg: #F4F4F0; --fg-muted: #A4A4B0; --fg-subtle: #6B6B78; --fg-on-accent: #FFFFFF; --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14); --acc: oklch(0.72 0.18 268); --acc-hover: oklch(0.78 0.18 268); --acc-soft: oklch(0.30 0.10 268 / .35); --acc-soft-ink: oklch(0.85 0.14 268); --good: oklch(0.72 0.16 155); --good-soft: oklch(0.30 0.08 155 / .35); --warn: oklch(0.78 0.16 75); --bad: oklch(0.70 0.20 25); --bad-soft: oklch(0.30 0.10 25 / .35); --gold: oklch(0.82 0.14 85); --gold-deep: oklch(0.72 0.14 75); --silver: oklch(0.82 0.01 270); --silver-deep: oklch(0.72 0.01 270); --bronze: oklch(0.74 0.12 45); --bronze-deep: oklch(0.64 0.12 45); --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 4px 14px rgba(0,0,0,.5); --sh-3: 0 18px 48px rgba(0,0,0,.55); --sh-acc: 0 10px 30px oklch(0.55 0.22 268 / .35); } /* ============================================================ 2. Base + reset ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--fg); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: var(--tracking-tight); transition: background-color .25s ease, color .25s ease; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } a { color: inherit; text-decoration: none; } input, textarea, select { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--line); margin: 0; } ::selection { background: var(--acc); color: var(--fg-on-accent); } /* Scrollbar polish */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; } ::-webkit-scrollbar-track { background: transparent; } /* Container */ .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-page); } /* Type scale */ .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); } .h-display { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5.4vw, 72px); line-height: 1.02; letter-spacing: var(--tracking-tighter); } .h-1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: var(--tracking-tighter); } .h-2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.12; letter-spacing: var(--tracking-tight); } .h-3 { font-weight: 600; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.25; letter-spacing: var(--tracking-tight); } .body { font-size: 16px; line-height: 1.55; color: var(--fg); } .body-muted { color: var(--fg-muted); } .lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--fg-muted); } .small { font-size: 13px; line-height: 1.45; } .mono { font-family: var(--font-mono); font-feature-settings: "ss01"; } .serif { font-family: var(--font-serif); font-style: italic; letter-spacing: -0.01em; } .tabular { font-variant-numeric: tabular-nums; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: 14.5px; letter-spacing: var(--tracking-tight); transition: transform .12s ease, background-color .15s ease, box-shadow .2s ease, border-color .15s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--acc); color: var(--fg-on-accent); box-shadow: var(--sh-acc); } .btn-primary:hover { background: var(--acc-hover); } .btn-ghost { border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--fg); } .btn-ghost:hover { border-color: var(--fg); } .btn-soft { background: var(--acc-soft); color: var(--acc-soft-ink); border: 1px solid transparent; } .btn-soft:hover { background: color-mix(in oklab, var(--acc-soft) 80%, var(--acc) 20%); } .btn-quiet { color: var(--fg-muted); padding: 10px 12px; } .btn-quiet:hover { color: var(--fg); } .btn-sm { padding: 8px 12px; font-size: 13px; } .btn-lg { padding: 16px 26px; font-size: 16px; } .btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: var(--r-pill); } /* Chips / pills */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--fg-muted); font-size: 12.5px; border: 1px solid var(--line); font-weight: 500; } .chip.is-on { background: var(--acc-soft); color: var(--acc-soft-ink); border-color: transparent; } .chip-good { background: var(--good-soft); color: var(--good); border-color: transparent; } .chip-bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; } .chip-warn { background: color-mix(in oklab, var(--warn) 20%, var(--bg-elev)); color: var(--warn); border-color: transparent; } .chip-accent { background: var(--acc-soft); color: var(--acc-soft-ink); border-color: transparent; } .chip-gold { background: color-mix(in oklab, var(--gold) 30%, var(--bg-elev)); color: var(--gold-deep); border-color: transparent; font-weight: 600; } .chip .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } /* Card */ .card { background: var(--bg-elev); border-radius: var(--r-lg); box-shadow: var(--sh-2); border: 1px solid var(--line); } .card-lg { border-radius: var(--r-lg); } .pad-sm { padding: 12px; } .pad-md { padding: 18px; } .pad-lg { padding: 24px; } /* Layout helpers */ .row { display: flex; gap: 16px; align-items: center; } .row-between { justify-content: space-between; } .row-wrap { flex-wrap: wrap; } .between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .col { display: flex; flex-direction: column; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .center { text-align: center; } .muted { color: var(--fg-muted); } .h-rule { height: 1px; background: var(--line); width: 100%; } .v-rule { width: 1px; background: var(--line); align-self: stretch; } .hide-mobile { display: initial; } .show-mobile { display: none; } @media (max-width: 760px) { .hide-mobile { display: none !important; } .show-mobile { display: initial; } } /* Star rating */ .stars { display: inline-flex; gap: 1px; color: var(--gold); } .stars svg { width: 14px; height: 14px; } .stars .off { color: var(--line-strong); } /* Score bars */ .bar { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--acc); border-radius: 999px; } /* Score donut wrapper (used with inline SVG) */ .score { position: relative; width: 64px; height: 64px; flex-shrink: 0; } .score svg { transform: rotate(-90deg); } .score-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: var(--fg); letter-spacing: -0.02em; } /* Placeholder image (no SVG drawings) */ .ph { position: relative; background: repeating-linear-gradient( 135deg, color-mix(in oklab, var(--fg) 4%, transparent) 0 1px, transparent 1px 10px), var(--bg-sunken); border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); letter-spacing: var(--tracking-wide); text-transform: uppercase; border: 1px solid var(--line); } .ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, color-mix(in oklab, var(--acc) 8%, transparent), transparent 60%); pointer-events: none; } .ph > span { position: relative; padding: 4px 8px; background: var(--bg-elev); border-radius: var(--r-sm); border: 1px solid var(--line); } /* Brand mark for product logos (placeholder, two letters) */ .brand-mark { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.04em; color: var(--fg-on-accent); flex: none; } .bm-lyra { background: linear-gradient(135deg, oklch(.55 .22 270), oklch(.62 .20 320)); } .bm-quill { background: linear-gradient(135deg, oklch(.60 .18 195), oklch(.58 .20 165)); } .bm-penseur { background: linear-gradient(135deg, oklch(.58 .20 25), oklch(.62 .18 60)); } .bm-inkwell { background: linear-gradient(135deg, oklch(.45 .15 280), oklch(.40 .10 240)); } .bm-scribe { background: linear-gradient(135deg, oklch(.55 .18 135), oklch(.50 .14 165)); } .bm-vellum { background: linear-gradient(135deg, oklch(.50 .18 340), oklch(.55 .14 300)); } .bm-cadence { background: linear-gradient(135deg, oklch(.50 .14 230), oklch(.45 .18 260)); } /* Square logo placeholder (alternate, monospace) */ .logo-sq { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: 18px; color: #fff; flex-shrink: 0; letter-spacing: -0.02em; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18); } /* Sections */ .section { padding-block: clamp(48px, 7vw, 88px); } .section-sm { padding-block: clamp(28px, 4vw, 48px); } /* Animation primitives */ @keyframes float-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .in { animation: float-in .5s ease both; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--good) 60%, transparent); } 70% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--good) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--good) 0%, transparent); } } @keyframes tier-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Sticky helpers */ .sticky-top { position: sticky; top: var(--nav-h); z-index: 5; } /* ============================================================ 3. Components ============================================================ */ /* ---- App chrome -------------------------------------------- */ .appbar { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } .appbar .inner { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-page); display: flex; align-items: center; gap: 24px; } .logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -.02em; font-size: 17px; } .logo .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--fg); color: var(--bg); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; } .logo .dot { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--acc), var(--gold)); } .nav-links { display: flex; gap: 4px; } .nav-link { padding: 8px 12px; border-radius: var(--r-pill); color: var(--fg-muted); font-size: 14px; font-weight: 500; transition: background .15s ease, color .15s ease; } .nav-link:hover { color: var(--fg); background: var(--bg-sunken); } .nav-link.is-active { color: var(--fg); background: var(--bg-sunken); } .appbar .spacer { flex: 1; } .appbar .right { display: flex; align-items: center; gap: 8px; } /* Search */ .search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-sunken); min-width: 240px; color: var(--fg-muted); } .search:hover { border-color: var(--line-strong); color: var(--fg); } .search input { flex: 1; background: none; border: 0; outline: none; color: var(--fg); font-family: var(--font-sans); font-size: 14px; } .search .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg-muted); } /* Tabs */ .tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-sunken); border-radius: 12px; border: 1px solid var(--line); } .tab { padding: 7px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--fg-muted); cursor: pointer; } .tab.is-active { background: var(--bg-elev); color: var(--fg); box-shadow: var(--sh-1); } /* ---- Toolbar (floating, top-right) ------------------------- */ .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; border-radius: 14px; background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--sh-1); } .toolbar .seg { display: inline-flex; padding: 2px; background: var(--bg-sunken); border-radius: var(--r-pill); } .toolbar .seg button { padding: 6px 10px; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: .02em; } .toolbar .seg button.is-on { background: var(--bg-elev); color: var(--fg); box-shadow: var(--sh-1); } .toolbar .theme { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--fg-muted); } .toolbar .theme:hover { color: var(--fg); background: var(--bg-sunken); } /* ---- Hero -------------------------------------------------- */ .hero { padding-top: 56px; padding-bottom: 24px; position: relative; } .hero .grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; } @media (max-width: 960px) { .hero .grid { grid-template-columns: 1fr; gap: 32px; } } .hero h1 .accent { background: linear-gradient(120deg, var(--acc) 0%, color-mix(in oklab, var(--acc) 60%, oklch(.65 .2 320)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .meta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); margin-bottom: 18px; } .hero .meta .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--good); box-shadow: 0 0 0 0 var(--good); animation: pulse 1.8s ease-out infinite; } .hero .ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .hero .trust { margin-top: 32px; display: flex; gap: 28px; flex-wrap: wrap; color: var(--fg-muted); font-size: 13px; } .hero .trust b { color: var(--fg); font-size: 18px; font-family: var(--font-mono); display: block; } /* Live status dot (alt usage outside .hero) */ .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); animation: tier-pulse 2s ease-in-out infinite; } /* Hero visual — leaderboard card */ .leaderboard { padding: 18px; background: var(--bg-elev); border-radius: var(--r-xl); box-shadow: var(--sh-3); border: 1px solid var(--line); } .leaderboard .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .leaderboard .head .title { font-weight: 600; font-size: 14px; } .leaderboard .row-item { display: grid; grid-template-columns: 28px 44px 1fr auto; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md); transition: background .15s ease; } .leaderboard .row-item + .row-item { margin-top: 2px; } .leaderboard .row-item:hover { background: var(--bg-sunken); } .leaderboard .rank { font-family: var(--font-mono); font-size: 13px; color: var(--fg-subtle); text-align: center; } .leaderboard .name { font-weight: 600; font-size: 14px; } .leaderboard .sub { font-size: 12px; color: var(--fg-muted); } .leaderboard .score { font-family: var(--font-mono); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; } .leaderboard .score.gold { color: var(--gold-deep); } .leaderboard .score.silver { color: var(--silver-deep); } .leaderboard .score.bronze { color: var(--bronze-deep); } /* ---- Category strip --------------------------------------- */ .cat-strip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } @media (max-width: 900px) { .cat-strip { grid-template-columns: repeat(3, 1fr); } } .cat-tile { padding: 16px; border-radius: var(--r-md); background: var(--bg-elev); border: 1px solid var(--line); transition: border-color .15s ease, transform .15s ease; } .cat-tile:hover { border-color: var(--fg); transform: translateY(-2px); } .cat-tile .lbl { font-size: 13px; font-weight: 600; } .cat-tile .ct { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); } /* ---- Trophy / medal podium -------------------------------- */ .podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: end; } @media (max-width: 820px) { .podium { grid-template-columns: 1fr; } } .medal-card { position: relative; padding: 24px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--sh-2); overflow: hidden; } .medal-card .badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .medal-card.gold { box-shadow: var(--sh-2), inset 0 0 0 1px color-mix(in oklab, var(--gold) 40%, transparent); } .medal-card.gold .badge { background: color-mix(in oklab, var(--gold) 25%, var(--bg-elev)); color: var(--gold-deep); } .medal-card.silver .badge { background: color-mix(in oklab, var(--silver) 25%, var(--bg-elev)); color: var(--silver-deep); } .medal-card.bronze .badge { background: color-mix(in oklab, var(--bronze) 25%, var(--bg-elev)); color: var(--bronze-deep); } .medal-card .ribbon { position: absolute; top: -1px; left: 24px; width: 36px; padding: 6px 0 10px; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--fg-on-accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); } .medal-card.gold .ribbon { background: var(--gold); color: oklch(.25 .12 75); } .medal-card.silver .ribbon { background: var(--silver); color: oklch(.25 .01 270); } .medal-card.bronze .ribbon { background: var(--bronze); color: oklch(.25 .12 45); } .medal-card.gold { transform: translateY(-12px); } .medal-card .product-head { display: flex; gap: 14px; align-items: center; margin-top: 28px; } .medal-card .name { font-size: 22px; font-weight: 700; letter-spacing: var(--tracking-tight); } .medal-card .tag { font-size: 12.5px; color: var(--fg-muted); font-family: var(--font-mono); } .medal-card .pitch { margin-top: 16px; color: var(--fg-muted); font-size: 14.5px; line-height: 1.55; } .medal-card .stats { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-family: var(--font-mono); } .medal-card .stats .s { padding: 10px; background: var(--bg-sunken); border-radius: var(--r-sm); border: 1px solid var(--line); } .medal-card .stats .v { font-size: 17px; font-weight: 700; } .medal-card .stats .k { font-size: 10.5px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .06em; } .medal-card .verdict { margin-top: 18px; padding: 12px; background: var(--acc-soft); color: var(--acc-soft-ink); font-size: 13.5px; line-height: 1.5; border-radius: var(--r-md); } .medal-card .cta-row { margin-top: 18px; display: flex; gap: 8px; } /* ---- Metallic medal token (small standalone) -------------- */ .medal { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 14px; position: relative; flex-shrink: 0; background: linear-gradient(135deg, #f6e8a3 0%, #d8a514 40%, #fff1c0 60%, #b88810 100%); color: #5a3e00; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(0,0,0,0.18), 0 2px 8px rgba(217,165,20,0.35); } .medal.silver { background: linear-gradient(135deg, #f1f3f7 0%, #aab1bd 40%, #ffffff 60%, #6c727f 100%); color: #2f3340; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -2px 0 rgba(0,0,0,0.18), 0 2px 8px rgba(120,130,150,0.3); } .medal.bronze { background: linear-gradient(135deg, #f4d6bc 0%, #c4763a 40%, #ffe6cd 60%, #8a4d1f 100%); color: #3a1e08; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(0,0,0,0.18), 0 2px 8px rgba(193,119,62,0.35); } .medal-lg { width: 60px; height: 60px; font-size: 22px; } .medal::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.4); pointer-events: none; } /* ---- Trophy card (gold-ringed winner card) ---------------- */ .trophy-card { background: radial-gradient(120% 100% at 50% 0%, color-mix(in oklab, var(--gold) 35%, transparent) 0%, transparent 60%), var(--bg-elev); border: 1px solid var(--gold); box-shadow: 0 0 0 4px color-mix(in oklab, var(--gold) 18%, transparent), var(--sh-2); border-radius: var(--r-lg); position: relative; overflow: hidden; } .trophy-ribbon { position: absolute; top: 14px; right: -32px; transform: rotate(35deg); background: linear-gradient(90deg, var(--gold), oklch(.55 .14 75)); color: oklch(.25 .12 75); font-family: var(--font-mono); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; padding: 5px 40px; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } /* ---- Rank list (numbered) --------------------------------- */ .rank-list { display: flex; flex-direction: column; gap: 14px; } .rank-row { display: grid; grid-template-columns: 56px 1fr 220px 160px; gap: 20px; align-items: center; padding: 18px 18px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: border-color .15s ease, transform .15s ease; } .rank-row:hover { border-color: var(--line-strong); } .rank-row .n { font-family: var(--font-mono); font-weight: 700; font-size: 28px; color: var(--fg); letter-spacing: -.04em; } .rank-row .n.medal-g { color: var(--gold-deep); } .rank-row .n.medal-s { color: var(--silver-deep); } .rank-row .n.medal-b { color: var(--bronze-deep); } .rank-row .info { display: flex; gap: 14px; align-items: center; min-width: 0; } .rank-row .meta { min-width: 0; } .rank-row .meta .nm { font-weight: 600; font-size: 17px; display: flex; align-items: center; gap: 8px; } .rank-row .meta .ds { color: var(--fg-muted); font-size: 13.5px; margin-top: 2px; } .rank-row .scoreCol { display: flex; flex-direction: column; gap: 6px; } .rank-row .scoreCol .top { display: flex; justify-content: space-between; align-items: baseline; } .rank-row .scoreCol .v { font-family: var(--font-mono); font-weight: 700; font-size: 22px; } .rank-row .scoreCol .k { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .06em;} .rank-row .actions { display: flex; flex-direction: column; gap: 8px; } @media (max-width: 820px) { .rank-row { grid-template-columns: 44px 1fr; gap: 12px; } .rank-row .scoreCol, .rank-row .actions { grid-column: 1 / -1; } .rank-row .actions { flex-direction: row; } } /* Filter / sort toolbar (sticky) */ .filter-bar { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-pill); position: sticky; top: var(--nav-h); z-index: 4; box-shadow: var(--sh-1); margin-bottom: 22px; } .filter-bar .group { display: flex; gap: 6px; } .filter-bar .sep { width: 1px; height: 22px; background: var(--line); } .filter-bar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; } .filter-bar select { background: var(--bg-sunken); border: 1px solid var(--line); padding: 7px 12px; border-radius: var(--r-pill); font-size: 13px; } @media (max-width: 760px) { .filter-bar { border-radius: var(--r-md); overflow-x: auto; flex-wrap: nowrap; } } /* ---- Comparison table ------------------------------------- */ .cmp-wrap { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); } .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 880px; } .cmp-table thead th { position: sticky; top: 0; background: var(--bg-elev); border-bottom: 1px solid var(--line); padding: 16px 14px; text-align: left; font-weight: 600; font-size: 13px; vertical-align: bottom; scroll-snap-align: start; } .cmp-table thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--bg-elev); box-shadow: 1px 0 0 var(--line); min-width: 200px; } .cmp-table tbody td:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg-elev); box-shadow: 1px 0 0 var(--line); font-weight: 500; font-size: 14px; } .cmp-table th, .cmp-table td { padding: 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; min-width: 160px; } .cmp-table th.featured, .cmp-table td.featured { background: color-mix(in oklab, var(--acc) 4%, var(--bg-elev)); } .cmp-table thead th.featured { box-shadow: inset 0 3px 0 var(--acc); } .cmp-table .prod-head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .cmp-table .prod-head .row { gap: 10px; } .cmp-table .prod-head .price { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-muted); } .tick { color: var(--good); font-weight: 700; font-family: var(--font-mono); } .cross { color: var(--bad); font-weight: 700; font-family: var(--font-mono); } .partial{ color: var(--warn); font-weight: 700; font-family: var(--font-mono); } .cell-rating { display: flex; flex-direction: column; gap: 4px; } .cell-rating .v { font-family: var(--font-mono); font-weight: 700; font-size: 15px; } .swipe-hint { display: none; padding: 10px 14px; font-size: 12px; color: var(--fg-muted); font-family: var(--font-mono); border-bottom: 1px solid var(--line); } @media (max-width: 760px) { .swipe-hint { display: flex; align-items: center; gap: 8px; } } /* ---- Comparison table (alternate, monospace headers) ------ */ .ctable { width: 100%; border-collapse: separate; border-spacing: 0; } .ctable th, .ctable td { padding: 14px 16px; text-align: left; font-size: 13px; vertical-align: middle; border-bottom: 1px solid var(--line); } .ctable thead th { position: sticky; top: 0; background: var(--bg-sunken); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--fg-muted); text-transform: uppercase; border-bottom: 1px solid var(--line-strong); z-index: 2; } .ctable tr:hover td { background: var(--bg-sunken); } .ctable .name { display: flex; align-items: center; gap: 12px; min-width: 200px; } .ctable .rank-cell { font-family: var(--font-mono); font-weight: 600; color: var(--fg-muted); width: 48px; } /* ---- VS card ---------------------------------------------- */ .vs-card { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 20px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; box-shadow: var(--sh-3); align-items: stretch; position: relative; } .vs-card .vs-orb { align-self: center; width: 60px; height: 60px; border-radius: 999px; background: var(--bg-sunken); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.04em; } .vs-side .head { display: flex; align-items: center; gap: 14px; } .vs-side .head .nm { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .vs-side .head .tag { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); } .vs-side .scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; } .vs-side .scoreboard .s { padding: 12px; background: var(--bg-sunken); border-radius: var(--r-md); border: 1px solid var(--line); } .vs-side .scoreboard .v { font-family: var(--font-mono); font-weight: 700; font-size: 20px; } .vs-side .scoreboard .k { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .06em; } .vs-side .proscons { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; } .vs-side .proscons .li { display: flex; gap: 8px; align-items: flex-start; } .vs-side .proscons .li .b { font-family: var(--font-mono); font-weight: 700; min-width: 14px; } .vs-side .proscons .li.pro .b { color: var(--good); } .vs-side .proscons .li.con .b { color: var(--bad); } .vs-side.winner { box-shadow: inset 0 0 0 2px var(--acc); border-radius: var(--r-lg); padding: 14px; margin: -14px; background: color-mix(in oklab, var(--acc) 4%, var(--bg-elev)); } @media (max-width: 820px) { .vs-card { grid-template-columns: 1fr; padding: 20px; } .vs-card .vs-orb { justify-self: center; } } /* Comparison bars (for VS page) */ .bar-cmp { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; } .bar-cmp .row { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 10px; align-items: center; } .bar-cmp .lbl { text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .06em; } .bar-cmp .bar-l, .bar-cmp .bar-r { height: 8px; background: var(--bg-sunken); border-radius: 999px; position: relative; overflow: hidden; } .bar-cmp .bar-l { display: flex; justify-content: flex-end; } .bar-cmp .bar-l > i { background: var(--fg-muted); height: 100%; border-radius: 999px; } .bar-cmp .bar-r > i { background: var(--acc); height: 100%; border-radius: 999px; } .bar-cmp .v { font-family: var(--font-mono); font-size: 12px; font-weight: 700; } .bar-cmp .row .left { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .bar-cmp .row .right { display: flex; align-items: center; gap: 8px; } /* ---- Review / detail page --------------------------------- */ .review-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; padding-top: 24px; align-items: start; } @media (max-width: 960px) { .review-hero { grid-template-columns: 1fr; } } .review-hero .head .crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); display: flex; gap: 8px; align-items: center; margin-bottom: 14px; } .review-hero h1 { margin: 0 0 12px; } .review-hero .meta-line { display: flex; gap: 14px; color: var(--fg-muted); font-size: 13px; align-items: center; flex-wrap: wrap; } .scorecard { padding: 22px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); } .scorecard .big { display: flex; align-items: baseline; gap: 8px; } .scorecard .big .v { font-family: var(--font-mono); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -.04em; } .scorecard .big .o { color: var(--fg-muted); font-family: var(--font-mono); font-size: 16px; } .scorecard .verdict-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--good-soft); color: var(--good); font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; } .scorecard .breakdown { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; } .scorecard .breakdown .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } .scorecard .breakdown .row .lbl { font-size: 13px; color: var(--fg-muted); } .scorecard .breakdown .row .v { font-family: var(--font-mono); font-weight: 700; font-size: 13px; } .scorecard .breakdown .row .bar { grid-column: 1 / -1; } .scorecard hr { margin: 18px 0; } .scorecard .price-row { display: flex; justify-content: space-between; align-items: baseline; } .scorecard .price-row .p { font-family: var(--font-mono); font-weight: 700; font-size: 22px; } .scorecard .price-row .u { color: var(--fg-muted); font-size: 13px; } /* Editor verdict callout */ .callout { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 22px; background: linear-gradient(135deg, var(--acc-soft), color-mix(in oklab, var(--acc-soft) 40%, var(--bg-elev))); border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--acc) 25%, var(--line)); } .callout .av { width: 64px; height: 64px; border-radius: 999px; background: linear-gradient(135deg, oklch(.55 .14 30), oklch(.65 .10 60)); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 22px; } .callout .who { font-size: 13px; color: var(--acc-soft-ink); margin-bottom: 6px; font-family: var(--font-mono); } .callout .quote { font-size: 17px; line-height: 1.5; color: var(--fg); font-weight: 500; } /* Verdict callout (decorative quote variant) */ .verdict { border-radius: var(--r-lg); background: linear-gradient(135deg, var(--acc-soft), var(--bg-sunken)); border: 1px solid var(--line); padding: 24px; position: relative; overflow: hidden; } .verdict::before { content: '"'; position: absolute; top: -20px; left: 14px; font-family: var(--font-serif); font-style: italic; font-size: 160px; color: var(--acc); opacity: 0.18; line-height: 1; } /* Pros / cons grid */ .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 700px) { .pros-cons { grid-template-columns: 1fr; } } .pc-card { padding: 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev); } .pc-card h4 { margin: 0 0 12px; display: flex; gap: 8px; align-items: center; font-size: 14px; } .pc-card.good h4 { color: var(--good); } .pc-card.bad h4 { color: var(--bad); } .pc-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.45; } .pc-card ul li::marker { color: var(--fg-subtle); } /* User reviews */ .review-snippet { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev); display: flex; flex-direction: column; gap: 10px; } .review-snippet .who { display: flex; gap: 10px; align-items: center; } .review-snippet .who .av { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; } .review-snippet .who .nm { font-weight: 600; font-size: 14px; } .review-snippet .who .sub { font-size: 12px; color: var(--fg-muted); font-family: var(--font-mono); } .review-snippet blockquote { margin: 0; font-size: 14.5px; line-height: 1.55; } /* Compact review snippet variant (with gradient avatar) */ .review-snip { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; } .review-snip .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--acc), var(--gold)); flex-shrink: 0; } /* Pricing calculator */ .calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--sh-2); overflow: hidden; } @media (max-width: 820px) { .calc { grid-template-columns: 1fr; } } .calc .controls { padding: 26px; border-right: 1px solid var(--line); } .calc .result { padding: 26px; background: var(--bg-sunken); } .calc .field { margin-bottom: 18px; } .calc .field .lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--fg-muted); margin-bottom: 6px; } .calc .field .lbl b { color: var(--fg); font-family: var(--font-mono); font-weight: 700; font-size: 14px; } .calc input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: var(--bg-sunken); border-radius: 999px; } .calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 999px; background: var(--acc); cursor: pointer; box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 15%, transparent); } .calc input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: var(--acc); cursor: pointer; border: 0; } .calc .seg-tabs { display: inline-flex; padding: 3px; background: var(--bg-sunken); border-radius: var(--r-pill); border: 1px solid var(--line); } .calc .seg-tabs button { padding: 7px 14px; font-size: 12.5px; font-weight: 600; border-radius: var(--r-pill); color: var(--fg-muted); } .calc .seg-tabs button.is-on { background: var(--bg-elev); color: var(--fg); box-shadow: var(--sh-1); } .calc .result h3 { margin: 0 0 12px; font-size: 14px; font-family: var(--font-mono); color: var(--fg-muted); text-transform: uppercase; letter-spacing: .06em; } .calc .winner-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 14px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); } .calc .winner-row + .winner-row { margin-top: 8px; } .calc .winner-row.first { box-shadow: 0 0 0 2px var(--acc); } .calc .winner-row .nm { font-weight: 600; font-size: 14.5px; } .calc .winner-row .sub { font-size: 12px; color: var(--fg-muted); font-family: var(--font-mono); } .calc .winner-row .p { font-family: var(--font-mono); font-weight: 700; font-size: 18px; } .calc .winner-row .pu { font-size: 11px; color: var(--fg-muted); font-family: var(--font-mono); } /* Standalone pricing card variant */ .pcalc { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-2); } .pcalc .slider { appearance: none; width: 100%; height: 6px; background: var(--bg-sunken); border-radius: 999px; outline: none; } .pcalc .slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 20%, transparent), 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; } /* ---- FAQ -------------------------------------------------- */ .faq { display: flex; flex-direction: column; gap: 8px; } .faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev); padding: 4px 4px; transition: border-color .15s ease; } .faq details[open] { border-color: var(--line-strong); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-weight: 600; font-size: 15.5px; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ic { width: 22px; height: 22px; flex: none; border-radius: 999px; background: var(--bg-sunken); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 14px; transition: transform .2s ease; } .faq details[open] summary .ic { transform: rotate(45deg); background: var(--acc); color: var(--fg-on-accent); } .faq .body { padding: 0 18px 18px; color: var(--fg-muted); font-size: 14.5px; line-height: 1.55; } /* Lightweight FAQ item (non-details) variant */ .faq-item { border-bottom: 1px solid var(--line); padding: 18px 0; } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 500; font-size: 15px; color: var(--fg); } .faq-a { padding-top: 10px; color: var(--fg-muted); font-size: 14px; line-height: 1.6; max-width: 64ch; } /* ---- Affiliate CTA cards ---------------------------------- */ .cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr; } } .cta-card { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); display: flex; flex-direction: column; gap: 14px; overflow: hidden; box-shadow: var(--sh-2); transition: transform .15s ease, border-color .15s ease; } .cta-card:hover { transform: translateY(-3px); border-color: var(--fg); } .cta-card .rib { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 10.5px; padding: 4px 8px; border-radius: var(--r-pill); background: var(--acc); color: var(--fg-on-accent); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .cta-card .price-line { display: flex; align-items: baseline; gap: 8px; } .cta-card .price-line .p { font-family: var(--font-mono); font-weight: 700; font-size: 28px; letter-spacing: -.02em; } .cta-card .price-line .u { color: var(--fg-muted); font-family: var(--font-mono); font-size: 12px; } .cta-card .feats { font-size: 13.5px; color: var(--fg-muted); display: flex; flex-direction: column; gap: 5px; } .cta-card .feats .li::before { content: "—"; margin-right: 8px; color: var(--fg-subtle); } /* ---- Footer ----------------------------------------------- */ .foot { margin-top: 40px; border-top: 1px solid var(--line); padding: 48px 0 28px; color: var(--fg-muted); font-size: 13.5px; } .foot .cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; } @media (max-width: 760px) { .foot .cols { grid-template-columns: 1fr 1fr; } } .foot h5 { margin: 0 0 12px; color: var(--fg); font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; } .foot a:hover { color: var(--fg); } .foot ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .foot .end { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 12px; flex-wrap: wrap; gap: 12px; } /* ---- Mobile sticky CTA ------------------------------------ */ .mob-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: color-mix(in oklab, var(--bg-elev) 95%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-top: 1px solid var(--line); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); display: none; } .mob-cta .wrap { display: flex; align-items: center; gap: 12px; max-width: var(--maxw); margin-inline: auto; } .mob-cta .meta { min-width: 0; } .mob-cta .nm { font-weight: 600; font-size: 14px; display: flex; gap: 6px; align-items: center;} .mob-cta .price { font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); } .mob-cta .btn { margin-left: auto; } @media (max-width: 760px) { .mob-cta { display: block; } body { padding-bottom: var(--mob-cta-h); } } /* ---- Breadcrumbs ------------------------------------------ */ .crumbs { display: flex; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); padding: 14px 0; } .crumbs a { color: var(--fg-muted); } .crumbs a:hover { color: var(--fg); } .crumbs .sep { color: var(--fg-subtle); opacity: 0.6; } /* ---- Swipe rail (horizontal scroll, hide scrollbars) ------ */ .swipe { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; } .swipe::-webkit-scrollbar { display: none; } .swipe > * { scroll-snap-align: start; flex-shrink: 0; } /* ─── Category landing — rank cards (4-col grid) ─────────────────────── */ .rank-card { padding: 0; overflow: hidden; position: relative; transition: transform .15s ease, box-shadow .2s ease; } .rank-card:hover { transform: translateY(-1px); box-shadow: var(--sh-3); } .rank-card-grid { display: grid; grid-template-columns: 88px 1fr 180px 200px; gap: 24px; padding: 24px; align-items: center; } @media (max-width: 980px) { .rank-card-grid { grid-template-columns: 64px 1fr 100px; gap: 16px; padding: 18px; } /* hide the CTA column — move to footer of card */ .rank-card-grid > div:nth-child(4) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .rank-card-grid > div:nth-child(4) .btn { width: auto; flex: 1; } } @media (max-width: 600px) { .rank-card-grid { grid-template-columns: 48px 1fr; } .rank-card-grid > div:nth-child(3) { grid-column: 1 / -1; flex-direction: row; gap: 16px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); } } /* Plain rank (no medal) for rank 4+ */ .medal.medal-lg.plain { background: var(--bg-sunken); color: var(--fg-muted); border: 1px solid var(--line); } /* Trophy ribbon — top-right corner ribbon for #1 */ .trophy-ribbon { position: absolute; top: 12px; right: -34px; background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: oklch(.25 .08 75); padding: 5px 40px; transform: rotate(35deg); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 12px oklch(.55 .14 75 / .35); z-index: 1; } .trophy-card { border: 1px solid color-mix(in oklab, var(--gold) 50%, var(--line)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 25%, transparent), var(--sh-2); } /* ─── FAQ accordion polish ────────────────────────────────────────────── */ .faq-item { border: 1px solid var(--line); background: var(--bg-elev); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; transition: border-color .15s ease; } .faq-item[open] { border-color: var(--line-strong); } .faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item .faq-toggle { color: var(--fg-muted); font-size: 22px; font-weight: 300; line-height: 1; transition: transform .25s ease; flex-shrink: 0; } .faq-item[open] .faq-toggle { transform: rotate(45deg); color: var(--acc); } .faq-item .faq-a { padding: 0 22px 18px; color: var(--fg-muted); font-size: 15px; line-height: 1.65; } /* ─── Verdict callout (Editor's pick box) ─────────────────────────────── */ .callout { background: linear-gradient(135deg, var(--acc-soft), color-mix(in oklab, var(--acc-soft) 60%, var(--bg-elev))); border: 1px solid color-mix(in oklab, var(--acc) 25%, var(--line)); border-radius: var(--r-lg); padding: 28px; position: relative; overflow: hidden; } .callout-quote { position: absolute; top: -12px; right: 18px; font-size: 120px; line-height: 1; color: color-mix(in oklab, var(--acc) 35%, transparent); font-weight: 700; pointer-events: none; user-select: none; font-family: Georgia, "Times New Roman", serif; } /* ─── Breadcrumbs ─────────────────────────────────────────────────────── */ .crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .crumbs a { color: var(--fg-muted); transition: color .12s ease; } .crumbs a:hover { color: var(--fg); } .crumbs span:last-child { color: var(--fg); font-weight: 500; } /* ─── Filter bar (sticky on category landing) ─────────────────────────── */ .filter-bar { padding: 8px 0; } .filter-bar select.btn { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .filter-bar .btn-soft.is-on { background: var(--acc-soft); color: var(--acc-soft-ink); } /* ─── Donut score (used on rank rows + product review) ────────────────── */ .donut { display: inline-block; } /* ─── HERO: serif italic accent (override the gradient) ─────────────── */ .hero h1 .accent { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--acc); font-family: var(--font-serif); font-style: italic; font-weight: 600; letter-spacing: -0.01em; } .hero .grid { grid-template-columns: 1.4fr 1fr; gap: 48px; } @media (max-width: 960px) { .hero .grid { grid-template-columns: 1fr; gap: 32px; } } /* ─── Categories grid: card + sparkline + #1 footer ─────────────────── */ .cat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0; border: 0; } @media (max-width: 900px) { .cat-strip { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .cat-strip { grid-template-columns: 1fr; } } .cat-tile { padding: 22px; border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--sh-2); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 14px; transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease; } .cat-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-3); border-color: var(--line-strong); } .cat-tile h3 { font-size: 22px; letter-spacing: -0.02em; margin: 0; } /* Sparkline SVG */ .spark { display: block; width: 120px; height: 28px; flex-shrink: 0; } /* Category card footer (Top pick row with logo + name + score) */ .cat-top { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); align-items: center; } .cat-top .meta-eyebrow { font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); letter-spacing: 0.08em; text-transform: uppercase; } .cat-top .nm { font-weight: 600; font-size: 14px; } .cat-top .sc { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--acc-soft-ink); text-align: right; } .cat-top .sc small { display: block; font-size: 10px; color: var(--fg-subtle); letter-spacing: 0.06em; font-weight: 400; } /* ─── Latest deep reviews (2fr+1fr split) ───────────────────────────── */ .home-reviews-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; } @media (max-width: 960px) { .home-reviews-grid { grid-template-columns: 1fr; gap: 24px; } } .review-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 20px; align-items: center; padding: 20px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .2s ease; } .review-row:hover { transform: translateY(-1px); box-shadow: var(--sh-3); } .review-row h3 { font-size: 17px; line-height: 1.3; margin: 6px 0; letter-spacing: -0.01em; } .review-row p { font-size: 13px; color: var(--fg-muted); margin: 0; line-height: 1.45; } .review-row .right-col { display: flex; flex-direction: column; align-items: center; gap: 6px; } /* Verdict sidebar callout */ .verdict { padding: 28px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--acc-soft) 0%, color-mix(in oklab, var(--acc-soft) 50%, var(--bg-elev)) 100%); border: 1px solid color-mix(in oklab, var(--acc) 25%, var(--line)); display: flex; flex-direction: column; } .verdict h3 { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; margin: 14px 0; } .verdict p { color: var(--fg-muted); margin: 0 0 18px; font-size: 15px; line-height: 1.55; } .verdict-author { display: flex; align-items: center; gap: 12px; } .verdict-author .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, oklch(.65 .15 250), oklch(.55 .18 280)); color: #fff; font-family: var(--font-mono); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .verdict-author .name { font-size: 13px; font-weight: 500; } .verdict-author .role { font-size: 11px; color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.06em; } /* ─── Newsletter band ───────────────────────────────────────────────── */ .newsletter-band { padding: 40px 48px; background: linear-gradient(120deg, var(--acc-soft) 0%, var(--bg-elev) 100%); border-radius: var(--r-lg); border: 1px solid color-mix(in oklab, var(--acc) 18%, var(--line)); display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; } @media (max-width: 760px) { .newsletter-band { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; } } .newsletter-band h2 { font-size: clamp(22px, 2vw, 28px); margin: 6px 0 8px; } .newsletter-band p { color: var(--fg-muted); margin: 0; font-size: 15px; line-height: 1.55; } .newsletter-form { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--r-pill); background: var(--bg-elev); border: 1px solid var(--line); } .newsletter-form input { flex: 1; min-width: 0; padding: 10px 14px; background: transparent; border: 0; outline: none; font-size: 14px; } /* ─── SITE HEADER (SiteNav match) ───────────────────────────────────── */ .appbar .logo .v-badge { font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); letter-spacing: 0.1em; padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; margin-left: 4px; } .appbar .nav-link.is-active { background: transparent; color: var(--fg); font-weight: 600; position: relative; } .appbar .nav-link.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--acc); border-radius: 2px; } .appbar .search { min-width: 0; flex: 0 1 280px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--bg-sunken); border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; color: var(--fg-muted); } .appbar .search .placeholder { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .appbar .search .kbd { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--fg-subtle); flex-shrink: 0; } .btn-signin { background: var(--acc); color: var(--fg-on-accent); padding: 8px 16px; font-size: 13px; box-shadow: var(--sh-acc); } .btn-signin:hover { background: var(--acc-hover); } @media (max-width: 900px) { .appbar .search, .appbar .nav-link, .appbar .v-badge, .btn-signin { display: none; } } /* ─── FOOTER (Footer component match) ───────────────────────────────── */ .foot { border-top: 1px solid var(--line); background: var(--bg-sunken); padding: 48px 0 24px; margin-top: 88px; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 28px; } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; gap: 24px; } } .foot-grid h4 { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-subtle); margin: 0 0 14px; font-weight: 600; } .foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .foot-grid ul a { color: var(--fg-muted); font-size: 14px; transition: color .12s ease; } .foot-grid ul a:hover { color: var(--fg); } .foot-grid .foot-brand p { max-width: 340px; color: var(--fg-muted); font-size: 14px; line-height: 1.6; margin: 14px 0 0; } .foot-grid .foot-brand .logo .mark { background: linear-gradient(135deg, var(--acc), var(--gold)); color: #fff; } .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg-subtle); font-family: var(--font-mono); } /* ═══════════════════════════════════════════════════════════════════ VS HEAD-TO-HEAD (Screen 3) ═══════════════════════════════════════════════════════════════════ */ .vs-bigcard { padding: 32px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 84px 1fr; gap: 0; align-items: stretch; } .vs-bigcard .vs-side { display: flex; flex-direction: column; } .vs-bigcard .vs-stats { margin-top: auto; padding-top: 18px; } .vs-bigcard .vs-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: italic; font-size: 36px; font-weight: 600; color: var(--fg); box-shadow: var(--sh-2); z-index: 2; } /* Insert empty center column to leave space for the circle */ .vs-bigcard .vs-circle { grid-column: 2; grid-row: 1; } .vs-bigcard .vs-side { padding-right: 60px; min-width: 0; } .vs-bigcard .vs-side.vs-right { padding-right: 0; padding-left: 60px; text-align: right; grid-column: 3; } .vs-bigcard .vs-side.vs-left { grid-column: 1; } .vs-bigcard .vs-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .vs-bigcard .vs-side.vs-right .vs-head { justify-content: flex-end; } .vs-bigcard .vs-titles h2 { font-size: 36px; margin: 0 0 4px; line-height: 1.05; letter-spacing: var(--tracking-tighter); } .vs-bigcard .vs-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-muted); } .vs-bigcard .vs-side.vs-right .vs-meta { justify-content: flex-end; } .vs-bigcard .vs-tagline { color: var(--fg-muted); margin: 0 0 18px; font-size: 15px; line-height: 1.55; } .vs-bigcard .vs-stats { display: flex; gap: 16px; align-items: center; } .vs-bigcard .vs-side.vs-right .vs-stats { justify-content: flex-end; } .vs-bigcard .vs-stat { min-width: 0; } .vs-bigcard .vs-stat .eyebrow { font-size: 10px; letter-spacing: 0.08em; } .vs-bigcard .vs-stat-v { font-family: var(--font-mono); font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--fg-muted); } .vs-bigcard .vs-stat-v.win { color: var(--acc-soft-ink); } .vs-bigcard .vs-stat-v small { font-size: 13px; color: var(--fg-subtle); margin-left: 1px; } .vs-bigcard .v-rule { width: 1px; height: 40px; background: var(--line); flex-shrink: 0; } @media (max-width: 880px) { .vs-bigcard { grid-template-columns: 1fr; gap: 32px; padding: 24px; } .vs-bigcard .vs-circle { position: static; transform: none; margin: 0 auto; } .vs-bigcard .vs-side, .vs-bigcard .vs-side.vs-right { padding: 0; text-align: left; grid-column: 1; } .vs-bigcard .vs-side.vs-right .vs-head, .vs-bigcard .vs-side.vs-right .vs-meta, .vs-bigcard .vs-side.vs-right .vs-stats { justify-content: flex-start; } } /* ─── Scorecard (bidirectional bars) ─────────────────────────────────── */ .vs-scorecard { display: flex; flex-direction: column; } .vs-score-row { display: grid; grid-template-columns: 1fr 200px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; } .vs-score-row:last-child { border-bottom: 0; } .vs-score-left { display: grid; grid-template-columns: 1fr 60px; gap: 10px; align-items: center; } .vs-score-right { display: grid; grid-template-columns: 60px 1fr; gap: 10px; align-items: center; } .vs-score-left .bar.reverse { transform: scaleX(-1); } .vs-score-num { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--fg-muted); } .vs-score-num.win { color: var(--acc-soft-ink); } .vs-score-left .vs-score-num { text-align: right; } .vs-score-label { text-align: center; font-size: 13px; color: var(--fg-muted); font-family: var(--font-mono); } @media (max-width: 740px) { .vs-score-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; } .vs-score-label { text-align: left; font-size: 12px; } .vs-score-left, .vs-score-right { grid-template-columns: 50px 1fr; } .vs-score-left .bar.reverse { transform: none; order: 2; } .vs-score-left .vs-score-num { text-align: left; order: 1; } } /* ─── Pros / Cons cards (2-col) ──────────────────────────────────────── */ .vs-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 880px) { .vs-proscons { grid-template-columns: 1fr; gap: 16px; } } .proscons-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .proscons-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--fg); } .proscons-list .pc-mark { margin-top: 2px; flex-shrink: 0; } /* ─── Use-case picker (3 cards) ──────────────────────────────────────── */ .vs-usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 880px) { .vs-usecases { grid-template-columns: 1fr; } } .vs-usecase { border-radius: var(--r-md); } .vs-usecase-who { font-weight: 500; font-size: 15px; margin: 8px 0 14px; } /* ═══════════════════════════════════════════════════════════════════ SINGLE PRODUCT REVIEW (Screen 4) ═══════════════════════════════════════════════════════════════════ */ .review-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; margin-top: 24px; align-items: flex-start; } .review-main { min-width: 0; } .review-sidebar { position: sticky; top: 88px; } @media (max-width: 1080px) { .review-layout { grid-template-columns: 1fr; gap: 32px; } .review-sidebar { position: static; } } .review-byline { display: flex; align-items: center; gap: 16px; padding: 24px 0; margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .review-byline .verdict-author { flex-shrink: 0; } .review-byline .verdict-author .avatar { width: 44px; height: 44px; font-size: 14px; } .review-hero-img { height: clamp(220px, 36vw, 340px); margin-top: 32px; border-radius: var(--r-lg); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); } .review-hero-mark { width: 140px; height: 140px; border-radius: 32px; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 72px; font-weight: 600; color: #fff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .review-hero-cap { position: absolute; bottom: 18px; left: 24px; font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.1em; } /* TOC card */ .toc-card { margin-top: 32px; padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; border-radius: 14px; } @media (max-width: 740px) { .toc-card { grid-template-columns: 1fr; gap: 10px; } } .toc-link { font-size: 13px; color: var(--fg-muted); display: inline-flex; gap: 6px; align-items: center; } .toc-link:hover { color: var(--fg); } .toc-link.on { color: var(--acc-soft-ink); } .toc-link .mono { color: var(--fg-subtle); } /* Review verdict callout */ .review-verdict { margin-top: 32px; padding: 32px; } .review-verdict-stats { display: flex; gap: 24px; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--acc) 25%, var(--line)); } .review-verdict-stats .stars { margin-top: 4px; } @media (max-width: 880px) { .review-verdict-stats { flex-wrap: wrap; gap: 16px; } .review-verdict-stats .btn { width: 100%; justify-content: center; } } /* Review prose body */ .review-prose { margin-top: 40px; max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--fg-muted); } .review-prose h2 { font-size: 28px; margin: 24px 0 14px; color: var(--fg); letter-spacing: var(--tracking-tight); } .review-prose p { font-size: 17px; line-height: 1.7; margin: 0 0 18px; } .review-prose strong { color: var(--fg); } /* User review snippets (2-col) */ .review-snips { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 740px) { .review-snips { grid-template-columns: 1fr; } } .review-snip { padding: 18px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); } .review-snip .verdict-author .avatar { width: 36px; height: 36px; font-size: 12px; } /* Sidebar product card */ .sidebar-card { padding: 24px; margin-bottom: 16px; } .sidebar-card .spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .spec-item { padding: 10px 12px; background: var(--bg-sunken); border-radius: 10px; } .spec-item .eyebrow { font-size: 9px; color: var(--fg-subtle); letter-spacing: 0.08em; } .spec-item .spec-v { font-size: 14px; font-weight: 600; color: var(--fg); margin-top: 4px; } /* ─── PRICING CALCULATOR ─────────────────────────────────────────────── */ .pcalc { padding: 24px; } .pcalc-tabs { display: inline-flex; padding: 3px; background: var(--bg-sunken); border-radius: var(--r-pill); } .pcalc-tab { padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: var(--r-pill); color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.02em; display: inline-flex; align-items: center; } .pcalc-tab.is-on { background: var(--bg-elev); color: var(--fg); box-shadow: var(--sh-1); } .pcalc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; } .pcalc-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--bg-sunken); border-radius: 999px; outline: none; cursor: pointer; } .pcalc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } .pcalc-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--acc); cursor: pointer; border: 0; } .pcalc-result { text-align: right; border-left: 1px solid var(--line); padding-left: 20px; } .pcalc-cost { font-size: 32px; font-weight: 600; color: var(--acc-soft-ink); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 2px; justify-content: flex-end; } .pcalc-cost small { font-size: 13px; color: var(--fg-muted); font-weight: 400; } @media (max-width: 540px) { .pcalc-body { grid-template-columns: 1fr; } .pcalc-result { border-left: 0; padding-left: 0; text-align: left; border-top: 1px solid var(--line); padding-top: 16px; } } /* Center body for review-prose paragraphs (long-form) */ .review-prose p strong { font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════ ARTICLE BODY COMPONENTS (deep-review blocks) ═══════════════════════════════════════════════════════════════════ */ /* Generic article-body tables ─────────────────────────────────────── */ .review-prose table, .entry-content table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; background: var(--bg-elev); border-radius: var(--r-md); overflow: hidden; font-size: 14px; border: 1px solid var(--line); } .review-prose thead, .entry-content thead { background: var(--bg-sunken); } .review-prose th, .entry-content th { text-align: left; padding: 10px 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); border-bottom: 1px solid var(--line); } .review-prose td, .entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; } .review-prose tr:last-child td, .entry-content tr:last-child td { border-bottom: 0; } .review-prose td strong, .entry-content td strong { color: var(--fg); font-family: var(--font-mono); } /* Scoring system table — emphasize the score column */ table.ht-scoring td:nth-child(3) { font-family: var(--font-mono); font-weight: 600; color: var(--acc-soft-ink); } /* Pricing table — emphasize Lambda column (3rd col) */ table.ht-pricing td:nth-child(3) { color: var(--acc-soft-ink); font-family: var(--font-mono); font-weight: 600; } table.ht-pricing td:nth-child(6) { color: var(--bad); font-family: var(--font-mono); } /* Benchmark table — winner highlighted via tag inside td */ table.ht-bench td { font-family: var(--font-mono); font-size: 13px; } table.ht-bench td:first-child { font-family: var(--font-sans); font-size: 14px; } /* Cost-perf table */ table.ht-perfratio td:nth-child(4) { color: var(--acc-soft-ink); font-family: var(--font-mono); font-weight: 600; } table.ht-perfratio td:nth-child(5) { font-family: var(--font-mono); } /* Uptime / sentiment tables — mono numerics */ table.ht-uptime td, table.ht-sentiment td, table.ht-longitudinal td, table.ht-usecase-matrix td { font-size: 13.5px; } /* Use-case matrix — color ✓ and ✗ */ table.ht-usecase-matrix td:nth-child(2) { font-family: var(--font-mono); font-weight: 600; } /* ─── Scenario simulation cards (3 in a row) ─────────────────────── */ .ht-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 24px; } @media (max-width: 880px) { .ht-scenarios { grid-template-columns: 1fr; } } .ht-scenario h3 { font-size: 16px; margin: 0 0 10px; line-height: 1.3; letter-spacing: -0.01em; } .ht-scenario p { font-size: 13.5px; line-height: 1.55; margin: 0 0 8px; } .ht-scenario p:last-child { margin-bottom: 0; color: var(--fg-muted); } .ht-scenario strong { color: var(--fg); } /* ─── Testing evidence (screenshot/log frames) ───────────────────── */ .ht-evidence { margin: 24px 0; padding: 0; } .ht-evidence-frame { border-radius: var(--r-md); padding: 20px 24px 24px; position: relative; border: 1px solid var(--line); } .ht-evidence-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); text-transform: uppercase; margin-bottom: 14px; } .ht-evidence-log { background: rgba(0,0,0,0.32); color: #d6e0ff; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; padding: 14px 16px; border-radius: var(--r-sm); overflow-x: auto; margin: 0; white-space: pre; } /* ─── ROI calculator widget ──────────────────────────────────────── */ .ht-roi { margin: 24px 0; } .ht-roi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; } @media (max-width: 740px) { .ht-roi-grid { grid-template-columns: 1fr 1fr; } } .ht-roi-field { display: flex; flex-direction: column; gap: 6px; } .ht-roi-field .eyebrow { font-size: 10px; margin: 0; } .ht-roi-field select, .ht-roi-field input[type="number"] { padding: 10px 12px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 14px; color: var(--fg); font-family: var(--font-mono); outline: none; transition: border-color .12s ease; } .ht-roi-field select:focus, .ht-roi-field input:focus { border-color: var(--acc); } .ht-roi-out { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; padding: 16px 20px; background: var(--bg-sunken); border-radius: var(--r-md); border: 1px solid var(--line); } @media (max-width: 740px) { .ht-roi-out { grid-template-columns: 1fr; gap: 12px; } } .ht-roi-cost { font-size: 26px; font-weight: 700; display: flex; align-items: baseline; gap: 2px; letter-spacing: -0.02em; color: var(--fg); margin-top: 4px; } .ht-roi-cost small { font-size: 12px; color: var(--fg-muted); font-weight: 400; } .ht-roi-cost-r { color: var(--acc-soft-ink); } .ht-roi-save { font-size: 11px; padding: 6px 10px; margin-top: 4px; } /* ─── Alternative recommendation cards ───────────────────────────── */ .ht-alt-recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; } @media (max-width: 880px) { .ht-alt-recs { grid-template-columns: 1fr; } } .ht-alt-recs h3 { font-size: 17px; margin: 8px 0; letter-spacing: -0.01em; } .ht-alt-recs p { font-size: 13.5px; line-height: 1.5; margin: 0; color: var(--fg-muted); } /* ─── Inline code in article body ────────────────────────────────── */ .review-prose code, .entry-content code, .ht-prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 2px 6px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 4px; color: var(--acc-soft-ink); } /* Make all article body content respect the standard prose width on single product pages */ .entry-content { max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--fg); } .entry-content > h2 { font-size: 28px; margin: 40px 0 14px; letter-spacing: -0.02em; color: var(--fg); } .entry-content > h3 { font-size: 20px; margin: 28px 0 10px; letter-spacing: -0.01em; color: var(--fg); } .entry-content > p { margin: 0 0 18px; } .entry-content > .lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--fg-muted); } .entry-content > ul { margin: 0 0 18px; padding-left: 22px; } .entry-content > ul li { margin: 6px 0; line-height: 1.55; } .entry-content > table, .entry-content > .ht-scenarios, .entry-content > .ht-alt-recs, .entry-content > .ht-roi, .entry-content > figure { max-width: none; width: 100%; } /* ─── Review hero — real photo variant ───────────────────────────── */ .review-hero-photo { margin: 32px 0 0; padding: 0; position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-sunken); } .review-hero-photo img { display: block; width: 100%; height: clamp(220px, 36vw, 380px); object-fit: cover; } .review-hero-photo .review-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 24px 14px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.85) 100%); color: rgba(255,255,255,0.85); font-size: 11px; letter-spacing: 0.08em; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; } .review-hero-credit { font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 0.02em; color: rgba(255,255,255,0.6); text-transform: none; } /* ═══════════════════════════════════════════════════════════════════ BRAND LOGO — real favicon variant (Google faviconV2) ─────────────────────────────────────────────────────────────────── */ .brand-mark.has-logo { /* Real-favicon variant for rank-row cards */ background-color: #fff !important; background-size: 65% !important; background-position: center !important; background-repeat: no-repeat !important; color: transparent !important; } [data-theme="dark"] .brand-mark.has-logo, :root[data-theme="dark"] .brand-mark.has-logo { background-color: rgba(255, 255, 255, 0.92) !important; } .logo-sq.has-logo { background-color: #fff !important; background-size: 65% !important; background-position: center !important; background-repeat: no-repeat !important; color: transparent !important; border: 1px solid var(--line); position: relative; overflow: hidden; } .logo-sq.has-logo .logo-sq-fallback { /* Hidden text fallback — visible only if background image fails to load */ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fg); z-index: -1; opacity: 0; } /* Dark mode: tweak background to avoid bright white squares */ [data-theme="dark"] .logo-sq.has-logo, :root[data-theme="dark"] .logo-sq.has-logo { background-color: rgba(255, 255, 255, 0.92) !important; } /* ═══════════════════════════════════════════════════════════════════ MOBILE EXPERIENCE — app-like polish (matches design 03 mobile flow) ─────────────────────────────────────────────────────────────────── */ /* Polish the sticky bottom CTA to match design: floating rounded card, tinted accent ring, backdrop blur, safe-area padding. */ @media (max-width: 760px) { .mob-cta { /* Float above safe-area instead of edge-to-edge */ left: 12px; right: 12px; bottom: 12px; border-radius: 18px; border: 1px solid var(--line); background: color-mix(in oklab, var(--bg-elev) 92%, transparent); box-shadow: var(--sh-3, 0 12px 32px rgba(0,0,0,0.18)), 0 0 0 6px color-mix(in srgb, var(--acc) 12%, transparent); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); } .mob-cta .wrap { gap: 10px; } .mob-cta .nm { font-size: 13px; } .mob-cta .price { font-size: 11px; } .mob-cta-vs .wrap { padding: 0; } body { padding-bottom: calc(var(--mob-cta-h) + env(safe-area-inset-bottom)); } } /* Mobile typography + spacing tightening for app-like feel */ @media (max-width: 600px) { :root { --container-padding: 16px; --mob-cta-h: 84px; } /* Tighter container padding on small screens */ .container { padding-left: 16px; padding-right: 16px; } /* H1 / display headings — scale down without losing impact */ .h-display { font-size: clamp(28px, 8vw, 36px); line-height: 1.05; letter-spacing: -0.03em; } .h-1 { font-size: clamp(26px, 7vw, 34px); line-height: 1.08; } .h-2 { font-size: clamp(22px, 6vw, 28px); line-height: 1.15; } .h-3 { font-size: 18px; line-height: 1.25; } /* Body / lead */ .lead { font-size: 14px; line-height: 1.55; } body { font-size: 14px; } /* Card padding — compact */ .card.pad-lg { padding: 18px; } .card.pad-md { padding: 14px; } .pad-lg { padding: 18px; } /* Chips compact on mobile */ .chip { font-size: 11px; height: 24px; padding: 0 10px; } /* Section vertical rhythm */ section.section { padding-top: 32px; padding-bottom: 32px; } } /* ─── Mobile Big VS card — stack vertically with VS divider ─────────── */ @media (max-width: 600px) { .vs-bigcard { grid-template-columns: 1fr; gap: 14px; padding: 18px; } .vs-bigcard .vs-circle { position: static; transform: none; margin: 4px auto; width: 56px; height: 56px; font-size: 24px; grid-column: 1; grid-row: auto; } .vs-bigcard .vs-side, .vs-bigcard .vs-side.vs-right { padding: 0; text-align: left; grid-column: 1; } .vs-bigcard .vs-side.vs-right .vs-head, .vs-bigcard .vs-side.vs-right .vs-meta, .vs-bigcard .vs-side.vs-right .vs-stats { justify-content: flex-start; } .vs-bigcard .vs-titles h2 { font-size: 24px; } .vs-bigcard .vs-stat-v { font-size: 22px; } .vs-bigcard .vs-stats { gap: 12px; padding-top: 10px; } .vs-bigcard .v-rule { height: 32px; } } /* ─── Mobile scorecard — single column with stacked rows ─────────── */ @media (max-width: 600px) { .vs-scorecard { gap: 4px; } .vs-score-row { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; } .vs-score-label { order: -1; text-align: left; font-size: 12px; color: var(--fg-muted); margin-bottom: 4px; } .vs-score-left, .vs-score-right { display: grid; grid-template-columns: 44px 1fr; gap: 8px; align-items: center; } .vs-score-left .bar.reverse { transform: none; } .vs-score-num { font-size: 13px; } } /* ─── Mobile rank rows — compact card style ─────────── */ @media (max-width: 600px) { .rank-row { grid-template-columns: 28px 40px 1fr auto; gap: 10px; padding: 10px 12px; } .rank-row .rank-tagline { display: none; } .rank-row .rank-name { font-size: 14px; } .rank-row .rank-tag { font-size: 11px; } .rank-row .rank-score { font-size: 14px; } .rank-row .rank-num { font-size: 13px; } } /* ─── Mobile use-case picker — stack cards ─────────── */ @media (max-width: 600px) { .vs-usecases { grid-template-columns: 1fr; gap: 10px; } .vs-usecase { padding: 14px; } } /* ─── Mobile pros/cons stack ─────────── */ @media (max-width: 600px) { .vs-proscons { grid-template-columns: 1fr; gap: 12px; } } /* ─── Mobile category landing podium swipe rail ─────────── */ @media (max-width: 600px) { .swipe { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .swipe::-webkit-scrollbar { display: none; } .swipe > * { scroll-snap-align: start; flex-shrink: 0; } } /* ─── Mobile-optimized tables — horizontal scroll with snap ─────────── */ @media (max-width: 760px) { .ht-scoring, .ht-pricing, .ht-bench, .ht-perfratio, .ht-uptime, .ht-longitudinal, .ht-sentiment, table.compare { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; border-radius: 12px; } .ht-scoring tbody, .ht-pricing tbody, .ht-bench tbody { display: table; width: max-content; min-width: 100%; } } /* ─── Mobile sticky desktop nav offset — keep nav visible but compact ─── */ @media (max-width: 600px) { .site-nav, .site-header { padding: 10px 14px; } .site-nav .nav-links { display: none; } .site-nav .nav-search { font-size: 12px; padding: 6px 10px; } } /* ─── Mobile VS archive grid — single column ─────────── */ @media (max-width: 600px) { .vs-archive-grid { grid-template-columns: 1fr !important; gap: 12px; } .vs-archive-card { padding: 16px; } } /* ─── Hide reading-progress / sidebar artifacts on mobile ─────────── */ @media (max-width: 760px) { .review-sidebar, .reading-progress-wrap { display: none !important; } } /* ─── Mobile review hero — compact ─────────── */ @media (max-width: 600px) { .review-hero { grid-template-columns: 1fr; gap: 16px; } .review-hero-img { height: 160px; border-radius: 14px; } .review-hero-mark { font-size: 42px; } } /* ─── Smooth scroll for in-page anchors (mob CTA → pricing) ─────────── */ html { scroll-behavior: smooth; scroll-padding-top: 80px; }