(function () { 'use strict'; let observer = null; let fontAwesomeLoaded = false; let initCount = 0; const INIT_ID_ATTR = 'data-services-override-init'; // Custom icon image for Specialized Truck & Equipment (ImageKit CDN) const TRUCK_ICON_URL = 'https://ik.imagekit.io/4wu305uo4/customized-sections/Stonewell%20Outdoor%20Design/icons8-truck-50.png'; // Match only the Specialized Truck & Equipment card function isSpecializedTruck(name, description, url) { const text = `${name} ${description} ${url}`.toLowerCase(); return /specialized truck|truck\s*&\s*equipment|truck and equipment|mechanic(?:'s)? truck/.test(text); } // Check if Font Awesome is already loaded function loadFontAwesome() { if (fontAwesomeLoaded) return; const existingLink = document.querySelector('link[href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"]'); if (!existingLink) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css'; document.head.appendChild(link); } fontAwesomeLoaded = true; } // Inject CSS styles (persistent across navigation) function injectStyles() { if (document.head.querySelector('style[data-services-override]')) { return; } const style = document.createElement('style'); style.setAttribute('data-services-override', 'true'); style.textContent = ` /* Clean service card styling with thin border and subtle shadow */ .grab-services-section .grab-service-card { background: transparent !important; border-radius: 0.5rem !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative !important; overflow: visible !important; padding: 2rem 1.75rem !important; min-height: 18rem !important; height: 100% !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } .grab-services-section .grab-service-card:hover { transform: translateY(-4px) !important; border-color: rgb(var(--derivative-color-400)) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; } /* Service icon - no background, just secondary color */ .grab-services-section .grab-service-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; margin: 0 auto 1.25rem !important; color: rgb(var(--secondary-color)) !important; font-size: 3rem !important; box-shadow: none !important; transition: transform 0.3s ease !important; } .grab-services-section .grab-service-card:hover .grab-service-icon { transform: scale(1.1) !important; } /* Custom masked PNG icon (Specialized Truck & Equipment) -> tinted to secondary color */ .grab-services-section .grab-service-icon .grab-service-icon-truck { display: block !important; width: 3.25rem !important; height: 3.25rem !important; background-color: currentColor !important; -webkit-mask: url("${TRUCK_ICON_URL}") center center / contain no-repeat; mask: url("${TRUCK_ICON_URL}") center center / contain no-repeat; } /* Text styling - centered */ .grab-services-section .grab-service-name { color: rgb(var(--derivative-color-900)) !important; font-weight: 700 !important; text-align: center !important; } .grab-services-section .grab-service-description { color: rgb(var(--derivative-color-700)) !important; line-height: 1.6 !important; text-align: center !important; } /* Center all content vertically and horizontally */ .grab-services-section .grab-service-content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; } /* Hide link wrapper */ .grab-services-section .grab-service-link-wrapper { display: none !important; } /* Grid gap adjustment */ .grab-services-section .grab-services-grid { gap: 1.5rem !important; } /* Ensure all grid items are same height */ .grab-services-section .grab-services-grid > div { display: flex !important; } `; document.head.appendChild(style); } // Smart icon mapping for heavy equipment and truck repair services function getIconForService(name, description, url) { const text = `${name} ${description} ${url}`.toLowerCase(); // Keyword-based icon mapping (order matters - more specific first) const iconMap = [ // Primary Equipment Services - Most Specific First { keywords: ['service body', 'lube truck'], icon: 'fa-truck-pickup' }, { keywords: ['emergency', 'after-hour', 'after hour'], icon: 'fa-clock' }, { keywords: ['hydraulic', 'specialized truck'], icon: 'fa-wrench' }, { keywords: ['engine-driven welder', 'welder repair'], icon: 'fa-fire-flame-curved' }, { keywords: ['truck-mounted crane', 'crane repair'], icon: 'fa-truck-ramp-box' }, { keywords: ['low voltage', 'electrical'], icon: 'fa-bolt' }, { keywords: ['pto installation', 'pto repair', 'power take'], icon: 'fa-gear' }, { keywords: ['preventative maintenance', 'preventive maintenance'], icon: 'fa-calendar-check' }, // Equipment Types { keywords: ['crane', 'hoist'], icon: 'fa-up-down-left-right' }, { keywords: ['compressor'], icon: 'fa-air-conditioner' }, { keywords: ['hydraulic'], icon: 'fa-droplet-degree' }, { keywords: ['welder', 'welding'], icon: 'fa-wand-sparkles' }, { keywords: ['generator'], icon: 'fa-plug-circle-bolt' }, { keywords: ['dump body', 'flatbed'], icon: 'fa-truck-flatbed' }, { keywords: ['liftgate', 'lift gate'], icon: 'fa-stairs' }, { keywords: ['winch'], icon: 'fa-anchor' }, { keywords: ['toolbox', 'storage'], icon: 'fa-toolbox' }, // Service Categories { keywords: ['electrical', 'wiring'], icon: 'fa-bolt' }, { keywords: ['diagnostic', 'diagnosis'], icon: 'fa-magnifying-glass-chart' }, { keywords: ['engine', 'motor'], icon: 'fa-engine' }, { keywords: ['transmission'], icon: 'fa-gears' }, { keywords: ['brake'], icon: 'fa-brake-warning' }, { keywords: ['suspension'], icon: 'fa-car-side' }, { keywords: ['exhaust'], icon: 'fa-cloud' }, { keywords: ['fuel system'], icon: 'fa-gas-pump' }, { keywords: ['cooling'], icon: 'fa-snowflake' }, { keywords: ['fluid'], icon: 'fa-oil-can' }, // General Service Types { keywords: ['install', 'installation'], icon: 'fa-screwdriver-wrench' }, { keywords: ['repair', 'fix'], icon: 'fa-wrench' }, { keywords: ['maintenance', 'service'], icon: 'fa-clipboard-check' }, { keywords: ['inspection'], icon: 'fa-magnifying-glass' }, { keywords: ['replace', 'replacement'], icon: 'fa-repeat' }, { keywords: ['upgrade'], icon: 'fa-arrow-up' }, { keywords: ['rebuild'], icon: 'fa-screwdriver' }, { keywords: ['fabrication', 'custom'], icon: 'fa-hammer' }, // Truck Types { keywords: ['semi', 'tractor'], icon: 'fa-truck-front' }, { keywords: ['dump truck'], icon: 'fa-truck-monster' }, { keywords: ['box truck'], icon: 'fa-truck-moving' }, { keywords: ['pickup'], icon: 'fa-truck-pickup' }, { keywords: ['van'], icon: 'fa-van-shuttle' }, { keywords: ['trailer'], icon: 'fa-trailer' }, // Default fallback { keywords: [''], icon: 'fa-truck' } ]; // Find the first matching icon for (const mapping of iconMap) { if (mapping.keywords.some(keyword => text.includes(keyword))) { return mapping.icon; } } return 'fa-truck'; // Ultimate fallback for truck/equipment services } // Add icons to service cards within a specific root function addIcons(rootElement) { const root = rootElement || document; const serviceCards = root.querySelectorAll('.grab-services-section .grab-service-card'); serviceCards.forEach(card => { // Skip if icon already added if (card.hasAttribute(INIT_ID_ATTR)) { return; } // Mark as processed card.setAttribute(INIT_ID_ATTR, initCount); // Get service information const nameElement = card.querySelector('.grab-service-name'); const descriptionElement = card.querySelector('.grab-service-description'); const linkElement = card.closest('a') || card.querySelector('a'); const name = nameElement ? nameElement.textContent.trim() : ''; const description = descriptionElement ? descriptionElement.textContent.trim() : ''; const url = linkElement ? linkElement.getAttribute('href') || '' : ''; // Create icon element const iconDiv = document.createElement('div'); iconDiv.className = 'grab-service-icon'; // Specialized Truck & Equipment -> custom masked PNG; everything else -> Font Awesome if (isSpecializedTruck(name, description, url)) { const truckIcon = document.createElement('span'); truckIcon.className = 'grab-service-icon-truck'; truckIcon.setAttribute('role', 'img'); truckIcon.setAttribute('aria-label', 'Specialized truck and equipment'); iconDiv.appendChild(truckIcon); } else { const iconClass = getIconForService(name, description, url); iconDiv.innerHTML = ``; } // Insert icon at the beginning of the content area const contentArea = card.querySelector('.grab-service-content') || card; contentArea.insertBefore(iconDiv, contentArea.firstChild); }); } // Observer to watch for dynamic changes function startObserver(rootElement) { const root = rootElement || document; // Disconnect existing observer if any stopObserver(); // Watch the entire document body for services section appearing/changing const targetNode = root === document ? document.body : root; if (!targetNode) { return; } observer = new MutationObserver((mutations) => { let shouldUpdate = false; mutations.forEach((mutation) => { // Check if any added nodes contain or are the services section if (mutation.addedNodes.length > 0) { mutation.addedNodes.forEach((node) => { if (node.nodeType === 1) { // Element node if (node.classList && node.classList.contains('grab-services-section')) { shouldUpdate = true; } else if (node.querySelector && node.querySelector('.grab-services-section')) { shouldUpdate = true; } } }); } // Also check for changes within services section if (mutation.target.closest && mutation.target.closest('.grab-services-section')) { shouldUpdate = true; } }); if (shouldUpdate) { // Small delay to ensure content is fully rendered setTimeout(() => addIcons(rootElement), 50); } }); observer.observe(targetNode, { childList: true, subtree: true }); } function stopObserver() { if (observer) { observer.disconnect(); observer = null; } } // Initialize the override (idempotent) function init(rootElement) { const root = rootElement || document; // Increment init counter for unique marking initCount++; // Load dependencies (these persist) loadFontAwesome(); injectStyles(); // Function to add icons with retry logic function applyIcons() { const servicesSection = root.querySelector('.grab-services-section'); if (servicesSection) { addIcons(root); startObserver(root); } else { // If section not found yet, start observer to catch it when it appears startObserver(root); } } // Wait for Font Awesome to load, then add icons if (document.fonts && document.fonts.ready) { document.fonts.ready.then(applyIcons); } else { // Fallback if Font Loading API not available setTimeout(applyIcons, 300); } } // Cleanup function function destroy() { // Stop observer stopObserver(); // Remove injected icons and attributes const icons = document.querySelectorAll('.grab-services-section .grab-service-icon'); icons.forEach(icon => icon.remove()); const cards = document.querySelectorAll(`.grab-services-section .grab-service-card[${INIT_ID_ATTR}]`); cards.forEach(card => card.removeAttribute(INIT_ID_ATTR)); // Note: We keep styles and Font Awesome loaded as they don't hurt and help with re-initialization } // Export functions for SPA usage if (typeof window !== 'undefined') { window.initServicesOverride = init; window.destroyServicesOverride = destroy; } // Auto-initialize and handle SPA navigation function autoInit() { init(); // Listen for common SPA navigation events // History API const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function () { originalPushState.apply(this, arguments); setTimeout(() => init(), 100); }; history.replaceState = function () { originalReplaceState.apply(this, arguments); setTimeout(() => init(), 100); }; window.addEventListener('popstate', () => { setTimeout(() => init(), 100); }); // Hash change window.addEventListener('hashchange', () => { setTimeout(() => init(), 100); }); } // Only auto-initialize if this is not being used as a module if (typeof module === 'undefined') { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', autoInit); } else { autoInit(); } } })(); /* // Frontline Fleet — Emergency/After-Hours Top Banner (function () { if (document.getElementById('ffl-emergency-banner')) return; const style = document.createElement('style'); style.textContent = ` #ffl-emergency-banner { position: relative; width: 100%; background-color: rgb(var(--primary-color)); z-index: 10001; } .ffl-eb-inner { display: flex; justify-content: center; align-items: center; gap: 1rem; max-width: 80rem; margin: 0 auto; padding: 8px 16px; } .ffl-eb-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--secondary-color)); flex-shrink: 0; animation: ffl-eb-blink 1.2s infinite; } @keyframes ffl-eb-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .ffl-eb-text { font-size: 0.9rem; font-weight: 600; color: rgb(var(--derivative-color-50)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .ffl-eb-link { color: rgb(var(--secondary-color)); font-weight: 700; text-decoration: none; white-space: nowrap; transition: color 0.2s; } .ffl-eb-link:hover { color: #ffb3b3; } .ffl-eb-divider { color: rgba(255,255,255,0.25); font-size: 0.8rem; } @media (max-width: 600px) { .ffl-eb-text { font-size: 0.8rem; } .ffl-eb-divider, .ffl-eb-link.ffl-eb-email { display: none; } } @media (prefers-reduced-motion: reduce) { .ffl-eb-dot { animation: none; } } `; document.head.appendChild(style); const banner = document.createElement('div'); banner.id = 'ffl-emergency-banner'; const inner = document.createElement('div'); inner.className = 'ffl-eb-inner'; inner.innerHTML = ` Emergency & After-Hours Fleet Service — (951) 433-5338 | info@frontlinefleetusa.com `; banner.appendChild(inner); if (document.body) { document.body.insertBefore(banner, document.body.firstChild); } else { document.addEventListener('DOMContentLoaded', function () { document.body.insertBefore(banner, document.body.firstChild); }); } })();*/

SHOWCASE

Our Projects

Crane Wiring Harness Replacement Keeps Heavy Equipment Running

Crane No-Operation Fault Traced to a Loose Fuse Terminal and Low Wire

IMT 3820 Crane Cylinder Pin and Wire Rope Replacement