/* ============================================================
FrancoBridge design tokens + components
------------------------------------------------------------
One file. Loaded once in common/resourceSection.php, which
every page already includes, so every page inherits it.
Change a value here and it changes everywhere on the site.
Nothing in this file overrides existing styles: the tokens
live on :root (inert until used) and every class is prefixed
.fb- so it cannot collide with main.css or custom.css.
============================================================ */
:root {
/* ---------- Brand ----------
Forest green. 6.5:1 on white, and 6.5:1 for white text on
a filled button, so it passes WCAG AA both ways.
Change --fb-accent and the whole site follows. */
--fb-accent: #146B4F;
--fb-accent-hover: #0F5540;
--fb-accent-tint: #ECF3F1; /* pale wash: badges, active nav */
--fb-accent-tint-2: #DEEAE6; /* one step stronger: borders */
/* ---------- Ink ----------
Near-black rather than pure black. Pure #000 on white is
harsh at large sizes. */
--fb-ink: #1A1A1C; /* headings, primary text */
--fb-ink-2: #5B5B61; /* body copy — 7.0:1 on white */
--fb-ink-3: #6E6E73; /* small meta — 4.6:1, the floor */
/* ---------- Surfaces ---------- */
--fb-bg: #FFFFFF;
--fb-bg-2: #F5F5F7; /* alternating section band */
--fb-bg-3: #FAFAFB; /* table headers, sidebars */
--fb-hairline: #EDEDEF;
--fb-hairline-2: #E4E4E7;
/* ---------- Status ----------
Kept clearly apart from the brand green so "published" and
"brand" never read as the same thing. If you ever need a
success colour, use this one, not --fb-accent. */
--fb-ok: #1C6B2B;
--fb-ok-bg: #E8F5EA;
--fb-warn: #8A5A00;
--fb-warn-bg: #FFF4DD;
--fb-err: #A32B20;
--fb-err-bg: #FCECEA;
/* ---------- Type ----------
Manrope, loaded in resourceSection.php. The clamp() values
mean headings shrink on phones without a media query. */
--fb-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--fb-size-h1: clamp(38px, 5.4vw, 80px);
--fb-size-h2: clamp(28px, 3.6vw, 52px);
--fb-size-h3: 19px;
--fb-size-lede: clamp(17px, 1.5vw, 22px);
--fb-size-body: 17px;
--fb-size-sm: 15px;
--fb-size-xs: 13px;
--fb-track-tight: -0.036em; /* display headings */
--fb-track-snug: -0.022em; /* sub-headings */
/* ---------- Shape ---------- */
--fb-r-sm: 9px;
--fb-r: 14px;
--fb-r-lg: 18px;
--fb-r-xl: 20px;
--fb-pill: 999px;
/* ---------- Layout ---------- */
--fb-maxw: 1120px;
--fb-gutter: clamp(20px, 3vw, 32px);
/* Vertical rhythm between sections. This is the single biggest lever on how
airy or how tight the whole site feels — two bands meeting means twice
this value of empty space, so raise it in small steps. */
--fb-band-y: clamp(44px, 6vw, 80px);
/* ---------- Elevation ---------- */
--fb-shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.06);
--fb-shadow-hero: 0 2px 6px rgba(0,0,0,.05), 0 28px 70px rgba(0,0,0,.13);
}
/* ============================================================
COMPONENTS
Use these class names in new markup. Existing pages keep
working untouched; migrate them one at a time.
============================================================ */
/* ---------- Layout ---------- */
.fb-band { padding: var(--fb-band-y) var(--fb-gutter); background: var(--fb-bg); }
.fb-band--alt { background: var(--fb-bg-2); }
.fb-wrap { max-width: var(--fb-maxw); margin: 0 auto; }
.fb-center { text-align: center; }
/* ---------- Type ---------- */
.fb-h1 {
font-family: var(--fb-font);
font-size: var(--fb-size-h1);
line-height: 1.04;
font-weight: 800;
letter-spacing: -0.042em;
color: var(--fb-ink);
margin: 0 0 24px;
}
.fb-h2 {
font-family: var(--fb-font);
font-size: var(--fb-size-h2);
line-height: 1.1;
font-weight: 800;
letter-spacing: var(--fb-track-tight);
color: var(--fb-ink);
margin: 0 0 20px;
}
.fb-h3 {
font-family: var(--fb-font);
font-size: var(--fb-size-h3);
line-height: 1.3;
font-weight: 700;
letter-spacing: var(--fb-track-snug);
color: var(--fb-ink);
margin: 0 0 9px;
}
.fb-lede { font-size: var(--fb-size-lede); line-height: 1.55; color: var(--fb-ink-2); margin: 0 0 26px; }
.fb-body { font-size: var(--fb-size-body); line-height: 1.6; color: var(--fb-ink-2); margin: 0 0 18px; }
.fb-small { font-size: var(--fb-size-sm); line-height: 1.58; color: var(--fb-ink-2); }
.fb-meta { font-size: var(--fb-size-xs); line-height: 1.55; color: var(--fb-ink-3); }
/* Accent word inside a heading: Hire one.
*/
.fb-accent { color: var(--fb-accent); font-style: normal; }
/* ---------- Buttons ---------- */
.fb-btn {
display: inline-block;
font-family: var(--fb-font);
font-size: 17px;
font-weight: 600;
line-height: 1;
padding: 17px 36px; /* keeps the tap target over 44px */
border-radius: var(--fb-pill);
border: 1px solid transparent;
text-decoration: none;
cursor: pointer;
transition: background-color .15s ease, color .15s ease;
}
.fb-btn--primary { background: var(--fb-accent); color: #fff; }
.fb-btn--primary:hover { background: var(--fb-accent-hover); color: #fff; }
.fb-btn--ghost { background: var(--fb-bg); color: var(--fb-ink); border-color: var(--fb-hairline-2); }
.fb-btn--ghost:hover { background: var(--fb-bg-2); color: var(--fb-ink); }
.fb-btn--sm { font-size: 14.5px; padding: 11px 20px; }
/* Text link with a chevron — the Apple-style secondary action.
Write the chevron in the markup: See how it works › */
.fb-link { font-size: 17px; font-weight: 500; color: var(--fb-accent); text-decoration: none; }
.fb-link:hover { color: var(--fb-accent-hover); text-decoration: underline; }
/* ---------- Surfaces ---------- */
.fb-card {
background: var(--fb-bg);
border-radius: var(--fb-r-lg);
padding: 26px 26px 28px;
}
.fb-card--bordered { border: 1px solid var(--fb-hairline); }
.fb-card--raised { box-shadow: var(--fb-shadow-card); }
/* Small label chips: $230 compliance fee, TEER 0–5 eligible */
.fb-pill {
display: inline-block;
font-size: 14.5px;
font-weight: 500;
color: var(--fb-ink);
background: var(--fb-bg-2);
border-radius: var(--fb-pill);
padding: 10px 18px;
}
.fb-pill--accent { color: var(--fb-accent); background: var(--fb-accent-tint); }
/* Status badge: Live */
.fb-badge {
display: inline-block;
font-size: 12.5px;
font-weight: 600;
border-radius: var(--fb-r-sm);
padding: 6px 11px;
}
.fb-badge--ok { color: var(--fb-ok); background: var(--fb-ok-bg); }
.fb-badge--warn { color: var(--fb-warn); background: var(--fb-warn-bg); }
.fb-badge--err { color: var(--fb-err); background: var(--fb-err-bg); }
/* ---------- Grid ---------- */
.fb-grid { display: grid; gap: 20px; }
.fb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fb-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* One breakpoint, not five. Everything collapses sensibly. */
@media (max-width: 900px) {
.fb-grid-3, .fb-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.fb-grid-2, .fb-grid-3, .fb-grid-4 { grid-template-columns: minmax(0, 1fr); }
.fb-btn { display: block; text-align: center; }
}
/* ---------- Neutralising main.css ----------
main.css justifies body copy and turns hyphenation on. That is what
produces rivers of white space between words and mid-word breaks like
"em-ployers". These are the only properties that need forcing.
text-align: inherit means alignment is decided once at the top of a
subtree instead of per element. */
#au-page *, #fbh-home *, #res-pub *, .fb-hero * {
hyphens: none !important;
-webkit-hyphens: none !important;
word-spacing: normal !important;
text-justify: auto !important;
text-align: inherit !important;
/* main.css also pins the LAST line of a block. Without this, every
paragraph centres correctly except its final line, which drops hard
left — "Quebec." and "representative." sitting alone at the margin.
It is a separate property from text-align and has to be reset too. */
text-align-last: auto !important;
-moz-text-align-last: auto !important;
}
/* The centring rules MUST outrank the reset above. Both carry !important,
so specificity decides: `#au-page *` scores 100 and a bare `.fb-center *`
only 10 — the reset would win and every centred block would fall left.
Repeating the page id lifts these to 110. Do not simplify these selectors
back to `.fb-center *`; that is the bug this comment exists to prevent. */
#au-page .fb-center, #au-page .fb-center *,
#fbh-home .fb-center, #fbh-home .fb-center *,
#res-pub .fb-center, #res-pub .fb-center *,
#res-pub .rg-hero, #res-pub .rg-hero *,
#res-pub .rg-cta, #res-pub .rg-cta *,
#res-pub .rg-empty, #res-pub .rg-empty *,
.fb-center.fb-center, .fb-center.fb-center *,
.fb-hero.fb-hero, .fb-hero.fb-hero * {
text-align: center !important;
text-align-last: center !important;
-moz-text-align-last: center !important;
}
/* ---------- Focus ----------
Visible keyboard focus everywhere. Do not remove. */
.fb-btn:focus-visible,
.fb-link:focus-visible,
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--fb-accent);
outline-offset: 3px;
border-radius: 4px;
}