From e1bb749c802b35c26f8a6370a4d07c66c95c5d08 Mon Sep 17 00:00:00 2001 From: ka-official <28082618-ka-official@users.noreply.replit.com> Date: Tue, 17 Mar 2026 20:37:29 +0000 Subject: [PATCH] Add next-level animations and visual enhancements to the website Integrates CSS and JavaScript for enhanced animations, including scroll progress, floating orbs, magnetic buttons, and animated gradients, while also fixing responsive image display issues on the About Us page. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 8702cea6-5379-4542-9446-7e71f9f057ab Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 0d23a4eb-ce23-497a-86bc-d3de3958ac06 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/705de26f-a3c1-41e6-845d-88f96627134c/8702cea6-5379-4542-9446-7e71f9f057ab/ejKynqE Replit-Helium-Checkpoint-Created: true --- 404.html | 2 + about.html | 5 +- austin.html | 4 + contact.html | 4 + css/enhance.css | 896 ++++++++++++++++++++++++++++++++++++++++++++++++ dallas.html | 4 + index.html | 4 + js/enhance.js | 357 +++++++++++++++++++ liability.html | 2 + sponsors.html | 4 + 10 files changed, 1281 insertions(+), 1 deletion(-) create mode 100644 css/enhance.css create mode 100644 js/enhance.js diff --git a/404.html b/404.html index 96e6150..1b38e2e 100644 --- a/404.html +++ b/404.html @@ -37,6 +37,8 @@ + + diff --git a/about.html b/about.html index 1c4e4c3..86ff7b4 100644 --- a/about.html +++ b/about.html @@ -37,6 +37,8 @@ + + @@ -150,7 +152,6 @@ @@ -1104,5 +1105,7 @@ + + diff --git a/austin.html b/austin.html index 560a1e1..5a4a8c0 100644 --- a/austin.html +++ b/austin.html @@ -37,6 +37,8 @@ + + @@ -554,6 +556,8 @@ + + diff --git a/contact.html b/contact.html index 98e9c73..56451ca 100644 --- a/contact.html +++ b/contact.html @@ -37,6 +37,8 @@ + + @@ -416,6 +418,8 @@ + + diff --git a/css/enhance.css b/css/enhance.css new file mode 100644 index 0000000..8fac1a5 --- /dev/null +++ b/css/enhance.css @@ -0,0 +1,896 @@ +/* ===================================================== + TSCB — Enhanced Animations & Visual Excellence + ===================================================== */ + +/* ---- Scroll Progress Bar ---- */ +#tscb-progress { + position: fixed; + top: 0; + left: 0; + height: 3px; + width: 0%; + background: linear-gradient(90deg, #d92800 0%, #ce9c5b 50%, #d92800 100%); + background-size: 200% 100%; + animation: progressShift 3s ease infinite; + z-index: 999999; + transition: width 0.08s linear; + pointer-events: none; +} + +@keyframes progressShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +/* ---- Hero Section Decorative Orbs ---- */ +.hero { + overflow: hidden; + position: relative; +} + +.hero-orb-1, +.hero-orb-2, +.hero-orb-3 { + position: absolute; + border-radius: 50%; + pointer-events: none; + z-index: 0; +} + +.hero-orb-1 { + width: 700px; + height: 700px; + background: radial-gradient(circle, rgba(217, 40, 0, 0.18) 0%, transparent 65%); + top: -300px; + right: -200px; + animation: orbDrift 12s ease-in-out infinite; +} + +.hero-orb-2 { + width: 450px; + height: 450px; + background: radial-gradient(circle, rgba(206, 156, 91, 0.12) 0%, transparent 65%); + bottom: -100px; + left: -150px; + animation: orbDrift 16s ease-in-out infinite reverse; +} + +.hero-orb-3 { + width: 250px; + height: 250px; + background: radial-gradient(circle, rgba(217, 40, 0, 0.08) 0%, transparent 65%); + top: 40%; + left: 30%; + animation: orbDrift 9s ease-in-out infinite 2s; +} + +@keyframes orbDrift { + 0%, 100% { transform: translate(0px, 0px) scale(1); } + 33% { transform: translate(30px, -30px) scale(1.06); } + 66% { transform: translate(-20px, 20px) scale(0.96); } +} + +/* ---- Hero grid overlay ---- */ +.hero::before { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); + background-size: 60px 60px; + z-index: 0; + pointer-events: none; +} + +.hero .container { + position: relative; + z-index: 1; +} + +.hero .down-arrow { + position: relative; + z-index: 1; +} + +/* ---- Down arrow bounce ---- */ +.hero .down-arrow a { + animation: arrowBounce 2s ease-in-out infinite; + display: inline-block; +} + +@keyframes arrowBounce { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(10px); } +} + +/* ---- Nav hover underline animation ---- */ +.main-menu .navbar-nav > .nav-item > a { + position: relative; +} + +.main-menu .navbar-nav > .nav-item > a::after { + content: ''; + position: absolute; + bottom: 6px; + left: 15px; + right: 15px; + height: 2px; + background: var(--accent-color); + transform: scaleX(0); + transform-origin: right; + transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1); +} + +.main-menu .navbar-nav > .nav-item > a:hover::after { + transform: scaleX(1); + transform-origin: left; +} + +/* ---- Enhanced sticky header glass effect ---- */ +header.main-header .header-sticky.active { + background: rgba(0, 0, 0, 0.88) !important; + backdrop-filter: blur(20px) saturate(180%) !important; + -webkit-backdrop-filter: blur(20px) saturate(180%) !important; + border-bottom: 1px solid rgba(206, 156, 91, 0.2) !important; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); + transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +/* ---- Enhanced Button Animations ---- */ +.btn-default { + letter-spacing: 0.03em; + transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; +} + +.btn-default:active { + transform: scale(0.96); +} + +.btn-default::before { + transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; +} + +/* ---- About image list item hover ---- */ +.about-list-item { + transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); +} + +.about-list-item:hover { + transform: translateX(8px); +} + +.about-list-item .icon-box { + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; +} + +.about-list-item:hover .icon-box { + transform: scale(1.15) rotate(-5deg); + box-shadow: 0 10px 30px rgba(217, 40, 0, 0.35); +} + +/* ---- About Image Mobile Fix ---- */ +@media (max-width: 991px) { + .about-image { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 12px; + padding-top: 0 !important; + margin-bottom: 30px; + } + + .about-img-1 { + flex: 1 1 55%; + width: auto !important; + } + + .about-img-2 { + position: relative !important; + top: auto !important; + right: auto !important; + flex: 1 1 42%; + width: auto !important; + align-self: flex-end; + } + + .about-img-1 img { + width: 100%; + } + + .about-img-2 img { + width: 100%; + border: 5px solid var(--white-color) !important; + } +} + +@media (max-width: 575px) { + .about-image { + flex-direction: column; + align-items: stretch; + } + + .about-img-1 { + flex: none !important; + width: 100% !important; + } + + .about-img-2 { + flex: none !important; + width: 75% !important; + align-self: flex-end; + margin-top: -40px; + position: relative !important; + } +} + +/* ---- Counter section enhanced ---- */ +.our-counter { + position: relative; + overflow: hidden; +} + +.counter-box { + position: relative; + overflow: hidden; + transition: box-shadow 0.4s ease; +} + +.counter-box::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: conic-gradient(from 0deg at 50% 50%, + transparent 0deg, + rgba(255,255,255,0.03) 60deg, + transparent 120deg, + rgba(255,255,255,0.03) 180deg, + transparent 240deg, + rgba(255,255,255,0.03) 300deg, + transparent 360deg); + animation: counterRotate 20s linear infinite; + pointer-events: none; +} + +@keyframes counterRotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.counter-item { + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + position: relative; + z-index: 1; +} + +.counter-item:hover { + transform: translateY(-6px); +} + +.counter-title h2 { + font-size: 62px !important; + text-shadow: 0 0 40px rgba(255, 255, 255, 0.2); + letter-spacing: -0.02em; +} + +/* ---- Service Item enhanced hover ---- */ +.service-item { + transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease !important; + box-shadow: 0 4px 20px rgba(0,0,0,0.06); +} + +.service-item:hover { + transform: translateY(-10px) !important; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18) !important; +} + +.service-item .icon-box img { + transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; +} + +.service-item:hover .icon-box img { + transform: scale(1.1) rotate(-8deg) !important; + filter: brightness(0) invert(1) !important; +} + +/* ---- Ticker gradient fade edges ---- */ +.service-ticker { + position: relative; +} + +.service-ticker::before, +.service-ticker::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + width: 120px; + z-index: 2; + pointer-events: none; +} + +.service-ticker::before { + left: 0; + background: linear-gradient(90deg, var(--primary-color) 20%, transparent 100%); +} + +.service-ticker::after { + right: 0; + background: linear-gradient(-90deg, var(--primary-color) 20%, transparent 100%); +} + +/* ---- Ticker text glow ---- */ +.scrolling-content span { + transition: text-shadow 0.3s ease; +} + +.scrolling-content span:hover { + text-shadow: 0 0 20px rgba(217, 40, 0, 0.6); +} + +/* ---- Sponsor logo shimmer on hover ---- */ +.sponsor-logo-item { + position: relative; + overflow: hidden; + transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease, border-color 0.3s ease !important; +} + +.sponsor-logo-item::after { + content: ''; + position: absolute; + top: 0; + left: -120%; + width: 60%; + height: 100%; + background: linear-gradient( + 105deg, + transparent 30%, + rgba(255, 255, 255, 0.55) 50%, + transparent 70% + ); + transform: skewX(-15deg); + transition: none; +} + +.sponsor-logo-item:hover::after { + left: 160%; + transition: left 0.65s ease; +} + +.sponsor-logo-item:hover { + border-color: var(--accent-color) !important; + transform: translateY(-6px) !important; + box-shadow: 0 20px 50px rgba(217, 40, 0, 0.15) !important; +} + +.sponsor-logo-item img { + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease !important; +} + +.sponsor-logo-item:hover img { + transform: scale(1.05); +} + +/* ---- Mission section border accent ---- */ +.mission-content-body p { + border-left: 3px solid var(--accent-color) !important; + padding-left: 18px !important; + position: relative; + transition: border-color 0.3s ease, padding-left 0.3s ease; +} + +.mission-content-body p:hover { + border-left-color: var(--secondary-color) !important; + padding-left: 24px !important; +} + +/* ---- Mission life circle enhanced ---- */ +.mission-life-circle img { + transition: border-color 0.5s ease, box-shadow 0.5s ease; + box-shadow: 0 0 0 0 rgba(217, 40, 0, 0); +} + +.mission-life-circle img:hover { + box-shadow: 0 0 0 8px rgba(217, 40, 0, 0.15); +} + +/* ---- CTA Box ---- */ +.cta-box { + position: relative; + overflow: hidden; +} + +.cta-box::before { + content: ''; + position: absolute; + width: 500px; + height: 500px; + border-radius: 50%; + background: radial-gradient(circle, rgba(217, 40, 0, 0.12) 0%, transparent 65%); + top: -200px; + right: 0; + pointer-events: none; + animation: orbDrift 14s ease-in-out infinite 1s; +} + +.cta-box::after { + content: ''; + position: absolute; + width: 300px; + height: 300px; + border-radius: 50%; + background: radial-gradient(circle, rgba(206, 156, 91, 0.08) 0%, transparent 65%); + bottom: -100px; + left: 10%; + pointer-events: none; + animation: orbDrift 10s ease-in-out infinite reverse 3s; +} + +/* ---- Footer glow border ---- */ +.main-footer { + position: relative; +} + +.main-footer::before { + content: ''; + position: absolute; + top: 0; + left: 10%; + right: 10%; + height: 1px; + background: linear-gradient(90deg, transparent, var(--secondary-color), transparent); +} + +/* ---- Footer social links ---- */ +.footer-social-links ul li a { + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease !important; +} + +.footer-social-links ul li a:hover { + transform: translateY(-6px) scale(1.15) !important; + box-shadow: 0 10px 25px rgba(217, 40, 0, 0.4) !important; +} + +/* ---- Footer links hover ---- */ +.footer-links ul li a, +.footer-contact .footer-info-box-content p a { + position: relative; + transition: all 0.3s ease !important; +} + +.footer-links ul li a::before { + content: ''; + position: absolute; + left: 0; + bottom: -2px; + width: 0; + height: 1px; + background: var(--accent-color); + transition: width 0.35s cubic-bezier(0.76, 0, 0.24, 1); +} + +.footer-links ul li a:hover::before { + width: 100%; +} + +/* ---- Page header enhanced ---- */ +.page-header { + position: relative; + overflow: hidden; +} + +.page-header::after { + content: ''; + position: absolute; + width: 500px; + height: 500px; + border-radius: 50%; + background: radial-gradient(circle, rgba(217, 40, 0, 0.12) 0%, transparent 60%); + bottom: -250px; + right: -100px; + pointer-events: none; + animation: orbDrift 15s ease-in-out infinite; +} + +/* ---- Section title accent line ---- */ +.section-title h3 { + letter-spacing: 0.08em; +} + +/* ---- Preloader gradient ---- */ +.preloader { + background: linear-gradient(135deg, #d92800 0%, #b82200 100%) !important; +} + +/* ---- Image reveal enhanced ---- */ +.reveal { + overflow: hidden; +} + +/* ---- Image hover scale (team-member, ministries) ---- */ +.team-image, +.ministries-image { + overflow: hidden; + border-radius: 0 0 100px 0; +} + +.team-member-item { + transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease; +} + +.team-member-item:hover { + transform: translateY(-8px); + box-shadow: 0 25px 55px rgba(0,0,0,0.15); +} + +/* ---- Breadcrumb enhanced ---- */ +.breadcrumb-item a { + transition: color 0.3s ease; +} + +.breadcrumb-item a:hover { + color: var(--accent-color); +} + +/* ---- About page about-image enhanced ---- */ +.about-img-1 img, +.about-img-2 img { + transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important; +} + +.about-img-1:hover img, +.about-img-2:hover img { + transform: scale(1.04) !important; +} + +/* ---- Services section background animated dots ---- */ +.our-services { + position: relative; + overflow: hidden; +} + +.our-services::before { + content: ''; + position: absolute; + inset: 0; + background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px); + background-size: 28px 28px; + pointer-events: none; + z-index: 0; +} + +.our-services .container { + position: relative; + z-index: 1; +} + +/* ---- Readmore btn enhanced hover ---- */ +.readmore-btn { + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, box-shadow 0.3s ease !important; +} + +.readmore-btn:hover { + transform: scale(1.15) rotate(45deg) !important; + box-shadow: 0 10px 30px rgba(217, 40, 0, 0.45) !important; +} + +/* ---- WOW animations enhanced ---- */ +.wow { + will-change: transform, opacity; +} + +/* ---- Smooth scroll snap feel ---- */ +html { + scroll-behavior: smooth; +} + +/* ---- Section transition spacer ---- */ +.our-counter, +.our-mission, +.our-services, +.our-sponsors-section, +.cta-box { + transition: opacity 0.3s ease; +} + +/* ---- Hero h1 glow ---- */ +.hero .section-title h1, +.hero .section-title h3 { + position: relative; + z-index: 1; +} + +/* ---- About us section enhanced ---- */ +.about-us { + position: relative; + overflow: hidden; +} + +/* ---- Floating cricket ball decorative element ---- */ +@keyframes floatBall { + 0%, 100% { transform: translateY(0px) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(180deg); } +} + +/* ---- Counter entrance animation ---- */ +@keyframes counterSlideUp { + from { + opacity: 0; + transform: translateY(40px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.counter-item.is-visible { + animation: counterSlideUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; +} + +.counter-item.is-visible:nth-child(1) { animation-delay: 0s; } +.counter-item.is-visible:nth-child(2) { animation-delay: 0.12s; } +.counter-item.is-visible:nth-child(3) { animation-delay: 0.24s; } +.counter-item.is-visible:nth-child(4) { animation-delay: 0.36s; } + +/* ---- Sponsors section entrance ---- */ +.sponsor-logo-item { + opacity: 0; + transform: translateY(25px); + transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), + box-shadow 0.45s ease, border-color 0.3s ease !important; +} + +.sponsor-logo-item.is-visible { + opacity: 1; + transform: translateY(0); +} + +.sponsor-logo-item.is-visible:nth-child(1) { transition-delay: 0s; } +.sponsor-logo-item.is-visible:nth-child(2) { transition-delay: 0.12s; } +.sponsor-logo-item.is-visible:nth-child(3) { transition-delay: 0.24s; } + +/* ---- Mission image floating animation ---- */ +.mission-img figure { + animation: missionFloat 8s ease-in-out infinite; +} + +@keyframes missionFloat { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-12px); } +} + +/* ---- Mobile responsive enhancements ---- */ +@media (max-width: 767px) { + .hero-orb-1 { + width: 350px; + height: 350px; + } + + .hero-orb-2 { + width: 250px; + height: 250px; + } + + .hero-orb-3 { + display: none; + } + + .service-ticker::before, + .service-ticker::after { + width: 60px; + } + + .counter-title h2 { + font-size: 44px !important; + } +} + +/* ---- Smooth image hover on service items ---- */ +.service-item .icon-box { + overflow: hidden; + position: relative; +} + +/* ---- Service item icon shine effect ---- */ +.service-item .icon-box::after { + content: ''; + position: absolute; + top: -50%; + left: -60%; + width: 40%; + height: 200%; + background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%); + transform: skewX(-15deg); + transition: none; +} + +.service-item:hover .icon-box::after { + left: 150%; + transition: left 0.5s ease; +} + +/* ---- Service section card border glow on hover ---- */ +.service-item { + border: 1px solid transparent; + transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), + box-shadow 0.5s ease, + border-color 0.3s ease !important; +} + +/* ---- Section row enhanced ---- */ +.section-row { + position: relative; +} + +/* ---- Animated gradient underline on h2 accent text ---- */ +.section-title h2 span { + background: linear-gradient(90deg, #d92800, #ff5733, #d92800); + background-size: 200% auto; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: textGradient 4s ease infinite; +} + +@keyframes textGradient { + 0% { background-position: 0% center; } + 50% { background-position: 100% center; } + 100% { background-position: 0% center; } +} + +/* ---- Footer logo hover ---- */ +.footer-logo img { + transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease; +} + +.footer-logo img:hover { + transform: scale(1.08) rotate(-3deg); +} + +/* ---- Breadcrumb active pulsing dot ---- */ +.breadcrumb-item.active a { + position: relative; +} + +/* ---- Hero h3 glow on load ---- */ +@keyframes heroSubtitleFade { + from { opacity: 0; transform: translateY(15px); } + to { opacity: 1; transform: translateY(0); } +} + +/* ---- About us list item stagger ---- */ +.about-list-item.is-visible { + animation: counterSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; +} + +.about-list-item.is-visible:nth-child(1) { animation-delay: 0s; } +.about-list-item.is-visible:nth-child(2) { animation-delay: 0.1s; } +.about-list-item.is-visible:nth-child(3) { animation-delay: 0.2s; } +.about-list-item.is-visible:nth-child(4) { animation-delay: 0.3s; } + +/* ---- CTA box text glow ---- */ +.cta-box .section-title h2 { + position: relative; + z-index: 1; +} + +/* ---- Service footer hover ---- */ +.service-footer { + transition: transform 0.3s ease; +} + +.service-item:hover .service-footer { + transform: translateX(4px); +} + +/* ---- Sponsors section background ---- */ +.our-sponsors-section { + position: relative; + overflow: hidden; +} + +.our-sponsors-section::before { + content: ''; + position: absolute; + inset: 0; + background-image: radial-gradient(circle, rgba(206, 156, 91, 0.08) 1px, transparent 1px); + background-size: 32px 32px; + pointer-events: none; +} + +.our-sponsors-section .container { + position: relative; + z-index: 1; +} + +/* ---- About content body grid on mobile ---- */ +@media (max-width: 575px) { + .about-content-body { + gap: 15px; + } + + .about-list-item { + width: 100%; + } +} + +/* ---- Responsive counter ---- */ +@media (max-width: 575px) { + .counter-title h2 { + font-size: 36px !important; + } + + .counter-item { + border-right: none !important; + border-bottom: 1px solid var(--divider-color); + padding-bottom: 20px; + margin-bottom: 20px; + } + + .counter-box .col-lg-3:last-child .counter-item { + border-bottom: none !important; + } +} + +/* ---- Our mission orb ---- */ +.our-mission { + position: relative; + overflow: hidden; +} + +.our-mission::before { + content: ''; + position: absolute; + width: 400px; + height: 400px; + border-radius: 50%; + background: radial-gradient(circle, rgba(206, 156, 91, 0.08) 0%, transparent 65%); + top: -100px; + right: -150px; + pointer-events: none; + animation: orbDrift 18s ease-in-out infinite; +} + +/* ---- Magnetic button cursor hint ---- */ +.btn-default, +.readmore-btn { + cursor: none; +} + +/* ---- Highlight nav link underline for current page ---- */ +.main-menu .nav-item.active > a, +.main-menu .nav-item.current > a { + color: var(--accent-color) !important; +} + +/* ---- Ticker items enhanced ---- */ +.scrolling-content span { + font-weight: 600; + letter-spacing: 0.04em; + transition: color 0.3s ease, transform 0.3s ease; +} + +/* ---- Enhanced image figure border radius ---- */ +.about-img-2 figure { + overflow: hidden; +} + +/* ---- Box shadow on sponsor section cards ---- */ +.sponsors-logo-grid { + position: relative; +} + +/* ---- Page load body clip ---- */ +body { + animation: bodyReveal 0.5s ease both; +} + +@keyframes bodyReveal { + from { opacity: 0; } + to { opacity: 1; } +} diff --git a/dallas.html b/dallas.html index dacd521..37399b0 100644 --- a/dallas.html +++ b/dallas.html @@ -37,6 +37,8 @@ + + @@ -554,6 +556,8 @@ + + diff --git a/index.html b/index.html index b95cf4c..23541a7 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,8 @@ + + @@ -767,6 +769,8 @@ + + diff --git a/js/enhance.js b/js/enhance.js new file mode 100644 index 0000000..9f87861 --- /dev/null +++ b/js/enhance.js @@ -0,0 +1,357 @@ +(function () { + "use strict"; + + /* ============================ + Scroll Progress Bar + ============================ */ + var progressBar = document.createElement('div'); + progressBar.id = 'tscb-progress'; + document.body.prepend(progressBar); + + window.addEventListener('scroll', function () { + var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; + var progress = (scrollTop / scrollHeight) * 100; + progressBar.style.width = progress + '%'; + }, { passive: true }); + + /* ============================ + Hero Decorative Orbs + ============================ */ + var hero = document.querySelector('.hero'); + if (hero) { + ['hero-orb-1', 'hero-orb-2', 'hero-orb-3'].forEach(function (cls) { + var orb = document.createElement('div'); + orb.className = cls; + hero.prepend(orb); + }); + } + + /* ============================ + Intersection Observer: Stagger counters + ============================ */ + function observeElements(selector, className, threshold) { + var elements = document.querySelectorAll(selector); + if (!elements.length) return; + + var observer = new IntersectionObserver(function (entries) { + entries.forEach(function (entry) { + if (entry.isIntersecting) { + entry.target.classList.add(className); + observer.unobserve(entry.target); + } + }); + }, { threshold: threshold || 0.2, rootMargin: '0px 0px -60px 0px' }); + + elements.forEach(function (el) { observer.observe(el); }); + } + + observeElements('.counter-item', 'is-visible', 0.2); + observeElements('.sponsor-logo-item', 'is-visible', 0.15); + observeElements('.about-list-item', 'is-visible', 0.15); + + /* ============================ + GSAP Enhanced Animations (if GSAP available) + ============================ */ + window.addEventListener('load', function () { + if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return; + + gsap.registerPlugin(ScrollTrigger); + + /* --- Hero content stagger --- */ + var heroContent = document.querySelector('.hero-content .section-title'); + if (heroContent) { + var heroKids = heroContent.querySelectorAll('h3, p'); + gsap.from(heroKids, { + y: 40, + opacity: 0, + duration: 1, + stagger: 0.2, + ease: 'power3.out', + delay: 0.3 + }); + } + + /* --- Counter numbers enhanced count-up feel --- */ + var counterBox = document.querySelector('.counter-box'); + if (counterBox) { + gsap.from(counterBox, { + scrollTrigger: { + trigger: counterBox, + start: 'top 80%', + }, + scaleX: 0.92, + scaleY: 0.95, + opacity: 0, + duration: 0.9, + ease: 'power3.out' + }); + } + + /* --- Service items stagger entrance --- */ + var serviceItems = document.querySelectorAll('.service-item'); + if (serviceItems.length) { + gsap.from(serviceItems, { + scrollTrigger: { + trigger: serviceItems[0].closest('.our-services') || serviceItems[0], + start: 'top 75%', + }, + y: 60, + opacity: 0, + duration: 0.8, + stagger: 0.15, + ease: 'back.out(1.4)' + }); + } + + /* --- About list items stagger --- */ + var aboutItems = document.querySelectorAll('.about-list-item'); + if (aboutItems.length) { + gsap.from(aboutItems, { + scrollTrigger: { + trigger: aboutItems[0].parentElement, + start: 'top 80%', + }, + x: -30, + opacity: 0, + duration: 0.7, + stagger: 0.12, + ease: 'power2.out' + }); + } + + /* --- Sponsor logos stagger entrance --- */ + var sponsorItems = document.querySelectorAll('.sponsor-logo-item'); + if (sponsorItems.length) { + gsap.from(sponsorItems, { + scrollTrigger: { + trigger: document.querySelector('.sponsors-logo-grid'), + start: 'top 80%', + }, + y: 40, + scale: 0.88, + opacity: 0, + duration: 0.7, + stagger: 0.15, + ease: 'back.out(1.7)' + }); + } + + /* --- CTA section reveal --- */ + var ctaBox = document.querySelector('.cta-box'); + if (ctaBox) { + gsap.from(ctaBox, { + scrollTrigger: { + trigger: ctaBox, + start: 'top 85%', + }, + y: 30, + opacity: 0, + duration: 0.9, + ease: 'power2.out' + }); + } + + /* --- Section titles enhanced parallax --- */ + var sectionTitles = document.querySelectorAll('.section-row .section-title'); + sectionTitles.forEach(function (title) { + gsap.from(title, { + scrollTrigger: { + trigger: title, + start: 'top 85%', + }, + y: 25, + opacity: 0, + duration: 0.8, + ease: 'power2.out' + }); + }); + + /* --- Team member items stagger --- */ + var teamItems = document.querySelectorAll('.team-member-item'); + if (teamItems.length) { + gsap.from(teamItems, { + scrollTrigger: { + trigger: teamItems[0].closest('.our-teams') || teamItems[0], + start: 'top 75%', + }, + y: 50, + opacity: 0, + duration: 0.8, + stagger: 0.14, + ease: 'back.out(1.4)' + }); + } + + /* --- Mission image floating --- */ + var missionImg = document.querySelector('.mission-img figure'); + if (missionImg) { + gsap.to(missionImg, { + y: -18, + duration: 3.5, + ease: 'sine.inOut', + yoyo: true, + repeat: -1 + }); + } + + /* --- Mission life circle pulse --- */ + var lifeCircle = document.querySelector('.mission-life-circle img'); + if (lifeCircle) { + gsap.to(lifeCircle, { + boxShadow: '0 0 0 12px rgba(217, 40, 0, 0.12)', + duration: 2, + ease: 'sine.inOut', + yoyo: true, + repeat: -1 + }); + } + + /* --- Orb parallax on scroll --- */ + var orbs = document.querySelectorAll('.hero-orb-1, .hero-orb-2, .hero-orb-3'); + if (orbs.length && document.querySelector('.hero')) { + orbs.forEach(function (orb, i) { + var speed = (i + 1) * 0.08; + gsap.to(orb, { + scrollTrigger: { + trigger: '.hero', + start: 'top top', + end: 'bottom top', + scrub: 1 + }, + y: (i % 2 === 0 ? -1 : 1) * 120 * speed * 10, + x: (i % 2 === 0 ? 1 : -1) * 40 * speed * 5, + ease: 'none' + }); + }); + } + + /* --- Counter section scale in --- */ + var counterItems = document.querySelectorAll('.counter-item'); + if (counterItems.length) { + counterItems.forEach(function (item, i) { + gsap.from(item, { + scrollTrigger: { + trigger: item, + start: 'top 85%', + }, + y: 35, + scale: 0.92, + opacity: 0, + duration: 0.75, + delay: i * 0.1, + ease: 'back.out(1.5)' + }); + }); + } + + /* --- Sponsors footer line --- */ + var sponsorFooter = document.querySelector('.sponsors-footer'); + if (sponsorFooter) { + gsap.from(sponsorFooter, { + scrollTrigger: { + trigger: sponsorFooter, + start: 'top 90%' + }, + y: 20, + opacity: 0, + duration: 0.7, + ease: 'power2.out' + }); + } + }); + + /* ============================ + Magnetic Button Effect (subtle) + ============================ */ + var magnetBtns = document.querySelectorAll('.btn-default, .readmore-btn'); + magnetBtns.forEach(function (btn) { + btn.addEventListener('mousemove', function (e) { + var rect = btn.getBoundingClientRect(); + var cx = rect.left + rect.width / 2; + var cy = rect.top + rect.height / 2; + var dx = (e.clientX - cx) / (rect.width / 2); + var dy = (e.clientY - cy) / (rect.height / 2); + var strength = btn.classList.contains('readmore-btn') ? 6 : 8; + btn.style.transform = 'translate(' + (dx * strength) + 'px, ' + (dy * strength) + 'px)'; + }); + + btn.addEventListener('mouseleave', function () { + btn.style.transform = ''; + btn.style.transition = 'transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)'; + }); + + btn.addEventListener('mouseenter', function () { + btn.style.transition = 'transform 0.1s ease'; + }); + }); + + /* ============================ + Active nav link highlight + ============================ */ + var currentPath = window.location.pathname.split('/').pop() || 'index.html'; + var navLinks = document.querySelectorAll('.main-menu .nav-item a'); + navLinks.forEach(function (link) { + var href = link.getAttribute('href') || ''; + var linkFile = href.split('/').pop(); + if (linkFile === currentPath || (currentPath === '' && linkFile === 'index.html')) { + link.closest('.nav-item').classList.add('active'); + } + }); + + /* ============================ + Smooth Ticker Speed Boost on hover + ============================ */ + var tickerBoxes = document.querySelectorAll('.scrolling-ticker-box'); + tickerBoxes.forEach(function (box) { + box.addEventListener('mouseenter', function () { + box.style.animationPlayState = 'paused'; + var content = box.querySelectorAll('.scrolling-content'); + content.forEach(function (c) { c.style.animationPlayState = 'paused'; }); + }); + box.addEventListener('mouseleave', function () { + box.style.animationPlayState = ''; + var content = box.querySelectorAll('.scrolling-content'); + content.forEach(function (c) { c.style.animationPlayState = ''; }); + }); + }); + + /* ============================ + Image tilt effect on about images + ============================ */ + var tiltImages = document.querySelectorAll('.about-img-1, .about-img-2, .mission-img .image-anime'); + tiltImages.forEach(function (el) { + el.addEventListener('mousemove', function (e) { + var rect = el.getBoundingClientRect(); + var cx = rect.left + rect.width / 2; + var cy = rect.top + rect.height / 2; + var dx = (e.clientX - cx) / (rect.width / 2); + var dy = (e.clientY - cy) / (rect.height / 2); + var img = el.querySelector('img, figure'); + if (img) { + img.style.transform = 'perspective(600px) rotateY(' + (dx * 4) + 'deg) rotateX(' + (-dy * 4) + 'deg) scale(1.03)'; + img.style.transition = 'transform 0.1s ease'; + } + }); + + el.addEventListener('mouseleave', function () { + var img = el.querySelector('img, figure'); + if (img) { + img.style.transform = ''; + img.style.transition = 'transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)'; + } + }); + }); + + /* ============================ + Counter box animated number suffix + ============================ */ + // Ensure counter values have proper styling after WOW init + document.addEventListener('DOMContentLoaded', function () { + var counterTitles = document.querySelectorAll('.counter-title h2'); + counterTitles.forEach(function (h2) { + h2.style.letterSpacing = '-0.02em'; + }); + }); + +})(); diff --git a/liability.html b/liability.html index d77d748..1cbbd2b 100644 --- a/liability.html +++ b/liability.html @@ -37,6 +37,8 @@ + + diff --git a/sponsors.html b/sponsors.html index 110a497..e3b98fb 100644 --- a/sponsors.html +++ b/sponsors.html @@ -37,6 +37,8 @@ + + @@ -453,5 +455,7 @@ + +