/* ============================================ Color Scheme Presets ============================================ Usage: Add a theme attribute to to switch schemes. (default — current navy/gold) green & warm amber deep red & gold cool gray & teal dark mode with blue accents warm terracotta & charcoal Or load this file and pick one. The default "ocean" theme matches the original site colors. ============================================ */ /* ----- 1. OCEAN (Default) ----- */ [data-theme="ocean"], :root { --color-primary: #1a3a5c; --color-primary-rgb: 26, 58, 92; --color-primary-light: #2a5a8c; --color-primary-light-rgb: 42, 90, 140; --color-primary-dark: #0f2640; --color-primary-dark-rgb: 15, 38, 64; --color-accent: #c4873b; --color-accent-rgb: 196, 135, 59; --color-accent-light: #d4a05b; --color-accent-dark: #a06a28; --color-text: #2d3748; --color-text-light: #718096; --color-text-inverse: #ffffff; --color-text-inverse-rgb: 255, 255, 255; --color-bg: #ffffff; --color-bg-alt: #f7f8fa; --color-bg-dark: #1a2332; --color-bg-dark-rgb: 26, 35, 50; --color-border: #e2e8f0; --color-success: #38a169; --logo-filter: brightness(0) saturate(100%) invert(18%) sepia(15%) saturate(1500%) hue-rotate(180deg) brightness(90%) contrast(90%); } /* ----- 2. FOREST ----- */ [data-theme="forest"] { --color-primary: #2d6a4f; --color-primary-rgb: 45, 106, 79; --color-primary-light: #40916c; --color-primary-light-rgb: 64, 145, 108; --color-primary-dark: #1b4332; --color-primary-dark-rgb: 27, 67, 50; --color-accent: #d4a03c; --color-accent-rgb: 212, 160, 60; --color-accent-light: #e0b85c; --color-accent-dark: #b8862a; --color-text: #2d3730; --color-text-light: #5f7165; --color-text-inverse: #ffffff; --color-text-inverse-rgb: 255, 255, 255; --color-bg: #ffffff; --color-bg-alt: #f4f8f5; --color-bg-dark: #1a2b22; --color-bg-dark-rgb: 26, 43, 34; --color-border: #d6e4da; --color-success: #2d9f5e; --logo-filter: brightness(0) saturate(100%) invert(30%) sepia(50%) saturate(800%) hue-rotate(100deg) brightness(85%) contrast(90%); } /* ----- 3. BURGUNDY ----- */ [data-theme="burgundy"] { --color-primary: #7b2d3b; --color-primary-rgb: 123, 45, 59; --color-primary-light: #a33d50; --color-primary-light-rgb: 163, 61, 80; --color-primary-dark: #5c1a28; --color-primary-dark-rgb: 92, 26, 40; --color-accent: #c9985a; --color-accent-rgb: 201, 152, 90; --color-accent-light: #dbb07a; --color-accent-dark: #a87a3e; --color-text: #3d2830; --color-text-light: #8a6e76; --color-text-inverse: #ffffff; --color-text-inverse-rgb: 255, 255, 255; --color-bg: #ffffff; --color-bg-alt: #faf6f7; --color-bg-dark: #2a1820; --color-bg-dark-rgb: 42, 24, 32; --color-border: #e8dce0; --color-success: #5a9e6f; --logo-filter: brightness(0) saturate(100%) invert(20%) sepia(60%) saturate(1200%) hue-rotate(320deg) brightness(85%) contrast(90%); } /* ----- 4. SLATE ----- */ [data-theme="slate"] { --color-primary: #475569; --color-primary-rgb: 71, 85, 105; --color-primary-light: #64748b; --color-primary-light-rgb: 100, 116, 139; --color-primary-dark: #1e293b; --color-primary-dark-rgb: 30, 41, 59; --color-accent: #0d9488; --color-accent-rgb: 13, 148, 136; --color-accent-light: #2dd4bf; --color-accent-dark: #0a7a70; --color-text: #334155; --color-text-light: #94a3b8; --color-text-inverse: #ffffff; --color-text-inverse-rgb: 255, 255, 255; --color-bg: #ffffff; --color-bg-alt: #f8fafc; --color-bg-dark: #0f172a; --color-bg-dark-rgb: 15, 23, 42; --color-border: #e2e8f0; --color-success: #22c55e; --logo-filter: brightness(0) saturate(100%) invert(30%) sepia(20%) saturate(500%) hue-rotate(160deg) brightness(90%) contrast(90%); } /* ----- 5. MIDNIGHT (Dark Mode) ----- */ [data-theme="midnight"] { --color-primary: #3b82f6; --color-primary-rgb: 59, 130, 246; --color-primary-light: #60a5fa; --color-primary-light-rgb: 96, 165, 250; --color-primary-dark: #1e3a5f; --color-primary-dark-rgb: 30, 58, 95; --color-accent: #f59e0b; --color-accent-rgb: 245, 158, 11; --color-accent-light: #fbbf24; --color-accent-dark: #d97706; --color-text: #e2e8f0; --color-text-light: #94a3b8; --color-text-inverse: #ffffff; --color-text-inverse-rgb: 255, 255, 255; --color-bg: #0f172a; --color-bg-alt: #1e293b; --color-bg-dark: #020617; --color-bg-dark-rgb: 2, 6, 23; --color-border: #334155; --color-success: #22c55e; --logo-filter: brightness(0) invert(1); } /* ----- 6. EMBER (Terracotta) ----- */ [data-theme="ember"] { --color-primary: #AE4225; --color-primary-rgb: 174, 66, 37; --color-primary-light: #C85A3A; --color-primary-light-rgb: 200, 90, 58; --color-primary-dark: #8A3019; --color-primary-dark-rgb: 138, 48, 25; --color-accent: #D4A03C; --color-accent-rgb: 212, 160, 60; --color-accent-light: #E0B85C; --color-accent-dark: #B8862A; --color-text: #3B2820; --color-text-light: #7A6358; --color-text-inverse: #ffffff; --color-text-inverse-rgb: 255, 255, 255; --color-bg: #ffffff; --color-bg-alt: #FAF5F2; --color-bg-dark: #2C1810; --color-bg-dark-rgb: 44, 24, 16; --color-border: #E8DCD6; --color-success: #5A9E6F; --logo-filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1200%) hue-rotate(340deg) brightness(85%) contrast(95%); } /* Ember logo override — white text on rust background */ [data-theme="ember"] .nav-logo { background: var(--color-primary); padding: 6px 14px; border-radius: var(--radius-sm); } [data-theme="ember"] .nav-logo .logo-dark { filter: none; } /* Midnight needs extra overrides for elements that assume a light background */ [data-theme="midnight"] .site-nav { background: rgba(15, 23, 42, 0.95); border-bottom-color: var(--color-border); } [data-theme="midnight"] .nav-links > li > a { color: var(--color-text); } [data-theme="midnight"] .nav-toggle span { background: var(--color-text); } [data-theme="midnight"] .dropdown-menu { background: var(--color-bg-alt); border-color: var(--color-border); } [data-theme="midnight"] .dropdown-menu a { color: var(--color-text); } [data-theme="midnight"] .dropdown-menu a:hover { background: var(--color-bg); } [data-theme="midnight"] .card { background: var(--color-bg-alt); border-color: var(--color-border); } [data-theme="midnight"] .card-body h3 { color: var(--color-text); } [data-theme="midnight"] .nav-links { background: var(--color-bg); } [data-theme="midnight"] h1, [data-theme="midnight"] h2, [data-theme="midnight"] h3, [data-theme="midnight"] h4, [data-theme="midnight"] h5, [data-theme="midnight"] h6 { color: var(--color-text); } [data-theme="midnight"] .page-hero { background: var(--color-bg-alt); } [data-theme="midnight"] .footer-map { filter: invert(0.9) hue-rotate(180deg); } [data-theme="midnight"] .nav-logo img { filter: var(--logo-filter) !important; }