/* * ═══════════════════════════════════════════════════════════════ * 🎨 CENTRALIZED THEME COLOR SYSTEM * ═══════════════════════════════════════════════════════════════ * * This file controls colors for ALL HTML files in the project. * Change colors here once → Updates across entire website! * * PRIMARY = Main brand color (buttons, CTAs, dark sections) * SECONDARY = Accent color (highlights, icons, links) * TERTIARY = Background/Surface colors (cards, sections) * NEUTRAL = Text colors * * ═══════════════════════════════════════════════════════════════ */ :root { /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* 🎨 PRIMARY COLOR (Main Brand - PURE BLACK) */ /* Change these to update ALL buttons, dark cards & sections */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --primary-50: 250 250 250; /* Lightest gray */ --primary-100: 245 245 245; /* Very light gray */ --primary-200: 229 229 229; /* Light gray */ --primary-500: 115 115 115; /* Medium gray */ --primary-600: 64 64 64; /* Dark gray */ --primary-700: 0 0 0; /* ← MAIN PRIMARY COLOR (Pure Black) */ --primary-800: 0 0 0; /* Pure Black */ --primary-900: 0 0 0; /* Pure Black */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* 🌟 SECONDARY COLOR (Accent - PREMIUM GOLD) */ /* Change these to update ALL accents, icons & highlights */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --secondary-50: 255 251 235; /* Lightest gold */ --secondary-100: 254 243 199; /* Light gold */ --secondary-400: 250 204 21; /* Bright gold */ --secondary-500: 234 179 8; /* ← MAIN SECONDARY COLOR (Premium Gold) */ --secondary-600: 202 138 4; /* Deep gold */ --secondary-700: 161 98 7; /* Rich gold */ --secondary-800: 133 77 14; /* Dark gold */ --secondary-900: 113 63 18; /* Darkest gold */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* 🏛️ TERTIARY COLOR (Backgrounds - PURE WHITE & GRAYS) */ /* Change these to update ALL card & section backgrounds */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --tertiary-50: 255 255 255; /* ← MAIN BACKGROUND (Pure White) */ --tertiary-100: 250 250 250; /* Section backgrounds (Off-white) */ --tertiary-200: 245 245 245; /* Fills, track bars, hover states */ --tertiary-300: 229 229 229; /* Stronger fills / borders */ --tertiary-400: 212 212 212; /* Light gray fills */ --tertiary-500: 163 163 163; /* Medium gray */ --tertiary-600: 115 115 115; /* Medium dark gray */ --tertiary-700: 82 82 82; /* Dark gray */ --tertiary-800: 38 38 38; /* Very dark gray */ --tertiary-900: 0 0 0; /* Pure Black (matches primary-700) */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* 📝 NEUTRAL COLOR (Text - PURE BLACK & GRAYS) */ /* Change these to update ALL text colors */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --neutral-900: 0 0 0; /* ← MAIN TEXT (Pure Black) */ --neutral-700: 38 38 38; /* Dark gray text */ --neutral-500: 82 82 82; /* Medium gray text */ --neutral-400: 115 115 115; /* Medium light gray text */ --neutral-300: 163 163 163; /* Light gray text */ --neutral-200: 212 212 212; /* Very light gray */ --neutral-100: 229 229 229; /* Near white */ --neutral-50: 245 245 245; /* Almost white */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Legacy aliases (for backward compatibility) */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ --c-forest-50: var(--primary-50); --c-forest-100: var(--primary-100); --c-forest-200: var(--primary-200); --c-forest-500: var(--primary-500); --c-forest-600: var(--primary-600); --c-forest-700: var(--primary-700); --c-forest-800: var(--primary-800); --c-forest-900: var(--primary-900); --c-gold-50: var(--secondary-50); --c-gold-100: var(--secondary-100); --c-gold-400: var(--secondary-400); --c-gold-500: var(--secondary-500); --c-gold-600: var(--secondary-600); --c-gold-700: var(--secondary-700); --c-cream-50: var(--tertiary-50); --c-cream-100: var(--tertiary-100); --c-cream-200: var(--tertiary-200); --c-cream-300: var(--tertiary-300); --c-ink-900: var(--neutral-900); --c-ink-700: var(--neutral-700); --c-ink-500: var(--neutral-500); --c-ink-400: var(--neutral-400); /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Semantic UI Variables (for wylth-home.html) */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Buttons */ --btn-primary-bg: rgb(var(--primary-700)); /* Black buttons */ --btn-primary-bg-hover: rgb(var(--secondary-500)); /* Gold hover */ --btn-primary-text: rgb(255 255 255); /* White text */ --btn-secondary-bg: rgb(var(--secondary-500)); /* Gold buttons */ --btn-secondary-bg-hover: rgb(var(--secondary-600)); /* Darker gold hover */ --btn-secondary-text: rgb(0 0 0); /* Black text on gold */ --btn-secondary-border: rgba(var(--secondary-500) / 0.3); /* Cards */ --card-bg-primary: rgb(255 255 255); /* Pure white */ --card-bg-secondary: rgb(var(--tertiary-100)); /* Off-white */ --card-bg-dark: rgb(var(--primary-700)); /* Pure Black */ --card-border: rgba(var(--neutral-900) / 0.1); /* Subtle black border */ /* Sections */ --section-bg-primary: rgb(var(--tertiary-50)); /* Pure white */ --section-bg-secondary: rgb(var(--tertiary-100)); /* Off-white */ --section-bg-dark: rgb(var(--primary-700)); /* Pure Black */ /* Hero gradients */ --hero-glow-gold: rgba(var(--secondary-500) / 0.12); /* Gold glow */ --hero-glow-forest: rgba(var(--primary-700) / 0.03); /* Subtle black accent */ --hero-bg-top: rgb(var(--tertiary-50)); /* Pure white */ --hero-bg-bottom: rgb(var(--tertiary-100)); /* Off-white */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* 🎨 QUICK THEME EXAMPLES */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* * ✅ CURRENT: PREMIUM BLACK, WHITE & GOLD (Luxury & Elegance) * --primary-700: 0 0 0; (Pure Black) * --secondary-500: 234 179 8; (Premium Gold) * --tertiary-50: 255 255 255; (Pure White) * --neutral-900: 0 0 0; (Pure Black) * * Perfect for premium financial services - timeless, luxurious, highly readable * Clean white backgrounds with pure black text and gold accents * Maximum contrast for optimal readability and accessibility * * PREMIUM NAVY & AMBER: * --primary-700: 15 23 42; * --secondary-500: 245 158 11; * --tertiary-50: 248 250 252; * --neutral-900: 15 23 42; * * DEEP FOREST GREEN: * --primary-700: 21 128 61; * --secondary-500: 34 197 94; * --tertiary-50: 245 245 220; * --neutral-900: 20 83 45; * * MODERN PURPLE & PINK: * --primary-700: 109 40 217; * --secondary-500: 236 72 153; * --neutral-900: 30 20 60; */ } /* ═══════════════════════════════════════════════════════════════ */ /* 💡 HOW TO USE: */ /* ═══════════════════════════════════════════════════════════════ */ /* * 1. Link this file in your HTML : * * * 2. Change PRIMARY-700 (line 27) to update buttons, dark sections & CTAs * 3. Change SECONDARY-500 (line 39) to update accents, highlights & gold elements * 4. Change TERTIARY-50 (line 48) to update backgrounds & cards * 5. Change NEUTRAL-900 (line 63) to update all text colors * * 6. Save this file → Refresh browser → All pages update instantly! ✨ * * 💎 CURRENT THEME: Premium Black, White & Gold * Perfect for luxury financial services - timeless, elegant, sophisticated * Pure white backgrounds with pure black text and premium gold accents * Maximum contrast (21:1 ratio) ensures perfect readability and accessibility * Black buttons with white text, gold buttons with black text * All semantic variables (buttons, cards, sections) are auto-configured! */