diff --git a/attached_assets/image_1773786788546.png b/attached_assets/image_1773786788546.png deleted file mode 100644 index 23279ef..0000000 Binary files a/attached_assets/image_1773786788546.png and /dev/null differ diff --git a/attached_assets/image_1773787280054.png b/attached_assets/image_1773787280054.png deleted file mode 100644 index c54b365..0000000 Binary files a/attached_assets/image_1773787280054.png and /dev/null differ diff --git a/attached_assets/image_1773787312236.png b/attached_assets/image_1773787312236.png deleted file mode 100644 index c54b365..0000000 Binary files a/attached_assets/image_1773787312236.png and /dev/null differ diff --git a/css/enhance.css b/css/enhance.css index b352393..5dc0c7a 100644 --- a/css/enhance.css +++ b/css/enhance.css @@ -939,8 +939,8 @@ body { } /* ============================================================ - MOBILE POLISH v3 — Comprehensive phone & tablet refinements - Loaded last so every rule wins the cascade cleanly. + MOBILE POLISH v2 — Comprehensive phone & tablet refinements + These rules come last so they win the cascade cleanly. ============================================================ */ /* ---- Shared utility: word-wrap for long strings ---- */ @@ -956,54 +956,43 @@ body { ============================================================ */ @media (max-width: 991px) { - /* About section: remove left margin */ + /* About section on home: remove left margin that persists */ .about-content { margin-left: 0 !important; } - /* About section padding */ - .about-us { - padding: 60px 0 !important; + /* Mission section: stack order — text first, image below */ + .our-mission .row { + flex-direction: column !important; } - /* Mission image outer container: full width */ - .mission-image { - margin-top: 36px !important; + .our-mission .col-lg-6 { width: 100% !important; + max-width: 100% !important; } - /* Mission img inner: CLEAR the decorative left/bottom offset - (the life circle is hidden at 1024px — its padding is dead weight) */ + /* Mission image at tablet: clear the circle-offset padding */ .mission-img { - padding: 0 !important; - text-align: left !important; + padding: 0 0 0 0 !important; + text-align: center !important; + margin-top: 30px !important; } .mission-img figure, .mission-img img { aspect-ratio: 16 / 9 !important; - width: 100% !important; - border-radius: 0 0 60px 0 !important; + border-radius: 0 0 50px 0 !important; } - /* CTA box: centre button */ + /* CTA box: centre button at tablet */ .cta-box-btn { text-align: center !important; margin-top: 24px !important; } - /* Counter: remove dividers between stacked items */ - .counter-item { - border-right: none !important; - border-bottom: 1px solid rgba(255,255,255,0.2) !important; - padding-bottom: 20px !important; - margin-bottom: 20px !important; - } - - .counter-box .col-lg-3:last-child .counter-item { - border-bottom: none !important; - padding-bottom: 0 !important; - margin-bottom: 0 !important; + /* About us section padding tighter at tablet */ + .about-us { + padding: 60px 0 !important; } } @@ -1012,11 +1001,13 @@ body { ============================================================ */ @media (max-width: 767px) { - /* ── Hero ── */ + /* --- Hero: pull padding WAY in --- */ .hero { - padding: 130px 0 60px !important; + padding: 105px 0 70px !important; + margin-top: -75px !important; } + /* --- Hero: center the CTA buttons --- */ .hero-content-body { display: flex !important; flex-direction: column !important; @@ -1031,139 +1022,67 @@ body { margin-top: 0 !important; } + /* Hero subtitle (h3) — slightly tighter */ .hero-content .section-title h3 { - font-size: 13px !important; - margin-bottom: 14px !important; - } - - .hero-content .section-title h1 { - font-size: 36px !important; - line-height: 1.15 !important; + font-size: 14px !important; + margin-bottom: 16px !important; } + /* Hero paragraph text: max-width on mobile */ .hero-content .section-title p { font-size: 15px !important; - max-width: 88% !important; + max-width: 85% !important; margin-left: auto !important; margin-right: auto !important; } - /* ── Section titles ── */ - .section-title h2 { - font-size: 30px !important; - line-height: 1.22 !important; + /* --- Mission image: no decorative offset (life circle is hidden) --- */ + .mission-img { + padding: 0 !important; + text-align: center !important; + margin-top: 28px !important; + margin-bottom: 0 !important; } - .section-title h3 { - font-size: 12px !important; - letter-spacing: 0.06em !important; + .mission-img figure, + .mission-img img { + aspect-ratio: 16 / 9 !important; + border-radius: 0 0 40px 0 !important; } - /* ── About section ── */ + /* --- Mission content: centre-align the sub-label + heading --- */ + .mission-content .section-title { + text-align: center !important; + } + + /* Keep the decorative icon visible when centred */ + .mission-content .section-title h3 { + padding-left: 25px !important; + } + + /* Mission footer: centre the CTA button */ + .mission-content-footer { + text-align: center !important; + margin-top: 20px !important; + } + + /* --- About section (home): tighten + centre footer btn --- */ .about-us { padding: 50px 0 !important; } .about-us-footer { text-align: center !important; - margin-top: 10px !important; + margin-top: 8px !important; } + /* About content body: 1 column gap fix */ .about-content-body { - gap: 14px !important; - margin-bottom: 26px !important; + gap: 16px !important; + margin-bottom: 28px !important; } - /* ── Counter section ── */ - /* 2 per row on phones via the col-sm-6 Bootstrap class — keep dividers clean */ - .counter-title h2 { - font-size: 42px !important; - } - - .counter-content h3 { - font-size: 16px !important; - } - - .counter-box { - border-radius: 0 0 60px 0 !important; - padding: 30px 10px !important; - } - - /* Reset right borders; add bottom separators between rows */ - .counter-item { - border-right: none !important; - padding-right: 0 !important; - padding-bottom: 18px !important; - margin-bottom: 18px !important; - border-bottom: 1px solid rgba(255,255,255,0.18) !important; - } - - .counter-box .col-sm-6:nth-child(3) .counter-item, - .counter-box .col-sm-6:nth-child(4) .counter-item { - border-bottom: none !important; - padding-bottom: 0 !important; - margin-bottom: 0 !important; - } - - /* Add a vertical divider between the 2 items in each row */ - .counter-box .col-sm-6:nth-child(odd) .counter-item { - border-right: 1px solid rgba(255,255,255,0.18) !important; - padding-right: 10px !important; - } - - /* ── Mission section ── */ - .mission-content .section-title { - text-align: left !important; - } - - .mission-content-footer { - margin-top: 20px !important; - } - - /* CORE FIX: clear the decorative padding on .mission-img (inner wrapper) - that shifts the image 80px to the right — life circle is hidden at mobile */ - .mission-img { - padding: 0 !important; - text-align: left !important; - } - - .mission-img figure, - .mission-img img { - width: 100% !important; - aspect-ratio: 16 / 9 !important; - border-radius: 0 0 50px 0 !important; - object-fit: cover !important; - } - - /* Outer container: margin above the image block */ - .mission-image { - margin-top: 32px !important; - width: 100% !important; - position: relative !important; - } - - /* Hide life circle on phones (belt + suspenders with the 1024px rule) */ - .mission-life-circle { - display: none !important; - } - - /* ── Services ── */ - .our-services { - padding: 50px 0 20px !important; - } - - .service-ticker .scrolling-content span { - font-size: 52px !important; - } - - /* ── Team images ── */ - .team-image figure, - .team-image img { - aspect-ratio: 4 / 3 !important; - object-fit: cover !important; - } - - /* ── CTA box ── */ + /* --- CTA box: centre everything --- */ .cta-box-content .section-title { text-align: center !important; } @@ -1173,13 +1092,35 @@ body { margin-top: 20px !important; } - /* ── League links ── */ + /* --- Dallas / Austin league links: tighter padding --- */ .league-links .btn-default { font-size: 14px !important; padding: 12px 56px 12px 16px !important; } - /* ── Contact page ── */ + /* --- Services section: tighter padding --- */ + .our-services { + padding: 50px 0 20px !important; + } + + /* Service items: centre footer row */ + .service-footer { + align-items: flex-start !important; + } + + /* --- Service ticker: smaller on phone --- */ + .service-ticker .scrolling-content span { + font-size: 52px !important; + } + + /* --- Teams grid: consistent image heights on mobile --- */ + .team-image figure, + .team-image img { + aspect-ratio: 4 / 3 !important; + object-fit: cover !important; + } + + /* --- Contact page: email wrapping --- */ .contact-info-content h3 { font-size: 14px !important; word-break: break-word !important; @@ -1187,12 +1128,13 @@ body { line-height: 1.4 !important; } + /* Contact info items: tighter layout */ .contact-info-item { padding: 16px !important; gap: 14px !important; } - /* ── Footer ── */ + /* --- Footer: email address wrapping --- */ .footer-info-box-content p { font-size: 12px !important; word-break: break-word !important; @@ -1200,14 +1142,17 @@ body { line-height: 1.5 !important; } + /* Footer info icon: keep it from shrinking */ .footer-info-box .icon-box { flex-shrink: 0 !important; } + /* Footer links col: tighter spacing */ .footer-links { margin-bottom: 28px !important; } + /* Footer copyright: already centred in custom.css but reinforce */ .footer-copyright-text { text-align: center !important; margin-bottom: 8px !important; @@ -1217,7 +1162,7 @@ body { text-align: center !important; } - /* ── Sponsors ── */ + /* --- Sponsors section: ensure 2-col grid on phones --- */ .sponsors-logo-grid { display: flex !important; flex-wrap: wrap !important; @@ -1231,13 +1176,18 @@ body { min-width: 0 !important; } - /* ── Inner page header ── */ + /* --- Page header (inner pages): tighter heading --- */ .page-header-box h1 { font-size: 38px !important; line-height: 1.2 !important; } - /* ── About page: founders signature ── */ + /* --- Section row: less bottom margin --- */ + .section-row { + margin-bottom: 28px !important; + } + + /* --- About page: founders signature wrap fix --- */ .pastors-signature { flex-wrap: wrap !important; gap: 12px !important; @@ -1258,133 +1208,118 @@ body { ============================================================ */ @media (max-width: 575px) { - /* ── Hero ── */ + /* --- Hero: even smaller padding --- */ .hero { - padding: 120px 0 50px !important; + padding: 90px 0 55px !important; } - .hero-content .section-title h1 { + /* Hero h1: readable on tiny screens */ + .section-title h1, + .hero-content h1 { font-size: 28px !important; - line-height: 1.18 !important; + line-height: 1.2 !important; } + /* --- Hero buttons: CENTRE (override the flex-start from earlier block) --- */ .hero-content-body { align-items: center !important; gap: 12px !important; } + /* Hero paragraph: full width on tiny phones */ .hero-content .section-title p { max-width: 100% !important; font-size: 14px !important; } - /* ── Section headings ── */ + /* --- Section headings --- */ .section-title h2 { font-size: 24px !important; - line-height: 1.25 !important; + line-height: 1.28 !important; } .section-title h3 { - font-size: 11px !important; - margin-bottom: 10px !important; + font-size: 13px !important; + margin-bottom: 12px !important; } - /* ── Buttons ── */ + /* --- Section row spacing --- */ + .section-row { + margin-bottom: 22px !important; + } + + /* --- Btn-default: compact on tiny phones --- */ .btn-default { + font-size: 14px !important; + padding: 12px 52px 12px 14px !important; + } + + /* --- Counter heading --- */ + .counter-title h2 { + font-size: 32px !important; + } + + /* --- Service ticker: smaller --- */ + .service-ticker .scrolling-content span { + font-size: 42px !important; + } + + /* --- CTA box heading --- */ + .cta-box-content .section-title h2 { + font-size: 20px !important; + line-height: 1.3 !important; + } + + /* --- Page header heading --- */ + .page-header-box h1 { + font-size: 30px !important; + } + + /* --- League links: full readability --- */ + .league-links .btn-default { font-size: 13px !important; padding: 12px 52px 12px 14px !important; } - /* ── Counter ── */ - .counter-title h2 { - font-size: 36px !important; + /* --- Team card text --- */ + .team-content h3 { + font-size: 16px !important; } - .counter-content h3 { + .team-content p { font-size: 14px !important; - margin-bottom: 8px !important; } - /* At 575px, items become col-12 (1 per row) — switch back to horizontal dividers */ - .counter-item { - border-right: none !important; - border-bottom: 1px solid rgba(255,255,255,0.18) !important; - padding-bottom: 16px !important; - margin-bottom: 16px !important; - } - - .counter-box .col-sm-6:nth-child(odd) .counter-item { - border-right: none !important; - padding-right: 0 !important; - } - - /* ── Mission image ── */ - .mission-img { - padding: 0 !important; - } - - .mission-img figure, - .mission-img img { - aspect-ratio: 4 / 3 !important; - border-radius: 0 0 36px 0 !important; - } - - /* ── Service ticker ── */ - .service-ticker .scrolling-content span { - font-size: 38px !important; - } - - /* ── CTA box ── */ - .cta-box-content .section-title h2 { - font-size: 20px !important; - line-height: 1.28 !important; - } - - /* ── Page header ── */ - .page-header-box h1 { - font-size: 28px !important; - } - - /* ── About content body: 1 column ── */ - .about-content-body { - grid-template-columns: 1fr !important; - gap: 12px !important; - } - - /* ── Navbar: tighter ── */ - .navbar { - padding: 14px 0 !important; - } - - /* ── Contact info ── */ + /* --- Contact info: stack icon above text on very small --- */ .contact-info-item { align-items: flex-start !important; } - /* ── Sponsor logos: 2-col ── */ + /* --- Sponsor logos: maintain 2 col --- */ .sponsor-logo-item { flex: 0 0 calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; } - /* ── About page founders ── */ + /* --- About content body: full 1 column --- */ + .about-content-body { + grid-template-columns: 1fr !important; + gap: 14px !important; + } + + /* --- Mission content body quote line --- */ + .mission-content-body p { + padding-left: 14px !important; + } + + /* --- Navbar: tighter on very small phones --- */ + .navbar { + padding: 14px 0 !important; + } + + /* Founders: portrait aspect on small phones */ .pastors-message .about-img-1 img, .pastors-message .about-img-2 img { aspect-ratio: 3 / 4 !important; } - - /* ── League links ── */ - .league-links .btn-default { - font-size: 13px !important; - padding: 12px 50px 12px 14px !important; - } - - /* ── Team cards ── */ - .team-content h3 { - font-size: 15px !important; - } - - .team-content p { - font-size: 13px !important; - } } diff --git a/js/home-animations.js b/js/home-animations.js index 910fadb..22fbaaf 100644 --- a/js/home-animations.js +++ b/js/home-animations.js @@ -1,6 +1,6 @@ /* ===================================================== TSCB — Homepage GSAP Masterpiece - Linked ONLY in index.html | v2.0 (mobile-aware) + Linked ONLY in index.html | v1.0 ===================================================== */ (function () { @@ -9,17 +9,14 @@ /* Guard: only run when there is a hero section */ if (!document.querySelector('.hero')) return; - /* Register GSAP plugins */ + /* Register GSAP plugins (safe to call multiple times) */ gsap.registerPlugin(ScrollTrigger); - /* ── Mobile detection ── */ - var isMobile = window.matchMedia('(max-width: 767px)').matches || - ('ontouchstart' in window && window.innerWidth < 900); - /* ==================================================== - 1. HERO — ORBS ENTRANCE + 1. HERO — ORBS ENTRANCE + MOUSE PARALLAX ==================================================== */ + /* Orbs drift in after preloader */ gsap.from('.hero-orb-1', { scale: 0.2, opacity: 0, duration: 2.8, ease: 'power3.out', delay: 0.85 @@ -33,14 +30,14 @@ ease: 'power3.out', delay: 1.3 }); - /* Orb subtle glow pulse */ + /* Orb glow pulse after preloader (subtle depth feel) */ gsap.to('.hero-orb-1', { opacity: 0.85, scale: 1.08, duration: 3, ease: 'sine.inOut', yoyo: true, repeat: -1, delay: 1.8 }); - /* Orb scroll parallax — desktop + mobile */ + /* Orb scroll parallax */ ScrollTrigger.create({ trigger: '.hero', start: 'top top', @@ -54,114 +51,95 @@ } }); - /* Hero parallax: - Desktop → mouse-follow - Mobile → gentle continuous drift (no cursor needed) */ + /* Hero mouse parallax — orbs follow the cursor */ var heroEl = document.querySelector('.hero'); - - if (!isMobile) { - heroEl.addEventListener('mousemove', function (e) { - var rect = heroEl.getBoundingClientRect(); - var xR = (e.clientX - rect.left) / rect.width - 0.5; - var yR = (e.clientY - rect.top) / rect.height - 0.5; - gsap.to('.hero-orb-1', { x: xR * 55, y: yR * 35, duration: 1.8, ease: 'power2.out', overwrite: 'auto' }); - gsap.to('.hero-orb-2', { x: xR * -40, y: yR * -25, duration: 2.0, ease: 'power2.out', overwrite: 'auto' }); - gsap.to('.hero-orb-3', { x: xR * 25, y: yR * 18, duration: 1.4, ease: 'power2.out', overwrite: 'auto' }); - }); - } else { - /* Mobile: slow ambient drift on orbs */ - gsap.to('.hero-orb-2', { - x: 30, y: -20, - duration: 4, ease: 'sine.inOut', - yoyo: true, repeat: -1, delay: 0.5 - }); - gsap.to('.hero-orb-3', { - x: -20, y: 15, rotate: 20, - duration: 5, ease: 'sine.inOut', - yoyo: true, repeat: -1, delay: 1 - }); - } + heroEl.addEventListener('mousemove', function (e) { + var rect = heroEl.getBoundingClientRect(); + var xR = (e.clientX - rect.left) / rect.width - 0.5; + var yR = (e.clientY - rect.top) / rect.height - 0.5; + gsap.to('.hero-orb-1', { x: xR * 55, y: yR * 35, duration: 1.8, ease: 'power2.out', overwrite: 'auto' }); + gsap.to('.hero-orb-2', { x: xR * -40, y: yR * -25, duration: 2.0, ease: 'power2.out', overwrite: 'auto' }); + gsap.to('.hero-orb-3', { x: xR * 25, y: yR * 18, duration: 1.4, ease: 'power2.out', overwrite: 'auto' }); + }); /* ==================================================== - 2. COUNTER SECTION — single clean entrance - (replaces the previous 3-stage cascade that caused - the "spasm" effect; waypoints/counterUp still runs) + 2. COUNTER SECTION — 3-STAGE DRAMATIC ENTRANCE + (counter-item has no .wow class — safe to animate) ==================================================== */ var counterSection = document.querySelector('.our-counter'); if (counterSection) { - /* One unified entrance: box scales in, items slide up together */ - var counterTl = gsap.timeline({ - scrollTrigger: { - trigger: '.our-counter', - start: 'top 82%', - once: true - } + /* Stage 1 — the whole box scales in */ + gsap.from('.counter-box', { + scrollTrigger: { trigger: '.our-counter', start: 'top 78%', once: true }, + scale: 0.88, opacity: 0, borderRadius: '40px', + duration: 1.2, ease: 'power4.out', + immediateRender: false }); - counterTl - .from('.counter-box', { - scale: 0.9, opacity: 0, - duration: 0.9, ease: 'power3.out', - immediateRender: false - }) - .from('.counter-item', { - y: 40, opacity: 0, - duration: 0.65, stagger: 0.12, - ease: 'power3.out', - immediateRender: false - }, '-=0.5'); + /* Stage 2 — individual items slide up with stagger */ + gsap.from('.counter-item', { + scrollTrigger: { trigger: '.our-counter', start: 'top 78%', once: true }, + y: 60, opacity: 0, + duration: 0.85, stagger: 0.18, delay: 0.25, + ease: 'back.out(1.6)', + immediateRender: false + }); - /* Counter hover — desktop only */ - if (!isMobile) { - document.querySelectorAll('.counter-item').forEach(function (item) { - item.addEventListener('mouseenter', function () { - gsap.to(item.querySelector('.counter-title h2'), { - scale: 1.12, color: '#d92800', - duration: 0.35, ease: 'back.out(2)' - }); - }); - item.addEventListener('mouseleave', function () { - gsap.to(item.querySelector('.counter-title h2'), { - scale: 1, color: '', - duration: 0.5, ease: 'power2.out' - }); + /* Stage 3 — counter h2 numbers pop with elastic */ + gsap.from('.counter-title h2', { + scrollTrigger: { trigger: '.our-counter', start: 'top 78%', once: true }, + scale: 0.4, opacity: 0, + duration: 1.1, stagger: 0.2, delay: 0.55, + ease: 'elastic.out(1.1, 0.52)', + immediateRender: false + }); + + /* Counter hover — h2 magnify */ + document.querySelectorAll('.counter-item').forEach(function (item) { + item.addEventListener('mouseenter', function () { + gsap.to(item.querySelector('.counter-title h2'), { + scale: 1.12, color: '#d92800', + duration: 0.35, ease: 'back.out(2)' }); }); - } + item.addEventListener('mouseleave', function () { + gsap.to(item.querySelector('.counter-title h2'), { + scale: 1, color: '', + duration: 0.5, ease: 'power2.out' + }); + }); + }); } /* ==================================================== - 3. MISSION IMAGE — SCROLL PARALLAX (desktop only) - On mobile the parallax y-shift breaks the stacked - layout and makes the image float out of place. + 3. MISSION IMAGE — SCROLL PARALLAX + (the reveal animation in function.js still runs) ==================================================== */ - if (!isMobile) { - gsap.to('.mission-img', { - scrollTrigger: { - trigger: '.our-mission', - start: 'top bottom', - end: 'bottom top', - scrub: 1.8 - }, - y: -60, ease: 'none' - }); + gsap.to('.mission-img', { + scrollTrigger: { + trigger: '.our-mission', + start: 'top bottom', + end: 'bottom top', + scrub: 1.8 + }, + y: -60, ease: 'none' + }); - gsap.to('.mission-life-circle', { - scrollTrigger: { - trigger: '.our-mission', - start: 'top bottom', - end: 'bottom top', - scrub: 2.5 - }, - y: -95, rotate: 35, ease: 'none' - }); - } + gsap.to('.mission-life-circle', { + scrollTrigger: { + trigger: '.our-mission', + start: 'top bottom', + end: 'bottom top', + scrub: 2.5 + }, + y: -95, rotate: 35, ease: 'none' + }); /* ==================================================== - 4. SERVICE TICKER — FADE IN + 4. SERVICE TICKER — FADE IN + SUBTLE SCALE ==================================================== */ gsap.from('.service-ticker', { @@ -173,63 +151,55 @@ }); /* ==================================================== - 5. SERVICE CARDS - Desktop → 3D tilt on hover - Mobile → slide-up stagger on scroll + 5. SERVICE CARDS — 3D TILT ON HOVER + (entrance handled by WOW.js — we layer on tilt only) ==================================================== */ - if (!isMobile) { - document.querySelectorAll('.service-item').forEach(function (card) { - card.style.transformStyle = 'preserve-3d'; - card.addEventListener('mousemove', function (e) { - var rect = card.getBoundingClientRect(); - var rotX = ((e.clientY - rect.top - rect.height / 2) / (rect.height / 2)) * -10; - var rotY = ((e.clientX - rect.left - rect.width / 2) / (rect.width / 2)) * 10; - gsap.to(card, { - rotationX: rotX, rotationY: rotY, - transformPerspective: 700, - duration: 0.35, ease: 'power2.out', overwrite: 'auto' - }); - }); - card.addEventListener('mouseleave', function () { - gsap.to(card, { - rotationX: 0, rotationY: 0, - duration: 0.75, ease: 'elastic.out(1, 0.45)', overwrite: 'auto' - }); + document.querySelectorAll('.service-item').forEach(function (card) { + card.style.transformStyle = 'preserve-3d'; + card.addEventListener('mousemove', function (e) { + var rect = card.getBoundingClientRect(); + var rotX = ((e.clientY - rect.top - rect.height / 2) / (rect.height / 2)) * -10; + var rotY = ((e.clientX - rect.left - rect.width / 2) / (rect.width / 2)) * 10; + gsap.to(card, { + rotationX: rotX, rotationY: rotY, + transformPerspective: 700, + duration: 0.35, ease: 'power2.out', overwrite: 'auto' }); }); - } else { - /* Mobile: tap-scale feedback */ - document.querySelectorAll('.service-item').forEach(function (card) { - card.addEventListener('touchstart', function () { - gsap.to(card, { scale: 0.97, duration: 0.15, ease: 'power2.out' }); - }, { passive: true }); - card.addEventListener('touchend', function () { - gsap.to(card, { scale: 1, duration: 0.35, ease: 'elastic.out(1.2, 0.5)' }); - }, { passive: true }); + card.addEventListener('mouseleave', function () { + gsap.to(card, { + rotationX: 0, rotationY: 0, + duration: 0.75, ease: 'elastic.out(1, 0.45)', overwrite: 'auto' + }); }); - } + }); /* ==================================================== 6. SPONSORS — GUARANTEED VISIBILITY + Two-trigger system: ScrollTrigger + load-time check + gsap.set() owns initial state (no CSS opacity:0 ever) ==================================================== */ var sponsorItems = document.querySelectorAll('.sponsor-logo-item'); if (sponsorItems.length) { - gsap.set(sponsorItems, { opacity: 0, y: 50, scale: 0.82 }); + /* Immediately set invisible via GSAP — no CSS conflict */ + gsap.set(sponsorItems, { opacity: 0, y: 60, scale: 0.78, rotationY: 15 }); var sponsorsPlayed = false; function playSponsors() { if (sponsorsPlayed) return; sponsorsPlayed = true; gsap.to(sponsorItems, { - opacity: 1, y: 0, scale: 1, - duration: 0.8, stagger: 0.15, - ease: 'back.out(1.6)' + opacity: 1, y: 0, scale: 1, rotationY: 0, + duration: 0.9, stagger: 0.22, + ease: 'back.out(1.8)', + clearProps: 'rotationY' }); } + /* Trigger 1: normal scroll */ ScrollTrigger.create({ trigger: '.our-sponsors-section', start: 'top 88%', @@ -237,6 +207,7 @@ onEnter: playSponsors }); + /* Trigger 2: already visible when page finishes loading */ window.addEventListener('load', function () { setTimeout(function () { var sec = document.querySelector('.our-sponsors-section'); @@ -248,45 +219,43 @@ }, 980); }); - /* 3D tilt — desktop only */ - if (!isMobile) { - sponsorItems.forEach(function (card) { - card.style.transformStyle = 'preserve-3d'; - card.addEventListener('mousemove', function (e) { - var rect = card.getBoundingClientRect(); - var rotX = ((e.clientY - rect.top - rect.height / 2) / (rect.height / 2)) * -8; - var rotY = ((e.clientX - rect.left - rect.width / 2) / (rect.width / 2)) * 8; - gsap.to(card, { - rotationX: rotX, rotationY: rotY, - transformPerspective: 500, - duration: 0.3, ease: 'power2.out', overwrite: 'auto' - }); - }); - card.addEventListener('mouseleave', function () { - gsap.to(card, { - rotationX: 0, rotationY: 0, - duration: 0.65, ease: 'elastic.out(1, 0.45)', overwrite: 'auto' - }); + /* 3D tilt on hover — works after animation completes */ + sponsorItems.forEach(function (card) { + card.style.transformStyle = 'preserve-3d'; + card.addEventListener('mousemove', function (e) { + var rect = card.getBoundingClientRect(); + var rotX = ((e.clientY - rect.top - rect.height / 2) / (rect.height / 2)) * -8; + var rotY = ((e.clientX - rect.left - rect.width / 2) / (rect.width / 2)) * 8; + gsap.to(card, { + rotationX: rotX, rotationY: rotY, + transformPerspective: 500, + duration: 0.3, ease: 'power2.out', overwrite: 'auto' }); }); - } + card.addEventListener('mouseleave', function () { + gsap.to(card, { + rotationX: 0, rotationY: 0, + duration: 0.65, ease: 'elastic.out(1, 0.45)', overwrite: 'auto' + }); + }); + }); } /* ==================================================== 7. CTA BOX — SPLIT ENTRANCE + (cta-box-btn has .wow — we animate cta-box-content only) ==================================================== */ gsap.from('.cta-box-content', { scrollTrigger: { trigger: '.cta-box', start: 'top 82%', once: true }, - x: isMobile ? 0 : -70, - y: isMobile ? 30 : 0, - opacity: 0, + x: -70, opacity: 0, duration: 1.1, ease: 'power4.out', immediateRender: false }); /* ==================================================== - 8. GLOBAL SCROLL PROGRESS FLASH + 8. GLOBAL SCROLL PROGRESS + SECTION FLASH + Brief red flash on the progress bar when entering a section ==================================================== */ var sectionFlashSections = document.querySelectorAll('.our-counter, .our-services, .our-sponsors-section, .cta-box'); @@ -306,6 +275,7 @@ /* ==================================================== 9. ABOUT-LIST ICON BOXES — STAGGER SPIN-IN + (icons inside .about-list-item — no .wow class on the icon) ==================================================== */ gsap.from('#home-about .about-list-item .icon-box', { @@ -317,82 +287,29 @@ }); /* ==================================================== - 10. MOBILE-SPECIFIC SCROLL ANIMATIONS - Beautiful slide-in effects activated by scroll - (replaces cursor-dependent hover animations) + 10. SCROLL-TRIGGERED BACKGROUND GRADIENT SHIFT + on the hero as user scrolls away ==================================================== */ - if (isMobile) { - - /* About section list items: stagger slide from left */ - gsap.from('#home-about .about-list-item', { - scrollTrigger: { trigger: '#home-about .about-content-body', start: 'top 88%', once: true }, - x: -30, opacity: 0, - duration: 0.6, stagger: 0.15, - ease: 'power3.out', - immediateRender: false - }); - - /* Mission section: text slides in from left, image from bottom */ - gsap.from('.mission-content .section-title', { - scrollTrigger: { trigger: '.our-mission', start: 'top 85%', once: true }, - x: -40, opacity: 0, - duration: 0.75, ease: 'power3.out', - immediateRender: false - }); - - gsap.from('.mission-image', { - scrollTrigger: { trigger: '.mission-image', start: 'top 90%', once: true }, - y: 50, opacity: 0, - duration: 0.8, ease: 'power3.out', - immediateRender: false - }); - - /* Service items: alternate slide from left/right */ - document.querySelectorAll('.service-item').forEach(function (card, i) { - gsap.from(card, { - scrollTrigger: { trigger: card, start: 'top 90%', once: true }, - x: i % 2 === 0 ? -40 : 40, - opacity: 0, - duration: 0.65, - ease: 'power3.out', - immediateRender: false - }); - }); - - /* CTA box: gentle scale pop */ - gsap.from('.cta-box', { - scrollTrigger: { trigger: '.cta-box', start: 'top 90%', once: true }, - scale: 0.95, opacity: 0, - duration: 0.75, ease: 'back.out(1.8)', - immediateRender: false - }); - } - - /* ==================================================== - 11. HERO BRIGHTNESS SHIFT ON SCROLL (desktop only) - ==================================================== */ - - if (!isMobile) { - ScrollTrigger.create({ - trigger: '.hero', - start: 'top top', - end: 'bottom top', - scrub: 1, - onUpdate: function (self) { - heroEl.style.filter = 'brightness(' + (1 - self.progress * 0.18) + ')'; - } - }); - } + ScrollTrigger.create({ + trigger: '.hero', + start: 'top top', + end: 'bottom top', + scrub: 1, + onUpdate: function (self) { + heroEl.style.filter = 'brightness(' + (1 - self.progress * 0.18) + ')'; + } + }); /* ==================================================== FINALIZE: refresh ScrollTrigger after full load + (handles lazy images and font layout shifts) ==================================================== */ window.addEventListener('load', function () { setTimeout(function () { ScrollTrigger.refresh(); - }, 400); + }, 300); }); })();