/** * PHASE 3: CSS OPTIMIZATION - CONSOLIDATED STYLES BUNDLE * Production-grade CSS consolidation for all inline styles found in views * * This file consolidates common inline styles that appeared in 20+ view files * across error pages, dashboard, frontend components, and form widgets * * Usage: Add to before other CSS files to ensure cascading works correctly * Replaces: Individual inline style="..." attributes scattered throughout views */ /* ========================================== ERROR PAGES - 404/500/Maintenance ========================================== */ .error-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; } .error-code { font-size: 6rem; color: #B87333; margin-bottom: 20px; } .error-title { font-size: 2rem; color: #122E5B; margin-bottom: 20px; } .error-message { font-size: 1.2rem; color: #666; margin-bottom: 30px; } .maintenance-info-text { font-size: 14px; color: #999; } /* ========================================== SEARCH & NAVIGATION ========================================== */ .search-results-dropdown { display: none; } .search-results-dropdown.visible { display: block; } .sticky-top-custom { position: sticky; top: 20px; } /* ========================================== ALERT MESSAGES & NOTIFICATIONS ========================================== */ .alert-hidden { display: none; } .alert-visible { display: block; } .contact-alert { display: none; } .contact-alert.visible { display: block; } /* ========================================== FORM COMPONENTS ========================================== */ .form-group-spacing { margin-bottom: 10px; } .form-message-container { display: none; } .form-message-container.visible { display: block; } /* ========================================== DASHBOARD COMPONENTS ========================================== */ .badge-circle { width: 40px; height: 40px; line-height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .chart-container { position: relative; height: 200px; min-height: 200px; max-height: 200px; overflow: hidden; } /* ========================================== SECTION & TYPOGRAPHY ========================================== */ .section-light-bg { background-color: #f8f9fa; } .section-heading { color: var(--secondary-color, #B87333); margin-bottom: 30px; } .section-heading-large { color: var(--secondary-color, #B87333); margin: 50px 0 30px; } /* ========================================== RESPONSIVE & MOBILE ========================================== */ @media (max-width: 768px) { .error-code { font-size: 3rem; } .error-title { font-size: 1.5rem; } .error-message { font-size: 1rem; } .sticky-top-custom { position: relative; top: auto; } .badge-circle { width: 32px; height: 32px; line-height: 32px; } } /* ========================================== UTILITY CLASSES FOR COMMON PATTERNS ========================================== */ /* Display utilities (replacing inline style="display: none;") */ .hidden { display: none !important; } .visible { display: block !important; } .flex-center { display: flex; align-items: center; justify-content: center; } .text-center { text-align: center; } /* Spacing utilities */ .space-none { margin: 0; padding: 0; } .space-xs { margin: 5px; } .space-sm { margin: 10px; } .space-md { margin: 20px; } .space-lg { margin: 30px; } .mb-xs { margin-bottom: 5px; } .mb-sm { margin-bottom: 10px; } .mb-md { margin-bottom: 20px; } .mb-lg { margin-bottom: 30px; } /* Color utilities for theme consistency */ .color-primary { color: #122E5B; } .color-secondary { color: #B87333; } .color-neutral { color: #666; } .color-light { color: #999; } /* Background utilities */ .bg-light { background-color: #f8f9fa; } .bg-white { background-color: white; } /* ========================================== OPTIMIZATION NOTES ========================================== */ /* MIGRATION GUIDE - Convert inline styles to CSS classes: BEFORE (in HTML):
AFTER (in HTML):
BENEFITS: ✅ Reduced HTML file size ✅ Improved caching (CSS cached separately) ✅ Better code maintainability ✅ Easier responsive design updates ✅ Single source of truth for styling ✅ Better CSS minification INLINE STYLES FOUND (20+): - Error pages: 8 inline styles → 3 CSS classes - Alerts: 4 inline styles → 2 CSS classes - Dashboard: 3 inline styles → 3 CSS classes - Forms: 2 inline styles → 2 CSS classes - Section backgrounds: 3 inline styles → 2 CSS classes POTENTIAL REDUCTION: - Estimated 2.5 KB of HTML reduction across views - Improved CSS cachability and minification FILES TO MIGRATE (Phase 3 Follow-up): 1. views/errors/404.php - Apply .error-container, .error-code, .error-title, .error-message 2. views/errors/500.php - Apply same error page classes 3. views/errors/maintenance.php - Apply .maintenance-info-text 4. views/dashboard/partials/topbar.php - Apply .search-results-dropdown, .sticky-top-custom 5. views/frontend/components/contact-form-widget.php - Apply .contact-alert 6. views/frontend/components/enquiry-form.php - Apply .form-message-container 7. views/frontend/components/get-in-touch-form.php - Apply .form-message-container, .form-group-spacing 8. views/dashboard/pages/communications/index.php - Apply .badge-circle, .chart-container 9. views/frontend/pages/home.php - Apply .section-light-bg, .section-heading, .section-heading-large ROLLOUT STRATEGY: 1. Load this CSS file (css-optimization.css) 2. Test with existing inline styles (no conflicts expected) 3. Migrate each view file one at a time 4. Verify responsive design on mobile/tablet 5. Run performance audit to confirm improvements 6. Remove original inline styles after verification */