/* PepPrep — static stylesheet, no frameworks The typefaces are loaded by a in each page's , not by an @import here. An @import makes the browser fetch this file, read it, and only then start fetching the fonts — which shows up as a pause before any text appears on a slow phone. COLOURS, TYPE SIZES AND SPACING ALL LIVE IN ONE PLACE: the :root block below. The two blocks after it are the same colour names in dark. Change something once here and it changes site-wide. Nothing further down should ever hard-code a colour — that's what breaks dark mode. */ :root { color-scheme: light; /* ---- colour ---- */ --bg: #f7f9fb; --surface: #ffffff; --surface-2: #f1f5f8; --ink: #101d2b; --muted: #5b6b7b; --line: #e3eaf0; --line-strong: #8695a3; --brand: #0e7490; --brand-dark: #135b73; --brand-soft: #e8f4f8; --brand-soft-hover: #d6ebf2; --accent: #b45309; --accent-dark: #96450a; --accent-text: #b45309; --good: #15803d; --warn-bg: #fef6e0; --warn-ink: #8a5a10; --warn-line: #f2ddb0; --promo-from: #12556b; --promo-to: #0e7490; --promo-ink: #ffffff; --promo-muted: #eaf5f9; --footer-bg: #0f1c2b; --footer-ink: #b7c4d1; --footer-strong: #ffffff; --footer-fine: #8595a5; --footer-line: #22364a; --plate: #ffffff; /* ---- type ---- */ --font-head: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Source Sans 3", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-2xs: .75rem; /* smallest label size; grows on phones */ --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: 1.1875rem; --fs-h3: 1.125rem; --fs-h2: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem); --fs-h1: clamp(1.85rem, 1.35rem + 2.1vw, 2.9rem); /* ---- spacing + shape ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --radius: 14px; --radius-sm: 10px; --header-h: 68px; --shadow: 0 1px 2px rgba(16, 29, 43, .04), 0 10px 26px -14px rgba(16, 29, 43, .18); --shadow-lift: 0 2px 6px rgba(16, 29, 43, .06), 0 18px 40px -20px rgba(16, 29, 43, .28); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0c151e; --surface: #15202b; --surface-2: #1b2836; --ink: #e9f0f6; --muted: #9db0c0; --line: #253444; --line-strong: #63798a; --brand: #0d788d; --brand-dark: #74d5ea; --brand-soft: #123340; --brand-soft-hover: #17414f; --accent: #a35d07; --accent-text: #e08c2c; --accent-dark: #cb780e; --good: #4ade80; --warn-bg: #33260f; --warn-ink: #f0cb7c; --warn-line: #57431a; --promo-from: #0b4b5c; --promo-to: #0b6274; --promo-muted: #cfe9f0; --footer-bg: #08111a; --footer-ink: #9db0c0; --footer-strong: #f2f7fb; --footer-fine: #72859a; --footer-line: #1f2d3c; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -14px rgba(0, 0, 0, .7); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .85); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0c151e; --surface: #15202b; --surface-2: #1b2836; --ink: #e9f0f6; --muted: #9db0c0; --line: #253444; --line-strong: #63798a; --brand: #0d788d; --brand-dark: #74d5ea; --brand-soft: #123340; --brand-soft-hover: #17414f; --accent: #a35d07; --accent-text: #e08c2c; --accent-dark: #cb780e; --good: #4ade80; --warn-bg: #33260f; --warn-ink: #f0cb7c; --warn-line: #57431a; --promo-from: #0b4b5c; --promo-to: #0b6274; --promo-muted: #cfe9f0; --footer-bg: #08111a; --footer-ink: #9db0c0; --footer-strong: #f2f7fb; --footer-fine: #72859a; --footer-line: #1f2d3c; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -14px rgba(0, 0, 0, .7); --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 18px 40px -20px rgba(0, 0, 0, .85); } /* ---------- base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.62; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } a { color: var(--brand-dark); } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.18; letter-spacing: -.018em; text-wrap: balance; margin: 0 0 .5em; font-weight: 700; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -.01em; } p { margin: 0 0 1em; } :where(p, li) { max-width: 68ch; } .wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--s5); } /* ---------- header ---------- */ .site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; } .site-header .wrap { display: flex; align-items: center; gap: var(--s4); min-height: var(--header-h); } .logo { display: flex; align-items: center; gap: 10px; margin-right: auto; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; } .logo .mark { width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; } .logo .mark svg { width: 19px; height: 19px; } .logo small { color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: .75rem; display: block; letter-spacing: 0; line-height: 1.3; } .nav-wrap { display: flex; align-items: center; gap: var(--s4); } .site-nav { display: flex; gap: 2px; } .site-nav a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: var(--fs-sm); padding: 8px 11px; border-radius: 8px; white-space: nowrap; } .site-nav a:hover { color: var(--ink); background: var(--surface-2); } .site-nav a[aria-current="page"] { color: var(--brand-dark); background: var(--brand-soft); } .header-tools { display: flex; align-items: center; gap: var(--s2); } #market-slot select { font: inherit; font-size: var(--fs-xs); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 8px; max-width: 160px; cursor: pointer; } .theme-btn, .nav-toggle { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; } .theme-btn:hover, .nav-toggle:hover { border-color: var(--brand); color: var(--brand-dark); } .theme-btn svg, .nav-toggle svg { width: 19px; height: 19px; } .nav-toggle { display: none; } a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } @media (max-width: 940px) { .nav-toggle { display: inline-grid; } .nav-wrap { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: var(--s3); background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s4) var(--s5) var(--s5); box-shadow: var(--shadow); } .nav-wrap[data-open="true"] { display: flex; } .site-nav { flex-direction: column; gap: 2px; } .site-nav a { padding: 11px 12px; font-size: var(--fs-base); } .header-tools { justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--s3); } #market-slot select { max-width: none; flex: 1; font-size: var(--fs-sm); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; cursor: pointer; line-height: 1.3; transition: background .15s, border-color .15s, color .15s; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); } .btn-buy { background: var(--accent); color: #fff; width: 100%; } .btn-buy:hover { background: var(--accent-dark); } /* ---------- hero ---------- */ .hero { padding: var(--s8) 0 var(--s7); } .hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s7); align-items: center; } .hero .kicker { display: inline-block; background: var(--brand-soft); color: var(--brand-dark); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs); padding: 5px 12px; border-radius: 999px; margin-bottom: var(--s4); letter-spacing: .01em; } .hero p.lede { font-size: var(--fs-lg); color: var(--muted); max-width: 34em; } .hero .cta-row { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); } .hero-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow); } .hero-tiles .tile { aspect-ratio: 1; width: auto; height: auto; } /* ---------- badge strip ---------- */ .badges { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .badges .wrap { display: flex; gap: var(--s2) var(--s6); flex-wrap: wrap; justify-content: center; padding-top: var(--s3); padding-bottom: var(--s3); } .badges span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-weight: 600; font-size: var(--fs-xs); } .badges svg { width: 16px; height: 16px; color: var(--good); flex: none; } /* ---------- sections ---------- */ section.block { padding: var(--s8) 0; } section.block.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-head { max-width: 42em; margin-bottom: var(--s5); } .section-head p { color: var(--muted); } .section-head .more { font-weight: 600; text-decoration: none; white-space: nowrap; } /* ---------- category cards ---------- */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s3); } .cat-card { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; } .cat-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); } .cat-card b { display: block; font-family: var(--font-head); font-size: var(--fs-sm); } .cat-card small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; display: block; } /* ---------- product cards ---------- */ .tile { width: 46px; height: 46px; flex: none; border-radius: 11px; background: var(--brand-soft); color: var(--brand-dark); display: grid; place-items: center; } .tile svg { width: 23px; height: 23px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--s4); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s3); box-shadow: var(--shadow); transition: box-shadow .15s, border-color .15s; } .card:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); } .card .card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); } .card .tags { display: flex; gap: 6px; align-items: center; } .card .badge { font-family: var(--font-head); font-size: var(--fs-2xs); font-weight: 700; color: var(--accent-text); background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .card .cat-tag { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .card-head { display: flex; flex-direction: column; gap: 3px; } /* spec chips — the numbers that tell near-identical products apart */ .specs { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0; padding: 0; } .specs li { font-family: var(--font-head); font-size: var(--fs-2xs); font-weight: 600; color: var(--brand-dark); background: var(--brand-soft); padding: 3px 9px; border-radius: 6px; white-space: nowrap; } .card h3 { margin: 0; } .card .what { color: var(--muted); font-size: var(--fs-sm); margin: 0; flex-grow: 1; } .card .why { font-size: var(--fs-sm); margin: 0; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; line-height: 1.5; } .card .why b { color: var(--brand-dark); } .card .tip { font-size: var(--fs-xs); color: var(--muted); margin: 0; line-height: 1.5; border-left: 2px solid var(--brand); padding: 1px 0 1px 10px; } .card .tip b { color: var(--brand-dark); } .card .price { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; } .card .price small { display: block; color: var(--muted); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-2xs); margin-top: 1px; } .card .aff-note { font-size: var(--fs-2xs); color: var(--muted); text-align: center; margin: 0; } .card .details-link { display: block; text-align: center; font-size: var(--fs-xs); font-weight: 600; text-decoration: none; color: var(--brand-dark); margin-top: -4px; } .card .details-link:hover { text-decoration: underline; } .card .photo-wrap { background: var(--plate); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; } .card .photo { width: 100%; height: 148px; object-fit: contain; display: block; } .card .variants { display: flex; gap: 6px; flex-wrap: wrap; } .card .v-thumb { width: 40px; height: 40px; padding: 3px; cursor: pointer; background: var(--plate); border: 1px solid var(--line); border-radius: 8px; } .card .v-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .card .v-thumb.sel { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: -1px; } .card .v-label { font-size: var(--fs-xs); color: var(--muted); margin: 0; } /* ---------- shop controls ---------- */ /* Search sits level with the first row of chips, so the block reads as one tidy rectangle however many chips wrap. */ .shop-controls { display: flex; gap: var(--s4); align-items: flex-start; margin: var(--s5) 0 var(--s4); } .chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs); padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .chip:hover { border-color: var(--brand); color: var(--brand-dark); } .chip.active { background: var(--brand); border-color: var(--brand); color: #fff; } .search-box { margin-left: auto; flex: none; } .search-box input { padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-sm); width: 250px; background: var(--surface); color: var(--ink); } .search-box input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); } .result-count { color: var(--muted); font-size: var(--fs-xs); margin: 0 0 var(--s4); } .empty-state { text-align: center; color: var(--muted); padding: var(--s8) 0; } @media (max-width: 820px) { .shop-controls { flex-direction: column; align-items: stretch; gap: var(--s3); } .search-box { margin-left: 0; order: -1; } .search-box input { width: 100%; } /* one swipeable row instead of a five-row wall of pills */ .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s2); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chips::-webkit-scrollbar { display: none; } } /* ---------- disclosure bar ---------- */ /* Deliberately quiet. It still has to be easy to see and read — that's the legal bit — but it's a footnote, not a warning, so it's muted grey rather than alarm yellow. */ .disclosure-bar { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 14px; font-size: var(--fs-xs); margin: var(--s4) 0 0; } .disclosure-bar a { color: var(--brand-dark); font-weight: 600; } /* ---------- how it works ---------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s4); } .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); } .step .num { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--s3); } .step p { color: var(--muted); font-size: var(--fs-sm); margin: 0; } /* ---------- calculator ---------- */ .calc-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s5); align-items: start; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow); } .field { margin-bottom: var(--s5); } .field label { display: block; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; } .field .control-row { display: flex; gap: 8px; } .field input, .field select { width: 100%; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: var(--fs-base); background: var(--surface); color: var(--ink); } .field input:focus, .field select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); } .field .hint { font-size: var(--fs-xs); color: var(--muted); margin: 6px 0 0; } .quick-fills { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; } .quick-fills button { font-family: var(--font-head); font-size: var(--fs-xs); font-weight: 600; color: var(--brand-dark); background: var(--brand-soft); border: none; border-radius: 999px; padding: 5px 12px; cursor: pointer; } .quick-fills button:hover { background: var(--brand-soft-hover); } .result-panel { position: sticky; top: calc(var(--header-h) + 16px); } .result-big { text-align: center; padding: var(--s4) 0 var(--s1); } .result-big .value { font-family: var(--font-head); font-size: 3.2rem; font-weight: 700; color: var(--brand-dark); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .result-big .label { color: var(--muted); font-weight: 600; margin-top: 6px; font-size: var(--fs-sm); } .result-rows { margin-top: var(--s4); border-top: 1px solid var(--line); } .result-rows .row { display: flex; justify-content: space-between; gap: var(--s3); padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); } .result-rows .row span { color: var(--muted); } .result-rows .row b { text-align: right; font-variant-numeric: tabular-nums; } .calc-warning { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: var(--radius-sm); padding: 11px 14px; font-size: var(--fs-sm); margin-top: var(--s4); } .calc-note { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s4); } .calc-scope { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 15px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin-top: var(--s4); max-width: 62ch; } .calc-scope b { color: var(--ink); } .calc-prose { margin-top: var(--s7); } .calc-prose h2 { font-family: var(--font-head); font-size: var(--fs-h3); color: var(--ink); margin: var(--s7) 0 var(--s3); text-wrap: balance; } .calc-prose h2:first-child { margin-top: 0; } .calc-prose p { color: var(--muted); margin: 0 0 var(--s4); line-height: 1.7; } .calc-prose ul { color: var(--muted); margin: 0 0 var(--s4); padding-left: 1.15em; line-height: 1.7; } .calc-prose li { margin-bottom: 6px; } .calc-prose b { color: var(--ink); } .calc-prose .faq-item p { margin-bottom: 14px; } /* ---------- reconstitution calculator ---------- */ .pp-calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow); } .pp-calc-step + .pp-calc-step { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); } .pp-calc-step h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s4); font-size: var(--fs-sm); letter-spacing: .01em; } .pp-calc-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--brand); color: #fff; font-size: var(--fs-xs); } .pp-calc-line + .pp-calc-line { margin-top: var(--s4); } .pp-calc-line > label { display: block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 8px; } .pp-calc-input { display: flex; gap: 10px; align-items: stretch; } .pp-calc-input input[type="number"] { flex: 1; min-width: 0; padding: 12px 15px; font: inherit; font-size: 1.1rem; font-variant-numeric: tabular-nums; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } .pp-calc-input input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); } .pp-calc-input input::-webkit-outer-spin-button, .pp-calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pp-seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; flex: 0 0 auto; } .pp-seg button { padding: 0 16px; background: var(--surface-2); color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); border: 0; cursor: pointer; } .pp-seg button + button { border-left: 1px solid var(--line-strong); } .pp-seg button.on { background: var(--brand); color: #fff; } .pp-seg-wide { display: flex; width: 100%; } .pp-seg-wide button { flex: 1; padding: 12px 8px; } .pp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .pp-chips button { border: 1px solid var(--line-strong); background: none; border-radius: 999px; padding: 7px 14px; color: var(--muted); cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs); } .pp-chips button:hover { border-color: var(--brand); color: var(--brand-dark); } .pp-chips button.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); } .pp-calc-hint { font-size: var(--fs-sm); color: var(--muted); margin: -4px 0 var(--s4); } .pp-dil { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .pp-dil button { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 12px 14px; cursor: pointer; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } .pp-dil button b { font-family: var(--font-head); font-size: var(--fs-base); } .pp-dil button span { font-size: var(--fs-2xs); color: var(--muted); } .pp-dil button i { font-style: normal; font-size: var(--fs-2xs); color: var(--brand-dark); font-weight: 600; } .pp-dil button:hover { border-color: var(--brand); } .pp-dil button.on { border-color: var(--brand); background: var(--brand-soft); outline: 1px solid var(--brand); } .pp-dil button.bad { opacity: .55; } .pp-dil button.bad i { color: var(--warn-ink); } .pp-dil-custom { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .pp-dil-custom label { font-size: var(--fs-sm); color: var(--muted); } .pp-dil-custom input { width: 110px; padding: 9px 12px; font: inherit; font-size: var(--fs-sm); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } .pp-dil-custom input.on { border-color: var(--brand); background: var(--brand-soft); } .pp-calc-answer { margin-top: var(--s5); padding: var(--s5); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); text-align: center; } .pp-calc-answer-label { display: block; font-family: var(--font-head); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .pp-calc-answer strong { display: block; margin-top: 6px; font-family: var(--font-head); font-size: clamp(2rem, 7vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--brand-dark); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .pp-calc-answer-sub { display: block; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.7; } .pp-syr { display: block; margin: var(--s4) auto 4px; max-width: 320px; width: 100%; } .pp-syr .barrel { fill: none; stroke: var(--line-strong); stroke-width: 1.5; } .pp-syr .fill { fill: var(--brand-soft-hover); } .pp-syr .fill.over { fill: var(--accent); opacity: .45; } .pp-syr .tick { stroke: var(--line-strong); stroke-width: 1; } .pp-syr .needle { stroke: var(--muted); stroke-width: 2; } .pp-syr text { fill: var(--muted); font-family: var(--font-head); font-size: 9px; } .pp-syr .mark { fill: var(--brand-dark); font-size: 10px; font-weight: 700; } .pp-copy-result { margin-top: var(--s3); border: 1px solid var(--line-strong); background: none; border-radius: 999px; padding: 8px 18px; cursor: pointer; color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs); } .pp-copy-result:hover { border-color: var(--brand); color: var(--brand-dark); } .pp-calc-note { font-size: var(--fs-2xs); color: var(--muted); margin: var(--s4) 0 0; line-height: 1.65; } @media (max-width: 560px) { .pp-calc { padding: var(--s4); } .pp-seg button { padding: 0 12px; } } /* ---------- comparison tables ---------- */ .table-wrap { overflow-x: auto; margin: var(--s4) 0; border: 1px solid var(--line); border-radius: var(--radius-sm); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); } .prose th { text-align: left; background: var(--brand-soft); color: var(--brand-dark); font-family: var(--font-head); font-size: var(--fs-xs); letter-spacing: .02em; padding: 10px 14px; } .prose td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; } .prose td b { white-space: nowrap; } /* ---------- FAQ ---------- */ .faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px var(--s5); margin-bottom: 10px; } .faq-item summary { font-family: var(--font-head); font-weight: 600; padding: 14px 0; cursor: pointer; list-style-position: outside; font-size: var(--fs-base); } .faq-item summary:hover { color: var(--brand-dark); } .faq-item p { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 14px; } .faq-item a { font-weight: 600; } /* ---------- kit builder ---------- */ .kit-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: var(--s5) 0 var(--s1); } .kit-chip { border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-sm); padding: 11px 18px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } .kit-chip:hover { border-color: var(--brand); } .kit-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; } .kit-group-title { margin: var(--s6) 0 var(--s3); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .kit-group-title h2 { margin: 0; } .kit-group-title small { color: var(--muted); font-weight: 500; font-size: var(--fs-xs); } .kit-item { display: flex; align-items: center; gap: var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px; } .kit-item .tile { width: 40px; height: 40px; border-radius: 10px; } .kit-item .tile svg { width: 20px; height: 20px; } .kit-item .kphoto { width: 40px; height: 40px; flex: none; object-fit: contain; background: var(--plate); border: 1px solid var(--line); border-radius: 10px; padding: 2px; } .kit-item .info { flex: 1; min-width: 0; } .kit-item .info b { display: block; font-family: var(--font-head); font-size: var(--fs-sm); } .kit-item .info small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; display: block; } /* width:auto undoes the full-width rule .btn-buy uses inside cards — in a kit row the button sits beside the text, not under it. */ .kit-item .btn { padding: 9px 16px; font-size: var(--fs-xs); flex: none; width: auto; } .have-box { display: grid; place-items: center; flex: none; cursor: pointer; padding: 2px; } .have-box input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; } .kit-item.have { opacity: .55; } .kit-item.have .info b { text-decoration: line-through; } .have-count { color: var(--muted); font-size: var(--fs-xs); } .kit-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: var(--s4); } .kit-empty { text-align: center; color: var(--muted); padding: var(--s7) 0; } .copy-ok { color: var(--good); font-weight: 600; font-size: var(--fs-sm); } @media (max-width: 560px) { .kit-item { flex-wrap: wrap; } .kit-item .btn { width: 100%; } } /* ---------- guides / prose ---------- */ .prose { max-width: 44em; } .prose h2 { margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--line); } .prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .prose ul, .prose ol { padding-left: 1.25em; } .prose li { margin-bottom: .5em; } .prose .supplies { background: var(--brand-soft); border-radius: var(--radius-sm); padding: 12px 16px; font-size: var(--fs-sm); max-width: none; } .reviewed { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 var(--s5); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); } .guide-nav { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: space-between; margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); } .glossary { max-width: none; } .glossary dl { display: grid; gap: 0; margin: 0; } .glossary dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); } .glossary dl > dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .glossary dd { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; } .glossary dd a { font-weight: 600; } .toc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: var(--s4) 0 0; } .toc-chips a { text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs); border: 1px solid var(--line-strong); background: var(--surface); color: var(--brand-dark); padding: 7px 14px; border-radius: 999px; } .toc-chips a:hover { border-color: var(--brand); background: var(--brand-soft); } /* ---------- page hero (inner pages) ---------- */ .page-hero { padding: var(--s7) 0 var(--s2); } .page-hero p { color: var(--muted); max-width: 42em; font-size: var(--fs-lg); } /* ---------- promo band ---------- */ .promo { background: linear-gradient(120deg, var(--promo-from), var(--promo-to)); color: var(--promo-ink); border-radius: var(--radius); padding: var(--s6); display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; } .promo h2 { color: var(--promo-ink); margin: 0 0 6px; } .promo p { color: var(--promo-muted); margin: 0; max-width: 34em; font-size: var(--fs-sm); } .promo .btn { background: var(--promo-ink); color: var(--promo-from); flex: none; } /* ---------- email sign-up ---------- */ .signup { background: var(--brand-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6) var(--s5); margin: var(--s6) 0 0; } .signup-inner { max-width: 44em; margin: 0 auto; text-align: center; } .signup h2 { margin: 0 0 8px; } .signup p { color: var(--muted); margin: 0 auto var(--s4); max-width: 34em; font-size: var(--fs-sm); } .signup-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .signup-form input { flex: 1 1 260px; max-width: 340px; padding: 12px 15px; font: inherit; font-size: var(--fs-sm); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } .signup-form input:focus { outline: 2px solid var(--brand); outline-offset: 1px; } .signup-form .btn { flex: none; } .signup-fine { font-size: var(--fs-xs); margin: var(--s3) auto 0 !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- product page ---------- */ .crumbs { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s4); } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--brand-dark); } .pd { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s6); align-items: start; } .pd-visual { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); display: grid; place-items: center; min-height: 230px; } .pd-visual .tile { width: 104px; height: 104px; border-radius: 24px; } .pd-visual .tile svg { width: 52px; height: 52px; } .pd-visual .photo-wrap { width: 100%; background: var(--plate); border: 0; } .pd-visual .photo { width: 100%; height: 200px; object-fit: contain; } .pd h1 { margin-bottom: var(--s3); } .pd .lede { font-size: var(--fs-lg); color: var(--muted); } .pd .why, .pd .tip { max-width: none; } .pd .why { font-size: var(--fs-sm); background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 var(--s3); } .pd .why b { color: var(--brand-dark); } .pd .tip { font-size: var(--fs-sm); color: var(--muted); border-left: 2px solid var(--brand); padding: 1px 0 1px 12px; margin: 0 0 var(--s4); } .pd .tip b { color: var(--brand-dark); } .pd .badge { display: inline-block; font-family: var(--font-head); font-size: var(--fs-2xs); font-weight: 700; color: var(--accent-text); background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 3px 10px; border-radius: 999px; margin-bottom: var(--s3); } .pd .buy-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--s2); } .pd .buy-box .btn-buy { font-size: var(--fs-base); padding: 14px 20px; } .pd .buy-box .aff-note { font-size: var(--fs-2xs); color: var(--muted); text-align: center; margin: 0; } .pd dl { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--s4); margin: var(--s4) 0 0; font-size: var(--fs-sm); } .pd dt { color: var(--muted); } .pd dd { margin: 0; } .related { margin-top: var(--s7); } @media (max-width: 760px) { .pd { grid-template-columns: 1fr; gap: var(--s5); } .pd-visual { min-height: 170px; padding: var(--s5); } } /* ---------- footer ---------- */ .site-footer { background: var(--footer-bg); color: var(--footer-ink); margin-top: var(--s8); } .site-footer .wrap { padding-top: var(--s7); padding-bottom: var(--s6); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s6); } .site-footer h4, .site-footer .foot-h { color: var(--footer-strong); margin: 0 0 12px; font-size: var(--fs-sm); letter-spacing: 0; } .site-footer a { color: var(--footer-ink); text-decoration: none; } .site-footer a:hover { color: var(--footer-strong); text-decoration: underline; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 8px; font-size: var(--fs-sm); } .footer-brand { display: flex; align-items: center; gap: 10px; color: var(--footer-strong); font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; } .footer-brand .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; } .footer-brand .mark svg { width: 17px; height: 17px; color: #fff; } .site-footer .fine { font-size: var(--fs-xs); line-height: 1.65; color: var(--footer-fine); max-width: 40ch; } .footer-bottom { border-top: 1px solid var(--footer-line); margin-top: var(--s5); padding-top: var(--s4); font-size: var(--fs-xs); color: var(--footer-fine); } /* ---------- the plain product index at the foot of the shop ---------- */ .all-index { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); } .all-index h2 { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s3); } .all-index p { margin: 0 0 8px; max-width: none; line-height: 1.7; } .all-index b { color: var(--ink); } .all-index a { color: var(--muted); text-decoration: none; } .all-index a:hover { color: var(--brand-dark); text-decoration: underline; } /* ---------- keyboard users ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; } /* The sticky header would otherwise sit on top of whatever an in-page link jumps to, including the skip link's own target. */ :target, #main { scroll-margin-top: calc(var(--header-h) + 8px); } #main:focus { outline: none; } /* ---------- printing (people print the kit list) ---------- */ @media print { .site-header, .site-footer, .signup, .kit-chips, .kit-actions, .disclosure-bar, .nav-toggle, .have-box, .btn, .toc-chips { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .wrap { max-width: none; padding: 0; } section.block { padding: 0; } .kit-item { border: 0; border-bottom: 1px solid #ccc; border-radius: 0; padding: 8px 0; break-inside: avoid; } .kit-item.have { opacity: 1; } .kit-item.have .info b::after { content: " (already have)"; font-weight: 400; } .card, .panel { box-shadow: none; break-inside: avoid; } a[href^="http"]::after { content: ""; } } /* ---------- responsive ---------- */ @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: var(--s5); } .hero-tiles { max-width: 360px; } .calc-layout { grid-template-columns: 1fr; } .result-panel { position: static; } .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s5); } .footer-grid > div:first-child { grid-column: 1 / -1; } } @media (max-width: 560px) { /* Slightly tighter type and rhythm so a phone screen holds a useful amount of the page instead of three sentences. */ :root { --s7: 36px; --s8: 48px; --fs-base: 1rem; --fs-lg: 1.0625rem; --fs-sm: .9rem; --fs-2xs: .8125rem; } .wrap { padding: 0 var(--s4); } .hero { padding: var(--s7) 0 var(--s6); } /* Decorative only — on a phone it would eat a whole screen. */ .hero-tiles { display: none; } .page-hero p, .hero p.lede { font-size: var(--fs-base); } .disclosure-bar { font-size: var(--fs-xs); } .footer-grid { grid-template-columns: 1fr; } .promo { padding: var(--s5); } .promo .btn { width: 100%; } .signup { padding: var(--s5) var(--s4); } .signup-form .btn { width: 100%; } .toc-chips { gap: 6px; } .kit-chip { font-size: var(--fs-xs); padding: 10px 14px; } }