/* ==========================================================================
JoCo Tech & AI — Brand stylesheet (LOCKED)
Brand version: v10 · Aug 2026
Single source of truth for color, type, spacing, shadow, and core components.
Accessibility: every text/background pairing below meets WCAG 2.1 AA.
Import this once, then build pages against the tokens & classes.
Fonts: add this to your before this stylesheet:
========================================================================== */
:root {
/* ---- Surfaces ---- */
--color-paper: #FBF8F2; /* page background (wheat cream) */
--color-paper-2: #F1EBDD; /* subtle alt background */
--color-surface: #FFFFFF; /* cards / panels (crisp white) */
--color-surface-2: #F7F1E6; /* nested / muted surface */
--color-mist: #CFD9DD; /* accent tint — stat tiles, callouts, section bands */
--color-mist-tint: #E6EDF0; /* very light mist wash */
/* ---- Ink (text) — always on light surfaces ---- */
--color-ink: #283318; /* primary text & headings (dark olive) — 10:1 on paper */
--color-ink-secondary:#4A3F35; /* secondary text (dark brown) */
--color-ink-muted: #3D3928; /* small print / captions (still ~10:1) */
/* ---- Brand accents ---- */
--color-olive: #617244; /* primary — buttons, accents (white text = AA) */
--color-olive-deep: #4F5F34; /* links, button hover, tag text */
--color-sage: #8A9E78; /* soft fills, tags, leaf */
--color-tan: #AFA58F; /* neutral accent */
--color-tan-2: #A68B70; /* warmer tan (logo leaf accent) */
--color-line: #D8CFBB; /* hairline borders */
/* ---- Data-viz palette (CHARTS ONLY — never for UI/brand) ---- */
--chart-green: #3C7A3A;
--chart-gold: #C1901C;
--chart-clay: #B5532E;
--chart-blue: #2F6EA8;
/* ---- Typography ---- */
--font-heading: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--fs-hero: clamp(2rem, 4.5vw, 3.25rem);
--fs-h1: clamp(1.75rem, 3.5vw, 2.5rem);
--fs-h2: 1.375rem;
--fs-h3: 1.125rem;
--fs-body: 1rem; /* 16px minimum for readability/508 */
--fs-small: 0.8125rem;
--lh-tight: 1.12;
--lh-body: 1.55;
/* ---- Spacing scale ---- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--container: 1080px;
/* ---- Radius ---- */
--radius-sm: 8px; --radius: 14px; --radius-lg: 18px; --radius-pill: 999px;
/* ---- Shadow (soft "shadow-boxing"; tuned so white cards pop on the light paper) ---- */
--shadow: 0 1px 2px rgba(40,51,24,.08), 0 10px 24px rgba(40,51,24,.15);
--shadow-lg: 0 3px 8px rgba(40,51,24,.08), 0 18px 40px rgba(40,51,24,.16);
/* ---- Top banner (the ONLY place a gradient is allowed) ---- */
--banner-gradient: linear-gradient(90deg,#283318 0%,#4f5f34 26%,#617244 46%,#8a9e78 70%,#bfcccd 88%,#cfd9dd 100%);
}
/* ==========================================================================
Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-ink); line-height: var(--lh-tight); letter-spacing: -0.01em; }
a { color: var(--color-olive-deep); text-underline-offset: 3px; }
small, .text-small { font-size: var(--fs-small); color: var(--color-ink-muted); }
.text-secondary { color: var(--color-ink-secondary); }
/* Accessibility utilities (508) */
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -999px; top: 0; background: var(--color-ink); color: #fff;
padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; z-index: 100;
}
.skip-link:focus { left: 0; }
:where(a, button, summary, input, [tabindex]):focus-visible {
outline: 3px solid var(--color-olive-deep); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* ==========================================================================
Layout
========================================================================== */
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--space-5); padding-right: var(--space-5); }
/* Top brand banner — field-to-sky gradient (thin accent, ~12px) */
.brand-banner { height: 12px; border-radius: 7px; background: var(--banner-gradient); }
/* ==========================================================================
Components
========================================================================== */
/* Buttons */
.btn {
display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 1rem;
background: var(--color-olive); color: #fff; text-decoration: none; cursor: pointer;
padding: 12px 22px; border: 0; border-radius: var(--radius-pill); line-height: 1;
}
.btn:hover { background: var(--color-olive-deep); }
.btn--ghost { background: transparent; color: var(--color-olive-deep); border: 1.5px solid var(--color-olive); font-weight: 600; }
.btn--ghost:hover { background: var(--color-surface-2); }
/* Card — crisp white, hairline outline + soft shadow */
.card {
background: var(--color-surface); border: 1px solid var(--color-line);
border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--space-5);
}
.card--mist { background: var(--color-mist); border-color: #c2ced2; }
/* Tag / pill */
.tag {
display: inline-block; background: var(--color-sage); color: var(--color-ink);
font-size: var(--fs-small); font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill);
}
.tag--tan { background: var(--color-tan); }
.tag--mist { background: var(--color-mist); }
/* Section band using the loved mist blue */
.band-mist { background: var(--color-mist-tint); border: 1px solid #cdd6da; border-radius: var(--radius-lg); }
/* Eyebrow / kicker */
.kicker { font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--color-olive-deep); font-weight: 800; }
/* Hairline divider */
.hr { border: none; border-top: 1px solid var(--color-line); }