// Use MutationObserver to detect when the slider appears in the DOM const observer = new MutationObserver((mutations) => { const container = document.querySelector('.grab-services-container'); const slider = document.querySelector('.grab-services-grid'); if (container && slider && !container.querySelector('.grab-slider-progress')) { initSlider(container, slider); } }); observer.observe(document.body, { childList: true, subtree: true }); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('.grab-services-container'); const slider = document.querySelector('.grab-services-grid'); if (container && slider && !container.querySelector('.grab-slider-progress')) { initSlider(container, slider); } }); } else { const container = document.querySelector('.grab-services-container'); const slider = document.querySelector('.grab-services-grid'); if (container && slider && !container.querySelector('.grab-slider-progress')) { initSlider(container, slider); } } function initSlider(container, slider) { // Dark background on section const section = document.querySelector('.grab-services-section'); if (section) { section.style.cssText = 'background: #151515; position: relative;'; } // Hide the "Services" label on all cards const serviceLabels = document.querySelectorAll('.grab-service-label'); serviceLabels.forEach(label => { label.style.display = 'none'; }); // Progress bar const progressContainer = document.createElement('div'); progressContainer.className = 'grab-slider-progress'; progressContainer.style.cssText = 'position: absolute; bottom: 0; left: 3rem; right: 3rem; height: 4px; z-index: 10;'; const progressTrack = document.createElement('div'); progressTrack.className = 'grab-slider-progress-track'; progressTrack.style.cssText = 'width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden;'; const progressBar = document.createElement('div'); progressBar.className = 'grab-slider-progress-bar'; progressBar.style.cssText = 'height: 100%; background: rgba(var(--primary-color), 0.9); border-radius: 2px; transition: width 0.1s ease-out; box-shadow: 0 0 12px rgba(var(--primary-color), 0.5); width: 0%;'; progressTrack.appendChild(progressBar); progressContainer.appendChild(progressTrack); container.appendChild(progressContainer); // Edge fade overlays — dark version const leftFade = document.createElement('div'); leftFade.className = 'grab-slider-fade-left'; leftFade.style.cssText = 'position: absolute; top: 0; bottom: 0; height: 100%; width: 80px; pointer-events: none; z-index: 5; transition: opacity 0.3s ease; left: 0; background: linear-gradient(to right, #151515, transparent); opacity: 0;'; const rightFade = document.createElement('div'); rightFade.className = 'grab-slider-fade-right'; rightFade.style.cssText = 'position: absolute; top: 0; bottom: 0; height: 100%; width: 80px; pointer-events: none; z-index: 5; transition: opacity 0.3s ease; right: 0; background: linear-gradient(to left, #151515, transparent);'; container.style.position = 'relative'; container.appendChild(leftFade); container.appendChild(rightFade); // Button wrapper const buttonWrapper = document.createElement('div'); buttonWrapper.className = 'grab-slider-button-wrapper'; buttonWrapper.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; pointer-events: none; z-index: 20;'; // Nav buttons — dark glass const prevButton = document.createElement('button'); prevButton.className = 'grab-slider-nav-prev'; prevButton.setAttribute('aria-label', 'Previous services'); prevButton.style.cssText = 'position: absolute; left: 1rem; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgb(var(--primary-color)); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; pointer-events: auto;'; prevButton.innerHTML = ` `; const nextButton = document.createElement('button'); nextButton.className = 'grab-slider-nav-next'; nextButton.setAttribute('aria-label', 'Next services'); nextButton.style.cssText = 'position: absolute; right: 1rem; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgb(var(--primary-color)); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; pointer-events: auto;'; nextButton.innerHTML = ` `; buttonWrapper.appendChild(prevButton); buttonWrapper.appendChild(nextButton); container.appendChild(buttonWrapper); // Slider layout styles slider.style.cssText = 'display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 1rem; padding-bottom: 2.5rem; margin-bottom: 0.5rem; scrollbar-width: none;'; const positionButtons = () => { const firstCard = slider.querySelector('.grab-services-grid > div .grab-service-card'); if (firstCard) { const cardHeight = firstCard.offsetHeight; const sliderRect = slider.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); const offsetTop = sliderRect.top - containerRect.top; const buttonTop = offsetTop + (cardHeight / 2) - 24; buttonWrapper.style.top = `${buttonTop}px`; } }; if (!document.getElementById('grab-slider-styles')) { const styleSheet = document.createElement('style'); styleSheet.id = 'grab-slider-styles'; styleSheet.textContent = ` .grab-services-grid::-webkit-scrollbar { display: none; } .grab-service-button { display: none; } .grab-service-label { display: none !important; } .grab-slider-nav-prev:hover, .grab-slider-nav-next:hover { background: rgba(var(--primary-color), 0.85) !important; color: white !important; transform: scale(1.1) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important; border-color: rgba(var(--primary-color), 0.4) !important; } .grab-slider-nav-prev:active, .grab-slider-nav-next:active { transform: scale(0.95) !important; } @media (max-width: 767px) { .grab-slider-nav-prev, .grab-slider-nav-next { display: none !important; } } `; document.head.appendChild(styleSheet); } const cards = slider.querySelectorAll('.grab-services-grid > div'); cards.forEach(card => { card.style.cssText = 'flex: 0 0 auto; width: 85%; max-width: 400px; scroll-snap-align: center;'; }); setTimeout(positionButtons, 100); const scrollAmount = () => { const card = slider.querySelector('.grab-services-grid > div'); return card ? card.offsetWidth + 16 : 400; }; const handlePrevClick = () => slider.scrollBy({ left: -scrollAmount(), behavior: 'smooth' }); const handleNextClick = () => slider.scrollBy({ left: scrollAmount(), behavior: 'smooth' }); prevButton.addEventListener('click', handlePrevClick); nextButton.addEventListener('click', handleNextClick); const updateProgress = () => { const scrollLeft = slider.scrollLeft; const scrollWidth = slider.scrollWidth - slider.clientWidth; const scrollPercentage = scrollWidth > 0 ? (scrollLeft / scrollWidth) * 100 : 0; progressBar.style.width = `${scrollPercentage}%`; leftFade.style.opacity = scrollLeft > 10 ? '1' : '0'; rightFade.style.opacity = scrollLeft < scrollWidth - 10 ? '1' : '0'; const isAtStart = scrollLeft <= 10; const isAtEnd = scrollLeft >= scrollWidth - 10; prevButton.style.opacity = isAtStart ? '0.3' : '1'; prevButton.style.pointerEvents = isAtStart ? 'none' : 'auto'; nextButton.style.opacity = isAtEnd ? '0.3' : '1'; nextButton.style.pointerEvents = isAtEnd ? 'none' : 'auto'; }; slider.addEventListener('scroll', updateProgress); updateProgress(); const handleResize = () => { updateProgress(); positionButtons(); }; window.addEventListener('resize', handleResize); container._sliderCleanup = () => { slider.removeEventListener('scroll', updateProgress); window.removeEventListener('resize', handleResize); prevButton.removeEventListener('click', handlePrevClick); nextButton.removeEventListener('click', handleNextClick); progressContainer.remove(); leftFade.remove(); rightFade.remove(); buttonWrapper.remove(); }; } (function () { 'use strict'; const HEADING_SELECTORS = ['h1', 'h2:not(.grab-offer-modal-panel h2)']; const CARD_SELECTORS = [ '.grab-process-step', '.grab-features-step', '.grab-service-card', '.grab-hero-image-container', '.grab-about-image-wrapper', '.grab-offer-card' ]; const HEADING_THRESHOLD = 0.55; const CARD_THRESHOLD = 0.2; const STYLE_ID = 'gds-animation-styles'; const SCRIPT_MARKER = 'gds-animation-active'; if (window[SCRIPT_MARKER]) return; window[SCRIPT_MARKER] = true; function injectStyles() { if (document.getElementById(STYLE_ID)) return; const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = ` h1, h2 { position: relative; } .text-line { display: block; opacity: 0; transform: translateY(100%); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } h1.gds-highlight .text-line:first-child, h2.gds-highlight .text-line:first-child { opacity: 1; transform: translateY(0); transition-delay: 0s; } h1.gds-highlight .text-line:nth-child(2), h2.gds-highlight .text-line:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; } h1.gds-highlight .text-line:nth-child(3), h2.gds-highlight .text-line:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.8s; } h1.gds-highlight .text-line:nth-child(4), h2.gds-highlight .text-line:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 1.2s; } .grab-process-step, .grab-features-step, .grab-service-card, .grab-hero-image-container, .grab-about-image-wrapper, .grab-offer-card { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .grab-process-step.gds-card-visible, .grab-features-step.gds-card-visible, .grab-service-card.gds-card-visible, .grab-hero-image-container.gds-card-visible, .grab-about-image-wrapper.gds-card-visible, .grab-offer-card.gds-card-visible { opacity: 1; transform: translateY(0); } .grab-process-step:nth-child(1).gds-card-visible, .grab-features-step:nth-child(1).gds-card-visible, .grab-service-card:nth-child(1).gds-card-visible, .grab-hero-image-container:nth-child(1).gds-card-visible, .grab-about-image-wrapper:nth-child(1).gds-card-visible, .grab-offer-card:nth-child(1).gds-card-visible { transition-delay: 0s; } .grab-process-step:nth-child(2).gds-card-visible, .grab-features-step:nth-child(2).gds-card-visible, .grab-service-card:nth-child(2).gds-card-visible, .grab-hero-image-container:nth-child(2).gds-card-visible, .grab-about-image-wrapper:nth-child(2).gds-card-visible, .grab-offer-card:nth-child(2).gds-card-visible { transition-delay: 0.15s; } .grab-process-step:nth-child(3).gds-card-visible, .grab-features-step:nth-child(3).gds-card-visible, .grab-service-card:nth-child(3).gds-card-visible, .grab-hero-image-container:nth-child(3).gds-card-visible, .grab-about-image-wrapper:nth-child(3).gds-card-visible, .grab-offer-card:nth-child(3).gds-card-visible { transition-delay: 0.3s; } .grab-process-step:nth-child(4).gds-card-visible, .grab-features-step:nth-child(4).gds-card-visible, .grab-service-card:nth-child(4).gds-card-visible, .grab-hero-image-container:nth-child(4).gds-card-visible, .grab-about-image-wrapper:nth-child(4).gds-card-visible, .grab-offer-card:nth-child(4).gds-card-visible { transition-delay: 0.45s; } .grab-process-step:nth-child(5).gds-card-visible, .grab-features-step:nth-child(5).gds-card-visible, .grab-service-card:nth-child(5).gds-card-visible, .grab-hero-image-container:nth-child(5).gds-card-visible, .grab-about-image-wrapper:nth-child(5).gds-card-visible, .grab-offer-card:nth-child(5).gds-card-visible { transition-delay: 0.6s; } .grab-process-step:nth-child(6).gds-card-visible, .grab-features-step:nth-child(6).gds-card-visible, .grab-service-card:nth-child(6).gds-card-visible, .grab-hero-image-container:nth-child(6).gds-card-visible, .grab-about-image-wrapper:nth-child(6).gds-card-visible, .grab-offer-card:nth-child(6).gds-card-visible { transition-delay: 0.75s; } `; document.head.appendChild(style); } function saveOriginalContent(el) { if (!el.dataset.originalContent) { el.dataset.originalContent = el.innerHTML; } } function restoreOriginalContent(el) { if (el.dataset.originalContent) { el.innerHTML = el.dataset.originalContent; } } function wrapTextLines(element) { if (element.querySelector('.text-line')) return; saveOriginalContent(element); const hasChildElements = element.querySelector('span, strong, em, a'); if (hasChildElements) { const children = Array.from(element.childNodes).filter( node => node.textContent.trim() !== '' ); element.innerHTML = children .map(node => { const div = document.createElement('div'); div.className = 'text-line'; div.appendChild(node.cloneNode(true)); return div.outerHTML; }) .join(''); return; } const originalText = element.innerHTML; const words = originalText.split(' '); const computedStyle = window.getComputedStyle(element); const elementWidth = element.offsetWidth; const fontSize = parseFloat(computedStyle.fontSize); const fontFamily = computedStyle.fontFamily; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.font = `${computedStyle.fontWeight} ${fontSize}px ${fontFamily}`; let lines = []; let currentLine = ''; words.forEach((word, index) => { const testLine = currentLine + (currentLine ? ' ' : '') + word; const lineWidth = ctx.measureText(testLine).width; let padding = 10; if (window.innerWidth <= 768) padding = 20; else if (window.innerWidth <= 1024) padding = 30; if (lineWidth > elementWidth - padding && currentLine !== '') { lines.push(currentLine); currentLine = word; } else { currentLine = testLine; } if (index === words.length - 1) lines.push(currentLine); }); element.innerHTML = lines .map(line => `

