/* ==========================================================================
brand-tokens.css — THE SINGLE SOURCE OF TRUTH FOR JOS WILLARD COACHING
--------------------------------------------------------------------------
Every color, font, and core size on the site comes from a variable defined
here. Later phases (style.css, the pages) must NEVER hard-code a hex value
or font name — they reference these tokens instead. Change a value here and
it updates everywhere.
These values were extracted from the LIVE site (www.joswillard.com) in
Phase 1 — they are the real brand, NOT the navy/amber/serif palette from the
jos-willard-home.html layout sample. Do not reintroduce that sample palette.
--------------------------------------------------------------------------
FONTS — the live site loads two Google Fonts. Add this to the
of every page (put it before style.css so the fonts are ready):
Why a Google Fonts instead of self-hosting the .woff2 files?
The brief's "self-host everything" rule is about IMAGES (no hotlinking from
the old builder's servers). Fonts from Google's CDN are a standard, reliable,
well-cached exception — simpler to maintain than managing font files, and the
live site itself pulled Lato/Alata the same way. If you ever DO want to
self-host them, swap the @font-face URLs and nothing else here changes.
========================================================================== */
:root {
/* ----------------------------------------------------------------------
COLOR PALETTE
Stored two ways:
--rgb-* = bare "r, g, b" triples, so you can do rgba(var(--rgb-x), .5)
for semi-transparent overlays (the hero needs this).
--color-* = ready-to-use color values for everything else.
---------------------------------------------------------------------- */
/* === OFFICIAL BRAND PALETTE =============================================
The full set below is the client's official brand palette. See the
"COLOR USAGE" notes in phase-2-brief.md for guidance on where each one
earns its place as we build out the rest of the site.
----------------------------------------------------------------------- */
/* Main brand teal — primary brand color.
Header/footer fills, dark sections, the hero overlay, primary headings. */
--rgb-brand: 20, 111, 142; /* #146F8E */
--color-brand: rgb(var(--rgb-brand));
/* Secondary brand — muted steel-blue.
Supporting role: secondary headings, icons, quieter accents, borders that
sit on or near the brand teal without competing with it. */
--rgb-secondary: 121, 151, 161; /* #7997A1 */
--color-secondary: rgb(var(--rgb-secondary));
/* Accent teal-green — the call-to-action / "Book a call" button color.
This is the real button color on the live site (#2FBDA7). Hover and
active are progressively darker shades of the same teal-green. */
--rgb-accent: 47, 189, 167; /* #2FBDA7 default button */
--color-accent: rgb(var(--rgb-accent));
--color-accent-hover: #2AAA96; /* hover + keyboard focus */
--color-accent-active:#259684; /* pressed / :active */
/* Back-compat alias — older code/briefs referred to this teal-green as
"alt-brand". Same value as --color-accent; kept so nothing breaks. */
--rgb-alt-brand: var(--rgb-accent);
--color-alt-brand: var(--color-accent);
/* Tertiary brand — light blue.
Soft section backgrounds, dividers, and the LIGHT end of gradients
(pairs with --color-brand for the hero/overlay and section tints). */
--rgb-tertiary: 163, 205, 217; /* #A3CDD9 */
--color-tertiary: rgb(var(--rgb-tertiary));
/* Back-compat alias — previously named "complementary". Same value. */
--rgb-complementary: var(--rgb-tertiary);
--color-complementary: var(--color-tertiary);
/* === TEXT ===============================================================
Default body copy is the softer charcoal (--color-text, #3E3E3E) — this
is intentional, the brand reads warmer than pure near-black. The darkest
near-black (--color-ink) is kept for occasional emphasis, not the default.
----------------------------------------------------------------------- */
/* Default body text — soft charcoal. The standard reading color across the
site: paragraphs, list items, most copy. Also fine for subheadings and
eyebrow labels. This is the DEFAULT — reach for it first. */
--color-text: #3E3E3E; /* #3E3E3E */
/* Darkest text — near-black. Use INTENTIONALLY and sparingly for emphasis:
a heading you want to hit harder, a key bolded phrase, high-contrast UI.
Not the default body color (that's --color-text above). */
--rgb-ink: 5, 6, 8; /* #050608 */
--color-ink: rgb(var(--rgb-ink));
--color-text-invert: #FFFFFF; /* text on dark / over-image areas */
/* Neutral greys — muted/secondary text and subtle UI. */
--color-muted: #6E6E6E; /* secondary / helper text */
--color-grey: #BABABC; /* faint labels, disabled */
/* === SURFACES & LINES =================================================== */
--color-bg: #FFFFFF; /* page background */
--color-bg-alt: #F6F7F9; /* off-white section background */
--color-border: #CCCCCC; /* hairline borders / inputs */
/* ----------------------------------------------------------------------
TYPOGRAPHY
---------------------------------------------------------------------- */
/* Font families. Primary = body copy, Secondary = headings/nav/buttons. */
--font-primary: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-secondary: 'Alata', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Weights actually available/used on the live site.
Lato ships 100/300/400/700/900; Alata ships 400 only. */
--weight-light: 300;
--weight-normal: 400;
--weight-bold: 700;
--weight-black: 900;
/* Type scale (the live site's heading sizes, converted to a sane rem scale).
These are the DESKTOP sizes; style.css can scale them down on mobile. */
--size-hero: 3.75rem; /* 60px — big hero headline */
--size-h1: 3rem; /* 48px — main page heading */
--size-h2: 2.5rem; /* 40px — section heading */
--size-h3: 1.375rem; /* 22px — small heading */
--size-h4: 1rem; /* 16px — sub heading / eyebrow */
--size-body: 1rem; /* 16px — body copy */
--size-nav: 0.875rem; /* 14px — nav menu (uppercase) */
/* Line heights */
--line-heading: 1.4;
--line-body: 1.6;
/* ----------------------------------------------------------------------
SHAPE
---------------------------------------------------------------------- */
--radius: 3px; /* the live site's button/border radius */
}