/* * Trevor Frank Consulting — Color Themes * Apply a theme by setting data-theme="" on . * Default (no attribute) = teal-forward (the original brand theme). * Theme is persisted in localStorage under key "tf-theme". */ /* ════════════════════════════════════════ 1. TEAL-FORWARD INTELLIGENCE (default) Deep navy foundation, teal accents ════════════════════════════════════════ */ :root, [data-theme="teal-forward"] { --tf-page-dark-1: #07131A; --tf-page-dark-2: #0B1F29; --tf-page-dark-3: #102B36; --tf-page-dark-4: #173743; --tf-accent-700: #0B7A75; --tf-accent-600: #0F958E; --tf-accent-500: #18B7AE; --tf-accent-400: #54D1C8; --tf-accent-200: #B8ECE7; --tf-surface-100: #E8F8F6; --tf-surface-mist: #F4F7F7; --tf-surface-sand: #F7F5F0; --tf-ink: #102129; --tf-muted: #52656D; --tf-border: #D8E4E3; /* Semantic mappings */ --bg-page: var(--tf-surface-mist); --bg-dark: var(--tf-page-dark-1); --bg-card: #FFFFFF; --text-primary: var(--tf-ink); --text-muted: var(--tf-muted); --text-light: #FFFFFF; --accent-primary: var(--tf-accent-600); --accent-strong: var(--tf-accent-500); --accent-soft: var(--tf-accent-200); --border-default: var(--tf-border); --hero-grad-1: rgba(24,183,174,0.22); --hero-grad-2: rgba(84,209,200,0.14); --hero-grad-3: rgba(11,122,117,0.12); --hero-bg-start: var(--tf-page-dark-1); --hero-bg-end: var(--tf-page-dark-3); --shadow-soft: 0 14px 40px rgba(7,19,26,0.10); --shadow-card: 0 10px 28px rgba(7,19,26,0.08); --section-label-color: var(--tf-accent-600); --proof-number-color: var(--tf-accent-700); --method-node-bg: var(--tf-accent-700); --offer-bar-start: var(--tf-accent-700); --offer-bar-end: var(--tf-accent-400); --parallax-glow-1: rgba(24,183,174,0.25); --parallax-glow-2: rgba(84,209,200,0.15); --nav-link-hover: var(--tf-accent-400); } /* ════════════════════════════════════════ 2. SLATE & AMBER Cool dark slate foundation, warm amber accents ════════════════════════════════════════ */ [data-theme="slate-amber"] { --tf-page-dark-1: #0F1318; --tf-page-dark-2: #181D24; --tf-page-dark-3: #202630; --tf-page-dark-4: #28303C; --tf-accent-700: #B45309; --tf-accent-600: #D97706; --tf-accent-500: #F59E0B; --tf-accent-400: #FBB73A; --tf-accent-200: #FDE68A; --tf-surface-100: #FFFBEB; --tf-surface-mist: #F8F7F4; --tf-surface-sand: #F5F3EE; --tf-ink: #1A1F26; --tf-muted: #5A6270; --tf-border: #E4DDD0; --bg-page: var(--tf-surface-mist); --bg-dark: var(--tf-page-dark-1); --bg-card: #FFFFFF; --text-primary: var(--tf-ink); --text-muted: var(--tf-muted); --text-light: #FFFFFF; --accent-primary: var(--tf-accent-600); --accent-strong: var(--tf-accent-500); --accent-soft: var(--tf-accent-200); --border-default: var(--tf-border); --hero-grad-1: rgba(245,158,11,0.18); --hero-grad-2: rgba(251,183,58,0.10); --hero-grad-3: rgba(180,83,9,0.10); --hero-bg-start: var(--tf-page-dark-1); --hero-bg-end: var(--tf-page-dark-3); --shadow-soft: 0 14px 40px rgba(15,19,24,0.12); --shadow-card: 0 10px 28px rgba(15,19,24,0.09); --section-label-color: var(--tf-accent-600); --proof-number-color: var(--tf-accent-700); --method-node-bg: var(--tf-accent-700); --offer-bar-start: var(--tf-accent-700); --offer-bar-end: var(--tf-accent-400); --parallax-glow-1: rgba(245,158,11,0.22); --parallax-glow-2: rgba(251,183,58,0.12); --nav-link-hover: var(--tf-accent-400); } /* ════════════════════════════════════════ 3. MIDNIGHT & GOLD Near-black with rich gold accents — premium feel ════════════════════════════════════════ */ [data-theme="midnight-gold"] { --tf-page-dark-1: #080808; --tf-page-dark-2: #111111; --tf-page-dark-3: #1A1A1A; --tf-page-dark-4: #222222; --tf-accent-700: #92660A; --tf-accent-600: #B8860B; --tf-accent-500: #D4A017; --tf-accent-400: #E8C04A; --tf-accent-200: #F5E0A0; --tf-surface-100: #FDFAF0; --tf-surface-mist: #F9F8F5; --tf-surface-sand: #F5F3EC; --tf-ink: #181510; --tf-muted: #5E5850; --tf-border: #E0D9CA; --bg-page: var(--tf-surface-mist); --bg-dark: var(--tf-page-dark-1); --bg-card: #FFFFFF; --text-primary: var(--tf-ink); --text-muted: var(--tf-muted); --text-light: #FFFFFF; --accent-primary: var(--tf-accent-600); --accent-strong: var(--tf-accent-500); --accent-soft: var(--tf-accent-200); --border-default: var(--tf-border); --hero-grad-1: rgba(212,160,23,0.16); --hero-grad-2: rgba(232,192,74,0.10); --hero-grad-3: rgba(146,102,10,0.10); --hero-bg-start: var(--tf-page-dark-1); --hero-bg-end: var(--tf-page-dark-3); --shadow-soft: 0 14px 40px rgba(8,8,8,0.14); --shadow-card: 0 10px 28px rgba(8,8,8,0.10); --section-label-color: var(--tf-accent-600); --proof-number-color: var(--tf-accent-700); --method-node-bg: var(--tf-accent-700); --offer-bar-start: var(--tf-accent-700); --offer-bar-end: var(--tf-accent-400); --parallax-glow-1: rgba(212,160,23,0.20); --parallax-glow-2: rgba(232,192,74,0.12); --nav-link-hover: var(--tf-accent-400); } /* ════════════════════════════════════════ 4. FOREST EXECUTIVE Deep forest green foundation, sage and cream accents ════════════════════════════════════════ */ [data-theme="forest-executive"] { --tf-page-dark-1: #071410; --tf-page-dark-2: #0D2018; --tf-page-dark-3: #132A20; --tf-page-dark-4: #1A3428; --tf-accent-700: #166534; --tf-accent-600: #16A34A; --tf-accent-500: #22C55E; --tf-accent-400: #4ADE80; --tf-accent-200: #BBF7D0; --tf-surface-100: #F0FDF4; --tf-surface-mist: #F5F8F5; --tf-surface-sand: #F4F7F0; --tf-ink: #0F2018; --tf-muted: #4A6358; --tf-border: #CFDDD6; --bg-page: var(--tf-surface-mist); --bg-dark: var(--tf-page-dark-1); --bg-card: #FFFFFF; --text-primary: var(--tf-ink); --text-muted: var(--tf-muted); --text-light: #FFFFFF; --accent-primary: var(--tf-accent-600); --accent-strong: var(--tf-accent-500); --accent-soft: var(--tf-accent-200); --border-default: var(--tf-border); --hero-grad-1: rgba(34,197,94,0.18); --hero-grad-2: rgba(74,222,128,0.10); --hero-grad-3: rgba(22,101,52,0.12); --hero-bg-start: var(--tf-page-dark-1); --hero-bg-end: var(--tf-page-dark-3); --shadow-soft: 0 14px 40px rgba(7,20,16,0.11); --shadow-card: 0 10px 28px rgba(7,20,16,0.08); --section-label-color: var(--tf-accent-600); --proof-number-color: var(--tf-accent-700); --method-node-bg: var(--tf-accent-700); --offer-bar-start: var(--tf-accent-700); --offer-bar-end: var(--tf-accent-400); --parallax-glow-1: rgba(34,197,94,0.20); --parallax-glow-2: rgba(74,222,128,0.12); --nav-link-hover: var(--tf-accent-400); } /* ════════════════════════════════════════ 5. CHARCOAL & VIOLET Dark charcoal with rich indigo/violet accents ════════════════════════════════════════ */ [data-theme="charcoal-violet"] { --tf-page-dark-1: #0D0D14; --tf-page-dark-2: #14141F; --tf-page-dark-3: #1C1C2A; --tf-page-dark-4: #242434; --tf-accent-700: #4C1D95; --tf-accent-600: #7C3AED; --tf-accent-500: #8B5CF6; --tf-accent-400: #A78BFA; --tf-accent-200: #DDD6FE; --tf-surface-100: #F5F3FF; --tf-surface-mist: #F7F6FB; --tf-surface-sand: #F4F2F8; --tf-ink: #141020; --tf-muted: #5A546E; --tf-border: #DDD8EC; --bg-page: var(--tf-surface-mist); --bg-dark: var(--tf-page-dark-1); --bg-card: #FFFFFF; --text-primary: var(--tf-ink); --text-muted: var(--tf-muted); --text-light: #FFFFFF; --accent-primary: var(--tf-accent-600); --accent-strong: var(--tf-accent-500); --accent-soft: var(--tf-accent-200); --border-default: var(--tf-border); --hero-grad-1: rgba(139,92,246,0.20); --hero-grad-2: rgba(167,139,250,0.12); --hero-grad-3: rgba(76,29,149,0.14); --hero-bg-start: var(--tf-page-dark-1); --hero-bg-end: var(--tf-page-dark-3); --shadow-soft: 0 14px 40px rgba(13,13,20,0.12); --shadow-card: 0 10px 28px rgba(13,13,20,0.09); --section-label-color: var(--tf-accent-600); --proof-number-color: var(--tf-accent-700); --method-node-bg: var(--tf-accent-700); --offer-bar-start: var(--tf-accent-700); --offer-bar-end: var(--tf-accent-400); --parallax-glow-1: rgba(139,92,246,0.22); --parallax-glow-2: rgba(167,139,250,0.13); --nav-link-hover: var(--tf-accent-400); } /* ════════════════════════════════════════ 6. STEEL & CRIMSON Cool steel-grey base, bold crimson accents ════════════════════════════════════════ */ [data-theme="steel-crimson"] { --tf-page-dark-1: #0E1117; --tf-page-dark-2: #161B24; --tf-page-dark-3: #1D2330; --tf-page-dark-4: #242B3A; --tf-accent-700: #9F1239; --tf-accent-600: #E11D48; --tf-accent-500: #F43F5E; --tf-accent-400: #FB7185; --tf-accent-200: #FECDD3; --tf-surface-100: #FFF1F2; --tf-surface-mist: #F8F7F8; --tf-surface-sand: #F5F4F6; --tf-ink: #14181F; --tf-muted: #565C6A; --tf-border: #E2DCE0; --bg-page: var(--tf-surface-mist); --bg-dark: var(--tf-page-dark-1); --bg-card: #FFFFFF; --text-primary: var(--tf-ink); --text-muted: var(--tf-muted); --text-light: #FFFFFF; --accent-primary: var(--tf-accent-600); --accent-strong: var(--tf-accent-500); --accent-soft: var(--tf-accent-200); --border-default: var(--tf-border); --hero-grad-1: rgba(244,63,94,0.18); --hero-grad-2: rgba(251,113,133,0.10); --hero-grad-3: rgba(159,18,57,0.12); --hero-bg-start: var(--tf-page-dark-1); --hero-bg-end: var(--tf-page-dark-3); --shadow-soft: 0 14px 40px rgba(14,17,23,0.12); --shadow-card: 0 10px 28px rgba(14,17,23,0.09); --section-label-color: var(--tf-accent-600); --proof-number-color: var(--tf-accent-700); --method-node-bg: var(--tf-accent-700); --offer-bar-start: var(--tf-accent-700); --offer-bar-end: var(--tf-accent-400); --parallax-glow-1: rgba(244,63,94,0.20); --parallax-glow-2: rgba(251,113,133,0.12); --nav-link-hover: var(--tf-accent-400); }