/* ═══════════════════════════════════════════════════════════ * FP-C-005 — RESOURCE CENTER * ═══════════════════════════════════════════════════════════ * Build: Initial production build (theme v3.11.13) * Component version is recorded in docs/component-manifest.md * and the FinanceProspector Bible, not here. * Spec: Approved Resource Center reference screenshot * + Design System Manual v2.4 * Status: APPROVED / FROZEN — Variant B scale, theme v3.34.0 * ─────────────────────────────────────────────────────────── * * CONTAINER + GRID — inherits the shared homepage card system * established by FP-C-003 / FP-C-004 (v2.3 §35.5), so all three * card sections share one horizontal grid language: * max-width 1500px, centred * gutters 20px / 24px (>=640) / 32px (>=1440) * gaps 16px / 20px (>=640) / 24px (>=1024) * card padding 10px / 12px (>=640) / 14px (>=1440) * * RESPONSIVE ARRANGEMENT: * Mobile (<640px): 1 column * Tablet (640-1279): 2 x 2 * Desktop (>=1280): 4 across, fluid columns * Large (>=1440): 4 across at a fixed 293px, row left-aligned * * The 1280px four-across breakpoint is FP-C-005 specific and intentional * (approved). * * ILLUSTRATION SIZING — the key measurement in this component. * * SUPERSEDED AT v3.34.0. The previous model is described below for history * only and no longer governs anything in this file. * * HISTORIC: the original four SVGs each carried a backdrop circle spanning * the full viewBox width, so one shared CSS width made all four circles * identical. Later artwork dropped the circle and was viewBox-cropped to the * drawing, so the files no longer shared a common measure and each was sized * individually with an equal-AREA :nth-child() width capped at 176px tall. * That rule was tuned to those specific files. * * CURRENT: the four cards render the approved Palette v1.1 replacement * masters (native aspect 1.34 / 1.34 / 0.81 / 1.00). Per-file widths are * gone. Every card shares ONE 4:3 stage and the artwork is fitted with * object-fit: contain, which preserves each master's native aspect ratio * exactly and needs no knowledge of what is inside the file. Card ORDER is * therefore no longer load-bearing for illustration sizing. * * A shared stage is not a promise of identical rendered size: the portrait * Banking Fees master fills the stage height and renders narrower, and the * square Business Insurance master renders exactly 1:1. See the stage block * further down for the two sizes and why 1440 differs. * ═══════════════════════════════════════════════════════════ */ /* ── Section ───────────────────────────────────────────── */ .fp-resource-center { /* Standard homepage section spacing. Top is the "top half" of the gap from the preceding section; bottom is the half contributed to the next. See --fp-section-gap-* in base.css. */ padding-left: 0; padding-right: 0; background-color: var(--fp-color-white); /* ⚠ THE GOVERNED MAJOR-SECTION GAP (v3.54.2). The rendered distance to the adjacent section is this padding-bottom PLUS the next section's padding-top, and both halves live inside a white section box — which is why this stays a padding and did NOT become a margin. The homepage's page ground is #F7F8F9, not white; expressing the gap as a margin paints a grey band in every seam. Business Banking can use margins because its container is white. Same number, different mechanism, identical pixels. padding-top is a flat 32px at every width, so the arithmetic is simply --fp-section-gap - 32: 80 - 32 = 48 from 640 up, 64 - 32 = 32 below it. The former homepage values were 48 / 64 / 96; Business Banking is now the canonical reference and these match it exactly. ⚠ Do not re-add a breakpoint override — the token already carries the breakpoint. */ padding-top: var(--fp-space-l); padding-bottom: calc(var(--fp-section-gap) - var(--fp-space-l)); } .fp-resource-center__container { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 var(--fp-margin-mobile); /* 20px */ box-sizing: border-box; } /* ── Section heading ───────────────────────────────────── */ .fp-resource-center__header { width: 100%; } .fp-resource-center__heading { margin: 0 0 var(--fp-space-xs); font-size: 28px; /* Mobile Heading L */ font-weight: var(--fp-weight-heading); line-height: var(--fp-line-heading); /* -0.02em, matching the FP-C-003 and FP-C-004 section headings. This declaration was missing, so the heading rendered at 0 tracking while the other two section headings used the design-system value. */ letter-spacing: var(--fp-tracking-heading); color: var(--fp-color-navy); } /* v3.57.141 (owner, 2026-10-27): homepage "Finance Resource Center" - "Finance" takes the Editor's Picks accent (editors-picks.css, --fp-color-hero-heading #338E39, palette v1.1 Green Dark). Colour only; size, weight, line-height and tracking are inherited from the heading. */ .fp-resource-center__heading .fp-heading-accent { color: var(--fp-color-hero-heading); } .fp-resource-center__subtitle { margin: 0; font-size: var(--fp-font-body-m); font-weight: var(--fp-weight-body); line-height: var(--fp-line-body); color: var(--fp-color-gray-500); } /* ── Card grid ─────────────────────────────────────────── */ .fp-resource-center__grid { display: grid; box-sizing: border-box; margin: var(--fp-space-m) 0 0; /* Heading -> Content 24px */ padding: 0; list-style: none; /* Mobile: one column */ grid-template-columns: 1fr; gap: var(--fp-gutter-mobile); /* 16px */ /* FIVE SHARED ZONES per card: badge, illustration, title, supporting copy, metadata row. Declaring them here and adopting them in each card with `grid-template-rows: subgrid` is what makes the four cards agree vertically: a two-line title widens the title zone for the whole row rather than pushing that one card's description down. Row count is zones x rows-of-cards, so it changes with the column count. */ grid-template-rows: repeat(20, auto); /* 1 column x 4 cards */ } /* ── Explicit row count follows the CARD count (v3.54.2) ────────────── ⚠ THE LITERAL ABOVE IS A FALLBACK, NOT THE GOVERNING VALUE. Five zones per card means the parent's explicit row count is zones x rows-of-cards, so it changes whenever the card SET changes - and a literal cannot. A grid keeps every explicit track it is given and paints row-gap between all of them, empty ones included, so a stale count becomes dead space at the bottom of the section: measured on staging v3.54.1 as 120px (1440), 200px (1024/768) and 240px (390) on /business-banking/. template-parts/resource-cards.php emits --count-N from the records it is actually rendering. Rows are zones(5) x ceil(N / columns-at-this-breakpoint), which is arithmetic, not a new spacing value: NOTHING here changes a gap, a margin, a padding or a card. It only stops the grid reserving rows for cards that are not there. 1-8 covers every surface that shares this markup; an unlisted count simply keeps the fallback above. */ .fp-resource-center__grid--count-1 { grid-template-rows: repeat(5, auto); } .fp-resource-center__grid--count-2 { grid-template-rows: repeat(10, auto); } .fp-resource-center__grid--count-3 { grid-template-rows: repeat(15, auto); } .fp-resource-center__grid--count-4 { grid-template-rows: repeat(20, auto); } .fp-resource-center__grid--count-5 { grid-template-rows: repeat(25, auto); } .fp-resource-center__grid--count-6 { grid-template-rows: repeat(30, auto); } .fp-resource-center__grid--count-7 { grid-template-rows: repeat(35, auto); } .fp-resource-center__grid--count-8 { grid-template-rows: repeat(40, auto); } /* ── Card ──────────────────────────────────────────────── */ .fp-resource-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; /* A subgrid inherits its parent's gutters, so the grid's 24px row gap was being applied FOUR times inside every card - 96px of invisible padding. The zone spacing is carried by each element's own margin, which is already tuned per boundary (12 / 12 / 8 / 16), so the inherited row gap is zeroed rather than replaced with one uniform value. */ row-gap: 0; box-sizing: border-box; min-width: 0; padding: 10px; /* shared card padding, mobile */ background-color: var(--fp-color-white); border: 1px solid var(--fp-color-gray-200); border-radius: var(--fp-radius-card); box-shadow: var(--fp-shadow-card-level-1); } /* ── Article-type badge ──────────────────────────────────── * Pill outline + label in the approved accessible token for each * type. No new colours are introduced: every value below already * exists in base.css. The fill stays white so the pill relies on * the token for contrast, exactly as in the approved reference. * ──────────────────────────────────────────────────────── */ .fp-resource-card__badge { justify-self: start; /* grid axis, not flex */ align-self: start; margin: 0 0 12px; padding: 4px 10px; font-size: 11px; font-weight: var(--fp-weight-label); /* 600 */ letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; background-color: var(--fp-color-white); border: 1px solid currentColor; border-radius: 999px; /* --radius-pill */ } /* RESOURCE CENTER BADGE COLOUR SYSTEM v1.0 — see base.css for the full rule. * * Colour encodes the CONTENT TYPE, not the article's financial category, and a * mapping is permanent site-wide once assigned. The pool is closed to the seven * approved category colour families; these tokens alias them and introduce no * new hex values. * * RENDERED VALUES ARE UNCHANGED from v3.33.0 — all three badges already used the * exact approved category hexes. Only the token they are sourced through changed, * so the system is explicit in code rather than incidental: GUIDE previously read * --fp-color-score-text (the editorial-score token, which merely happened to be * the same green) and COMPARISON read --fp-color-blue (the global link token). * Both now name the badge system directly. * * One token drives text and border, since the border is currentColor. */ /* GUIDE Green #15803D 5.02:1 on white — AA pass */ .fp-resource-card__badge--guide { color: var(--fp-badge-guide); } /* COMPARISON Blue #2563EB 5.17:1 on white — AA pass */ .fp-resource-card__badge--comparison { color: var(--fp-badge-comparison); } /* PRICING Purple #7C3AED 5.70:1 on white — AA pass */ .fp-resource-card__badge--pricing { color: var(--fp-badge-pricing); } /* BEST OF Blue #2563EB 5.17:1 on white — AA pass (v3.57.119; same pill geometry, text and border) */ .fp-resource-card__badge--best-of { color: var(--fp-badge-best-of); } /* -- Illustration zone ----------------------------------- * The four production SVGs are circle-free and viewBox-cropped to their * artwork, so the rendered image IS the artwork: no decorative backdrop * and no empty canvas padding the box. * * Their aspect ratios differ substantially (0.741 to 1.367), so one shared * width would make them look very unequal. They are normalised by EQUAL * AREA (geometric mean) -- the standard optical-weight measure for * mixed-aspect line art: width = 200 * sqrt(w / h) of the cropped viewBox. * Bounding boxes are deliberately NOT equalised. * * CARD 1 IS NOW THE BENCHMARK, not the legacy artwork. Its companion * illustration is landscape and renders ~148px tall; the three legacy * illustrations are portrait or near-square and were rendering 171-232px tall, * which is what forced a 242px image zone and made the whole card oversized. * * Equal AREA alone cannot fix that: a 0.74-aspect asset at Card 1's visible * area is inherently ~227px tall. So the rule is equal area SUBJECT TO a * height cap of 176px, and the zone follows at 186px. Cards 1 and 2 are * unaffected -- they were already inside the cap. Cards 3 and 4 clamp, and * therefore read optically lighter than Card 1; that is the honest consequence * of holding portrait legacy artwork to a landscape benchmark, and it is * exactly why the FP-C-005 artwork rule now specifies the target scale for * future assets. No artwork is stretched: each keeps its own aspect. * * Card interiors measure 292 / 264 / 450 / 324 / 313px at 1440 / 1280 / 1024 / * 768 / 375, so every render below fits at every breakpoint. * * CARD 1 renders the article's own small-format companion asset (from * inc/article-data.php) rather than a Resource-Center-only illustration. * * WHY IT LOOKED WRONG AT 200px AND AT 250px. The equal-area rule assumes the * viewBox IS the artwork, which holds for the other three: measured occupancy * 94.7 / 94.7 / 95.3%. The companion exported from Recraft at 70% occupancy -- * 7.3% empty canvas left and right, 7.3% top, 10.6% bottom -- so its CSS width * overstated the visible illustration by a third and no increase to the number * could close the gap. The asset has since been canvas-normalised to 95.3% * occupancy (viewBox only; paths, fills and geometry untouched), so the rule * applies to it on the same terms as its neighbours: * 200 * sqrt(1.8371) = 271px -> 271 x 148, ~266 x 143 of visible artwork, * a visible area of ~38,100 against 37,900 / 37,900 / 38,120 for cards 2-4. * That is optical parity, not equal width. * * THE ONE RESPONSIVE CONCESSION, stated rather than hidden. 271px needs the * 292px interior that 1440 provides. At 1280 the interior is 264px, so a flat * 271px would overflow by 7px. The width is therefore capped: min(271px, 96%). * 1440 -> 271px, the full optical-parity size, unchanged; * ~1400 and below -> 96% of the interior, so it tracks the card down; * 1280 -> 253px, about 9% optically light against its neighbours, which * still have 31-92px of their own slack at that width. * This is one declaration, not a new breakpoint: FP-C-005's own 640 and 1280 * steps are untouched, and the 1440 treatment is never compromised to serve a * narrower one. Card 1 cannot overflow or collide at any width. * * NOTHING ELSE about the card changed -- box, slot, padding, spacing, type, * CTA and the other three cards are untouched. * -------------------------------------------------------- */ /* NORMALISED ILLUSTRATION STAGE (v3.34.0) — supersedes the per-file widths. * * The four cards now render the approved Palette v1.1 replacement masters, * whose native aspect ratios are 1.34 / 1.34 / 0.81 / 1.00. The previous * approach sized each file individually with :nth-child() equal-area widths, * which was tuned to the OLD artwork and is meaningless against the new set — * so it is removed rather than retuned. Card ORDER is consequently no longer * load-bearing for illustration sizing. * * In its place every card shares ONE 4:3 stage and the image is fitted into it * with object-fit: contain. That preserves each master's native aspect ratio * exactly — no stretching, no cropping, no viewBox or geometry edit — while * giving the four illustrations comparable optical presence on one baseline. * A common stage is NOT a promise of identical rendered dimensions: the * portrait Banking Fees master fills the stage HEIGHT and therefore renders * narrower, and the square Business Insurance master renders exactly 1:1. * That is correct behaviour, not a defect. * * width:100% + max-width is used rather than a fixed width so the stage can * never exceed a narrow card's interior at any breakpoint. * * BELOW 1440 THE STAGE IS DELIBERATELY UNCHANGED at 248x186 — that keeps the * 186px image zone, and therefore the whole card height, exactly as it shipped * in v3.33.0 at every tablet/mobile/standard-desktop tier. Only the fitting * METHOD changes there, because the new artwork requires it. The approved * Variant B reduction applies at 1440 and up, which is the width it was * reviewed and approved at. */ .fp-resource-card__image-wrap { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 248px; /* 4:3 stage, unchanged scale below 1440 */ height: 186px; margin: 0 auto 12px; /* centred in the card interior */ } .fp-resource-card__image { display: block; width: 100%; height: 100%; object-fit: contain; /* native aspect ratio preserved */ } /* ── Title, description ────────────────────────────────── */ .fp-resource-card__title { margin: 0 0 var(--fp-space-xs); font-size: var(--fp-font-label); /* 16px */ font-weight: var(--fp-weight-label); /* 600 */ line-height: var(--fp-line-heading); color: var(--fp-color-navy); } .fp-resource-card__description { margin: 0 0 var(--fp-space-s); font-size: var(--fp-font-body-s); /* 14px */ font-weight: var(--fp-weight-body); line-height: var(--fp-line-body); color: var(--fp-color-gray-500); } /* ── Footer: updated date + CTA ────────────────────────── */ /* ONE CENTRED GROUP, not an edge-to-edge row. space-between pinned the date to one card edge and the CTA to the other, which read as a stretched footer rather than a single metadata line - the same problem the Buying Guides collection card solved, and this follows that precedent while keeping FP-C-005's own typography. The CTA labels differ in length by design, so the groups are centred INDEPENDENTLY per card; their start positions do not, and should not, line up across the row. */ .fp-resource-card__footer { display: flex; align-items: baseline; /* date and CTA share one baseline */ justify-content: center; gap: 40px; /* the pair's internal spacing */ align-self: end; /* zone 5 owns the position now */ } .fp-resource-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; } /* Homepage CTA standard (v2.3 §35.4): 14px / 500, blue, with the shared 4px text-to-arrow gap. TEXT LINK, not a box. The four 144x44 buttons were the section's heaviest element and carried the least information; the label is now contextual ("Read Guide", "Read Comparison") and comes from inc/resource-data.php. Dropping the fp-cta classes from the markup is what lets these declarations apply again — they were always here, just outranked by a.fp-cta at (0,1,1). The universal box CTA itself is untouched and still governs every other surface. Superseded note follows: */ /* NOTE: this element is now a boxed CTA. Its display, geometry, colour and typography come from a.fp-cta (Bible ch. 54.1), whose selector is (0,1,1) and therefore outranks the (0,1,0) declarations below even though this stylesheet loads after base.css. The declarations are retained only for non-CTA fallback; do not rely on them for CTA appearance. */ .fp-resource-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; } /* Bible ch. 54.9 — text and navigation links underline on hover; box CTAs change surface. This is a text link again, so the underline returns. */ .fp-resource-card__cta:hover { text-decoration: underline; } .fp-resource-card__cta:focus-visible { outline: var(--fp-focus-ring-width) solid var(--fp-focus-ring-color); outline-offset: var(--fp-focus-ring-offset); /* border-radius removed — focus must not reshape the box (B3) */ } /* Shared homepage arrow gap. No whitespace before this span in the template, so there is no break opportunity and the arrow can never orphan onto its own line. */ .fp-resource-card__cta .fp-cta-arrow { margin-left: var(--fp-cta-arrow-gap); /* 4px */ } /* ═══════════════════════════════════════════════════════════ TABLET — 640px and up: 2 x 2 ═══════════════════════════════════════════════════════════ */ @media (min-width: 640px) { .fp-resource-center__container { padding: 0 var(--fp-margin-tablet); /* 24px */ } .fp-resource-center__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(10, auto); /* 2 columns x 2 card rows */ gap: var(--fp-gutter-tablet); /* 20px */ } /* Rows follow the card count — see the base rule. 2 columns here. */ .fp-resource-center__grid--count-1 { grid-template-rows: repeat(5, auto); } .fp-resource-center__grid--count-2 { grid-template-rows: repeat(5, auto); } .fp-resource-center__grid--count-3 { grid-template-rows: repeat(10, auto); } .fp-resource-center__grid--count-4 { grid-template-rows: repeat(10, auto); } .fp-resource-center__grid--count-5 { grid-template-rows: repeat(15, auto); } .fp-resource-center__grid--count-6 { grid-template-rows: repeat(15, auto); } .fp-resource-center__grid--count-7 { grid-template-rows: repeat(20, auto); } .fp-resource-center__grid--count-8 { grid-template-rows: repeat(20, auto); } .fp-resource-card { padding: 12px; } .fp-resource-center__heading { font-size: 32px; /* Tablet Heading L */ } } /* ═══════════════════════════════════════════════════════════ STANDARD DESKTOP — 1024px and up Columns stay at 2; gap rises to the desktop gutter, matching FP-C-003 / FP-C-004. ═══════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { .fp-resource-center__grid { gap: var(--fp-gutter-desktop); /* 24px */ } .fp-resource-center__heading { font-size: var(--fp-font-h2); /* 36px Desktop Heading L */ } } /* ═══════════════════════════════════════════════════════════ DESKTOP — 1280px and up: 4 across ─────────────────────────────────────────────────────────── FP-C-005 component-specific breakpoint. At two columns the card reached ~490px — roughly 5x the illustration width, against ~3.3x at Large Desktop — so the four-card row starts earlier than the shared homepage system's 1440px. It starts at 1280px rather than 1024px because the card footer is unwrappable: "Updated July 2026" (120px) + 16px gap + "Read Article →" (100px) needs 236px, and a four-column grid at 1024px leaves only 200px of card content width. 1280px is the first width where the row fits, with 266px available. Solving it at 1024px would have required altering the approved footer, typography or content, none of which is permitted. ═══════════════════════════════════════════════════════════ */ @media (min-width: 1280px) { .fp-resource-center__grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, auto); /* 4 columns x 1 card row */ } /* Rows follow the card count — see the base rule. 4 columns here. */ .fp-resource-center__grid--count-1 { grid-template-rows: repeat(5, auto); } .fp-resource-center__grid--count-2 { grid-template-rows: repeat(5, auto); } .fp-resource-center__grid--count-3 { grid-template-rows: repeat(5, auto); } .fp-resource-center__grid--count-4 { grid-template-rows: repeat(5, auto); } .fp-resource-center__grid--count-5 { grid-template-rows: repeat(10, auto); } .fp-resource-center__grid--count-6 { grid-template-rows: repeat(10, auto); } .fp-resource-center__grid--count-7 { grid-template-rows: repeat(10, auto); } .fp-resource-center__grid--count-8 { grid-template-rows: repeat(10, auto); } } /* ═══════════════════════════════════════════════════════════ LARGE DESKTOP — 1440px and up ═══════════════════════════════════════════════════════════ */ @media (min-width: 1440px) { .fp-resource-center__container { padding: 0 var(--fp-margin-desktop); /* 32px */ } /* APPROVED RESOURCE CENTER SCALE — Variant B, frozen v3.34.0. * * The section is supporting editorial content sitting beneath Explore by * Category and Editor's Picks. At the previous 326px the cards were the * heaviest block on that stretch of page and read as a peer of those two * sections rather than support beneath them. Variant B removes ~10% of * card width and 38px of section height (585.14 -> 547.14) and restores * the intended hierarchy. * * THE ROW NO LONGER FILLS THE GRID, AND THAT IS THE APPROVED BEHAVIOUR. * At 1440 the shared homepage grid is 1376px wide, which four cards fill * only at 326px + 24px gaps. Any narrower card leaves the row short. The * approved resolution is to LEFT-ALIGN the row to the same 32px content * axis every other homepage section uses, so the section heading, the * subtitle and card 1 share one left edge, and to accept the resulting * 132px of whitespace on the right. The gaps are deliberately NOT widened * to fill the grid, and the row is deliberately NOT centred — centring * detaches the cards from their own heading. * * card 293 x 349.56 row 1244px, spanning 32 -> 1276 * stage 213 x 160 gap 24px padding 14px * section 547.14px * * Scoped to 1440 and up on purpose: a fixed 1244px row cannot fit the * narrower container below this breakpoint (it needs ~1292px of viewport), * so the four-across 1280 tier keeps its fluid columns. */ .fp-resource-center__grid { grid-template-columns: repeat(4, 293px); justify-content: start; /* 32px content axis */ } .fp-resource-card { padding: 14px; } .fp-resource-card__badge { margin-bottom: 10px; } .fp-resource-card__image-wrap { max-width: 213px; /* 4:3 stage at the approved scale */ height: 160px; margin-bottom: 10px; } .fp-resource-card__title { margin-bottom: 7px; } .fp-resource-card__description { margin-bottom: 13px; } } /* ── Action area — Bible ch. 54.6 ───────────────────────── * Metadata and CTA share ONE row. The column variant was tried * first and cost +59px of card height at every breakpoint — * disproportionate for a content-heavy card next to Explore's * +30px. The row brings it back to +30px, which is the CTA * itself and the irreducible minimum. * * The 8px gap and min-width: 0 are what make the row fit. At a * 16px gap the content needed 280px against 266px usable at * 1280 and 262px at 640. At 8px it needs 272px, and min-width: 0 * lets the metadata compress those last few pixels instead of * forcing the card wider. The CTA never shrinks: flex: 0 0 auto. * ──────────────────────────────────────────────────────── */ .fp-resource-card__footer { flex-direction: row; align-items: baseline; /* must match the base rule, or centring the group would re-break the baseline */ justify-content: center; gap: 40px; /* margin-top: auto retained from the base rule */ } /* THE 32px OPTICAL INSETS ARE GONE, and deliberately. They existed because a 144x44 BUTTON sitting flush against the card's right padding read as too far right, and the date then needed a matching 32px to stop looking stranded on the left. Both were compensations for the box. With a text link there is nothing to compensate for: the row is now a plain date-left / CTA-right pair sitting on the card's own padding edges, which is the geometry the four-card grid actually wants. Leaving the insets in place would have parked the CTA 49px from the card edge for no reason. */ /* Metadata yields first; it may compress but must never wrap, or cards in the same row would end at unequal heights. */ .fp-resource-card__updated { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; } /* TEST: column fallback removed — single row at every width. */ /* ── Mobile action-row balance (<640px) ─────────────────── * The row sat 24px below the description but only 11px above the card * bottom — the card's own 10px padding plus its 1px border — so it read as * bottom-heavy. 6px beneath the row brings that to 17px, the SAME * row-to-bottom desktop already uses, without touching card padding, the * illustration, the title or the description. Card height grows 478 -> 484 * on mobile only; that is unavoidable, since the row cannot gain space * below without the card growing. * ──────────────────────────────────────────────────────── */ @media (max-width: 639px) { .fp-resource-card__footer { padding-bottom: 6px; } } /* ── Narrowest two-column card: date inset relief ───────── * At a 640px viewport the two-column card gives 262px of usable width, but * the action row needs 269.1px: * 32 date inset + 53.1 "Jul 2026" + 8 gap + 144 CTA + 32 CTA margin * The date is the only shrinkable element in that row (flex: 0 1 auto with * min-width: 0 and text-overflow: ellipsis), so it absorbed the entire * 7.1px shortfall and truncated to "Jul 2..." on Staging. * * 64px of the 269.1 is decorative — the two 32px balance insets added at * v3.11.55. Reducing the date side to 20px in this band recovers 12px and * leaves 4.9px of genuine headroom. 24px was rejected: it clears by 0.9px, * which is under a pixel against a sub-pixel text measurement and is how * the original defect arose. * * THE BAND IS DELIBERATELY NARROW. The card gains ~1px per 2px of viewport * in the two-column grid, so the row starts fitting at about 654px. 834 * sits 89.9px clear and 1440 sits 24.9px clear — both already correct and * both left untouched. Normalising the whole two-column range to a smaller * inset would have moved the date 8px at 834 for no reason. * ──────────────────────────────────────────────────────── */ @media (min-width: 640px) and (max-width: 669.98px) { .fp-resource-card__updated { padding-left: 20px; } } /* ── Four-column relief band (1280-1299.98) ─────────────── * The SAME failure as the 640 band, one column-count jump later. The grid * goes 2 -> 4 columns at 1280, which drops the card to its narrowest * four-column width: 290px, 266px usable, against the 269.1px the action * row needs. 3.1px short, absorbed by the date, which truncated to * "Jul 2..." on Staging with dateClipped: true. * * The card gains 0.225px per px of viewport in the four-column grid * (measured from Staging: 290 at 1280, 326 at 1440), so the row becomes * exactly sufficient at about 1294. The bound is set at 1299.98 rather * than 1293.98: 1294 clears by 0.0px, and the 640 band established that * clearing by under a pixel is how this defect arises. 1300 leaves 1.4px * of genuine spare. * * BAND ENDPOINTS EXTENDED (v3.11.60). The original bounds — 654.98 and * 1299.98 — were set at the point the arithmetic said the 32px inset just * fits. Staging then CLIPPED at both 655 and 1300: * 655 usable 269.5 spare +0.4 -> clipped * 1300 usable 271.0 spare +1.9 -> clipped * Sub-3px spare is not reliable: sub-pixel text metrics and rounding decide * the outcome. The bounds now carry ~6-8px of real margin, roughly four * times what failed, without pushing the 20px inset across widths that are * comfortably fine. * * THE PATTERN: both failures sit immediately above a column-count * increase, where the card is at its narrowest and the fixed 64px of * decorative insets is the largest share of it. ANY FUTURE BREAKPOINT * THAT ADDS COLUMNS MUST BE RECHECKED for this — see the Bible note. * ──────────────────────────────────────────────────────── */ @media (min-width: 1280px) and (max-width: 1319.98px) { .fp-resource-card__updated { padding-left: 20px; } } /* ── Action-row width cap ───────────────────────────────── * The row's content is a constant 261.1px at every breakpoint * (32 date inset + 53.1 "Jul 2026" + 8 gap + 144 CTA + 32 CTA margin), * and space-between puts ALL remaining card width between the two ends. * Nothing bounded the row, so the gap tracked card width and blew out * wherever the card is widest — immediately BELOW a column-count * increase, the mirror of the relief bands above, which handle the card * being too narrow. Measured on Staging: * 639 1-col card 599.0 gap 315.9 * 1199 2-col card 563.5 gap 276.4 * 1279 2-col card 603.5 gap 316.4 * 1440 4-col card 326.0 gap 30.9 <- already correct * * 292px is the footer width at 1440 — the widest already-correct row — * and is 261.1 content + that same 30.9 gap. Capping every wide card to * it gives one action-row geometry across the whole system. * * Deliberately UNSCOPED. max-width self-disables wherever the footer is * naturally narrower, which is every narrow-card range INCLUDING both * relief bands (640-669.98 and 1280-1319.98), so it cannot reopen the * date-clipping defects those bands fix — verified no-op at 640, 655, * 669, 670, 1280, 1300, 1319, 1320 and 1440. * * Left-anchored: the date does not move at any width (45px from the card * edge, unchanged); only the CTA comes inward, keeping title, description * and date on one alignment axis. justify-content was NOT used — it takes * width from the date and reopened clipping at 640. * ──────────────────────────────────────────────────────── */ .fp-resource-card__footer { max-width: 292px; /* RESPONSIVE FIX — 2026-08-18. This cap predates the "single centred group" footer (it was written for the old space-between design) and was never revisited when the footer became `justify-content: center`. As a stretched grid item with no auto margins, a box smaller than its area aligns to the start edge by default — so below 1280px, wherever this cap actually binds, the group sat left-anchored instead of centred. margin-inline: auto is the minimal fix: it does not change the cap's width, the 40px gap, the baseline, or the CTA text links themselves — it only lets the (already correctly sized) box centre in the leftover space instead of hugging the start edge. Confirmed a no-op at 1440, 1280 and 1440's card widths, where the footer is already narrower than 292px and this cap does not bind. */ margin-inline: auto; } /* ═══════════════════════════════════════════════════════════ v3.57.121 - FILLED ARTICLE-TYPE BADGES, v1.1 PALETTE ONLY (CLAUDE-CONSOLIDATED-THEME-BRIEF.md + BADGE-V1.1-PALETTE-CORRECTION.md) Inside resource cards only (homepage Resource Center, /resources/ hub, the Business Banking guides row): GUIDE Core Green fill with v1.1 Dark Navy #12315A text (4.97:1; Core Navy was 4.02:1 and white 2.62:1, both below AA); BEST OF Core Navy with white; COMPARISON Core Blue with white. Geometry, type, capitalisation, padding, 1px border and radius are the base badge's own. Category pills that share the badge box (article hero, collection cards) are not inside .fp-resource-card and keep their outline and their --fp-badge-* tokens. ═══════════════════════════════════════════════════════════ */ .fp-resource-card > .fp-resource-card__badge--guide { color: #12315A; /* v1.1 Dark Navy, r2: 4.97:1 on Core Green */ background-color: var(--fp-color-green); border-color: var(--fp-color-green); } .fp-resource-card > .fp-resource-card__badge--best-of { color: var(--fp-color-white); background-color: var(--fp-color-navy); border-color: var(--fp-color-navy); } .fp-resource-card > .fp-resource-card__badge--comparison { color: var(--fp-color-white); background-color: var(--fp-color-blue); border-color: var(--fp-color-blue); } /* 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-resource-card__image[src*="business.banking.comparison.card.v11.svg"] { transform: scale(0.8); transform-origin: center center; } /* v3.57.124 - owner (OWNER-CENTER-RESOURCE-CARD-COPY.md): the shared article resource card centres its title and summary (homepage Resource Center, Business Banking Guides & Resources, /resources/). The badge keeps its own start alignment (justify-self: start, above), and image, date/CTA footer, sizes, type and spacing are unchanged. */ .fp-resource-card .fp-resource-card__title, .fp-resource-card .fp-resource-card__description { text-align: center; } /* v3.57.124 - equal-row alignment: the date/CTA footer always takes the card's fifth subgrid row (zone 5, as the footer rule above intends). A card without a summary (the /resources/ Bluevine vs. Grasshopper comparison card since v3.57.123) had its footer auto-placed in row 4, 14px above its neighbour's at 1440 and 768. Cards with a summary are unchanged. */ .fp-resource-card > .fp-resource-card__footer { grid-row: 5; } /* 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-resource-card__cta:hover, a.fp-resource-card__cta:focus, a.fp-resource-card__cta:focus-visible, a.fp-resource-card__cta:active { color: var(--fp-color-blue); }