${line}

`) .join(''); } const observers = new WeakMap(); function observeHeading(el) { if (observers.has(el)) return; wrapTextLines(el); const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { el.classList.add('gds-highlight'); } else { el.classList.remove('gds-highlight'); } }); }, { root: null, threshold: HEADING_THRESHOLD }); io.observe(el); observers.set(el, io); } function observeCard(el) { if (observers.has(el)) return; const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { el.classList.add('gds-card-visible'); } else { el.classList.remove('gds-card-visible'); } }); }, { root: null, threshold: CARD_THRESHOLD }); io.observe(el); observers.set(el, io); } function init() { HEADING_SELECTORS.forEach(sel => { document.querySelectorAll(sel).forEach(el => observeHeading(el)); }); CARD_SELECTORS.forEach(sel => { document.querySelectorAll(sel).forEach(el => observeCard(el)); }); } function setupMutationObserver() { const mo = new MutationObserver(() => init()); mo.observe(document.documentElement, { childList: true, subtree: true }); } let resizeTimeout; function handleResize() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { document.querySelectorAll('h1, h2').forEach(el => { restoreOriginalContent(el); el.classList.remove('gds-highlight'); wrapTextLines(el); const rect = el.getBoundingClientRect(); if (rect.top < window.innerHeight * 0.45) el.classList.add('gds-highlight'); }); }, 250); } function setupSPAListeners() { 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)); window.addEventListener('hashchange', () => setTimeout(init, 100)); } function bootstrap() { injectStyles(); init(); setupMutationObserver(); setupSPAListeners(); window.addEventListener('resize', handleResize); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', bootstrap); } else { bootstrap(); } })(); /* ============================================================ GALLERY CAROUSEL OVERRIDE — JS Global JS file ============================================================ */ window.__galleryCarouselOverride = (function () { const PROCESSED_IMG = 'data-gpco-label-init'; const PROCESSED_SEC = 'data-gpco-header-init'; // Map image filename fragment → service label const LABELS = { '6a284ff45c7cd75eb819838a': 'Stone Patio & Steps', '6a284ff45c7cd75eb8198441': 'Home Exterior Hardscape', '6a284ff45c7cd75eb8198652': 'Retaining Wall with LED Lighting', '6a284ff45c7cd75eb8198655': 'Fire Pit Patio', '6a284ff45c7cd75eb81985f4': 'Outdoor Kitchen', '6a284ff45c7cd75eb8198407': 'Front Entrance Steps', '6a284ff65c7cd75eb8198db4': 'Paver Patio Installation', '6a284ff65c7cd75eb8198f40': 'Pool & Stone Patio', '6a284ff75c7cd75eb8198fcd': 'Fire Pit Seating Area', '6a284ff75c7cd75eb8199263': 'Natural Stone Steps', '6a284ff75c7cd75eb8199236': 'Stone Pathway', '6a284ff75c7cd75eb819908a': 'Decorative Stone Walkway', '6a284ff75c7cd75eb819938e': 'Garden Planting', '6a284ff75c7cd75eb8198f69': 'Fence Installation', '6a284ff75c7cd75eb8199199': 'Landscape Planting', '6a284ff45c7cd75eb8198609': 'Retaining Wall Lighting', }; function getLabelForImg(img) { const src = img.getAttribute('src') || img.getAttribute('srcset') || ''; for (const [key, label] of Object.entries(LABELS)) { if (src.includes(key)) return label; } return null; } function injectHeader(section) { if (section.hasAttribute(PROCESSED_SEC)) return; section.setAttribute(PROCESSED_SEC, 'true'); const container = section.querySelector('.grab-photo-carousel-variant-2-container'); if (!container) return; const innerWrapper = container.querySelector('.mx-auto.w-full'); if (!innerWrapper) return; const header = document.createElement('div'); header.className = 'gpco-header font-pairing-secondary'; header.innerHTML = `

