/** * ═══════════════════════════════════════════════════════════════ * WOOPW THEME — DYNAMIC COLOR SYSTEM * ═══════════════════════════════════════════════════════════════ * * HOW MANY COLORS DO YOU NEED? * ───────────────────────────── * Minimum (quick rebrand): 2 colors → Primary + Dark * Recommended (full control): 4 colors → Primary + Dark + Light + Accent * Complete (all cases): 5 colors → + Rating/Star color * * Change ONLY the 4–5 "BRAND" variables below. * Everything else (buttons, heroes, borders, glows, hovers) is auto-derived. * * Example — switch to purple pharmacy brand: * --brand-primary: #7C3AED; * --brand-dark: #1E1B4B; */ :root { /* ═══ EDIT THESE ONLY (4 core + 1 optional) ═══ */ --brand-primary: #00C9A7; /* 1. Main accent — buttons, links, highlights, CTAs */ --brand-dark: #0B1D3A; /* 2. Dark brand — header, hero, footer, headings */ --brand-light: #FFFFFF; /* 3. Page background / light surfaces */ --brand-accent: #FF6B5A; /* 4. Secondary — errors, alerts, "required" fields */ --brand-star: #FFD700; /* 5. Optional — star ratings only */ /* ═══ AUTO-DERIVED (do not edit — updates when brand colors change) ═══ */ /* Primary scale */ --color-primary: var(--brand-primary); --color-primary-dark: color-mix(in srgb, var(--brand-primary) 82%, #000); --color-primary-glow: color-mix(in srgb, var(--brand-primary) 12%, transparent); --color-primary-subtle: color-mix(in srgb, var(--brand-primary) 6%, transparent); --color-primary-border: color-mix(in srgb, var(--brand-primary) 20%, transparent); --color-primary-shadow: color-mix(in srgb, var(--brand-primary) 30%, transparent); /* Dark / navy scale */ --color-dark: var(--brand-dark); --color-dark-90: color-mix(in srgb, var(--brand-dark) 90%, transparent); --color-dark-light: color-mix(in srgb, var(--brand-dark) 92%, #fff); /* navy-light ≈ #152C4F */ --color-dark-mid: color-mix(in srgb, var(--brand-dark) 55%, #fff); --color-dark-overlay: color-mix(in srgb, var(--brand-dark) 15%, transparent); --color-dark-shadow-sm: color-mix(in srgb, var(--brand-dark) 6%, transparent); --color-dark-shadow-md: color-mix(in srgb, var(--brand-dark) 8%, transparent); --color-dark-shadow-lg: color-mix(in srgb, var(--brand-dark) 12%, transparent); /* Backgrounds */ --color-bg: var(--brand-light); --color-bg-subtle: color-mix(in srgb, var(--brand-dark) 3%, var(--brand-light)); --color-bg-muted: color-mix(in srgb, var(--brand-dark) 5%, var(--brand-light)); --color-bg-cream: color-mix(in srgb, var(--brand-dark) 2%, var(--brand-light)); /* Text */ --color-text: var(--brand-dark); --color-text-muted: color-mix(in srgb, var(--brand-dark) 55%, #fff); /* grey-500 ≈ #7A8495 */ --color-text-light: color-mix(in srgb, var(--brand-dark) 80%, #fff); /* grey-700 ≈ #3D4556 (darker body text) */ --color-text-on-dark: var(--brand-light); --color-text-on-dark-muted: color-mix(in srgb, var(--brand-light) 65%, transparent); /* Borders / greys (tinted from dark brand for cohesion) */ --color-border: color-mix(in srgb, var(--brand-dark) 12%, var(--brand-light)); --color-border-strong: color-mix(in srgb, var(--brand-dark) 22%, var(--brand-light)); --color-border-subtle: color-mix(in srgb, var(--brand-dark) 6%, var(--brand-light)); /* Accent / error */ --color-accent: var(--brand-accent); --color-accent-subtle: color-mix(in srgb, var(--brand-accent) 6%, transparent); --color-accent-border: color-mix(in srgb, var(--brand-accent) 15%, transparent); /* Star ratings */ --color-star: var(--brand-star); /* Primary (accent) opacity scale — for glows, tints, rings */ --primary-02: color-mix(in srgb, var(--brand-primary) 2%, transparent); --primary-04: color-mix(in srgb, var(--brand-primary) 4%, transparent); --primary-06: color-mix(in srgb, var(--brand-primary) 6%, transparent); --primary-08: color-mix(in srgb, var(--brand-primary) 8%, transparent); --primary-10: color-mix(in srgb, var(--brand-primary) 10%, transparent); --primary-12: color-mix(in srgb, var(--brand-primary) 12%, transparent); --primary-15: color-mix(in srgb, var(--brand-primary) 15%, transparent); --primary-20: color-mix(in srgb, var(--brand-primary) 20%, transparent); --primary-30: color-mix(in srgb, var(--brand-primary) 30%, transparent); --primary-00: color-mix(in srgb, var(--brand-primary) 0%, transparent); /* On-dark (light) opacity scale — text/borders over dark backgrounds */ --on-dark-02: color-mix(in srgb, var(--brand-light) 2%, transparent); --on-dark-04: color-mix(in srgb, var(--brand-light) 4%, transparent); --on-dark-06: color-mix(in srgb, var(--brand-light) 6%, transparent); --on-dark-08: color-mix(in srgb, var(--brand-light) 8%, transparent); --on-dark-10: color-mix(in srgb, var(--brand-light) 10%, transparent); --on-dark-12: color-mix(in srgb, var(--brand-light) 12%, transparent); --on-dark-15: color-mix(in srgb, var(--brand-light) 15%, transparent); --on-dark-20: color-mix(in srgb, var(--brand-light) 20%, transparent); --on-dark-30: color-mix(in srgb, var(--brand-light) 30%, transparent); --on-dark-40: color-mix(in srgb, var(--brand-light) 40%, transparent); --on-dark-50: color-mix(in srgb, var(--brand-light) 50%, transparent); --on-dark-60: color-mix(in srgb, var(--brand-light) 60%, transparent); --on-dark-65: color-mix(in srgb, var(--brand-light) 65%, transparent); --on-dark-70: color-mix(in srgb, var(--brand-light) 70%, transparent); --on-dark-80: color-mix(in srgb, var(--brand-light) 80%, transparent); --on-dark-85: color-mix(in srgb, var(--brand-light) 85%, transparent); /* Dark (shadow/overlay) opacity scale */ --dark-06: color-mix(in srgb, var(--brand-dark) 6%, transparent); --dark-08: color-mix(in srgb, var(--brand-dark) 8%, transparent); --dark-10: color-mix(in srgb, var(--brand-dark) 10%, transparent); --dark-12: color-mix(in srgb, var(--brand-dark) 12%, transparent); --dark-15: color-mix(in srgb, var(--brand-dark) 15%, transparent); --dark-20: color-mix(in srgb, var(--brand-dark) 20%, transparent); --dark-40: color-mix(in srgb, var(--brand-dark) 40%, transparent); --dark-50: color-mix(in srgb, var(--brand-dark) 50%, transparent); --dark-70: color-mix(in srgb, var(--brand-dark) 70%, transparent); --dark-90: color-mix(in srgb, var(--brand-dark) 90%, transparent); --dark-95: color-mix(in srgb, var(--brand-dark) 95%, transparent); /* Accent (error) opacity scale */ --accent-06: color-mix(in srgb, var(--brand-accent) 6%, transparent); --accent-15: color-mix(in srgb, var(--brand-accent) 15%, transparent); /* Extra dark tint used in hero gradients (lighter navy) */ --color-dark-tint: color-mix(in srgb, var(--brand-dark) 60%, #2a5a9a); /* Gradients */ --gradient-hero: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-light) 50%, var(--color-dark-tint) 100%); --gradient-cta: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-light) 100%); --gradient-primary-glow: radial-gradient(circle, var(--color-primary-glow) 0%, transparent 60%); --gradient-dark-overlay: linear-gradient(180deg, var(--dark-10) 0%, var(--dark-70) 70%, var(--dark-95) 100%); /* ═══ LEGACY ALIASES (existing CSS uses these names — maps to new system) ═══ */ --navy: var(--color-dark); --navy-90: var(--color-dark-90); --navy-light: var(--color-dark-light); --teal: var(--color-primary); --teal-dark: var(--color-primary-dark); --teal-glow: var(--color-primary-glow); --teal-subtle: var(--color-primary-subtle); --white: var(--color-bg); --off-white: var(--color-bg-subtle); --cream: var(--color-bg-cream); --grey-100: var(--color-border-subtle); --grey-200: var(--color-border); --grey-300: var(--color-border-strong); --grey-500: var(--color-text-muted); --grey-700: var(--color-text-light); --gold: var(--color-star); --coral: var(--color-accent); --shadow-sm: 0 1px 3px var(--color-dark-shadow-sm); --shadow-md: 0 4px 20px var(--color-dark-shadow-md); --shadow-lg: 0 12px 40px var(--color-dark-shadow-lg); }