removed webflow dependencies

Author: eckelj

footer-template.html

@@ -232,9 +232,8 @@
                                                 </div>
                                               </div>
                                               <script crossorigin="anonymous" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=63eb258eae57fdd13c41eaff" type="text/javascript"></script>
-                                              <script src="https://cdn.prod.website-files.com/63eb258eae57fdd13c41eaff/js/webflow.schunk.a6a60ac13672b1dc.js" type="text/javascript"></script>
-                                              <script src="https://cdn.prod.website-files.com/63eb258eae57fdd13c41eaff/js/webflow.schunk.1bc4bbd4a129fb4e.js" type="text/javascript"></script>
-                                              <script src="https://cdn.prod.website-files.com/63eb258eae57fdd13c41eaff/js/webflow.5279aa03.369237e3b9f7c4c5.js" type="text/javascript"></script>
+                                              <!-- Webflow JS replaced with lightweight custom script -->
+                                              <script src="scripts/webflow-replacement.js" type="text/javascript"></script>
                                               <!-- Google Tag Manager (noscript) -->
                                                 <noscript>
                                                   <iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-T2VR79F" style="display:none;visibility:hidden" width="0"></iframe>

scripts/load-footer.js

@@ -184,6 +184,41 @@
 
     // Trigger a custom event when footer is loaded
     document.dispatchEvent(new CustomEvent('footerLoaded'));
+    
+    // Load Webflow replacement script
+    loadWebflowReplacement();
+  }
+  
+  // Load the Webflow replacement script dynamically
+  function loadWebflowReplacement() {
+    // Check if script already loaded
+    if (document.querySelector('script[src*="webflow-replacement"]')) {
+      return;
+    }
+    
+    // Calculate path to scripts directory
+    const scripts = document.getElementsByTagName('script');
+    let scriptPath = 'scripts/';
+    
+    for (let script of scripts) {
+      const src = script.getAttribute('src');
+      if (src && src.includes('load-footer.js')) {
+        scriptPath = src.replace('load-footer.js', '');
+        break;
+      }
+    }
+    
+    // Load the replacement script
+    const script = document.createElement('script');
+    script.src = scriptPath + 'webflow-replacement.js';
+    script.type = 'text/javascript';
+    script.onload = function() {
+      console.log('[Footer] Webflow replacement script loaded');
+    };
+    script.onerror = function() {
+      console.error('[Footer] Failed to load webflow-replacement.js');
+    };
+    document.body.appendChild(script);
   }
 
   // Load footer when DOM is ready

scripts/webflow-replacement.js

@@ -0,0 +1,120 @@
+/**
+ * Lightweight Webflow Replacement Script
+ * Replaces Webflow animations and interactions with vanilla JS
+ * Total size: ~2KB unminified
+ */
+
+(function() {
+  'use strict';
+
+  // ===== FADE-IN ANIMATIONS =====
+  // Replaces Webflow's data-w-id fade-in effects
+  
+  const fadeInElements = document.querySelectorAll('[data-w-id][style*="opacity:0"], [data-w-id][style*="opacity: 0"]');
+  
+  if (fadeInElements.length > 0 && 'IntersectionObserver' in window) {
+    const fadeInObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const element = entry.target;
+          
+          // Add fade-in animation
+          element.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
+          element.style.opacity = '1';
+          element.style.transform = 'translateY(0)';
+          
+          // Unobserve after animation
+          fadeInObserver.unobserve(element);
+        }
+      });
+    }, {
+      threshold: 0.1,
+      rootMargin: '0px 0px -50px 0px'
+    });
+
+    fadeInElements.forEach(element => {
+      // Set initial state
+      element.style.opacity = '0';
+      element.style.transform = 'translateY(20px)';
+      fadeInObserver.observe(element);
+    });
+  } else if (fadeInElements.length > 0) {
+    // Fallback for browsers without IntersectionObserver
+    fadeInElements.forEach(element => {
+      element.style.opacity = '1';
+    });
+  }
+
+  // ===== MODAL/POPUP CLOSE HANDLERS =====
+  // Replaces Webflow's close button functionality
+  
+  document.addEventListener('click', (e) => {
+    const closeButton = e.target.closest('.close-pop-up, [data-w-id*="close"]');
+    if (closeButton) {
+      e.preventDefault();
+      
+      // Find the closest modal/popup container
+      const modal = closeButton.closest('.modal, .popup, [class*="pop-up"]');
+      if (modal) {
+        modal.style.transition = 'opacity 0.3s ease-out';
+        modal.style.opacity = '0';
+        
+        setTimeout(() => {
+          modal.style.display = 'none';
+        }, 300);
+      }
+    }
+  });
+
+  // ===== SCROLL-TRIGGERED ANIMATIONS =====
+  // Additional animations for elements that should animate on scroll
+  
+  const scrollElements = document.querySelectorAll('.section[data-w-id]');
+  
+  if (scrollElements.length > 0 && 'IntersectionObserver' in window) {
+    const scrollObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible');
+          scrollObserver.unobserve(entry.target);
+        }
+      });
+    }, {
+      threshold: 0.1,
+      rootMargin: '0px 0px -100px 0px'
+    });
+
+    scrollElements.forEach(element => {
+      scrollObserver.observe(element);
+    });
+  }
+
+  // ===== UTILITY: Remove unused Webflow attributes =====
+  // Clean up data-wf-* attributes that were used by Webflow CMS
+  
+  function cleanupWebflowAttributes() {
+    const webflowAttrs = ['data-wf-page', 'data-wf-site', 'data-wf-domain', 'data-wf-collection', 'data-wf-item-slug'];
+    
+    webflowAttrs.forEach(attr => {
+      const elements = document.querySelectorAll(`[${attr}]`);
+      elements.forEach(el => {
+        // Keep for reference but these don't affect functionality
+        // Uncomment to remove: el.removeAttribute(attr);
+      });
+    });
+  }
+
+  // Run cleanup on load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', cleanupWebflowAttributes);
+  } else {
+    cleanupWebflowAttributes();
+  }
+
+  // ===== DEBUG INFO =====
+  console.log('[Webflow Replacement] Initialized');
+  console.log(`  - Fade-in elements: ${fadeInElements.length}`);
+  console.log(`  - Scroll elements: ${scrollElements.length}`);
+  console.log('  - Modal close handlers: active');
+
+})();

styles/custom-nav.css

@@ -43,3 +43,12 @@
 
 /* Hide stray navigation elements */
 .nav-icon-line { display: block !important; }
+
+/* Webflow replacement animations */
+.section[data-w-id].is-visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+}
+[data-w-id] {
+  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+}