Our Work

Transforming Outdoor Spaces
Across the Area

Patios · Retaining Walls · Outdoor Kitchens · Landscape Design

`; innerWrapper.insertBefore(header, innerWrapper.firstChild); } function injectLabels(section) { const wrappers = section.querySelectorAll('.relative.w-full.cursor-pointer'); wrappers.forEach(wrapper => { if (wrapper.hasAttribute(PROCESSED_IMG)) return; const img = wrapper.querySelector('img'); if (!img) return; const label = getLabelForImg(img); if (!label) return; wrapper.setAttribute(PROCESSED_IMG, 'true'); const el = document.createElement('div'); el.className = 'gpco-label font-pairing-primary'; el.innerHTML = `${label}`; wrapper.appendChild(el); }); } function scan() { const section = document.querySelector('.grab-gallery .grab-photo-carousel-variant-2'); if (!section) return; injectHeader(section); injectLabels(section); } let observer = null; function init() { scan(); if (observer) return; observer = new MutationObserver(scan); observer.observe(document.body, { childList: true, subtree: true }); } function destroy() { if (observer) { observer.disconnect(); observer = null; } document.querySelectorAll('[data-gpco-label-init]').forEach(el => { const label = el.querySelector('.gpco-label'); if (label) label.remove(); el.removeAttribute('data-gpco-label-init'); }); document.querySelectorAll('[data-gpco-header-init]').forEach(el => { const header = el.querySelector('.gpco-header'); if (header) header.remove(); el.removeAttribute('data-gpco-header-init'); }); } return { init, destroy }; })(); window.__galleryCarouselOverride.init(); window.__stonewellTopBar = (function () { const ATTR = 'data-topbar-init'; const CSS = ` .swell-topbar { display: none; width: 100%; background: #151515; border-bottom: 1px solid rgba(255,255,255,0.07); } @media (min-width: 768px) { .swell-topbar { display: block; } } .swell-topbar-inner { max-width: 80rem; margin: 0 auto; padding: 0.55rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width: 1280px) { .swell-topbar-inner { padding-left: 0; padding-right: 0; } } .swell-topbar-left { display: flex; align-items: center; gap: 1.5rem; flex-wrap: nowrap; } .swell-topbar-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: rgba(255,255,255,0.7); text-decoration: none; white-space: nowrap; } .swell-topbar-item svg { flex-shrink: 0; opacity: 0.7; } .swell-topbar-stars { transition: opacity 0.15s; } .swell-topbar-stars:hover { opacity: 0.85; } .swell-stars { color: #f97316; font-size: 0.85rem; letter-spacing: -0.02em; } .swell-topbar-starlabel { color: rgba(255,255,255,0.75); font-size: 0.78rem; } .swell-topbar-right { display: flex; align-items: center; gap: 0.75rem; } .swell-topbar-social { color: rgba(255,255,255,0.65); display: flex; align-items: center; transition: color 0.15s; } .swell-topbar-social:hover { color: #fff; } `; const BAR_HTML = ` `; let styleEl = null; let observer = null; function injectStyles() { if (styleEl || document.getElementById('swell-topbar-styles')) return; styleEl = document.createElement('style'); styleEl.id = 'swell-topbar-styles'; styleEl.textContent = CSS; document.head.appendChild(styleEl); } function inject() { const navWrapper = document.querySelector('.css-1zyeyo'); if (!navWrapper || navWrapper.hasAttribute(ATTR)) return; navWrapper.setAttribute(ATTR, 'true'); navWrapper.insertAdjacentHTML('beforebegin', BAR_HTML); } function init() { injectStyles(); inject(); if (observer) return; observer = new MutationObserver(inject); observer.observe(document.body, { childList: true, subtree: true }); } function destroy() { if (observer) { observer.disconnect(); observer = null; } document.querySelectorAll('.swell-topbar').forEach(el => el.remove()); document.querySelectorAll('[' + ATTR + ']').forEach(el => el.removeAttribute(ATTR)); if (styleEl) { styleEl.remove(); styleEl = null; } } return { init, destroy }; })(); window.__stonewellTopBar.init(); window.__stonewellTopBar = (function () { const ATTR = 'data-topbar-init'; const CSS = ` .swell-topbar { display: none; width: 100%; background: #151515; border-bottom: 1px solid rgba(255,255,255,0.07); } @media (min-width: 768px) { .swell-topbar { display: block; } } .swell-topbar-inner { max-width: 80rem; margin: 0 auto; padding: 0.55rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media (min-width: 1280px) { .swell-topbar-inner { padding-left: 0; padding-right: 0; } } .swell-topbar-left { display: flex; align-items: center; gap: 1.5rem; flex-wrap: nowrap; } .swell-topbar-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: rgba(255,255,255,0.7); text-decoration: none; white-space: nowrap; } .swell-topbar-item svg { flex-shrink: 0; opacity: 0.7; } .swell-topbar-stars { transition: opacity 0.15s; } .swell-topbar-stars:hover { opacity: 0.85; } .swell-stars { color: #f97316; font-size: 0.85rem; letter-spacing: -0.02em; } .swell-topbar-starlabel { color: rgba(255,255,255,0.75); font-size: 0.78rem; } .swell-topbar-right { display: flex; align-items: center; gap: 0.75rem; } .swell-topbar-social { color: rgba(255,255,255,0.65); display: flex; align-items: center; transition: color 0.15s; } .swell-topbar-social:hover { color: #fff; } `; const BAR_HTML = ` `; let styleEl = null; let observer = null; function injectStyles() { if (styleEl || document.getElementById('swell-topbar-styles')) return; styleEl = document.createElement('style'); styleEl.id = 'swell-topbar-styles'; styleEl.textContent = CSS; document.head.appendChild(styleEl); } function inject() { const navWrapper = document.querySelector('.css-1zyeyo'); if (!navWrapper || navWrapper.hasAttribute(ATTR)) return; navWrapper.setAttribute(ATTR, 'true'); navWrapper.insertAdjacentHTML('beforebegin', BAR_HTML); } function init() { injectStyles(); inject(); if (observer) return; observer = new MutationObserver(inject); observer.observe(document.body, { childList: true, subtree: true }); } function destroy() { if (observer) { observer.disconnect(); observer = null; } document.querySelectorAll('.swell-topbar').forEach(el => el.remove()); document.querySelectorAll('[' + ATTR + ']').forEach(el => el.removeAttribute(ATTR)); if (styleEl) { styleEl.remove(); styleEl = null; } } return { init, destroy }; })(); window.__stonewellTopBar.init();

Transforming Outdoor SpacesAcross the Area

Transforming Outdoor Spaces
Across the Area

SHOWCASE

Our Projects

Large-Scale Paver Patio with Retaining Walls in Thompson's Station

Full Landscape Install Brings Privacy and Polish to Spring Hill Home

French Garden Build Taking Shape in Franklin TN

Full Landscape Install Across Multiple Columbia TN Homes

River Rock Border and Sod Install in Antioch

Small Townhome Backyard Gets a Sleek Patio Upgrade