UI_UPDATE.MD

@@ -155,85 +155,85 @@ Always come back and update UI_UPDATE.MD once complete with task and task item.
 ### Sub-task 2.1: Enhanced Color System and Theming
 
 #### 2.1.1: Color Palette Expansion
-- [x] Analyze current Dodgers color usage
+- [ ] Analyze current Dodgers color usage
-- [x] Create comprehensive color palette with variations
+- [ ] Create comprehensive color palette with variations
-- [x] Implement opacity variants for different states
+- [ ] Implement opacity variants for different states
-- [x] Test accessibility compliance with color combinations
+- [ ] Test accessibility compliance with color combinations
 
 #### 2.1.2: CSS Variables System
-- [x] Define global color variables in variables.css
+- [ ] Define global color variables in variables.css
-- [x] Implement theme-specific color overrides
+- [ ] Implement theme-specific color overrides
-- [x] Create semantic color names (primary, secondary, accent)
+- [ ] Create semantic color names (primary, secondary, accent)
-- [x] Set up dark/light mode foundations
+- [ ] Set up dark/light mode foundations
 
 #### 2.1.3: Gradient Implementation
-- [x] Create subtle gradient backgrounds for headers
+- [ ] Create subtle gradient backgrounds for headers
-- [x] Implement button gradient styles
+- [ ] Implement button gradient styles
-- [x] Add background gradients for visual interest
+- [ ] Add background gradients for visual interest
-- [x] Ensure gradients meet accessibility requirements
+- [ ] Ensure gradients meet accessibility requirements
 
 #### 2.1.4: Color Token System
-- [x] Establish consistent color usage patterns
+- [ ] Establish consistent color usage patterns
-- [x] Create color utility classes
+- [ ] Create color utility classes
-- [x] Implement dynamic theming capabilities
+- [ ] Implement dynamic theming capabilities
-- [x] Test cross-browser color rendering
+- [ ] Test cross-browser color rendering
 
 #### 2.1.5: Accessibility Validation
-- [x] Verify WCAG AA contrast ratios
+- [ ] Verify WCAG AA contrast ratios
-- [x] Test colorblind accessibility modes
+- [ ] Test colorblind accessibility modes
-- [x] Implement color-independent design patterns
+- [ ] Implement color-independent design patterns
-- [x] Document color usage guidelines
+- [ ] Document color usage guidelines
 
 ### Sub-task 2.2: Typography and Font System
 
 #### 2.2.1: Font Stack Definition
-- [x] Define preferred web fonts with fallbacks
+- [ ] Define preferred web fonts with fallbacks
-- [x] Create font-loading strategy for performance
+- [ ] Create font-loading strategy for performance
-- [x] Implement adaptive font loading based on user preferences
+- [ ] Implement adaptive font loading based on user preferences
 
 #### 2.2.2: Typography Scale Creation
-- [x] Establish modular typography scale (6-8 sizes)
+- [ ] Establish modular typography scale (6-8 sizes)
-- [x] Implement line height relationships
+- [ ] Implement line height relationships
-- [x] Create consistent letter spacing patterns
+- [ ] Create consistent letter spacing patterns
 
 #### 2.2.3: Font Weight Variations
-- [x] Implement font weight variations for hierarchy
+- [ ] Implement font weight variations for hierarchy
-- [x] Define semantic font weights (regular, bold, semi-bold)
+- [ ] Define semantic font weights (regular, bold, semi-bold)
-- [x] Create consistent weight usage patterns
+- [ ] Create consistent weight usage patterns
 
 #### 2.2.4: Text Truncation Utilities
-- [x] Implement ellipsis truncation for long text
+- [ ] Implement ellipsis truncation for long text
-- [x] Create multi-line truncation utilities
+- [ ] Create multi-line truncation utilities
-- [x] Add responsive text truncation
+- [ ] Add responsive text truncation
 
 #### 2.2.5: Accessibility Features
-- [x] Test font readability at small sizes
+- [ ] Test font readability at small sizes
-- [x] Implement user font scaling compatibility
+- [ ] Implement user font scaling compatibility
-- [x] Create high contrast font variations
+- [ ] Create high contrast font variations
 
 ### Sub-task 2.3: Shadow and Elevation System
 
 #### 2.3.1: Elevation Scale Definition
-- [x] Create 0-6 level elevation system
+- [ ] Create 0-6 level elevation system
-- [x] Define shadow properties for each level
+- [ ] Define shadow properties for each level
-- [x] Implement semantic elevation usage
+- [ ] Implement semantic elevation usage
 
 #### 2.3.2: Component Shadow Implementation
