Restored to 'f05d289edb8ae4d0d34f6679f8fd4aa4f4f27d21'
Replit-Restored-To: f05d289edb
This commit is contained in:
keshavanand12
Binary file not shown.
|
Before Width: | Height: | Size: 594 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 378 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 378 KiB |
391
css/enhance.css
391
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user