/* Fanfold — getfanfold.com Direction A ("The Fold"), chosen 2026-08-23 (#227). Palette and radii are the popup's, so the site and the product look like one thing: ink #111827 and paper #f9fafb are lifted from src/popup/panel.html, where the band's contrast was measured at 16.9:1. */ :root { --ink: #111827; --paper: #f7f5f1; --card: #fdfcfa; --rule: #ddd8cf; --body: #4b5563; --quiet: #6b7280; --faint: #8b8579; --accent: #a33512; --accent-soft: #fdf0e9; --on-ink: #f9fafb; --good: #146c2e; --measure: 34em; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .serif { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400; } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--accent); text-decoration: none; } a:hover { color: #7a2708; text-decoration: underline; } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); } .prose { max-width: var(--measure); } /* ---- the band, and the nav inside it ---- */ .band { background: var(--ink); color: var(--on-ink); } .band a { color: rgba(249, 250, 251, 0.72); } .band a:hover { color: var(--on-ink); text-decoration: none; } .nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px 0 9px; } .brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 17px; color: var(--on-ink); } .brand:hover { text-decoration: none; } .nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); font-size: 15px; flex-wrap: wrap; } /* ---- actions ---- The primary action is distinguished by ground, weight AND placement, never by color alone — the same R12 rule the popup follows. */ .btn { display: inline-block; padding: 15px 30px; border-radius: 8px; background: var(--on-ink); color: var(--ink); font-weight: 700; font-size: 16px; border: 1px solid transparent; } .btn:hover { text-decoration: none; background: #fff; } .band .btn { color: var(--ink); } .btn-onpaper { background: var(--ink); color: var(--on-ink); } .btn-onpaper:hover { background: #000; color: var(--on-ink); } .btn[aria-disabled="true"] { opacity: 0.55; cursor: default; pointer-events: none; } .btn-note { font-size: 14px; color: var(--quiet); } .band .btn-note { color: rgba(249, 250, 251, 0.55); } /* ---- hero ---- */ /* padding-BLOCK, not the shorthand. `.hero` is on the same element as `.wrap`, and it comes later in this file, so `padding: … 0 …` silently zeroed the wrap's horizontal padding. On desktop the max-width hid it — the auto margins still left a gutter. At 390px there is no margin, so every line ran off the right edge. Caught by rendering it, not by reading it. */ .hero { padding-block: clamp(28px, 4vw, 44px) clamp(30px, 4vw, 44px); } .hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 48px); align-items: center; } .hero h1 { font-size: clamp(42px, 6.4vw, 78px); margin-bottom: 18px; } .hero h1 em { color: #ff9b7a; font-style: italic; } .hero p { font-size: clamp(17px, 2vw, 20px); color: rgba(249, 250, 251, 0.78); max-width: var(--measure); } /* STATEMENTS, NOT A PARAGRAPH (owner, 2026-08-27). Wider than the reading measure because it is a list of claims read in glances, not prose read in lines. */ .hero-claims { max-width: 40em; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.45; margin-bottom: 26px; } .hero-mark { display: flex; justify-content: center; } .hero-mark svg { width: 100%; max-width: 320px; height: auto; } .actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 26px 0 0; } /* The install caution note, under the hero button. Needs `.hero` in the selector to beat `.hero p` above, which would otherwise give it the 20px lede size and outshout the claims it sits beneath. Its link keeps the band's underline so it reads as one. */ .hero .install-note { font-size: 14px; color: rgba(249, 250, 251, 0.55); max-width: 40em; margin: 14px 0 0; } .hero .install-note a { text-decoration: underline; } /* ---- generic sections ---- */ section { padding: clamp(52px, 7vw, 84px) 0; } /* Spacing corrections on the home page, owner-reviewed 2026-08-24. Each is a named class rather than an inline style so the next person can see them together and tell they were deliberate. `.band` needs no extra specificity — a class already beats the bare `section` above. */ .band { padding: clamp(38px, 5vw, 58px) 0; } /* the black "what searchable means" strip */ /* The HEADER band carries no padding of its own: the nav sets its own, and the hero sets the rest. Without this it inherited the strip's 58px above the logo and again below the buttons, which is where most of the page's dead space above the fold was (owner, 2026-08-27). */ .top-band { padding: 0; } /* The picture sits directly under the hero and directly above the two lists, so it carries very little padding of its own — the band edges do the separating (owner, 2026-08-27). */ .section-tight-bottom { padding-top: clamp(26px, 3vw, 38px); padding-bottom: clamp(14px, 1.8vw, 22px); } .section-tight-after { padding-bottom: clamp(22px, 3vw, 34px); } /* runs into the closing card */ .eyebrow { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 10px; } .band .eyebrow { color: #ff9b7a; } h2.section { font-size: clamp(30px, 4.2vw, 44px); margin-bottom: 14px; } /* NO READING MEASURE HERE (owner, 2026-08-27). 44em wrapped a one-sentence lede in the middle of an otherwise empty line, which reads as a mistake rather than as typography. A section lede is one or two lines of context, not a page of prose — `.prose` still holds 34em where that applies. */ .lede { font-size: 17px; color: var(--body); margin-bottom: 36px; } .cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 40px); } /* The three headings are not the same number of lines, so without this the body text in each column starts at a different height. Subgrid gives all three columns the SAME rows — icon, heading, body — so the text tops line up. Where subgrid is unsupported the columns simply stack as before. */ @supports (grid-template-rows: subgrid) { .cols-3 { grid-template-rows: auto auto auto; } .cols-3 > .col { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; } } .cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 3vw, 36px) clamp(32px, 4vw, 56px); } .col h3 { font-size: 21px; margin: 14px 0 10px; } .col p { font-size: 15px; color: var(--body); } .aside { font-size: 14px; color: var(--quiet); border-left: 2px solid var(--rule); padding-left: 14px; margin: 0; } .rule-top { border-top: 2px solid var(--ink); padding-top: 18px; } .rule-top h3 { font-size: 19px; margin: 0 0 8px; } .rule-top p { font-size: 15px; color: var(--body); margin-bottom: 0; } .measured { font-size: 13px; color: var(--faint); font-style: italic; margin: 10px 0 0; } /* ---- the evidence band ---- */ .evidence { background: #ece8e0; } /* Six equal cards, 3x2. Deliberately NOT `.cols-3`: that class carries a subgrid rule with three explicit rows for the three-up band above, which would leave an empty trailing row here. */ .cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 26px); } /* The cards sat on a ground close to their own and ran together vertically. A hairline and a shadow separate them without adding a second colour (owner, 2026-08-27). */ .case { background: var(--card); border-radius: 12px; padding: 24px 26px; display: flex; flex-direction: column; border: 1px solid #e2ddd3; box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 8px 20px -14px rgba(17, 24, 39, .3); } /* Figures sit on the card baseline, not wherever the prose above them happens to end. */ .case .figure { margin-top: auto; padding-top: 18px; } .case h3 { font-size: 19px; margin: 0 0 10px; } .case p { font-size: 15px; color: var(--body); } .case p:last-child { margin-bottom: 0; } .figure { font-family: "Instrument Serif", Georgia, serif; font-size: 34px; color: var(--accent); margin: 0; } .figure span { font-size: 16px; color: var(--quiet); font-family: inherit; } .figure.good { color: var(--good); } .span-2 { grid-column: span 2; } /* ---- generated screenshots (npm run site:shots, #257) ---- */ .shot-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; } .shot-figure img { display: block; width: 100%; height: auto; max-width: 100%; border: 1px solid var(--rule); border-radius: 12px; background: var(--card); } .shot-figure figcaption { font-size: 14px; color: var(--quiet); } /* ---- limits ---- */ /* ---- the two capability lists ---- The most important content on the page, so it gets the page's strongest ground rather than the same paper as everything around it. Rhythm down the page: ink, paper, ink, sand. */ .lists-band { background: var(--ink); color: var(--on-ink); padding: clamp(40px, 5vw, 62px) 0 clamp(44px, 5.5vw, 68px); } .lists { align-items: start; gap: clamp(32px, 5vw, 72px); } .list-head { font-size: clamp(29px, 3.4vw, 40px); margin: 0 0 22px; line-height: 1.12; color: var(--on-ink); text-wrap: balance; } .ticks { list-style: none; margin: 0; padding: 0; } .ticks li { position: relative; padding: 13px 0 13px 32px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.45; color: rgba(249, 250, 251, .88); border-bottom: 1px solid rgba(249, 250, 251, .12); } .ticks li:last-child { border-bottom: 0; padding-bottom: 0; } .ticks li::before { content: "\2713"; position: absolute; left: 0; top: 13px; color: #ff9b7a; font-size: 16px; font-weight: 700; } .limits { border-top: 1px solid var(--rule); } .limit { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); } .limit-n { color: var(--accent); font-weight: 700; font-size: 15px; flex: none; width: 20px; } .limit p { margin: 0; font-size: 16px; color: #374151; } /* ---- closing card ---- */ .close-card { background: var(--ink); color: var(--on-ink); border-radius: 14px; padding: clamp(32px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .close-card h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 10px; } .close-card p { color: rgba(249, 250, 251, 0.7); margin: 0; font-size: 16px; } /* ---- support ---- */ .mail-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 44px; } .steps { display: flex; flex-direction: column; gap: 26px; } /* `min-width: 0` on the text side is load-bearing, not tidiness. A flex item defaults to `min-width: auto`, so it refuses to shrink below its widest child — and `.sample` is `white-space: pre`, whose intrinsic width is the longest line. Measured at a 390px viewport: the page's scrollWidth was 411 and this column ran from x=68 to x=411. `overflow-x: auto` on the block alone cannot fix it; the parent has to be allowed to shrink first. */ .step { display: flex; gap: 20px; } .step > div { min-width: 0; } .step-n { font-family: "Instrument Serif", Georgia, serif; font-size: 30px; color: var(--accent); line-height: 1; flex: none; width: 28px; } .step h3 { font-size: 18px; margin: 0 0 6px; } .step p { font-size: 15px; color: var(--body); } .sample { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.7; color: #57534e; overflow-x: auto; white-space: pre; max-width: 100%; } .callout { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 18px 22px; margin: 0 0 34px; } .callout p:last-child { margin-bottom: 0; } .callout p:first-child { font-weight: 700; } .side { display: flex; flex-direction: column; gap: 30px; } .panel { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 24px 26px; } .panel h3, .side-block h3 { font-size: 18px; margin: 0 0 10px; } .panel p:last-child, .side-block p:last-child { margin-bottom: 0; } .panel p, .side-block p { font-size: 15px; color: var(--body); } .side-block { border-top: 1px solid var(--rule); padding-top: 22px; } .known { display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: #374151; } .two-up { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 56px); } /* ---- long-form legal pages ---- */ /* A document, not a marketing column. `.prose` (34em) is a reading measure for a page of continuous argument; a policy is scanned for the clause you need, and 34em made it a ribbon. 48em keeps it comfortable without running the full 1120px. */ .legal { padding: clamp(44px, 6vw, 72px) 0 clamp(56px, 8vw, 88px); } .legal .prose { max-width: 48em; } .legal h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 12px; } .legal .version { color: var(--quiet); font-size: 15px; margin-bottom: 40px; } .legal h2 { font-size: clamp(22px, 3vw, 28px); margin: 44px 0 14px; } .legal h3 { font-size: 19px; margin: 30px 0 10px; } .legal p, .legal li { color: #33383f; font-size: 16.5px; } .legal ul { padding-left: 20px; } .legal li { margin-bottom: 8px; } .legal hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; } .legal .summary { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 22px 26px; } .legal .summary p:last-child { margin-bottom: 0; } .legal .summary .doc-h2-first { margin-top: 0; } /* ---- footer ---- */ footer { border-top: 1px solid var(--rule); padding: 28px 0 48px; } .foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 15px; color: var(--quiet); } .foot-links { display: flex; gap: clamp(14px, 3vw, 26px); flex-wrap: wrap; } .foot a { color: var(--quiet); } /* ---- what used to be inline styles (#270) ---- Every one of these was a `style="..."` attribute, and every one of them was DEAD on the live site: `_headers` sets `style-src 'self' https://fonts.googleapis.com`, and CSP Level 2 applies that to the style ATTRIBUTE as well as to