/* FinanceProspector — Providers Index v1.0 — FINAL / FROZEN Compact category-group directory. Seven category units, each a heading over its four provider-name links, laid across the width 4 / 3 / 1. Governed values, all traced, none invented: provider -> provider 10px site-footer.css:135 (.fp-footer__list li + li) heading -> first 8px --fp-space-xs unit column gap 24px --fp-space-m, the frozen mega-menu's category-group gap unit row gap (>=768) 48px --fp-space-xl - see the note in the media block unit row gap (<768) 24px --fp-space-m page gutters 32 / 24 / 20 Rendered provider-name pitch is 30.80px text-to-text at every viewport. Do not change any value here without a new version number and freeze record. */ .fp-pi{padding:0 20px;margin:32px 0 0;font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif} .fp-pi__container{max-width:1500px;margin:0 auto} .fp-pi__headline{font-size:36px;font-weight:700;line-height:1.2;color:#173F73;margin:0 0 8px} .fp-pi__intro{font-size:16px;line-height:1.65;color:#4B5563;margin:0;max-width:65ch} .fp-pi__grid{display:grid;grid-template-columns:1fr;gap:24px;margin:24px 0 0} .fp-pi__cat{margin:0;min-width:0} .fp-pi__cat-title{font-size:22px;font-weight:700;line-height:1.3;color:#173F73;margin:0 0 8px} .fp-pi__list{list-style:none;margin:0;padding:0} .fp-pi__item + .fp-pi__item{margin-top:10px} .fp-pi__link{display:inline-flex;align-items:center;text-decoration:none;color:#173F73; font-size:16px;font-weight:600;line-height:1.3;transition:color 150ms ease} .fp-pi__link:hover,.fp-pi__link:focus{color:#2563EB;text-decoration:underline} .fp-pi__link:visited{color:#173F73} .fp-pi__link:focus-visible{outline:2px solid #2563EB;outline-offset:3px;border-radius:2px} @media (min-width:768px){ .fp-pi{padding:0 24px} /* Multi-column only. Row gap --fp-space-xl (48px) rather than --fp-space-l (32px): a raised second heading line consumes 28.6px of it, so 32px left only 3.4px of break above a wrapped heading. 48px leaves 19.4px there and 48px elsewhere. The grid's top margin matches, so row 1's raised heading clears the intro by the same 19.4px. 64px was not needed. */ .fp-pi__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px;margin-top:48px} /* One-line heading band; a wrapped heading hangs its extra line upward. */ .fp-pi__cat-title{height:28.6px;display:flex;align-items:flex-end} } @media (min-width:1280px){ .fp-pi{padding:0 32px} .fp-pi__grid{grid-template-columns:repeat(4,minmax(0,1fr))} } /* v1.2 - section header, the Business Banking Top 4 Picks values (top-picks.css .tp h2 / .tp h2 .g / .tp-sub): 28 / 32 (>= 768) / 36px (>= 1024), 700, 1.20, -0.02em, Navy #173F73, "Category" Green Dark #338E39; supporting line 16 / 400 / 1.65, Dark Gray #4B5563, 8px below. The section's existing 32px top margin is the hero -> heading gap. */ .fp-pi__title{margin:0 0 8px;font-size:28px;font-weight:700;line-height:1.20; letter-spacing:-0.02em;color:#173F73} .fp-pi__title-accent{color:#338E39} .fp-pi__sub{margin:0;max-width:760px;font-size:16px;font-weight:400;line-height:1.65;color:#6B7280}/* v3.57.143 r2 (P14) - owner-approved Medium Gray, was #4B5563 */ @media (min-width:768px){ .fp-pi__title{font-size:32px} } @media (min-width:1024px){ .fp-pi__title{font-size:36px} } /* v1.3 - supporting line: full section width. The v1.2 760px cap is lifted so the whole sentence sits on one line on desktop (at 1440 v1.2 wrapped with "services." alone); tablet and phone wrap naturally. Wording and the 16 / 400 / 1.65 type are unchanged. */ .fp-pi__sub{max-width:none} /* v1.3 - the Business Banking category item, horizontal: the approved illustration (business-banking-final-v5-1.svg, unaltered, no background) at 160px wide, square as drawn - its DRAWN frame is 124.2 x 106.3px, clearly larger than the hero's 110.3px feature tiles (the image box carries ~22% empty space, so the box size is not what the eye compares), then the heading "Top Business Bank Account Providers" 16px to its right at 28 / 600 Inter - Navy #173F73, "Business Bank Account" in Dark Green #338E39 like "Category" above it - vertically centred on the image. Left-aligned on the heading axis, 32px below the supporting line - the same as the hero -> heading gap. opacity:1 as on the category-card image: GeneratePress lazy-load JS can otherwise hold an image at 0. */ .fp-pi__category{display:flex;align-items:center;gap:16px;margin:32px 0 0} .fp-pi__category-image{display:block;flex:0 0 auto;width:160px;height:auto;aspect-ratio:1/1;opacity:1; /* OPTICAL LEFT ALIGNMENT, as the info-page icons: the drawn frame starts (36.23 - 2 / 2) / 320 = 11.01% in from the image box, so the box is pulled left by that share of its width and the VISIBLE left edge sits on the page axis - the same axis as the headings and the first provider card of each row. 160px -> 17.62px. Recompute if the size changes. The Providers-only artwork copy (-providers-160.svg) carries the governed line weights at this size: 1.00px frame, 2.75px coloured lines. */ margin-left:calc(160px * -35.23 / 320)} .fp-pi__category-label{margin:0;font-family:inherit;font-size:28px;font-weight:600;line-height:1.20;letter-spacing:normal;color:#173F73} .fp-pi__category-accent{color:#338E39} /* Dark Green, as "Category" */ /* PHONES (< 480px, the site's phone step): the 160px illustration and the 28px heading cannot share a row - beside the image the text column is only 162-192px on common phones and the heading ran to 3-5 lines. Below 480 the heading sits UNDER the illustration, left-aligned on the same axis (two lines). OPTICAL GAP: the drawn frame ends 27.15px inside the image box and the heading's glyphs start 4.66px inside its line box, so the heading is pulled up 16px to leave ~16px of VISIBLE space between the drawing and the letters. Image and type sizes are unchanged. */ @media (max-width:479.98px){ .fp-pi__category{flex-direction:column;align-items:flex-start;gap:0} .fp-pi__category-label{margin-top:-16px} } /* v1.4 - Business Bank Account providers module, beneath the Business Banking row. The component and its card layout come from article.css (loaded on this route from v3.56.7) through the fp-article--providers capability class; only this instance's changes are here. - No module frame and no module heading: the heading beside the illustration names the list (see providers-index.php); only the seven bordered cards remain, 16px below that row (v3.56.8; was 24px). - fp-providers--reviews: a "Read Review" row between the score and the "Visit" link - 8px below the score label, 6px above the link (the Top 4 Picks button -> link gap). The card grid's own 2px row gap is part of both, so the margins are 6px and 4px. The logo spans all four rows. - Name, score, label, Read Review and Visit are centred in the text column; the logo keeps its place. - EVERY ROW IS LEFT-ALIGNED, so the first card of each row starts on the illustration's left edge. Cards are equal width. >= 1300 5 + 2 min(258px, (100% - 4 x 16px) / 5) 1024-1299 4 + 3 min(258px, (100% - 3 x 16px) / 4), row capped 1080px 640-1023 2 + 2 + 2 + 1, row capped 2 x 258 + 16 = 532px < 640 one column - FIT. "FinanceProspector Score" is 158.4px and "Visit Bank of America ->" 160px at 13 / 14px. Where cards are narrower than 258px (1024-1439) the card is compact - 44px logo (the component's own compact size), 8px gap, 8px padding - so the text column is at least 162px and everything, including the 144px button, fits on one line in the column. Five across starts at 1300px, not 1280px, because at 1280 the fit would be 0.4px. */ .fp-pi__providers .fp-providers{margin-top:16px} .fp-article--providers.fp-pi__providers .fp-providers{border:0;border-radius:0} .fp-article--providers.fp-pi__providers .fp-providers .fp-providers__list{padding:0;justify-content:flex-start} .fp-article--providers .fp-providers.fp-providers--reviews .fp-providers__item{grid-template-rows:auto auto auto auto} .fp-article--providers .fp-providers.fp-providers--reviews .fp-providers__logo{grid-row:1 / span 4} .fp-article--providers .fp-providers.fp-providers--reviews .fp-providers__review{grid-column:2;grid-row:3;margin-top:6px} .fp-article--providers .fp-providers.fp-providers--reviews .fp-providers__cta{grid-column:2;grid-row:4;margin-top:4px} .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__name, .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__score, .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__review, .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__cta{justify-self:center;text-align:center} .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__score{align-items:center} @media (min-width:640px){ .fp-article--providers.fp-pi__providers .fp-providers .fp-providers__list{max-width:532px} } @media (min-width:1024px){ .fp-article--providers.fp-pi__providers .fp-providers .fp-providers__list{max-width:1080px} } @media (min-width:1300px){ .fp-article--providers.fp-pi__providers .fp-providers .fp-providers__list{max-width:none} .fp-article--providers.fp-pi__providers .fp-providers .fp-providers__item{flex-basis:min(258px, calc((100% - 4 * var(--fp-space-s)) / 5))} } @media (min-width:1024px) and (max-width:1439.98px){ .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__item{grid-template-columns:44px minmax(0, 1fr);column-gap:8px;padding:8px} .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__logo{grid-row:1 / span 4;width:44px;height:44px} .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__review{grid-column:2} .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__cta{grid-column:2;margin-top:4px} } /* v3.56.9 - PROVIDER CARD BORDER. The /providers/ cards take the 1px Structural Gray #90A3BC of the criteria tiles above them instead of the shared --fp-color-gray-200. Colour only: the 1px width, the card radius and the layout are unchanged, and the shared rule (Best Of, articles) is not touched. */ /* v3.57.139 (owner-approved border standard, 2026-10-26): website-card outer borders are 1px #E5E7EB, so the provider cards take the shared --fp-color-gray-200 again (the v3.56.9 #90A3BC override is retired). The criteria tiles and the decorative score illustration in the hero above are not website cards and are unchanged. */ .fp-article--providers.fp-pi__providers .fp-providers .fp-providers__item{border-color:var(--fp-color-gray-200)} /* v3.57.27 - ALIGNED BUTTONS. One card's score label can be longer than "FinanceProspector Score" and wrap to two lines (Slash: "Average of 3 Feature Scores"), which pushed that card's button below its neighbours'. From 640px, where cards sit side by side, every card's label reserves two lines, so "Read Review" starts at the same height in every card of a row. Nothing is clipped; the score value, the label's size, weight and colour are unchanged. Phones show one card per row and the label fits on one line there, so no space is reserved. */ @media (min-width:640px){ .fp-article--providers.fp-pi__providers .fp-providers.fp-providers--reviews .fp-providers__score-label{min-height:2.6em} } /* v3.57.36 - EQUAL CARDS. Every card on /providers/ is the same height and width within a layout, whether or not it has a score or a published review. A card without them carries invisible stand-ins (.fp-providers__ghost) built from the same classes as the real score, label and button, so they reserve exactly the space the real ones take at every width. The stand-ins are not links, cannot be focused and are hidden from assistive technology. "Score pending" is centred over the reserved score space. This replaces the v3.57.35 rule that stretched the score row, which is removed. */ .fp-article--providers.fp-pi__providers .fp-providers .fp-providers__ghost{visibility:hidden;pointer-events:none;user-select:none} .fp-article--providers.fp-pi__providers .fp-providers .fp-providers__score--pending{position:relative} .fp-article--providers.fp-pi__providers .fp-providers .fp-providers__score--pending .fp-providers__score-pending{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} /* v3.57.38 - The directory list beneath the cards is no longer printed, so the cards are now the last thing on the page. The list used to separate them from the footer; this keeps a clear space there instead: 32px on phones, 48px from 640px (the gap the list itself sat below the cards at). */ .fp-pi{padding-bottom:32px} @media (min-width:640px){ .fp-pi{padding-bottom:48px} } /* v3.57.122 (PROVIDERS-CATEGORY-SPACING-AMENDMENT.md + CLAUDE-CONSOLIDATED-CORRECTION-THEME.md; changes to the Providers Index v1.0 rules by owner instruction, recorded in this release): - Intro -> first category row: the row kept --fp-space-l (32px, the /categories/ intro -> list gap) to its BOX, but the category illustration has a measured 26.5px transparent inset above its drawn artwork at 160px (the same reason the row already offsets it -17.615px horizontally). The row's top margin subtracts that inset, so the visible artwork sits the standard 32px below the intro. - Row heading: the established section-heading treatment (as .fp-pi__title, Top 4 Picks and the category section headings): 28 / 32 (>= 768) / 36px (>= 1024), 700, 1.20, -0.02em, navy with the green accent kept. It was 28px / 600 / normal tracking. Font family unchanged (Inter). */ .fp-pi__category{margin-top:calc(var(--fp-space-l) - 26.5px)} .fp-pi__category-label{font-weight:700;letter-spacing:-0.02em} @media (min-width:768px){ .fp-pi__category-label{font-size:32px} } @media (min-width:1024px){ .fp-pi__category-label{font-size:36px} } /* v3.57.144 (P17, owner 2026-10-28): Providers "Read Review" keeps white text in every interactive state. GeneratePress's inline `a:hover, a:focus, a:active { color: var(--contrast) }` (#222222) is (0,1,1) and loads after base.css, so on focus it ties with and beats `a.fp-cta--primary` (0,1,1): the label settled at #222222 on Core Blue (~3.08:1) once the 0.15s colour transition finished. Hover and active were already white at (0,2,1); they are restated here at the same scope so every state is explicit. Scoped to the Providers index grid only - other uses of the shared rule are reported separately, not changed. Colour only: background, border and the 2px focus ring are untouched. */ .fp-pi__providers a.fp-cta--primary:focus, .fp-pi__providers a.fp-cta--primary:focus-visible, .fp-pi__providers a.fp-cta--primary:hover, .fp-pi__providers a.fp-cta--primary:active { color: var(--fp-color-white); }