/* ════════════════════════════════════════════════════════════════
theme.css — THE ONE FILE TO EDIT FOR SITE-WIDE RESTYLING
════════════════════════════════════════════════════════════════
HOW TO USE
──────────
1. Pick a preset below (or write your own).
2. Copy its variable block and paste it into the ":root { … }"
section labelled "ACTIVE THEME" at the bottom of this file.
3. Save. Every page on the site updates instantly.
VARIABLE REFERENCE
──────────────────
--bg Page background
--surface Cards, nav, form backgrounds (slightly lighter/darker than --bg)
--border Dividers, card borders, input borders
--accent Primary brand colour (buttons, links, highlights)
--accent2 Secondary accent (badges, subtle glows, focus rings)
--text Body / heading text
--muted Placeholder text, labels, footer text
--ff-head Display / heading font (Google Fonts name + fallback)
--ff-body Body / UI font (Google Fonts name + fallback)
--radius Base border-radius (buttons, inputs) e.g. 4px = sharp, 12px = rounded
--max-w Maximum content width
--transition Default CSS transition speed
FONT NOTES
──────────
Each preset lists the Google Fonts tags you need in the .
shared.css does NOT import fonts — the HTML pages do.
If you change fonts, update the tags in every HTML file.
════════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────────
PRESET 1 · Dark Gold (default)
Elegant dark background with warm gold accents.
Fonts: Playfair Display + DM Sans
Google Fonts link:
https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@300;400;500&display=swap
──────────────────────────────────────────────────────────────── */
/*
:root {
--bg: #0e0e0f;
--surface: #161618;
--border: #2a2a2e;
--accent: #c8a96e;
--accent2: #7eb8c9;
--text: #e8e4dc;
--muted: #7a7875;
--ff-head: 'Playfair Display', Georgia, serif;
--ff-body: 'DM Sans', sans-serif;
--radius: 6px;
--max-w: 1100px;
--transition: 0.25s ease;
}
*/
/* ────────────────────────────────────────────────────────────────
PRESET 2 · Clean Light
Crisp white background with a bold blue accent. Great for SaaS.
Fonts: Inter + Inter
Google Fonts link:
https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap
──────────────────────────────────────────────────────────────── */
/*
:root {
--bg: #ffffff;
--surface: #f5f5f7;
--border: #e0e0e5;
--accent: #2563eb;
--accent2: #7c3aed;
--text: #111114;
--muted: #6b7280;
--ff-head: 'Inter', sans-serif;
--ff-body: 'Inter', sans-serif;
--radius: 8px;
--max-w: 1100px;
--transition: 0.2s ease;
}
*/
/* ────────────────────────────────────────────────────────────────
PRESET 3 · Forest Green
Deep green tones with a warm amber accent. Earthy, trustworthy.
Fonts: Lora + Source Sans 3
Google Fonts link:
https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Source+Sans+3:wght@300;400;600&display=swap
──────────────────────────────────────────────────────────────── */
/*
:root {
--bg: #0f1a12;
--surface: #172019;
--border: #253027;
--accent: #d4a24c;
--accent2: #6dbf8a;
--text: #e2ead8;
--muted: #6e8070;
--ff-head: 'Lora', Georgia, serif;
--ff-body: 'Source Sans 3', sans-serif;
--radius: 5px;
--max-w: 1100px;
--transition: 0.25s ease;
}
*/
/* ────────────────────────────────────────────────────────────────
PRESET 4 · Slate & Coral
Cool dark slate with a vibrant coral pop. Modern editorial feel.
Fonts: Fraunces + Outfit
Google Fonts link:
https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700&family=Outfit:wght@300;400;500&display=swap
──────────────────────────────────────────────────────────────── */
/*
:root {
--bg: #12151c;
--surface: #1a1e28;
--border: #2c3040;
--accent: #ff6b5b;
--accent2: #f0c060;
--text: #e8eaf2;
--muted: #727a96;
--ff-head: 'Fraunces', Georgia, serif;
--ff-body: 'Outfit', sans-serif;
--radius: 6px;
--max-w: 1100px;
--transition: 0.25s ease;
}
*/
/* ────────────────────────────────────────────────────────────────
PRESET 5 · Soft Cream
Warm off-white with dusty rose accents. Boutique, lifestyle feel.
Fonts: Cormorant Garamond + Jost
Google Fonts link:
https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Jost:wght@300;400;500&display=swap
──────────────────────────────────────────────────────────────── */
/*
:root {
--bg: #f9f4ef;
--surface: #f0ebe4;
--border: #ddd5ca;
--accent: #b5605a;
--accent2: #7a9e8e;
--text: #2c2420;
--muted: #8c7b72;
--ff-head: 'Cormorant Garamond', Georgia, serif;
--ff-body: 'Jost', sans-serif;
--radius: 4px;
--max-w: 1100px;
--transition: 0.25s ease;
}
*/
/* ────────────────────────────────────────────────────────────────
PRESET 6 · Midnight Purple
Deep purple with electric violet accents. Bold and tech-forward.
Fonts: Space Grotesk + Space Grotesk
Google Fonts link:
https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap
──────────────────────────────────────────────────────────────── */
/*
:root {
--bg: #0d0b14;
--surface: #14111f;
--border: #26213a;
--accent: #a78bfa;
--accent2: #34d399;
--text: #ede9fe;
--muted: #6d6a80;
--ff-head: 'Space Grotesk', sans-serif;
--ff-body: 'Space Grotesk', sans-serif;
--radius: 8px;
--max-w: 1100px;
--transition: 0.2s ease;
}
*/
/* ════════════════════════════════════════════════════════════════
▼▼▼ ACTIVE THEME — edit only this block ▼▼▼
════════════════════════════════════════════════════════════════ */
/* Electric Purple to match previous branding */
:root {
--bg: #0d0b14;
--surface: #14111f;
--border: #26213a;
--accent: #a78bfa;
--accent2: #34d399;
--text: #ede9fe;
--muted: #6d6a80;
--ff-head: 'Space Grotesk', sans-serif;
--ff-body: 'Space Grotesk', sans-serif;
--radius: 8px;
--max-w: 1100px;
--transition: 0.2s ease;
}
/* Previous Default Below */
/*
:root {
--bg: #0e0e0f;
--surface: #161618;
--border: #2a2a2e;
--accent: #c8a96e;
--accent2: #7eb8c9;
--text: #e8e4dc;
--muted: #7a7875;
--ff-head: 'Playfair Display', Georgia, serif;
--ff-body: 'DM Sans', sans-serif;
--radius: 6px;
--max-w: 1100px;
--transition: 0.25s ease;
}
*/