/* ══════════════════════════════════════════════════════════
FP-C-007 — Site Footer
Navy panel with rounded upper corners, five-column desktop
structure, green divider and centred legal navigation.
Production build of the approved reference — not a redesign.
══════════════════════════════════════════════════════════ */
/* ── Full width, constrained content ─────────────────────
* FP-C-007 is rendered on generate_after_footer, so it sits OUTSIDE
* #page as a page-level sibling and a plain block already spans the
* full width. The former workaround — width: 100vw with margin-left: 50%
* and transform: translateX(-50%) — existed only to escape the contained
* #page wrapper when the footer was wrongly nested inside .site-content.
* It is REMOVED: 100vw includes the classic scrollbar while the page does
* not, so it made the footer ~15px wider than the viewport, produced
* horizontal overflow and exposed a strip of page background at the right
* edge. Obsolete CSS written to compensate for the wrong DOM position.
* ──────────────────────────────────────────────────────── */
/* ── Behind the rounded corners ───────────────────────────
* Outside a 24px radius the footer's own background is transparent, so
* whatever sits behind it shows through both top corner cut-outs. The
* footer is a sibling of #page, so that is GeneratePress's site
* background — grey. This wrapper hugs the footer exactly and paints
* white behind it. It is the narrowest possible scope: no change to the
* body or site background, no change to the footer's width, radius,
* grid or height.
* ──────────────────────────────────────────────────────── */
.fp-footer-outer {
/* Owns BOTH the white transition area and the Why Trust -> Footer gap.
The white was previously on #page, GeneratePress's CONTAINED wrapper,
which spans only 120-1320 at a 1440 viewport — so the white stopped
at the container edge and left 120px of grey down each side. This
wrapper is a body-level sibling and therefore already full width, so
the white reaches both viewport edges with no full-bleed technique,
and we no longer style a parent-theme element at all. */
background-color: var(--fp-color-white);
padding-top: var(--fp-space-l); /* 32px + FP-C-006's own 64px = 96px */
}
/* ── Article + collection external content → footer boundary (v3.54.2) ──
*
* ⚠ EXTERNAL BOUNDARY ONLY. This rule changes the space BETWEEN the page's
* last content and the footer. It does not touch article or collection
* internals - not a section, FAQ, Glossary, References, table, provider
* module, card, image or typographic value moves, and article.css and
* collection.css are not modified at all. article.css is hard-frozen.
*
* WHY THESE TEMPLATES NEEDED IT. The stage keeps its own 64px closing
* padding - .fp-article (article.css:46) and .fp-collection
* (collection.css:53), the v3.40.75 "last painted page content -> footer =
* 64px" rule - and the wrapper above adds 32px at >=640 and 24px below, so
* the rendered boundary measured 96px / 88px. The governed major-section
* standard is --fp-section-gap: 80px at >=640, 64px below, which the homepage
* and the category pages already render. Audited 2026-09-22 across all 25
* surviving public URLs at 1440 / 1024 / 768 / 390.
*
* ⚠ THE STAGE'S 64px IS DELIBERATELY LEFT IN PLACE, so this supplies only the
* REMAINDER: --fp-section-gap - --fp-space-xxl resolves to 16px at >=640
* (64 + 16 = 80) and 0 at 390 (64 + 0 = 64). No literal is written here and
* no breakpoint is restated - the token already carries the breakpoint, so if
* the standard ever moves this follows it.
*
* ⚠ NOT APPLIED TO THE INFORMATIONAL / LEGAL / EDITORIAL FAMILY. About Us,
* Accessibility, Affiliate Disclosure, Contributor, Editorial Methodology,
* Privacy Policy, Cookie Policy and Terms of Use keep .fp-info's 64px and the
* wrapper's own padding - their standardized short-page treatment, which is
* intentional and stays.
*
* ⚠ NOT APPLIED TO Providers / Categories / Resources. Their whitespace comes
* from #page's 800px safety floor meeting limited current content, not from
* this boundary. That is a content question and must not be disguised here.
*
* Body classes verified against the rendered DOM on staging, not assumed. */
.page-template-article .fp-footer-outer,
.page-template-collection-landing .fp-footer-outer {
padding-top: calc(var(--fp-section-gap) - var(--fp-space-xxl));
}
.fp-footer {
background-color: var(--fp-color-navy);
color: var(--fp-color-white);
width: 100%;
/* Rounded TOP corners only. The bottom corners stay square because the
footer meets the bottom of the page — rounding them would reinstate
the floating-card reading the full-bleed change removed. */
border-top-left-radius: 24px;
border-top-right-radius: 24px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.fp-footer__inner {
box-sizing: border-box;
/* Same geometry as .fp-hero__container so the footer content sits on
the SAME left/right axis as every other homepage section. The former
1200px cap left the footer inset an extra 120px at 1440 and 150px at
1600 relative to the hero — it was the only section on the page that
did not align. */
max-width: 1500px;
margin: 0 auto;
padding: 40px var(--fp-margin-desktop) 24px;
}
/* ── Five-column grid ────────────────────────────────────
* Brand is widest; Categories is given room for its two long
* labels so they stay on one line at desktop (Bible §8).
* The columns are declared explicitly rather than auto-fit so
* the approved hierarchy cannot reorder itself. */
.fp-footer__columns {
display: grid;
/* Navigation columns are sized to their CONTENT, not to arbitrary
fractions: "Corporate Cards & Spend Management" needs 276px and
"Investing & Wealth Management" is close behind, so a proportional
track wrapped them. max-content gives each nav column exactly what
its longest label requires (Bible §8 — one line at desktop, and no
reduction of the approved typography to force a fit). Brand takes
the remainder. */
/* The three text navigation columns share the extra width with Brand
instead of Brand absorbing all of it: each is at least its own
max-content so no label wraps, and grows proportionally beyond that.
Social stays max-content — three fixed 48px circles have nothing to
gain from extra width. */
grid-template-columns:
minmax(0, 1.15fr)
minmax(max-content, 1.15fr)
minmax(max-content, 0.85fr)
minmax(max-content, 0.85fr)
max-content;
gap: 32px;
align-items: start;
}
/* ── Brand column ────────────────────────────────────────
* Keeps its own internal alignment: the logo creates a
* different visual structure to the navigation headings. */
.fp-footer__logo {
display: block;
width: 240px;
height: auto; /* ratio from the viewBox */
margin-bottom: 24px;
}
.fp-footer__tagline,
.fp-footer__copyright {
margin: 0;
font-size: var(--fp-font-body-s); /* 14px */
line-height: 1.85;
color: var(--fp-color-white);
}
.fp-footer__tagline { max-width: 260px; margin-bottom: 24px; }
.fp-footer__copyright { opacity: 0.92; }
/* ── Navigation columns ──────────────────────────────────
* Headings share a top baseline and the first link under each
* begins at a consistent vertical position, because every
* column uses the same heading margin and list reset. */
.fp-footer__col { min-width: 0; }
.fp-footer__heading {
margin: 0 0 20px;
font-size: var(--fp-font-body-m); /* 16px */
font-weight: 700;
line-height: 1.2;
/* v3.57.65 - Medium Green #6FC875 (approved palette) on the footer navy
#173F73: 5.11:1. The brand green #42B649 gave 4.02:1 at 16px bold.
These four column headings only; no other green is changed. */
color: #6FC875;
}
.fp-footer__list {
list-style: none;
margin: 0;
padding: 0;
}
.fp-footer__list li + li { margin-top: 10px; }
.fp-footer__link,
.fp-footer__legal-link {
color: var(--fp-color-white);
font-size: var(--fp-font-body-s); /* 14px */
line-height: 1.4;
text-decoration: none;
/* Navigation links are NOT CTAs (Bible ch. 54): plain text,
no box, no arrow, no icon. They underline on hover. */
}
.fp-footer__link:hover,
.fp-footer__legal-link:hover {
color: var(--fp-color-white);
text-decoration: underline;
}
.fp-footer__link:active,
.fp-footer__legal-link:active { color: var(--fp-color-green); }
/* :visited declared explicitly or the browser default purple shows. */
.fp-footer__link:visited,
.fp-footer__legal-link:visited { color: var(--fp-color-white); }
.fp-footer__link:focus-visible,
.fp-footer__legal-link:focus-visible {
outline: 2px solid var(--fp-color-green);
outline-offset: 3px;
border-radius: 2px;
}
/* v3.57.121 (BADGE-V1.1-PALETTE-CORRECTION.md, footer focus): the parent theme's a:focus colour (#222) made focused footer links
nearly invisible on navy. Footer links keep their white text while focused; the green ring above is the focus indicator.
Footer-scoped classes only - global link styling is unchanged. */
.fp-footer__link:focus,
.fp-footer__link:focus-visible,
.fp-footer__legal-link:focus,
.fp-footer__legal-link:focus-visible { color: var(--fp-color-white); }
/* ── Social ──────────────────────────────────────────────
* The circular treatment is CSS: transparent interior, green
* ring, white mark. Identical circle dimensions across all
* three, with the mark optically centred by flex. */
.fp-footer__social {
display: flex;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}
.fp-footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
box-sizing: border-box;
border: 2px solid var(--fp-color-green);
border-radius: 50%;
background-color: transparent;
color: var(--fp-color-white);
flex: 0 0 auto;
}
.fp-footer__social-link:hover { background-color: rgba(66, 182, 73, 0.16); }
.fp-footer__social-link:active { background-color: rgba(66, 182, 73, 0.28); }
.fp-footer__social-link:focus-visible {
outline: 2px solid var(--fp-color-green);
outline-offset: 3px;
}
/* v3.57.113 - the glyph stays white while the link has focus. The parent theme's default link focus colour (#222)
otherwise wins and turns the glyph dark on navy; the SVG follows currentColor. Ring, size and background unchanged. */
.fp-footer__social .fp-footer__social-link:focus,
.fp-footer__social .fp-footer__social-link:focus-visible {
color: var(--fp-color-white);
}
/* v3.57.145 r2 (N2, Work follow-up 2026-10-28) - and on mouse hover: GeneratePress's inline `a:hover` #222222 turned the glyph dark on
navy when the link had no focus. Background tint, ring, size and SVGs unchanged. */
.fp-footer__social .fp-footer__social-link:hover {
color: var(--fp-color-white);
}
.fp-footer__social-icon {
width: 20px;
height: 20px;
fill: currentColor; /* white mark */
display: block;
}
/* ── Divider and legal row ───────────────────────────────
* The legal row keeps its own breathing room and is never
* pulled upward to compensate for the taller Categories
* column (Bible §11). */
.fp-footer__divider {
border: 0;
border-top: 1px solid var(--fp-color-green);
margin: 32px 0 0;
opacity: 0.55;
}
.fp-footer__legal { padding: 20px 0 8px; }
.fp-footer__legal-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0 42px; /* 20 + 2px bar + 20 */
list-style: none;
margin: 0;
padding: 0;
}
/* Green separators between legal links, drawn in CSS (v3.56.11).
Each bar sits in the 42px column gap after its item, 20px from each link,
exactly where the old inline bar sat. It is absolutely positioned, so it
takes no width: the gap alone spaces the links, and a line's centring
never depends on whether a bar is shown.
A bar that ends a line would be stranded at the right of that line, so
assets/js/footer-legal.js marks the item before each line break with
.is-line-end and its bar is hidden. Hiding it cannot reflow the row, so the
marking is stable. Without JavaScript the row behaves as before. */
.fp-footer__legal-list li {
position: relative;
display: flex;
align-items: center;
}
.fp-footer__legal-list li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -22px; /* 20px past the link, 2px bar */
width: 2px;
height: 14px;
margin-top: -7px;
background-color: var(--fp-color-green);
}
.fp-footer__legal-list li.is-line-end::after { display: none; }
/* ══════════════════════════════════════════════════════════
TABLET — below 1200px
The five-column layout needs 1136px of usable width: Brand
255 (the logo alone is 240) + Categories 275 + Resource 149
+ Company 153 + Social 176, plus four 32px gaps. Below a
1200px viewport the Brand column is the one that gives, and
at 1024 it collapsed to 79px — far under the logo width.
The grid therefore reflows at 1200, not 1024: content is
rearranged rather than compressed (Bible §12).
══════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
.fp-footer__inner { padding: 40px var(--fp-margin-tablet) 24px; }
.fp-footer__columns {
grid-template-columns: 1fr 1fr;
gap: 40px 32px;
}
.fp-footer__brand { grid-column: 1 / -1; }
.fp-footer__tagline { max-width: 420px; }
}
/* ══════════════════════════════════════════════════════════
MOBILE — below 640px
Single column. All seven categories, the social links and
the legal navigation are all retained — content is never
removed to make the layout fit.
══════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
/* 24px + FP-C-006's own 24px = the 48px rhythm every other homepage
section gap uses at this width. Derived from measurement, not by
halving the desktop figure. */
.fp-footer-outer { padding-top: var(--fp-space-m); }
.fp-footer__inner { padding: 32px var(--fp-margin-mobile) 20px; }
/* Variant A. Four full-width stacked groups made the footer 1389px tall
at 375. Categories keeps the full width because "Corporate Cards &
Spend Management" needs 275px and would otherwise wrap; the three
shorter groups pair into two columns. No typography change, no
cramped spacing, no wrapping. Measured 1389 -> 1130 at 375. */
.fp-footer__columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 20px;
}
.fp-footer__brand { grid-column: 1 / -1; }
/* Categories — the only group that needs full width */
.fp-footer__col:nth-of-type(1) { grid-column: 1 / -1; }
/* 44px touch targets on mobile, matching the site-wide precedent. */
.fp-footer__link,
.fp-footer__legal-link {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.fp-footer__list li + li { margin-top: 0; }
.fp-footer__divider { margin-top: 32px; }
/* 12px either side of the bar on phones (v3.56.11: a 26px column gap
with the bar 12px past each link, as the old 0 12px margin gave). */
.fp-footer__legal-list { column-gap: 26px; }
.fp-footer__legal-list li:not(:last-child)::after { right: -14px; }
}
/* ── Contact column ──────────────────────────────────────
* Added v3.31.0. Label and address are BLOCK-level spans, not a
pair:
* at 375 the
form concatenated ("Partnershipspartners@...") — verified
* by render before this markup was chosen.
*
* At <640px Contact spans the full row. Its natural half-width column forced
* partners@financeprospector.com to break mid-word; full width renders all
* three addresses on one unbroken line each (DOM-verified, 1 client rect).
* Follow Us then takes its own full-width row beneath Contact.
* ──────────────────────────────────────────────────────── */
.fp-contact-item { margin-bottom: 16px; }
.fp-contact-item:last-child { margin-bottom: 0; }
.fp-footer__list--contact .fp-footer__link { display: block; }
.fp-contact-label { display: block; font-weight: 600; line-height: 1.4; }
.fp-contact-mail { display: block; font-size: .92em; line-height: 1.5; opacity: .92; overflow-wrap: anywhere; }
@media (max-width: 639px) {
.fp-footer__col--contact { grid-column: 1 / -1; }
.fp-footer__col--social { grid-column: 1 / -1; margin-top: 28px; }
.fp-contact-item { margin-bottom: 20px; }
}
/* ── R4 FOOTER COMPACTION — approved 2026-08-23 ───────────────
* Measured: 1440 = 485.0px · 768 = 949.0px · 375 = 1305.0px.
* All three shorter than the v3.31.0 footer (541.5 / 1012.8 / 1353.2).
* CSS ONLY — the footer template is unchanged.
*
* Desktop: named areas let Follow Us sit under Brand without waiting for the
* tallest nav column, removing 56.3px of dead row-1 space. The earlier
* 453.1px variant nested Social inside .fp-footer__brand in the DOM; that
* architecture was rejected for its tablet/mobile behaviour. The 31.9px
* difference is exactly the desktop grid row-gap.
*
* Mobile: only Brand, Contact and Follow Us span the full row. Resources and
* Company keep their side-by-side pairing — forcing a single column added
* ~190px and was the real cause of the mobile height, not section spacing.
* ──────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
.fp-footer__columns {
grid-template-areas:
"brand cats res comp contact"
"social cats res comp contact";
grid-template-rows: auto auto;
align-items: start;
}
.fp-footer__brand { grid-area: brand; }
.fp-footer__col--social { grid-area: social; margin-top: 28px; }
.fp-footer__columns > .fp-footer__col:nth-of-type(1) { grid-area: cats; }
.fp-footer__columns > .fp-footer__col:nth-of-type(2) { grid-area: res; }
.fp-footer__columns > .fp-footer__col:nth-of-type(3) { grid-area: comp; }
.fp-footer__columns > .fp-footer__col:nth-of-type(4) { grid-area: contact; }
}
@media (max-width: 1023px) {
.fp-footer__columns { grid-template-areas: none; row-gap: 28px; }
}
@media (max-width: 639px) {
.fp-footer__columns { row-gap: 20px; }
.fp-footer__brand,
.fp-footer__col--contact,
.fp-footer__col--social { grid-column: 1 / -1; }
}
.fp-footer__inner { padding-top: 32px; padding-bottom: 16px; }
.fp-footer__divider { margin-top: 24px; }
.fp-footer__legal { padding-top: 16px; }
/* ══════════════════════════════════════════════════════════
v3.57.132 - FOOTER ALIGNMENT (owner, OWNER-FOOTER-SPACING-AND-BASELINE-BRIEF.md). CSS only; markup, copy, links, colours,
sizes, weights and focus styles are unchanged, and below 1024px nothing changes.
1. EQUAL COLUMN INTERVALS. The four information columns were content-sized (max-content), so their starts fell at
unequal intervals (1440: 329 / 261 / 252px). They are now four IDENTICAL tracks - same minimum, same share of the
free space - so the intervals between their starts are equal at every width. 13rem (208px) is the floor because the
widest unbreakable item, partners@financeprospector.com, measures 204.65px; a long label such as "Best Financial
Products & Services" (229px) wraps naturally where the track is narrower than it (about 1200-1330px).
2. BASELINE. Beside the columns the brand paragraph's first baseline sat 27.13px below the columns' first link row:
it sits at logo 43.83 + 24 + 17.50 = 85.33px from the column top, the first link at heading 19.2 + 20 + 19.0 =
58.2px. The four information columns therefore start 27.13px lower, so both lines share one baseline (headings keep
one shared top). The logo keeps a constant 43.83px box (its 240px width x 109.2661/598.3 viewBox ratio) with
object-fit: contain, so a narrower brand column scales the artwork inside the box without moving the paragraph.
3. 1024-1199px had a hybrid five-area grid that squeezed the brand column below the logo's width (135px at 1024). It
now uses the established stacked tablet pattern: brand row, the four equal columns in one row, Follow Us below.
══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
.fp-footer__columns {
/* Preserve 208px tracks when the base font is enlarged. */
grid-template-columns: minmax(0, 1.15fr) repeat(4, minmax(208px, 1fr));
}
.fp-footer__logo {
width: 240px;
max-width: 100%;
height: 43.83px;
object-fit: contain;
object-position: left center;
}
.fp-footer__columns > .fp-footer__col:not(.fp-footer__col--social) { padding-top: 27.13px; }
}
@media (min-width: 1200px) and (max-width: 1279.98px) {
.fp-footer__columns { column-gap: 24px; } /* keeps the brand column at the logo's width class (208px at 1200) */
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
.fp-footer__columns {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-areas:
"brand brand brand brand"
"cats res comp contact"
"social social social social";
grid-template-rows: auto auto auto;
gap: 40px 32px;
}
.fp-footer__col--social { margin-top: 0; }
}