357 lines
13 KiB
CSS
357 lines
13 KiB
CSS
/* CSS Custom Properties - Dodgers Theme */
|
|
|
|
/* =================================================================
|
|
COLOR PALETTE - DODGERS BRAND COLORS
|
|
================================================================= */
|
|
|
|
:root {
|
|
/* Primary Dodgers Colors */
|
|
--dodgers-blue: #005A9C;
|
|
--dodgers-blue-50: #e6f2ff;
|
|
--dodgers-blue-100: #b3d9ff;
|
|
--dodgers-blue-200: #80bfff;
|
|
--dodgers-blue-300: #4da6ff;
|
|
--dodgers-blue-400: #1a8dff;
|
|
--dodgers-blue-500: #005A9C; /* Base */
|
|
--dodgers-blue-600: #004d85;
|
|
--dodgers-blue-700: #003d6b;
|
|
--dodgers-blue-800: #002d52;
|
|
--dodgers-blue-900: #001d38;
|
|
|
|
--dodgers-red: #EF3E42;
|
|
--dodgers-red-50: #fef2f2;
|
|
--dodgers-red-100: #fce2e2;
|
|
--dodgers-red-200: #f9c9c9;
|
|
--dodgers-red-300: #f4a8a9;
|
|
--dodgers-red-400: #ef6e70;
|
|
--dodgers-red-500: #EF3E42; /* Base */
|
|
--dodgers-red-600: #e92e31;
|
|
--dodgers-red-700: #d91c1f;
|
|
--dodgers-red-800: #c0171a;
|
|
--dodgers-red-900: #a00d10;
|
|
|
|
--dodgers-gold: #FFD700;
|
|
--dodgers-gold-50: #fffbeb;
|
|
--dodgers-gold-100: #fef3c7;
|
|
--dodgers-gold-200: #fde68a;
|
|
--dodgers-gold-300: #fcd34d;
|
|
--dodgers-gold-400: #fbbf24;
|
|
--dodgers-gold-500: #FFD700; /* Base */
|
|
--dodgers-gold-600: #f59e0b;
|
|
--dodgers-gold-700: #d97706;
|
|
--dodgers-gold-800: #b45309;
|
|
--dodgers-gold-900: #92400e;
|
|
|
|
/* Additional Brand Colors */
|
|
--dodgers-white: #FFFFFF;
|
|
--dodgers-black: #000000;
|
|
--dodgers-silver: #C0C0C0;
|
|
--dodgers-navy: #003366;
|
|
--dodgers-maroon: #8B0000;
|
|
|
|
/* Neutral Gray Scale (Tailwind-inspired) */
|
|
--gray-50: #f9fafb;
|
|
--gray-100: #f3f4f6;
|
|
--gray-200: #e5e7eb;
|
|
--gray-300: #d1d5db;
|
|
--gray-400: #9ca3af;
|
|
--gray-500: #6b7280;
|
|
--gray-600: #4b5563;
|
|
--gray-700: #374151;
|
|
--gray-800: #1f2937;
|
|
--gray-900: #111827;
|
|
|
|
/* Warm Gray Scale */
|
|
--warm-gray-50: #fafaf9;
|
|
--warm-gray-100: #f5f5f4;
|
|
--warm-gray-200: #e7e5e4;
|
|
--warm-gray-300: #d6d3d1;
|
|
--warm-gray-400: #a8a29e;
|
|
--warm-gray-500: #78716c;
|
|
--warm-gray-600: #57534e;
|
|
--warm-gray-700: #44403c;
|
|
--warm-gray-800: #292524;
|
|
--warm-gray-900: #1c1917;
|
|
|
|
/* Additional Opacity Variants for States */
|
|
--dodgers-blue-10: rgba(0, 90, 156, 0.1);
|
|
--dodgers-blue-20: rgba(0, 90, 156, 0.2);
|
|
--dodgers-blue-30: rgba(0, 90, 156, 0.3);
|
|
|
|
--dodgers-red-10: rgba(239, 62, 66, 0.1);
|
|
--dodgers-red-20: rgba(239, 62, 66, 0.2);
|
|
--dodgers-red-30: rgba(239, 62, 66, 0.3);
|
|
|
|
--dodgers-gold-10: rgba(255, 215, 0, 0.1);
|
|
--dodgers-gold-20: rgba(255, 215, 0, 0.2);
|
|
--dodgers-gold-30: rgba(255, 215, 0, 0.3);
|
|
|
|
/* Semantic Color Mappings */
|
|
--primary-color: var(--dodgers-blue);
|
|
--secondary-color: var(--dodgers-red);
|
|
--accent-color: var(--dodgers-gold);
|
|
|
|
/* Background Colors */
|
|
--bg-darkest: #050810;
|
|
--bg-darker: #0a0d14;
|
|
--bg-dark: #0f1419;
|
|
--bg-light: #15202b;
|
|
--bg-lighter: #1a2332;
|
|
--bg-lightest: #232d3a;
|
|
|
|
/* Text Colors */
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b8c5d6;
|
|
--text-muted: #8590a0;
|
|
--text-placeholder: #6b7785;
|
|
|
|
/* Interactive States */
|
|
--hover-overlay: rgba(255, 255, 255, 0.1);
|
|
--active-overlay: rgba(255, 255, 255, 0.2);
|
|
--focus-ring: rgba(0, 90, 156, 0.5);
|
|
|
|
/* Borders & Dividers */
|
|
--border-color: #1a2332;
|
|
--border-color-light: #232d3a;
|
|
--divider-color: rgba(255, 255, 255, 0.1);
|
|
|
|
/* Input & Form Elements */
|
|
--input-bg: #1a2332;
|
|
--input-border: #232d3a;
|
|
--input-focus: var(--dodgers-blue);
|
|
--input-error: var(--dodgers-red);
|
|
--input-disabled: #2a3441;
|
|
|
|
/* Cards & Surfaces */
|
|
--card-bg: #15202b;
|
|
--card-border: #1a2332;
|
|
--card-shadow: rgba(0, 0, 0, 0.3);
|
|
|
|
/* Admin Elements */
|
|
--admin-bg: rgba(255, 215, 0, 0.1);
|
|
--admin-border: var(--dodgers-gold);
|
|
--admin-text: var(--dodgers-gold);
|
|
|
|
/* Overlay & Modal */
|
|
--overlay-bg: rgba(0, 0, 0, 0.7);
|
|
--modal-bg: #15202b;
|
|
--tooltip-bg: #232d3a;
|
|
|
|
/* =================================================================
|
|
TYPOGRAPHY SCALE
|
|
================================================================= */
|
|
|
|
/* Font Families */
|
|
--font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
--font-family-mono: 'Courier New', monospace;
|
|
|
|
/* Font Sizes - Modular Scale (1.125 ratio) */
|
|
--font-size-xs: 0.75rem; /* 12px */
|
|
--font-size-sm: 0.875rem; /* 14px */
|
|
--font-size-base: 1rem; /* 16px */
|
|
--font-size-lg: 1.125rem; /* 18px */
|
|
--font-size-xl: 1.25rem; /* 20px */
|
|
--font-size-2xl: 1.5rem; /* 24px */
|
|
--font-size-3xl: 1.875rem; /* 30px */
|
|
--font-size-4xl: 2.25rem; /* 36px */
|
|
|
|
/* Font Weights */
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* Line Heights */
|
|
--line-height-tight: 1.25;
|
|
--line-height-normal: 1.4;
|
|
--line-height-relaxed: 1.6;
|
|
--line-height-loose: 1.8;
|
|
|
|
/* Letter Spacing */
|
|
--letter-spacing-tight: -0.025em;
|
|
--letter-spacing-normal: 0;
|
|
--letter-spacing-wide: 0.025em;
|
|
|
|
/* =================================================================
|
|
SPACING SCALE
|
|
================================================================= */
|
|
|
|
/* Spacing - Based on 4px grid */
|
|
--spacing-1: 0.25rem; /* 4px */
|
|
--spacing-2: 0.5rem; /* 8px */
|
|
--spacing-3: 0.75rem; /* 12px */
|
|
--spacing-4: 1rem; /* 16px */
|
|
--spacing-5: 1.25rem; /* 20px */
|
|
--spacing-6: 1.5rem; /* 24px */
|
|
--spacing-8: 2rem; /* 32px */
|
|
--spacing-10: 2.5rem; /* 40px */
|
|
--spacing-12: 3rem; /* 48px */
|
|
--spacing-16: 4rem; /* 64px */
|
|
|
|
/* =================================================================
|
|
BORDER RADIUS SCALE
|
|
================================================================= */
|
|
|
|
--border-radius-none: 0;
|
|
--border-radius-sm: 0.25rem; /* 4px */
|
|
--border-radius-base: 0.5rem; /* 8px */
|
|
--border-radius-md: 0.75rem; /* 12px */
|
|
--border-radius-lg: 1rem; /* 16px */
|
|
--border-radius-xl: 1.5rem; /* 24px */
|
|
--border-radius-2xl: 2rem; /* 32px */
|
|
--border-radius-full: 9999px;
|
|
|
|
/* =================================================================
|
|
SHADOW SCALE
|
|
================================================================= */
|
|
|
|
--shadow-none: none;
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
--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.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
|
|
/* Elevated shadows for Dodgers theme */
|
|
--shadow-dodgers-sm: 0 2px 8px rgba(0, 90, 156, 0.15);
|
|
--shadow-dodgers-md: 0 4px 16px rgba(0, 90, 156, 0.2);
|
|
--shadow-dodgers-lg: 0 8px 32px rgba(0, 90, 156, 0.25);
|
|
--shadow-dodgers-xl: 0 16px 48px rgba(0, 90, 156, 0.3);
|
|
|
|
/* =================================================================
|
|
ELEVATION SCALE - Semantic Elevation System
|
|
================================================================= */
|
|
|
|
/* Level 0: Flat surface */
|
|
--elevation-0: var(--shadow-none);
|
|
|
|
/* Level 1: Subtle lift for cards */
|
|
--elevation-1: var(--shadow-sm);
|
|
|
|
/* Level 2: Standard elevation for components */
|
|
--elevation-2: var(--shadow-base);
|
|
|
|
/* Level 3: Moderate elevation */
|
|
--elevation-3: var(--shadow-dodgers-sm);
|
|
|
|
/* Level 4: High elevation for floating elements */
|
|
--elevation-4: var(--shadow-dodgers-md);
|
|
|
|
/* Level 5: Higher elevation for overlays */
|
|
--elevation-5: var(--shadow-dodgers-lg);
|
|
|
|
/* Level 6: Maximum elevation for modals */
|
|
--elevation-6: var(--shadow-dodgers-xl);
|
|
|
|
/* =================================================================
|
|
BREAKPOINT VARIABLES - Comprehensive Responsive System
|
|
================================================================= */
|
|
|
|
/* Mobile-first breakpoints (includes xs where content starts) */
|
|
--breakpoint-xs: 320px; /* Extra small devices (320px and up) */
|
|
--breakpoint-sm: 640px; /* Small devices (640px and up) */
|
|
--breakpoint-md: 768px; /* Medium devices (768px and up) */
|
|
--breakpoint-lg: 1024px; /* Large devices (1024px and up) */
|
|
--breakpoint-xl: 1280px; /* Extra large devices (1280px and up) */
|
|
--breakpoint-2xl: 1536px; /* 2X large devices (1536px and up) */
|
|
|
|
/* Container max-widths at each breakpoint */
|
|
--container-xs: 320px;
|
|
--container-sm: 640px;
|
|
--container-md: 768px;
|
|
--container-lg: 1024px;
|
|
--container-xl: 1280px;
|
|
--container-2xl: 1536px;
|
|
|
|
/* Content padding that scales with breakpoints */
|
|
--container-padding-xs: var(--spacing-2);
|
|
--container-padding-sm: var(--spacing-4);
|
|
--container-padding-md: var(--spacing-6);
|
|
--container-padding-lg: var(--spacing-8);
|
|
--container-padding-xl: var(--spacing-10);
|
|
--container-padding-2xl: var(--spacing-12);
|
|
|
|
/* =================================================================
|
|
BREAKPOINT MIXIN SYSTEM & UTILITIES
|
|
================================================================= */
|
|
|
|
/* Media query helpers using custom properties */
|
|
--mq-xs: (min-width: var(--breakpoint-xs));
|
|
--mq-sm: (min-width: var(--breakpoint-sm));
|
|
--mq-md: (min-width: var(--breakpoint-md));
|
|
--mq-lg: (min-width: var(--breakpoint-lg));
|
|
--mq-xl: (min-width: var(--breakpoint-xl));
|
|
--mq-2xl: (min-width: var(--breakpoint-2xl));
|
|
|
|
/* Max-width media queries for desktop-first approach */
|
|
--mq-xs-max: (max-width: calc(var(--breakpoint-sm) - 1px));
|
|
--mq-sm-max: (max-width: calc(var(--breakpoint-md) - 1px));
|
|
--mq-md-max: (max-width: calc(var(--breakpoint-lg) - 1px));
|
|
--mq-lg-max: (max-width: calc(var(--breakpoint-xl) - 1px));
|
|
--mq-xl-max: (max-width: calc(var(--breakpoint-2xl) - 1px));
|
|
|
|
/* Combined breakpoint utilities */
|
|
--mq-sm-only: (min-width: var(--breakpoint-sm)) and (max-width: calc(var(--breakpoint-md) - 1px));
|
|
--mq-md-only: (min-width: var(--breakpoint-md)) and (max-width: calc(var(--breakpoint-lg) - 1px));
|
|
--mq-lg-only: (min-width: var(--breakpoint-lg)) and (max-width: calc(var(--breakpoint-xl) - 1px));
|
|
--mq-xl-only: (min-width: var(--breakpoint-xl)) and (max-width: calc(var(--breakpoint-2xl) - 1px));
|
|
|
|
/* Dashboard visibility breakpoints */
|
|
--mq-dashboard-mobile: (max-width: calc(var(--breakpoint-2xl) - 1px));
|
|
--mq-dashboard-enabled: (min-width: var(--breakpoint-2xl));
|
|
|
|
/* =================================================================
|
|
Z-INDEX SCALE
|
|
================================================================= */
|
|
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1020;
|
|
--z-fixed: 1030;
|
|
--z-modal-backdrop: 1040;
|
|
--z-modal: 1050;
|
|
--z-popover: 1060;
|
|
--z-tooltip: 1070;
|
|
--z-toast: 1080;
|
|
|
|
/* =================================================================
|
|
ICON SIZE SCALE
|
|
================================================================= */
|
|
|
|
/* Icon Size Scale - Consistent scaling for SVG icons */
|
|
--icon-size-xs: 0.75rem; /* 12px - Small indicators */
|
|
--icon-size-sm: 1rem; /* 16px - Default size */
|
|
--icon-size-md: 1.25rem; /* 20px - Button icons */
|
|
--icon-size-lg: 1.5rem; /* 24px - Navigation elements */
|
|
--icon-size-xl: 2rem; /* 32px - Hero elements */
|
|
|
|
/* Responsive icon sizes based on viewport */
|
|
--icon-size-responsive-xs: clamp(0.625rem, 2vw, var(--icon-size-xs));
|
|
--icon-size-responsive-sm: clamp(0.875rem, 2.5vw, var(--icon-size-sm));
|
|
--icon-size-responsive-md: clamp(1rem, 3vw, var(--icon-size-md));
|
|
--icon-size-responsive-lg: clamp(1.25rem, 3.5vw, var(--icon-size-lg));
|
|
--icon-size-responsive-xl: clamp(1.5rem, 4vw, var(--icon-size-xl));
|
|
|
|
/* =================================================================
|
|
TRANSITIONS & ANIMATIONS
|
|
================================================================= */
|
|
|
|
--transition-fast: 0.15s ease-in-out;
|
|
--transition-base: 0.2s ease-in-out;
|
|
--transition-slow: 0.3s ease-in-out;
|
|
|
|
/* Easing functions */
|
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
/* =================================================================
|
|
DARK THEME OVERRIDE (Future Enhancement)
|
|
================================================================= */
|
|
|
|
/* .theme-light {
|
|
--bg-primary: var(--dodgers-blue-50);
|
|
--text-primary: #1e293b;
|
|
} */
|