/* ============================================================================
FIND ADVICE — PORTABLE BRAND KIT (Harbour direction)
============================================================================
THE one file to make anything look like Find Advice. Plain CSS — works in a
standalone .html page, a Cloudflare Pages site, or alongside the Next.js app.
No build step, no Tailwind, no framework required.
USE IT:
(or copy this file in)
then put class="fa" on and use the variables / classes below. NEVER
hand-type a hex colour or a font name — if you are, you've drifted.
SOURCE OF TRUTH — this kit is a faithful, standalone MIRROR of the live FNA
form. Every value AND every component pattern below is lifted directly from:
· design-system/src/themes/find-advice.css (colour / font / geometry tokens)
· design-system/src/themes/structure.css (type scale, control metrics)
· design-system/src/components/fna/fields.tsx (buttons, inputs, chips, icons)
· design-system/src/components/fna/shell.tsx (topbar, stepper, Back/Continue nav)
So a page built from this kit renders the SAME as the form, not just "similar".
If those files change, change this file in the same commit (they are master).
LAWS carried from the form (don't break these — they ARE the brand):
- Text is Ink / dark Slate — NEVER light grey text (legibility law).
- Harbour Blue is the ONLY brand blue (#1A4FD6). No GitHub blue, no indigo.
- Growth green / Alert red ONLY for money movement and errors.
- Whisper shadows; borders do the work. PILL buttons. Flat Cloud background.
- Back is a GHOST (text-only) button; Continue is the wide primary, pushed right.
- Every number/dollar uses the numeric face with tabular-nums (.fa-num).
============================================================================ */
/* Display: Schibsted Grotesk · Body: Hanken Grotesk · Numerals: Archivo
(all free under the SIL Open Font License, served from Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&family=Archivo:wght@400..800&display=swap');
:root {
/* --- BRAND TOKENS (Harbour) -------------------------------------------- */
/* Surfaces */
--fa-cloud: #F6F8FB; /* page background */
--fa-white: #FFFFFF; /* card surface */
/* Text — always dark, never light grey */
--fa-ink: #0B1B33; /* primary text */
--fa-slate: #303D54; /* secondary text (deliberately dark) */
--fa-disabled: #475774; /* disabled labels — still dark, full opacity */
--fa-on-primary: #FFFFFF; /* text on a Harbour-blue fill */
/* Actions — Harbour Blue is the ONLY brand blue */
--fa-blue: #1A4FD6; /* primary actions, links, brand */
--fa-blue-pressed: #143FAE;
--fa-tint: #E9EFFC; /* secondary buttons, pills, selected */
--fa-tint-pressed: #DCE6FA;
--fa-track: rgba(26, 79, 214, 0.2); /* progress-bar track = primary/20 */
/* Lines + status */
--fa-mist: #E2E8F2; /* decorative hairlines, dividers, disabled fills */
--fa-control-line: #858DA3; /* input/select/chip boundary — meets WCAG 1.4.11 (3:1) */
--fa-growth: #0E7A4F; /* positive money movement ONLY */
--fa-alert: #C53A2B; /* errors ONLY */
--fa-alert-bg: #FBEFED;
/* Typefaces */
--fa-font-display: "Schibsted Grotesk", system-ui, sans-serif;
--fa-font-body: "Hanken Grotesk", system-ui, sans-serif;
--fa-font-numeric: "Archivo", ui-monospace, monospace; /* tabular-nums — signature rule */
/* Geometry */
--fa-radius-card: 16px;
--fa-radius-input: 12px;
--fa-radius-button: 999px; /* pills */
/* Elevation — whisper-quiet */
--fa-shadow-card: 0 1px 2px rgba(11, 27, 51, 0.04);
--fa-shadow-raised: 0 4px 16px rgba(11, 27, 51, 0.08);
/* --- STRUCTURE (relaxed / mobile-first 390px — the default) ------------ */
--fa-control-h: 50px; /* inputs, selects */
--fa-button-h: 52px;
--fa-row-h: 56px;
--fa-page-pad: 22px;
--fa-card-pad: 20px;
--fa-col: 28rem; /* the form's centred phone column (max-w-md = 448px) */
--fa-text-display: 31px; --fa-line-display: 1.08; --fa-track-display: -0.025em;
--fa-text-heading: 19px; --fa-line-heading: 1.25; --fa-track-heading: -0.015em;
--fa-text-body: 15px; --fa-line-body: 1.55;
--fa-text-label: 13px; --fa-line-label: 1.4;
--fa-text-caption: 11px; --fa-line-caption: 1.3; --fa-track-caption: 0.12em;
--fa-text-figure: 42px; --fa-line-figure: 1.05;
/* --- Parity aliases: the exact names the Next.js theme uses ------------- */
--t-color-page: var(--fa-cloud); --t-color-card: var(--fa-white);
--t-color-ink: var(--fa-ink); --t-color-slate: var(--fa-slate);
--t-color-disabled-text: var(--fa-disabled); --t-color-on-primary: var(--fa-on-primary);
--t-color-primary: var(--fa-blue); --t-color-primary-pressed: var(--fa-blue-pressed);
--t-color-tint: var(--fa-tint); --t-color-tint-pressed: var(--fa-tint-pressed);
--t-color-line: var(--fa-mist); --t-color-control-line: var(--fa-control-line);
--t-color-growth: var(--fa-growth); --t-color-alert: var(--fa-alert);
--t-color-alert-bg: var(--fa-alert-bg);
--t-radius-card: var(--fa-radius-card); --t-radius-input: var(--fa-radius-input);
--t-radius-button: var(--fa-radius-button);
--t-shadow-card: var(--fa-shadow-card); --t-shadow-raised: var(--fa-shadow-raised);
}
/* Desktop reading uplift (matches structure.css @768px — relaxed surfaces only). */
@media (min-width: 768px) {
:root {
--fa-text-display: 36px;
--fa-text-heading: 22px;
--fa-text-body: 17px;
--fa-text-label: 15px;
--fa-text-caption: 12px;
--fa-col: 48rem; /* md:max-w-3xl */
}
}
/* ============================================================================
BASE — add class="fa" to . Scoped so the kit never fights a host page
that only wants the tokens.
============================================================================ */
.fa {
margin: 0;
background: var(--fa-cloud);
color: var(--fa-ink);
font-family: var(--fa-font-body);
font-size: var(--fa-text-body);
line-height: var(--fa-line-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.fa *, .fa *::before, .fa *::after { box-sizing: border-box; }
.fa a { color: var(--fa-blue); text-underline-offset: 2px; }
.fa a:hover { color: var(--fa-blue-pressed); }
/* The centred phone column the whole form lives in (shell.tsx main). */
.fa-page { min-height: 100vh; background: var(--fa-cloud); }
.fa-col { width: 100%; max-width: var(--fa-col); margin: 0 auto; padding-inline: var(--fa-page-pad); }
/* ============================================================================
TYPE
============================================================================ */
.fa-display {
font-family: var(--fa-font-display); font-weight: 700;
font-size: var(--fa-text-display); line-height: var(--fa-line-display);
letter-spacing: var(--fa-track-display); color: var(--fa-ink); margin: 0;
}
.fa-heading {
font-family: var(--fa-font-display); font-weight: 600;
font-size: var(--fa-text-heading); line-height: var(--fa-line-heading);
letter-spacing: var(--fa-track-heading); color: var(--fa-ink); margin: 0;
}
.fa-body { font-family: var(--fa-font-body); font-weight: 400; font-size: var(--fa-text-body); line-height: var(--fa-line-body); color: var(--fa-ink); }
.fa-muted { color: var(--fa-slate); } /* secondary text — still dark, never grey */
.fa-label { font-family: var(--fa-font-body); font-weight: 600; font-size: var(--fa-text-label); line-height: var(--fa-line-label); color: var(--fa-ink); }
.fa-caption {
font-family: var(--fa-font-body); font-weight: 400;
font-size: var(--fa-text-caption); line-height: var(--fa-line-caption);
letter-spacing: var(--fa-track-caption); text-transform: uppercase; color: var(--fa-slate);
}
/* The form's step eyebrow: same caption, Harbour-blue. */
.fa-eyebrow { color: var(--fa-blue); }
/* Every number/dollar: numeric face + tabular-nums (the signature rule). */
.fa-num, .fa-figure {
font-family: var(--fa-font-numeric); font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.fa-figure { font-weight: 700; font-size: var(--fa-text-figure); line-height: var(--fa-line-figure); letter-spacing: -0.025em; color: var(--fa-ink); }
.fa-growth { color: var(--fa-growth); }
.fa-alert { color: var(--fa-alert); }
/* ============================================================================
CARDS (StepCard + CardHeading, fields.tsx)
============================================================================ */
.fa-card {
background: var(--fa-white); border: 1px solid var(--fa-mist);
border-radius: var(--fa-radius-card); box-shadow: var(--fa-shadow-card);
}
.fa-card-heading {
margin: 0; padding: 16px var(--fa-card-pad);
border-bottom: 1px solid var(--fa-mist);
font-family: var(--fa-font-display); font-weight: 600;
font-size: var(--fa-text-heading); color: var(--fa-ink);
}
.fa-card-body { padding: var(--fa-card-pad); display: grid; gap: 16px; }
/* ============================================================================
BUTTONS (exactly the form's BTN_PRIMARY / BTN_GHOST / BTN_SECONDARY)
============================================================================ */
.fa-btn, .fa-btn-ghost, .fa-btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: var(--fa-button-h); padding: 0 24px;
font-family: var(--fa-font-body); font-weight: 600; font-size: var(--fa-text-body);
border: 0; border-radius: var(--fa-radius-button);
cursor: pointer; transition: background .15s ease, transform .05s ease;
}
.fa-btn { background: var(--fa-blue); color: var(--fa-on-primary); }
.fa-btn:hover { background: var(--fa-blue-pressed); }
.fa-btn:active { transform: translateY(1px); }
.fa-btn:disabled { background: var(--fa-mist); color: var(--fa-disabled); cursor: not-allowed; }
.fa-btn:focus-visible,
.fa-btn-ghost:focus-visible,
.fa-btn-secondary:focus-visible { outline: 3px solid var(--fa-blue); outline-offset: 2px; }
/* GHOST = the real Back button: text-only, Harbour-blue, fills tint on hover. */
.fa-btn-ghost { background: transparent; color: var(--fa-blue); }
.fa-btn-ghost:hover { background: var(--fa-tint); }
.fa-btn-ghost:active { transform: translateY(1px); }
/* SECONDARY = soft tint fill (used for non-Back secondary actions). */
.fa-btn-secondary { background: var(--fa-tint); color: var(--fa-blue); }
.fa-btn-secondary:hover { background: var(--fa-tint-pressed); }
.fa-btn-secondary:active { transform: translateY(1px); }
/* STEP NAV — shell.tsx StepNav: ghost Back on the left, wide primary Continue
pushed to the right. Mirror it by putting .fa-btn-ghost + .fa-btn inside .fa-nav. */
.fa-nav { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.fa-nav .fa-btn { flex: 1; margin-left: auto; } /* Continue grows + right-aligns */
/* ============================================================================
INPUTS (INPUT_CLASS / SelectField / MoneyField, fields.tsx)
============================================================================ */
.fa-field { display: grid; gap: 8px; }
.fa-input, .fa-select, .fa-textarea {
width: 100%; height: var(--fa-control-h); padding: 0 16px;
background: var(--fa-white); color: var(--fa-ink);
font-family: var(--fa-font-body); font-size: 16px; /* 16px floor: stops iOS focus-zoom */
border: 1px solid var(--fa-control-line); border-radius: var(--fa-radius-input);
appearance: none;
}
.fa-textarea { height: auto; min-height: 96px; padding: 12px 16px; line-height: var(--fa-line-body); resize: vertical; }
.fa-input::placeholder, .fa-textarea::placeholder { color: var(--fa-slate); }
.fa-input:focus, .fa-select:focus, .fa-textarea:focus { outline: none; border-color: var(--fa-blue); }
.fa-input[aria-invalid="true"], .fa-textarea[aria-invalid="true"], .fa-select[aria-invalid="true"] {
border-color: var(--fa-alert); background: var(--fa-alert-bg);
}
/* Money input: $ adornment + numeric face (MoneyField). */
.fa-money { position: relative; }
.fa-money > .fa-money-sign {
position: absolute; top: 50%; left: 16px; transform: translateY(-50%);
font-family: var(--fa-font-numeric); color: var(--fa-slate); pointer-events: none;
}
.fa-money > .fa-input { padding-left: 30px; font-family: var(--fa-font-numeric); font-variant-numeric: tabular-nums; }
/* Select chevron wrapper. */
.fa-select-wrap { position: relative; }
.fa-select-wrap > .fa-select { padding-right: 40px; }
.fa-select-wrap > .fa-icon-chevron {
position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
color: var(--fa-slate); pointer-events: none;
}
.fa-error { font-family: var(--fa-font-body); font-size: var(--fa-text-label); color: var(--fa-alert); }
/* ============================================================================
CHIPS (CHIP_BASE / CHIP_ON / CHIP_OFF — pill radios & checkboxes)
============================================================================ */
.fa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-chip {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
padding: 0 16px; border-radius: var(--fa-radius-button);
border: 1px solid var(--fa-control-line); background: var(--fa-white);
font-family: var(--fa-font-body); font-size: var(--fa-text-label); color: var(--fa-ink);
cursor: pointer; user-select: none; transition: background .15s ease, border-color .15s ease;
}
.fa-chip:hover { background: var(--fa-tint); }
.fa-chip[aria-pressed="true"], .fa-chip.is-on {
border-color: var(--fa-blue); background: var(--fa-tint); color: var(--fa-blue);
}
/* ============================================================================
SHELL (shell.tsx topbar + stepper)
============================================================================ */
.fa-topbar { border-bottom: 1px solid var(--fa-mist); background: var(--fa-white); }
.fa-topbar-inner {
height: 56px; display: flex; align-items: center; justify-content: space-between;
max-width: var(--fa-col); margin: 0 auto; padding-inline: var(--fa-page-pad);
}
.fa-firm { font-family: var(--fa-font-display); font-weight: 600; font-size: var(--fa-text-heading); color: var(--fa-ink); }
.fa-firm > .fa-firm-sub { font-family: var(--fa-font-body); font-weight: 400; font-size: var(--fa-text-label); color: var(--fa-slate); }
/* "Saved" indicator with its dot (SaveDot). */
.fa-save { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fa-text-label); color: var(--fa-slate); }
.fa-save-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--fa-blue); }
/* Thin endowed-progress bar (Stepper): primary/20 track, primary fill. */
.fa-progress { height: 6px; background: var(--fa-track); border-radius: 999px; overflow: hidden; }
.fa-progress > .fa-progress-fill { height: 100%; background: var(--fa-blue); transform-origin: left; }
/* ============================================================================
ICONS — the form's exact inline SVGs (fields.tsx Chevron / Tick, InfoDot).
These render via the .fa-icon-* classes for sizing; paste the matching