/* Laptop Finder — buyer-facing stylesheet, also the base for the operator UI (src/admin/admin.css adds the rest). Order: tokens, base, chrome, shared primitives, catalog, product page, comparison, prose, then the breakpoints. Every rule is declared once; the two media blocks at the end are the only place widths are branched. */ /* ---------- Tokens ---------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; --ink: #1d2422; --muted: #62706c; --line: #d7dedb; --line-strong: #b9c4c0; --canvas: #f5f8f7; --surface: #ffffff; --surface-2: #f2f5f4; --surface-3: #e7edeb; --accent: #0b6b5f; --accent-dark: #07564d; --accent-soft: #e3f2ee; --accent-ink: #ffffff; --hover: #eef8f5; --diff: #dff1ea; --warn: #9a4b00; --bad: #8f1d1d; --good: #1f6b3a; --focus: #e49b25; --thumb-bg: #ffffff; --shadow: 0 12px 32px rgb(22 45 40 / 0.08); --shadow-soft: 0 3px 14px rgb(25 48 44 / 0.04); --content-width: 1600px; --gutter: 24px; } /* Dark palette, opt-in only. The site renders light regardless of the system preference; set data-theme="dark" on to try this palette. */ :root[data-theme="dark"] { color-scheme: dark; --ink: #e4eae8; --muted: #98a6a2; --line: #2c3634; --line-strong: #3d4a47; --canvas: #0f1413; --surface: #161d1c; --surface-2: #1c2524; --surface-3: #232e2c; --accent: #3fb39f; --accent-dark: #7cd4c3; --accent-soft: #163330; --accent-ink: #06201c; --hover: #1a2a27; --diff: #17332d; --warn: #e8a552; --bad: #f28b8b; --good: #7fd19a; --focus: #f3b74d; --thumb-bg: #ffffff; --shadow: 0 12px 32px rgb(0 0 0 / 0.45); --shadow-soft: 0 3px 14px rgb(0 0 0 / 0.3); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.45; color: var(--ink); background: var(--canvas); } h1, h2 { line-height: 1.15; letter-spacing: 0; } h1 { font-size: 2rem; margin: 0 0 12px; } h2 { font-size: 1.1rem; margin: 22px 0 10px; } a { color: var(--accent-dark); } a, button, input, select, summary { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } label { display: grid; gap: 5px; font-size: 0.82rem; color: var(--muted); min-width: 0; } input, select, button, .button { width: 100%; min-width: 0; min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; background: var(--surface); color: var(--ink); } input[type="checkbox"], input[type="range"] { accent-color: var(--accent); } button, .button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-color: var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; font-weight: 650; } .button.ghost, .ghost { background: var(--surface); color: var(--accent-dark); } button:disabled { border-color: var(--line-strong); background: var(--surface-3); color: var(--muted); cursor: not-allowed; opacity: 1; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Parked above the viewport, shadow included, until focused. */ .skip-link { position: fixed; top: -120px; left: 10px; z-index: 1000; padding: 10px 14px; border-radius: 7px; background: var(--surface); color: var(--accent-dark); box-shadow: var(--shadow); } .skip-link:focus { top: 10px; } /* ---------- Shared primitives (public and operator UI) ---------- */ .muted, .unknown { color: var(--muted); } .warn { color: var(--warn); font-weight: 700; } .eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 0.76rem; line-height: 1.2; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .badge { display: inline-block; border: 1px solid var(--line); background: var(--accent-soft); color: var(--good); padding: 2px 6px; border-radius: 999px; font-size: 0.75rem; } .mini { border: 1px solid var(--line); border-radius: 6px; padding: 10px; margin-bottom: 8px; background: var(--surface); } .mini.bad { border-color: #e8b2b2; background: rgb(220 80 80 / 0.08); } .inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } th, td { text-align: left; vertical-align: top; border-top: 1px solid var(--line); padding: 9px; } th { width: 190px; color: var(--muted); font-weight: 650; } dt { color: var(--muted); font-size: 0.75rem; } dd { margin: 4px 0 0; font-weight: 650; } /* ---------- Site chrome ---------- */ .site-header { background: var(--surface); border-bottom: 1px solid var(--line); } .site-header-inner, .site-footer-inner { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter); } .site-header-inner { display: flex; align-items: center; gap: 20px; min-height: 62px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 750; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; } .wordmark-mark { width: 26px; height: 26px; color: var(--accent); } .header-search { display: flex; gap: 8px; flex: 1 1 auto; max-width: 520px; margin-left: 8px; } .header-search button { width: auto; padding: 8px 14px; } .site-nav { margin-left: auto; display: flex; gap: 4px; } .site-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; } .site-nav a:hover { background: var(--surface-2); color: var(--accent-dark); } .count-badge { display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.78rem; font-weight: 700; } main { max-width: var(--content-width); margin: 0 auto; padding: 28px var(--gutter) 48px; } .site-footer { margin-top: 24px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.85rem; } .site-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 26px; padding-bottom: 26px; } .site-footer p { margin: 0; max-width: 62ch; } .site-footer nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .site-footer nav a { color: var(--ink); font-size: 0.9rem; text-underline-offset: 4px; } .site-footer button { width: auto; min-height: 0; padding: 8px 14px; background: var(--surface); color: var(--ink); border-color: var(--line); font-weight: 500; } .pager { display: flex; gap: 16px; justify-content: center; margin: 18px 0; } /* ---------- Home: hero ---------- */ .finder-hero { padding: 14px 0 26px; margin-bottom: 18px; } .finder-hero h1 { max-width: 820px; margin-bottom: 8px; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.035em; } .hero-lede { max-width: 640px; margin: 0 0 18px; color: var(--muted); font-size: 1.05rem; line-height: 1.5; } .hero-search { display: flex; max-width: 780px; gap: 10px; } .hero-search input { min-height: 46px; font-size: 1rem; } .hero-search button { width: auto; min-width: 170px; } .preset-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 14px; font-size: 0.86rem; } .preset-links > span { color: var(--muted); } .preset-links a { color: var(--accent-dark); font-weight: 600; text-underline-offset: 3px; } /* ---------- Home: results head and tools ---------- */ .results-section { scroll-margin-top: 18px; } .section-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.025em; } .results-count { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; } .results-count strong { color: var(--ink); } .results-tools { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; } .sort-form { display: flex; align-items: end; gap: 6px; } .sort-form label { gap: 4px; } .sort-form select, .sort-form button { width: auto; min-height: 38px; } .add-col { display: inline-flex; align-items: end; gap: 6px; margin: 0; } .add-col-label { gap: 4px; } .add-col-label select { width: auto; } .add-col-submit { width: auto; } /* Shown only without JavaScript (see the noscript block in layout) or inside the filter sheet, where nothing applies until the buyer says so. */ .manual-submit { display: none; width: auto; } .active-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; font-size: 0.8rem; } .active-filters > span { color: var(--muted); font-weight: 650; } .filter-chip { padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); text-decoration: none; font-weight: 650; } .clear-all { margin-left: 4px; } /* ---------- Home: catalog layout and filters ---------- */ .catalog-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; } .catalog-table { min-width: 0; } .mobile-catalog-tools, .mobile-results, .filter-close { display: none; } .filter-sidebar { min-width: 0; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); box-shadow: var(--shadow-soft); } .filter-sidebar-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-3); } .filter-match-option { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); } .filter-match-option .filter-bool { color: var(--ink); font-weight: 600; } .filter-help { display: block; margin-top: 4px; padding-left: 21px; color: var(--muted); font-size: 0.75rem; line-height: 1.3; } .filter-group { min-width: 0; margin: 0; padding: 0; border-bottom: 1px solid var(--line); background: var(--surface); } .filter-group > summary { margin: 0; min-height: 40px; padding: 7px 11px 7px 10px; border-left: 3px solid var(--accent); border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 0.76rem; font-weight: 700; line-height: 1.2; cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; justify-content: space-between; } .filter-group > summary::-webkit-details-marker { display: none; } .filter-group > summary::after { content: "+"; color: var(--muted); font-size: 0.9rem; line-height: 1; } .filter-group[open] > summary::after { content: "−"; } .filter-group > summary:hover { background: var(--surface-3); } .filter-group-fields { padding: 11px 12px 13px; } .filter-group > .filter-bool { margin: 9px 12px; } .filter-group > .filter-bool + .filter-bool { margin-top: 0; } .filter-field + .filter-field { margin-top: 14px; } .filter-field > label:first-child { display: block; margin-bottom: 4px; } .filter-bool { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--muted); } .filter-bool input { width: auto; min-height: 0; flex: 0 0 auto; } .filter-num { display: flex; gap: 4px; } .filter-num input, .filter-text { width: 100%; min-width: 58px; min-height: 34px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; font: inherit; font-size: 0.82rem; } .filter-pick { width: 100%; min-width: 0; position: relative; } .filter-pick summary { list-style: none; cursor: pointer; min-height: 34px; border: 1px solid var(--line); border-radius: 5px; padding: 4px 8px; font-size: 0.82rem; background: var(--surface); user-select: none; display: flex; align-items: center; } .filter-pick summary::-webkit-details-marker { display: none; } .filter-pick summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-size: 0.7rem; } .filter-pick-list { margin-top: 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); max-height: 190px; overflow-y: auto; padding: 4px 6px; } .pick-row { display: flex; gap: 6px; align-items: center; font-size: 0.8rem; color: var(--ink); padding: 2px 0; white-space: normal; } .pick-row input[type="checkbox"] { width: auto; min-height: 0; margin: 0; flex: 0 0 auto; } .pick-row.pick-vendor { font-weight: 650; } .single-value { font-size: 0.85rem; padding: 8px 2px; font-variant-numeric: tabular-nums; } .single-value .muted { font-size: 0.74rem; } /* Range filter: histogram over the track, two overlaid sliders, numbers. */ .range-mini { --range-start: 0%; --range-end: 100%; min-width: 150px; } .range-hist { display: flex; align-items: flex-end; gap: 1px; height: 22px; margin: 0 2px 2px; padding-bottom: 2px; border-bottom: 1px solid var(--line); pointer-events: none; } .range-bar { flex: 1; min-height: 3px; background: var(--line-strong); border-radius: 1px 1px 0 0; transition: background 0.1s ease, opacity 0.1s ease; } .range-bar[data-count="0"] { background: var(--surface-3); } .range-bar.in { background: var(--accent); } .range-bar.dim { opacity: 0.35; } .range-track { position: relative; min-height: 22px; margin: 0 2px 4px; } .range-track::before, .range-fill { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 999px; } .range-track::before { background: var(--line); } .range-fill { left: var(--range-start); right: calc(100% - var(--range-end)); background: var(--accent); } .range-track input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; border: none; border-radius: 0; background: transparent; appearance: none; pointer-events: none; } .range-track input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; } .range-track input[type="range"]::-webkit-slider-thumb { appearance: none; width: 13px; height: 13px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--surface); background: var(--accent); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18); pointer-events: auto; } .range-track input[type="range"]::-moz-range-track { height: 4px; background: transparent; } .range-track input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--surface); background: var(--accent); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18); pointer-events: auto; } /* Schema-driven results table */ .grid-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-soft); /* The container's own horizontal bar is hidden; .grid-scrollbar (sized by app.js to the scrollable middle region) is the visible one. */ scrollbar-width: none; } .grid-scroll::-webkit-scrollbar { display: none; } .grid-scrollbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--surface-2); margin: 2px 0; } .grid-scrollbar-spacer { height: 1px; } .grid-scrollbar::-webkit-scrollbar { height: 10px; } .grid-scrollbar::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 5px; } .grid-scrollbar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 5px; } table.grid { /* separate, not collapse: collapsed borders belong to the shared grid and stay behind when a sticky column pins — the divider must travel with the cell that owns it. */ border-collapse: separate; border-spacing: 0; table-layout: auto; width: max(100%, calc(370px + var(--column-count) * 150px)); font-size: 0.9rem; } table.grid th, table.grid td { border-top: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; white-space: normal; overflow-wrap: anywhere; } table.grid thead th { background: var(--surface-2); position: sticky; top: 0; z-index: 2; width: auto; } table.grid .compare-col { /* Collapse the allocation basis; nowrap supplies the intrinsic minimum, so spare table width goes to the useful data columns instead. */ width: 0; white-space: nowrap; overflow-wrap: normal; text-align: center; } table.grid .compare-col input { width: auto; min-height: 0; } table.grid .identity-col { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 220px; min-width: 220px; color: var(--ink); } table.grid .buy-col { position: sticky; right: 0; z-index: 1; background: var(--surface); /* the seam divider on a right-pinned column must be its own (the neighbor's border-right scrolls away underneath it) */ border-left: 1px solid var(--line); width: 150px; } table.grid thead .identity-col, table.grid thead .buy-col { z-index: 3; background: var(--surface-2); } table.grid .spec-col { width: 150px; max-width: 150px; } table.grid .col-number, table.grid .col-boolean { width: 120px; max-width: 120px; } .col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .col-sort { min-width: 0; text-decoration: none; font-weight: 600; color: var(--ink); } .col-sort:hover { color: var(--accent-dark); } .col-unit { font-weight: 400; color: var(--muted); font-size: 0.78rem; } .col-arrow { color: var(--muted); font-size: 0.8em; } .col-arrow.active { color: var(--accent-dark); } .col-remove { flex: 0 0 auto; text-decoration: none; color: var(--muted); font-size: 1rem; line-height: 1; } .col-remove:hover { color: var(--bad); } /* Idle sort glyphs and remove crosses only appear when the heading is pointed at; touch screens, which cannot hover, keep them visible. */ @media (hover: hover) { .col-arrow:not(.active), .col-remove { opacity: 0; transition: opacity 0.12s ease; } th:hover .col-arrow, th:focus-within .col-arrow, th:hover .col-remove, th:focus-within .col-remove { opacity: 1; } } th.sorted { box-shadow: inset 0 -2px 0 var(--accent); } .cell-value { font-variant-numeric: tabular-nums; } table.grid tbody tr:hover td, table.grid tbody tr:hover .identity-col, table.grid tbody tr:hover .buy-col { background: var(--hover); } table.grid .empty { text-align: center; color: var(--muted); padding: 28px; } .identity-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .identity-text { display: flex; flex-direction: column; min-width: 0; } .identity-name { font-weight: 600; } .identity-link:hover .identity-name { color: var(--accent-dark); } .row-thumb { width: 52px; height: 34px; object-fit: contain; border: 1px solid var(--line); border-radius: 5px; background: var(--thumb-bg); flex-shrink: 0; } .buy-btn { display: inline-block; background: var(--accent); color: var(--accent-ink); border-radius: 6px; padding: 3px 10px; font-size: 0.82rem; text-decoration: none; font-weight: 600; } .buy-item { display: inline-block; margin: 1px 0; } .buy-retailer { color: var(--ink); font-size: 0.82rem; font-weight: 600; } .product-placeholder { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(145deg, var(--surface-2), var(--surface-3)); color: var(--muted); } .placeholder-device { position: relative; width: 52%; aspect-ratio: 1.55; border: 2px solid var(--line-strong); border-radius: 3px; } .placeholder-device::after { content: ""; position: absolute; left: -18%; right: -18%; bottom: -7px; height: 3px; border-radius: 4px; background: var(--line-strong); } .placeholder-label { margin-top: 18px; font-size: 0.78rem; } /* ---------- Home: mobile result cards ---------- */ .result-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface); box-shadow: var(--shadow-soft); } .result-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; } .result-card .identity-link { align-items: flex-start; } .result-card .row-thumb { width: 64px; height: 44px; } .card-compare { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--ink); } .card-compare input { width: 18px; min-height: 18px; } .result-card-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 12px 0; border-top: 1px solid var(--line); } .result-card-specs > div { min-width: 0; padding: 9px 6px; border-bottom: 1px solid var(--line); } .result-card-specs dd { overflow-wrap: anywhere; font-size: 0.88rem; } .result-card-buy { padding-top: 2px; } .result-card-buy .buy-btn { min-height: 42px; display: inline-flex; align-items: center; } .empty-card { padding: 28px; text-align: center; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .compare-tray { position: fixed; z-index: 20; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .compare-tray[hidden] { display: none; } .compare-tray button { width: auto; min-height: 38px; } /* ---------- Product page ---------- */ .detail-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; margin-bottom: 22px; padding: 4px 0 20px; border-bottom: 1px solid var(--line); } .detail-copy { min-width: 0; } .detail-copy h1 { font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -0.04em; } .detail-image { aspect-ratio: 12 / 7; border: 1px solid var(--line); border-radius: 8px; background: var(--thumb-bg); overflow: hidden; } .detail-image img, .detail-product-image { width: 100%; height: 100%; object-fit: contain; display: block; } .product-placeholder-large { width: 100%; height: 100%; } .columns { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); gap: 28px; } .detail-specs h2, .detail-aside h2 { margin-top: 0; } .detail-aside h2 + h2, .detail-aside .mini + h2, .detail-aside p + h2 { margin-top: 22px; } .spec-table th { width: 190px; } .detail-aside { padding: 0 2px; } .review-card p { margin: 6px 0 0; } /* ---------- Comparison ---------- */ .compare-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; } .compare-heading h1 { margin-bottom: 6px; } .compare-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .compare-actions .button { width: auto; } .compare th { width: auto; } .compare th .sub { display: block; font-weight: 400; font-size: 0.75rem; } .compare-product { display: grid; gap: 5px; min-width: 170px; } .compare-product > span { color: var(--muted); font-size: 0.76rem; font-weight: 450; } .compare-thumb { width: 76px; height: 48px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: var(--thumb-bg); } .compare-remove { color: var(--muted); font-size: 0.74rem; font-weight: 450; } /* A differing row: tinted cells plus an accent bar on its heading, so the difference registers even when the tint is subtle on a given screen. */ .compare-diff th, .compare-diff td { background: var(--diff); } .compare-diff th { box-shadow: inset 3px 0 0 var(--accent); color: var(--ink); } .compare-buy th, .compare-buy td { background: var(--surface-2); } /* ---------- Prose and message pages ---------- */ .prose-page, .message-page { max-width: 820px; margin: 8px auto 48px; padding: clamp(22px, 5vw, 46px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); } .prose-page h1 { margin-top: 0; } .prose-page p, .prose-page li { line-height: 1.65; } .prose-page li + li { margin-top: 6px; } .message-page { margin-top: 18px; text-align: center; } .message-page .button { width: auto; margin-top: 10px; } /* ---------- Consent ---------- */ /* Consent remains nonblocking; the native dialog supplies focus containment. */ .privacy-banner { position: sticky; bottom: 0; z-index: 100; padding: 14px max(var(--gutter), calc((100vw - var(--content-width) + 2 * var(--gutter)) / 2)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgb(0 0 0 / 0.07); display: flex; align-items: center; gap: 24px; } .privacy-banner[hidden], .privacy-status[hidden] { display: none; } .privacy-banner p { flex: 1; margin: 0; font-size: 14px; } .privacy-actions { display: flex; flex-wrap: wrap; gap: 10px; } .privacy-actions button { width: auto; flex: 1 0 auto; cursor: pointer; background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 9px 15px; border-radius: 5px; font: inherit; font-weight: 500; } #privacy-dialog { max-width: 560px; width: calc(100% - 32px); border: 1px solid var(--line); border-radius: 8px; padding: 24px; color: var(--ink); background: var(--surface); } #privacy-dialog::backdrop { background: rgb(0 0 0 / 0.4); } #privacy-dialog .privacy-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #privacy-dialog h2 { margin: 0; font-size: 20px; } #privacy-dialog > p { margin: 8px 0 20px; color: var(--muted); font-size: 14px; line-height: 1.5; } #privacy-dialog .privacy-option { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 16px 0; border-top: 1px solid var(--line); cursor: pointer; line-height: 1.5; } #privacy-dialog .privacy-option input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 3px 0 0; padding: 0; } #privacy-dialog .privacy-option strong { display: block; color: var(--ink); font-size: 15px; font-weight: 600; } #privacy-dialog .privacy-option span span { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; } #privacy-dialog .privacy-actions { padding-top: 16px; border-top: 1px solid var(--line); } #privacy-dialog :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .privacy-status { position: fixed; bottom: 12px; left: 12px; z-index: 110; max-width: 450px; padding: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; } /* ---------- Breakpoints ---------- */ /* Phones: stacked chrome, result cards instead of the table. */ @media (max-width: 760px) { main { padding: 16px 16px 36px; } .site-header-inner { min-height: 56px; padding: 0 16px; } .header-search { display: none; } .finder-hero { padding: 6px 0 22px; margin-bottom: 18px; } .hero-search { display: grid; } .hero-search button { width: 100%; } .preset-links { align-items: flex-start; } .section-head { display: grid; } /* Sort and direction share one row; the column picker takes the next. */ .results-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .sort-form { display: contents; } .sort-form label, .sort-form select, .add-col-label select { width: 100%; } .add-col { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); } .sort-form .manual-submit, .add-col .manual-submit { grid-column: 1 / -1; } .desktop-results, .catalog-table > .grid-scrollbar { display: none !important; } .mobile-results { display: grid; gap: 12px; } .compare-tray { left: 12px; right: 12px; bottom: 10px; transform: none; justify-content: center; } .detail-head { grid-template-columns: 1fr; padding: 0 0 20px; } .detail-image { order: 2; } .columns { display: flex; flex-direction: column; } .detail-aside { order: -1; } .spec-table th { width: 105px; padding-left: 0; } .spec-table td { padding-left: 5px; padding-right: 3px; } .compare-heading { display: grid; align-items: start; } .compare-scroll { margin: 0 -16px; border-radius: 0; scrollbar-width: thin; } .compare-scroll::-webkit-scrollbar { display: block; height: 10px; } .compare-product { min-width: 150px; } .compare th, .compare td { min-width: 120px; } .compare th:first-child, .compare td:first-child { min-width: 100px; position: sticky; left: 0; z-index: 2; background: var(--surface); } .compare-diff th:first-child { background: var(--diff); } .site-footer-inner { display: grid; align-items: start; padding: 24px 16px 88px; } .site-footer nav { align-items: flex-start; flex-direction: column; gap: 12px; } .privacy-banner { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; } } /* Keep the buyer-facing mobile interaction rules last. The filter sheet: below this width the sidebar would squeeze the results table until the pinned identity and price columns hide every spec column, so tablets keep the table and get the full-screen filter sheet phones use. The breakpoint is mirrored in app.js (mobileQuery). */ @media (max-width: 1100px) { body.filters-open { overflow: hidden; } .mobile-catalog-tools { position: sticky; top: 8px; z-index: 8; display: flex; margin: 10px 0; } .filter-toggle { width: 100%; min-height: 46px; border-color: var(--accent); background: var(--surface); color: var(--accent-dark); box-shadow: 0 5px 18px rgb(18 48 42 / 0.12); font-weight: 750; } .filter-toggle .count-badge { margin-left: 6px; } .catalog-layout { display: block; } /* The sheet owns the whole viewport: no side gutter, no backdrop peeking through, no rounded edge suggesting it slid in from the right. It sits above the consent banner (100) and status toast (110), or they would cover the sticky Apply button. */ .filter-sidebar { position: fixed; inset: 0; z-index: 120; max-height: none; border: 0; border-radius: 0; box-shadow: none; } .filter-sidebar[hidden], .filter-backdrop[hidden] { display: none !important; } .filter-backdrop { position: fixed; inset: 0; z-index: 119; background: rgb(13 30 27 / 0.46); } .filter-sidebar-head { min-height: 54px; padding: 12px 16px; } .filter-sidebar-head > span { display: flex; align-items: center; gap: 12px; } .filter-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 1.6rem; } .filter-group > summary, .filter-pick summary, .pick-row, .filter-bool { min-height: 44px; } .grid-filters .manual-submit { position: sticky; bottom: 0; z-index: 4; display: inline-flex; width: calc(100% - 24px); min-height: 48px; margin: 12px; box-shadow: 0 -8px 20px var(--surface-2); } }