/* =============================================================================
WonFlo — shared design tokens (Wave 7 marketing/resources system)
-----------------------------------------------------------------------------
The NEW marketing/resources pages (index.html, /resources/*) link this file
for a single source of truth on color, type, and layout tokens.
Fonts are loaded per-page via Google Fonts in the document
(preconnect + stylesheet) so each page keeps the prototype's load path:
display : Bricolage Grotesque
body : Hanken Grotesk
mono : Spline Sans Mono
NOTE: The legacy pages (privacy/terms/cookies, signup/welcome/founding) keep
their own inline token sets and DO NOT use this file. Do not retrofit them
here — the old orange theme and this slate/copper theme intentionally differ
for now (tracked as a follow-up visual-unification task).
========================================================================== */
:root {
/* Palette — slate / warm accent / cream / bone / charcoal / cool gray (+ shades) */
/* NOTE: the --copper* token NAMES are retained for ~42 downstream usages, but the
ramp is now logo orange (#ec4b1d), not copper. Rename to --accent* is a future
follow-up (out of scope here). */
--slate:#0F1B2D; --slate-2:#16243A; --slate-3:#0B1422;
--copper:#ec4b1d; --copper-light:#F2895E; --copper-deep:#2E1308;
--cream:#FAFAF7; --bone:#E8E5DC; --bone-2:#EFEDE4;
--charcoal:#1F2937; --gray:#6B7280; --slate-mute:#9FB0C3;
--line-dark:rgba(232,229,220,.12); --line-light:rgba(15,27,45,.10);
/* Semantic success accents (used by the cost-per-job calculator) */
--green:#9ED66E; /* on dark surfaces (e.g. profit on the slate results panel) */
--green-deep:#3B6D11; /* on light surfaces (e.g. the close-rate explorer) */
--error:#B42318; /* error/status text on light surfaces (capture forms) */
/* Type families (loaded via in each page ) */
--display:'Bricolage Grotesque',sans-serif;
--body:'Hanken Grotesk',sans-serif;
--mono:'Spline Sans Mono',monospace;
/* Layout */
--maxw:1120px;
}
/* =============================================================================
Site header — shared across the homepage (index.html) and every /resources
page, so the header lives in ONE place instead of being copied per file.
Scoped under .site-header on purpose: the resources pages use / for their page hero, so a bare header{} rule
would hijack those. The nav carries its OWN max-width (var(--maxw)) and
padding so the bar spans full site width regardless of a page's narrower
.wrap (the resources reading column is 720px). The CTA is fully styled here
under .site-header .nav so page-local .btn rules can't alter the header
button. Sticky is pure CSS; there is no mobile menu (links hide < 760px).
========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(15,27,45,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dark)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:66px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.site-header .brand{display:inline-flex;align-items:center;margin:0;font-family:var(--display);font-weight:700;font-size:21px;color:var(--cream);letter-spacing:-.02em}
.site-header .brand-logo{height:32px;width:auto}
.site-header .nav-links{display:flex;align-items:center;gap:30px}
.site-header .nav-links a{font-size:14px;color:var(--slate-mute);transition:color .2s}
.site-header .nav-links a:hover{color:var(--cream)}
.site-header .nav-cta{display:flex;align-items:center;gap:14px}
.site-header .nav .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:14px;padding:9px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s ease,background .2s ease,border-color .2s ease}
.site-header .nav .btn:hover{transform:translateY(-1px)}
.site-header .nav .btn-primary{background:var(--copper);color:var(--copper-deep)}
.site-header .nav .btn-primary:hover{background:#f15a2e}
.site-header .nav .btn .arr{transition:transform .2s ease}
.site-header .nav .btn:hover .arr{transform:translateX(3px)}
@media(max-width:760px){.site-header .nav-links{display:none}}