// Shared site chrome — Nav, Footer, ThemeToggle, Reveal observer, Tweaks panel host. const { useState, useEffect, useRef, useCallback, useMemo } = React; // ---------- Theme ---------- window.useTheme = function useTheme() { const [theme, setTheme] = useState(() => { try { return localStorage.getItem('tc-theme') || 'dark'; } catch { return 'dark'; } }); useEffect(() => { document.documentElement.setAttribute('data-theme', theme); try { localStorage.setItem('tc-theme', theme); } catch {} }, [theme]); const toggle = useCallback(() => setTheme(t => t === 'dark' ? 'light' : 'dark'), []); return { theme, setTheme, toggle }; }; // ---------- Reveal on scroll ---------- // Progressive-enhancement fade-in. Content is visible by default (opacity:1 in // .reveal) so nothing is ever hidden if JS or the observer misbehaves — the // observer just adds a tiny transform-ease as sections enter the viewport. // Re-scans periodically so sections that mount after first paint still animate. window.useReveal = function useReveal() { useEffect(() => { const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduced) { document.querySelectorAll('.reveal').forEach(e => e.classList.add('in')); return; } if (!('IntersectionObserver' in window)) { document.querySelectorAll('.reveal').forEach(e => e.classList.add('in')); return; } // Opt-in the CSS that allows the choreography; without this flag content // remains visible by default (i.e., everything still reads if JS dies). document.documentElement.setAttribute('data-reveal-ready', '1'); // threshold:0 + rootMargin bottom trigger = fires the moment any part of // the element crosses the viewport bottom. Works for short and tall sections. const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0, rootMargin: '0px 0px -8% 0px' }); const observeAll = () => { document.querySelectorAll('.reveal:not(.in)').forEach(e => { if (!e.dataset.ccObserved) { e.dataset.ccObserved = '1'; io.observe(e); } }); }; observeAll(); // Catch late-rendered sections const id1 = setTimeout(observeAll, 200); const id2 = setTimeout(observeAll, 800); // Safety net: if something ever goes >2s past load without revealing, force all in. const safety = setTimeout(() => { document.querySelectorAll('.reveal:not(.in)').forEach(e => { const r = e.getBoundingClientRect(); if (r.top < window.innerHeight) e.classList.add('in'); }); }, 2000); return () => { io.disconnect(); clearTimeout(id1); clearTimeout(id2); clearTimeout(safety); }; }, []); }; // ---------- Nav ---------- window.Nav = function Nav({ current = 'home' }) { const { theme, toggle } = window.useTheme(); const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const TCMark = window.TCMark; useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const links = [ { key: 'solutions', label: 'Solutions', href: 'solutions.html' }, { key: 'cycle', label: 'The Cycle', href: 'the-cycle.html' }, { key: 'partners', label: 'Partners', href: 'partners.html' }, { key: 'about', label: 'About', href: 'about.html' }, { key: 'results', label: 'Results', href: 'results.html' }, { key: 'security', label: 'Security', href: 'security.html' }, { key: 'contact', label: 'Contact', href: 'contact.html' }, ]; return ( <> Skip to main content {window.ScrollProgress ? : null} {window.CustomCursor ? : null} {window.SectionNav ? : null}
Technology Cycle
{mobileOpen && (
{links.map(l => ( {l.label} ))} Book Strategy Call
)}
); }; function ThemeIcon({ theme }) { if (theme === 'dark') { return ( ); } return ( ); } // ---------- Footer ---------- window.Footer = function Footer() { const TCLogotypeFull = window.TCLogotypeFull; return ( ); };