https://www.criticalmetalscorp.com/wp-content/themes/critical-metals/js/inner-page-overlay.js?ver=1790110934

1/**
2 * Inner Page Overlay Effect for Critical Metals
3 * Handles black overlay on scroll for pages with wp-block-cover hero
4 */
5
6document.addEventListener('DOMContentLoaded', function () {
7    // Check if we're on an inner page (not homepage)
8    const isHomepage = document.querySelector('.hero-section') && 
9                      (document.querySelector('.content-3') || document.querySelector('.content-4'));
10    
11    if (isHomepage) {
12        return; // Exit if on homepage - handled by parallax-scroll.js
13    }
14    
15    // Get ONLY the first hero cover block on inner pages (at the top)
16    // Must be within the first few elements to be considered a hero
17    const allCovers = document.querySelectorAll('.wp-block-cover.alignfull');
18    let heroCover = null;
19    
20    // Find the first cover that appears near the top of the page
21    for (let cover of allCovers) {
22        const rect = cover.getBoundingClientRect();
23        const topPosition = rect.top + window.scrollY;
24        
25        // If this cover starts within the first 500px of the page, it's likely the hero
26        if (topPosition < 500) {
27            heroCover = cover;
28            break;
29        }
30    }
31    
32    if (!heroCover) {
33        return; // Exit if no hero cover block found
34    }
35    
36    // Add a class to identify this as an inner page hero
37    heroCover.classList.add('inner-page-hero');
38    
39    // Handle scroll for overlay effect
40    function handleScroll() {
41        const scrolled = window.pageYOffset;
42        const heroHeight = heroCover.offsetHeight;
43        
44        // Calculate overlay opacity based on scroll
45        // Multiply by 1.818 to reach full opacity when scrolled 55% of hero height
46        const overlayOpacity = Math.min(1, (scrolled / heroHeight) * 1.818);
47        
48        // Apply black overlay opacity directly to the pseudo-element via inline style
49        // Create or update a style element for the overlay
50        let styleEl = document.getElementById('inner-page-overlay-style');
51        if (!styleEl) {
52            styleEl = document.createElement('style');
53            styleEl.id = 'inner-page-overlay-style';
54            document.head.appendChild(styleEl);
55        }
56        
57        // Update the style content
58        styleEl.textContent = `.wp-block-cover.inner-page-hero::before { opacity: ${overlayOpacity} !important; }`;
59    }
60    
61    // Event listener
62    window.addEventListener('scroll', handleScroll);
63    
64    // Initial call
65    handleScroll();
66});