Three brands, one family — side by side
Body text in Lora with a themed link showing the plum brand color with amber underlines. This is how bold and italic look.
Callout block with themed background and brand-light border.
Uses --surface-muted and --brand-light.
--text: #3d1230;
--brand: #7b2d5e;
--brand-light: #f0c4d8;
--brand-dark: #3d1230;Body text in Lora with a themed link showing the turquoise brand color with amber underlines. This is how bold and italic look.
Callout block with themed background and brand-light border.
Uses --surface-muted and --brand-light.
--text: #541914;
--brand: #0d9488;
--brand-light: #99f6ed;
--brand-dark: #134e4a;Body text in Lora with a themed link showing the navy brand color with amber underlines. This is how bold and italic look.
Callout block with themed background and brand-light border.
Uses --surface-muted and --brand-light.
--text: #1a1a1a;
--brand: #1e3a8a;
--brand-light: #bfdbfe;
--brand-dark: #172554;/* ═══ SHARED (constant across all themes) ═══ */
:root {
--pop: #f4511e; /* family fire 🔥 */
--accent: #f59e0b; /* amber — bullets, underlines, ornaments */
--accent-hover: #d97706;
--surface: #fdf6ec; /* queen cream */
--surface-header: #fdf6ecee;
--font-heading: 'Montserrat', system-ui, sans-serif;
--font-label: 'Montserrat', system-ui, sans-serif;
--font-body: 'Lora', Georgia, serif;
}
/* ═══ QUEEN (default) ═══ */
:root, [data-theme="queen"] {
--text: #3d1230; /* dark plum */
--brand: #7b2d5e;
--brand-light: #f0c4d8;
--brand-dark: #3d1230;
--surface-muted: #fdf6f9;
}
/* ═══ JEAN-CLAW ═══ */
[data-theme="jeanclaw"] {
--text: #541914; /* dark reddish-brown */
--brand: #0d9488;
--brand-light: #99f6ed;
--brand-dark: #134e4a;
--surface-muted: #f0fdfc;
}
/* ═══ CAPTAIN OLA ═══ */
[data-theme="ola"] {
--text: #1a1a1a; /* pirate ink */
--brand: #1e3a8a;
--brand-light: #bfdbfe;
--brand-dark: #172554;
--surface-muted: #eff6ff;
}