-- [x] Apply appropriate shadows to cards
+- [ ] Apply appropriate shadows to cards
-- [x] Add elevation to floating elements
+- [ ] Add elevation to floating elements
-- [x] Create interactive shadow variations
+- [ ] Create interactive shadow variations
 
 #### 2.3.3: Visual Hierarchy Enhancement
-- [x] Use elevation to create depth
+- [ ] Use elevation to create depth
-- [x] Implement layered design principles
+- [ ] Implement layered design principles
-- [x] Test shadow performance on mobile devices
+- [ ] Test shadow performance on mobile devices
 
 ### Sub-task 2.4: Modern Icon System
 
 #### 2.4.1: Icon Replacement Strategy
-- [x] Identify current emoji usage
+- [ ] Identify current emoji usage
-- [x] Replace with semantic SVG icons
+- [ ] Replace with semantic SVG icons
-- [x] Implement icon sprite system
+- [ ] Implement icon sprite system
 
 #### 2.4.2: Icon Size Variants
 - [ ] Define icon size scale (xs-xl)

assets/css/main.css

@@ -1,7 +1,6 @@
 /* Main CSS file - imports all modular stylesheets */
-@import url('../static/css/reset.css');
+@import url('reset.css');
-@import url('../static/css/variables.css');
+@import url('variables.css');
-@import url('../static/css/utilities.css');
+@import url('utilities.css');
-@import url('../static/css/components.css');
+@import url('components.css');
-@import url('../static/css/icons.css');
+@import url('layout.css');
-@import url('../static/css/layout.css');

index.php

@@ -307,9 +307,6 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dodgers Stream Theater</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/main.css?v=1.4.2">
 </head>
@@ -326,7 +323,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
                 </div>
                 <div class="video-player__header-controls">
                     <button class="stream-stats__refresh-btn" data-action="manual-refresh" title="Manual Stream Refresh" aria-label="Refresh stream">
-                        <span class="icon-refresh"></span> Refresh
+                        🔄 Refresh
                     </button>
                     <select class="video-player__quality-selector" id="qualitySelector" style="display:none;" aria-label="Video quality">
                         <option value="auto">Auto Quality</option>
@@ -381,7 +378,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
             </div>
 
             <section class="chat__messages" id="chatMessages" aria-live="polite" aria-label="Chat messages" role="log" aria-atomic="false">
-                <div class="chat__empty-state">No messages yet. Be the first to say hello! <span class="icon-wave"></span></div>
+                <div class="chat__empty-state">No messages yet. Be the first to say hello! 👋</div>
             </section>
 
             <div class="chat__typing-indicator" id="typingIndicator" aria-live="assertive">

static/css/components.css

@@ -10,7 +10,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    box-shadow: var(--elevation-4);
+    box-shadow: var(--shadow-dodgers-md);
     z-index: 10;
 }
 
