/* ============================================================
ALKEMIA GROWTH — brand-tokens.css [RESOLVED — single system]
------------------------------------------------------------
ONE system, for the sKale homepage team. Resolved 2026-07-23.
DECISION: values are from SYSTEM A = the homepage, taken from the
NEWEST homepage file 06-page-homepage-aGrowth-v116.html (Jul 21),
which matches 06-page-homepage-aGrowth-final-draft-1.html (Jun 29).
The older Who We Are v30 / bios v7 "System B" (--terra / --mark-gold
/ --accent-gold #F4BF5C / --sage-tint) is SUPERSEDED — do not mix.
Everything here is copied verbatim from the homepage CSS EXCEPT the
three items tagged [NORMALIZED] (the homepage sets them ad hoc across
many one-off classes; the reusable form below is assembled from its
own values, not invented). Gaps are tagged [CONFIRM].
Full reasoning: brand-handoff-AUDIT.md.
============================================================ */
/* ---- Fonts (verbatim from homepage ) ---- */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Onest:wght@400;500;600;700&display=swap');
/* Preferred form:
*/
:root{
/* ---------- COLOR (System A / homepage :root, verbatim) ---------- */
--cream:#F8F1EA; /* page ground. SAFE only as background, or as text on dark */
--cream-card:#FBF6F0; /* raised card surface (slightly warmer than cream) */
--ink:#3d3318; /* BODY text — 11.13:1 on cream. SAFE. (darkest) */
--olive:#564823; /* HEADINGS, nav, footer ground, muted-text base — 7.99:1 on cream. SAFE */
--terracotta:#A55644; /* accent text: eyebrows, big numbers, links, italic emphasis — 4.67:1. SAFE (barely) */
--gold:#C9A53B; /* the ONLY gold. Structure (rings/borders/dividers) AND the primary CTA fill.
2.10:1 on cream — DECORATION / fills only, NEVER text on cream */
--sage:#B2B372; /* 1.96:1 — DECORATION ONLY (petal fill / texture). Never text on cream */
--display:"Marcellus",Georgia,"Times New Roman",serif; /* headings + body face */
--body:"Marcellus",Georgia,"Times New Roman",serif; /* homepage sets body = Marcellus too */
--ui:"Onest",-apple-system,BlinkMacSystemFont,sans-serif;/* labels, eyebrows, buttons, nav */
/* Muted text on cream = OLIVE at reduced alpha (rgba 86,72,35 = #564823), used inline in source: */
--olive-90:rgba(86,72,35,.90);
--olive-72:rgba(86,72,35,.72);
--olive-62:rgba(86,72,35,.62);
/* Muted text on DARK = cream at reduced alpha: */
--cream-90:rgba(248,241,234,.90);
--cream-72:rgba(248,241,234,.72);
/* accent-gold #F4BF5C is NOT a solid token in System A. Its value survives only as a
translucent glow / underline: */
--gold-glow:rgba(244,191,92,.75); /* footer underline / CTA glow accent */
/* [NORMALIZED] the homepage has no --maxw/--ease tokens; these are its recurring values: */
--maxw:1180px; /* dominant content max-width (nav bar itself is 1240px) [CONFIRM] */
--ease:cubic-bezier(.22,.61,.36,1); /* [CONFIRM] carried from prior system; homepage transitions vary */
}
/* ============================================================
BASE
============================================================ */
body{
background:var(--cream);
color:var(--ink); /* body is #3d3318 */
font-family:var(--body); /* Marcellus */
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
h1,h2,h3{
font-family:var(--display);
font-weight:400; /* Marcellus has only 400 */
color:var(--olive); /* headings are OLIVE, not ink, in System A */
line-height:1.1;
}
/* ============================================================
TYPE SCALE (System A, verbatim)
============================================================ */
.h-hero {font-size:clamp(1.9rem,7vw,2.5rem)} /* .hero-card h1 — the real homepage hero */
.h-section{font-size:clamp(1.9rem,3.4vw,2.7rem)} /* about-wrap h2 — largest section head */
.h-alt {font-size:clamp(1.8rem,3.4vw,2.6rem)} /* intro/testimonial h2 */
.h-labs {font-size:clamp(1.7rem,3vw,2.3rem)} /* labs-body h2 */
.nature-line{font-size:clamp(1.9rem,4vw,2.9rem)} /* on-dark display line */
.display-num{font-family:var(--display);font-size:2.9rem;line-height:1;color:var(--terracotta);letter-spacing:.01em}
.lede {font-size:1.08rem;color:var(--ink)} /* intro/section lede */
/* body ~1rem; small labels .67–.72rem; on-dark subs 1.05rem */
/* ============================================================
EYEBROW / LABELS ([NORMALIZED] base from .eyebrow; variants are real)
============================================================ */
.eyebrow{
font-family:var(--ui);
font-weight:600;
font-size:.72rem;
letter-spacing:.22em; /* base tracking (System A). NOTE: not .3em — that was System B */
text-transform:uppercase;
color:var(--terracotta); /* most common; some instances use --olive */
display:block;
}
.eyebrow--tight{letter-spacing:.12em;font-size:.68rem} /* hero-card eyebrow variant */
.mini-label{ /* tiny kicker; on dark it goes cream */
font-family:var(--ui);font-weight:700;font-size:.67rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);
display:inline-block;
}
.mini-label--on-dark{color:var(--cream-72)}
.stat-label{ /* .who-label / .labs-stat-label */
font-family:var(--ui);font-weight:600;font-size:.68rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--olive);opacity:.9;display:block;
}
.role{ /* .qrole — role kicker */
font-family:var(--ui);font-size:.7rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--olive-62);
}
/* ============================================================
BUTTONS (System A, verbatim — three variants)
============================================================ */
/* PRIMARY CTA — gold FILL, olive text. e.g. "Start a conversation" / "Choose how to work".
Contrast olive-on-gold = 3.8:1 → passes only as LARGE/BOLD button text (AA-large ≥3:1). */
.btn-gold{background:var(--gold);color:var(--olive)}
/* SECONDARY — terracotta fill, cream text (4.67:1). e.g. "Meet the team". */
.btn-terra{background:var(--terracotta);color:var(--cream)}
/* TERTIARY — ghost/outline. e.g. "Let's Talk". */
.btn-ghost{background:transparent;border:1px solid rgba(86,72,35,.4);color:var(--olive)}
/* shared layout for the above (the homepage's .links a / .btn spacing) */
.btn-gold,.btn-terra,.btn-ghost{
display:inline-block;font-family:var(--ui);font-weight:600;font-size:1rem;
padding:.95rem 2rem;border-radius:3px;text-decoration:none;
transition:transform .18s var(--ease),box-shadow .18s,filter .18s;
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(86,72,35,.18)}
/* ============================================================
CARDS (System A — has real elevation; NOT the flat System-B card)
============================================================ */
.card{
background:var(--cream-card);
border-radius:4px; /* System A radii: 2 / 3 / 4px, 50% — no 999px pills */
padding:2rem;
box-shadow:0 16px 40px rgba(86,72,35,.13); /* representative homepage card shadow */
}
.card-hover:hover{box-shadow:0 18px 44px rgba(86,72,35,.16);transform:translateY(-4px)}
/* Avatar / portrait ring — gold ring around a circular photo */
.avatar-ring{
border-radius:50%;padding:4px;background:var(--cream);
box-shadow:0 0 0 2px var(--gold),0 10px 24px rgba(86,72,35,.18);
}
.avatar-ring > img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
border:3px solid var(--cream)}
/* ============================================================
NAV (System A — simple flex bar, NOT sticky/translucent)
============================================================ */
.nav{
position:relative;max-width:1240px;margin:0 auto;padding:1.1rem 2rem;
display:flex;align-items:center;justify-content:space-between;
}
.nav a{font-family:var(--ui);color:var(--olive);text-decoration:none}
/* ============================================================
FOOTER (System A — DARK: olive ground, cream text)
============================================================ */
.site-footer{
position:relative;color:var(--cream);padding:3.5rem 2rem 2.2rem;
background:var(--olive); /* over a low-opacity texture + gradient scrim in source */
}
.foot-wrap{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;
align-items:center;flex-wrap:wrap;gap:1.5rem}
.site-footer a{color:var(--cream-90);text-decoration:none}
.site-footer a.underline{border-bottom:1px solid var(--gold-glow);padding-bottom:1px}
.foot-tag{font-size:.8rem;color:var(--cream-72);font-style:italic;font-family:var(--display)}
/* ============================================================
DARK BANDS (on-dark moments — olive ground, cream text, gold accent)
============================================================ */
.band-dark{background:var(--olive);color:var(--cream)}
.band-dark .accent{color:var(--gold)} /* gold reads legibly ON DARK (not on cream) */
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
*{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}