Spaces:
Running
Running
| :root { | |
| --paper: #f4efe4; | |
| --paper-2: #fbf8f1; | |
| --paper-3: #eee7d8; | |
| --ink: #191712; | |
| --muted: #6d6457; | |
| --faint: #857b6c; | |
| --rule: #d8cfbf; | |
| --red: #a93b2a; | |
| --green: #2e6b4a; | |
| --green-light: #6a9a7e; | |
| --amber: #9a6a22; | |
| --blue: #405f86; | |
| --serif: "Fraunces", Georgia, "Times New Roman", serif; | |
| --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; | |
| --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; | |
| } | |
| * { box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| margin: 0; | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-family: var(--sans); | |
| font-size: 16px; | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| a { color: inherit; text-decoration: none; } | |
| button { font: inherit; } | |
| :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } | |
| .nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| background: rgba(244, 239, 228, 0.92); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--rule); | |
| } | |
| .nav-inner { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| padding: 16px clamp(20px, 4vw, 56px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| } | |
| .brand { | |
| font-family: var(--serif); | |
| font-weight: 600; | |
| font-size: 20px; | |
| letter-spacing: -0.01em; | |
| } | |
| .brand.small { font-size: 15px; } | |
| .dot { color: var(--red); } | |
| .nav nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); } | |
| .nav nav a { font-size: 13.5px; color: var(--muted); } | |
| .nav nav a:hover { color: var(--ink); } | |
| .nav .download { | |
| color: var(--ink); | |
| border-bottom: 1px solid var(--ink); | |
| padding-bottom: 2px; | |
| } | |
| main { display: block; } | |
| .hero, .section, .receipts, footer { | |
| padding-left: clamp(20px, 4vw, 56px); | |
| padding-right: clamp(20px, 4vw, 56px); | |
| } | |
| /* ---------- hero ---------- */ | |
| .hero { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| padding-top: clamp(48px, 7vw, 92px); | |
| padding-bottom: clamp(36px, 5vw, 64px); | |
| display: grid; | |
| grid-template-columns: 1.02fr 0.98fr; | |
| gap: clamp(32px, 5vw, 72px); | |
| align-items: center; | |
| } | |
| .eyebrow, .section-no, .card-tag { | |
| color: var(--red); | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| } | |
| h1 { | |
| font-family: var(--serif); | |
| font-weight: 600; | |
| font-size: clamp(42px, 6.2vw, 78px); | |
| line-height: 1.01; | |
| letter-spacing: -0.025em; | |
| margin: 14px 0 20px; | |
| } | |
| h1 em { | |
| font-style: italic; | |
| font-weight: 600; | |
| color: var(--red); | |
| } | |
| .lede { | |
| max-width: 560px; | |
| color: var(--muted); | |
| font-size: clamp(16px, 1.7vw, 18.5px); | |
| line-height: 1.6; | |
| margin: 0 0 26px; | |
| } | |
| .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } | |
| .btn { | |
| display: inline-block; | |
| background: var(--ink); | |
| color: var(--paper-2); | |
| padding: 12px 20px; | |
| border-radius: 3px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| border: 1px solid var(--ink); | |
| } | |
| .btn:hover { background: #2b2720; } | |
| .text-link { font-size: 14px; color: var(--red); border-bottom: 1px solid rgba(169, 59, 42, 0.35); padding-bottom: 2px; } | |
| .text-link:hover { border-bottom-color: var(--red); } | |
| .fineprint { color: var(--faint); font-size: 12px; margin: 20px 0 0; } | |
| /* ---------- mail card ---------- */ | |
| .mail { | |
| margin: 0; | |
| justify-self: end; | |
| width: min(100%, 520px); | |
| min-height: 420px; | |
| background: var(--paper-2); | |
| border: 1px solid var(--rule); | |
| border-radius: 5px; | |
| box-shadow: 0 18px 50px rgba(25, 23, 18, 0.10); | |
| padding: 20px 24px 16px; | |
| transition: opacity 0.16s ease; | |
| } | |
| .mail.swapping { opacity: 0.35; } | |
| .mail-top { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| color: var(--faint); | |
| font-size: 10px; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| border-bottom: 1px solid var(--rule); | |
| padding-bottom: 10px; | |
| } | |
| .mail-subject { | |
| font-family: var(--serif); | |
| font-size: 19px; | |
| font-weight: 600; | |
| padding: 12px 0; | |
| border-bottom: 1px dashed var(--rule); | |
| } | |
| .mail-row { | |
| display: grid; | |
| grid-template-columns: 68px 1fr; | |
| gap: 14px; | |
| padding: 14px 0 4px; | |
| } | |
| .stamp { | |
| display: inline-block; | |
| align-self: start; | |
| justify-self: start; | |
| font-size: 9.5px; | |
| font-weight: 700; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| padding: 3px 7px; | |
| border: 1px solid currentColor; | |
| border-radius: 2px; | |
| transform: rotate(-2deg); | |
| } | |
| .stamp.red { color: var(--red); } | |
| .stamp.green { color: var(--green); } | |
| .mail-before, .mail-after { margin: 0; font-size: 13.5px; line-height: 1.65; } | |
| .mail-before { color: var(--muted); } | |
| .mail-after { color: var(--ink); font-size: 14px; } | |
| .mail-arrow { color: var(--red); font-size: 18px; line-height: 1; padding: 2px 0 2px 82px; } | |
| .mail figcaption { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| gap: 12px; | |
| border-top: 1px solid var(--rule); | |
| margin-top: 12px; | |
| padding-top: 10px; | |
| color: var(--faint); | |
| font-size: 11.5px; | |
| } | |
| .text-button { | |
| appearance: none; | |
| background: none; | |
| border: 0; | |
| color: var(--red); | |
| cursor: pointer; | |
| padding: 0; | |
| font-size: 11.5px; | |
| font-weight: 600; | |
| } | |
| .text-button:hover { text-decoration: underline; } | |
| /* ---------- receipts ---------- */ | |
| .receipts { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| border-top: 1px solid var(--rule); | |
| border-bottom: 1px solid var(--rule); | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| .receipts > div { | |
| padding: 0 20px; | |
| border-right: 1px solid var(--rule); | |
| } | |
| .receipts > div:first-child { padding-left: 0; } | |
| .receipts > div:last-child { border-right: 0; } | |
| .receipts b { | |
| display: block; | |
| font-family: var(--serif); | |
| font-size: clamp(24px, 3vw, 32px); | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| line-height: 1.1; | |
| } | |
| .receipts span { color: var(--muted); font-size: 12px; } | |
| /* ---------- sections ---------- */ | |
| .section { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| padding-top: clamp(52px, 7vw, 88px); | |
| padding-bottom: 4px; | |
| } | |
| .section-head { max-width: 760px; margin-bottom: 24px; } | |
| h2 { | |
| font-family: var(--serif); | |
| font-weight: 600; | |
| font-size: clamp(31px, 4.2vw, 50px); | |
| line-height: 1.05; | |
| letter-spacing: -0.02em; | |
| margin: 10px 0 14px; | |
| } | |
| .section-head p { color: var(--muted); margin: 0; font-size: 15.5px; } | |
| code { | |
| font-family: var(--mono); | |
| font-size: 0.88em; | |
| background: var(--paper-3); | |
| padding: 1px 5px; | |
| border-radius: 2px; | |
| } | |
| .receipt-line { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 14px 40px; | |
| border-top: 1px solid var(--rule); | |
| border-bottom: 1px solid var(--rule); | |
| padding: 13px 0; | |
| margin-bottom: 18px; | |
| } | |
| .receipt-line > div { display: flex; align-items: baseline; gap: 9px; } | |
| .receipt-line b { font-family: var(--serif); font-size: 22px; font-weight: 600; } | |
| .receipt-line span { color: var(--muted); font-size: 12.5px; } | |
| .panel { | |
| background: var(--paper-2); | |
| border: 1px solid var(--rule); | |
| border-radius: 5px; | |
| padding: clamp(18px, 2.6vw, 28px); | |
| } | |
| .panel-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 18px; | |
| margin-bottom: 6px; | |
| } | |
| .panel h3 { font-family: var(--serif); font-weight: 600; font-size: 22px; margin: 0; letter-spacing: -0.01em; } | |
| .panel-sub { color: var(--faint); font-size: 12.5px; margin: 5px 0 0; max-width: 620px; } | |
| /* tabs */ | |
| .seg { display: flex; gap: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; } | |
| .seg button { | |
| appearance: none; | |
| background: none; | |
| border: 0; | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -1px; | |
| padding: 8px 1px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| cursor: pointer; | |
| } | |
| .seg button:hover { color: var(--ink); } | |
| .seg button.active { color: var(--ink); border-bottom-color: var(--red); font-weight: 600; } | |
| .panel-head .seg { | |
| border: 1px solid var(--rule); | |
| border-radius: 3px; | |
| padding: 3px; | |
| gap: 2px; | |
| margin: 0; | |
| flex: 0 0 auto; | |
| } | |
| .panel-head .seg button { border: 0; border-radius: 2px; margin: 0; padding: 6px 12px; } | |
| .panel-head .seg button.active { background: var(--ink); color: var(--paper-2); } | |
| .seg-wrap { margin-bottom: 6px; } | |
| .chart { width: 100%; height: 480px; } | |
| /* mobile per-item list replaces the chart under 760px */ | |
| .flag-list { display: none; margin-top: 8px; border-top: 1px solid var(--rule); } | |
| .flag-row { | |
| border-bottom: 1px solid var(--rule); | |
| border-left: 3px solid var(--rule); | |
| padding: 10px 10px 10px 12px; | |
| } | |
| .flag-row.crossed { border-left-color: var(--green); } | |
| .flag-row.worse { border-left-color: var(--red); } | |
| .flag-row.still { border-left-color: var(--amber); } | |
| .fr-top { display: flex; justify-content: space-between; gap: 10px; } | |
| .fr-sub { font-size: 12.5px; color: var(--ink); } | |
| .fr-d { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } | |
| .fr-bottom { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 8px; | |
| margin-top: 3px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .fr-bottom b { color: var(--ink); } | |
| .fr-tag { | |
| margin-left: auto; | |
| font-size: 9.5px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--faint); | |
| } | |
| .flag-row.crossed .fr-tag { color: var(--green); } | |
| .flag-row.worse .fr-tag { color: var(--red); } | |
| .flag-row.still .fr-tag { color: var(--amber); } | |
| .stat-line { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| gap: 4px 0; | |
| margin-top: 14px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .stat-line span { white-space: nowrap; } | |
| .stat-line span + span::before { content: "·"; color: var(--faint); margin: 0 10px; } | |
| .stat-line b { color: var(--ink); font-weight: 600; } | |
| .stat-line .good b { color: var(--green); } | |
| .stat-line .warn b { color: var(--amber); } | |
| .stat-line .bad b { color: var(--red); } | |
| .caveat { color: var(--faint); font-size: 12.5px; font-style: italic; margin: 12px 0 0; } | |
| details { margin-top: 16px; border-top: 1px solid var(--rule); padding-top: 12px; } | |
| summary { cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; } | |
| summary:hover { color: var(--ink); } | |
| .table-wrap { overflow-x: auto; margin-top: 10px; } | |
| table { width: 100%; border-collapse: collapse; font-size: 12.5px; } | |
| th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; } | |
| th:first-child, td:first-child { text-align: left; } | |
| th { color: var(--faint); font-weight: 600; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; } | |
| td { color: var(--muted); font-variant-numeric: tabular-nums; } | |
| td b { color: var(--ink); font-weight: 600; } | |
| tr.rec td { background: rgba(46, 107, 74, 0.06); } | |
| tr.rec td:first-child { color: var(--green); font-weight: 600; } | |
| .note { | |
| margin-top: 18px; | |
| border-left: 3px solid var(--ink); | |
| background: var(--paper-2); | |
| padding: 13px 16px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .note.red { border-left-color: var(--red); } | |
| .note b { color: var(--ink); } | |
| /* meters */ | |
| .meters { margin: 12px 0 16px; } | |
| .meter-row { | |
| display: grid; | |
| grid-template-columns: 172px 1fr 74px; | |
| gap: 16px; | |
| align-items: center; | |
| padding: 9px 8px; | |
| border-bottom: 1px solid var(--rule); | |
| } | |
| .meter-row.rec { background: rgba(46, 107, 74, 0.055); } | |
| .meter-label { font-size: 12.5px; color: var(--ink); } | |
| .meter-row.rec .meter-label::after { content: " ★"; color: var(--green); } | |
| .meter-track { height: 6px; background: var(--paper-3); border-radius: 1px; overflow: hidden; } | |
| .meter-fill { height: 100%; background: var(--ink); transition: width 0.4s ease; } | |
| .meter-fill.green { background: var(--green); } | |
| .meter-fill.greenlight { background: var(--green-light); } | |
| .meter-fill.blue { background: var(--blue); } | |
| .meter-fill.amber { background: var(--amber); } | |
| .meter-val { text-align: right; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; } | |
| .compare-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; } | |
| .compare-note a { color: var(--red); border-bottom: 1px solid rgba(169, 59, 42, 0.35); } | |
| .tradeoff-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 16px; | |
| margin-top: 18px; | |
| } | |
| .card { | |
| background: var(--paper-2); | |
| border: 1px solid var(--rule); | |
| border-top: 3px solid var(--red); | |
| border-radius: 3px; | |
| padding: 18px; | |
| } | |
| .card:nth-child(2) { border-top-color: var(--green); } | |
| .card:nth-child(3) { border-top-color: var(--amber); } | |
| .card h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 6px 0 8px; } | |
| .card p { margin: 0; color: var(--muted); font-size: 13.5px; } | |
| .card b { color: var(--ink); } | |
| /* use */ | |
| .use-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; } | |
| .code-panel { display: flex; flex-direction: column; background: #201d18; border-color: #201d18; } | |
| .code-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| color: #b8ad9b; | |
| font-size: 11.5px; | |
| margin-bottom: 10px; | |
| } | |
| .copy { | |
| appearance: none; | |
| background: transparent; | |
| border: 1px solid #4a4337; | |
| color: #d8cdbb; | |
| border-radius: 2px; | |
| padding: 4px 9px; | |
| font-size: 11.5px; | |
| cursor: pointer; | |
| } | |
| .copy:hover { border-color: #8a7d68; color: #fff; } | |
| pre { | |
| margin: 0; | |
| background: #171410; | |
| border: 1px solid #3a342b; | |
| border-radius: 3px; | |
| padding: 15px; | |
| overflow-x: auto; | |
| flex: 1; | |
| } | |
| pre code { font-family: var(--mono); font-size: 12px; color: #e8dfcf; background: none; padding: 0; } | |
| .code-foot { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin-top: 12px; | |
| color: #b8ad9b; | |
| font-size: 11.5px; | |
| } | |
| .code-foot a { color: #a8d5b8; } | |
| .samples { display: grid; gap: 12px; } | |
| .sample { | |
| background: var(--paper-2); | |
| border: 1px solid var(--rule); | |
| border-radius: 4px; | |
| padding: 14px 16px; | |
| } | |
| .sample .sample-top { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 10px; | |
| color: var(--faint); | |
| font-size: 10px; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| margin-bottom: 7px; | |
| } | |
| .sample .s-before, .sample .s-after { margin: 0; font-size: 12.5px; line-height: 1.6; } | |
| .sample .s-before { color: var(--muted); } | |
| .sample .s-after { color: var(--ink); margin-top: 9px; } | |
| .sample .s-lab { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); } | |
| .sample .s-lab.green { color: var(--green); } | |
| footer { | |
| max-width: 1120px; | |
| margin: 64px auto 0; | |
| padding-top: 22px; | |
| padding-bottom: 40px; | |
| border-top: 1px solid var(--rule); | |
| display: flex; | |
| align-items: baseline; | |
| gap: 12px; | |
| color: var(--faint); | |
| font-size: 11.5px; | |
| } | |
| .foot-note { color: var(--muted); } | |
| .foot-links { margin-left: auto; display: flex; gap: 18px; } | |
| .foot-links a:hover { color: var(--ink); } | |
| @media (max-width: 940px) { | |
| .hero { grid-template-columns: 1fr; } | |
| .mail { justify-self: start; width: min(100%, 560px); } | |
| .receipts { grid-template-columns: 1fr 1fr; } | |
| .receipts > div { padding: 10px 16px; border-right: 0; } | |
| .receipts > div:first-child { padding-left: 16px; } | |
| .compare-note { margin: 14px 0 0; color: var(--muted); font-size: 13px; } | |
| .compare-note a { color: var(--red); border-bottom: 1px solid rgba(169, 59, 42, 0.35); } | |
| .tradeoff-grid { grid-template-columns: 1fr; } | |
| .use-grid { grid-template-columns: 1fr; } | |
| .nav nav a:not(.download) { display: none; } | |
| } | |
| @media (max-width: 760px) { | |
| .chart { display: none; } | |
| .flag-list { display: block; } | |
| } | |
| @media (max-width: 560px) { | |
| .receipts { grid-template-columns: 1fr 1fr; } | |
| .receipts b { font-size: 22px; } | |
| .panel-head { flex-direction: column; } | |
| .chart { height: 420px; } | |
| .meter-row { grid-template-columns: 116px 1fr 58px; gap: 10px; } | |
| .meter-label { font-size: 11.5px; } | |
| .mail { padding: 16px; } | |
| .mail-row { grid-template-columns: 1fr; gap: 6px; } | |
| .mail-arrow { padding-left: 0; } | |
| footer { flex-wrap: wrap; } | |
| .foot-links { margin-left: 0; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { scroll-behavior: auto; } | |
| .meter-fill { transition: none; } | |
| } | |