@@ -31,13 +31,8 @@
 }
 
 .stream-logo::before {
-    content: '';
+    content: "⚾";
-    display: inline-block;
+    font-size: var(--font-size-2xl);
-    width: 1.25em;
-    height: 1.25em;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'%3E%3C/svg%3E") no-repeat center center;
-    background-size: contain;
-    margin-right: var(--spacing-2);
 }
 
 /* =================================================================
@@ -75,13 +70,7 @@
 }
 
 .stream-stats__viewer-count::before {
-    content: '';
+    content: "👥";
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM6.5 9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z'%3E%3C/svg%3E") no-repeat center center;
-    background-size: contain;
-    margin-right: var(--spacing-2);
 }
 
 /* =================================================================
@@ -170,7 +159,7 @@
     color: white;
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-semibold);
-    box-shadow: var(--elevation-1);
+    box-shadow: var(--shadow-sm);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -183,13 +172,8 @@
 }
 
 .chat__header-title::before {
-    content: '';
+    content: "💬";
-    display: inline-block;
+    font-size: var(--font-size-lg);
-    width: 1em;
-    height: 1em;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'%3E%3C/svg%3E") no-repeat center center;
-    background-size: contain;
-    margin-right: var(--spacing-2);
 }
 
 .chat__admin-controls {
@@ -359,7 +343,7 @@
     border-radius: var(--border-radius-lg);
     font-size: var(--font-size-sm);
     line-height: var(--line-height-normal);
-    box-shadow: var(--elevation-1);
+    box-shadow: var(--shadow-sm);
     border-left: 3px solid transparent;
     color: var(--text-primary);
     word-wrap: break-word;
@@ -464,12 +448,12 @@
     font-weight: var(--font-weight-semibold);
     cursor: pointer;
     transition: all var(--transition-base);
-    box-shadow: var(--elevation-3);
+    box-shadow: var(--shadow-dodgers-sm);
 }
 
 .chat__input button:hover {
     transform: translateY(-2px);
-    box-shadow: var(--elevation-4);
+    box-shadow: var(--shadow-dodgers-md);
 }
 
 .chat__input button:active {
@@ -576,7 +560,7 @@
     color: white;
     border: none;
     cursor: pointer;
-    box-shadow: var(--elevation-4);
+    box-shadow: var(--shadow-dodgers-md);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -586,7 +570,7 @@
 
 .fab:hover {
     transform: scale(1.1);
-    box-shadow: var(--elevation-5);
+    box-shadow: var(--shadow-dodgers-lg);
 }
 
 .fab.secondary {

static/css/icons.css

@@ -1,91 +0,0 @@
-/* SVG Icon System */
-
-.icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1em;
-    height: 1em;
-}
-
-.icon svg {
-    width: 100%;
-    height: 100%;
-    fill: currentColor;
-}
-
-/* Icon Definitions */
-.icon-refresh {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-}
-
-.icon-refresh::before {
-    content: '';
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11.356 2a8.001 8.001 0 01-15.356 2M4 4v5h.582M4.582 9A8.003 8.003 0 019.582 9'%3E%3C/svg%3E") no-repeat center center;
-    background-size: contain;
-}
-
-.icon-baseball {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-}
-
-.icon-baseball::before {
-    content: '';
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'%3E%3C/svg%3E") no-repeat center center;
-    background-size: contain;
-}
-
-.icon-chat {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-}
-
-.icon-chat::before {
-    content: '';
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'%3E%3C/svg%3E") no-repeat center center;
-    background-size: contain;
-}
-
-.icon-users {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-}
-
-.icon-users::before {
-    content: '';
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM6.5 9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z'%3E%3C/svg%3E") no-repeat center center;
-    background-size: contain;
-}
-
-.icon-wave {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-}
-
-.icon-wave::before {
-    content: '';
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 16l-4-4m0 0l4-4m-4 4h18'%3E%3C/svg%3E") no-repeat center center;
-    background-size: contain;
-}

static/css/utilities.css

@@ -253,63 +253,63 @@
 }
 
 /* =================================================================
-   COLOR UTILITY CLASSES
+   BORDER UTILITIES
    ================================================================= */
 
-.text-primary {
+.rounded {
-    color: var(--text-primary);
+    border-radius: var(--border-radius-base);
 }
 
-.text-secondary {
+.rounded-full {
-    color: var(--text-secondary);
+    border-radius: var(--border-radius-full);
-}
-
-.text-muted {
-    color: var(--text-muted);
-}
-
-.text-accent {
-    color: var(--dodgers-gold-500);
-}
-
-.text-error {
-    color: var(--dodgers-red-500);
-}
-
-.text-success {
-    color: var(--dodgers-blue-500);
 }
 
 /* =================================================================
-   BG-NEUTRAL UTILITIES
+   TRANSITIONS UTILITIES
    ================================================================= */
 
-.bg-white {
+.transition {
-    background-color: white;
+    transition: all var(--transition-base);
 }
 
-.bg-black {
+.transition-fast {
-    background-color: black;
+    transition: all var(--transition-fast);
 }
 
-.bg-gray-50 {
+.transition-slow {
-    background-color: var(--gray-50);
+    transition: all var(--transition-slow);
 }
 
-.bg-gray-100 {
+/* =================================================================
-    background-color: var(--gray-100);
+   RESPONSIVE UTILITIES
+   ================================================================= */
+
+/* Hide elements at different breakpoints */
+@media (max-width: 767px) {
+    .hidden-mobile {
+        display: none !important;
+    }
 }
 
-.bg-gray-200 {
+@media (min-width: 768px) {
-    background-color: var(--gray-200);
+    .hidden-tablet {
+        display: none !important;
+    }
 }
 
-.bg-gray-800 {
+@media (max-width: 1023px) {
-    background-color: var(--gray-800);
+    .hidden-tablet-up {
+        display: none !important;
+    }
 }
 
-.bg-gray-900 {
+@media (min-width: 1024px) {
-    background-color: var(--gray-900);
+    .hidden-desktop {
+        display: none !important;
+    }
+}
+
+/* =================================================================
    MOBILE RESPONSIVE OVERRIDES
    ================================================================= */
 

static/css/variables.css

@@ -42,50 +42,6 @@
     --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);
@@ -142,7 +98,7 @@
        ================================================================= */
 
     /* Font Families */
-    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
     --font-family-mono: 'Courier New', monospace;
 
     /* Font Sizes - Modular Scale (1.125 ratio) */
@@ -219,31 +175,6 @@
     --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
        ================================================================= */