diff --git a/css/style.css b/css/style.css index aea40b6..f8e2b66 100644 --- a/css/style.css +++ b/css/style.css @@ -417,7 +417,6 @@ a.color-a { } .advantage-icon { - margin-bottom: 15px; } @@ -1063,6 +1062,7 @@ span.textaccor { .banner_overlay { width: 95%; height: 100%; + display: flex; align-items: center; justify-content: center; @@ -1093,10 +1093,7 @@ span.textaccor { /* about history text */ .about-stats-section { background-color: #fff; -} - -.about-stats-section .container { - padding: 60px ; + padding: 60px 0px; } .about-text { @@ -1116,56 +1113,80 @@ span.textaccor { font-family: var(--font-primary); } -.about-stats-row { - margin-top: 30px; - width: 100%; +.about-stats-section .row { + margin-top: 50px; +} + +.about-stat-box h3 { + font-size: 40px; + font-weight: 400; + line-height: 60px; + color: #033a49; + margin-bottom: 10px; + font-family: var(--font-secondary); +} + +.about-width-count { + width: 23%; + text-align: left; +} + +.about-width-count2 { + width: 29%; + padding-left: 58px; +} + +.about-width-count3 { + width: 23%; + padding-left: 60px; +} + +.about-width-count4 { + width: 23%; + padding-left: 55px; +} + +.about-stat-box p { + letter-spacing: 0.8px; + color: #3e3f3f; + margin: 0; + font-family: var(--font-primary); + font-weight: 600; + font-size: 14px; + line-height: 28px; + text-transform: uppercase; +} + +.about-stat-box { + text-align: left; } .about-stat-border { position: relative; } -.about-stat-box { - border-right: 1px solid #b18c4a; - /* width: 236px; */ - box-sizing: border-box; -} - -.last-box { - border-right: none; -} -/* .about-stat-border::before { +.about-stat-border::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; - height: 112px; + height: 80px; background-color: #b18c4a; -} */ - -.about-stat-box h3 { - font-size: 40px; - font-weight: 400; - line-height: 72px; - color: #033a49; - margin-bottom: 10px; - font-family: var(--font-secondary); + /* gold tone line */ } -.about-stat-box p { - font-size: 16px; - color: #3e3f3f; - line-height: 28px; - font-weight: 600; - text-transform: uppercase; +/* ✅ Remove divider for first item */ +.about-stats-section .row .col-md-3:first-child::before { + display: none; } .about-as-of-date { + text-align: left; font-family: var(--font-primary); font-weight: 600; - font-style: italic; + font-style: Italic; font-size: 16px; line-height: 28px; color: #929197; @@ -1176,10 +1197,8 @@ span.textaccor { .history_animation { background: #131313; padding: 60px 0; - } - .history_animation .container .title { text-align: left; color: white; @@ -1300,7 +1319,7 @@ span.textaccor { =========================== */ .swiper { width: 100%; - + display: flex; justify-content: center; align-items: center; @@ -1309,7 +1328,6 @@ span.textaccor { box-sizing: border-box; } - .swiper-wrapper { display: flex; align-items: center; @@ -1440,7 +1458,6 @@ span.textaccor { line-height: 100%; text-transform: capitalize; color: #b18c4a; - } .blog-aling { align-items: center; @@ -1464,9 +1481,8 @@ span.textaccor { height: 24px; } .card-scroll { - margin-top: 5px; -} + } .container { padding: 0 25px 0 25px; @@ -1510,12 +1526,12 @@ span.textaccor { gap: 30px; } .mySwiper2 .mobile-hight { - min-width: 50px ; - min-height: 50px ; - object-fit: contain ; - display: block ; - margin: 0 ; /* small bottom margin to reduce space */ -} + min-width: 50px; + min-height: 50px; + object-fit: contain; + display: block; + margin: 0; /* small bottom margin to reduce space */ + } .stat-border::before { content: ""; @@ -1604,14 +1620,12 @@ span.textaccor { background-color: #b18c4a; /* gold line */ } - .advantage-icon - - { + .advantage-icon { margin-bottom: 15px; width: 100%; display: flex; justify-content: flex-start !important; -} + } .arrow { display: none; @@ -1633,11 +1647,9 @@ span.textaccor { /* show mobile arrow on mobile */ } - - -.mySwiper2 { + .mySwiper2 { height: 338px !important; -} + } .offcanvas-body img { width: 100%; height: auto; @@ -1912,7 +1924,7 @@ span.textaccor { } .about-stats-section .container { - padding: 60px 25px ; + padding: 0px 25px; } .about-text { @@ -1923,62 +1935,85 @@ span.textaccor { font-size: 16px; } - .about-stats-row { + .about-mobile-resp-count { flex-direction: column; - justify-content: center; - align-items: center; + gap: 30px; + } + + .about-stat-border::before { + content: ""; + position: absolute; + left: 50%; + top: -163%; + width: 1px; + height: 210px; + top: -115%; + width: 1px; + height: 130px; + background-color: #033a49; + transform: rotate(90deg); + } + + .about-width-count { + width: 100%; + + padding-left: 0px; + padding-right: 0px; + } + + .about-width-count2 { + width: 100%; + padding-left: 0px; + padding-right: 0px; + } + + .about-width-count3 { + width: 100%; + padding-left: 0px; + padding-right: 0px; + } + + .about-width-count4 { + width: 100%; + padding-left: 0px; + padding-right: 0px; } .about-stat-box { - border-bottom: 1px solid #033a49; - border-right: none; - width: 200px; - box-sizing: border-box; - /* margin-bottom: 20px; */ - margin: 0 auto 20px auto; - } - - .last-box { - border-bottom: none; + text-align: center; + margin-top: 10px; } .about-stat-box h3 { - font-size: 32px; + font-size: 24px; line-height: 42px; - text-align: center; } .about-stat-box p { - font-size: 16px; - text-align: center; - margin-bottom: 30px; - } - - .month-date-container { - display: flex; - justify-content: center; - align-items: center; + line-height: 16px; } .about-as-of-date { - font-weight: 400; + text-align: center; + width: 100%; + /* border: 1px solid black; */ } - .history_animation { width: 100%; overflow-x: scroll; overflow-y: hidden; - + -ms-overflow-style: none; + scrollbar-width: none; } - .history_animation{ + .history_animation { padding: 60px 0 60px 0 !important; } .history_animation .container .title { font-size: 32px; padding-left: 25px; - padding-right: 25px; + padding-right: 25px; } /* .timeline { @@ -1991,8 +2026,8 @@ span.textaccor { content: ""; position: absolute; top: 50%; - left: 10px; - right: 10px; + left: 20px; + right: 20px; height: 1px; background: #b18b4a65; transform: translateY(-50%); @@ -2011,9 +2046,8 @@ span.textaccor { font-family: var(--font-primary); top: -35px; } - -.timeline { + .timeline { justify-content: space-between; list-style: none; display: flex; @@ -2027,14 +2061,24 @@ span.textaccor { margin-top: 40px; margin-bottom: 20px; margin-left: 20px; -} + } -.timeline-item { + .line-fill { + position: absolute; + top: 50%; + left: 25px; /* Adjust this to match first kite position */ + height: 1px; + background: #b18b4a; + transform: translateY(-50%); + z-index: 1; + transition: width 0.5s ease; + } + + .timeline-item { position: relative; z-index: 1; top: -15px; -} - + } .swiper-slide h2 { font-size: 35px; diff --git a/js/main.js b/js/main.js index a780c8b..30d213d 100644 --- a/js/main.js +++ b/js/main.js @@ -127,7 +127,7 @@ const timelineData = { // ✅ Initialize Timeline & Swiper // =============================== function initTimelineSwiper() { - const swiperWrapper = document.querySelector(".swiper-wrapper"); + const swiperWrapper = document.querySelector(".swiper-wrapper"); const timelineItems = document.querySelectorAll(".timeline-item"); if (!swiperWrapper || !timelineItems.length) return; @@ -141,7 +141,8 @@ function initTimelineSwiper() { slide.classList.add("swiper-slide"); // ✅ Use mobile icon if on mobile, else desktop - const iconToUse = isMobile && content.mobileIcon ? content.mobileIcon : content.icon; + const iconToUse = + isMobile && content.mobileIcon ? content.mobileIcon : content.icon; const headingColor = ["2015", "2017", "2018"].includes(year) ? "#ffffff" @@ -173,18 +174,80 @@ function initTimelineSwiper() { swiperWrapper.appendChild(slide); }); - // Line fill logic + // Line fill logic - UPDATED for mobile const lineFill = document.querySelector(".line-fill"); + const timeline = document.querySelector(".timeline"); const totalKites = timelineItems.length; function updateTimeline(index) { timelineItems.forEach((item, i) => { item.classList.toggle("active", i === index); }); - const timelineWidth = - document.querySelector(".timeline")?.offsetWidth - 20; - const newWidth = (timelineWidth / (totalKites - 1)) * index; - if (lineFill) lineFill.style.width = newWidth + "px"; + + // Check if mobile (timeline is scrollable) + const isMobileView = window.matchMedia("(max-width: 768px)").matches; + + if (isMobileView && timeline && lineFill) { + // FIXED: Mobile line fill calculation - exact kite to kite + const firstKite = timelineItems[0]; + const lastKite = timelineItems[totalKites - 1]; + + if (firstKite && lastKite) { + // Calculate exact positions of first and last kite centers + const firstKiteCenter = + firstKite.offsetLeft + firstKite.offsetWidth / 2; + const lastKiteCenter = lastKite.offsetLeft + lastKite.offsetWidth / 2; + + // Total distance between first and last kite centers + const totalDistance = lastKiteCenter - firstKiteCenter; + + // Calculate width based on current index + const progress = index / (totalKites - 1); + const newWidth = totalDistance * progress; + + // Set the line fill width + lineFill.style.width = newWidth + "px"; + } + } else { + // Desktop line fill calculation (your original code) + const timelineWidth = timeline?.offsetWidth - 20; + const newWidth = (timelineWidth / (totalKites - 1)) * index; + if (lineFill) lineFill.style.width = newWidth + "px"; + } + + // Auto-scroll for mobile only + if (isMobileView) { + autoScrollTimeline(index); + } + } + + // Auto-scroll timeline horizontally - MOBILE ONLY + function autoScrollTimeline(index) { + if (!timeline) return; + + const activeItem = timelineItems[index]; + if (!activeItem) return; + + const itemLeft = activeItem.offsetLeft; + const itemWidth = activeItem.offsetWidth; + const containerWidth = timeline.offsetWidth; + + // Calculate the target scroll position to show current year + // completely visible at the far right edge with a small padding + const rightPadding = 40; + const targetScroll = itemLeft + itemWidth - containerWidth + rightPadding; + + // Ensure we don't scroll beyond the start or end of the timeline + const maxScroll = timeline.scrollWidth - containerWidth; + const clampedScroll = Math.max(0, Math.min(targetScroll, maxScroll)); + + // Only scroll if we're not already at the correct position + if (Math.abs(timeline.scrollLeft - clampedScroll) > 4) { + timeline.scrollTo({ + left: clampedScroll, + behavior: "smooth", + }); + } } // Initialize Swiper @@ -192,10 +255,10 @@ function initTimelineSwiper() { spaceBetween: 20, centeredSlides: true, effect: "fade", - fadeEffect: { - crossFade: true, // 👈 this makes previous slide fade out smoothly - }, - + fadeEffect: { + crossFade: true, // 👈 this makes previous slide fade out smoothly + }, + speed: 2500, // controls fade speed (in ms) autoplay: { delay: 2200, @@ -211,9 +274,25 @@ function initTimelineSwiper() { updateTimeline(swiper.realIndex); }); - updateTimeline(0); -} + // Add click events to timeline items + timelineItems.forEach((item, index) => { + item.addEventListener("click", () => { + updateTimeline(index); + swiper.slideTo(index); + }); + }); + updateTimeline(0); + + // Handle window resize - recalculate after a short delay + let resizeTimeout; + window.addEventListener("resize", function () { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(function () { + updateTimeline(swiper.realIndex); + }, 250); + }); +} // =============================== // ✅ Generic Swiper Init (Other Pages) @@ -247,9 +326,6 @@ window.openDrawer = function (name, role, img, desc) { drawer.show(); }; - - - let cards = []; let currentIndex = 0; let animating = false; @@ -259,7 +335,7 @@ function initGsapStackScroll() { const section = document.querySelector(".cards-wrapper"); if (!section) return; - cards = Array.from(section.querySelectorAll('.card-scroll')); + cards = Array.from(section.querySelectorAll(".card-scroll")); if (!cards.length) return; // Hide all cards initially, show the first one @@ -267,8 +343,8 @@ function initGsapStackScroll() { gsap.set(cards[0], { opacity: 1, y: "0px", zIndex: 4 }); currentIndex = 0; - section.addEventListener('mouseenter', () => (isInsideSection = true)); - section.addEventListener('mouseleave', () => (isInsideSection = false)); + section.addEventListener("mouseenter", () => (isInsideSection = true)); + section.addEventListener("mouseleave", () => (isInsideSection = false)); window.removeEventListener("wheel", window._gsapStackHandler); window._gsapStackHandler = function (e) { @@ -283,7 +359,9 @@ function initGsapStackScroll() { } }; - window.addEventListener('wheel', window._gsapStackHandler, { passive: false }); + window.addEventListener("wheel", window._gsapStackHandler, { + passive: false, + }); } function showNextGsapCard() { @@ -300,7 +378,7 @@ function showNextGsapCard() { opacity: 1, duration: 0.8, ease: "power2.inOut", - onComplete: () => current.classList.add("previous") + onComplete: () => current.classList.add("previous"), }); // Animate next card (slide in from below and become active) @@ -337,7 +415,7 @@ function showPrevGsapCard() { opacity: 0, duration: 0.8, ease: "power2.inOut", - onComplete: () => current.classList.remove("previous") + onComplete: () => current.classList.remove("previous"), }); // Bring back previous card as active @@ -361,14 +439,14 @@ function showPrevGsapCard() { function adjustPreviousCards() { // Reset all cards to default state gsap.set(cards, { opacity: 0, y: "100%", zIndex: 0 }); - + // Always show the current active card if (cards[currentIndex]) { - gsap.set(cards[currentIndex], { - y: "60px", - scale: 1, - opacity: 1, - zIndex: 5 + gsap.set(cards[currentIndex], { + y: "60px", + scale: 1, + opacity: 1, + zIndex: 5, }); } @@ -376,15 +454,15 @@ function adjustPreviousCards() { for (let i = 1; i <= 3; i++) { const prevIndex = currentIndex - i; if (prevIndex >= 0) { - const yOffset = 60 - (i * 30); // 60px, 40px, 20px, 0px - const scale = 1 - (i * 0.05); // 1, 0.95, 0.9, 0.85 + const yOffset = 60 - i * 30; // 60px, 40px, 20px, 0px + const scale = 1 - i * 0.05; // 1, 0.95, 0.9, 0.85 const zIndex = 5 - i; // 5, 4, 3, 2 - - gsap.set(cards[prevIndex], { - y: `${yOffset}px`, - scale: scale, - opacity: 1, - zIndex: zIndex + + gsap.set(cards[prevIndex], { + y: `${yOffset}px`, + scale: scale, + opacity: 1, + zIndex: zIndex, }); } } @@ -392,10 +470,6 @@ function adjustPreviousCards() { document.addEventListener("DOMContentLoaded", initGsapStackScroll); - - - - // =============================== // ✅ Load Page Content Dynamically // =============================== diff --git a/pages/about.html b/pages/about.html index fabd721..af34ef9 100644 --- a/pages/about.html +++ b/pages/about.html @@ -1,4 +1,3 @@ -
-