/* ═══════════════════════════════════════════════════════════ RESOURCE COLLECTION — /resources// Version: v1.0 (candidate) The listing surface for one editorial collection. Buying Guides is the first; Industry Insights, Market Trends and Glossary reuse this file unchanged. WHAT THE COMPOSITION REFERENCE DECIDED, AND WHAT IT DID NOT. The approved reference fixes the ARRANGEMENT: compact bordered hero with copy left and collection artwork right, an "All Buying Guides" heading, then a three-column card grid on a 1200px canvas. Its container-to-viewport ratio is 0.8333, i.e. exactly 1200 at 1440, which is why the canvas below is the 1200px token rather than the 1500px Resource Center width. Everything else comes from base.css. The reference's type is a mockup face at mockup sizes - its card title is a serif and its metadata measures well above the 13px caption token - so no size, weight, colour or family here is traced from it. Zero hex literals: every value is a token. WHY NOT THE FROZEN FP-C-005 CARD. That card is shared with the homepage and carries a FORMAT badge, a description and a 144x44 box CTA. A collection page has already told the reader the format, so the collection card carries a CATEGORY pill, no description and a Text CTA. Different job, separate component - editing the frozen one would have redefined the homepage. The pill BOX is still shared: .fp-resource-card__badge supplies the approved geometry and only the colour is set here, exactly as .fp-article__pill does on the article template. ═══════════════════════════════════════════════════════════ */ /* ── Canvas ────────────────────────────────────────────── * GeneratePress caps #page.grid-container at 1200px and adds its own * padding, which would net ~1136px of content. The hero and grid are * measured to the full 1200, so #page is released and the width is * restated here - the same pattern category-page.css and article.css use. */ .page-template-collection-landing #page.grid-container { max-width: 100%; margin-left: 0; margin-right: 0; } /* GeneratePress renders #content.site-content as display:flex, so
is a flex child and needs to be told to fill the row. */ .page-template-collection-landing .fp-collection-main { display: block; width: 100%; } .fp-collection { background-color: var(--fp-color-white); padding-top: 0; /* v3.56.8 hero offset (was 24); 8px from 1200 - see the end of file */ padding-bottom: var(--fp-space-xxl); /* 64px */ } .fp-collection__container { width: 100%; max-width: var(--fp-container-max-width); /* 1200px */ margin: 0 auto; padding: 0 var(--fp-margin-mobile); box-sizing: border-box; } /* ── Hero ──────────────────────────────────────────────── * THREE COLUMNS ON ONE CARD: what the collection is, the permanent collection * artwork, how the guides are made. Equal thirds, matching the approved * composition reference, whose card-to-page ratio and column split scale to * the 1200px collection container. * * The earlier single-column hero put 560px of copy and one illustration inside * 1200px and had ~360px of slack with nowhere to go, which is what read as two * islands however the artwork was sized. Three columns spend that width on * content instead of on gaps, so the balance problem disappears rather than * being padded around. * * White, bordered, rounded. No tint and no gradient: the only colour on the * page is the category signal on the cards, where it carries meaning. * * SEPARATORS are borders on the columns themselves - no extra elements, and * they span the card's full height because the grid stretches its items. The * copy is centred inside each column independently. * * ARTWORK is sized from its NORMALISED viewBox, so 240px of CSS box is ~234px * of visible illustration rather than the ~154px the same number would have * bought against the original 50%-empty export. See the asset section of the * component manifest. */ /* MOBILE FIRST from here down. The three-column composition is the DESKTOP case and now lives in the >=1200px block at the end of this file; this base is the single-column stack. It was the other way round until responsive QA found the consequence: `repeat(3, 1fr)` with no breakpoint kept three columns all the way to 375px, where they measured 111px each - the H1 spilled ~84px into both neighbours and the left column's text rendered at x = -16, clipped off the viewport. Both collection pages were affected, since they share this file. */ .fp-collection__hero { display: grid; grid-template-columns: 1fr; align-items: stretch; background-color: var(--fp-color-white); border: 1px solid var(--fp-color-gray-200); border-radius: var(--fp-radius-card); /* 12px */ box-sizing: border-box; } .fp-collection__hero-col { display: flex; flex-direction: column; justify-content: center; min-width: 0; /* 32px inline, not 40. The methodology heading's declared first line, "Research. Compare.", measures ~321px; at 40px padding the column offered 319.3 and the line wrapped anyway, defeating the declared break. At 32px it offers 335.3 - about 14px of slack, enough that the intended break survives the platform font substitutions the body stack allows. Applied to all three columns, so the matched left/right system holds. */ padding: var(--fp-space-l); /* 32px block and inline */ box-sizing: border-box; } /* IDENTITY FIRST when stacked. The page must say what it is before it explains itself, so the identity column is pulled to the top on narrow screens and the two supporting sections follow in reading order. `order` is used rather than reordering the DOM: the source order is WHY -> IDENTITY -> METHOD, which is the correct DESKTOP left-to-right sequence and the correct source order for assistive technology. */ .fp-collection__hero-col--identity { order: 1; } .fp-collection__hero-col--why { order: 2; } .fp-collection__hero-col--method { order: 3; } /* Separators run HORIZONTALLY while stacked. Assigned per column, not with `+`: the adjacent-sibling selector follows DOM order, which `order` has deliberately diverged from, so `+` would put the rule on the wrong edges. */ .fp-collection__hero-col--why, .fp-collection__hero-col--method { border-top: 1px solid var(--fp-color-gray-200); } /* The copy columns are SUBGRIDS of the hero, so eyebrow, heading, first paragraph and second paragraph each sit in a row shared across both sides. Independent centring - or even independent top-alignment - only aligns the first element; everything below it drifts as soon as a heading wraps differently. Subgrid aligns all four zones by construction. Both columns carry identical block padding, so their tracks are offset identically and the zones stay in register. The identity column is not a subgrid: it spans the rows and centres on its own axis. */ /* The four-zone subgrid is a DESKTOP mechanism - it exists to align the left and right columns against each other. Stacked, there is nothing to align across, so it is not applied here; see the >=1200px block. */ /* WHAT. The identity column centres on its own axis - H1 above artwork - so the page announces itself before any copy is read. */ .fp-collection__hero-col--identity { align-items: center; justify-content: center; text-align: center; padding-left: var(--fp-space-m); padding-right: var(--fp-space-m); } .fp-collection__eyebrow { margin: 0 0 var(--fp-space-xs); /* 8px */ /* v3.56.4: the shared hero label (base.css --fp-hero-label-*): 14px, 16px from 1280, centred in its own column. stretch, not start, so the centring is across the column's full width in both the stacked flex column and the desktop subgrid. */ align-self: stretch; text-align: center; font-size: var(--fp-hero-label-size); /* 14px; 16px from 1280 */ font-weight: var(--fp-weight-label); /* 600 */ line-height: var(--fp-hero-label-line); /* 16.25px; 18px from 1280 */ letter-spacing: 1.04px; text-transform: uppercase; color: var(--fp-color-blue); text-wrap: balance; /* no one-word last line */ } /* The H1 outranks its neighbours deliberately: it is the page identity, and the two flanking columns are supporting statements. One step up the scale (48 against 36) is enough to settle the hierarchy without turning the hero into an article header. */ .fp-collection__headline { margin: 0 0 26px; /* H1 -> artwork; +10 over the columns' 16px rhythm, so the name and the artwork read as two beats, not one block */ font-size: var(--fp-font-h1); /* 48px */ font-weight: var(--fp-weight-heading); /* 700 */ line-height: var(--fp-line-display); /* 1.10 */ letter-spacing: var(--fp-tracking-display); /* GREEN, and specifically the system's TEXT green. --fp-color-green (#42B649) is the brand mark's green and measures 2.62:1 on white, which fails the 3:1 minimum for large text; --fp-color-score-text is the green base.css already annotates as text-safe at 5.02:1. The supporting H2s stay navy, and no green enters the body copy. */ color: var(--fp-color-score-text); } /* GOVERNED HERO-HEADING STANDARD (approved 2026-09-28) - the two Resource Center headings only, at every width: 40 / 700 / 44 / -1.20px, centred via the >=1200 rule, Dark Green via --fp-color-hero-heading. Comparisons is not part of the Resource Center hero system and keeps the base rule above. text-wrap: balance keeps "Best Financial / Products & Services" on desktop; narrower widths wrap naturally (one line at 768, three at 390 - approved). No manual line break. */ .fp-collection__hero--best-of .fp-collection__headline, .fp-collection__hero--buying-guides .fp-collection__headline { /* v3.56.1: the shared hero title scale (base.css --fp-hero-title-*): 40 / 44 / -1.2px, 30px below 480px, 36px at 1280-1359px. */ font-size: var(--fp-hero-title-size); line-height: var(--fp-hero-title-line); letter-spacing: var(--fp-hero-title-track); /* -0.03em */ color: var(--fp-color-hero-heading); /* #338E39 */ text-wrap: balance; } .fp-collection__col-title { margin: 0; align-self: start; font-size: var(--fp-font-h2); /* 36px */ font-weight: var(--fp-weight-heading); /* 700 */ line-height: var(--fp-line-display); /* 1.10 */ letter-spacing: var(--fp-tracking-heading); color: var(--fp-color-navy); /* NO text-wrap: balance. The methodology heading declares its own break in the data; letting the browser rebalance it would put the decision back in the hands of whatever font the platform substitutes. */ } .fp-collection__intro { margin: var(--fp-space-s) 0 0; /* 16px, zone -> zone */ align-self: start; font-size: var(--fp-font-body-m); /* 16px */ font-weight: var(--fp-weight-body); line-height: var(--fp-line-body); /* 1.65 */ color: var(--fp-color-gray-500); } /* Sized so the identity column's stack - H1 plus artwork - sits at the same height as the copy in the columns either side, which is what keeps the hero one composition rather than three unequal blocks. Against the NORMALISED viewBox this is ~203px of visible illustration; the same number would have bought ~134px from the original 50%-empty export. */ .fp-collection__hero-image { /* CATEGORY/COLLECTION HERO STANDARD v1.0. The artwork is fitted into the shared illustration zone rather than given a width, so every collection hero - present and future - renders at one consistent scale with its native aspect ratio preserved. Portrait artwork becomes height-constrained, landscape artwork width-constrained. SUPERSEDES the previous per-collection widths (Buying Guides 208px, Comparisons 320px), which were two independent decisions and the reason hero scale changed noticeably from page to page. A new collection sets NO width; it inherits the zone. */ display: block; width: auto; height: auto; max-width: min(var(--fp-hero-illustration-zone-w), 100%); max-height: var(--fp-hero-illustration-zone-h); object-fit: contain; margin-inline: auto; } /* NO per-collection width overrides. Comparisons previously carried width:320px; that rule is REMOVED, not layered over - it is superseded by the shared zone above, which renders it 264 x 197.1 in line with every other collection hero. */ /* ── Section heading ─────────────────────────────────────*/ .fp-collection__heading { margin: var(--fp-space-l) 0 0; /* 32px under the hero */ font-size: var(--fp-font-h3); /* 28px */ font-weight: var(--fp-weight-heading); /* 700 */ line-height: var(--fp-line-heading); letter-spacing: var(--fp-tracking-heading); color: var(--fp-color-navy); } /* ── Grid ──────────────────────────────────────────────── * Three columns at desktop and ONE card at launch. Empty track 2 and 3 are * the intended state: a real collection with one guide shows one guide. * Explicit tracks rather than auto-fill, so the single card takes a third of * the row instead of stretching across it. */ .fp-collection__grid { display: grid; grid-template-columns: 1fr; gap: var(--fp-gutter-mobile); /* 16px */ margin: 20px 0 0; /* heading -> grid, one section */ padding: 0; list-style: none; } /* ── Card ────────────────────────────────────────────────*/ /* NARROWER THAN ITS TRACK. The grid column stays 384px, but the card is 344 and sits at the column's left edge: a listing card is sized by the content it carries, not by the width the grid happens to offer. justify-self keeps it left-aligned, so a single card never drifts toward the centre of the page. Every future card uses the same width. */ .fp-collection-card { display: flex; flex-direction: column; align-items: stretch; justify-self: start; /* 344px is the CANONICAL MAXIMUM card width, not a fixed one. * * It was a flat `width: 344px`, which is wider than the grid track at * 375: the container leaves a 335px track, so the card overhung it by 9px. * That produced no page-level horizontal scroll — the card still sat * inside the viewport — but the card-width governance should never require * a card to be wider than the track it is placed in. * * width:100% + max-width lets the card take the track when the track is * narrower and stop at 344 whenever there is room, so every tier from 640 * up is pixel-identical to before and only 375 changes. The image stage, * artwork behaviour, zones, typography, border and radius are untouched. */ width: 100%; /* ⚠ THE CAP IS THE DESKTOP TRACK, NOT 344px. `max-width: 344px` held the card 40px inside its own 384px track at 1440, wasting 120px across the row. But removing the cap outright is wrong too: at 768 the grid is a SINGLE 728px column, and an uncapped card stretched to the full 728px with the artwork stranded in the middle of it (measured; it looked stretched on Best Of, Buying Guides and Comparisons alike). 384px is the desktop track, so the card fills its track at 1440 and stops at a sane editorial width on a single-column tier. Narrower tracks still govern, because width is 100%. */ max-width: 384px; /* Even 24 all round. The card had been driven toward its minimum height and started reading as a utility tile rather than an editorial listing card; the space is restored deliberately, not optimised away. */ padding: var(--fp-space-m); /* 24px */ background-color: var(--fp-color-white); border: 1px solid var(--fp-color-gray-200); border-radius: var(--fp-radius-card); /* 12px */ box-shadow: var(--fp-shadow-card-level-1); box-sizing: border-box; } /* Category pill. The box comes from .fp-resource-card__badge, which is enqueued site-wide; only the colour is set here. Quiet metadata, not a badge competing with the illustration or the title. */ .fp-collection-card__pill--business-banking { color: var(--fp-category-business-banking-text); /* #2563EB, 5.17:1 */ } /* Pill -> illustration. The compound selector matches .fp-article__pill's precedent and clears the shared badge box's own 16px bottom margin at (0,2,0), so the override cannot depend on stylesheet order. Treatment, colour and geometry are untouched - this is spacing only. */ .fp-collection-card__pill.fp-resource-card__badge { /* Quieter than the Resource Center badge it borrows its box from: this is category metadata under a centred illustration, not a badge that should trade blows with the article title. Horizontal padding carries most of the reduction; the half-point of type is what keeps the label from looking cramped inside the tighter box. Colour, outline, uppercase, pill shape and left alignment are untouched, and the compound selector keeps every other surface's badge exactly as it was. */ padding: 4px 7px; font-size: 10.5px; margin-bottom: 20px; /* pill -> illustration */ } /* CARD ILLUSTRATION STAGE — a fixed zone, not a fixed image width. * * The card previously set the IMAGE to 256px wide with height:auto, so card * height was a function of whichever aspect ratio that article's artwork * happened to have. Workable with one card, ragged with several: a 1.34 asset * and a 1.84 asset in the same grid produce different card heights. * * The zone is now a fixed 256 x 160 stage and artwork is fitted with * object-fit: contain. Every article card reserves the same vertical space * whatever its artwork's shape, so the row stays even as cards are added, and * nothing is cropped, stretched or distorted — contain preserves the native * aspect ratio exactly and centres the result on both axes. * * WHY 160 TALL. The canonical Business Banking master is aspect 1.339, so it is * height-bound here and renders 214.2 x 160. The homepage Resource Center — a * FROZEN surface — renders the SAME canonical asset at 213 x 159.04. Matching * that was the point: one asset, one optical size, two surfaces. A 256 x 139 * stage would have held the old card height but shrunk the artwork to 186 wide; * a stage tall enough to render it at the full 256 wide would have cost 52px of * card height. 160 reconciles both. * * A wide future asset can use the full 256 width, a portrait one the full 160 * height. Neither changes the card. */ .fp-collection-card__image-wrap { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 256px; /* ⚠ 134px, NOT 160px. The stage was taller than the artwork needed and was the last source of surplus card height once the two caps were released. Shared deliberately: Buying Guides takes the same density improvement rather than Best Of getting an exception. */ height: 134px; line-height: 0; margin: 0 auto 20px; /* illustration -> title */ } /* The card's primary visual. It fills the stage above and is fitted with contain, so the artwork's own ratio is preserved exactly and never stretched. SUPERSEDED NOTE: this previously set an explicit 256px width with height:auto, sized against an asset that exported with ~30% empty canvas. The canonical v1.1 master is cropped to its artwork, so the stage — not the image — now carries the geometry. The artwork carries its own white ground, so there is no wrapper tint or panel. */ .fp-collection-card__image { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; /* native aspect ratio preserved */ } /* Centred under the artwork, with a measure narrower than the card so the line break is a decision rather than whatever the card width produced. */ .fp-collection-card__title { margin: 0 auto; /* the footer owns title -> date */ /* ⚠ NO TITLE CAP. `max-width: 250px` held the title 46px inside a 296px card interior and forced canonical article titles onto a fourth line ("Best Business Checking Accounts of 2026: Compare Our Top Picks"). Released, both Best Of titles set in 3 lines at the unchanged 22px/600 with no truncation, clamp or shortened card copy. */ text-align: center; font-size: var(--fp-font-h4); /* 22px */ font-weight: var(--fp-weight-label); /* 600 - the card-title weight */ line-height: var(--fp-line-heading); /* 1.20 */ letter-spacing: var(--fp-tracking-subhead); color: var(--fp-color-navy); text-wrap: balance; } /* Date and CTA stack rather than share a row: with no description the card is short, and the reference puts clear air between the metadata and the CTA. */ /* ONE CENTRED GROUP. Date then CTA on a shared baseline, centred under the title as a pair. Pushing them to opposite card edges with space-between read as two unrelated items rather than one metadata line. */ .fp-collection-card__footer { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 40px; /* the pair's internal spacing */ margin-top: var(--fp-space-m); /* 24px, title -> metadata row */ } .fp-collection-card__updated { font-size: var(--fp-font-caption); /* 13px */ font-weight: var(--fp-weight-body); line-height: 1; color: var(--fp-color-gray-500); white-space: nowrap; } /* Text CTA (Bible ch. 54.4): 14px / 500, blue, underline on hover only - the same treatment .fp-providers__cta uses on the article template. Text links underline; box CTAs change surface. This is a text link. */ .fp-collection-card__cta { display: inline-flex; align-items: center; font-size: var(--fp-font-body-s); /* 14px */ font-weight: var(--fp-weight-medium); /* 500 */ line-height: 1; color: var(--fp-color-blue); text-decoration: none; white-space: nowrap; } .fp-collection-card__cta:hover { text-decoration: underline; } .fp-collection-card__cta:focus-visible { outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color); outline-offset: var(--fp-focus-ring-offset); } /* No whitespace before this span in the template, so the arrow can never orphan onto its own line; the gap is this margin. */ .fp-collection-card__cta .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); /* 4px */ } /* ═══════════════════════════════════════════════════════════ DESKTOP — 1280px and up: the measured 1200px canvas, 3 columns DESKTOP-ONLY PASS. The single-column base above is the natural mobile default, not a verified responsive system: the tablet steps have not been built or QA'd yet and are the next pass. ═══════════════════════════════════════════════════════════ */ @media (min-width: 1280px) { .fp-collection__container { padding: 0; /* the full measured 1200 */ } .fp-collection__grid { grid-template-columns: repeat(3, 1fr); gap: var(--fp-gutter-desktop); /* 24px -> 384px cards */ } } /* ═══════════════════════════════════════════════════════════ COMPARISONS INDEX — 1280px and up: four compact cards, one row Added 2026-09-02. ⚠ SCOPED TO THE COMPARISONS COLLECTION ONLY, DELIBERATELY. .fp-collection__grid and .fp-collection-card are SHARED: the Buying Guides index at /resources/buying-guides/ renders the same grid and the same card from the same classes, and there is no modifier on either to tell the two collections apart. Left unscoped, this block would have silently resized the Buying Guides card too — a page nobody asked to change. :has() on the hero's existing --comparisons modifier is the hook, so nothing about the markup changes and the rule cannot depend on a WordPress page ID. Buying Guides keeps the three-column block above and the original 344px card exactly as it is. WHY. With four comparisons live, three 384px tracks left the fourth card orphaned on a row of its own at every desktop width — 1440, 1920 and 2048 all render this same 1200px canvas, so the wrap was never a large-screen problem and no breakpoint above 1280 could have fixed it. WHY NOT A WIDER CANVAS. Widening the container to 1448 so four 344px cards fit was built, measured and REJECTED: it dragged the hero out to 1448 with it, and the 344px card was judged too large for a four-up row. The canvas stays at its existing 1200px maximum and the CARD is resized instead — deliberately, not by being squeezed into a narrower track. THE ARITHMETIC. (1200 - 3*24) / 4 = 282 exactly, so `repeat(4, 1fr)` divides into four whole 282px tracks with the existing 24px gutter and no sub-pixel rounding. 1280 is the LOWEST width at which this is possible: it is where .fp-collection__container drops its 20px padding and reaches the full 1200 measure. At 1279 and below the grid is 1160 or less and 282px tracks cannot exist, which is why the compact treatment is scoped to exactly the breakpoint that allows it. The page margin at 1280 is (1280-1200)/2 = 40px — unchanged from the three-column layout it replaces. THE COMPACT CARD. Illustration stage 256x160 -> 210x131 (0.82), title 22 -> 18px, padding 24 -> 20, the pill and illustration gaps 20 -> 16, and the footer's internal gap 40 -> 28. The 224px title measure is chosen, not inherited: it is the widest measure at which ALL FOUR current titles set on two lines, which is what keeps the row as short as it honestly can be. A 206px measure was measured and rejected for pushing Bluevine vs. Grasshopper to three lines and the row 21.6px taller. Border, radius, colours, shadow, hierarchy, pill treatment, date, CTA and arrow are all untouched — only size and spacing change. EQUAL HEIGHT AND ONE FOOTER BASELINE. height:100% makes the four cards equal; margin-top:auto then anchors each footer to its card's bottom so the date/CTA rows sit on ONE baseline across the row instead of following each title's depth. padding-top guarantees the title-to-footer air on the tallest card, where auto resolves to zero. max-width:none releases the 344px cap so the card meets its 282px track. It does not make the card wider than its track. SCOPE. Nothing below 1280 is touched. The tablet tier stays at ONE column and mobile stays at one column, both with the original 344px card, 256x160 stage and 22px title. ═══════════════════════════════════════════════════════════ */ @media (min-width: 1280px) { .fp-collection:has(.fp-collection__hero--comparisons) .fp-collection__grid { grid-template-columns: repeat(4, 1fr); gap: var(--fp-gutter-desktop); /* 24px -> 282px cards */ } .fp-collection:has(.fp-collection__hero--comparisons) .fp-collection-card { max-width: none; height: 100%; padding: 20px; } .fp-collection:has(.fp-collection__hero--comparisons) .fp-collection-card__pill.fp-resource-card__badge { margin-bottom: 16px; /* pill -> illustration */ } .fp-collection:has(.fp-collection__hero--comparisons) .fp-collection-card__image-wrap { max-width: 210px; height: 131px; margin: 0 auto 16px; /* illustration -> title */ } .fp-collection:has(.fp-collection__hero--comparisons) .fp-collection-card__title { font-size: 18px; max-width: 224px; } .fp-collection:has(.fp-collection__hero--comparisons) .fp-collection-card__footer { margin-top: auto; /* anchor to the card bottom */ padding-top: 20px; /* guaranteed title -> footer air */ gap: 28px; } } /* ═══════════════════════════════════════════════════════════ HERO — RESPONSIVE TIERS Added 2026-08-18 after responsive QA. RESPONSIVE-ONLY: the >=1200px block below restates the approved desktop composition exactly, so the frozen 1440 rendering of BOTH collection pages is unchanged. Everything above is the narrow-screen behaviour that did not previously exist. ═══════════════════════════════════════════════════════════ */ /* ── 768-1199: TWO TIERS ────────────────────────────────── * Identity spans the full width on top; the two supporting sections sit side * by side beneath it. This keeps the left/right relationship - they are a * matched pair and read as one comparison - while giving the collection name * and its artwork the full measure instead of a squeezed centre column. * * Explicit grid placement, not `order`: with real column/row assignments the * ordering is unambiguous and the base `order` values are simply ignored. */ @media (min-width: 768px) and (max-width: 1199.98px) { /* Row 1 is the identity tier; rows 2-5 are the four shared copy zones, so the subgrid still has tracks to align against at this width. */ .fp-collection__hero { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto auto; } .fp-collection__hero-col--identity { grid-column: 1 / -1; grid-row: 1; border-top: 0; } .fp-collection__hero-col--why { grid-column: 1; grid-row: 2 / -1; border-top: 1px solid var(--fp-color-gray-200); } /* The one place a vertical rule still earns its keep: these two sit side by side, so they need a divider between them AND a horizontal one above separating the pair from the identity tier. */ .fp-collection__hero-col--method { grid-column: 2; grid-row: 2 / -1; border-top: 1px solid var(--fp-color-gray-200); border-left: 1px solid var(--fp-color-gray-200); } /* SUBGRID SURVIVES THIS TIER. The two copy columns are still side by side here, so aligning eyebrow / heading / paragraph zones across them still does real work - a heading that wraps to two lines on one side must not push that side's paragraphs out of step with the other. It is only in the fully stacked layout below 768 that there is nothing left to align against. */ .fp-collection__hero-col--why, .fp-collection__hero-col--method { display: grid; grid-template-rows: subgrid; align-content: start; } } /* ── >=1200: THE APPROVED DESKTOP HERO, restated ────────── * FROZEN COMPOSITION. Every declaration here reproduces the approved 1440 * implementation for Buying Guides and Comparisons: three equal columns, * full-height vertical separators, and the four-zone subgrid that holds the * left and right copy in register. Nothing in this block is new - it is the * former base, scoped to the width it was designed for. */ @media (min-width: 1200px) { .fp-collection__hero { grid-template-columns: repeat(3, 1fr); /* FOUR SHARED ZONES: eyebrow, heading, first paragraph, second paragraph. Declaring them here lets the two copy columns adopt them as subgrid rows, so the zones align by layout rather than by matching content lengths. A heading that wraps to three lines widens the heading zone for BOTH columns, which is what stops the paragraphs drifting apart. */ grid-template-rows: auto auto auto auto; } /* Source order is restored: WHY | IDENTITY | METHOD, left to right. */ .fp-collection__hero-col { order: 0; grid-row: 1 / -1; border-top: 0; } .fp-collection__hero-col--why { grid-column: 1; } .fp-collection__hero-col--identity { grid-column: 2; } .fp-collection__hero-col--method { grid-column: 3; } /* Vertical separators, spanning the card's full height because the grid stretches its items. */ .fp-collection__hero-col + .fp-collection__hero-col { border-left: 1px solid var(--fp-color-gray-200); } /* The copy columns become subgrids of the hero, so eyebrow, heading and both paragraphs each sit in a row shared across the two sides. */ .fp-collection__hero-col--why, .fp-collection__hero-col--method { display: grid; grid-template-rows: subgrid; align-content: start; } } /* ═══════════════════════════════════════════════════════════ COMPARISONS HERO — modernised treatment (Phase 1) ─────────────────────────────────────────────────────────── SCOPED TO COMPARISONS ON PURPOSE. .fp-collection__hero is shared by every page using the Resource Collection template, so an unscoped change here would silently restyle the live Buying Guides hero too. Buying Guides keeps its shipped treatment until its own approved pass; this block is the smallest modifier that isolates the change. WHAT CHANGES: the hero stops being a card sitting ON the page and becomes part of it. The enclosing 1px border and 12px radius are removed, and the separation from the collection content below is carried by a single hairline divider in the existing neutral token instead of by a box. There was never a blue fill or shadow to remove - the hero was already --fp-color-white with no box-shadow - so those are not "reset" here, they simply do not exist. VERTICAL TIGHTENING is done on the hero's own padding only. The three-column WHY / identity / HOW architecture, the typography, the content width and the page axes are untouched. ═══════════════════════════════════════════════════════════ */ .fp-collection__hero--comparisons { border: 0; border-radius: 0; border-bottom: 1px solid var(--fp-color-gray-200); /* the subtle divider */ box-shadow: none; } /* The card box carried its own inset. With the box gone the columns can sit closer to the page axes, so the block padding tightens and the inline padding is removed at the outer edges. */ .fp-collection__hero--comparisons .fp-collection__hero-col { padding-top: var(--fp-space-m); /* 32px -> 24px */ padding-bottom: var(--fp-space-m); } @media (min-width: 768px) { .fp-collection__hero--comparisons .fp-collection__hero-col--why { padding-left: 0; } .fp-collection__hero--comparisons .fp-collection__hero-col--method { padding-right: 0; } } /* ── COMPARISONS REFINEMENT PASS ────────────────────────── * Scoped to --comparisons throughout. Buying Guides is untouched. * Typography sizes, weights, colours and all copy are unchanged; this pass * moves rendered illustration SCALE and vertical spacing only. * ──────────────────────────────────────────────────────── */ /* DESKTOP ILLUSTRATION SCALE. The shared zone token stays 264px for every other collection - it is NOT raised globally. At 1280 and up the Comparisons identity block reads under-weighted against a 48px title and two 36px column headings, so the artwork alone is lifted to 310px here. 310 / 1.3393 = 231.5px tall, still inside the 254px zone height, so the height cap never binds and the native aspect ratio is untouched. */ @media (min-width: 1280px) { .fp-collection__hero--comparisons .fp-collection__hero-image { max-width: min(310px, 100%); } } /* TABLET VERTICAL RHYTHM (768-1199.98). The identity tier sits above the two copy columns here, and its 24px bottom padding stacked against the copy columns' 24px top padding put 48px between the illustration and the first heading. Trimmed to 8px so the hero reads as one connected section. Architecture, order and column count are unchanged. */ @media (min-width: 768px) and (max-width: 1199.98px) { .fp-collection__hero--comparisons .fp-collection__hero-col--identity { padding-bottom: var(--fp-space-xs); /* 24px -> 8px */ } } /* MOBILE VERTICAL RHYTHM (<768). Same stacked gap, one tier narrower. Trimmed by 20px rather than closed completely - the brief asked for tighter, not compressed, so the illustration keeps clear air beneath it. */ @media (max-width: 767.98px) { .fp-collection__hero--comparisons .fp-collection__hero-col--identity { padding-bottom: var(--fp-space-xxs); /* 24px -> 4px */ } } /* INTERNAL DIVIDERS — CANONICAL, NOT OVERRIDDEN. A gray-100 softening was trialled here and reverted: gray-200 is the token documented as "borders" and is the value every other collection hero uses, so the dividers inherit it from the shared rules rather than being re-declared. Deliberately no selector - do not add one back. */ /* ═══════════════════════════════════════════════════════════ BUYING GUIDES HERO — modernised to the frozen Comparisons benchmark ─────────────────────────────────────────────────────────── DELIBERATELY A PARALLEL MODIFIER, NOT A SHARED BASE RULE. Comparisons is FROZEN, so its selectors are left untouched rather than refactored into a common ancestor. The duplication is accepted for now; once both collections are approved these two blocks should be consolidated into .fp-collection__hero and the modifiers reduced to their genuine differences (illustration size only). Do not consolidate before that approval. WHAT CHANGES: the enclosing 1px border and 12px radius are removed so the hero reads as part of the page rather than a card on it, and the vertical rhythm is brought onto the benchmark's tighter footing. The background was already white and there was never a shadow. WHAT DOES NOT CHANGE: all Buying Guides copy, the three-column architecture, the typography (already identical to the benchmark - eyebrows #2563EB 13/600, headlines #173F73 36/700, body #6B7280 16/400, centre title the accessible green #15803D 48/700), the internal Gray-200 dividers and the Gray-200 bottom divider, all of which are inherited rather than re-declared. ═══════════════════════════════════════════════════════════ */ /* BEST OF (v3.42.5) joins these presentation rules: the frozen Best Of complete hero v1.0 uses the same modern borderless treatment. Only the selector is added; no Buying Guides declaration changes. The superseded Buying Guides height caps further down are deliberately NOT extended to Best Of. */ .fp-collection__hero--buying-guides, .fp-collection__hero--best-of { border: 0; border-radius: 0; border-bottom: 1px solid var(--fp-color-gray-200); /* the subtle divider */ box-shadow: none; } .fp-collection__hero--buying-guides .fp-collection__hero-col, .fp-collection__hero--best-of .fp-collection__hero-col { padding-top: var(--fp-space-m); /* 32px -> 24px, matching the benchmark */ padding-bottom: var(--fp-space-m); } /* ILLUSTRATION SCALE — HEIGHT-MATCHED TO THE FROZEN COMPARISONS BENCHMARK. * * ⚠ SUPERSEDES THE EQUAL-AREA RULE. This previously capped the height at 296px * so the Buying Guides bounding box matched Comparisons by AREA (71,898 against * 71,750px²). Equal area did NOT produce equal presence: measured rendered ink * was 16,105px² against 8,703 — the portrait, solid-fill document carries * ~1.85x the ink of two outline panels at the same footprint, and it read * markedly too large on live staging. * * The cap is now the Comparisons illustration's own HEIGHT at each tier, so * both illustrations occupy the same vertical band: * >=1280 231.45px -> 189.92 x 231.44 (Comparisons 310 x 231.45) * <1280 197.11px -> 161.75 x 197.11 (Comparisons 263.98 x 197.11) * That lands ink at ~1.13x — near parity without the artwork reading * undersized, which an exact ink match (179 x 218) would have. * * HEIGHT IS THE CAP, WIDTH FOLLOWS THE ASPECT RATIO. The native portrait 0.82 * is preserved exactly; the 264px max-width never binds at these heights, so * nothing is cropped or distorted. The objective is shared visual height, NOT * equal ink percentages and NOT equal widths. * * Scoped to Buying Guides throughout — the frozen Comparisons rules and the * shared --fp-hero-illustration-zone-* tokens are NOT touched. Hero heights * are left to fall where copy length puts them; no padding is added to force * the two pages to equal height. */ .fp-collection__hero--buying-guides .fp-collection__hero-image { max-height: 197.11px; } @media (min-width: 1280px) { .fp-collection__hero--buying-guides .fp-collection__hero-image { max-height: 231.45px; } } /* Below 1280 the artwork is left at its shipped 208.44 x 254 = 52,944px², which is already at parity with the benchmark's 263.98 x 197.11 = 52,033px². No breakpoint-specific patch is needed or applied. */ @media (min-width: 768px) and (max-width: 1199.98px) { .fp-collection__hero--buying-guides .fp-collection__hero-col--identity, .fp-collection__hero--best-of .fp-collection__hero-col--identity { padding-bottom: var(--fp-space-xs); /* 24px -> 8px */ } } @media (max-width: 767.98px) { .fp-collection__hero--buying-guides .fp-collection__hero-col--identity, .fp-collection__hero--best-of .fp-collection__hero-col--identity { padding-bottom: var(--fp-space-xxs); /* 24px -> 4px */ } } @media (min-width: 768px) { .fp-collection__hero--buying-guides .fp-collection__hero-col--why, .fp-collection__hero--best-of .fp-collection__hero-col--why { padding-left: 0; } .fp-collection__hero--buying-guides .fp-collection__hero-col--method, .fp-collection__hero--best-of .fp-collection__hero-col--method { padding-right: 0; } } /* ── COLLECTION HERO ILLUSTRATION — READABILITY SIZING v1.0 ────────────── * * Approved 2026-08-26. The artwork was rendering at 219.6 x 231.4 with ~7.23px * internal row labels, which is below comfortable reading size. This block * raises the RENDERED SIZE ONLY. * * NOT CHANGED, DELIBERATELY: the SVG artwork, its composition, icons, labels, * checkmarks, colours, proportions, viewBox or stroke weights; the three-column * desktop architecture; the column count or order at any breakpoint; the site * gutter; the surrounding copy. * * 340px was determined empirically, not chosen. At 1440 the identity column's * content box is ~351px, so 360px and 380px were both measured OVERFLOWING it - * they stop being centred and 380px crosses the column divider. 348px is the * absolute maximum that stays centred, with 1.5px to spare. 340px gives * 11.20px row labels with 6.5 / 5.5px clearance, which is the usable optimum. * * `min(340px, 100%)` rather than a flat 340px: between 1200 and ~1240 the * three-column content box is fractionally under 340, and 100% clamps there * instead of overflowing. The artwork renders ~338.7px at 1200 and 340px above * ~1240. Nothing is cropped; the height cap is lifted so the native 0.9487 * aspect ratio always governs. * * SCOPED TO THE TWO LIVE COLLECTIONS. The shared --fp-hero-illustration-zone-* * tokens are NOT raised: a future collection still inherits the 264 x 254 zone * until its artwork has been reviewed at this scale. Do not globalise this * without that review. * * Supersedes, by source order and specificity: the shared zone caps, the * Comparisons 310px width at >=1280, and the Buying Guides 197.11 / 231.45px * height caps. Those rules are left in place as the record of what they were. */ .fp-collection__hero--buying-guides .fp-collection__hero-image, .fp-collection__hero--comparisons .fp-collection__hero-image, .fp-collection__hero--best-of .fp-collection__hero-image { max-width: min(340px, 100%); max-height: none; } /* MOBILE (<768). The identity column's 24px horizontal padding exists for the EYEBROW and HEADLINE, which need it. The illustration does not: the SVG carries 240 units of its own margin, ~8.8px of white space at this size. So the padding is bypassed for the image ALONE - the text keeps it and does not move - which recovers 48px and lifts the artwork from 187px to 335px, and the row labels from 6.16px to 11.03px. That is within 1.5% of the desktop figure: effective responsive parity. The 20px site gutter is RETAINED. Full-bleed (375px) and an 8px page edge (359px) were both measured and rejected - the extra readability did not justify losing the page's horizontal rhythm. Expressed against --fp-space-m so it tracks the padding it is cancelling. */ @media (max-width: 767.98px) { .fp-collection__hero--buying-guides .fp-collection__hero-image, .fp-collection__hero--comparisons .fp-collection__hero-image, .fp-collection__hero--best-of .fp-collection__hero-image { width: calc(100% + (var(--fp-space-m) * 2)); max-width: none; margin-inline: calc(var(--fp-space-m) * -1); } } /* ── RESOURCE CENTER HERO — COMPACT DESKTOP STANDARD "Candidate C" (approved 2026-09-17) ── * * Record: qa/best-of-complete-hero-freeze/FROZEN-best-of-complete-hero-v1.0.md, * amendment v1.4 — the canonical governance record. Lineage, measurements and * the rejected alternatives live there, not here. * * The final >=1200px Best Of hero, and the basis of the compact Resource Center * desktop hero standard. It keeps E3r's horizontal geometry — 350 / 500 / 350 * with 8px side and 16px centre inline padding, which is what lets all three * titles wrap naturally — and replaces E3r's vertical scale: hero 494.59px -> * 434.59px, with all three columns compacted rather than whitespace moved. * * What changed from E3r, and what did not: * artwork box 340px -> 280px side heading 36px -> 34px * side rhythm 32 / 48 / 48 -> 24 / 32 / 32 * H1 48 / 52.8, body 16 / 26.4 and eyebrow 13 / 16.25 were UNCHANGED * by that step. * H1 -> artwork 16px, block padding 16px, natural top alignment. * * SINCE, at >=1200px: the Best Of and Buying Guides H1 is the governed * category-heading standard, 48 / 700 / 52.8 / -1.44px, centred (rule further * down). It was 54 / 700 / 59.4 / -1.62px at v3.55.3-v3.55.4, which wrapped * Best Of to three lines and raised both heroes to 507.19 / 507.22px; that * size was reverted after actual-page QA. From 1280px the shared floor puts * both heroes at 434.6px again, and balanced tracks split the Buying Guides * surplus. (At 1200-1279px the tracks are fitted to the narrower card - see * the block after this one - and Buying Guides' side copy makes it 449.55px.) * The 16px H1 -> artwork relationship is unchanged. * * 280px is the APPROVED MINIMUM presentation size for this artwork, not a * preference: the illustration's smallest drawn text scales with its box — * 13px of ink at 340, 11px at 280 — and below 280 it falls under the 13px * caption token used elsewhere in the theme. Never render it smaller. The * canonical SVG FILE is untouched; only its box size changes. * * The side heading's line height is not declared: --fp-line-display is unitless * 1.10, so 34px recomputes to 37.4px on its own. * * ⚠ >=1200px ONLY. Tablet and mobile keep their existing presentation — the * shared 24px column padding, the 340px artwork, the 26px H1 gap and the * 8 / 16 / 16 rhythm — all untouched below. (Superseded for Buying Guides: it * joined this system on 2026-09-17 - see the selector note below. Comparisons * remains outside it.) As originally written: Buying Guides and Comparisons are * unchanged; migrating Buying Guides onto this compact system is a separate, * later task with its own copy and new illustration. * ──────────────────────────────────────────────────────────────────────────── */ @media (min-width: 1200px) { /* BOTH Resource Center landing pages share this system. Buying Guides joined it on 2026-09-17 with its own approved normalized artwork; Comparisons is a top-level page and is deliberately not included. */ .fp-collection__hero--best-of, .fp-collection__hero--buying-guides { grid-template-columns: 350px 500px 350px; /* 1200px container unchanged */ /* Cards 1 and 3 are a paired four-row subgrid: eyebrow, heading, paragraph 1, paragraph 2, each row as tall as the taller of the pair. Card 2 spans an extra flexible fifth row, so the H1 and the artwork never size the side copy. With both headings two lines the row slack that once needed an align-self workaround is gone: the headings align naturally, top and bottom. */ /* SHARED FLOOR + VERTICAL BALANCE - 2026-09-27. Was `auto auto auto auto 1fr`: the single flexible track sat AFTER the four copy zones, so surplus pooled below the last paragraph. A flexible track at each end splits it instead. The copy columns move to 2 / -2 so the four zones still land on the four auto tracks and the subgrid still aligns them across the pair. */ grid-template-rows: 0.5fr auto auto auto auto 0.5fr; --fp-hero-copy-gap-label: var(--fp-space-m); /* eyebrow -> heading, 24px */ --fp-hero-copy-gap-block: var(--fp-space-l); /* heading -> P1, P1 -> P2, 32px */ /* One step between --fp-font-h2 (36px) and --fp-font-h3 (28px). The heading's line-height stays the unitless --fp-line-display token, so 1.10 recomputes to 37.4px on its own - no second magic number. The wrap windows scale with the size, which is why 350 / 500 / 350 holds every approved heading and the two-line Best Of H1. */ --fp-hero-side-heading: 34px; } .fp-collection__hero--best-of .fp-collection__col-title, .fp-collection__hero--buying-guides .fp-collection__col-title { font-size: var(--fp-hero-side-heading); } /* Artwork box only - both canonical SVGs are untouched. 280px is the shared Resource Center presentation size and, for the Best Of artwork, its measured legibility floor; see the header note. */ .fp-collection__hero--best-of .fp-collection__hero-image, .fp-collection__hero--buying-guides .fp-collection__hero-image { max-width: min(280px, 100%); } /* Block padding 16px instead of the shared 24px, and the horizontal padding that makes the headings and the H1 wrap as approved: 8px on the side columns, 16px on the centre. The shared rules further up are untouched, so Comparisons and every width below 1200px keep 24px on all four sides. */ .fp-collection__hero--best-of .fp-collection__hero-col, .fp-collection__hero--buying-guides .fp-collection__hero-col { padding-top: var(--fp-space-s); padding-bottom: var(--fp-space-s); } .fp-collection__hero--best-of .fp-collection__hero-col--why, .fp-collection__hero--best-of .fp-collection__hero-col--method, .fp-collection__hero--buying-guides .fp-collection__hero-col--why, .fp-collection__hero--buying-guides .fp-collection__hero-col--method { padding-left: var(--fp-space-xs); padding-right: var(--fp-space-xs); } .fp-collection__hero--best-of .fp-collection__hero-col--identity, .fp-collection__hero--buying-guides .fp-collection__hero-col--identity { padding-left: var(--fp-space-s); padding-right: var(--fp-space-s); } /* 16px instead of the component's 26px. The H1 and the artwork still read as one identity unit, and on Best Of this is real height: its centre column sets the floor. */ .fp-collection__hero--best-of .fp-collection__headline, .fp-collection__hero--buying-guides .fp-collection__headline { margin-bottom: var(--fp-space-s); } /* GOVERNED HERO-HEADING STANDARD at >=1200: centred. Size, line height, tracking, colour and balanced wrapping come from the scoped rule after the base .fp-collection__headline (40 / 700 / 44 / -1.20px, #338E39), which applies at every width. (48 / 52.8 until v3.55.7.) */ .fp-collection__hero--best-of .fp-collection__headline, .fp-collection__hero--buying-guides .fp-collection__headline { text-align: center; } /* The identity column spans the flexible tracks; the copy columns sit on the four auto tracks between them, so their hairline separators still run the full height of the hero. */ .fp-collection__hero--best-of .fp-collection__hero-col--identity, .fp-collection__hero--buying-guides .fp-collection__hero-col--identity { grid-row: 1 / -1; } .fp-collection__hero--best-of .fp-collection__hero-col--why, .fp-collection__hero--best-of .fp-collection__hero-col--method, .fp-collection__hero--buying-guides .fp-collection__hero-col--why, .fp-collection__hero--buying-guides .fp-collection__hero-col--method { grid-row: 2 / -2; } /* SHARED DESKTOP FLOOR at the governed 40px (417px; was 434.6 at 48px). Derived from the components, not transcribed from a screenshot: the taller of the pair is Best Financial, whose identity column is block padding + a TWO-line 48px H1 + the H1's margin + the 280px artwork + block padding, plus the hero's own bottom hairline = 434.6px. Buying Guides' H1 is one line, so without the floor its hero would stop 52.8px short; the floor makes the height a property of the component, and the surplus splits between the two 0.5fr tracks - the artwork is never enlarged to fill it. Recompute if the heading size, Best Financial's line count or the artwork box change. (This replaces both the 54px three-line floor of v3.55.3-v3.55.4 and the older fixed `min-height: 434.6px`, which this calc now equals.) */ .fp-collection__hero--best-of, .fp-collection__hero--buying-guides { min-height: calc( var(--fp-collection-floor-pad, 7px) /* block padding top - Best Financial's, set at the end of file (v3.56.8; was --fp-space-s 16px) */ + (2 * var(--fp-hero-title-line)) /* two-line H1 (44px at 40px) */ + var(--fp-space-s) /* H1 margin-bottom */ + 280px /* artwork box */ + var(--fp-space-s) /* block padding bottom */ + 1px /* hero bottom hairline */ ); } .fp-collection__hero--best-of .fp-collection__eyebrow, .fp-collection__hero--buying-guides .fp-collection__eyebrow { margin-bottom: var(--fp-hero-copy-gap-label); } .fp-collection__hero--best-of .fp-collection__col-title + .fp-collection__intro, .fp-collection__hero--best-of .fp-collection__intro + .fp-collection__intro, .fp-collection__hero--buying-guides .fp-collection__col-title + .fp-collection__intro, .fp-collection__hero--buying-guides .fp-collection__intro + .fp-collection__intro { margin-top: var(--fp-hero-copy-gap-block); } } /* 1200-1279.98: THE SAME HERO, FITTED TO ITS CONTAINER - v3.55.6. Below 1280 .fp-collection__container keeps its 20px side padding, so the hero is 1160px wide (1158px inside its 1px border), but the fixed 350 / 500 / 350px tracks above still total 1200px. The grid overflowed its own card by 42px: the method column hung past the card's right border, and below 1240px it also pushed the page into up to 20px of horizontal scroll. Here the tracks keep the approved 7 : 10 : 7 proportion and divide the width the card actually has - about 338 / 483 / 338px at 1200. The centre column still holds the 280px artwork box and the two-line H1. Nothing at 1280 and up changes: there the container is the full 1200px and the fixed tracks above apply unchanged. */ @media (min-width: 1200px) and (max-width: 1279.98px) { .fp-collection__hero--best-of, .fp-collection__hero--buying-guides { grid-template-columns: minmax(0, 350fr) minmax(0, 500fr) minmax(0, 350fr); } } /* ── BEST OF ARTWORK — OPTICAL NORMALISATION ─────────────────────────────── The two illustrations carry very different amounts of internal transparent padding, so an identical 256x134 stage renders very different VISIBLE ink: measured at 1440, Bank Accounts 110x110 (12,100 px^2) against Checking 160x125 (20,000 px^2) - Checking 1.65x the area - while the Buying Guides family norm is 152x111 (16,872 px^2). ⚠ DISPLAY SCALING ONLY. Neither SVG is edited and no aspect ratio changes. transform does not affect layout, so the card geometry above is untouched. Measure VISIBLE INK, never the box, when tuning these values. */ .fp-collection-card--best-business-bank-accounts .fp-collection-card__image { transform: scale(1.181); } .fp-collection-card--best-business-checking-accounts .fp-collection-card__image { transform: scale(0.918); } /* v3.49.2: the third Best Of card joins the same normalisation. Measured at 1440 with every sibling hidden, its visible ink was 114x106 (12,084 px^2) against Bank Accounts 130x130 (16,900) and Checking 146x115 (16,790) - 28% smaller by area. scale(1.183) brings it to 136x124 (16,864 px^2), the family norm named above, and measures identically at 1440, 768 and 390. ⚠ v3.49.3: 1.183 was AREA parity, and area parity under-delivers here. This artwork is a compact 2x2 square (ink 1.08:1) where Bank Accounts is 0.99:1 and Checking 1.27:1, so at equal area it gives up width against Checking AND height against Bank Accounts - it reads smaller on both axes at once. Judged optically against the row at 1.183 / 1.220 / 1.240, the value is now 1.240: ink 142x130 (18,460 px^2), about 9% above the two, which is what it takes to carry the same visual weight. OPTICAL parity is the criterion here, not measured area. At 1.240 the image paints 317x166 inside a 384x362 card - no clipping, and it overflows only its own overflow:visible image-wrap, exactly as Bank Accounts already does at 1.181. Its canvas is the same 1200x896 as Bank Accounts. DISPLAY SCALING ONLY: the approved SVG is untouched and transform does not affect layout. */ .fp-collection-card--best-online-business-bank-accounts .fp-collection-card__image { transform: scale(1.240); } /* FROZEN 2026-09-20. How to Open a Business Bank Account. Measured in the real 256 x 134 stage: the 1200x896 hero contains to 179.46 x 134.00 with ink 137.59 x 86.74 = 11,935 px^2, 34.8% of the stage. The family norm named above is 16,864 px^2, so the mathematical normalization point is sqrt(16864/11935) = 1.1887. Four candidates - 1.150 / 1.189 / 1.220 / 1.250 - were rendered in the real card stage against the three frozen /best-of/ cards. scale(1.220) was SELECTED VISUALLY by the site owner on 2026-09-20 and is frozen: ink 167.9 x 105.8 = 17,766 px^2, +5.3% on the family norm, which the landscape composition needs to carry the same optical weight as the three near-square Best Of drawings. Scoped to this slug only; the frozen 1.181 / 0.918 / 1.240 are untouched. */ .fp-collection-card--how-to-open-a-business-bank-account .fp-collection-card__image { transform: scale(1.220); } /* ── PHONES < 480px: shared hero scale (v3.56.1) ─────────────── * The H1 steps to 30px through --fp-hero-title-size (base.css); the column * headings step below it to 24px so the H1 stays dominant; and the identity * column's inline padding drops 24 -> 16px so "Products & Services" (278px * at 30px) fits the Best Of title on two lines down to 360px (it had 272px). * Best Of and Buying Guides only - Comparisons is not in this hero system. */ @media (max-width: 479.98px) { .fp-collection__hero--best-of .fp-collection__col-title, .fp-collection__hero--buying-guides .fp-collection__col-title { font-size: var(--fp-hero-side-heading-phone); /* 24px */ } .fp-collection__hero--best-of .fp-collection__hero-col--identity, .fp-collection__hero--buying-guides .fp-collection__hero-col--identity { padding-left: var(--fp-space-s); /* 16px */ padding-right: var(--fp-space-s); } } /* ── HERO LABELS: HEIGHT HOLD (v3.56.4) ────────────────────────────────── * The eyebrows moved to the shared hero label scale (base.css * --fp-hero-label-*: 14px, 16px from 1280, centred). The rule for that * release: no collection hero may be taller than in v3.56.3 at any width * from 360 to 1440px. The 14px label is ~7% wider than the 13px one, and the * 16px label ~23%, so at some widths it would wrap once more. These rules * give it the room back instead of letting the hero grow. * ──────────────────────────────────────────────────────────────────────── */ /* Stacked (< 768): every copy column has 32px inline padding on both sides. The label may run 12px into each, so it keeps its v3.56.3 line count and stays centred, at least 20px from the column edge. */ @media (max-width: 767.98px) { .fp-collection__eyebrow { margin-inline: -12px; } } /* Two copy columns side by side (768-1199): each has no padding on its outer edge and 32px on the divider side. The label may run 20px towards the divider (12px clear of it) and 12px into the page gutter on the outer edge, where these heroes have no border. */ @media (min-width: 768px) and (max-width: 1199.98px) { .fp-collection__hero-col--why .fp-collection__eyebrow { margin-left: -12px; margin-right: -20px; } .fp-collection__hero-col--method .fp-collection__eyebrow { margin-left: -20px; margin-right: -12px; } } /* Best Financial and Buying Guides from 1280: the 350px side columns (8px padding) hold "Guides Built Around What Matters" and "From Research to Recommendation" on two 18px lines, 19.75px more than the one-line 13px label. The copy gaps in the same column give it back - label -> heading 24 -> 16px, heading -> P1 and P1 -> P2 32 -> 26px (20px) - so the hero is no taller than v3.56.3. Comparisons has row slack there and is unchanged. */ @media (min-width: 1280px) { .fp-collection__hero--best-of, .fp-collection__hero--buying-guides { --fp-hero-copy-gap-label: var(--fp-space-s); /* 24 -> 16px */ --fp-hero-copy-gap-block: 26px; /* 32 -> 26px */ } } /* ═══════════════════════════════════════════════════════════ HERO OFFSET (v3.56.8) - breadcrumb -> first meaningful hero content One visible gap site-wide: about 20px (2px tolerance) from the breadcrumb's baseline to the first heading glyph, card border or drawn artwork. Set per component and breakpoint because each hero starts with different content (a card, a heading, an icon) and carries different fixed leading. Only spacing ABOVE the first hero content changes; the spacing between hero elements, type, copy and artwork are untouched, and no page gets taller. Articles already sit at 19.6px and are the anchor. ═══════════════════════════════════════════════════════════ */ /* Below 1200 the hero opens with the H1 in the identity column (tiered or stacked, no divider at the top). Its top padding is the whole offset: 11px puts the H1 glyphs 18.6-20.8px below the breadcrumb baseline across the three heroes (their H1 leading differs by up to 2.2px). The side columns keep their own padding - that is spacing between hero elements. */ @media (max-width: 1199.98px) { .fp-collection__hero .fp-collection__hero-col--identity { padding-top: 11px; } } /* From 1200 the three columns sit side by side and open with the side eyebrows, and the column dividers run from the hero's top edge. The hero keeps 8px under the breadcrumb so the dividers stay clear of it (11.6px below its baseline), and every column's top padding becomes 7px: eyebrow glyphs 21.8px below the baseline - the top of the tolerance, chosen to keep the dividers clear. */ @media (min-width: 1200px) { .fp-collection { padding-top: 8px; } .fp-collection__hero--comparisons .fp-collection__hero-col, .fp-collection__hero--best-of .fp-collection__hero-col, .fp-collection__hero--buying-guides .fp-collection__hero-col { padding-top: 7px; } } /* ═══════════════════════════════════════════════════════════ BREADCRUMB -> FIRST TEXT (v3.56.8, text-first hero family) Measured from the bottom of the breadcrumb's visible letters to the top of the first hero text line's visible letters - not line boxes. Every text-first hero (Categories, Resources, the three collections, All Providers) matches the family's shortest existing gap: 15.8px below 480px, 17.1px from 480. A breadcrumb with no descending letters (g p y) reads 2.7px further away, so those pages take a larger reduction. ═══════════════════════════════════════════════════════════ */ /* Below 1200 the identity column's top padding (11px above) is the whole offset; Buying Guides already sits at the target. */ @media (max-width: 1199.98px) { .fp-collection__hero--best-of .fp-collection__hero-col--identity { padding-top: 8.34px; } .fp-collection__hero--comparisons .fp-collection__hero-col--identity { padding-top: 9.98px; } } @media (max-width: 479.98px) { .fp-collection__hero--comparisons .fp-collection__hero-col--identity { padding-top: 8.66px; } } /* From 1200 only the columns' top padding changes: the hero keeps its 8px under the breadcrumb, so the column dividers stay exactly where they were. The eyebrows grow to 16px at 1280, hence two steps. The shared Best Financial / Buying Guides floor follows Best Financial's padding, so the pair stays one height. */ @media (min-width: 1200px) { .fp-collection__hero--comparisons .fp-collection__hero-col { padding-top: 5.02px; } .fp-collection__hero--buying-guides .fp-collection__hero-col { padding-top: 5.17px; } .fp-collection__hero--best-of .fp-collection__hero-col { padding-top: 2.52px; } .fp-collection__hero--best-of, .fp-collection__hero--buying-guides { --fp-collection-floor-pad: 2.52px; } } @media (min-width: 1200px) and (max-width: 1279.98px) { .fp-collection__hero--comparisons .fp-collection__hero-col { padding-top: 5.54px; } .fp-collection__hero--buying-guides .fp-collection__hero-col { padding-top: 5.69px; } .fp-collection__hero--best-of .fp-collection__hero-col { padding-top: 3.04px; } .fp-collection__hero--best-of, .fp-collection__hero--buying-guides { --fp-collection-floor-pad: 3.04px; } } /* ═══════════════════════════════════════════════════════════ RESOURCES BREATHING ROOM (v3.56.9; 32px from v3.56.10) The four Resources pages (/resources/ and its three collections) sit 32px from the bottom of the breadcrumb's last line of letters to the top of the first hero text line's letters, at every width - more open than the 15.8 / 17.1px text-first standard the other heroes keep. Only the space ABOVE each hero grows, so the whole hero moves as one block and its internal spacing is unchanged; navigation -> breadcrumb is untouched. ═══════════════════════════════════════════════════════════ */ /* The collection wrapper's own top padding holds the extra space, so the hero - dividers included from 1200 - moves as one block. */ @media (max-width: 479.98px) { .fp-collection { padding-top: 16.25px; } } @media (min-width: 480px) and (max-width: 1199.98px) { .fp-collection { padding-top: 14.93px; } } @media (min-width: 1200px) { .fp-collection { padding-top: 22.85px; } /* 8 + 14.85 */ } /* 360-379: Best Financial and Buying Guides set their H1 one step smaller there, which reads 0.47px wider; their identity column takes it back. */ @media (max-width: 379.98px) { .fp-collection__hero--buying-guides .fp-collection__hero-col--identity { padding-top: 11.47px; } .fp-collection__hero--best-of .fp-collection__hero-col--identity { padding-top: 8.81px; } } /* ═══════════════════════════════════════════════════════════ CARD GRID BELOW 1280 (v3.56.11) Below 1280 the grid was one column of cards capped at 384px, which left the right half of the listing empty on tablets. A card needs 304px - the 256px artwork stage plus its 24px padding each side - so: below 680 one full-width column 680 - 1023 two columns (tracks 312px and up) 1024 - 1279 three columns (tracks 317.3px at 1024 - two would stretch cards to 484-607px) 1280 and up unchanged (three 384px / Comparisons four 282px) Below 1280 the card fills its track (the 384px cap is the desktop track and stays from 1280). Card interior, artwork, type and the 16px gutter are unchanged. ═══════════════════════════════════════════════════════════ */ @media (max-width: 1279.98px) { .fp-collection-card { max-width: none; } } @media (min-width: 680px) and (max-width: 1023.98px) { .fp-collection__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) and (max-width: 1279.98px) { .fp-collection__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ═══════════════════════════════════════════════════════════ COMPARISONS HERO (v3.57.118) template-parts/comparisons-hero.php, the All Providers hero (providers-hero.css) with the supplied artwork in the centre. Only the artwork's size is set here: 320 CSS px wide at every width that allows it (aspect ratio kept from the 1376 x 1143 source; the drawn frame inside the image is then about 277px, near the Providers score card's 263px), never wider than its column. ═══════════════════════════════════════════════════════════ */ .fp-aph--comparisons .fp-aph__art { display: block; width: 320px; max-width: 100%; height: auto; } /* SIDE-COLUMN ROWS (owner amendment SIDE-COLUMN-ALIGNMENT-AMENDMENT.md, e1818b3). Wherever the two side columns sit side by side (768-1199 under the H1 tier; >= 1200 either side of the centre column) they share three grid rows through subgrid: eyebrow, heading, paragraph. A one-line heading beside a two-line one keeps its paragraph on the same line as its neighbour's; no padding, no type change. The Providers hero's own margins, padding and dividers are untouched. Below 768 the columns stack and keep their natural flow (no reserved space). */ @media (min-width: 768px) and (max-width: 1199.98px) { .fp-aph--comparisons .fp-aph__trio { grid-template-rows: auto auto auto auto; } .fp-aph--comparisons .fp-aph__col--left, .fp-aph--comparisons .fp-aph__col--right { grid-row: 2 / 5; display: grid; grid-template-rows: subgrid; } } @media (min-width: 1200px) { .fp-aph--comparisons .fp-aph__trio { grid-template-rows: 0.5fr auto auto auto 0.5fr; } .fp-aph--comparisons .fp-aph__col--left, .fp-aph--comparisons .fp-aph__col--right { grid-row: 2 / 5; display: grid; grid-template-rows: subgrid; align-self: stretch; } } /* The frozen four-card grid (>= 1280, above) keyed on the old hero's modifier, which no longer renders on Comparisons. The same values, keyed on the new hero. */ @media (min-width: 1280px) { .fp-collection:has(.fp-aph--comparisons) .fp-collection__grid { grid-template-columns: repeat(4, 1fr); gap: var(--fp-gutter-desktop); } .fp-collection:has(.fp-aph--comparisons) .fp-collection-card { max-width: none; height: 100%; padding: 20px; } .fp-collection:has(.fp-aph--comparisons) .fp-collection-card__pill.fp-resource-card__badge { margin-bottom: 16px; } .fp-collection:has(.fp-aph--comparisons) .fp-collection-card__image-wrap { max-width: 210px; height: 131px; margin: 0 auto 16px; } .fp-collection:has(.fp-aph--comparisons) .fp-collection-card__title { font-size: 18px; max-width: 224px; } .fp-collection:has(.fp-aph--comparisons) .fp-collection-card__footer { margin-top: auto; padding-top: 20px; gap: 28px; } } /* ═══════════════════════════════════════════════════════════ COMPARISONS BY CATEGORY (v3.57.119, NEXT-THEME-HEADING-AND-BADGE-BRIEF.md) The Comparisons listing heading takes the Providers by Category values (providers-index.css .fp-pi__title): 28 / 32 (>= 768) / 36px (>= 1024), 700, 1.20, -0.02em, Navy #173F73, "Category" Green Dark #338E39. The 32px gap under the hero and the 20px heading -> cards gap are unchanged; the cards are untouched. Scoped to the Comparisons hero's page. ═══════════════════════════════════════════════════════════ */ .fp-collection:has(.fp-aph--comparisons) .fp-collection__heading { font-size: 28px; font-weight: 700; line-height: 1.20; letter-spacing: -0.02em; color: #173F73; } .fp-collection__heading-accent { color: #338E39; } @media (min-width: 768px) { .fp-collection:has(.fp-aph--comparisons) .fp-collection__heading { font-size: 32px; } } @media (min-width: 1024px) { .fp-collection:has(.fp-aph--comparisons) .fp-collection__heading { font-size: 36px; } } /* v3.57.122 - comparison artwork in comparison article cards at 80% of its displayed size, centred in the unchanged image area (CLAUDE-OUTLINE-AND-CARD-SCALE-AMENDMENT.md). Scoped to the shared comparison card illustration only; frame, image-area height, badge, title, text and CTA are unchanged (transform does not affect layout). The comparison hero is not a card and is not scaled. */ .fp-collection-card__image[src*="business.banking.comparison.card.v11.svg"] { transform: scale(0.8); transform-origin: center center; } /* v3.57.128 - Best Of collection cards: the date and Read Article -> footer is anchored to the bottom of each card (the established Comparisons pattern above: margin-top auto + guaranteed padding), so it aligns across the equal-height cards in every multi-column row whatever each title's line count (Work staging QA 9989c26: Checking's footer sat 26.39px higher, a 51.39px bottom inset against 25px). The 24px padding replaces the base 24px margin, so the tallest card - and therefore the row, every stacked phone card and all title, date, link, image and type values - is unchanged. Best Of only; Buying Guides and Comparisons are untouched. */ .fp-collection:has(.fp-collection__hero--best-of) .fp-collection-card__footer { margin-top: auto; /* anchor to the card bottom */ padding-top: var(--fp-space-m); /* 24px - the unchanged title -> footer minimum */ } /* v3.57.145 (P21, owner instruction 2026-10-28): this text action keeps Core Blue in every interactive state. GeneratePress's inline `a:hover, a:focus, a:active { color: var(--contrast) }` (#222222, (0,1,1), loaded after this file) won these states. Colour only - size, weight, underline, focus ring and destination unchanged. */ a.fp-collection-card__cta:hover, a.fp-collection-card__cta:focus, a.fp-collection-card__cta:focus-visible, a.fp-collection-card__cta:active { color: var(--fp-color-blue); } /* Comparisons collection only: narrow-track containment and aligned metadata. */ .fp-collection:has(.fp-aph--comparisons) .fp-collection-card { min-width: 0; } .fp-collection:has(.fp-aph--comparisons) .fp-collection-card__footer { flex-wrap: wrap; row-gap: 12px; } @media (max-width: 1279.98px) { .fp-collection:has(.fp-aph--comparisons) .fp-collection-card__footer { margin-top: auto; padding-top: 24px; } } @media (max-width: 359.98px) { .fp-collection:has(.fp-aph--comparisons) .fp-collection-card__footer { column-gap: 24px; } }