/*
* ═══════════════════════════════════════════════════════════════════
* SYNC FINANCIAL PLANNING LLC — DESIGN SYSTEM
* Version 1.0 | syncfinancialplanning.org
* ═══════════════════════════════════════════════════════════════════
*
* HOW TO USE
* ──────────
* Add this single line to the of every page, BEFORE any
* page-specific styles:
*
*
*
* All tokens, typography, nav, footer, and component styles live
* here. Changes made in this file propagate instantly to every page.
*
* ═══════════════════════════════════════════════════════════════════
* TABLE OF CONTENTS
* ═══════════════════════════════════════════════════════════════════
*
* 1. FONTS Google Fonts import
* 2. TOKENS Colour, spacing, and radius variables
* 3. RESET Box model and base defaults
* 4. TYPOGRAPHY Type scale, headings, body text
* 5. LOGO .logo-sync .logo-fin .logo-plan
* 6. NAV Navigation bar and CTA button
* 7. FOOTER Footer layout and logo lockup
* 8. BUTTONS .btn-primary .btn-ghost .cta-book
* 9. SERVICE NAV .svc-nav-strip .svc-nav-link
* 10. MASTHEAD .svc-masthead .svc-eyebrow .svc-h1
* 11. LAYOUT .container .two-col .three-col
* 12. COMPONENTS Cards, tables, callouts, timelines
* 13. CHARTS .chart-block .chart-canvas
* 14. CTA STRIP Page-bottom call to action
* 15. UTILITIES Spacing, colour helpers
*
* ═══════════════════════════════════════════════════════════════════
*/
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,300;
/* ══════════════════════════════════════════════════════════════════
1. FONTS
══════════════════════════════════════════════════════════════════ */
0,400;0,600;1,300;1,400&family=Source+Sans+3:wght@300;400;500;600&family=Open+Sans:wght@300;400;600;700;800&family=Open+Sans+Condensed:wght@300;700&display=swap');
/*
* TYPEFACE ROLES
* ──────────────
* Source Serif 4 Headings, large display text, stat numbers
* Source Sans 3 Body copy, UI labels, navigation links
* Open Sans 700 Logo wordmark "sync" — strong, geometric
* Open Sans 600 Logo descriptor "Financial"
* Open Sans Condensed 300 Logo tag "Planning LLC" — light, airy
*
* RATIONALE: Source Serif 4 brings editorial warmth and authority
* to a financial context without feeling stuffy. Source Sans 3 is
* clean and highly legible at small sizes. The Open Sans logo stack
* is distinct from body text so the mark reads as a proper identity.
*/
/* ══════════════════════════════════════════════════════════════════
2. TOKENS — edit here to restyle the entire site
══════════════════════════════════════════════════════════════════ */
:root {
/* ── Colour Palette ─────────────────────────────────────── */
/* Primary — dark navy. Used for nav, mastheads, headlines. */
--navy: #0c1f3f;
--navy-mid: #1a3460; /* slightly lighter — hover states, bands */
--navy-light: #2a4a7a; /* accent headers, secondary IO tables */
/* Gold — warm amber accent. CTAs, key stats, hover highlights. */
/* Matches Northwestern Mutual (#FFB81C) and Ritholtz (#FFB921). */
--gold: #FFB81C;
--gold-dark: #d4960f; /* hover state for gold elements */
/* Accent blue — softer complement to navy. Chart secondary colour, */
/* badge text on dark backgrounds, sub-labels. */
--accent: #8aafd4;
/* Neutrals */
--white: #ffffff;
--bg: #f7f8fa; /* off-white page background */
--rule: #d0d8e4; /* dividers, light borders */
--border: #e2e8f0; /* card borders */
/* Text */
--text: #1a1a2e; /* primary text — very dark navy-tinted */
--text-mid: #4a5568; /* body paragraphs */
--text-light: #718096; /* captions, meta, chart labels */
/* ── Chart Palette (colour-blind safe) ─────────────────── */
/* Navy / Gold / Teal / Orange — distinct under all major */
/* colour vision deficiencies (deuteranopia, protanopia). */
--chart-1: #0c1f3f; /* navy */
--chart-2: #FFB81C; /* gold */
--chart-3: #2E8B7A; /* teal */
--chart-4: #E06C1A; /* orange */
--chart-5: #2a4a7a; /* navy-light */
/* ── Spacing Scale ──────────────────────────────────────── */
--sp-xs: 4px;
--sp-sm: 8px;
--sp-md: 16px;
--sp-lg: 24px;
--sp-xl: 40px;
--sp-2xl: 64px;
/* ── Type Scale ─────────────────────────────────────────── */
--text-xs: 11px;
--text-sm: 13px;
--text-base: 17px; /* intentionally larger — readability-first */
--text-lg: 19px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 40px;
/* ── Radii ──────────────────────────────────────────────── */
--radius-sm: 2px;
--radius-md: 4px;
}
/* ══════════════════════════════════════════════════════════════════
3. RESET
══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
font-size: var(--text-base);
font-weight: 400;
line-height: 1.6;
color: var(--text);
background: var(--white);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
/* ══════════════════════════════════════════════════════════════════
4. TYPOGRAPHY
══════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
font-family: 'Source Serif 4', Georgia, serif;
font-weight: 600;
line-height: 1.2;
color: var(--navy);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p {
line-height: 1.75;
color: var(--text-mid);
font-weight: 300;
}
.eyebrow {
font-family: 'Source Sans 3', sans-serif;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
}
.label-sm {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--navy-light);
}
/* ══════════════════════════════════════════════════════════════════
5. LOGO
══════════════════════════════════════════════════════════════════
Markup:
sync
Financial
Planning LLC
══════════════════════════════════════════════════════════════════ */
.nav-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex-shrink: 0;
}
/* "sync" — the primary wordmark */
.logo-sync {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--white);
letter-spacing: 0.5px;
line-height: 1;
}
/* Thin vertical rule between wordmark and descriptor */
.logo-rule {
width: 1px;
height: 26px;
background: rgba(255, 255, 255, 0.22);
flex-shrink: 0;
}
.logo-text {
display: flex;
flex-direction: column;
gap: 3px;
}
/* "Financial" */
.logo-fin {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 10px;
font-weight: 600;
color: var(--white);
letter-spacing: 0.3px;
line-height: 1;
}
/* "Planning LLC" — condensed and light for contrast */
.logo-plan {
font-family: 'Open Sans Condensed', 'Open Sans', Arial Narrow, sans-serif;
font-size: 8.5px;
font-weight: 300;
color: var(--accent);
letter-spacing: 1.2px;
line-height: 1;
}
/* Footer logo variant — slightly smaller */
.footer-logo-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.footer-sync {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--white);
letter-spacing: 0.3px;
}
.footer-rule {
width: 1px;
height: 20px;
background: rgba(255, 255, 255, 0.18);
}
.footer-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.footer-fin {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 9px;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.3px;
}
.footer-plan {
font-family: 'Open Sans Condensed', 'Open Sans', Arial Narrow, sans-serif;
font-size: 7.5px;
font-weight: 300;
color: var(--accent);
letter-spacing: 0.8px;
}
/* ══════════════════════════════════════════════════════════════════
6. NAV
══════════════════════════════════════════════════════════════════ */
nav {
background: var(--navy);
border-bottom: 3px solid var(--navy-mid);
position: sticky;
top: 0;
z-index: 100;
}
.nav-inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: stretch;
height: 60px;
}
/* Left side — logo */
.nav-logo {
padding: 0 24px 0 0;
border-right: 1px solid rgba(255, 255, 255, 0.1);
margin-right: 0;
}
/* Nav links */
.nav-links {
display: flex;
align-items: stretch;
flex: 1;
}
.nav-links a {
display: flex;
align-items: center;
padding: 0 18px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
border-right: 1px solid rgba(255, 255, 255, 0.07);
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.nav-links a:hover {
background: var(--navy-mid);
color: var(--white);
}
/* Right side — CTA */
.nav-right {
margin-left: auto;
display: flex;
align-items: center;
padding: 0 20px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-cta {
font-size: 12px;
font-weight: 700;
color: var(--navy);
background: var(--gold);
padding: 7px 18px;
text-decoration: none;
letter-spacing: 0.3px;
transition: background 0.15s;
}
.nav-cta:hover {
background: var(--gold-dark);
color: var(--navy);
}
/* ══════════════════════════════════════════════════════════════════
7. FOOTER
══════════════════════════════════════════════════════════════════ */
footer {
background: #080f1e;
border-top: 3px solid var(--navy-mid);
padding: 32px 0;
}
.footer-inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.footer-disc {
font-size: 10px;
color: rgba(255, 255, 255, 0.28);
line-height: 1.65;
max-width: 520px;
text-align: center;
}
.footer-links {
display: flex;
gap: 20px;
flex-shrink: 0;
}
.footer-links a {
font-size: 11px;
color: rgba(138, 175, 212, 0.7);
text-decoration: none;
transition: color 0.15s;
}
.footer-links a:hover {
color: var(--white);
}
/* ══════════════════════════════════════════════════════════════════
8. BUTTONS
══════════════════════════════════════════════════════════════════ */
.btn-primary {
display: inline-block;
font-family: 'Source Sans 3', sans-serif;
font-size: 14px;
font-weight: 700;
background: var(--gold);
color: var(--navy);
padding: 12px 28px;
text-decoration: none;
letter-spacing: 0.3px;
border: 2px solid var(--gold);
transition: background 0.15s, border-color 0.15s;
white-space: nowrap;
}
.btn-primary:hover {
background: var(--gold-dark);
border-color: var(--gold-dark);
}
.btn-ghost {
display: inline-block;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
padding-bottom: 2px;
transition: color 0.15s, border-color 0.15s;
}
.btn-ghost:hover {
color: var(--white);
border-color: var(--white);
}
/* CTA strip button — same as btn-primary, available as alias */
.cta-book {
font-size: 13px;
font-weight: 700;
background: var(--gold);
color: var(--navy);
padding: 12px 32px;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.3px;
transition: background 0.15s;
}
.cta-book:hover {
background: var(--gold-dark);
}
/* ══════════════════════════════════════════════════════════════════
9. SERVICE NAV STRIP
══════════════════════════════════════════════════════════════════ */
.svc-nav-strip {
background: var(--bg);
border-bottom: 2px solid var(--navy);
}
.svc-nav-strip-inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 40px;
display: flex;
overflow-x: auto;
scrollbar-width: none;
}
.svc-nav-strip-inner::-webkit-scrollbar { display: none; }
.svc-nav-link {
padding: 12px 18px;
font-size: 11px;
font-weight: 700;
color: var(--text-mid);
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
border-bottom: 3px solid transparent;
transition: color 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.svc-nav-link:hover { color: var(--navy); }
.svc-nav-link.current {
color: var(--navy);
border-bottom-color: var(--gold); /* gold underline on active */
}
/* ══════════════════════════════════════════════════════════════════
10. SERVICE MASTHEAD
══════════════════════════════════════════════════════════════════ */
.svc-masthead {
background: var(--navy);
padding: 52px 0 44px;
border-bottom: 3px solid var(--navy-mid);
}
.svc-masthead-inner,
.svc-mast-inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 48px;
}
.svc-eyebrow {
font-family: 'Source Sans 3', sans-serif;
font-size: 11px;
font-weight: 600;
color: var(--accent);
letter-spacing: 2.5px;
text-transform: uppercase;
margin-bottom: 14px;
}
.svc-h1 {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 38px;
font-weight: 600;
line-height: 1.2;
color: var(--white);
margin-bottom: 14px;
letter-spacing: -0.3px;
}
.svc-sub {
font-size: 15px;
line-height: 1.72;
color: rgba(255, 255, 255, 0.62);
max-width: 540px;
font-weight: 300;
}
/* Stat badge — right side of masthead */
.svc-stat {
text-align: right;
border-left: 2px solid var(--navy-mid);
padding-left: 28px;
}
.svc-stat-num {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 38px;
font-weight: 600;
color: var(--gold); /* gold stat number — high impact */
line-height: 1;
}
.svc-stat-label,
.svc-stat-lbl {
font-size: 10px;
color: var(--accent);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 6px;
line-height: 1.5;
}
/* ══════════════════════════════════════════════════════════════════
11. LAYOUT
══════════════════════════════════════════════════════════════════ */
.container {
max-width: 1080px;
margin: 0 auto;
padding: 0 40px;
}
.section {
max-width: 1080px;
margin: 0 auto;
padding: 52px 40px;
}
.section-alt {
background: var(--bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* Service body sections */
.svc-body { padding: 52px 0; }
.svc-body-alt { padding: 52px 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.body-section { max-width: 1080px; margin: 0 auto; padding: 52px 40px; }
.body-section-alt { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
/* Grids */
.two-col, .two-up {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 52px;
align-items: start;
}
.two-col-wide, .two-up-wide {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 52px;
align-items: start;
}
.three-col, .three-up {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Section rule heading */
.section-head, .sec-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 14px;
border-bottom: 2px solid var(--navy);
margin-bottom: 28px;
}
.section-head-label, .sec-head-lbl, .section-head-lbl {
font-family: 'Source Sans 3', sans-serif;
font-size: 10px;
font-weight: 700;
color: var(--navy);
letter-spacing: 2.5px;
text-transform: uppercase;
}
.section-head-sub, .sec-head-sub {
font-size: 12px;
color: var(--text-light);
}
/* Body text helpers */
.svc-h2 {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 24px;
font-weight: 600;
color: var(--navy);
line-height: 1.25;
margin-bottom: 16px;
}
.body-text, .body-p {
font-size: 15px;
line-height: 1.75;
color: var(--text-mid);
font-weight: 300;
}
.body-text p + p,
.body-p + .body-p { margin-top: 14px; }
.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: var(--navy-light);
text-decoration: none;
margin-bottom: 28px;
letter-spacing: 0.5px;
transition: color 0.15s;
}
.back-link:hover { color: var(--navy); }
/* ══════════════════════════════════════════════════════════════════
12. COMPONENTS
══════════════════════════════════════════════════════════════════ */
/* ── Concept / Info Cards ─────────────────────── */
.concept-card, .info-card {
padding: 22px;
border: 1px solid var(--border);
border-top: 3px solid var(--navy);
background: var(--white);
}
.concept-card.gold, .info-card.gold { border-top-color: var(--gold); }
.concept-card.teal, .info-card.teal { border-top-color: #2E8B7A; }
.concept-label, .info-lbl {
font-size: 10px;
font-weight: 700;
color: var(--navy-light);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 8px;
}
.concept-title, .info-title {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 16px;
font-weight: 600;
color: var(--navy);
margin-bottom: 8px;
}
.concept-text, .info-body {
font-size: 13px;
line-height: 1.65;
color: var(--text-mid);
font-weight: 300;
}
/* ── IO Table (input/output two-column) ──────── */
.io-table {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--border);
margin: 28px 0;
}
.io-head {
background: var(--navy);
color: var(--white);
padding: 10px 16px;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.io-head-r, .io-head-b, .io-head-acc { background: var(--navy-light); }
.io-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid var(--bg);
font-size: 13px;
color: var(--text-mid);
font-weight: 300;
}
.io-row:last-child { border-bottom: none; }
.io-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--navy);
flex-shrink: 0;
}
.io-dot-r, .io-dot-b, .io-dot-acc { background: var(--navy-light); }
/* ── Metric Strip ────────────────────────────── */
.metric-strip {
display: grid;
border: 1px solid var(--border);
margin: 24px 0;
}
.metric-strip-4 { grid-template-columns: repeat(4, 1fr); }
.metric-strip-3 { grid-template-columns: repeat(3, 1fr); }
.metric-strip-2 { grid-template-columns: repeat(2, 1fr); }
.metric-item {
padding: 20px;
border-right: 1px solid var(--border);
}
.metric-item:last-child { border-right: none; }
.metric-num {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 26px;
font-weight: 600;
color: var(--gold); /* gold for key numbers */
line-height: 1;
margin-bottom: 4px;
}
.metric-lbl {
font-size: 10px;
color: var(--text-light);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 4px;
}
/* ── Callout Box (dark) ──────────────────────── */
.callout-box {
background: var(--navy);
padding: 20px 24px;
margin: 20px 0;
}
.callout-text {
font-size: 13px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.65);
font-weight: 300;
}
.callout-text strong {
color: var(--white);
font-weight: 700;
display: block;
margin-bottom: 4px;
}
/* ── Example Box (left-rule) ─────────────────── */
.example-box {
border-left: 3px solid var(--gold); /* gold accent on example boxes */
padding: 16px 20px;
background: var(--bg);
margin: 20px 0;
}
.example-lbl {
font-size: 10px;
font-weight: 700;
color: var(--gold-dark);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 8px;
}
.example-text, .example-txt {
font-size: 13px;
line-height: 1.65;
color: var(--text-mid);
font-weight: 300;
}
/* ── Timeline ────────────────────────────────── */
.timeline {
padding-left: 24px;
position: relative;
margin: 24px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 6px;
top: 4px;
bottom: 4px;
width: 1px;
background: var(--border);
}
.tl-item {
position: relative;
padding-bottom: 22px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
position: absolute;
left: -22px;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--gold); /* gold dots on timeline */
border: 2px solid var(--white);
box-shadow: 0 0 0 2px var(--navy);
}
.tl-lbl {
font-size: 10px;
font-weight: 700;
color: var(--navy-light);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 4px;
}
.tl-title {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 15px;
font-weight: 600;
color: var(--navy);
margin-bottom: 4px;
}
.tl-text, .tl-txt {
font-size: 13px;
line-height: 1.65;
color: var(--text-mid);
font-weight: 300;
}
/* ── Flow Strip (process pipeline) ─────────────── */
.flow-strip {
background: var(--navy-mid);
padding: 0;
}
.flow-inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
align-items: stretch;
}
.flow-box {
padding: 20px;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.flow-box:last-child { border-right: none; }
.flow-box-hi { background: rgba(255, 255, 255, 0.07); }
.flow-box-accent { background: rgba(255, 184, 28, 0.15); } /* subtle gold tint */
.flow-box-lbl {
font-size: 9px;
color: var(--accent);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
}
.flow-box-items {
font-size: 12px;
color: var(--white);
line-height: 2;
font-weight: 300;
}
/* ══════════════════════════════════════════════════════════════════
13. CHARTS
══════════════════════════════════════════════════════════════════ */
.chart-block, .chart-wrap {
background: var(--white);
border: 1px solid var(--border);
padding: 24px 24px 16px;
}
.chart-label, .chart-lbl {
font-family: 'Source Sans 3', sans-serif;
font-size: 10px;
font-weight: 700;
color: var(--navy);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 4px;
}
.chart-sub {
font-size: 12px;
color: var(--text-light);
margin-bottom: 18px;
font-weight: 300;
}
.chart-canvas { position: relative; height: 260px; }
.chart-canvas-sm { position: relative; height: 200px; }
/* ══════════════════════════════════════════════════════════════════
14. CTA STRIP
══════════════════════════════════════════════════════════════════ */
.cta-strip {
background: var(--navy);
padding: 48px 0;
border-top: 1px solid var(--navy-mid);
}
.cta-inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.cta-text h2 {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 24px;
font-weight: 600;
color: var(--white);
margin-bottom: 6px;
}
.cta-text p {
font-size: 14px;
color: rgba(255, 255, 255, 0.55);
font-weight: 300;
}
/* ══════════════════════════════════════════════════════════════════
15. UTILITIES
══════════════════════════════════════════════════════════════════ */
/* Colour text helpers */
.text-navy { color: var(--navy); }
.text-gold { color: var(--gold); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-mid); }
.text-light { color: var(--text-light); }
.text-white { color: var(--white); }
/* Background helpers */
.bg-navy { background: var(--navy); }
.bg-navy-mid { background: var(--navy-mid); }
.bg-light { background: var(--bg); }
.bg-white { background: var(--white); }
/* Margin / padding shorthands */
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }
.mb-xl { margin-bottom: var(--sp-xl); }
/* Divider */
hr.rule {
border: none;
border-top: 1px solid var(--border);
margin: var(--sp-xl) 0;
}
/*
* ═══════════════════════════════════════════════════════════════════
* END OF DESIGN SYSTEM
*
* To extend: add new component blocks at the bottom.
* To update: change a token in Section 2 — it cascades everywhere.
* To override: add page-specific styles in a separate