/** * BRAND STYLES - NextGen Empowerment Design System * Version: 1.0 * Created: January 2026 * * Purpose: Centralized branding, colors, typography, and component styles * Usage: Link in of all HTML files: * * Benefits: * - Change brand colors in ONE place, updates across entire platform * - Consistent design system for all pages * - Reduces code duplication by ~50-80 lines per file * - Easier maintenance and future rebranding */ /* ============================================================================ CSS VARIABLES - Brand Colors & Design Tokens ============================================================================ Change these values to rebrand the entire platform instantly */ :root { /* PRIMARY BRAND COLORS - Amber/Gold */ --brand-primary: #f59e42; /* Main amber - buttons, accents, highlights */ --brand-primary-light: #fbbf24; /* Light gold - gradients, hover states */ --brand-primary-dark: #f59e0b; /* Deep amber - borders, active states */ /* BACKGROUNDS - Dark theme */ --bg-primary: #111827; /* Main dark background */ --bg-secondary: #1f2937; /* Cards, panels, elevated surfaces */ --bg-tertiary: #374151; /* Borders, dividers, subtle elements */ --bg-hover: #4b5563; /* Hover states for secondary elements */ /* TEXT COLORS */ --text-primary: #ffffff; /* Main headings, important text */ --text-secondary: #e5e7eb; /* Body text, paragraphs */ --text-tertiary: #d1d5db; /* Secondary info, captions */ --text-muted: #9ca3af; /* Placeholder text, disabled states */ --text-dim: #6b7280; /* Very subtle text */ /* ACCENT COLORS - Status & Actions */ --color-success: #22c55e; /* Green - success messages, positive */ --color-success-light: #86efac; /* Light green - success text */ --color-error: #ef4444; /* Red - errors, warnings */ --color-error-light: #fca5a5; /* Light red - error text */ --color-warning: #fbbf24; /* Yellow - warnings, cautions */ --color-info: #3b82f6; /* Blue - info, basic tier */ --color-info-dark: #2563eb; /* Dark blue - basic tier gradients */ /* TYPOGRAPHY */ --font-primary: 'Inter', sans-serif; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* FONT SIZES */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* SPACING */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* BORDER RADIUS */ --radius-sm: 0.375rem; /* 6px - small elements */ --radius-md: 0.5rem; /* 8px - buttons, inputs */ --radius-lg: 0.75rem; /* 12px - cards */ --radius-xl: 1rem; /* 16px - large cards */ --radius-full: 9999px; /* Fully rounded - badges, pills */ /* 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), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2); --shadow-brand: 0 10px 25px rgba(245, 158, 66, 0.1); --shadow-brand-lg: 0 20px 40px rgba(245, 158, 66, 0.2); --shadow-brand-hover: 0 10px 20px rgba(245, 158, 66, 0.3); /* TRANSITIONS */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; --transition-very-slow: 0.8s ease-out; } /* ============================================================================ BASE STYLES ============================================================================ */ body { font-family: var(--font-primary); background-color: var(--bg-primary); color: var(--text-secondary); margin: 0; padding: 0; } /* ============================================================================ COMPONENT STYLES - Reusable UI Elements ============================================================================ */ /* CARDS - Elevated containers for content */ .card { background-color: var(--bg-secondary); padding: var(--space-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--bg-tertiary); transition: all var(--transition-slow); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); } .card-sm { padding: var(--space-md); } .card-lg { padding: var(--space-xl); } /* Stat Cards - Dashboard statistics */ .stat-card { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); border: 1px solid var(--bg-tertiary); } /* Tool Cards - Navigation cards for features */ .tool-card { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); border: 1px solid var(--bg-tertiary); transition: all var(--transition-slow); } .tool-card:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-brand); transform: translateY(-4px); } /* Onboarding Cards - Special emphasis for first-time users */ .onboarding-card { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); border: 2px solid var(--brand-primary); box-shadow: var(--shadow-brand-lg); } .onboarding-container { min-height: 60vh; display: flex; align-items: center; justify-content: center; } /* BUTTONS - Call-to-action elements */ .cta-button { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%); color: var(--bg-primary); font-weight: var(--font-weight-bold); padding: 0.875rem 2rem; border-radius: var(--radius-md); transition: all var(--transition-slow); display: inline-flex; align-items: center; gap: var(--space-sm); border: none; cursor: pointer; text-decoration: none; } .cta-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand-hover); } /* BADGES - Tier indicators and status labels */ .tier-badge { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-full); font-weight: var(--font-weight-semibold); font-size: var(--text-sm); } .tier-badge.basic { background: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%); color: var(--text-primary); } .tier-badge.premium { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%); color: var(--bg-primary); } /* PROGRESS BARS - Goal and achievement tracking */ .progress-bar { background-color: var(--bg-tertiary); border-radius: var(--radius-md); overflow: hidden; } .progress-fill { background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%); height: 0.5rem; border-radius: var(--radius-md); transition: width var(--transition-very-slow); } /* ACTIVITY ITEMS - Timeline and history elements */ .activity-item { border-left: 3px solid var(--brand-primary); padding-left: var(--space-md); margin-bottom: var(--space-md); } /* ============================================================================ FORM ELEMENTS - Inputs, buttons, and interactive components ============================================================================ */ .form-input { width: 100%; padding: 0.75rem; border-radius: var(--radius-md); background-color: var(--bg-primary); color: var(--text-secondary); border: 1px solid var(--bg-hover); transition: border-color var(--transition-base), box-shadow var(--transition-base); font-family: var(--font-primary); } .form-input::placeholder { color: var(--text-muted); } .form-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary); } /* ============================================================================ UTILITY CLASSES - Quick styling helpers ============================================================================ */ /* Text Colors */ .text-brand { color: var(--brand-primary); } .text-success { color: var(--color-success); } .text-error { color: var(--color-error); } .text-warning { color: var(--color-warning); } .text-info { color: var(--color-info); } .text-muted { color: var(--text-muted); } /* Background Utilities */ .bg-primary { background-color: var(--bg-primary); } .bg-secondary { background-color: var(--bg-secondary); } .bg-tertiary { background-color: var(--bg-tertiary); } /* Brand Gradients */ .gradient-brand { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%); } .gradient-dark { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); } /* Spacing Utilities */ .p-sm { padding: var(--space-sm); } .p-md { padding: var(--space-md); } .p-lg { padding: var(--space-lg); } .p-xl { padding: var(--space-xl); } .m-sm { margin: var(--space-sm); } .m-md { margin: var(--space-md); } .m-lg { margin: var(--space-lg); } .m-xl { margin: var(--space-xl); } /* Border Radius Utilities */ .rounded-sm { border-radius: var(--radius-sm); } .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } /* Shadow Utilities */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } .shadow-brand { box-shadow: var(--shadow-brand); } /* ============================================================================ RESPONSIVE DESIGN - Mobile-first approach ============================================================================ */ /* Tablet and larger screens */ @media (min-width: 768px) { .card { padding: var(--space-xl); } } /* Desktop screens */ @media (min-width: 1024px) { /* Additional desktop-specific styles can be added here */ } /* ============================================================================ QUICK REBRAND GUIDE ============================================================================ To change your brand colors across the entire platform: 1. AMBER TO PURPLE EXAMPLE: --brand-primary: #a855f7; (purple) --brand-primary-light: #c084fc; (light purple) --brand-primary-dark: #9333ea; (deep purple) 2. DARK TO LIGHT THEME EXAMPLE: --bg-primary: #ffffff; (white) --bg-secondary: #f9fafb; (light gray) --bg-tertiary: #e5e7eb; (medium gray) --text-primary: #111827; (dark text) --text-secondary: #374151; (medium text) 3. CHANGE FONT: --font-primary: 'Roboto', sans-serif; (Don't forget to update the Google Fonts link in HTML) Save this file, refresh any page, and see changes instantly! ============================================================================ */