// SPA-COMPATIBLE ALL-JAVASCRIPT SOLUTION function initializeServiceCategories() { console.log('Initializing service categories...'); // Check if headers already exist to prevent duplicates if (document.querySelector('.hvac-header') || document.querySelector('.plumbing-header')) { console.log('Headers already exist, skipping initialization'); return; } const servicesGrid = document.querySelector('.grab-services-grid'); const serviceCards = document.querySelectorAll('.grab-service-card'); console.log('Services grid found:', servicesGrid); console.log('Service cards found:', serviceCards.length); if (!servicesGrid) { console.log('Services grid not found, will try again when DOM changes'); return; } if (!serviceCards.length) { console.log('No service cards found, will try again when DOM changes'); return; } // Create and style HVAC Services header const hvacHeader = document.createElement('div'); hvacHeader.className = 'hvac-header'; hvacHeader.innerHTML = `

HVAC Services

`; hvacHeader.style.cssText = ` display: block !important; width: 100% !important; margin: 0 0 2.5rem 0 !important; padding: 0.5rem !important; background: white !important; grid-column: 1 / -1 !important; position: relative !important; `; // Create and style Plumbing Services header const plumbingHeader = document.createElement('div'); plumbingHeader.className = 'plumbing-header'; plumbingHeader.innerHTML = `

Plumbing Services

`; plumbingHeader.style.cssText = ` display: block !important; width: 100% !important; margin: 4rem 0 2.5rem 0 !important; padding: 0.5rem !important; background: white !important; grid-column: 1 / -1 !important; position: relative !important; `; // Insert HVAC header at the beginning servicesGrid.insertBefore(hvacHeader, servicesGrid.firstChild); console.log('HVAC header inserted'); // Insert Plumbing header before the 7th card (index 6) if (serviceCards.length >= 7) { const seventhCard = serviceCards[6]; servicesGrid.insertBefore(plumbingHeader, seventhCard); console.log('Plumbing header inserted before 7th card'); } else { servicesGrid.appendChild(plumbingHeader); console.log('Plumbing header appended at end (less than 7 cards)'); } // Enhanced button styling with better visual hierarchy const serviceButtons = document.querySelectorAll('.grab-service-button'); console.log('Service buttons found:', serviceButtons.length); serviceButtons.forEach(button => { button.style.cssText += ` background: linear-gradient(135deg, #2952d9 0%, #1e3a8a 100%) !important; border: none !important; border-radius: 0.5rem !important; padding: 0.75rem 1.5rem !important; font-weight: 600 !important; font-size: 0.875rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; box-shadow: 0 2px 4px rgba(41, 82, 217, 0.2) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; `; button.addEventListener('mouseenter', function () { this.style.background = 'linear-gradient(135deg, #1e3a8a 0%, #2952d9 100%)'; this.style.transform = 'translateY(-2px)'; this.style.boxShadow = '0 8px 16px rgba(41, 82, 217, 0.3)'; }); button.addEventListener('mouseleave', function () { this.style.background = 'linear-gradient(135deg, #2952d9 0%, #1e3a8a 100%)'; this.style.transform = 'translateY(0)'; this.style.boxShadow = '0 2px 4px rgba(41, 82, 217, 0.2)'; }); }); // Enhanced card hover effects with subtle category styling serviceCards.forEach((card, index) => { card.style.cssText += ` transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: hidden !important; `; // Add subtle category indicator const categoryIndicator = document.createElement('div'); categoryIndicator.style.cssText = ` position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: ${index < 6 ? '#2952d9' : '#fe4d4e'}; opacity: 0; transition: opacity 0.3s ease; z-index: 1; `; card.appendChild(categoryIndicator); card.addEventListener('mouseenter', function () { this.style.transform = 'translateY(-6px)'; this.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.12)'; categoryIndicator.style.opacity = '1'; }); card.addEventListener('mouseleave', function () { this.style.transform = 'translateY(0)'; this.style.boxShadow = ''; categoryIndicator.style.opacity = '0'; }); }); // Responsive adjustments for better mobile experience function handleResize() { const isMobile = window.innerWidth <= 768; // Update header styling for mobile const hvacSpan = hvacHeader.querySelector('span'); const plumbingSpan = plumbingHeader.querySelector('span'); if (hvacSpan && plumbingSpan) { const fontSize = isMobile ? '1.25rem' : '1.5rem'; hvacSpan.style.fontSize = fontSize; plumbingSpan.style.fontSize = fontSize; } // Update header margins for mobile hvacHeader.style.margin = isMobile ? '0 0 2rem 0' : '0 0 2.5rem 0'; plumbingHeader.style.margin = isMobile ? '3rem 0 2rem 0' : '4rem 0 2.5rem 0'; } // Initial resize check handleResize(); // Listen for window resize window.addEventListener('resize', handleResize); console.log('Service categories initialized successfully!'); } // Function to clean up existing headers before re-initializing function cleanupHeaders() { const existingHvac = document.querySelector('.hvac-header'); const existingPlumbing = document.querySelector('.plumbing-header'); if (existingHvac) existingHvac.remove(); if (existingPlumbing) existingPlumbing.remove(); } // SPA-compatible initialization function initSPAServiceCategories() { // Clean up any existing headers first cleanupHeaders(); // Try to initialize initializeServiceCategories(); } // Initial load document.addEventListener('DOMContentLoaded', initSPAServiceCategories); // Watch for DOM changes (SPA navigation) const observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { // Check if nodes were added if (mutation.type === 'childList' && mutation.addedNodes.length > 0) { // Check if the services grid was added const servicesGrid = document.querySelector('.grab-services-grid'); if (servicesGrid && !document.querySelector('.hvac-header')) { console.log('Services grid detected after navigation, initializing...'); setTimeout(initSPAServiceCategories, 100); // Small delay to ensure DOM is settled } } }); }); // Start observing observer.observe(document.body, { childList: true, subtree: true }); // Also listen for common SPA navigation events window.addEventListener('popstate', function () { setTimeout(initSPAServiceCategories, 300); }); // Listen for hash changes window.addEventListener('hashchange', function () { setTimeout(initSPAServiceCategories, 300); }); // Manual trigger for testing window.initSPAServiceCategories = initSPAServiceCategories; console.log('SPA Service Categories system initialized');

SHOWCASE

Our Projects

Prevent Water Damage with Regular Inspections

Efficient Evaporative Cooler Maintenance Ready

Air Conditioning Inspection Excellence in Highlands Ranch