/* ============================================================
Organiza Eliza — THEME
------------------------------------------------------------
This is the ONE file to edit for colors, fonts, and spacing.
Every page loads it last, so whatever you set here wins.
Each page also has a copy of these values inlined as a
fallback. You do NOT need to touch those — they only kick in
if this file somehow fails to load.
NOTE ON FONTS: changing --font or --display below swaps the
font everywhere, BUT the font also has to be downloaded. If
you switch to a font that isn't Plus Jakarta Sans or Kalnia,
the Google Fonts near the top of each page needs
updating too. Ask me and I'll do it across all 6 pages.
IF A FONT CHANGE "DOESN'T WORK" ON THE LIVE SITE: check a
private/incognito window before changing any code. This file
is cached aggressively, so an old copy can survive a normal
reload. A font that renders on your phone but not your desktop
is a cached desktop copy, not a broken site.
============================================================ */
:root{
/* ---------- PALETTE (Aug 2026 rebrand) ----------
Measured contrast against --white (#fefefe):
plum 12.36 excellent, safe at any text size
forest 10.00 excellent, safe at any text size
red 3.28 LARGE TEXT ONLY (24px+). Not for body copy.
pea 2.29 NEVER as text on a light background.
Pea is a fill/graphic color. On plum it reaches 5.39 and is
safe for text — that's why the nav CTA uses it. */
--white: #fefefe; /* main page background */
--cream: #f9f9f1; /* text-heavy section bg; light text on dark */
--plum: #3b3139; /* PRIMARY dark: nav, footer, bands, headings, body */
--plum-2: #2c242a; /* darker plum, hover states */
--forest: #2f4739; /* alternate dark — declared, not used by default.
Swap --plum to this value to retone the site. */
--red: #ff4a51; /* accent: .h1 display, underlines, emphasis */
/* Red for SMALL red text on LIGHT backgrounds. --red above is only
3.28 on white — fine for the .h1 (42px+), the 2px nav underline
and icon hovers (graphics need 3.0), but short of the 4.5 that
15px text requires. Currently used only by the About contact
link hover. Do NOT use on the plum nav or band — a darker red on
a dark background goes the wrong way; keep --red there. */
--red-text: #d63038;
--pea: #bfc53a; /* fills, icons, and text on dark ONLY */
/* Card fills.
--card-fill = the "How I can help" cards (index) and the
service cards (services). One colour for all
four; measured 7.71 with solid --ink text.
--tcard-fill = testimonial cards, which sit on the plum band
(10.25 against it, and 10.25 for --ink on top).
Both are light, so keep DARK text on them — white would vanish. */
--card-fill: #cfcace; /* light purple-grey */
--tcard-fill: #ebebc9; /* light green */
--ink: #3b3139; /* body text (same value as plum) */
/* Secondary text. Kept at 0.70 minimum on purpose: plum is a
lighter base than the old charcoal, so the previous 0.58
would land at 3.48 and fail AA for body text. Don't lower. */
--muted: rgba(59,49,57,0.70);
--rule: rgba(59,49,57,0.14);
/* text colors used on top of plum/forest backgrounds */
--on-dark: #f9f9f1;
--on-dark-soft: rgba(249,249,241,0.82);
/* Focus ring. Deliberately NOT a brand color — it must stay
distinct from every fill so it's always visible. Slate is
4.35 on white but only 2.84 on the plum nav, so the header
overrides it to cream at the bottom of this file. */
--slate: #6878A0;
/* ---------- TYPE ---------- */
/* --font = body text
--display = headings
--display-weight = heading weight (Kalnia supports 100-700)
Currently loaded via the Google Fonts on each page:
Kalnia wght 100..700
Plus Jakarta Sans wght 200..800 (roman only — the italic
axis was dropped, nothing uses /)
If you raise --display-weight past 700, or start using
italic body text, that link needs updating or the browser
will synthesize it. Ask me and I'll do all 6 pages. */
--font: 'Plus Jakarta Sans',sans-serif;
--display: 'Kalnia',serif;
--display-weight: 500;
/* ---------- LAYOUT + SPACING ---------- */
--maxw: 1180px; /* max content width */
--pad: clamp(26px,4.2vw,52px); /* side padding */
--section: clamp(48px,6.5vw,88px); /* vertical section rhythm */
--measure: 64ch;
--edge: calc(max((100vw - 1180px)/2, 0px) + var(--pad));
/* Logo sizing.
nav = logo-color-horiz-web.png horizontal, aspect 5.33
footer = logo-white.png stacked lockup, aspect 2.24
The two differ because a wide lockup needs less height to
stay legible than a stacked one does.
The bar height is its own token, so the two are independent:
change --nav-logo-h and the bar keeps its height, change
--nav-bar-h and the logo keeps its size. The bar will still
grow if the logo ever exceeds it.
Desktop lands at 42px logo (224px wide) in an 88px bar.
Phones get 32px logo in a 64px bar. A horizontal lockup needs
less height than a stacked one to stay legible. */
--nav-logo-h: clamp(32px,4.2vw,42px);
--nav-bar-h: clamp(64px,7.5vw,88px);
--footer-logo-h: clamp(56px,7vw,68px);
/* ---------- TEXT WIDTHS ---------- */
/* short intros wider, body narrower, editorial widest */
--w-lede: 740px;
--w-body: 660px;
--w-pov: 920px;
}
/* ============================================================
HEADING WEIGHT
Applies --display-weight to every element that uses the
display font, so heading weight is editable from this file.
.phase .pnum is deliberately left out — it has always
rendered at the default 400 and is kept that way.
============================================================ */
h1, h2, h3, h4,
.h1, .h2, .h3,
.phase-title,
.pov-accent,
.pov-statement,
.scard .scard-title,
.story .pull,
.tcard blockquote {
font-weight: var(--display-weight);
}
/* ============================================================
FOCUS RING ON THE DARK HEADER
Slate only reaches 2.84 against plum, below the 3.0 minimum
for a visible focus indicator. Cream reaches 11.78.
============================================================ */
.site-header a:focus-visible,
.site-header button:focus-visible {
outline-color: var(--cream);
}