(function () { // ============================================ // CONFIGURATION - Customize these values // ============================================ const CONFIG = { // Image selector (can be any valid CSS selector) imageSelector: 'nav img', // Minimum screen width to apply changes (in pixels) minScreenWidth: 1024, // Styles to apply on large screens largeScreenStyles: { maxHeight: 'none', height: '60px', width: 'auto' }, // Whether to clear srcset attribute clearSrcset: true }; // ============================================ // LOGIC - No need to modify below this line // ============================================ function extractOriginalImageUrl(img) { // Try srcset first (for Next.js optimized images) if (img.srcset && img.srcset.includes('url=')) { const match = img.srcset.match(/url=([^&]+(?:&(?!w=|q=)[^&]+)*)/); if (match) { return decodeURIComponent(match[1]); } } // Try src (for Next.js optimized images) if (img.src && img.src.includes('url=')) { const match = img.src.match(/url=([^&]+(?:&(?!w=|q=)[^&]+)*)/); if (match) { return decodeURIComponent(match[1]); } } // If no url= parameter, just return the src as-is if (img.src) { return img.src; } return null; } function removeImageKitTransformations(url) { // Match the pattern: /tr:.../ and extract the filename after it const trMatch = url.match(/\/tr:[^\/]+\/(.+)$/); if (trMatch) { // Rebuild URL without the /tr:.../ part const baseUrl = url.split('/tr:')[0]; const filename = trMatch[1]; return `${baseUrl}/${filename}`; } return url; } function handleImage() { const img = document.querySelector(CONFIG.imageSelector); if (img) { if (window.innerWidth >= CONFIG.minScreenWidth) { // Extract original URL const originalUrl = extractOriginalImageUrl(img); if (originalUrl) { // Remove ImageKit transformations but keep filename const cleanUrl = removeImageKitTransformations(originalUrl); // Use original high-res image img.src = cleanUrl; if (CONFIG.clearSrcset) { img.srcset = ''; } } // Apply styles Object.keys(CONFIG.largeScreenStyles).forEach(prop => { img.style[prop] = CONFIG.largeScreenStyles[prop]; }); } else { // Reset to original on smaller screens Object.keys(CONFIG.largeScreenStyles).forEach(prop => { img.style[prop] = ''; }); } } } // Run on initial load handleImage(); // Watch for DOM changes (SPA navigation) const observer = new MutationObserver(() => { handleImage(); }); observer.observe(document.body, { childList: true, subtree: true }); // Handle window resize window.addEventListener('resize', handleImage); // Listen for history changes (SPA navigation) const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function () { originalPushState.apply(this, arguments); setTimeout(handleImage, 100); }; history.replaceState = function () { originalReplaceState.apply(this, arguments); setTimeout(handleImage, 100); }; window.addEventListener('popstate', () => { setTimeout(handleImage, 100); }); })(); /***************************************/ (function () { 'use strict'; // ======================================== // CONFIGURATION - ADD YOUR SELECTORS HERE // ======================================== const IMAGE_SELECTORS = [ '.grab-service-hero img', '.grab-hero-section img', '.grab-contact-section img', '.grab-about-section img.grab-about-image', '.grab-cta-wrapper[style*="background-image"]', // Add more selectors below as needed: // '.your-section img', // '.another-section .your-image-class', ]; const IMAGE_QUALITY_SETTINGS = { width: 2000, // Image width (1000, 2000, 3000, etc.) quality: 95, // Quality (80-100, higher = better quality) format: 'auto', // Image format (auto, webp, jpg, png) lazyOptimization: false // Enable/disable lazy optimization }; const FADE_DURATION = 500; // Transition duration in milliseconds (300-800) // ======================================== // SCRIPT LOGIC - NO NEED TO EDIT BELOW // ======================================== const CONFIG = { targetSelectors: IMAGE_SELECTORS, imageKitDomain: 'ik.imagekit.io', newTransformations: IMAGE_QUALITY_SETTINGS, fadeDuration: FADE_DURATION }; // Add CSS for smooth transitions function injectStyles() { if (document.getElementById('hero-quality-improver-styles')) return; const style = document.createElement('style'); style.id = 'hero-quality-improver-styles'; style.textContent = ` .hero-image-transitioning { transition: opacity ${CONFIG.fadeDuration}ms ease-in-out; } .hero-image-fade-out { opacity: 0.7 !important; } .hero-image-fade-in { opacity: 1 !important; } `; document.head.appendChild(style); } // Function to improve image quality by modifying ImageKit URLs function improveImageQuality() { CONFIG.targetSelectors.forEach(selector => { const elements = document.querySelectorAll(selector); elements.forEach(element => { if (element.dataset.qualityImproved === 'true') return; // Check if it's an img element or element with background-image if (element.tagName === 'IMG') { processImgElement(element); } else { processBackgroundImage(element); } element.dataset.qualityImproved = 'true'; }); }); } // Process elements function processImgElement(img) { let updated = false; const newSrcset = img.srcset ? updateImageKitURLs(img.srcset) : null; const newSrc = img.src ? updateSingleURL(img.src) : null; if ((newSrcset && newSrcset !== img.srcset) || (newSrc && newSrc !== img.src)) { updated = true; img.classList.add('hero-image-transitioning'); img.classList.add('hero-image-fade-out'); setTimeout(() => { if (newSrcset) img.srcset = newSrcset; if (newSrc) img.src = newSrc; setTimeout(() => { img.classList.remove('hero-image-fade-out'); img.classList.add('hero-image-fade-in'); setTimeout(() => { img.classList.remove('hero-image-transitioning', 'hero-image-fade-in'); }, CONFIG.fadeDuration); }, 50); }, CONFIG.fadeDuration / 2); } } // Process elements with inline background-image styles function processBackgroundImage(element) { const style = element.getAttribute('style'); if (!style || !style.includes('background-image')) return; // Extract background-image URL const match = style.match(/background-image:\s*url\(([^)]+)\)/); if (!match) return; const originalUrl = match[1].replace(/['"]/g, ''); const newUrl = updateSingleURL(originalUrl); if (newUrl !== originalUrl) { element.classList.add('hero-image-transitioning'); element.classList.add('hero-image-fade-out'); setTimeout(() => { const newStyle = style.replace( /background-image:\s*url\([^)]+\)/, `background-image:url(${newUrl})` ); element.setAttribute('style', newStyle); setTimeout(() => { element.classList.remove('hero-image-fade-out'); element.classList.add('hero-image-fade-in'); setTimeout(() => { element.classList.remove('hero-image-transitioning', 'hero-image-fade-in'); }, CONFIG.fadeDuration); }, 50); }, CONFIG.fadeDuration / 2); } } function updateImageKitURLs(srcsetString) { return srcsetString.split(',').map(srcEntry => { const parts = srcEntry.trim().split(' '); const url = parts[0]; const descriptor = parts[1] || ''; const newUrl = updateSingleURL(url); return descriptor ? `${newUrl} ${descriptor}` : newUrl; }).join(', '); } function updateSingleURL(url) { if (!url.includes(CONFIG.imageKitDomain)) return url; try { const urlObj = new URL(url, window.location.origin); if (urlObj.pathname.includes('/_next/image')) { const imageUrl = urlObj.searchParams.get('url'); if (imageUrl) { const decodedImageUrl = decodeURIComponent(imageUrl); const updatedImageUrl = updateImageKitTransformations(decodedImageUrl); urlObj.searchParams.set('url', updatedImageUrl); urlObj.searchParams.set('q', CONFIG.newTransformations.quality.toString()); } return urlObj.toString(); } else { return updateImageKitTransformations(url); } } catch (e) { console.warn('Error processing URL:', url, e); return url; } } function updateImageKitTransformations(url) { const trPattern = /\/tr:[^/]+\//; if (trPattern.test(url)) { const transformations = []; transformations.push(`w-${CONFIG.newTransformations.width}`); transformations.push(`f-${CONFIG.newTransformations.format}`); transformations.push(`q-${CONFIG.newTransformations.quality}`); const newTr = `/tr:${transformations.join(',')}/`; return url.replace(trPattern, newTr); } return url; } function init() { injectStyles(); improveImageQuality(); } // Extract section class names from selectors for MutationObserver function getSectionClassNames() { const classNames = new Set(); CONFIG.targetSelectors.forEach(selector => { const match = selector.match(/\.([\w-]+)/); if (match) classNames.add(match[1]); }); return Array.from(classNames); } const sectionClasses = getSectionClassNames(); const observer = new MutationObserver((mutations) => { let shouldProcess = false; mutations.forEach((mutation) => { if (mutation.addedNodes.length) { mutation.addedNodes.forEach((node) => { if (node.nodeType === 1) { if (node.classList && sectionClasses.some(cls => node.classList.contains(cls))) { shouldProcess = true; } else if (node.querySelector) { if (sectionClasses.some(cls => node.querySelector(`.${cls}`))) { shouldProcess = true; } } } }); } }); if (shouldProcess) { improveImageQuality(); } }); observer.observe(document.body, { childList: true, subtree: true }); const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function () { originalPushState.apply(this, arguments); setTimeout(improveImageQuality, 50); }; history.replaceState = function () { originalReplaceState.apply(this, arguments); setTimeout(improveImageQuality, 50); }; window.addEventListener('popstate', () => { setTimeout(improveImageQuality, 50); }); window.addEventListener('hashchange', () => { setTimeout(improveImageQuality, 50); }); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } setTimeout(improveImageQuality, 100); console.log('Image Quality Improver loaded - targeting:', CONFIG.targetSelectors.join(', ')); })(); /*******************************************************/ (function () { console.log('🎠 Services Carousel Script Loaded'); let cleanupFunction = null; // ─── CONFIG ──────────────────────────────────────────────────────────────── const SELECTORS = { section: '.grab-services-section', container: '.grab-services-container', grid: '.grab-services-grid', card: 'div[class*="col-span"]', cardInner: '.grab-service-card', name: '.grab-service-name', desc: '.grab-service-description', link: 'a.grab-service-link', hideOnPatch: ['.grab-service-content', '.grab-service-header'], }; const LABEL_OVERRIDES = { // 'Full Card Name': 'Shortened Label', }; // ─────────────────────────────────────────────────────────────────────────── function injectStyles() { if (document.querySelector('[data-carousel-styles]')) return; const style = document.createElement('style'); style.setAttribute('data-carousel-styles', ''); style.textContent = ` .grab-service-card { border-radius: 0 !important; box-shadow: none !important; } .grab-service-card .grab-service-overlay, .grab-service-card .grab-service-overlay-dark { display: none !important; } .carousel-service-label { display: block !important; position: absolute !important; z-index: 30 !important; pointer-events: none !important; } .carousel-below-content { display: block !important; padding: 1.25rem 0 0.5rem !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; opacity: 1 !important; visibility: visible !important; } .carousel-below-content[data-hidden="true"] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; } .carousel-explore-label { display: inline-block !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: rgb(var(--primary-color)) !important; border-bottom: 2px solid rgb(var(--primary-color)) !important; padding-bottom: 0.3rem !important; margin-bottom: 0.9rem !important; text-decoration: none !important; cursor: pointer !important; } .carousel-explore-label:hover { opacity: 0.75 !important; } .carousel-description { display: block !important; font-size: 1.05rem !important; line-height: 1.65 !important; color: #374151 !important; margin: 0 !important; max-width: 680px !important; } `; document.head.appendChild(style); } function removeStyles() { const el = document.querySelector('[data-carousel-styles]'); if (el) el.remove(); } function patchCard(card) { if (card.dataset.carouselPatched) return; card.dataset.carouselPatched = '1'; const cardInner = card.querySelector(SELECTORS.cardInner); if (!cardInner) return; const nameEl = card.querySelector(SELECTORS.name); const descEl = card.querySelector(SELECTORS.desc); const anchor = card.querySelector(SELECTORS.link); const name = nameEl ? nameEl.textContent.trim() : ''; const description = descEl ? descEl.textContent.trim() : ''; const href = anchor ? anchor.getAttribute('href') : '#'; if (!name) return; const labelText = LABEL_OVERRIDES[name] || name; // Hide original in-card elements SELECTORS.hideOnPatch.forEach(sel => { const el = card.querySelector(sel); if (el) { el.setAttribute('data-carousel-hidden-original', ''); el.style.setProperty('display', 'none', 'important'); } }); // Rotated label const label = document.createElement('span'); label.className = 'carousel-service-label font-pairing-primary'; label.setAttribute('data-carousel-label', ''); label.textContent = labelText; label.style.cssText = ` left: 3.5rem !important; top: 1.5rem !important; transform-origin: top left !important; transform: rotate(90deg) !important; color: #ffffff !important; font-size: 1.75rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; white-space: nowrap !important; line-height: 1 !important; text-shadow: 0 1px 6px rgba(0,0,0,0.4) !important; `; cardInner.appendChild(label); // Below-image block const belowContent = document.createElement('div'); belowContent.className = 'carousel-below-content font-pairing-secondary'; belowContent.setAttribute('data-carousel-below', ''); const exploreLink = document.createElement('a'); exploreLink.className = 'carousel-explore-label font-pairing-secondary'; exploreLink.textContent = `Explore ${name}`; exploreLink.href = href; belowContent.appendChild(exploreLink); if (description) { const descPara = document.createElement('p'); descPara.className = 'carousel-description font-pairing-secondary'; descPara.textContent = description; belowContent.appendChild(descPara); } card.appendChild(belowContent); } function createCarousel() { const section = document.querySelector(SELECTORS.section); if (!section) return null; if (section.querySelector('.side-nav-btn')) return null; const container = section.querySelector(SELECTORS.container); const grid = section.querySelector(SELECTORS.grid); if (!grid || !container) return null; injectStyles(); function makeBtn(svg) { const btn = document.createElement('button'); btn.className = 'side-nav-btn'; btn.innerHTML = svg; btn.style.cssText = `background:white;border:none;border-radius:var(--roundedness);width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;position:absolute;`; btn.querySelector('svg').style.cssText = 'width:24px;height:24px;color:#374151;'; return btn; } const prevBtn = makeBtn(``); prevBtn.classList.add('side-prev'); const nextBtn = makeBtn(``); nextBtn.classList.add('side-next'); container.style.position = 'relative'; container.style.overflow = 'hidden'; container.appendChild(prevBtn); container.appendChild(nextBtn); grid.style.cssText += 'display:flex;flex-wrap:nowrap;gap:16px;transition:transform 0.4s ease;'; const originalCards = Array.from(grid.querySelectorAll(SELECTORS.card)); const totalOriginalCards = originalCards.length; originalCards.forEach(card => patchCard(card)); // Clone 2 from each end for infinite loop effect originalCards.slice(0, 2).map(c => { const cl = c.cloneNode(true); cl.classList.add('cloned-card'); grid.appendChild(cl); }); originalCards.slice(-2).reverse().map(c => { const cl = c.cloneNode(true); cl.classList.add('cloned-card'); grid.insertBefore(cl, grid.firstChild); }); const allCards = Array.from(grid.querySelectorAll(SELECTORS.card)); function getCardWidth() { const w = window.innerWidth; if (w < 640) return 300; if (w < 1024) return 500; return 700; } function setCardWidths() { const cw = getCardWidth(); allCards.forEach(c => { c.style.flex = `0 0 ${cw}px`; c.style.maxWidth = `${cw}px`; c.style.minWidth = `${cw}px`; }); } function positionButtons() { const w = window.innerWidth; if (w < 425) { const top = w <= 320 ? '180px' : '150px'; prevBtn.style.cssText += `top:${top};left:50%;transform:translateX(-56px);z-index:20;`; nextBtn.style.cssText += `top:${top};left:50%;transform:translateX(0px);z-index:20;`; } else { prevBtn.style.cssText += 'top:45%;left:0;transform:translateY(50%);'; nextBtn.style.cssText += 'top:45%;right:0;transform:translateY(50%);'; } [prevBtn, nextBtn].forEach(btn => { btn.querySelector('svg').style.cssText = 'width:24px;height:24px;color:#374151;'; }); } function updateCardContent() { allCards.forEach((wrapper, index) => { const below = wrapper.querySelector('[data-carousel-below]'); if (!below) return; if (index === currentIndex) below.removeAttribute('data-hidden'); else below.setAttribute('data-hidden', 'true'); }); } let currentIndex = 2; let isTransitioning = false; function updateSlider(animate = true) { const cw = getCardWidth(); const gap = 16; const centerOffset = (container.offsetWidth / 2) - (cw / 2); const translateX = centerOffset - (currentIndex * (cw + gap)); grid.style.transition = animate ? 'transform 0.4s ease' : 'none'; grid.style.transform = `translateX(${translateX}px)`; updateCardContent(); } function handleNext() { if (isTransitioning) return; isTransitioning = true; currentIndex++; updateSlider(true); if (currentIndex >= totalOriginalCards + 2) { setTimeout(() => { currentIndex = 2; updateSlider(false); setTimeout(() => { isTransitioning = false; }, 50); }, 400); } else { setTimeout(() => { isTransitioning = false; }, 400); } } function handlePrev() { if (isTransitioning) return; isTransitioning = true; currentIndex--; updateSlider(true); if (currentIndex < 2) { setTimeout(() => { currentIndex = totalOriginalCards + 1; updateSlider(false); setTimeout(() => { isTransitioning = false; }, 50); }, 400); } else { setTimeout(() => { isTransitioning = false; }, 400); } } nextBtn.onclick = handleNext; prevBtn.onclick = handlePrev; let resizeTimeout; function handleResize() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { setCardWidths(); positionButtons(); updateSlider(false); }, 150); } window.addEventListener('resize', handleResize); setCardWidths(); positionButtons(); updateSlider(false); return function cleanup() { window.removeEventListener('resize', handleResize); prevBtn.remove(); nextBtn.remove(); document.querySelectorAll('.cloned-card').forEach(el => el.remove()); document.querySelectorAll('[data-carousel-label]').forEach(el => el.remove()); document.querySelectorAll('[data-carousel-below]').forEach(el => el.remove()); document.querySelectorAll('[data-carousel-hidden-original]').forEach(el => { el.removeAttribute('data-carousel-hidden-original'); el.style.display = ''; }); document.querySelectorAll('[data-carousel-patched]').forEach(el => { delete el.dataset.carouselPatched; }); removeStyles(); grid.style.cssText = ''; container.style.overflow = ''; container.style.position = ''; allCards.forEach(c => { c.style.flex = ''; c.style.maxWidth = ''; c.style.minWidth = ''; }); }; } function init() { if (cleanupFunction) { cleanupFunction(); cleanupFunction = null; } cleanupFunction = createCarousel(); } function monitorNavigation() { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } const origPush = history.pushState; const origReplace = history.replaceState; history.pushState = function (...a) { origPush.apply(this, a); setTimeout(init, 100); }; history.replaceState = function (...a) { origReplace.apply(this, a); setTimeout(init, 100); }; window.addEventListener('popstate', () => setTimeout(init, 100)); const observer = new MutationObserver(() => { if (document.querySelector(SELECTORS.section) && !document.querySelector('.side-nav-btn')) init(); }); observer.observe(document.body, { childList: true, subtree: true }); } monitorNavigation(); })();

INSIGHTS & UPDATES

Latest Articles

How to Know When It’s Time to Repair or Replace Your Roof