/* ========================================================================== CSS Variables & Core Reset ========================================================================== */ :root { /* Color Palette (Deccan Sunset) */ --deep-navy: #3E1D65; /* Purple */ --road-asphalt: #1C2024; --construction-orange: #963179; /* Magenta */ --concrete: #D9D9D9; --accent-gold: #FAC800; /* Yellow */ --white: #FFFFFF; /* Functional Colors */ --navy-light: #522785; /* Lighter Purple */ --light-gray: #f8f9fa; --overlay-dark: rgba(62, 29, 101, 0.85); /* Purple rgba */ /* Typography */ --font-heading: 'Montserrat', sans-serif; --font-body: 'Inter', sans-serif; /* Transitions */ --transition-fast: 0.2s ease-in-out; --transition-medium: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-slow: 0.5s ease; } body { font-family: var(--font-body); color: var(--road-asphalt); /* WHY `clip` AND NOT `hidden`: Per spec, setting one axis to `hidden` forces the other axis to compute to `auto`, which quietly turns into a scroll container. That makes ScrollTrigger resolve pinType to "transform" instead of "fixed", which then disagrees with the explicit pinType:"fixed" set in script.js. `clip` hides the same horizontal overflow WITHOUT creating a scroll container, so overflow-y stays `visible` and the two agree. (This was not what broke the hero pin — that was Bootstrap's `position-relative` utility; see the note in index.html. But leaving `hidden` here would break it again the moment pinType is touched.) The `hidden` line below is the fallback for pre-2022 browsers. */ overflow-x: hidden; overflow-x: clip; background-color: var(--white); line-height: 1.7; } h1, h2, h3, h4, h5, h6, .font-montserrat { font-family: var(--font-heading); } .fw-black { font-weight: 900; } .tracking-wider { letter-spacing: 0.1em; } /* Custom Text Colors */ .text-navy { color: var(--deep-navy) !important; } .text-accent { color: #f8bc08 !important; } .text-asphalt { color: var(--road-asphalt) !important; } /* #ab3671 */ /* Custom Background Colors */ .bg-navy { background-color: var(--deep-navy) !important; } .bg-navy-light { background-color: var(--navy-light) !important; } .bg-accent { background-color: var(--accent-gold) !important; } .bg-asphalt { background-color: #4a2068 !important; } .bg-light-gray { background-color: var(--light-gray) !important; } /* Scroll Progress Indicator */ .scroll-progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: transparent; z-index: 2000; } .scroll-progress-bar { height: 100%; background: var(--accent-gold); width: 0%; transition: width 0.1s; } /* Back to Top */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--accent-gold); color: var(--deep-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; z-index: 1050; opacity: 0; visibility: hidden; transform: translateY(20px); transition: var(--transition-medium); box-shadow: 0 4px 15px rgba(244, 185, 66, 0.4); } .back-to-top.active { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--construction-orange); color: var(--white); transform: translateY(-5px); } /* Floating Particles Container */ #particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .particle { position: absolute; background: rgba(255, 255, 255, 0.1); border-radius: 50%; animation: float-particle 15s infinite linear; } @keyframes float-particle { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 20% { opacity: 0.5; } 80% { opacity: 0.5; } 100% { transform: translateY(-100px) scale(1); opacity: 0; } } /* Buttons */ .btn-accent { background-color: var(--accent-gold); color: var(--deep-navy); border: 2px solid var(--accent-gold); transition: var(--transition-medium); } .btn-accent:hover { background-color: var(--construction-orange); border-color: var(--construction-orange); color: var(--white); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(242, 140, 40, 0.4); } .btn-navy { background-color: var(--deep-navy); color: var(--white); border: 2px solid var(--deep-navy); transition: var(--transition-medium); } .btn-navy:hover { background-color: transparent; color: var(--deep-navy); } .badge-accent { background-color: rgba(244, 185, 66, 0.2); color: var(--accent-gold); border: 1px solid var(--accent-gold); padding: 0.5rem 1rem; } /* ========================================================================== 1. TOP NAVIGATION ========================================================================== */ .premium-nav { padding: 1.3rem 0; transition: var(--transition-medium); background: transparent; } .premium-nav.scrolled { padding: 0.8rem 0; background: linear-gradient(to right, #3E1D65, #963179, #e5435b, #FAC800); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .brand-text { font-family: var(--font-heading); font-weight: 800; color: var(--white); letter-spacing: 1px; } .nav-link { color: rgba(255,255,255,0.8) !important; font-weight: 500; font-family: var(--font-heading); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; position: relative; padding: 0.5rem 0 !important; margin: 0 0.75rem; transition: var(--transition-fast); } .nav-link:hover, .nav-link.active { color: var(--white) !important; text-shadow: 0 0 10px rgba(255, 255, 255, 0.4); } @media (max-width: 991px) { .premium-nav { background: var(--deep-navy); padding: 1rem 0; } .navbar-collapse { background: var(--deep-navy); padding: 1rem; border-radius: 8px; margin-top: 1rem; } .nav-link { margin: 0.5rem 0; } } /* ========================================================================== 2. HERO SECTION (PARALLAX) ========================================================================== */ /* -------------------------------------------------------------------------- TUNING KNOBS for the pinned scroll-zoom. --vp-x / --vp-y are the road's VANISHING POINT, measured from irc_bg.jpg: the lane lines converge at 50% across, 32% down. Zooming from this point (instead of the centre of the frame) is what makes it read as driving into the city rather than an image simply getting bigger. These are also read by js/script.js — change them here, not there. -------------------------------------------------------------------------- */ :root { --vp-x: 50%; --vp-y: 32%; } /* THE PINNED BOX. ScrollTrigger pins this, not .parallax-hero. Fixed height, not min-height: ScrollTrigger measures this element to size its pin-spacer, and min-height silently grows the moment content changes. svh avoids the mobile URL-bar jump. */ .hero-stack { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background-color: var(--deep-navy); } /* Both screens fill the pinned box and stack on top of each other. */ .hero-stack > .parallax-hero, .hero-stack > .intro-hero { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; /* overrides .intro-hero's own min-height:100vh */ } .hero-stack > .intro-hero { z-index: 1; } /* revealed underneath */ .hero-stack > .parallax-hero { z-index: 2; } /* fades away on top */ .parallax-hero { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background-color: var(--road-asphalt); will-change: opacity; } .parallax-image-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end; } .bg-zoom { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; /* Zoom toward the vanishing point, not the middle of the picture. */ transform-origin: var(--vp-x) var(--vp-y); will-change: transform; backface-visibility: hidden; /* stops scale shimmer in Safari */ } .foreground-vehicle { position: relative; z-index: 10; width: 350px; bottom: -150px; /* Adjust based on vehicle height and horizon line */ /* Scaling from the base keeps the wheels planted on the road as it shrinks. */ transform-origin: center bottom; will-change: transform, filter; backface-visibility: hidden; /* mix-blend-mode is gone: irc_vehicle.png is a real transparent cutout, so the van keeps its true colours instead of being multiplied into whatever sits behind it. */ } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Lightened to a vignette. The old flat 0.9 -> 0.5 wash existed to make hero text readable; with the overlay empty it only dulled the artwork. Darken these alphas again if you add copy back on top. */ background: radial-gradient(ellipse 75% 65% at var(--vp-x) 55%, rgba(62, 29, 101, 0.10) 0%, rgba(62, 29, 101, 0.34) 60%, rgba(62, 29, 101, 0.62) 100%); z-index: 2; /* Between background and vehicle/text */ pointer-events: none; } .hero-content-overlay { position: relative; width: 100%; height: 100%; /* was min-height:100vh — see .parallax-hero note above */ padding-top: 120px; /* Prevent overlap with fixed navbar */ padding-bottom: 100px; /* Prevent overlap with scroll indicator */ z-index: 12; /* Above everything */ pointer-events: none; /* Let scroll events pass through */ } .hero-content-overlay .btn { pointer-events: auto; /* Re-enable clicks on buttons */ } .hero-title { line-height: 1.1; letter-spacing: -1px; } .highlight-word { position: relative; display: inline-block; } .highlight-word::after { content: ''; position: absolute; left: 0; bottom: 5px; width: 100%; height: 8px; background: rgba(244, 185, 66, 0.3); z-index: -1; transform: skewX(-15deg); } .z-index-2 { z-index: 2; } .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 3; opacity: 0.8; transition: var(--transition-fast); } .scroll-indicator:hover { opacity: 1; } .mouse { width: 26px; height: 42px; border: 2px solid var(--white); border-radius: 20px; position: relative; } .wheel { width: 4px; height: 8px; background: var(--accent-gold); border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: scroll-wheel 1.5s infinite; } @keyframes scroll-wheel { 0% { top: 6px; opacity: 1; } 100% { top: 20px; opacity: 0; } } /* ========================================================================== 3. VISUAL ROAD STORY ========================================================================== */ .road-story-section { background-color: var(--white); overflow: hidden; } .road-line-horizontal { position: absolute; top: 50%; left: 10%; width: 80%; height: 4px; background: repeating-linear-gradient(90deg, var(--concrete) 0, var(--concrete) 20px, transparent 20px, transparent 40px); z-index: 1; transform: translateY(-50%); } .milestone { position: relative; z-index: 2; } .milestone-icon { width: 80px; height: 80px; background: var(--white); border: 3px solid var(--deep-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--deep-navy); margin: 0 auto; transition: var(--transition-medium); box-shadow: 0 10px 20px rgba(0,0,0,0.05); } .milestone:hover .milestone-icon { background: var(--deep-navy); color: var(--accent-gold); transform: scale(1.1); } .milestone:last-child .milestone-icon { border-color: var(--accent-gold); color: var(--accent-gold); } .milestone:last-child:hover .milestone-icon { background: var(--accent-gold); color: var(--deep-navy); } /* ========================================================================== 4. COUNTDOWN TIMER ========================================================================== */ .countdown-section { position: relative; background: var(--road-asphalt); overflow: hidden; } .countdown-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; opacity: 0.45; } .countdown-video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(62, 29, 101, 0.35) 0%, rgba(62, 29, 101, 0.25) 50%, rgba(62, 29, 101, 0.40) 100%); z-index: 2; pointer-events: none; } .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 15px 35px rgba(0,0,0,0.2); transition: var(--transition-medium); } .glass-card:hover { transform: translateY(-10px); border-color: rgba(244, 185, 66, 0.3); } /* ========================================================================== 5. WELCOME SECTION ========================================================================== */ .welcome-section { background-color: var(--white); } .image-wrapper { position: relative; } .decorative-bridge-line { position: absolute; bottom: -20px; right: -20px; width: 150px; height: 150px; border-bottom: 4px solid var(--accent-gold); border-right: 4px solid var(--accent-gold); border-radius: 0 0 40px 0; z-index: -1; } .hover-arrow:hover .transition-arrow { transform: translateX(5px); } .transition-arrow { transition: transform 0.3s ease; } /* ========================================================================== 6. CONFERENCE HIGHLIGHTS ========================================================================== */ .heading-line { width: 80px; height: 4px; background: var(--accent-gold); border-radius: 2px; } .highlight-card { transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); border: 1px solid transparent; } .highlight-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(62, 29, 101, 0.15) !important; border-color: var(--accent-gold); background-color: var(--deep-navy) !important; } .highlight-card:hover h4.text-navy { color: #ffffff !important; } .highlight-card:hover p.text-muted { color: rgba(255, 255, 255, 0.75) !important; } .highlight-card:hover .icon-box { background-color: rgba(255, 255, 255, 0.1) !important; } .card-number { position: absolute; top: -15px; right: 10px; font-size: 5rem; font-weight: 900; color: var(--concrete); opacity: 0.3; font-family: var(--font-heading); z-index: 0; transition: all 0.4s ease; } .highlight-card:hover .card-number { color: var(--accent-gold); opacity: 0.15; transform: scale(1.1) rotate(5deg); } .icon-box { width: 70px; height: 70px; position: relative; z-index: 1; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation: blob-water 6s ease-in-out infinite; transition: all 0.4s ease; } @keyframes blob-water { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 20% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 40% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; } 60% { border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%; } 80% { border-radius: 40% 50% 70% 30% / 40% 50% 60% 50%; } } /* ========================================================================== 7. COMMITTEE SECTION ========================================================================== */ .committee-section { background-color: var(--white); } .committee-card { transition: var(--transition-medium); } .committee-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); border-color: var(--concrete) !important; } .committee-img { width: 120px; height: 120px; transition: var(--transition-medium); } .committee-card:hover .committee-img { transform: scale(1.05); } /* ========================================================================== 7b. INTRO HERO (statement section directly after the parallax zoom) -------------------------------------------------------------------------- THE BACKGROUND IMAGE IS NOT NAMED IN THIS FILE. It is the in index.html, so swapping it is a one-line edit there and this stylesheet never changes. ========================================================================== */ .intro-hero { /* Where the scrim is darkest — matches the text column. Flip to `right` if your image's subject sits on the left and text should move over. */ --intro-text-side: left; position: relative; aspect-ratio: 3042 / 1298; min-height: min-content; margin-top: 76px; /* Prevents the fixed navbar from overlapping the top of the image */ display: flex; align-items: center; overflow: hidden; background-color: var(--deep-navy); /* holds the colour while the image loads */ } /* Timeline-driven reveal, replacing the AOS attributes that used to be on these elements. AOS positions by document offset; inside a pinned (fixed) container that offset never crosses AOS's threshold, so the animations would either never fire or fire all at once. The starting state lives here so there is no flash before GSAP initialises. */ .intro-reveal { opacity: 0; transform: translateY(28px); will-change: transform, opacity; } /* If JS is off or the user asked for reduced motion, show it all immediately. */ .no-js .intro-reveal, .intro-revealed .intro-reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .intro-reveal { opacity: 1; transform: none; } } .intro-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* any image size / aspect ratio fills the section */ object-position: center; /* Change to `center 30%` etc. if your photo's subject sits high or low. */ user-select: none; pointer-events: none; } /* Two scrims: a horizontal one to carry the text, and a soft bottom fade so the section joins whatever follows it instead of cutting off. */ .intro-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(62, 29, 101, 0.55) 0%, rgba(62, 29, 101, 0.00) 22%, rgba(62, 29, 101, 0.00) 62%, rgba(62, 29, 101, 0.85) 100%), linear-gradient(to var(--intro-text-side), rgba(62, 29, 101, 0.30) 0%, rgba(62, 29, 101, 0.72) 55%, rgba(62, 29, 101, 0.92) 100%); pointer-events: none; } .intro-hero-inner { position: relative; z-index: 2; color: var(--white); padding-block: 8rem 7rem; /* clears the fixed navbar and the scroll cue */ max-width: 1320px; } .intro-badge { display: inline-block; padding: 0.55rem 1.4rem; margin-bottom: 1.75rem; border: 1px solid var(--accent-gold); border-radius: 999px; color: var(--accent-gold); font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1; position: relative; overflow: hidden; animation: badge-glow-pulse 2s infinite alternate; } .intro-badge::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: badge-shine-sweep 3s infinite; } @keyframes badge-glow-pulse { 0% { box-shadow: 0 0 5px 0 rgba(244, 185, 66, 0.2); } 100% { box-shadow: 0 0 15px 2px rgba(244, 185, 66, 0.5); } } @keyframes badge-shine-sweep { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } } .intro-title { font-family: var(--font-heading); /* Scales from phone to desktop with no breakpoints. */ font-size: clamp(2.1rem, 5.6vw, 4.6rem); line-height: 1.04; letter-spacing: -0.015em; text-transform: uppercase; margin-bottom: 1.6rem; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); } .intro-lead { font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.65; max-width: 46ch; margin-bottom: 2.5rem; color: rgba(255, 255, 255, 0.86); } .intro-meta-badges { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.75rem; } .meta-badge { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.65rem 1.25rem; border-radius: 50px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--white); letter-spacing: 0.03em; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: var(--transition-medium); } .meta-badge:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--accent-gold); transform: translateY(-2px); } .meta-badge i { color: var(--accent-gold); margin-right: 0.6rem; font-size: 1.1em; } .intro-actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* Scroll cue */ .intro-scroll { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; transition: var(--transition-fast); } .intro-scroll:hover { color: var(--accent-gold); } .intro-scroll-dot { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50%; font-size: 0.8rem; animation: intro-bob 2.2s ease-in-out infinite; } @keyframes intro-bob { 0%, 100% { transform: translateY(0); opacity: 0.75; } 50% { transform: translateY(7px); opacity: 1; } } @media (max-width: 767.98px) { .intro-hero-inner { padding-block: 7rem 8rem; } .intro-title { max-width: 100%; } /* On a narrow screen a side gradient does nothing — go top-to-bottom. */ .intro-hero-scrim { background: linear-gradient(to bottom, rgba(62, 29, 101, 0.70) 0%, rgba(62, 29, 101, 0.55) 45%, rgba(62, 29, 101, 0.92) 100%); } .intro-actions .btn { flex: 1 1 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .intro-scroll-dot { animation: none; } } /* ========================================================================== 8. BRIDGE TRANSITION ========================================================================== */ .bridge-transition { background: linear-gradient(to bottom, var(--white) 0%, var(--deep-navy) 100%); min-height: 400px; position: relative; overflow: hidden; } .bridge-structure { position: absolute; bottom: 0; width: 100%; height: 200px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 10%; opacity: 0.2; } .pillar { width: 40px; height: 100%; background: var(--white); position: relative; } .pillar::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 20px; background: var(--white); } .deck { position: absolute; bottom: 40px; left: 0; width: 100%; height: 15px; background: var(--white); } .cable { position: absolute; border-bottom: 2px solid var(--white); width: 40%; height: 150px; bottom: 55px; } .left-cable { left: 10%; border-left: 2px solid var(--white); border-radius: 0 0 0 100%; } .right-cable { right: 10%; border-right: 2px solid var(--white); border-radius: 0 0 100% 0; } .bridge-text { text-shadow: 0 10px 30px rgba(0,0,0,0.5); line-height: 1.2; } /* ========================================================================== 9. HOST CITY ========================================================================== */ .host-city-section { background-color: var(--deep-navy); } .host-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/host_city_hyderabad_1787557457667.jpg') center/cover; opacity: 0.5; } .host-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(62, 29, 101, 0.95) 0%, rgba(62, 29, 101, 0.4) 100%); } .host-list li { font-size: 1.1rem; } .host-card { transition: var(--transition-medium); border-left: 4px solid transparent; } .host-card:hover { background: rgba(255, 255, 255, 0.15); border-left-color: var(--accent-gold); transform: translateX(10px); } .host-icon { width: 60px; height: 60px; flex-shrink: 0; } /* ========================================================================== 10. VENUE SECTION ========================================================================== */ .venue-img-wrapper { border-radius: 24px; } .map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: var(--accent-gold); color: var(--deep-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 0 0 15px rgba(244, 185, 66, 0.3); animation: pulse-pin 2s infinite; } @keyframes pulse-pin { 0% { box-shadow: 0 0 0 0 rgba(244, 185, 66, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(244, 185, 66, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 185, 66, 0); } } /* ========================================================================== 11. FINAL CTA ========================================================================== */ /* Deliberately NOT a photo band any more. With the intro hero now carrying a full-bleed photograph, a second full-bleed photo + headline + two pill buttons down here read as the hero repeating. This is now a flat navy closing band: same message, clearly a footer CTA rather than a hero. (It also drops a hotlinked Unsplash URL the page depended on, and a background-attachment:fixed that iOS Safari ignores outright.) */ .final-cta-section { min-height: 42vh; background: var(--deep-navy); } .cta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Faint road-marking texture, echoing the countdown section. */ background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 60px, transparent 60px, transparent 120px); opacity: 0.6; } .cta-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* Gold hairline separating the band from the section above it. */ border-top: 2px solid var(--accent-gold); background: linear-gradient(to bottom, rgba(62, 29, 101, 0.55) 0%, rgba(62, 29, 101, 0.00) 100%); } .max-w-700 { max-width: 700px; } /* ========================================================================== 12. FOOTER ========================================================================== */ .footer-links li { margin-bottom: 0.75rem; } .footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: var(--transition-fast); } .footer-links a:hover { color: var(--accent-gold); padding-left: 5px; } .social-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.05); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition-medium); text-decoration: none; } .social-icon:hover { background: var(--accent-gold); color: var(--deep-navy); transform: translateY(-3px); } .hover-white { transition: var(--transition-fast); } .hover-white:hover { color: var(--white) !important; } .contact-info a { color: rgba(255,255,255,0.7); text-decoration: none; transition: var(--transition-fast); } .contact-info a:hover { color: var(--accent-gold); } /* ========================================================================== 13. MEDIA QUERIES (Mobile Responsiveness) ========================================================================== */ @media (max-width: 991.98px) { .foreground-vehicle { width: 320px; bottom: -120px; } } @media (max-width: 767.98px) { .foreground-vehicle { width: 250px; bottom: -90px; } } @media (max-width: 575.98px) { .foreground-vehicle { width: 200px; bottom: -70px; } } /* ========================================================= IRC 2026 - COMPLETE RESPONSIVE FIX Desktop → Laptop → Tablet → Mobile ========================================================= */ /* --------------------------------------------------------- GLOBAL RESPONSIVE SAFETY --------------------------------------------------------- */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } img { max-width: 100%; height: auto; } .container { width: 100%; } /* Prevent long text from causing horizontal overflow */ h1, h2, h3, h4, h5, h6, p, a, span { overflow-wrap: break-word; } /* ========================================================= LARGE DESKTOP 1400px+ ========================================================= */ @media (min-width: 1400px) { .container { max-width: 1320px; } .intro-title { font-size: clamp(4rem, 5vw, 6rem); } .intro-lead { max-width: 800px; font-size: 1.25rem; } .foreground-vehicle { max-width: 900px; } } /* ========================================================= LAPTOP / DESKTOP 992px - 1399px ========================================================= */ @media (max-width: 1399px) { .premium-nav .navbar-nav { gap: 0.5rem !important; } .premium-nav .nav-link { font-size: 0.9rem; } .intro-title { font-size: clamp(3.2rem, 5vw, 5rem); } .intro-lead { max-width: 700px; } .foreground-vehicle { max-width: 75%; } .welcome-title { font-size: 2.5rem; } .committee-title { font-size: 2.3rem; } .bridge-text { font-size: 3.5rem; } .final-cta-section h2 { font-size: 3.8rem; } } /* ========================================================= TABLET 768px - 991px ========================================================= */ @media (max-width: 991px) { /* ----------------------------------------------------- NAVBAR ----------------------------------------------------- */ .premium-nav { padding: 10px 0; } .premium-nav .navbar-brand { font-size: 1rem; } .premium-nav .navbar-brand i { font-size: 1.5rem !important; } .premium-nav .navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.3); padding: 8px 12px; box-shadow: none !important; } .premium-nav .navbar-collapse { margin-top: 12px; padding: 15px; border-radius: 16px; background: rgba(62, 29, 101, 0.97); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } .premium-nav .navbar-nav { align-items: stretch !important; gap: 0 !important; } .premium-nav .nav-item { width: 100%; } .premium-nav .nav-link { padding: 11px 10px !important; text-align: center; } .premium-nav .nav-item:last-child { margin-left: 0 !important; margin-top: 10px; } .premium-nav .nav-item:last-child .btn { width: 100%; } /* ----------------------------------------------------- HERO STACK ----------------------------------------------------- */ .hero-stack { width: 100%; max-width: 100%; overflow: hidden; } .parallax-hero, .intro-hero { width: 100%; max-width: 100%; overflow: hidden; } .intro-hero-inner { padding-left: 30px; padding-right: 30px; } .intro-title { font-size: clamp(2.8rem, 6vw, 4.2rem); line-height: 1.05; } .intro-lead { font-size: 1.05rem; max-width: 650px; } .intro-meta-badges { flex-wrap: wrap; justify-content: center; gap: 10px; } .intro-actions { flex-wrap: wrap; justify-content: center; } .intro-actions .btn { min-width: 220px; } .foreground-vehicle { width: 65%; max-width: 650px; } /* ----------------------------------------------------- ROAD STORY ----------------------------------------------------- */ .road-story-section { padding-top: 60px; padding-bottom: 60px; } .milestone-icon { width: 70px; height: 70px; } /* ----------------------------------------------------- COUNTDOWN ----------------------------------------------------- */ .countdown-section { padding-top: 60px !important; padding-bottom: 60px !important; } .countdown-section .section-title { font-size: 2rem; } .glass-card { padding: 1.5rem !important; } .glass-card .display-4 { font-size: 2.8rem; } /* ----------------------------------------------------- WELCOME ----------------------------------------------------- */ .welcome-section::before { display: none; } .welcome-image-container { max-width: 650px; margin: 0 auto; } .floating-stat-card { right: 10px; } .welcome-title { font-size: 2.3rem; } .infra-specs-grid { margin-top: 1.5rem; } /* ----------------------------------------------------- HIGHLIGHTS ----------------------------------------------------- */ .highlights-section .container { padding-top: 40px !important; padding-bottom: 40px !important; } .highlight-card { padding: 1.5rem !important; } /* ----------------------------------------------------- COMMITTEE ----------------------------------------------------- */ .committee-title { font-size: 2.2rem; } .committee-card { padding: 1.5rem 1rem !important; } /* ----------------------------------------------------- MEMORIES ----------------------------------------------------- */ .memories-section .container { padding-top: 40px !important; padding-bottom: 40px !important; } .memories-title { font-size: 2.4rem; } .memories-desc { font-size: 1rem; } .memory-card { height: 300px; } /* ----------------------------------------------------- BRIDGE TRANSITION ----------------------------------------------------- */ .bridge-transition { min-height: 420px; } .bridge-text { font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 1.15; } /* ----------------------------------------------------- HOST CITY ----------------------------------------------------- */ .host-city-section { min-height: auto; padding-top: 80px !important; padding-bottom: 80px !important; } .host-city-section .row { text-align: center; } .host-list li { justify-content: center; } .host-city-section .col-lg-5 { margin-top: 20px; } .host-card { text-align: left; } /* ----------------------------------------------------- VENUE ----------------------------------------------------- */ .venue-section { padding-top: 60px !important; padding-bottom: 60px !important; } .venue-img-wrapper { max-width: 700px; margin: 0 auto; } /* ----------------------------------------------------- FINAL CTA ----------------------------------------------------- */ .final-cta-section { min-height: 550px; padding: 80px 20px; } .final-cta-section h2 { font-size: clamp(2.7rem, 6vw, 4rem); line-height: 1.1; } .final-cta-section .lead { font-size: 1rem; } /* ----------------------------------------------------- FOOTER ----------------------------------------------------- */ .footer-section { padding-top: 50px !important; } } /* ========================================================= MOBILE LANDSCAPE / SMALL TABLET 576px - 767px ========================================================= */ @media (max-width: 767px) { /* ----------------------------------------------------- NAVBAR ----------------------------------------------------- */ .premium-nav .container { padding-left: 15px; padding-right: 15px; } .brand-text { font-size: 1rem; } /* ----------------------------------------------------- HERO ----------------------------------------------------- */ .hero-stack { min-height: 100svh; } .intro-hero-inner { padding: 100px 20px 70px; text-align: center; } .intro-badge { font-size: 0.7rem; padding: 6px 12px; letter-spacing: 1.2px; } .intro-title { font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.08; margin-bottom: 20px; } .intro-lead { font-size: 0.95rem; line-height: 1.6; margin-left: auto; margin-right: auto; } .intro-meta-badges { flex-direction: column; align-items: center; } .meta-badge { width: auto; max-width: 100%; text-align: center; font-size: 0.8rem; } .intro-actions { flex-direction: column; width: 100%; align-items: center; } .intro-actions .btn { width: 100%; max-width: 320px; min-width: 0; } .foreground-vehicle { width: 85%; max-width: none; } .scroll-indicator { bottom: 20px; } /* ----------------------------------------------------- ROAD STORY ----------------------------------------------------- */ .road-story-section { padding: 50px 15px !important; } .road-line-horizontal { display: none !important; } .milestone { margin-bottom: 15px; } .milestone-icon { width: 65px; height: 65px; margin: 0 auto; } .milestone h5 { font-size: 0.9rem; } /* ----------------------------------------------------- COUNTDOWN ----------------------------------------------------- */ .countdown-section { padding: 45px 15px !important; } .countdown-section .section-title { font-size: 1.5rem; line-height: 1.3; } .glass-card { padding: 1.1rem !important; } .glass-card .display-4 { font-size: 2.2rem; } /* ----------------------------------------------------- WELCOME ----------------------------------------------------- */ .welcome-section { padding: 45px 15px !important; } .welcome-image-container { padding: 10px; } .floating-stat-card { position: relative; right: auto; bottom: auto; margin: -25px 10px 0 auto; width: fit-content; max-width: 90%; } .welcome-title { font-size: 2rem; line-height: 1.15; } .welcome-section .lead { font-size: 1rem; line-height: 1.6; } .infra-specs-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 1rem 0.5rem; } .infra-spec-item .num { font-size: 1.1rem; } .infra-spec-item .label { font-size: 0.65rem; } .btn-welcome { width: 100%; justify-content: center; } /* ----------------------------------------------------- HIGHLIGHTS ----------------------------------------------------- */ .highlights-section { padding-left: 10px; padding-right: 10px; } .highlights-section h2 { font-size: 1.8rem; line-height: 1.25; } .highlight-card { padding: 1.5rem !important; } /* ----------------------------------------------------- COMMITTEE ----------------------------------------------------- */ .committee-section { padding-left: 10px; padding-right: 10px; } .committee-title { font-size: 2rem; } .committee-card { max-width: 350px; margin-left: auto; margin-right: auto; } .committee-socials { opacity: 1; transform: none; } /* ----------------------------------------------------- MEMORIES ----------------------------------------------------- */ .memories-section { padding-left: 10px; padding-right: 10px; } .memories-subtitle { font-size: 0.75rem; letter-spacing: 1.5px; } .memories-subtitle::before, .memories-subtitle::after { width: 20px; margin: 0 8px; } .memories-title { font-size: 2rem; line-height: 1.15; } .memories-desc { font-size: 0.95rem; } .memory-card { height: 280px; } .memories-slider-controls { gap: 1rem; margin-top: 1.5rem; } .memory-nav-btn { width: 42px; height: 42px; } /* ----------------------------------------------------- BRIDGE ----------------------------------------------------- */ .bridge-transition { min-height: 400px; padding: 50px 20px; } .bridge-text { font-size: clamp(1.8rem, 7vw, 2.7rem); line-height: 1.2; } /* ----------------------------------------------------- HOST CITY ----------------------------------------------------- */ .host-city-section { padding: 60px 15px !important; } .host-city-section h2 { font-size: 2.1rem; line-height: 1.15; } .host-city-section .lead { font-size: 1rem; line-height: 1.6; } .host-list li { justify-content: flex-start; text-align: left; font-size: 0.95rem; } .host-card { padding: 1.2rem !important; } .host-card h4 { font-size: 1.05rem; } /* ----------------------------------------------------- VENUE ----------------------------------------------------- */ .venue-section { padding-left: 15px; padding-right: 15px; } .venue-section h2 { font-size: 2.1rem; line-height: 1.15; } .venue-section .fs-5 { font-size: 1rem !important; } .venue-section .row.g-4 { row-gap: 1.5rem !important; } .venue-section .btn { width: 100%; } /* ----------------------------------------------------- FINAL CTA ----------------------------------------------------- */ .final-cta-section { min-height: 500px; padding: 70px 20px; } .final-cta-section h2 { font-size: clamp(2.1rem, 8vw, 3rem); line-height: 1.12; } .final-cta-section .lead { font-size: 0.95rem; line-height: 1.6; } .final-cta-section .btn { width: 100%; max-width: 320px; } /* ----------------------------------------------------- FOOTER ----------------------------------------------------- */ .footer-section { text-align: center; } .footer-section .contact-info li { justify-content: center; text-align: left; width: fit-content; margin-left: auto; margin-right: auto; } .social-links { justify-content: center; } .footer-links { text-align: center; } } /* ========================================================= SMALL MOBILE 480px and below ========================================================= */ @media (max-width: 480px) { /* ----------------------------------------------------- NAVBAR ----------------------------------------------------- */ .premium-nav { padding: 7px 0; } .brand-text { font-size: 0.9rem; } .premium-nav .navbar-brand i { font-size: 1.25rem !important; } /* ----------------------------------------------------- HERO ----------------------------------------------------- */ .intro-hero-inner { padding: 90px 15px 65px; } .intro-title { font-size: clamp(1.9rem, 9vw, 2.7rem); } .intro-lead { font-size: 0.88rem; } .meta-badge { font-size: 0.72rem; padding: 6px 10px; } .intro-actions .btn { font-size: 0.9rem; padding: 11px 20px !important; } .foreground-vehicle { width: 100%; } /* ----------------------------------------------------- COUNTDOWN ----------------------------------------------------- */ .countdown-section .row { --bs-gutter-x: 0.7rem; --bs-gutter-y: 0.7rem; } .glass-card { padding: 0.8rem !important; } .glass-card .display-4 { font-size: 1.8rem; } .glass-card .small { font-size: 0.65rem; } /* ----------------------------------------------------- WELCOME ----------------------------------------------------- */ .floating-stat-card { padding: 0.8rem 1rem; gap: 8px; } .floating-stat-card i { font-size: 1.3rem; } .floating-stat-card .fs-5 { font-size: 0.9rem !important; } .floating-stat-card small { font-size: 0.65rem; } .welcome-title { font-size: 1.75rem; } .infra-specs-grid { grid-template-columns: 1fr; gap: 0; } .infra-spec-item { padding: 0.8rem 0; border-left: none !important; border-right: none !important; border-bottom: 1px solid #e2e8f0; } .infra-spec-item:last-child { border-bottom: none; } /* ----------------------------------------------------- HIGHLIGHTS ----------------------------------------------------- */ .highlights-section h2 { font-size: 1.55rem; } /* ----------------------------------------------------- COMMITTEE ----------------------------------------------------- */ .committee-title { font-size: 1.75rem; } .committee-img-wrapper { width: 105px; height: 105px; } /* ----------------------------------------------------- MEMORIES ----------------------------------------------------- */ .memories-title { font-size: 1.7rem; } .memory-card { height: 250px; } /* ----------------------------------------------------- BRIDGE ----------------------------------------------------- */ .bridge-transition { min-height: 350px; } .bridge-text { font-size: 1.65rem; } /* ----------------------------------------------------- HOST CITY ----------------------------------------------------- */ .host-city-section h2 { font-size: 1.8rem; } .host-list li { font-size: 0.88rem; } /* ----------------------------------------------------- VENUE ----------------------------------------------------- */ .venue-section h2 { font-size: 1.8rem; } .venue-section h5 { font-size: 1rem; } /* ----------------------------------------------------- FINAL CTA ----------------------------------------------------- */ .final-cta-section { min-height: 460px; } .final-cta-section h2 { font-size: 1.85rem; } /* ----------------------------------------------------- BACK TO TOP ----------------------------------------------------- */ #backToTop { width: 42px; height: 42px; right: 15px; bottom: 15px; } } /* ========================================================= VERY SMALL DEVICES 360px and below ========================================================= */ @media (max-width: 360px) { .brand-text { font-size: 0.82rem; } .intro-title { font-size: 1.8rem; } .intro-lead { font-size: 0.82rem; } .intro-actions .btn { font-size: 0.82rem; } .welcome-title { font-size: 1.55rem; } .committee-title { font-size: 1.55rem; } .bridge-text { font-size: 1.45rem; } .final-cta-section h2 { font-size: 1.65rem; } } /* ========================================================= TOUCH DEVICES Remove hover-only transformations ========================================================= */ @media (hover: none) and (pointer: coarse) { .committee-socials { opacity: 1; transform: none; } .committee-card:hover, .memory-card:hover { transform: none; } .memory-card:hover img, .committee-card:hover .committee-img img, .welcome-image-container:hover .image-wrapper img { transform: none; } } /* ========================================================= ACCESSIBILITY / REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================= LANDSCAPE MOBILE ========================================================= */ @media (max-height: 600px) and (orientation: landscape) { .intro-hero-inner { padding-top: 80px; padding-bottom: 50px; } .intro-title { font-size: 2.2rem; } .intro-lead { font-size: 0.85rem; margin-bottom: 12px; } .intro-actions .btn { padding-top: 8px !important; padding-bottom: 8px !important; } .scroll-indicator, .intro-scroll { display: none; } } /* ========================================================================== PROGRAM SCHEDULE TABLE ========================================================================== */ .premium-schedule-table { border-collapse: separate; border-spacing: 0 12px; background: transparent; width: 100%; } .premium-schedule-table th { border: none; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; color: var(--concrete); padding: 1.25rem 1.5rem; background: var(--deep-navy); } .premium-schedule-table th:first-child { border-radius: 12px 0 0 12px; } .premium-schedule-table th:last-child { border-radius: 0 12px 12px 0; } .premium-schedule-table tbody tr { background: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); transition: all 0.3s ease; border-radius: 12px; } .premium-schedule-table tbody tr:hover { transform: translateY(-3px) scale(1.005); box-shadow: 0 10px 25px rgba(250, 200, 0, 0.2); position: relative; z-index: 2; } .premium-schedule-table tbody td { padding: 1.25rem 1.5rem; vertical-align: middle; border: none; border-top: 1px solid transparent; border-bottom: 1px solid transparent; } .premium-schedule-table tbody td:first-child { border-radius: 12px 0 0 12px; border-left: 4px solid var(--accent-gold); font-weight: 700; color: var(--deep-navy); white-space: nowrap; } .premium-schedule-table tbody td:last-child { border-radius: 0 12px 12px 0; border-right: 4px solid var(--accent-gold); } /* Day Separator Rows */ .premium-schedule-table tbody tr.day-separator { background: linear-gradient(135deg, var(--deep-navy), #122845); } .premium-schedule-table tbody tr.day-separator td { border-left: 4px solid var(--accent-gold); border-right: 4px solid var(--accent-gold); color: white !important; font-size: 1.1rem; letter-spacing: 1px; } .premium-schedule-table tbody tr.day-separator:hover { transform: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); } /* Break Rows (Tea, Lunch, Dinner, Cultural) */ .premium-schedule-table tbody tr.break-row { background: #f8fafc; box-shadow: none; } .premium-schedule-table tbody tr.break-row td:first-child { border-left: 4px solid #cbd5e1; color: #64748b; } .premium-schedule-table tbody tr.break-row td:last-child { border-right: 4px solid #cbd5e1; } .premium-schedule-table tbody tr.break-row td { color: #64748b; }