/* ============================================================
FOREFRONT ABM — Brand CSS
Version 1.0
Usage:
- Framer: paste hex values into Style Panel > Colors & Fonts
- Webflow: paste into Style Guide > Global Swatches
- Custom HTML: link this file in
- Any platform: use the values in this file as your source of truth
============================================================ */
/* ── Google Fonts Import ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
/* ── CSS Custom Properties (Design Tokens) ──────────────────── */
:root {
/* --- Brand Colors --- */
--color-navy: #0F1F3D; /* Primary — backgrounds, headings */
--color-teal: #0EA5E9; /* Accent — CTAs, links, highlights */
--color-teal-dark: #0369A1; /* Teal hover state */
--color-teal-light: #E0F2FE; /* Teal tint — backgrounds, tags */
--color-gold: #F59E0B; /* Emphasis — rules, badges, alerts */
--color-gold-light: #FEF3C7; /* Gold tint — subtle highlights */
/* --- Neutral Colors --- */
--color-white: #FFFFFF;
--color-bg: #F8FAFC; /* Off-white page background */
--color-bg-dark: #0A1628; /* Darkest navy — footer, hero dark sections */
--color-surface: #FFFFFF; /* Card backgrounds */
--color-border: #E2E8F0; /* Dividers, card borders */
--color-border-dark: #1E3A5F; /* Borders on navy backgrounds */
/* --- Text Colors --- */
--color-text: #1E293B; /* Primary body text */
--color-text-muted: #64748B; /* Secondary / caption text */
--color-text-faint: #94A3B8; /* Placeholder, disabled */
--color-text-white: #F1F5F9; /* Body text on dark backgrounds */
/* --- Typography --- */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold:800;
/* --- Type Scale (Desktop) --- */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-md: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.875rem; /* 30px */
--text-3xl: 2.25rem; /* 36px */
--text-4xl: 3rem; /* 48px */
--text-5xl: 3.75rem; /* 60px */
--text-hero: 4.5rem; /* 72px — hero headline only */
/* --- Line Heights --- */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.6;
--leading-relaxed:1.75;
/* --- Letter Spacing --- */
--tracking-tight: -0.03em; /* Large headings */
--tracking-normal: 0em;
--tracking-wide: 0.05em; /* Labels, caps */
--tracking-widest: 0.12em; /* Section labels e.g. "WHO WE SERVE" */
/* --- Spacing Scale --- */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-32: 8rem; /* 128px */
/* --- Layout --- */
--max-width: 1200px; /* Maximum content container width */
--max-width-narrow: 760px; /* Narrow content — blog, about */
--section-pad-y: var(--space-24); /* Desktop section vertical padding */
--section-pad-x: var(--space-8); /* Desktop section horizontal padding */
/* --- Border Radius --- */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-full: 9999px; /* Pills */
/* --- Shadows --- */
--shadow-sm: 0 1px 3px rgba(15, 31, 61, 0.08),
0 1px 2px rgba(15, 31, 61, 0.04);
--shadow-md: 0 4px 16px rgba(15, 31, 61, 0.10),
0 2px 6px rgba(15, 31, 61, 0.06);
--shadow-lg: 0 12px 40px rgba(15, 31, 61, 0.14),
0 4px 12px rgba(15, 31, 61, 0.08);
--shadow-teal: 0 4px 24px rgba(14, 165, 233, 0.25);
/* --- Transitions --- */
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 400ms ease;
/* --- Z-index Scale --- */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-nav: 100;
--z-modal: 1000;
}
/* ── Base Reset & Global Styles ─────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-family);
font-size: var(--text-md);
font-weight: var(--font-weight-regular);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
}
img, video {
max-width: 100%;
display: block;
}
a {
color: var(--color-teal);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-teal-dark);
}
/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family);
font-weight: var(--font-weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-navy);
}
h1 { font-size: var(--text-hero); font-weight: var(--font-weight-extrabold); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); }
h5 { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
p {
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--color-text-muted);
max-width: 65ch;
}
/* Section label — e.g. "WHO WE SERVE", "OUR APPROACH" */
.label {
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
color: var(--color-teal);
}
.label--gold {
color: var(--color-gold);
}
.label--muted {
color: var(--color-text-faint);
}
/* ── Layout Utilities ───────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--section-pad-x);
}
.container--narrow {
max-width: var(--max-width-narrow);
}
.section {
padding-block: var(--section-pad-y);
}
.section--navy {
background-color: var(--color-navy);
color: var(--color-text-white);
}
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 {
color: var(--color-white);
}
.section--navy p {
color: var(--color-text-white);
opacity: 0.8;
}
.section--dark {
background-color: var(--color-bg-dark);
}
.section--teal-light {
background-color: var(--color-teal-light);
}
.section--offwhite {
background-color: var(--color-bg);
}
/* ── Buttons ────────────────────────────────────────────────── */
/* Primary — Teal fill */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-family);
font-size: var(--text-base);
font-weight: var(--font-weight-semibold);
line-height: 1;
border-radius: var(--radius-md);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
text-decoration: none;
}
.btn--primary {
background-color: var(--color-teal);
color: var(--color-white);
border-color: var(--color-teal);
}
.btn--primary:hover {
background-color: var(--color-teal-dark);
border-color: var(--color-teal-dark);
color: var(--color-white);
box-shadow: var(--shadow-teal);
transform: translateY(-1px);
}
/* Secondary — Navy outline */
.btn--secondary {
background-color: transparent;
color: var(--color-navy);
border-color: var(--color-navy);
}
.btn--secondary:hover {
background-color: var(--color-navy);
color: var(--color-white);
}
/* Ghost — for dark backgrounds */
.btn--ghost {
background-color: transparent;
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.4);
}
.btn--ghost:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: var(--color-white);
color: var(--color-white);
}
/* Gold CTA — high emphasis */
.btn--gold {
background-color: var(--color-gold);
color: var(--color-navy);
border-color: var(--color-gold);
font-weight: var(--font-weight-bold);
}
.btn--gold:hover {
background-color: #D97706;
border-color: #D97706;
color: var(--color-navy);
transform: translateY(-1px);
}
/* Sizes */
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
/* ── Navigation ─────────────────────────────────────────────── */
.nav {
position: sticky;
top: 0;
z-index: var(--z-nav);
background-color: var(--color-navy);
border-bottom: 1px solid var(--color-border-dark);
padding-block: var(--space-4);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--section-pad-x);
}
.nav__logo img {
height: 36px;
width: auto;
}
.nav__links {
display: flex;
align-items: center;
gap: var(--space-8);
list-style: none;
}
.nav__links a {
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-white);
opacity: 0.8;
letter-spacing: var(--tracking-wide);
transition: opacity var(--transition-fast);
}
.nav__links a:hover {
opacity: 1;
color: var(--color-text-white);
}
.nav__cta {
/* The Book Audit CTA in nav */
}
/* ── Cards ──────────────────────────────────────────────────── */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card--navy {
background: var(--color-navy);
border-color: var(--color-border-dark);
color: var(--color-text-white);
}
.card--teal-accent {
border-top: 3px solid var(--color-teal);
}
.card--gold-accent {
border-top: 3px solid var(--color-gold);
}
/* ── Gold Rule / Divider ────────────────────────────────────── */
.rule {
display: block;
width: 48px;
height: 3px;
background-color: var(--color-gold);
border: none;
margin-block: var(--space-4);
}
.rule--full {
width: 100%;
height: 1px;
background-color: var(--color-border);
}
.rule--teal {
background-color: var(--color-teal);
}
/* ── Section Header Pattern ─────────────────────────────────── */
/* Use this pattern for every section header:
WHO WE SERVE
Mid-market companies...
Supporting copy...
*/
.section-header {
margin-bottom: var(--space-12);
}
.section-header--center {
text-align: center;
}
.section-header--center p {
margin-inline: auto;
}
/* ── Badges & Tags ──────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.badge--teal {
background-color: var(--color-teal-light);
color: var(--color-teal-dark);
}
.badge--navy {
background-color: var(--color-navy);
color: var(--color-white);
}
.badge--gold {
background-color: var(--color-gold-light);
color: #92400E;
}
/* ── Forms ──────────────────────────────────────────────────── */
.input {
width: 100%;
padding: var(--space-3) var(--space-4);
font-family: var(--font-family);
font-size: var(--text-base);
color: var(--color-text);
background-color: var(--color-white);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus {
border-color: var(--color-teal);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.input::placeholder {
color: var(--color-text-faint);
}
label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
margin-bottom: var(--space-2);
}
/* ── Responsive Typography ──────────────────────────────────── */
@media (max-width: 768px) {
:root {
--section-pad-y: var(--space-16);
--section-pad-x: var(--space-5);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
.nav__links {
display: none; /* Handle with JS hamburger menu */
}
}
@media (max-width: 480px) {
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
}
/* ── Framer Usage Notes ─────────────────────────────────────── */
/*
IN FRAMER:
1. Open Style Panel (right sidebar)
2. Under "Colors" click + to add each color above with its name
3. Under "Text Styles" create:
- Display: Inter, 72px, 800 weight, -0.03em tracking
- H1: Inter, 60px, 800 weight, -0.03em tracking
- H2: Inter, 48px, 700 weight, -0.03em tracking
- H3: Inter, 36px, 700 weight, -0.02em tracking
- Body Large: Inter, 18px, 400 weight, 1.75 line height
- Body: Inter, 16px, 400 weight, 1.6 line height
- Label: Inter, 12px, 600 weight, 0.12em tracking, uppercase
- Caption: Inter, 14px, 400 weight, 1.5 line height
4. Apply these styles globally — every new element inherits them
5. Never type a raw hex value in Framer — always pick from your named swatches
IN WEBFLOW:
1. Go to Style Guide panel
2. Add each color as a named swatch
3. Set up Global Typography under Site Settings > Fonts
4. Use Class names from this CSS directly in the style panel
5. Paste this file into Site Settings > Custom Code > Head
LOGO USAGE:
- On white/light backgrounds: use Logo_white.png (navy/teal version)
- On navy/dark backgrounds: use Logo_blue.png with teal F (not gold)
- Minimum logo width: 120px
- Clear space around logo: equal to the height of the F mark on all sides
- Never place logo on a busy or patterned background without a container
*/