/* ═══════════════════════════════════════════════════════════ INFORMATIONAL / LEGAL PAGE SYSTEM Version: v2.2 — 2026-08-21, unpackaged v2.2 rewrites ONLY the page-specific icon block at the foot of this file, for Informational/Legal Icon Standard v1.0. The shared system above it is untouched — byte-identical. v2.1 (2026-08-20) added the H3, list and Last Updated treatments. v2.0 FROZEN 2026-08-20 (theme v3.22.0). ★ ICON STANDARD v1.0 — FROZEN 2026-08-21. All six informational/legal icons were normalised to one line weight and one colour. Full specification and the measured values for all six assets: documents/FinanceProspector-InfoLegal-Icon-Standard-v1.0-FROZEN.md Do not renormalise, re-measure or re-derive this system when Terms of Use, Cookie Policy or Accessibility are built — the numbers are already measured and recorded in the block at the foot of this file. ★ THE SHARED ARCHITECTURE IS FROZEN. Generalised from About Us v1.4 and approved 2026-08-20 alongside the Affiliate Disclosure page. About Us was verified PIXEL-IDENTICAL across the refactor — 0 pixels differ at 1512 / 1280 / 1024 / 768 / 375, measured by image differencing, not by eye. That is the standard any future change to this file must meet. SHARED BY EVERY INFORMATIONAL/LEGAL PAGE: About Us page-templates/about-us.php FINAL Affiliate Disclosure page-templates/affiliate-disclosure.php FROZEN Privacy Policy page-templates/privacy-policy.php IMPLEMENTED CANDIDATE (Terms of Use, Cookie Policy and Accessibility will join this file - they are NOT built yet. Adding one needs only a new page-specific icon block at the foot of this file, not a change to anything above it.) ⚠ A NEW PAGE ALSO NEEDS ITS BODY CLASS IN category-page.css. Privacy Policy was built without one and its breadcrumb sat 150px off the family axis at 1512. That file releases the GeneratePress 1200px wrapper; below 1200 the omission is invisible, so it will not show up in a mobile-first check. See the warning in that file. ★ THE LAYOUT IS FROZEN. This file was generalised from the FINAL About Us page approved on live staging in v3.21.0, and About Us must stay pixel-identical to that page. The rename from .fp-about__* to .fp-info__* is an ARCHITECTURE change only. Any visual difference is a defect, not an improvement. THE SIX FROZEN PROPERTIES — no change without a new approval: 1. OUTER CANVAS = the Business Bank article's HERO BAND width, measured live: 1200 / 1200 / 960 / 720 / 335. 2. READING WIDTH, matched to the live article to 0.00px: 820 / 820 / 820 / 720 / 335. 3. THE COLUMN IS CENTRED IN THE CANVAS. Balanced gutters: 190/190 at 1512 and 1280, 70/70 at 1024, 0/0 below. Editorial axis: 346 / 230 / 102 / 24 / 20. 4. THE OPTICAL ICON CORRECTION — see the PAGE-SPECIFIC block at the foot of this file. Every page computes its own. 5. TYPOGRAPHY. H1 36/700 navy, H2 24/700 navy, body 17/1.62 gray-500, intro 18px at 660px. 6. SPACING. 20 / 0 / 24 / 48 / 48 / 16 / 16 / 64 at desktop. ⚠ WHAT IS NOT SHARED: icon width, icon optical correction, viewBox and painted bounds. Those are per-page and must be measured from each asset. Blindly inheriting them WILL misalign the icon - the two pages built so far differ by 47% in their ink inset ratio. NOT PART OF THE SYSTEM: cards, tinted sections, dividers, sidebars, tables of contents and CTA blocks. None may be added to a page built from this file. THE WHOLE PAGE IS: breadcrumb, icon, H1, intro, reading column. There are deliberately no cards, no rules, no tinted bands and no secondary components. Sections are separated by whitespace alone, so the only spacing decisions in this file are vertical rhythm. ═══════════════════════════════════════════════════════════ */ .fp-info { background-color: var(--fp-color-white); /* Breadcrumb -> icon. This padding IS that gap: the breadcrumb sits outside this section. Kept small because the icon's own artwork carries 222/1239 of empty space above its ink - roughly 33px at the desktop display size - so the OPTICAL gap lands near 52px while the declared value is 20. Reduced from 48 in v1.1. */ padding-top: 0; /* v3.56.8 (was 12): the icon's optical-top margin sets the gap */ padding-bottom: var(--fp-space-xxl); /* 64px — mobile */ } /* ── OUTER CANVAS + INNER READING COLUMN ───────────────── * TWO nested geometries, and they are different things: * * OUTER CANVAS = the width of the Business Bank article's HERO BAND * INNER COLUMN = the 820px reading measure, sitting inside it * * ── The outer canvas ──────────────────────────────────── * `.fp-article__hero-band` has no width of its own - it fills * `.fp-article__container`, so the hero width is * min(1200, viewport) - container padding * Measured live on staging 2026-08-20: * 1512 -> 1200 1280 -> 1200 1024 -> 960 768 -> 720 375 -> 335 * Reproduced below with the article's own max-width and gutter ladder, * so About Us occupies the same horizontal footprint as the article. * * box-sizing is BORDER-BOX here. It was content-box while this element * carried the 820 itself; now the 820 lives on the children, so the * padding correctly sits INSIDE the 1200 canvas - which is exactly how * `.fp-article__container` behaves. * * ── The 30px left inset at 1280+ ──────────────────────── * The article centres its 1140px layout (820 prose + 40 gap + 280 TOC) * inside the 1200px canvas, which insets its prose by exactly 30px. * Matching that inset puts About Us's reading column on the ARTICLE'S * OWN PROSE AXIS at every width: * 1512 -> 186 1280 -> 70 1024 -> 32 768 -> 24 375 -> 20 * Verified against the live article to 0.00px. This is a deliberate * asymmetry, not a centring bug: the space it leaves on the right is * where the article puts its table of contents. About Us has no TOC * and that space stays empty - approved 2026-08-20. * * WHAT IS NOT BORROWED: the hero's tint, card, border, label, * illustration and metadata; the two-column grid; the 280px aside. * This page borrows the article's GEOMETRY, not its components. * * The breadcrumb is NOT inside this canvas. It keeps the site's own * 1500px axis so it lines up with every other page's trail. */ .fp-info__container { max-width: 1200px; margin: 0 auto; padding: 0 var(--fp-margin-mobile); /* 20px */ box-sizing: border-box; } /* ── The 820px reading measure ─────────────────────────── * Capped on the direct children, NOT on the container, so the prose * never stretches to the wider canvas. `.fp-info__body` carries every * section, so one cap covers all of them. * * Resulting TEXT width, matching the article at every step: * 1512 -> 820 1280 -> 820 1024 -> 820 768 -> 720 375 -> 335 * * `margin: auto` on BOTH sides centres the column in the canvas, which * is what gives the balanced gutters: 190/190 at 1512 and 1280, 70/70 * at 1024, 0/0 below that where the column fills the canvas. * * v1.3 anchored this column to the LEFT of the canvas so it sat on the * article's prose axis. That is retired: the article's axis is * asymmetric only because it reserves 280px for a table of contents, * and About Us has none - reproducing it left ~500px of dead space on * the right. Released 2026-08-20. * * The intro keeps its own narrower 660px cap. */ .fp-info__headline, .fp-info__body { max-width: 820px; margin-left: auto; margin-right: auto; } /* ── Icon ──────────────────────────────────────────────── * Sized by WIDTH with height:auto, so the SVG's own aspect ratio is * preserved and it can never distort. Display size only - the artwork * is the approved asset and is not touched. * * The asset's viewBox is 1270 x 1239 but its ink occupies only * 981 x 707 of it, and that padding is asymmetric on every side: * 146.3 left, 222.3 top, 309.5 bottom. EVERY position around this icon * is therefore set from the optical edge, not the box edge - which is * why the bottom margin is zero and still reads as ~46px, and why the * left margin is negative. If the asset is ever re-exported with * tighter bounds, reset all of them. */ /* ── OPTICAL LEFT ALIGNMENT — the negative margin is load-bearing ── The icon is anchored to the editorial axis by its PAINTED edge, not by its box. The asset's ink starts 146.3 of 1270 viewBox units in from the left, so at any display width the box must be pulled left by display width x 146.3 / 1270 = display width x 0.11520 to put the green artwork on the same axis as the H1, the H2s and the body copy. THIS VALUE IS NOT A CONSTANT - it scales with the icon, so each breakpoint that sets a width must set its own pull: 162px -> -18.66px 189px -> -21.77px A single fixed -21.8px would over-pull the mobile icon by 3px. If the icon size changes, recompute. If the asset is ever re-exported with tighter bounds, this whole correction goes away. */ .fp-info__icon { display: block; height: auto; margin-top: 0; margin-bottom: 0; /* 0, and still reads as optical space */ margin-right: auto; /* width and margin-left are PAGE-SPECIFIC and live at the foot of this file, scoped by body class. They are NOT declared here on purpose: every icon has its own viewBox and its own ink inset, and a shared default would be silently wrong for whichever page did not set it. */ } /* ── Headline ──────────────────────────────────────────── * Left aligned on the editorial axis since v1.2. 36px rather than the * 48px display step: this is an editorial page, and 48px reads as a * landing page rather than a document. The wider column is not a * reason to grow it. */ .fp-info__headline { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* auto on the SIDES, not 0. This shorthand comes after the shared centring rule above, so a `0` here would silently un-centre the headline and drop it back to the canvas edge while everything else stayed on the column. */ margin: 0 auto var(--fp-space-s) auto; /* 16px bottom */ font-size: var(--fp-font-h3); /* 28px — mobile step */ font-weight: var(--fp-weight-heading); /* 700 */ line-height: var(--fp-line-heading); /* 1.20 */ letter-spacing: var(--fp-tracking-heading); color: var(--fp-color-navy); text-align: left; text-wrap: balance; } /* ── Introduction ──────────────────────────────────────── * One step up from body copy, anchored to the same left axis, and * deliberately NARROWER than the 820px body measure so the lede reads * as a lede rather than as more body copy. * * 660px is 80% of the body measure. That ratio is the point: visibly a * narrower column, not a different page. `margin: 0 auto 0 0` is what * anchors it - auto on the RIGHT only. Do not let it become `0 auto` * again; that would re-centre the block and break the axis. */ .fp-info__intro { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; max-width: 660px; margin: 0 auto 0 0; font-size: var(--fp-font-body-m); /* 16px — mobile step */ font-weight: var(--fp-weight-body); line-height: var(--fp-line-body); /* 1.65 */ color: var(--fp-color-gray-500); text-align: left; text-wrap: pretty; } /* ── Editorial body ────────────────────────────────────── * The gap between the intro and the first heading is the page's * largest: it is the one place the composition shifts from the * introduction to the editorial sections, and the whitespace is doing * the job a rule would otherwise do. Tightened in v1.1 so the two * areas read as one page rather than two. */ .fp-info__body { margin-top: var(--fp-space-l); /* 32px — mobile */ text-align: left; } /* Section separation. This is the ONLY thing dividing the sections, so it stays clearly larger than the space inside a section - the 3:1 ratio against the 16px paragraph gap is what makes them read as separate without a rule. Reduced from 64 in v1.1. */ .fp-info__section + .fp-info__section { margin-top: var(--fp-space-l); /* 32px — mobile */ } /* 24px, approved 2026-08-20 after the width change. NOT the article's 32px: About Us needs a quieter hierarchy beneath its 36px H1, and 32px would sit only 4px below it. 22px was correct against the old 640px measure but read light once the column widened to 820. One size at every breakpoint - the responsive system does not require a mobile override, though see the note in the build log about the 28/24 H1-to-H2 pairing at 375. */ .fp-info__heading { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0 0 var(--fp-space-s) 0; /* 16px */ font-size: 24px; font-weight: var(--fp-weight-heading); /* 700 */ line-height: var(--fp-line-heading); /* 1.20 */ letter-spacing: var(--fp-tracking-subhead); color: var(--fp-color-navy); text-wrap: balance; } /* Body copy is the APPROVED ARTICLE'S treatment: 17px / 1.62 / gray-500, taken from `.fp-article__section p`. This is not a new size invented for a wider column - it is the site's established reading type, and it is what makes 820px measure the same 94 characters here as it does in the article. Left at 16px, the same 820px column would run to ~102 characters, which is longer than anything else on the site. */ .fp-info__section p { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0; font-size: 17px; font-weight: var(--fp-weight-body); line-height: 1.62; color: var(--fp-color-gray-500); } /* Paragraph rhythm inside a section - deliberately NOT reduced in v1.1. Section separation was tightened instead, so the sections pull closer together while the copy inside each one keeps its breathing room. */ .fp-info__section p + p { margin-top: var(--fp-space-s); /* 16px */ } /* ═══════════════════════════════════════════════════════════ THE THREE DOCUMENT TREATMENTS — added v2.1 for Privacy Policy Approved 2026-08-20 as part of the Privacy Policy implementation master. Generalised, not page-scoped: any informational/legal page may use them. ⚠ THEY ARE ADDITIVE AND INERT ON THE TWO FINAL PAGES. About Us and Affiliate Disclosure emit no .fp-info__subheading, no .fp-info__list, no .fp-info__updated and no .fp-info__opening, so none of these selectors can match there. Verified by rendering both pages before and after this block and image-differencing them: 0 pixels differ at 1512 / 1280 / 1024 / 768 / 375. That is the same standard the v2.0 refactor had to meet. ⚠ NO WIDTH CAP AND NO AXIS OFFSET ON THE SUB-HEADING OR THE LIST. Both live inside .fp-info__body, which already carries the 820px cap and the centring, so they inherit the column and the axis for free. The preview carried `max-width:820px` and `margin-left: calc(50% - 410px)` on both; inside an 820px parent those evaluate to 820 and to 0, so they were no-ops and are gone. Re-adding them would not break the page - it would just be dead code that implies these elements position themselves. .fp-info__updated and .fp-info__opening DO need both, because they are direct children of the container and sit OUTSIDE .fp-info__body - exactly like .fp-info__intro, whose pattern they follow. ═══════════════════════════════════════════════════════════ */ /* ── Sub-heading ───────────────────────────────────────── * 20px/700 navy - one step below the 24px H2, four steps below the * 36px H1. A legal document nests where an editorial page does not: * "Information we collect" needs "Information you provide" beneath it. * * 32px above and 12px below, against the H2's 0/16. The larger space * above is what separates it from the preceding paragraph; the * smaller space below is what binds it to the copy it introduces. * Without that asymmetry it floats between the two blocks. */ .fp-info__subheading { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: var(--fp-space-l) 0 12px 0; /* 32px above, 12px below */ font-size: 20px; font-weight: var(--fp-weight-heading); /* 700 */ line-height: 1.25; letter-spacing: var(--fp-tracking-subhead); color: var(--fp-color-navy); } /* A sub-heading opening a section sits directly under the H2, which already carries 16px beneath it. Its own 32px would compound to 48 and open a hole. */ .fp-info__heading + .fp-info__subheading { margin-top: 0; } /* ── Bulleted list ─────────────────────────────────────── * The only non-paragraph block in the system. Legal copy enumerates - * categories of data, rights, purposes - and running those as prose * makes them unscannable, which is the opposite of what a rights * disclosure is for. * * 24px indent, disc markers, and item type IDENTICAL to body copy so a * list reads as body copy that happens to be enumerated. The marker is * gray-300, the divider tone: present enough to structure, quiet * enough not to compete with the text. 6px between items - closer than * the 16px paragraph gap, because the items are one thought. */ .fp-info__list { margin: 0; padding-left: 24px; list-style: disc; } .fp-info__list li { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: var(--fp-weight-body); line-height: 1.62; color: var(--fp-color-gray-500); margin-bottom: 6px; } .fp-info__list li:last-child { margin-bottom: 0; } .fp-info__list li::marker { color: var(--fp-color-gray-300); } /* A list is almost always introduced by a lead-in paragraph and followed by more copy. Both joints take the paragraph rhythm. */ .fp-info__section p + .fp-info__list, .fp-info__list + p { margin-top: var(--fp-space-s); /* 16px */ } /* ── Last Updated, and the ownership sentence ──────────── * Both are ordinary body copy, deliberately. A legal page invites a * date badge and a bold legal-entity line; both were rejected. The * date is a fact the reader may want, not a status indicator, and the * owning entity is a sentence in the document, not a masthead. * * Direct children of the container, so they need the column cap and - * from 1024 up - the offset to the centred column, exactly as * .fp-info__intro does. */ .fp-info__updated, .fp-info__opening { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; max-width: 820px; margin: 0 auto var(--fp-space-s) 0; /* 16px, auto RIGHT only */ font-size: 17px; font-weight: var(--fp-weight-body); line-height: 1.62; color: var(--fp-color-gray-500); } /* The ownership sentence is the last thing before the intro, so it carries the larger gap that separates identification from lede. */ .fp-info__opening { margin-bottom: var(--fp-space-m); /* 24px */ } /* ── The Methodology link ──────────────────────────────── * The site's standard blue inline link. Underlined, because an inline * link inside a paragraph cannot rely on colour alone to be found. * A link, not a button - this is a reference, not a call to action. */ .fp-info__link { color: var(--fp-color-blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .fp-info__link:hover, .fp-info__link:focus-visible { text-decoration-thickness: 2px; } /* ═══════════════════════════════════════════════════════════ TABLET — 640px and up Gutter step matches the article's own 640px step. ═══════════════════════════════════════════════════════════ */ @media (min-width: 640px) { .fp-info { padding-top: 0; /* v3.56.8 (was 20) */ padding-bottom: var(--fp-space-xxl); /* 64px */ } .fp-info__container { padding: 0 var(--fp-margin-tablet); /* 24px */ } .fp-info__headline { font-size: var(--fp-font-h2); /* 36px */ margin-bottom: var(--fp-space-m); /* 24px */ } .fp-info__intro { font-size: var(--fp-font-body-l); /* 18px */ } .fp-info__body { margin-top: var(--fp-space-xl); /* 48px */ } .fp-info__section + .fp-info__section { margin-top: var(--fp-space-xl); /* 48px */ } } /* ═══════════════════════════════════════════════════════════ 1024px and up — the article's desktop gutter step ═══════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { .fp-info__container { padding: 0 var(--fp-margin-desktop); /* 32px */ } /* ── THE ICON AND THE INTRO MUST FOLLOW THE COLUMN ────── * Both are direct children of the container, so both are positioned * from the container's CONTENT edge. When the column was left-anchored * that edge WAS the column's left edge, so no offset was needed. With * the column centred the two no longer coincide, and each needs an * explicit offset to the centred column's left edge: * * centred column's left edge = 50% - 410px (half of 820) * the icon additionally pulls - its own ink inset * * Only from 1024 up. Below that the column fills the canvas, the two * edges coincide again, and the base rules are already correct. * * The INTRO offset is shared - it has no artwork, so 410 is all it * needs. The ICON offset is per-page and lives at the foot of this * file, because the ink inset differs for every asset. */ .fp-info__intro, .fp-info__updated, .fp-info__opening { margin-left: calc(50% - 410px); margin-right: auto; } } /* ═══════════════════════════════════════════════════════════ 1280px and up The article drops its container padding entirely here because its canvas is exactly 1200px. About Us does the same so the reading measure is exactly 820px, with no padding inside it, at the widths where the page is actually read on desktop. ═══════════════════════════════════════════════════════════ */ @media (min-width: 1280px) { /* Canvas is exactly 1200 here, as the article's is, so the side gutters go. v1.3 carried an extra 30px left inset to sit on the article's prose axis; that requirement was released in v1.4 and the inset is gone. */ .fp-info__container { padding: 0; } } /* ═══════════════════════════════════════════════════════════ PAGE-SPECIFIC ICON GEOMETRY The ONLY per-page values in this file. Everything above is shared. ★ THE GOVERNING RULE IS EXACT EQUAL PAINTED ARTWORK HEIGHT. Approved 2026-08-21. Every informational/legal icon renders at the SAME painted height, to analytic precision: 126.94px at 640 and up 108.81px below 640 PAINTED HEIGHT = topmost visible artwork edge to bottommost visible artwork edge, EXCLUDING the transparent viewBox padding. Not the SVG box, not the CSS element height, not area, not a mean. ★ THE BOUNDS ARE COMPUTED ANALYTICALLY, NOT RASTERISED. Path data is absolute M/C/L/Z only, so a cubic's extrema are the roots of its derivative and the bbox is closed-form. The normalised icons then carry an offset on top of the path geometry: thickened a same-colour stroke of width d -> bounds +d/2 a side thinned a mask stroked black at width d -> bounds -d/2 a side At a vertical extremum that offset is exactly vertical, so painted height = path bbox height + d (d signed) painted left = path bbox left - d/2 ⚠ DO NOT RE-DERIVE THESE BY SCREENSHOT. Rasterising and counting pixels over-reads anti-aliased edges by up to half a viewBox unit, and the error differs per icon — which is exactly why earlier passes could only reach "within 1px" instead of equal. width = 126.94 x (viewBox width / painted height) pull = width x (painted left / viewBox width) 1024+ = calc(50% - (410 + pull)px) ⚠ WIDTHS ARE NOT ROUNDED. Four decimal places are load-bearing: rounding to 0.5px breaks exact equality. Do not "tidy" them. ⚠ WIDTHS DIFFER PER ICON AND THAT IS CORRECT. The artwork aspect ratios differ, so the width needed to reach the common height differs. About Us is widest (ink aspect 1.393), Cookie Policy narrowest (0.858). We equalise HEIGHT, not width. ⚠ SUPERSEDED — DO NOT REINSTATE: · geometric-mean optical sizing (equal sqrt(ink w x ink h)) · the About Us perceived-scale exceptions (+7%, +15%) · every raster-derived ink measurement and 0.5px-rounded width All are recorded in the revision history of documents/FinanceProspector-InfoLegal-Icon-Standard-v1.0-FROZEN.md. ⚠ THE ICON KEEPS ITS ASPECT RATIO. A wider box is a taller box and content below shifts down. Approved — do NOT compensate with negative margins, fixed heights, cropping or distortion. ⚠ PAINTED TOPS DO NOT ALIGN, AND THAT IS OUT OF SCOPE HERE. Each SVG carries a different amount of transparent padding above its artwork, so with the boxes top-aligned the painted tops differ by 7.73px. Acknowledged and deliberately NOT corrected. Do not add margin-top or any second icon-specific offset system without an explicit approval. ANALYTIC PAINTED BOUNDS, all six (viewBox units): page viewBox painted h painted left d About Us 1270 704.35728 146.71312 +5.0000 Affiliate Disclosure 1024 632.97517 175.85060 -5.3141 Privacy Policy 1024 664.24509 241.21845 -7.3079 Terms of Use 1024 708.91258 235.07568 -2.7133 Cookie Policy 1024 758.23735 222.16134 0.0000 Accessibility 1024 627.15257 174.38375 +4.9141 Cookie Policy and Accessibility have normalised masters and exact values in the frozen standard, but NO blocks below, because their templates do not exist yet. Terms of Use joined the file on 2026-08-21. ═══════════════════════════════════════════════════════════ */ /* ── About Us ──────────────────────────────────────────── * painted height 704.35728 · painted left 146.71312 · viewBox 1270 * Widest in the family — ink aspect 1.393. Deliberate. */ .page-template-about-us .fp-info__icon { width: 168.8204px; margin-left: -39.6190px; } /* ── Affiliate Disclosure ──────────────────────────────── * painted height 632.97517 · painted left 175.85060 · viewBox 1024 */ .page-template-affiliate-disclosure .fp-info__icon { width: 168.8204px; margin-left: -39.6190px; } /* ── Privacy Policy ────────────────────────────────────── * painted height 664.24509 · painted left 241.21845 · viewBox 1024 * Deepest ink inset in the family, so it needs the largest pull. */ .page-template-privacy-policy .fp-info__icon { width: 168.8204px; margin-left: -39.6190px; } /* ── Terms of Use ──────────────────────────────────────── * painted height 708.91258 · painted left 235.07568 · viewBox 1024 * Values taken verbatim from the frozen standard §4 — pre-computed when the * family was normalised, NOT re-measured for this page. */ .page-template-terms-of-use .fp-info__icon { width: 168.8204px; margin-left: -39.6190px; } /* ═══════════════════════════════════════════════════════════ TECHNOLOGY TABLE — ADDITIVE, Cookie Policy only Added 2026-08-21 for the Cookie Policy. Every rule below is NEW and scoped to .fp-info__table*. NOTHING above this block was changed: the four FINAL/FROZEN pages have no table, match none of these selectors, and render byte-identically. ⚠ DO NOT generalise these rules to .fp-info__section or to any shared class. The family was not redesigned to accommodate this table, and must not be. ═══════════════════════════════════════════════════════════ */ /* Scroll container. The table should not need to scroll at any supported width — but if a future row is longer than planned, this contains the overflow instead of letting the PAGE scroll sideways. tabindex makes it reachable, so a keyboard user can actually pan it; role+aria-labelledby give that stop a name. */ .fp-info__table-wrap { max-width: 100%; margin: var(--fp-space-m) 0; /* 24px, matches paragraph rhythm */ overflow-x: auto; -webkit-overflow-scrolling: touch; } .fp-info__table-wrap:focus-visible { outline: 2px solid var(--fp-color-blue); outline-offset: 2px; } /* ⚠ RESET THE PARENT THEME FIRST. GeneratePress main.min.css ships * table, td, th { border: 1px solid rgba(0,0,0,.1) } * td, th { border-width: 0 1px 1px 0 } * so every cell inherits a 1px RIGHT border. This stylesheet previously set * only border-bottom, which left those verticals intact — the live table * rendered as a boxed grid with full gridlines instead of the approved * horizontal rules. It escaped local QA because the local harness did not * load the parent stylesheet; it does now. * * Reset to 0 here, then re-declare ONLY the horizontal rules below. Scoped * strictly to .fp-info__table and its own th/td, so no other native table * anywhere on the site is affected. */ .fp-info__table, .fp-info__table th, .fp-info__table td { border: 0; } .fp-info__table { width: 100%; border-collapse: collapse; /* 16px — deliberately NOT reduced. This is legal disclosure copy; shrinking it to win horizontal room would be the wrong trade. */ font-size: var(--fp-font-body-m); line-height: 1.55; color: var(--fp-color-gray-600); /* 7.557:1 on white */ text-align: left; } /* The caption names the table for assistive technology. It is not hidden — a visible caption is genuinely useful here — but it is set quietly so it does not compete with the H2 above it. */ .fp-info__table-caption { caption-side: top; margin-bottom: 8px; font-size: var(--fp-font-body-s); color: var(--fp-color-gray-500); text-align: left; } /* Header row: navy, semibold, with a firmer rule beneath it than the row dividers, so the header reads as a header without a fill. */ .fp-info__table thead th { padding: 10px 16px 10px 0; font-size: var(--fp-font-body-s); font-weight: 700; color: var(--fp-color-navy); /* The ONE header rule. Firmer than the row separators so the header reads as a header without a fill. Horizontal only. */ border-bottom: 2px solid var(--fp-color-gray-300); vertical-align: bottom; } /* Hairline dividers only. No zebra striping, no fills, no coloured blocks — the frozen family uses rules, not shading. */ .fp-info__table tbody td { padding: 14px 16px 14px 0; /* Row separators. Horizontal only — never a vertical gridline. */ border-bottom: 1px solid var(--fp-color-gray-200); vertical-align: top; } .fp-info__table tbody tr:last-child td { border-bottom: 0; } .fp-info__table th:last-child, .fp-info__table td:last-child { padding-right: 0; } /* Column 1 holds literal identifiers, so it is monospace and must not break mid-token: "wpEmojiSettingsSupports" is a single searchable string. Column 4 holds short phrases that read badly when broken. */ .fp-info__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; color: var(--fp-color-navy); /* ⚠ NOT overflow-wrap:anywhere. That broke "wpEmojiSettingsSupports" across two lines at every desktop width — measured, and visible as "wpEmojiSettings / Supports". These are literal identifiers a visitor copies to look up in their own browser, so a mid-token break makes them read as two separate strings. The column min-width below is what gives them room; this keeps them whole. */ overflow-wrap: normal; } /* Column 1 must fit the longest identifier without breaking it. 210px clears "wpEmojiSettingsSupports" at .92em monospace. The wrapper keeps overflow-x:auto, so a future identifier longer than this scrolls INSIDE the table rather than pushing the page sideways. */ .fp-info__table th:first-child, .fp-info__table td:first-child { min-width: 210px; } .fp-info__table td:nth-child(4), .fp-info__table th:nth-child(4) { white-space: normal; } /* ── Below 640: stacked cards ───────────────────────────── * Four columns cannot be read at 375. Each row becomes a labelled * block, with the column name supplied from the data-label attribute * so the pairing survives without the header row. The keeps * its semantics for assistive technology; only the visual layout * changes. * * The header is hidden with a clip rect rather than display:none, so * screen readers still associate cells with their scoped
. */ @media (max-width: 639px) { .fp-info__table, .fp-info__table tbody, .fp-info__table tr, .fp-info__table td { display: block; width: 100%; } /* The table becomes display:block here, which leaves
without a table box to size against — it shrink-wrapped to about 245px and broke "Technologies currently used by FinanceProspector" into three short lines. Making it a plain block restores the full column width. */ .fp-info__table-caption { display: block; width: 100%; } .fp-info__table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .fp-info__table tbody tr { padding: 14px 0; border-bottom: 1px solid var(--fp-color-gray-200); } .fp-info__table tbody tr:last-child { border-bottom: 0; } .fp-info__table tbody td { padding: 0 0 8px; border-bottom: 0; } .fp-info__table tbody td:last-child { padding-bottom: 0; } /* The column name, restated per cell. */ .fp-info__table tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--fp-font-caption); font-weight: 700; color: var(--fp-color-navy); } } /* ── Cookie Policy ─────────────────────────────────────── * painted height 758.23735 · painted left 222.16134 · viewBox 1024 * Values taken verbatim from the frozen standard §4 — pre-computed when the * family was normalised, NOT re-measured for this page. Independently * re-verified 2026-08-21: the SVG on disk measures exactly these bounds and * reaches 126.939966 / 108.810022 painted height. */ .page-template-cookie-policy .fp-info__icon { width: 168.8204px; margin-left: -39.6190px; } /* -- Editorial Methodology ------------------------------ * Added 2026-08-23 at theme v3.29.0. The SAME five values every page in the * family carries, taken verbatim -- NOT re-measured for this page and not * recalculated. They derive from the canonical document geometry, which is * byte-identical across all seven icons in the frozen v3.28.1 family, so a * symbol revision cannot move them. Verified during v3.28.1 QA: all seven * render an identical 89 x 128 painted document at the desktop width. * Four decimals are load-bearing. Do not round. */ .page-template-editorial-methodology .fp-info__icon { width: 168.8204px; margin-left: -39.6190px; } /* Accessibility. FAMILY-UNIFORM geometry, per Addendum A-1 (2026-08-23), which supersedes the per-page table in Icon Standard v1.0 §4 in full. §4's Accessibility value of 207.2647px predates the v3.28.1 normalization and would render this icon ~5% oversized. Verified by isolated render: the approved master paints 127.0000px tall at 46.0000px left, exactly matching the other six. Four decimals are load-bearing. Do not round. */ /* ── Contributor ───────────────────────────────────────── * ⚠ EVERY NUMBER HERE IS MEASURED, NONE IS CHOSEN BY EYE. Do not round them * and do not replace them with a tidy margin. * * WIDTH normalises PAINTED HEIGHT to the family. The six SVG masters are * 1024x1024 with identical ink insets (top 0.16583, bottom 0.81083 of box * width), so at the family's 196.9493px box every one paints 127.02px tall. * charlie.thomas.png is a 276x292 raster whose ink is 0.86750 of box width, * so 196.9493 x 0.64500 / 0.86750 = 146.4349px paints the same 127.02px. * Verified on the rendered page: delta 0.00px. * * MARGIN-LEFT is the ink inset, exactly as the family's own pull works, so the * PAINTED left edge lands on the 820px reading column: measured delta 0.01px. * * ⚠ MARGIN-BOTTOM REPRODUCES A GAP THE FAMILY ENCODES IN ITS ARTWORK, NOT IN * CSS. Every informational icon has margin-bottom 0 and every H1 margin-top * 0 - the box-to-box distance is 0.00px on all four masters at all seven * widths. Their visible gap comes from the transparent tail baked into each * SVG (0.18917 of box width) plus the H1's half-leading, giving a painted * artwork-bottom to H1-glyph-top of 45.75px at >=640 and 38.54px below. * Charlie's tail is only 0.08047 of box width - (292/276) - 0.97750, and the * ASPECT TERM IS LOAD-BEARING: treating the canvas as square gives 0.02250 * and overshoots the gap by 8.48px. The difference is made up here: * 37.2569 - 11.7838 = 25.4731px at >=640, 31.9358 - 10.1008 = 21.8350px * below. Measured result 45.74px / 38.53px. * * Re-canvassing the PNG to carry the family's tail would remove the need for * margin-bottom entirely; it is excluded by the frozen asset normalization. */ .page-template-contributor .fp-info__icon { width: 125.5206px; margin-left: -17.3637px; margin-bottom: 21.8350px; } .page-template-accessibility .fp-info__icon { width: 168.8204px; margin-left: -39.6190px; } @media (min-width: 640px) { .page-template-about-us .fp-info__icon { width: 196.9493px; margin-left: -46.2204px; } .page-template-affiliate-disclosure .fp-info__icon { width: 196.9493px; margin-left: -46.2204px; } .page-template-privacy-policy .fp-info__icon { width: 196.9493px; margin-left: -46.2204px; } .page-template-terms-of-use .fp-info__icon { width: 196.9493px; margin-left: -46.2204px; } .page-template-cookie-policy .fp-info__icon { width: 196.9493px; margin-left: -46.2204px; } .page-template-editorial-methodology .fp-info__icon { width: 196.9493px; margin-left: -46.2204px; } .page-template-accessibility .fp-info__icon { width: 196.9493px; margin-left: -46.2204px; } .page-template-contributor .fp-info__icon { width: 146.4349px; margin-left: -20.2568px; margin-bottom: 25.4731px; } } @media (min-width: 1024px) { /* Offset to the centred column's left edge, then pull by the ink inset. */ .page-template-about-us .fp-info__icon { margin-left: calc(50% - 456.2204px); } .page-template-affiliate-disclosure .fp-info__icon { margin-left: calc(50% - 456.2204px); } .page-template-privacy-policy .fp-info__icon { margin-left: calc(50% - 456.2204px); } .page-template-terms-of-use .fp-info__icon { margin-left: calc(50% - 456.2204px); } .page-template-cookie-policy .fp-info__icon { margin-left: calc(50% - 456.2204px); } .page-template-editorial-methodology .fp-info__icon { margin-left: calc(50% - 456.2204px); } .page-template-accessibility .fp-info__icon { margin-left: calc(50% - 456.2204px); } .page-template-contributor .fp-info__icon { margin-left: calc(50% - 430.2568px); } } /* ═══════════════════════════════════════════════════════════ EDITORIAL METHODOLOGY — ADDITIVE, that page only Added 2026-08-23 at theme v3.29.0. ⚠ EVERY selector below is NEW and scoped to a NEW class. Nothing above this block was changed. The five FINAL/FROZEN pages match none of these selectors and render byte-identically. ⚠ DO NOT generalise any of these rules to .fp-info__section or to any shared class. The family was not redesigned to accommodate this page. The page carries 4,853 words. 51% of them sit inside
rows, so the density control is progressive disclosure plus the EXISTING 48px section rhythm — not new decorative components. No new type size, no new colour, no illustration, no tinted section beyond the one calculation panel below. ═══════════════════════════════════════════════════════════ */ /* ── 1 · Editorial principles ──────────────────────────── * Five compact cards. One column on mobile, two from 640; the fifth spans * both so the row never ends on a widow. Border + radius only — no shadow, * no tint, no icon. */ .fp-info__principles { display: grid; grid-template-columns: 1fr; gap: var(--fp-space-s); /* 16px */ margin: 0; padding: 0; list-style: none; } .fp-info__principle { border: 1px solid var(--fp-color-gray-200); border-radius: var(--fp-radius-card); /* 12px */ padding: 18px 20px; } .fp-info__principle-title { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0 0 8px 0; font-size: 17px; font-weight: var(--fp-weight-label); /* 600, not 700 — these sit under a 24px H2 and must not compete with it */ line-height: 1.35; color: var(--fp-color-navy); } .fp-info__principle-title span { color: var(--fp-color-green); /* the numeral only */ margin-right: 8px; } .fp-info__principle p { margin: 0; font-size: 16px; /* one step down from the 17px reading size: card copy, not body copy */ line-height: 1.58; color: var(--fp-color-gray-500); } /* ── 2 · Six-step evaluation process ───────────────────── * A counter-styled ordered list, single column at every width. Deliberately * NOT six cards: six boxes for six sequential steps reads as a grid of * options rather than a sequence, and doubles the vertical space. */ .fp-info__steps { margin: 0; padding: 0; list-style: none; counter-reset: fp-step; } .fp-info__step { position: relative; counter-increment: fp-step; padding-left: 44px; min-height: 32px; } .fp-info__step + .fp-info__step { margin-top: var(--fp-space-m); /* 24px */ } .fp-info__step::before { content: counter(fp-step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border: 1.5px solid var(--fp-color-gray-200); border-radius: var(--fp-radius-pill); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; font-weight: var(--fp-weight-label); /* 600 */ line-height: 27px; text-align: center; color: var(--fp-color-navy); } .fp-info__step p { margin: 0; font-size: 17px; line-height: 1.62; color: var(--fp-color-gray-500); } .fp-info__step strong { color: var(--fp-color-navy); font-weight: var(--fp-weight-label); /* 600 */ } /* ── 3 · The eight scoring dimensions ──────────────────── * 1 / 2 / 4 columns. At 4-across the cell is ~187px inside the 820px * measure, which fits the longest name — "Innovation & Differentiation" — * on two lines without hyphenation. */ .fp-info__dims { display: grid; grid-template-columns: 1fr; gap: var(--fp-space-s); /* 16px */ margin: 0; padding: 0; list-style: none; } /* v3.56.13: the lead-in paragraph -> dimensions joint takes the same paragraph rhythm as p + .fp-info__list (16px). With margin 0 on both the subtitle's descenders sat 3.5px above the columns' navy rules. */ .fp-info__section p + .fp-info__dims { margin-top: var(--fp-space-s); /* 16px */ } .fp-info__dim { border-top: 2px solid var(--fp-color-navy); padding-top: 12px; } .fp-info__dim-name { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; margin: 0 0 6px 0; font-size: 16px; font-weight: var(--fp-weight-label); /* 600 */ line-height: 1.3; color: var(--fp-color-navy); } .fp-info__dim p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fp-color-gray-500); } /* ── 4 · Worked-example calculation panel ──────────────── * The ONE tinted area on the page. It earns the tint because it is the only * place a reader is asked to follow arithmetic, and because the fictional- * provider disclosure must be impossible to skim past. */ .fp-info__calc { background: var(--fp-color-gray-50); border: 1px solid var(--fp-color-gray-200); border-radius: var(--fp-radius-card); /* 12px */ padding: 20px; margin: var(--fp-space-m) 0; /* 24px */ } .fp-info__calc-note { margin: 0 0 var(--fp-space-s) 0; /* 16px */ padding-left: 14px; border-left: 3px solid var(--fp-color-navy); font-size: 15px; line-height: 1.55; color: var(--fp-color-navy); } .fp-info__calc .fp-info__table-wrap { margin: 0; } .fp-info__calc-total td { font-weight: var(--fp-weight-heading); /* 700 */ color: var(--fp-color-navy); } /* The formula. One line, centred, navy — a statement, not a code block. */ .fp-info__formula { margin: var(--fp-space-m) 0; /* 24px */ padding: 16px 20px; border-top: 1px solid var(--fp-color-gray-200); border-bottom: 1px solid var(--fp-color-gray-200); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 18px; font-weight: var(--fp-weight-label); /* 600 */ line-height: 1.5; color: var(--fp-color-navy); text-align: center; } /* ── 5 · Accordion — category weights, glossary, FAQ ───── * PORTED from .fp-faq in article.css, NOT shared with it. * * ⚠ WHY PORTED. article.css is 24,653 bytes and carries the whole article * prose system, its table-of-contents axis and its provider components. * Enqueuing it here to reuse ~50 lines of accordion would drag all of it * onto a page family that has never loaded it. article.css is NOT edited * and NOT enqueued; these rules are a copy under a new class. * * ⚠ NATIVE
/, no JavaScript. Button semantics, * aria-expanded, Enter/Space, tab order, focus ring and open-on-find-in- * page all come from the browser. The complete text of every row is in the * initial server-rendered HTML — nothing is fetched, injected or * lazy-loaded. Progressive disclosure here is a reading affordance only. * Verified against production: collapsed rows ship their full text. */ .fp-info__accordion { border: 1px solid var(--fp-color-gray-200); border-radius: var(--fp-radius-button); /* 10px */ overflow: hidden; margin: var(--fp-space-m) 0 0 0; /* 24px */ } .fp-info__acc-item + .fp-info__acc-item { border-top: 1px solid var(--fp-color-gray-200); } .fp-info__acc-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--fp-space-s); /* 12px lands the row at 48px: 22.9px of label + 25px padding. This row is the control, and ch8 sets a 48x48 minimum, so it does NOT go below 48. */ padding: 12px 16px; cursor: pointer; list-style: none; } .fp-info__acc-summary::-webkit-details-marker { display: none; } .fp-info__acc-summary::marker { content: ""; } .fp-info__acc-summary:focus-visible { outline: 2px solid var(--fp-color-blue); outline-offset: -2px; } .fp-info__acc-title { margin: 0; /* Semantically an H3; visually a control label. 17px/600 at EVERY width, including mobile — readability matters most on small screens, so this does not step down. Labels wrap naturally. */ font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: var(--fp-weight-label); /* 600, not 700 */ line-height: 1.4; color: var(--fp-color-navy); } .fp-info__acc-title a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .fp-info__acc-chevron { flex: 0 0 auto; width: 11px; /* FROZEN — the family's approved optical size */ height: 7px; background-color: var(--fp-color-navy); -webkit-mask-image: url('../../images/icons/chevron-down.svg'); mask-image: url('../../images/icons/chevron-down.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; transition: transform 150ms ease; } .fp-info__acc-item[open] .fp-info__acc-chevron { transform: rotate(180deg); } .fp-info__acc-body { padding: 0 16px 16px; } .fp-info__acc-body p { margin: 0; font-size: 17px; font-weight: var(--fp-weight-body); line-height: 1.62; color: var(--fp-color-gray-500); } .fp-info__acc-body p + p { margin-top: var(--fp-space-s); /* 16px */ } /* The category tables sit inside an accordion body, so they lose the outer margin the standalone table carries. */ .fp-info__acc-body .fp-info__table-wrap { margin: var(--fp-space-s) 0 0 0; /* 16px */ } .fp-info__acc-total { margin: 12px 0 0 0; font-size: 14px; font-style: italic; color: var(--fp-color-gray-500); } /* ── Responsive ────────────────────────────────────────── * The grids step at the family's existing breakpoints. No new breakpoint is * introduced, and no existing media query above was edited. */ @media (min-width: 640px) { .fp-info__principles { grid-template-columns: 1fr 1fr; gap: var(--fp-space-m); /* 24px */ } /* The fifth card spans, so the row never ends on a widow. */ .fp-info__principle:last-child { grid-column: 1 / -1; } .fp-info__dims { grid-template-columns: 1fr 1fr; gap: var(--fp-space-m); /* 24px */ } .fp-info__calc { padding: 24px; } } @media (min-width: 1024px) { .fp-info__dims { grid-template-columns: repeat(4, 1fr); } } @media (prefers-reduced-motion: reduce) { .fp-info__acc-chevron { transition: none; } } /* ═══════════════════════════════════════════════════════════ 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. ═══════════════════════════════════════════════════════════ */ /* OPTICAL TOP - the vertical counterpart of the optical left alignment. The seven info/legal icons share one geometry: the drawing starts 32.75px below the image box at 196.9px wide (>= 640) and 28px at 168.8px (< 640), measured in the browser. A negative top margin lifts the box by that empty space less the gap, so the drawing sits 19.6-20.3px below the breadcrumb baseline; the box's transparent top overlaps the breadcrumb row, so the icon ignores the pointer and can never take a breadcrumb click. Everything below the icon moves up with it - the spacing between hero elements is unchanged. The artwork is not touched. */ .fp-info__icon { margin-top: -12px; pointer-events: none; } @media (min-width: 640px) { .fp-info__icon { margin-top: -16px; } } /* Contributor: a portrait photograph, not the icon family. Its visible content starts only 13.5px (< 640) / 15.75px (>= 640) inside the box. */ .page-template-contributor .fp-info__icon { margin-top: 3px; } @media (min-width: 640px) { .page-template-contributor .fp-info__icon { margin-top: 0; } } /* ═══════════════════════════════════════════════════════════ BREADCRUMB -> ICON (v3.56.8, info/legal family) Measured from the bottom of the breadcrumb's visible letters to the top of the icon's visible drawing. The family matches its shortest existing gap - 17.5px from 640, 16.8px below - set by the breadcrumbs that have descending letters (Privacy Policy, Cookie Policy, Accessibility, Editorial Methodology). About Us, Affiliate Disclosure and Terms of Use have none, so their letters end 2.65px higher and the icon lifts by the same amount. Contributor's photograph has its own inset (above). The icon -> heading distance is unchanged and already matches across the family to within 0.35px (the difference is letter shape: T vs A). If a breadcrumb label changes, re-measure this block. ═══════════════════════════════════════════════════════════ */ .page-template-about-us .fp-info__icon, .page-template-affiliate-disclosure .fp-info__icon, .page-template-terms-of-use .fp-info__icon { margin-top: -14.65px; } .page-template-contributor .fp-info__icon { margin-top: -0.15px; } @media (min-width: 640px) { .page-template-about-us .fp-info__icon, .page-template-affiliate-disclosure .fp-info__icon, .page-template-terms-of-use .fp-info__icon { margin-top: -18.65px; } .page-template-contributor .fp-info__icon { margin-top: -1.65px; } } /* v3.57.78 - Editorial Methodology v2 tables, supplied as EDITORIAL-METHODOLOGY-TABLES-v2.css (appended verbatim). */ /* Editorial Methodology v2. Append after the shared informational-page rules. */ .fp-methodology .fp-methodology__criterion-heading { margin: 28px 0 12px; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--fp-color-navy); scroll-margin-top: 24px; } .fp-methodology .fp-methodology__table { table-layout: fixed; width: 100%; } .fp-methodology .fp-methodology__table th, .fp-methodology .fp-methodology__table td { min-width: 0; white-space: normal; overflow-wrap: anywhere; box-sizing: border-box; } .fp-methodology .fp-methodology__table--3 col:nth-child(1) { width: 40%; } .fp-methodology .fp-methodology__table--3 col:nth-child(2) { width: 12%; } .fp-methodology .fp-methodology__table--3 col:nth-child(3) { width: 48%; } .fp-methodology .fp-methodology__table--2 col:nth-child(1) { width: 80%; } .fp-methodology .fp-methodology__table--2 col:nth-child(2) { width: 20%; } .fp-methodology .fp-methodology__table th:nth-child(2), .fp-methodology .fp-methodology__table td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; } .fp-methodology .fp-info__body > [id] { scroll-margin-top: 24px; } @media (max-width: 639px) { .fp-methodology .fp-methodology__table colgroup { display: none; } .fp-methodology .fp-methodology__table td:nth-child(2) { text-align: left; } } .fp-methodology .fp-methodology__anchor { display: block; scroll-margin-top: 24px; } /* v3.57.79 - Editorial Methodology body links (Work QA of v3.57.78, F2). The two links in the page body are bare anchors and inherited the parent theme's #1E73BE and browser focus ring. Core Blue on every state (GeneratePress re-colours a:hover / a:visited at equal specificity), inherited type, existing underline kept, visible keyboard focus. Scoped to this page. */ .fp-methodology .fp-info__body a, .fp-methodology .fp-info__body a:visited, .fp-methodology .fp-info__body a:hover, .fp-methodology .fp-info__body a:active { color: var(--fp-color-blue); font: inherit; text-decoration: underline; text-underline-offset: 2px; } .fp-methodology .fp-info__body a:focus-visible { outline: 2px solid var(--fp-color-blue); outline-offset: 2px; border-radius: 2px; } /* ── v3.57.136 — CUSTOM 404 (404.php) ──────────────────────── * Page-specific block, like the icon blocks above; the shared system is untouched. The 404 has no breadcrumb and no * icon, which is what gives the other pages their space above the H1, so it takes the section's own bottom padding as * its top padding. The two links sit on one row with a 24px gap and wrap onto two lines when the column is narrow. */ .error404 .fp-info { padding-top: var(--fp-space-xxl); /* 64px - matches the section's bottom padding */ } .fp-404__links { display: flex; flex-wrap: wrap; column-gap: var(--fp-space-m); /* 24px */ row-gap: var(--fp-space-xs); /* 8px */ margin: var(--fp-space-m) 0 0; } /* 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-info__link:hover, a.fp-info__link:focus, a.fp-info__link:focus-visible, a.fp-info__link:active { color: var(--fp-color-blue); }