/** * Lighthouse Homeschool Academy Theme * * All site colors, fonts, and branding defined here. * Change these variables once, and the entire site updates. * * Usage: * - Link this file in of all HTML files * - Replace hardcoded Tailwind classes with inline style="background-color: var(--primary);" * - Or use CSS classes that reference these variables */ :root { /* ========== PRIMARY COLOR PALETTE ========== */ /* Main brand color - Seafoam Teal (used for headers, hero sections, main buttons) */ --primary: #2d8a7a; /* Base Seafoam */ --primary-dark: #1f5e53; /* Deep Forest Teal */ --primary-light: #4da899; /* Bright Seafoam */ --primary-lighter: #a2d9ce; /* Soft Mint */ --primary-lightest: #e8f6f3; /* Mist */ /* Secondary/Accent color - Coastal Blue (used for FAQ, accents, highlights) */ --accent: #1a7fa0; /* Ocean Blue */ --accent-light: #4eb3d3; /* Sky Blue */ --accent-lighter: #b3e0ed; /* Light Cloud */ --accent-lightest: #f0f9fb; /* Morning Dew */ /* Tertiary - Sage (used for scripture references, special callouts) */ --tertiary: #5a8d66; /* Sage Green */ --tertiary-light: #7db48a; /* Soft Leaf */ --tertiary-lighter: #d9f0e0; /* Spring Bud */ /* ========== SEMANTIC COLORS ========== */ /* Success / Positive states */ --success: #16a34a; /* green-600 */ --success-light: #22c55e; /* green-500 */ --success-bg: #f0fdf4; /* green-50 */ /* Danger / Negative states */ --danger: #dc2626; /* red-600 */ --danger-dark: #991b1b; /* red-900 */ --danger-light: #fecaca; /* red-300 */ --danger-bg: #fef2f2; /* red-50 */ /* Warning / Caution states */ --warning: #eab308; /* yellow-400 */ --warning-dark: #b45309; /* yellow-700 */ --warning-bg: #fef9e7; /* yellow-50 */ /* ========== NEUTRAL / GRAYSCALE ========== */ /* Text colors */ --text-dark: #111827; /* gray-900 */ --text-primary: #1f2937; /* gray-800 */ --text-secondary: #4b5563; /* gray-700 */ --text-muted: #6b7280; /* gray-600 */ --text-light: #9ca3af; /* gray-400 */ --text-lighter: #d1d5db; /* gray-300 */ /* Background colors */ --bg-white: #ffffff; --bg-light: #f9fafb; /* gray-50 */ --bg-lighter: #f3f4f6; /* gray-100 */ --bg-lightest: #e5e7eb; /* gray-200 */ /* Border colors */ --border-light: #e5e7eb; /* gray-200 */ --border-medium: #d1d5db; /* gray-300 */ --border-dark: #9ca3af; /* gray-400 */ /* ========== TYPOGRAPHY ========== */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; /* ========== SPACING ========== */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* ========== SHADOWS ========== */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* ========== BORDER RADIUS ========== */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* ========== TRANSITIONS ========== */ --transition-fast: 150ms ease-in-out; --transition-base: 200ms ease-in-out; --transition-slow: 300ms ease-in-out; /* ========== GRADIENTS ========== */ /* Hero section gradient */ --gradient-hero: linear-gradient(to right, var(--primary), var(--accent)); /* Subtle background gradient */ --gradient-subtle: linear-gradient(to bottom right, var(--primary-lightest), var(--accent-lightest)); /* Button hover gradient */ --gradient-button: linear-gradient(135deg, var(--primary-light), var(--accent)); /* ========== DYNAMIC COLOR PALETTE (for tutor cards, event badges, etc.) ========== */ --color-1: #2a9d8f; /* Dark Seafoam */ --color-1-light: #4db6ac; --color-1-bg: #e0f2f1; --color-2: #264653; /* Charcoal Blue */ --color-2-light: #3a6373; --color-2-bg: #f0f4f5; --color-3: #e9c46a; /* Sand Gold */ --color-3-light: #f1d898; --color-3-bg: #fffbf0; --color-4: #f4a261; /* Soft Sunset */ --color-4-light: #f8c291; --color-4-bg: #fff5eb; --color-5: #e76f51; /* Terra Cotta */ --color-5-light: #f0a08d; --color-5-bg: #fef4f2; /* ========== USAGE GUIDE ========== */ /* GRADIENTS: background: var(--gradient-hero); /* Hero sections & large headers */ background: var(--gradient-subtle); /* Subtle background fills */ background: var(--gradient-button); /* Button hover states */ DYNAMIC COLOR PALETTE: Use for rotating colors on cards, badges, tutor profiles, etc. Each color has a base, light, and background variant. JavaScript example (tutor cards): const colors = [1, 2, 3, 4, 5, 6]; const colorIndex = tutor_index % 6; element.style.color = `var(--color-${colorIndex}-light)`; element.style.backgroundColor = `var(--color-${colorIndex}-bg)`; CSS example (nth-child): .tutor-card:nth-child(6n+1) { border-color: var(--color-1); } .tutor-card:nth-child(6n+2) { border-color: var(--color-2); } etc. TAILWIND REPLACEMENT REFERENCE: from-blue-900 to-blue-700 → use var(--gradient-hero) from-blue-100 to-blue-50 → consider var(--gradient-subtle) bg-gray-50 → use var(--bg-lightest) text-blue-900 → use var(--text-dark) or var(--primary) text-sky-700 → use var(--accent) */ /** * QUICK REFERENCE: REPLACING TAILWIND CLASSES * * Instead of: Use: * ──────────────────────────────────────────────────────────────── * bg-blue-900 style="background-color: var(--primary);" * text-blue-900 style="color: var(--primary);" * border-blue-600 style="border-color: var(--primary-light);" * bg-blue-50 style="background-color: var(--primary-lightest);" * bg-sky-50 style="background-color: var(--accent-lightest);" * text-sky-700 style="color: var(--accent);" * text-gray-800 style="color: var(--text-primary);" * text-gray-600 style="color: var(--text-muted);" * bg-gray-50 style="background-color: var(--bg-light);" * bg-green-600 style="background-color: var(--success);" * bg-red-600 style="background-color: var(--danger);" * * For larger projects, consider creating Tailwind config override or CSS classes like: * * .btn-primary { background-color: var(--primary); color: white; } * .bg-section { background-color: var(--primary-lightest); } * .text-heading { color: var(--text-primary); font-size: var(--font-size-2xl); } */