/* delist.ai — content blocks. Furniture for pages that are structures rather than prose: cluster hubs, audience and situation pages, comparisons, utility pages. Prose stays in content-prose.css; the two files never style the same thing. These blocks run on --leading (28px), the marketing rhythm, because they are marketing furniture. A page may contain both — a use-case page is a stack of blocks with a prose section in the middle — and the two rhythms simply sit next to each other rather than trying to align. */ /* — page head — Every non-article content page opens the same way: eyebrow, one serif line, one paragraph, one action. No hero image, no full-bleed band. The h1 is the only display type on the page. */ .pagehead { padding: calc(0.5 * var(--leading)) 0 calc(1.5 * var(--leading)); } .pagehead .eyebrow { display: block; font-size: 12px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-700); margin: 0 0 var(--half); } .pagehead h1 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(34px, 4.8vw, 58px); line-height: 1.1; margin: 0; max-width: 20ch; text-wrap: balance; } .pagehead .lead { font-size: 19px; line-height: calc(1.15 * var(--leading)); color: color-mix(in srgb, var(--color-text) 80%, transparent); max-width: 62ch; margin: var(--leading) 0 0; } .pagehead .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14.5px; line-height: 22px; margin: var(--half) 0 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .pagehead .meta .dot { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.5; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: calc(1.25 * var(--leading)); } .cta-row .btn { text-decoration: none; padding: 13px 26px; font-size: 15px; } .cta-row .fineprint { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } /* — stat strip — the page's numbers, stated once, never repeated below — */ .statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--leading) clamp(20px, 3vw, 44px); padding: calc(1.25 * var(--leading)) 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); } .statstrip div { display: grid; gap: 4px; align-content: start; } .statstrip .val { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 30px; line-height: 1.15; color: var(--color-accent-2-800); font-variant-numeric: tabular-nums; } .statstrip .lbl { font-size: 13.5px; line-height: 20px; color: color-mix(in srgb, var(--color-text) 72%, transparent); text-wrap: pretty; } /* — section heads inside a structured page — */ .band { padding: calc(2 * var(--leading)) 0 0; } .band > .kicker { display: block; font-size: 12px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--color-accent-700); margin: 0 0 var(--half); } .band > h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 3vw, 38px); line-height: 1.22; margin: 0; max-width: 24ch; text-wrap: balance; } .band > .sub { font-size: 17px; line-height: var(--leading); max-width: 60ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: var(--half) 0 0; } /* — path cards: the "start with these three" reading order — */ .pathcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--half); margin-top: calc(1.25 * var(--leading)); } .pathcard { display: grid; align-content: start; gap: 10px; box-sizing: border-box; background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: 24px; padding: calc(0.9 * var(--leading)) var(--leading); text-decoration: none; color: var(--color-text); transition: border-color 0.2s ease, background 0.2s ease; } .pathcard:hover { border-color: var(--color-accent-300); background: var(--color-accent-100); } .pathcard .n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--color-accent-2-200); color: var(--color-accent-2-800); font-variant-numeric: tabular-nums; } .pathcard h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 21px; line-height: 28px; margin: 0; } .pathcard p { font-size: 15.5px; line-height: 24px; margin: 0; color: color-mix(in srgb, var(--color-text) 76%, transparent); } /* Round 10 §2 — .go may hold an icon, and is no longer scoped to .pathcard. `:where(img, svg, video) { display: block }` in content-base.css met a `.go` that set font-size, weight and colour and no display, so any inside it became a block and dropped to its own line. The prototype only ever put a text arrow in here, so the sheet could break silently in a way the prototype could never show — the round-9 §1 shape again. inline-flex is a no-op for a text arrow and correct for an icon, same as `.tool-local svg` and `.hubsearch-field svg`. Unscoping it is the round-9 §2 rule applied to its own author: a component that only works inside one ancestor is a component decided by its ancestor. */ .go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--color-accent-700); } .go svg { flex: none; } /* — topic block — A cluster hub is a stack of these. The link list is the page's real payload — it is the site's internal-linking structure and it must all be in the initial HTML. Large categories (the 105 broker guides) get columns, never a "show more": every link hidden behind a click is a link the crawler and the visitor both lose. */ .topic { padding-top: calc(1.5 * var(--leading)); margin-top: calc(1.5 * var(--leading)); border-top: 1px solid var(--color-divider); } .topic-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; } .topic h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 25px; line-height: 32px; margin: 0; } .topic .count { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 72%, transparent); white-space: nowrap; } .topic .sub { font-size: 16px; line-height: var(--leading); max-width: 62ch; margin: 10px 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); } .linkgrid { list-style: none; margin: var(--leading) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px clamp(20px, 3vw, 40px); } .linkgrid li { margin: 0; padding: 0; } .linkgrid a { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 16px; line-height: 25px; color: var(--color-text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .linkgrid a:hover { color: var(--color-accent-700); } .linkgrid .flag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap; align-self: center; background: var(--color-accent-2-200); color: var(--color-accent-2-800); } .linkgrid.dense { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .linkgrid.dense a { font-size: 15px; padding: 6px 0; } /* — numbered steps: how something works, in order — */ .steps { display: grid; gap: var(--leading); margin-top: calc(1.25 * var(--leading)); } .step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px var(--leading); align-items: start; } .step .n { font-family: var(--font-heading); font-weight: var(--font-heading-weight); /* accent-2-800 (8.1:1), matching .pathcard .n and §13's "Accent numerals" row. Was accent-2-400 at 2.31:1 — a numeral treated as decoration, which is exactly what §13 forecloses. */ font-size: 38px; line-height: 1; color: var(--color-accent-2-800); font-variant-numeric: tabular-nums; grid-row: span 2; } .step h3 { font-family: var(--font-body); font-weight: 600; font-size: 19px; line-height: 27px; margin: 0; } .step p { font-size: 16.5px; line-height: var(--leading); margin: 6px 0 0; max-width: 60ch; color: color-mix(in srgb, var(--color-text) 80%, transparent); } /* — reason cards: three arguments, side by side — */ .reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--half); margin-top: calc(1.25 * var(--leading)); } .reason { background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: 24px; padding: calc(0.9 * var(--leading)) var(--leading); } .reason h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 21px; line-height: 28px; margin: 0 0 10px; } .reason p { font-size: 16px; line-height: 26px; margin: 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); } /* — closing band — the page's last action, on the sage ground — */ .closer { background: var(--color-accent-2-100); border-radius: 32px; padding: calc(2 * var(--leading)) clamp(24px, 5vw, 64px); margin-top: calc(2.5 * var(--leading)); } .closer h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; margin: 0; max-width: 22ch; text-wrap: balance; } .closer p { font-size: 17px; line-height: var(--leading); max-width: 58ch; color: color-mix(in srgb, var(--color-text) 80%, transparent); margin: var(--half) 0 0; } /* — cross-links between use cases — */ .usecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--half); margin-top: calc(1.25 * var(--leading)); } .usecard { display: grid; align-content: start; gap: 8px; box-sizing: border-box; background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: 24px; padding: calc(0.8 * var(--leading)) var(--leading); text-decoration: none; color: var(--color-text); transition: border-color 0.2s ease, background 0.2s ease; } .usecard:hover { border-color: var(--color-accent-300); background: var(--color-accent-100); } .usecard .tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .usecard h3 { font-family: var(--font-body); font-weight: 600; font-size: 17.5px; line-height: 26px; margin: 0; } .usecard p { font-size: 15px; line-height: 24px; margin: 0; color: color-mix(in srgb, var(--color-text) 76%, transparent); } /* — the comparison table on a structured page — Same table styling as prose, but the first column is a row header and the product column is marked. Never colour a whole column as a "winner" band; the mark is a single tinted header cell. */ .cmp { margin-top: calc(1.25 * var(--leading)); overflow-x: auto; border: 1px solid var(--color-divider); border-radius: 18px; background: var(--color-neutral-100); } .cmp table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; } .cmp th, .cmp td { padding: 13px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-divider); } .cmp thead th { font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; color: color-mix(in srgb, var(--color-text) 72%, transparent); background: var(--color-neutral-200); white-space: nowrap; } .cmp thead th.us { background: var(--color-accent-2-200); color: var(--color-accent-2-800); } .cmp tbody th { font-weight: 600; white-space: nowrap; } .cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; } @media (max-width: 900px) { .pagehead h1 { max-width: none; } /* column identities carry meaning — they are not captions */ .cmp thead th { font-size: 13px; } /* the 44px floor is unconditional — see the end of this file */ .cite { padding: 10px 9px; } .band { padding-top: calc(1.5 * var(--leading)); } .closer { border-radius: 24px; padding: calc(1.5 * var(--leading)) clamp(20px, 5vw, 32px); } .pathcard, .reason, .usecard { border-radius: 20px; } .step { grid-template-columns: 40px minmax(0, 1fr); gap: 4px var(--half); } .step .n { font-size: 30px; } .cta-row .btn { width: 100%; box-sizing: border-box; text-align: center; } } /* ───────────────────────────────────────────────────────────────────── Round 2 — guide, comparison and utility furniture ───────────────────────────────────────────────────────────────────── */ /* — spec sheet — The broker guides open with facts, not prose: opt-out URL, difficulty, verification, time to removal, whether data returns. A definition list, not a table: it is one column of pairs, it wraps to a single column on a phone without a horizontal scroll, and screen readers announce the pairing. */ .specs { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 0; margin: 0 0 calc(1.25 * var(--leading)); border: 1px solid var(--color-divider); border-radius: 24px; overflow: hidden; background: var(--color-neutral-100); } .specs dt, .specs dd { margin: 0; padding: 13px clamp(18px, 2.5vw, 26px); border-bottom: 1px solid var(--color-divider); font-size: 15.5px; line-height: 24px; } .specs dt { font-weight: 600; color: color-mix(in srgb, var(--color-text) 72%, transparent); background: color-mix(in srgb, var(--color-neutral-200) 60%, transparent); } .specs dd { word-break: break-word; } .specs > :nth-last-child(-n+2) { border-bottom: 0; } .specs .lvl { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .specs .lvl-easy { background: var(--color-accent-2-200); color: var(--color-accent-2-800); } .specs .lvl-med { background: #f2e6d5; color: #7d5320; } .specs .lvl-hard { background: #f4dfd6; color: #8a4a1c; } /* — verification stamp — these guides go stale; the date is a feature — */ .stamp { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; line-height: 21px; margin: 0 0 calc(1.25 * var(--leading)); color: color-mix(in srgb, var(--color-text) 72%, transparent); } .stamp .src { color: inherit; } /* — comparison marks — Never a bare glyph: every mark carries a word, because a column of ticks with no labels is unreadable to a screen reader and ambiguous to everyone else. */ /* .mk must WRAP by default. It carries a sentence as often as a word — a plan card's "Scans brokers, AI services and public records" is a .mk — and nowrap there pushed the card's grid track wider than the card at every width. Only the comparison tables, where the cell content is one or two words, pin it. */ .mk { display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; } .mk::before { flex: none; } .cmp td .mk, .cmp th .mk { white-space: nowrap; } .mk::before { font-size: 13px; font-weight: 700; } .mk-yes { color: var(--color-accent-2-800); } .mk-yes::before { content: "\2713"; } .mk-no::before { content: "\2715"; } .mk-no { color: color-mix(in srgb, var(--color-text) 72%, transparent); } .mk-part::before { content: "\223C"; } .mk-part { color: color-mix(in srgb, var(--color-text) 72%, transparent); } /* — versus block — Two claims side by side, ours and theirs, then one plain-language result line. Rendered open, never behind a disclosure: on the live page these are the substance of the comparison and they are already in the initial HTML. */ .versus { padding-top: calc(1.5 * var(--leading)); margin-top: calc(1.5 * var(--leading)); border-top: 1px solid var(--color-divider); } .versus-head { display: flex; align-items: baseline; gap: 14px; } .versus-head .n { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; color: var(--color-accent-2-800); font-variant-numeric: tabular-nums; } .versus-head h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 25px; line-height: 32px; margin: 0; } .versus-head .tail { font-size: 15px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .vs-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--half); margin-top: var(--leading); } .vs-col { border-radius: 24px; padding: calc(0.9 * var(--leading)) var(--leading); background: var(--color-neutral-100); border: 1px solid var(--color-divider); } .vs-col.ours { background: var(--color-accent-2-100); border-color: var(--color-accent-2-200); } .vs-col h4 { font-family: var(--font-body); font-weight: 700; font-size: 12px; line-height: 18px; letter-spacing: 0.07em; text-transform: uppercase; margin: 0 0 12px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .vs-col.ours h4 { color: var(--color-accent-2-800); } .vs-col p { font-size: 16px; line-height: 26px; margin: 0 0 14px; color: color-mix(in srgb, var(--color-text) 82%, transparent); } .vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .vs-col li { font-size: 15.5px; line-height: 24px; } .vs-result { font-size: 16.5px; line-height: 26px; margin: var(--leading) 0 0; max-width: 62ch; } .vs-result strong { font-weight: 600; } /* — sourced claim — Asked for by engineering, and the backing store already exists: the CMS has an unused `comparison` kind with a `data` JSONB column. What it replaces: [1], used 18 times on one /compare page and on all nine. A title attribute is invisible on touch, absent from the accessibility tree in any useful way, and carries no date — so a claim about a competitor's pricing has no way of being shown as stale. The component is three things: a real anchor at the claim, a numbered entry in a sources list, and a verification date on that entry. Every part is text. */ /* .cite is an inline superscript and must stay in inline context. It belongs NEXT TO a .mk, never inside one: .mk is inline-flex, which blockifies every inline child into a flex item, so .cite computed to display:block with line-height:0 — a zero-height box that still painted its glyph but returned null from hit-testing. Two of five citations were unclickable, which made the component worse than the it replaces. .mk pairs a glyph with its word; a citation is not part of that pair. */ /* padding on an inline element grows the hit area without touching the line box, so the target can be bigger than the 10×14 glyph without moving any text */ .cite { font-size: 0.72em; font-weight: 700; vertical-align: super; line-height: 0; margin-left: 1px; padding: 6px 7px; text-decoration: none; color: var(--color-accent-700); font-variant-numeric: tabular-nums; } /* belt and braces, so the same mistake elsewhere degrades rather than breaks */ .mk > .cite { align-self: baseline; line-height: 1; margin-left: -5px; } .cite:hover { text-decoration: underline; } .sources { margin-top: calc(2 * var(--leading)); padding-top: calc(1.25 * var(--leading)); border-top: 1px solid var(--color-divider); } .sources h2 { font-family: var(--font-body); font-weight: 700; font-size: 12px; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--half); color: color-mix(in srgb, var(--color-text) 72%, transparent); } .sources ol { list-style: none; margin: 0; padding: 0; counter-reset: src; display: grid; gap: 10px; } .sources li { counter-increment: src; position: relative; padding-left: 28px; font-size: 15px; line-height: 24px; color: color-mix(in srgb, var(--color-text) 82%, transparent); } .sources li::before { content: counter(src); position: absolute; left: 0; top: 0; width: 18px; text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .sources li:target { background: var(--color-accent-100); border-radius: 10px; box-shadow: 0 0 0 8px var(--color-accent-100); } .sources .when { color: color-mix(in srgb, var(--color-text) 72%, transparent); } /* a claim older than the review window shows it, rather than looking current */ .sources .stale { color: #8a4a1c; font-weight: 600; } .sources .back { text-decoration: none; margin-left: 4px; } /* — plans — Three cards, one marked. The mark is a label and a border, never a scale transform: a card that is physically larger than its neighbours makes the others look like errors. */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--half); margin-top: calc(1.25 * var(--leading)); align-items: start; } .plan { box-sizing: border-box; background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: 28px; padding: calc(1.1 * var(--leading)) var(--leading); display: grid; gap: 12px; align-content: start; } .plan.featured { border-color: var(--color-accent-2-400); background: var(--color-accent-2-100); } .plan .flag { justify-self: start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--color-accent-2-600); color: #fff; } .plan h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: 30px; margin: 0; } .plan .blurb { font-size: 15.5px; line-height: 24px; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); } .plan .price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; } .plan .amt { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 38px; line-height: 1.1; font-variant-numeric: tabular-nums; } /* "per month" spelled out, not "/mo": the unit is doing real work on a card whose headline number is not what the visitor is charged */ .plan .per { font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .plan ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; } .plan li { font-size: 15.5px; line-height: 24px; } .plan > * { min-width: 0; } .plan .btn { margin-top: 6px; text-decoration: none; text-align: center; } /* the annual saving, stated on the card rather than in a footnote */ .plan .billed { font-size: 14px; line-height: 21px; margin: 2px 0 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); } /* NO struck-through comparison price. The card carried "Billed $87.48 a year · $119.88 monthly" with the second figure struck: $119.88 is a YEAR of monthly billing, but sat next to the word "monthly", so it read as a $119.88 monthly price. The saving chip makes the same point in one unambiguous phrase. */ .plan .saving { justify-self: start; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-top: 2px; background: var(--color-accent-2-200); color: var(--color-accent-2-800); } .plan .each { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .plan .note { font-size: 13px; line-height: 20px; margin: 0; text-align: center; color: color-mix(in srgb, var(--color-text) 72%, transparent); } /* — the free tier as a strip, not a card — A free card sitting in the plan row is the cheapest-looking choice in the strongest position, and it wins by default. The free scan is still offered on this page — twice — but as a line, not as a competitor to the plans. */ .freebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--half) var(--leading); margin-top: var(--half); padding: calc(0.8 * var(--leading)) clamp(20px, 3vw, 32px); background: var(--color-neutral-200); border-radius: 24px; } .freebar p { margin: 0; font-size: 16px; line-height: 25px; max-width: 56ch; } .freebar strong { font-weight: 600; } .freebar a { white-space: nowrap; } /* — referral banner — Only ever visible when a code is applied. Sage rather than accent, because it is a confirmation of something that already happened, not an offer to take. */ .referral { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px var(--leading); margin-top: var(--leading); padding: calc(0.7 * var(--leading)) clamp(18px, 3vw, 28px); background: var(--color-accent-2-100); border: 1px solid var(--color-accent-2-200); border-radius: 20px; } .referral p { margin: 0; font-size: 15.5px; line-height: 24px; max-width: 62ch; } .referral strong { font-weight: 700; color: var(--color-accent-2-800); } .referral .rem { border: 0; background: none; cursor: pointer; padding: 6px 2px; font: 600 13.5px var(--font-body); text-decoration: underline; text-underline-offset: 2px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .referral .rem:hover { color: var(--color-text); } /* — the monthly / annual switch — A real radio group, styled. Not a toggle: two named prices are two choices, and a switch makes the visitor guess which state is which. */ .seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--color-neutral-200); border: 1px solid var(--color-divider); } .seg label { position: relative; } .seg input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .seg span { display: block; padding: 9px 20px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: color-mix(in srgb, var(--color-text) 72%, transparent); transition: background 0.2s ease, color 0.2s ease; } .seg input:checked + span { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgba(29, 59, 87, 0.08); } .seg input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; } .pricebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: calc(1.25 * var(--leading)); } .pricebar .save { font-size: 13.5px; font-weight: 600; color: var(--color-accent-2-800); } /* — organisation strip — one quiet line, not a fourth plan card — */ .orgbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--half) var(--leading); margin-top: calc(1.5 * var(--leading)); padding: calc(0.9 * var(--leading)) clamp(20px, 3vw, 32px); border: 1px solid var(--color-divider); border-radius: 24px; } .orgbar p { margin: 0; font-size: 16px; line-height: 25px; max-width: 52ch; } .orgbar strong { font-weight: 600; } .orgbar a { white-space: nowrap; } @media (max-width: 640px) { .specs { grid-template-columns: 1fr; } .specs dt { border-bottom: 0; padding-bottom: 2px; background: none; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .specs dd { padding-top: 0; } .specs > :nth-last-child(-n+2) { border-bottom: 0; } .plan, .vs-col { border-radius: 22px; } } /* ───────────────────────────────────────────────────────────────────── TOOL ARCHETYPE — the pages where a visitor produces something ───────────────────────────────────────────────────────────────────── Three letter generators (CCPA, background-check dispute, Google removal). They are the only content pages where the user inputs something and gets a computed result back, and a 700px prose column cannot hold a form beside its output. So the tool surface is wider than the measure and prose returns underneath it. Everything is client-side, which is what the current tools do — no endpoint, nothing leaves the browser. That is worth saying on the page, because a form asking for your home address has to answer "where does this go" immediately. */ .tool-wrap { width: min(1180px, 100%); margin: 0 auto; } .tool { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: calc(1.25 * var(--leading)); } /* — the form pane — */ .tool-form { display: grid; gap: var(--half); align-content: start; background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: 28px; padding: calc(1.1 * var(--leading)) var(--leading); } .tool-form h2 { font-family: var(--font-body); font-weight: 700; font-size: 12px; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .tf { display: grid; gap: 5px; } .tf label { font-size: 13.5px; font-weight: 600; color: color-mix(in srgb, var(--color-text) 80%, transparent); } .tf input, .tf select, .tf textarea { width: 100%; box-sizing: border-box; font: 400 15px var(--font-body); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 14px; padding: 10px 14px; min-height: 44px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .tf textarea { min-height: 78px; resize: vertical; line-height: 22px; } .tf input:focus, .tf select:focus, .tf textarea:focus { outline: none; border-color: var(--color-accent-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent); } .tf input:focus-visible, .tf select:focus-visible, .tf textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .tf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--half); } .tf-hint { font-size: 12.5px; line-height: 19px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } /* the request type is three named choices, so it is radios, not a select: the options ARE the explanation and hiding them behind a dropdown hides it */ .tf-choice { display: grid; gap: 8px; } .tf-choice label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; padding: 11px 13px; border-radius: 16px; font-weight: 400; background: var(--color-surface); border: 1px solid var(--color-divider); transition: border-color 0.2s ease, background 0.2s ease; } .tf-choice label:hover { border-color: var(--color-accent-300); } .tf-choice input { margin: 3px 0 0; accent-color: var(--color-accent); flex: none; width: 16px; height: 16px; } .tf-choice label:has(input:checked) { border-color: var(--color-accent-400); background: var(--color-accent-100); } .tf-choice label:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; } .tf-choice b { display: block; font-size: 14.5px; font-weight: 600; } .tf-choice span { display: block; font-size: 12.5px; line-height: 19px; margin-top: 2px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .tool-local { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; font-size: 12.5px; line-height: 19px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .tool-local svg { flex: none; margin-top: 2px; color: var(--color-accent-2-700); } /* — the preview pane — Paper, not a card: this is a document the visitor is about to send, and it should look like the thing rather than like a widget showing the thing. */ .tool-out { display: grid; gap: var(--half); } /* The actions stay reachable while a long letter is read — but ONLY where the bar is a single 68px row. Below 901px the buttons go full-width and stack three deep: a 176px opaque bar pinned to the bottom of a 640px viewport, covering 28% of the screen with the letter behind it. On mobile the bar simply follows the paper in source order, which is where a reader who has finished reading is. */ @media (min-width: 901px) { .tool-acts { position: sticky; bottom: 0; z-index: 1; padding: 12px 0; margin-top: -12px; background: linear-gradient(to top, var(--color-surface) 72%, transparent); } } /* No max-height, no nested scroller. A 62vh cap hid ~900px of a 1234px letter inside a scroll region the reader had to discover — on the page whose entire output is that letter. The paper is now as tall as the document and the page scrolls normally; sticky is dropped with it, since a pane taller than the viewport cannot usefully stick. */ .tool-paper { background: #fff; border: 1px solid var(--color-divider); border-radius: 20px; padding: clamp(24px, 3.2vw, 44px); box-shadow: 0 10px 34px rgba(29, 59, 87, 0.07); font-size: 15px; line-height: 25px; white-space: pre-wrap; word-break: break-word; } /* Placeholders are marked by WEIGHT and a dotted rule, not by being faint. At 42% over an 8% accent tint they measured 2.24:1 — under this project's own 4.5:1 floor, on the only text telling the reader what is still missing. The tint is gone and the ink is at full strength; italics plus an underline carry the "unfilled" meaning without spending any contrast on it. */ .tool-paper .ph { color: var(--color-accent-800); font-style: italic; text-decoration: underline dotted currentColor; text-underline-offset: 3px; } .tool-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .tool-acts .btn { min-height: 44px; display: inline-flex; align-items: center; } .tool-acts .said { font-size: 13.5px; font-weight: 600; color: var(--color-accent-2-800); } @media (max-width: 900px) { /* form first: the preview is the output, and there is nothing to judge before anything has been filled in */ .tool { grid-template-columns: 1fr; } .tool-paper { border-radius: 16px; } .tool-form { border-radius: 22px; } .tf-row { grid-template-columns: 1fr; } .tool-acts .btn { width: 100%; box-sizing: border-box; justify-content: center; } } @media print { /* printing a letter should print the letter, not the website */ body > *:not(main), .nav, .qfooter, .tool-form, .tool-acts, .crumbs, .pagehead, .band, .closer, .tool-local { display: none !important; } /* and the grid has to be dismantled, not just emptied: display:none on .tool-form removes it as a grid ITEM but leaves the two tracks standing, so .tool-out auto-placed into the first one — the 400px form column — and the letter printed at 400px inside an 804px page with the right half blank. Sticky is also undefined-to-hostile in paged media. */ .tool { display: block; } .tool-wrap { width: auto; } .tool-out { position: static; } .tool-paper { border: 0; box-shadow: none; border-radius: 0; padding: 0; max-height: none; overflow: visible; font-size: 12pt; line-height: 1.5; } .sheet { padding: 0; background: none; box-shadow: none; width: auto; } } /* ───────────────────────────────────────────────────────────────────── ERROR PAGES — the only pages with no design at all ───────────────────────────────────────────────────────────────────── */ .err { display: grid; gap: var(--half); align-content: start; padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); max-width: 62ch; } /* The numeral is a watermark, and a watermark must still be legible — the live 404 shipped it at white 6% on cream, 1.01:1, i.e. invisible. Sage at full strength on the ivory sheet reads as decoration without vanishing. */ .err-code { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(72px, 14vw, 148px); line-height: 0.9; margin: 0; /* The 404 numeral. accent-2-300 was ~1.9:1 — the same defect the live page had at 1.01:1 white-on-cream, arriving through the fix for it. §13 says sage at full strength and means it. */ color: var(--color-accent-2-800); font-variant-numeric: tabular-nums; } .err h1 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(30px, 4vw, 46px); line-height: 1.14; margin: var(--half) 0 0; text-wrap: balance; } .err p { font-size: 17px; line-height: var(--leading); margin: var(--half) 0 0; color: color-mix(in srgb, var(--color-text) 80%, transparent); } .err .cta-row { margin-top: calc(1.25 * var(--leading)); } .err-links { margin-top: calc(2 * var(--leading)); padding-top: calc(1.25 * var(--leading)); border-top: 1px solid var(--color-divider); max-width: none; } .err-links h2 { font-family: var(--font-body); font-weight: 700; font-size: 12px; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--half); color: color-mix(in srgb, var(--color-text) 72%, transparent); } .err-status { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--half); padding: 7px 14px; border-radius: 999px; font-size: 13.5px; background: var(--color-neutral-200); color: color-mix(in srgb, var(--color-text) 78%, transparent); } .err-status i { width: 8px; height: 8px; border-radius: 999px; background: var(--color-accent-2-500); flex: none; } /* ───────────────────────────────────────────────────────────────────── HUB SEARCH — a new surface, and the site's first empty state ───────────────────────────────────────────────────────────────────── Progressive by construction: every link is in the initial HTML and the filter only hides. With JS off the search box is not rendered at all and the hub is the complete link list it has always been — which is also what keeps the 105 broker guides crawlable. */ .hubsearch { display: grid; gap: 10px; margin-top: calc(1.25 * var(--leading)); } .hubsearch-field { display: flex; align-items: center; gap: 10px; box-sizing: border-box; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 999px; padding: 4px 6px 4px 18px; max-width: 520px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .hubsearch-field:focus-within { border-color: var(--color-accent-400); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 16%, transparent); } .hubsearch-field svg { flex: none; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .hubsearch input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 16px var(--font-body); color: var(--color-text); padding: 11px 0; min-height: 44px; } .hubsearch input::placeholder { color: color-mix(in srgb, var(--color-text) 72%, transparent); } .hubsearch .clear { border: 0; background: none; cursor: pointer; flex: none; width: 40px; height: 40px; border-radius: 999px; color: color-mix(in srgb, var(--color-text) 72%, transparent); display: none; align-items: center; justify-content: center; } .hubsearch[data-active] .clear { display: inline-flex; } .hubsearch .clear:hover { background: var(--color-neutral-200); color: var(--color-text); } .hubcount { font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 72%, transparent); } .hubcount b { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; } /* hiding is handled globally by [hidden] in content-base.css */ /* The site's first empty state. It does three things: says plainly that nothing matched, repeats what was searched for so the reader can see the typo, and offers the two routes out that always work — the free scan, and asking us. */ .noresults { margin-top: calc(1.5 * var(--leading)); padding: calc(1.25 * var(--leading)) clamp(20px, 3vw, 32px); border: 1px dashed color-mix(in srgb, var(--color-text) 26%, transparent); border-radius: 24px; } .noresults h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; line-height: 31px; margin: 0; } .noresults h2 span { color: var(--color-accent-2-800); } .noresults p { font-size: 16px; line-height: 25px; margin: 10px 0 0; max-width: 58ch; color: color-mix(in srgb, var(--color-text) 80%, transparent); } .noresults .cta-row { margin-top: var(--leading); } /* ───────────────────────────────────────────────────────────────────── B2B LANDING — /industries ───────────────────────────────────────────────────────────────────── */ .ind-band { background: var(--color-neutral-900); color: var(--color-neutral-100); border-radius: 32px; padding: calc(2 * var(--leading)) clamp(24px, 5vw, 64px); margin-top: calc(2 * var(--leading)); } .ind-band h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; margin: 0; max-width: 22ch; color: #fff; text-wrap: balance; } .ind-band p { font-size: 17px; line-height: var(--leading); max-width: 58ch; margin: var(--half) 0 0; color: color-mix(in srgb, #fff 82%, transparent); } /* on a dark ground the accent has to come UP the ramp, not down */ .ind-band a:not(.btn) { color: var(--color-accent-300); } .ind-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--half); margin-top: calc(1.25 * var(--leading)); align-items: end; } .ind-form .tf label { color: color-mix(in srgb, #fff 78%, transparent); } .ind-form .tf input, .ind-form .tf select, .ind-form .tf textarea { background: color-mix(in srgb, #fff 8%, transparent); color: #fff; border-color: color-mix(in srgb, #fff 22%, transparent); } .ind-form .tf input::placeholder { color: color-mix(in srgb, #fff 45%, transparent); } .ind-form .tf input:focus, .ind-form .tf select:focus, .ind-form .tf textarea:focus { border-color: var(--color-accent-300); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-300) 25%, transparent); } .ind-form .wide2 { grid-column: 1 / -1; } .ind-form .btn { min-height: 46px; } .ind-note { font-size: 13px; margin: var(--half) 0 0; color: color-mix(in srgb, #fff 62%, transparent); } /* ───────────────────────────────────────────────────────────────────── HUB / DIRECTORY — /remove, state/index ───────────────────────────────────────────────────────────────────── */ .dirgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--half); margin-top: calc(1.25 * var(--leading)); } .dircard { display: grid; align-content: start; gap: 8px; box-sizing: border-box; background: var(--color-neutral-100); border: 1px solid var(--color-divider); border-radius: 24px; padding: calc(0.9 * var(--leading)) var(--leading); text-decoration: none; color: var(--color-text); transition: border-color 0.2s ease, background 0.2s ease; } .dircard:hover { border-color: var(--color-accent-300); background: var(--color-accent-100); } .dircard h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; line-height: 27px; margin: 0; } .dircard p { font-size: 15px; line-height: 24px; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); } /* .flag sits in its own grid row, not inside .meta. In .meta it made the law name wrap on the long entries (California, Vermont), which pushed those cards' h3 a line lower than their row neighbours — a component whose alignment depends on the length of its label. Its own row reserves the same space on every card. */ .dircard .flag { justify-self: start; } .dircard .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 72%, transparent); } /* An alphabet rail, real anchors so it survives no-JS. Round 8 §3: NOT for /state. That page is three tier groups, alphabetical within each and not across the page, so a single A–Z rail over it jumps backwards — an "A" that lands below a "C". This stays for a genuinely flat index (the broker directory); the grouped directory uses .tierjump below. */ .alpha { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--leading); } .alpha a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600; color: var(--color-text); background: var(--color-neutral-200); } .alpha a:hover { background: var(--color-accent-200); color: var(--color-accent-900); } /* ── .tierjump + .tiergroup — a grouped directory ───────────────────────────── Round 8 §3, shape 2. The jump names the three groups rather than the alphabet: it matches the page's actual structure, and "which group am I in?" is the question the page exists to answer — more often the reader's question than a letter is. Three short rails (shape 1) would have been honest, but it is three pieces of furniture for one job. The pills carry .key-dot, so the control is the legend and the navigation at once. Where this ships, the separate .key