/** * Beagle Ridge — theme colors * =========================== * Change ONLY the six --theme-* values below to recolor the whole site. * Everything else is derived from them. * * Current palette from branding/BeagleRidge.svg */ :root { /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ THEME (edit these) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --theme-lilac: #8974c6; --theme-violet: #6548b4; --theme-indigo: #4e2ca9; --theme-deep: #280098; --theme-night: #090024; --theme-paper: #ffffff; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DERIVED — do not edit unless you need finer control ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Light professional surfaces */ --br-bg: color-mix(in srgb, var(--theme-paper) 96%, var(--theme-lilac)); --br-bg-elevated: var(--theme-paper); --br-bg-muted: color-mix(in srgb, var(--theme-paper) 90%, var(--theme-lilac)); --br-paper: var(--theme-paper); /* Brand aliases */ --br-lilac: var(--theme-lilac); --br-violet: var(--theme-violet); --br-indigo: var(--theme-indigo); --br-deep: var(--theme-deep); --br-night: var(--theme-night); /* Text on light */ --br-text: var(--theme-night); --br-text-muted: color-mix(in srgb, var(--theme-night) 58%, var(--theme-violet)); --br-text-subtle: color-mix(in srgb, var(--theme-night) 42%, var(--theme-lilac)); /* Interactive */ --br-accent: var(--theme-indigo); --br-accent-hover: var(--theme-violet); --br-focus: var(--theme-lilac); --br-border: color-mix(in srgb, var(--theme-night) 10%, transparent); --br-border-strong: color-mix(in srgb, var(--theme-indigo) 28%, transparent); /* Quiet hero wash — light base with a soft brand tint */ --br-gradient-hero: linear-gradient( 125deg, color-mix(in srgb, var(--theme-lilac) 14%, var(--theme-paper)) 0%, var(--theme-paper) 42%, color-mix(in srgb, var(--theme-paper) 94%, var(--theme-violet)) 100% ), linear-gradient( 180deg, color-mix(in srgb, var(--theme-paper) 96%, var(--theme-lilac)), var(--theme-paper) ); --br-accent-wash: color-mix(in srgb, var(--theme-lilac) 12%, var(--theme-paper)); --br-accent-wash-strong: color-mix(in srgb, var(--theme-lilac) 18%, var(--theme-paper)); --br-accent-line: color-mix(in srgb, var(--theme-indigo) 55%, var(--theme-lilac)); /* Hero mountain silhouettes — soft brand-tinted shadows */ --br-mountain-far: color-mix(in srgb, var(--theme-lilac) 32%, transparent); --br-mountain-mid: color-mix(in srgb, var(--theme-violet) 28%, transparent); --br-mountain-near: color-mix(in srgb, var(--theme-indigo) 24%, transparent); /* Typography */ --br-font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --br-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif; /* Shape — restrained */ --br-radius-sm: 0.375rem; --br-radius-md: 0.5rem; --br-shadow: 0 1px 2px color-mix(in srgb, var(--theme-night) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--theme-indigo) 8%, transparent); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DARK THEME — same six brand colors, flipped surfaces + text. Applied when is set (see js/site.js). ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ :root[data-theme="dark"] { /* Dark surfaces built from the brand night color */ --br-bg: var(--theme-night); --br-bg-elevated: color-mix(in srgb, var(--theme-night) 82%, var(--theme-lilac)); --br-bg-muted: color-mix(in srgb, var(--theme-night) 88%, var(--theme-lilac)); --br-paper: color-mix(in srgb, var(--theme-night) 78%, var(--theme-lilac)); /* Text on dark */ --br-text: color-mix(in srgb, var(--theme-paper) 92%, var(--theme-lilac)); --br-text-muted: color-mix(in srgb, var(--theme-paper) 66%, var(--theme-lilac)); --br-text-subtle: color-mix(in srgb, var(--theme-paper) 46%, var(--theme-lilac)); /* Interactive — lift accents so they read on dark */ --br-accent: color-mix(in srgb, var(--theme-lilac) 82%, var(--theme-paper)); --br-accent-hover: var(--theme-lilac); --br-focus: var(--theme-lilac); --br-border: color-mix(in srgb, var(--theme-paper) 14%, transparent); --br-border-strong: color-mix(in srgb, var(--theme-lilac) 42%, transparent); --br-gradient-hero: linear-gradient( 125deg, color-mix(in srgb, var(--theme-deep) 55%, var(--theme-night)) 0%, var(--theme-night) 48%, color-mix(in srgb, var(--theme-violet) 30%, var(--theme-night)) 100% ); --br-accent-wash: color-mix(in srgb, var(--theme-violet) 16%, var(--theme-night)); --br-accent-wash-strong: color-mix(in srgb, var(--theme-violet) 26%, var(--theme-night)); --br-accent-line: color-mix(in srgb, var(--theme-lilac) 70%, var(--theme-violet)); --br-mountain-far: color-mix(in srgb, var(--theme-lilac) 18%, transparent); --br-mountain-mid: color-mix(in srgb, var(--theme-violet) 26%, transparent); --br-mountain-near: color-mix(in srgb, var(--theme-deep) 38%, transparent); --br-shadow: 0 1px 2px color-mix(in srgb, #000 40%, transparent), 0 10px 30px color-mix(in srgb, #000 45%, transparent); color-scheme: dark; }