/* ============================================================
OmniOne family — shared brand theme
ONE stylesheet for every site/app/page in the ecosystem.
Home: projects/media-marketing/brand-kit/brand-theme.css
HOW TO USE
1. Link this file:
2. Wrap your page (or any section) in a theme class:
(teal — OmniOne / ETHOS / Teal-Paradigm)
(green — Green Earth Vision, TRACE)
3. Use the component classes below (.hero, .btn, .card, .nav, ...).
The SAME markup renders in whichever theme wraps it.
COLORS ARE LOCKED (Josh): OmniOne = TEAL · GEV = GREEN · gold = HAIRLINE ONLY
(never on buttons/text/base). Action button color is per-theme.
Cobalt is retired — do not add it.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&family=Newsreader:opsz,wght@6..72,200;6..72,300;6..72,400&family=Crimson+Pro:wght@400;600;700&family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Cormorant+Garamond:wght@500;600;700&family=Merriweather:wght@400;700&display=swap');
/* ⛔ FIXED 2026-09-01, reported by CTC: the four live themes name Work Sans, Newsreader,
Crimson Pro and Inter, and this import loaded NONE of them. Every app that linked the kit
was silently falling back to a system font, which is the worst kind of theme bug because
it looks like a rendering quirk rather than a missing file. All four are now loaded.
⛔ AND THE SAME BUG HAS A SECOND DOOR, reported by the Infinite Game app build 2026-09-09:
a BUNDLER (`import './brand-theme.css'` in Next/Vite/webpack) keeps every rule below and
drops this @import, so the app ships correct colours in a system font, silently.
⭐ LINK this file rather than importing it. If your build must bundle it, paste
`brand-fonts.html` into your and the faces come back. */
/* ---------- shared neutrals + role tokens ---------- */
:root{
--cream:#f6f1e7;
--cream-2:#efe7d6;
--ink:#0e2321;
--muted:#4a615e;
--gold:#c9a24b; /* HAIRLINE ONLY */
--hair:rgba(201,162,75,.32);
--radius:12px;
}
/* ============================================================
FOUR STYLES. Josh, 2026-09-01: "so that's four styles we should have."
GEV · OmniOne · SHUR · BEAM. Nothing else is a theme.
⛔ RETIRED IN THIS PASS, do not bring back:
.theme-omnione (old teal) Josh: "get rid of the old teal one because it
didn't include all the parallax and all the different subtle pieces."
.theme-gev (old flat green) superseded by the GEV system below.
.theme-nexus was a placeholder for BEAM. BEAM now has its own real theme,
measured from the shipped app, so the placeholder goes.
.scheme-deep / .scheme-light / .tandem-* my 2026-08-31 misreading. They came
from measuring joinseeds.earth at a 486px MOBILE viewport, which turned a
small highlight and a 30% vertical strip into full-bleed lime bands.
Josh: "you put giant blocks of the light green. It looks terrible."
============================================================ */
/* ---------- 1 · GEV: the SEEDS system, approved exactly (Josh, 2026-08-31) ----------
"we just approved the exactly like the seed site. Let's keep it like that."
Also cleared for reuse beyond GEV: "we can use that for some other things."
⭐ LIME IS A HIGHLIGHT, NEVER A FIELD. Measured on the reference at 1440px it is
8.87% of the page and almost all of that is ONE band. Permitted uses, and no others:
display type, eyebrow type, buttons, 20x1 hairlines, 5px dots, a thin alert strip,
and ONE vertical 70/30 split per page. There is no full-bleed horizontal lime band.
PHOTOGRAPHY CARRIES THE PAGE. Three full-bleed photo bands with
background-attachment:fixed. Forest is for text bands, cream and sage own the
lower half. Without photography this theme is half-dressed and will look flat.
------------------------------------------------------------------- */
.theme-gev{
--brand-900:#2B4835; --brand-800:#22392a; --brand-700:#2B4835;
--brand-600:#3a5f46; --brand-500:#2B4835; --brand-300:#2FF141;
--action:#2FF141; --action-hover:#28d939; --action-ink:#2B4835;
--accent:#2FF141;
--cream:#F2F5EC; /* sage, the default light ground */
--cream-2:#E9EDD9; /* cream, the second ground AND the text on dark */
--ink:#2B4835; --muted:rgba(43,72,53,.82);
--hair:rgba(43,72,53,.16);
--serif:'Newsreader',Georgia,serif; /* stands in for Cheltenham 300, licensed */
--sans:'Work Sans',system-ui,sans-serif;
--serif-body:'Work Sans',system-ui,sans-serif;
--radius:6px;
--lh-body:2; /* 16px on 32px. Measured. Much airier than a default. */
}
/* the type signature: light display, never bolded; eyebrows tight and sentence case */
.theme-gev h1,.theme-gev h2,.theme-gev h3{font-weight:300;text-transform:capitalize;letter-spacing:-.78px;line-height:1}
.theme-gev .eyebrow{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.8px;text-transform:capitalize}
.theme-gev .photoband{background-attachment:fixed;background-size:cover;background-position:center}
.theme-gev .split-lime{background:linear-gradient(to right,#2B4835 70%,#2FF141 70%)} /* the ONE large lime use */
/* ---------- 2 · OmniOne: the same system in teal ✅ APPROVED (Josh, 2026-09-01) ----------
"omnione teal for sure." Settled after seeing both pages rendered identically
with only the hue changed.
It is the GEV system with the hue rotated and NOTHING else changed: same type,
same accent-is-a-highlight rule, same photo bands, same rhythm, same 1100px measure.
⭐ SO THE TWO ARE ONE SYSTEM IN TWO HUES, not two designs. A fix to the shared
structure belongs in BOTH, and a change that applies to only one of them is a
signal that something is drifting.
Reference build: build/omnione-world.html
------------------------------------------------------------------- */
.theme-omnione{
--brand-900:#12403E; --brand-800:#0e3634; --brand-700:#12403E;
--brand-600:#1d5c58; --brand-500:#12403E; --brand-300:#2FF1D8;
--action:#2FF1D8; --action-hover:#28d9c2; --action-ink:#12403E;
--accent:#2FF1D8;
--cream:#ECF4F2; /* sage equivalent, teal-biased */
--cream-2:#DDEAE7; /* cream equivalent */
--ink:#12403E; --muted:rgba(18,64,62,.82);
--hair:rgba(18,64,62,.16);
--serif:'Newsreader',Georgia,serif;
--sans:'Work Sans',system-ui,sans-serif;
--serif-body:'Work Sans',system-ui,sans-serif;
--radius:6px;
--lh-body:2;
}
.theme-omnione h1,.theme-omnione h2,.theme-omnione h3{font-weight:300;text-transform:capitalize;letter-spacing:-.78px;line-height:1}
.theme-omnione .eyebrow{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-.8px;text-transform:capitalize}
.theme-omnione .photoband{background-attachment:fixed;background-size:cover;background-position:center}
.theme-omnione .split-lime{background:linear-gradient(to right,#12403E 70%,#2FF1D8 70%)}
/* ---------- 3 · SHUR "Sand" (Josh chose it himself, 2026-09-01) ----------
Source of record is HERE now. It shipped first inside shur-app/client/src/index.css,
and SHUR's own lane routed it to this file so the app stops being the source of a
theme the brand kit owns. ⚠️ If the app and this file disagree, THIS file is the
theme and the app is a copy that drifted.
Tan ground, white cards, one actionable brown. Clay is kept as a per-centre
variation; Linen was dropped.
⚠️ The header bar is dark ON PURPOSE, measured: the gold in the logo sits at
1.55:1 on tan and about 9:1 on this bar. A logo is exempt from text contrast, so
this is a legibility choice, not a failure.
------------------------------------------------------------------- */
.theme-shur{
--brand-900:#2A231D; --brand-800:#382A1E; --brand-700:#5E3D26;
--brand-600:#744C30; --brand-500:#8F6141; --brand-300:#A9754F;
--action:#8F6141; --action-hover:#7A5236; --action-ink:#FFFFFF;
--accent:#A9754F;
--cream:#EDE3D4; /* tan, the page */
--cream-2:#F7F1E6; /* the lighter band */
--card:#FFFFFF;
--ink:#3B2F26; --muted:#6B5847;
--hair:#DCCDB8;
--tint:#F3EADC;
--header:#382A1E; /* dark on purpose, see note above */
--serif:'Crimson Pro',ui-serif,Georgia,serif;
--sans:'Inter',ui-sans-serif,system-ui,sans-serif;
--serif-body:'Inter',ui-sans-serif,system-ui,sans-serif;
--radius:8px;
}
.theme-shur h1,.theme-shur h2,.theme-shur h3{font-weight:600;line-height:1.15}
/* ---------- THE EIGHT PER-CENTRE VARIATIONS ----------
Not eight themes. One theme, eight rooms in the same house. Only the ground,
the quiet surfaces and the action colour move; type, cards and lines hold
still, and that is what keeps it one app. Hue never leaves 14 to 42.
SOURCE: shur-app/client/src/index.css, the [data-centre-theme="…"] blocks.
Those are HSL triples on shadcn tokens; this file is hex on kit tokens, so
they are CONVERTED, not copied. The conversion is stated so it can be checked:
background→--cream · muted→--cream-2 · accent→--tint · primary→--action ·
brand→--accent · --action-hover is primary at L-6 · --hair is background at
S-6 L-14. Card, ink and muted are shared across all eight, as in the app.
⚠️ TWO THINGS SHUR SHOULD LOOK AT BEFORE DELETING ITS OWN BLOCKS
1 · CLAY DOES NOT MATCH. The filed clay below is #DFD1BC / #744C30; the app's
clay converts to #DBCEBD / #8A5638. They were never the same values, so
vendoring this file would visibly change clay rather than leave it alone.
2 · THE MEASURED CONTRAST FIX IS NOT CARRIED. The app darkened clay's
--muted-foreground to 28 20% 32% on 2026-09-01 because the shared brown
landed at 4.36:1 on clay's darker ground. This file has ONE shared
--muted (#63533F) for all eight, so that fix has nowhere to live here.
⬜ Both are SHUR's call. Posted, not decided here.
------------------------------------------------------------------- */
.theme-shur.centre-clay{--cream:#DFD1BC;--cream-2:#EBE0CE;--card:#FBF7F0;--ink:#34291F;--muted:#63533F;--accent:#8C5E3C;--action:#744C30;--action-hover:#5E3D26;--hair:#C9B79C;--tint:#E6DAC5} /* option C, the one Josh chose. ⚠️ see note 1 above */
.theme-shur.centre-terracotta{--cream:#EDE3D4;--cream-2:#F8F2E8;--card:#FBF7F0;--ink:#34291F;--muted:#63533F;--accent:#AA7550;--action:#906241;--action-hover:#7B5437;--hair:#D4C1A5;--tint:#EADECC} /* the base the other seven move around */
.theme-shur.centre-family{--cream:#EFE4D2;--cream-2:#F8F2E8;--card:#FBF7F0;--ink:#34291F;--muted:#63533F;--accent:#AE7842;--action:#9B6B3B;--action-hover:#855C32;--hair:#D9C4A1;--tint:#EBDFCC} /* warm amber tan, the brightest ground */
.theme-shur.centre-learning{--cream:#EEE6D2;--cream-2:#F7F3E8;--card:#FBF7F0;--ink:#34291F;--muted:#63533F;--accent:#9F7D41;--action:#8D6F3A;--action-hover:#775E31;--hair:#D7C7A2;--tint:#EAE1CC} /* wheat */
.theme-shur.centre-arts{--cream:#EADAD1;--cream-2:#F5ECE5;--card:#FBF7F0;--ink:#34291F;--muted:#63533F;--accent:#A95A42;--action:#97503B;--action-hover:#814432;--hair:#D0B4A4;--tint:#E7D5CB} /* rust, the reddest */
.theme-shur.centre-healing{--cream:#E6DDD6;--cream-2:#F3EDE8;--card:#FBF7F0;--ink:#34291F;--muted:#63533F;--accent:#936653;--action:#835B49;--action-hover:#6F4D3E;--hair:#C7B8AD;--tint:#E2D8D0} /* soft muted clay, the quietest */
.theme-shur.centre-adventure{--cream:#E3DCD3;--cream-2:#F2EEE8;--card:#FBF7F0;--ink:#34291F;--muted:#63533F;--accent:#836B54;--action:#76614C;--action-hover:#645240;--hair:#C3B8AC;--tint:#DED7CE} /* cool grey tan */
.theme-shur.centre-innovation{--cream:#E3D8CF;--cream-2:#F1EBE4;--card:#FBF7F0;--ink:#34291F;--muted:#63533F;--accent:#855C47;--action:#74503E;--action-hover:#604334;--hair:#C4B4A6;--tint:#DED3C9} /* walnut, the darkest ground */
/* ---------- 4 · BEAM: the dark systems look ----------
Measured from the shipped app (beam-app/src/app/globals.css), not invented here.
Dark by design: it is an instrument, and the working is what it shows.
⚠️ Gold is HAIRLINE ONLY and never a surface. That rule is in the app's own file.
------------------------------------------------------------------- */
.theme-beam{
--brand-900:#0a1f27; --brand-800:#0c242c; --brand-700:#102b34;
--brand-600:#123a44; --brand-500:#37d3c6; --brand-300:#5fe0ff;
--action:#37d3c6; --action-hover:#5fe0ff; --action-ink:#04222a;
--accent:#37d3c6;
--cream:#0a1f27; --cream-2:#102b34;
--ink:#e2f3f1; --muted:#7fa9ab;
--hair:rgba(120,220,220,.12);
--gold:#c9a84a; /* hairline only, never a surface */
--good:#49d9a4; --warn:#e0b24a; --bad:#e0764a;
--serif:'Inter',ui-sans-serif,system-ui,sans-serif;
--sans:'Inter',ui-sans-serif,system-ui,sans-serif;
--serif-body:'Inter',ui-sans-serif,system-ui,sans-serif;
--radius:8px;
}
/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.13;letter-spacing:-.005em}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.serif{font-family:var(--serif)}
.serif-body{font-family:var(--serif-body)}
/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--brand-900) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-weight:600}
.brand .logo-slot{width:32px;height:32px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--brand-300);font-size:9px;background:radial-gradient(circle at 50% 35%,var(--brand-600),var(--brand-900))}
.brand .word{font-size:18px}
.brand .word b{color:#fff}
.brand .word span{color:var(--brand-300)}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{color:#dfeae7;text-decoration:none;font-size:14px;font-weight:500}
.navlinks a:hover{color:#fff}
.nav-cta{background:var(--action);color:var(--action-ink) !important;padding:9px 17px;border-radius:8px;font-weight:700}
.nav-cta:hover{background:var(--action-hover)}
/* ---------- hero (parallax band + ghost watermark) ---------- */
.hero{position:relative;overflow:hidden;color:#eef6f4;text-align:center;padding:130px 0 120px;
background:radial-gradient(1200px 500px at 50% -10%,color-mix(in srgb,var(--brand-300) 22%,transparent),transparent 60%),
linear-gradient(180deg,var(--brand-900),var(--brand-800) 55%,var(--brand-700));
background-attachment:fixed}
/* set the watermark word with: