/* ============================================================ SPACE PALETTE — RESPONSIVE.CSS Master responsiveness layer for all pages (index, about, projects, project detail, contact). Load order required in : style.css → motion.css → responsive.css (this file last) Breakpoints used: 1400px – large desktop 1200px – small desktop / large laptop 992px – tablet landscape 860px – nav switches to hamburger menu 768px – tablet portrait 600px – large phone 480px – phone 380px – small phone ============================================================ */ /* ------------------------------------------------------------ 0. GLOBAL SAFETY NET NOTE: do NOT add "overflow-x:hidden" to the element here. style.css already sets it on , and that's exactly what makes the browser propagate it to the viewport correctly. If also declares an overflow value, the browser stops propagating body's overflow to the viewport and body becomes its own scroll container instead — which silently breaks every position:sticky element on the page (the index "project" pinned sections AND the Project.html horizontal scroll-jack both rely on position:sticky). Keep this block to max-width only. ------------------------------------------------------------ */ html, body{ max-width: 100%; } img, video, svg{ max-width: 100%; height: auto; } * { -webkit-tap-highlight-color: transparent; } /* Large-desktop containment so nothing over-stretches on ultrawide screens */ @media (min-width:1600px){ .hero-content, .about-hero, .story, .services > p, .trust-track-wrap, .testimonial-wrapper, .team, .wrapper, .contact-main, .map-frame{ max-width: 1400px; } } /* ------------------------------------------------------------ 1. HEADER + NAVIGATION (all pages) Everything here is scoped inside the ≤860px media query on purpose — the desktop header/nav must stay exactly as it was. ------------------------------------------------------------ */ /* Hamburger button — hidden on desktop, shown under 860px */ .menu-btn{ display: none; width: 38px; height: 34px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; position: relative; flex-shrink: 0; } .menu-btn span{ display: block; width: 24px; height: 2px; background: #f5f5f3; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } .menu-btn.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); } .menu-btn.active span:nth-child(2){ opacity: 0; } .menu-btn.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); } /* IMPORTANT: header itself has z-index:1000 (style.css) and creates its own stacking context, so nav.mainnav's z-index only matters *inside* that context. The overlay must stay BELOW 1000 (header's own stacking level) or it will paint over the whole header — including the open menu — and swallow every click on the nav links. That was the "menu open aana links click aagala" bug. */ .nav-overlay{ position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(0px); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; z-index: 950; pointer-events: none; } .nav-overlay.show{ opacity: 1; visibility: visible; pointer-events: auto; } body.menu-open{ overflow: hidden; } @media (max-width:860px){ header#header{ padding: 14px 20px; height: 64px; } .logo-img{ height: 42px; } .menu-btn{ display: flex; } .nav-spacer{ display: none !important; } nav.mainnav{ display: flex !important; position: fixed; top: 0; right: 0; height: 70vh; width: min(50vw, 220px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 34px; margin: 0; padding: 110px 44px 60px; background: rgba(0, 0, 0, 0.671); backdrop-filter: blur(0px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-left: 1px solid rgba(255,255,255,.08); box-shadow: -10px 0 40px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .4s cubic-bezier(.22,1,.36,1); } nav.mainnav.nav-open{ transform: translateX(0); } nav.mainnav a{ font-size: 16px; letter-spacing: 1.5px; margin-left: 0 !important; } } @media (max-width:380px){ header#header{ padding: 12px 16px; } .logo-img{ height: 36px; } nav.mainnav{ width: 86vw; padding: 100px 32px 50px; } } /* ====================================== Mobile - Who We Are Section ====================================== */ .hero{ padding-top: 40px !important; /* Reduce from current value */ } .hero-content{ padding-top: 0 !important; margin-top: -30px; /* Move heading, text & button up */ } /* ------------------------------------------------------------ 2. FOOTER + COPYRIGHT (shared) ------------------------------------------------------------ */ @media (max-width:768px){ footer{ padding: 30px 20px 26px; gap: 12px; } .social-icon{ width: 38px; height: 38px; } .social-icon svg{ width: 14px; height: 14px; } .copy-rights, .copyright{ font-size: 10.5px; line-height: 1.6; padding: 20px 16px 30px; } } @media (max-width:420px){ footer{ gap: 10px; } .social-icon{ width: 34px; height: 34px; } } /* ============================================================ 3. HOMEPAGE (index.html) ============================================================ */ /* ---- Hero ---- */ @media (max-width:900px){ .hero{ min-height: 60vh; padding: 90px 0 40px; } .hero h1{ margin-bottom: 22px; } .hero p{ font-size: 18px; margin-bottom: 30px; } .hero-waves{ opacity: .3; } } @media (max-width:560px){ .hero-content{ padding: 0 22px; } .hero p{ font-size: 16px; line-height: 1.6; } .btn-solid, .btn{ padding: 14px 26px; font-size: 11px; } } /* ---- Featured project (scroll-jacked sections) ---- On desktop these sections rely on a JS scroll-jack effect (motion.js): a 300vh tall wrapper, a pinned 100vh sticky panel, and images placed with "top:135vh / 140vh" that get pushed around as you scroll. That math assumes a fixed desktop-style geometry, so on phones/tablets it produced the broken/overlapping layout. The fix below fully disables the pinned parallax on mobile — same strategy already used for the project-detail page's horizontal scroller — and falls back to a normal, static, stacked block, instead of fighting the JS. */ /* ===================================================== Mobile Sticky Projects ===================================================== */ @media (max-width:900px){ .project{ height:220vh !important; } .project-sticky{ position:sticky !important; top:0; height:100vh; overflow:hidden; } .project-bg{ position:absolute !important; top:0; left:0; width:100vw !important; height:100vh !important; overflow:hidden; } .project-bg img, .project-bg picture, .project-bg video{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center center; } .project-gallery{ position:absolute; inset:0; overflow:hidden; pointer-events:none; } .gallery-track{ position:absolute; inset:0; display:block; transform:translateY(0); } .gallery-img:first-child{ width:85vw !important; height:88vw !important; max-height:none !important; left:8vw; min-height:0 !important; } .gallery-img:last-child{ width:75vw !important; height:77vw !important; right:12vw; top:190vh; max-height:none !important; min-height:0 !important; } .project-content{ position:absolute; left:22px; right:22px; bottom:30px; z-index:5; } .project-title{ font-size:32px; } .project-bottom{ display:flex; flex-direction:column; gap:20px; } .project-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } } @media (max-width:560px){ .project-meta{ grid-template-columns: repeat(2, 1fr) !important; } .btn-outline{ padding: 12px 34px; } .gallery-img{ height: 200px !important; } .project-bg{ height: 38vh; min-height: 220px; } } @media (max-width:380px){ .project-meta{ grid-template-columns: 1fr 1fr !important; gap: 16px 12px !important; } } /* ---- Trust logos ---- */ @media (max-width:900px){ .trust-track-wrap{ gap: 14px; } .carousel-arrow{ width: 28px; height: 28px; flex-shrink: 0; } .trust-logo{ min-width: 130px; width: 130px; height: 65px; } .trust-track{ gap: 90px; } } @media (max-width:560px){ .trust-logo{ min-width: 100px; width: 100px; height: 52px; } .trust-track{ gap: 60px; } .section-heading{ margin-bottom: 34px; } } /* ---- Testimonials ---- */ @media (max-width:900px){ .testimonial-section{ padding:60px 24px; } .testimonial-wrapper{ gap:22px; margin-top:50px; } .testimonial-card{ height:420px; } .testimonial-item{ left:0; padding:0 24px; } .testimonial-item.prev{ top:0 !important; } .testimonial-item.active{ top:40px !important; } .testimonial-item.next{ top:340px !important; } .testimonial-text{ font-size:18px; line-height:1.7; } } @media (max-width:560px){ /* Hide testimonial arrows on mobile */ .testimonial-controls{ display:none !important; } } @media (max-width:560px){ .section-heading{ font-size: 30px !important; line-height: 1.15; letter-spacing: -0.5px; } .testimonial-text{ font-size: 15px !important; line-height: 1.7 !important; } .testimonial-author{ font-size: 14px !important; } } /* Previous Button */ #testimonialPrev{ position:absolute; left:190px; /* Left ↔ Right */ top:200px; /* Up ↕ Down */ z-index:20; } /* Next Button */ #testimonialNext{ position:absolute; left:190px; /* Left ↔ Right */ top:490px; /* Up ↕ Down */ z-index:20; } .testimonial-wrapper{ display:block; width:90%; } .testimonial-card{ width:100%; height:420px !important; position:relative; overflow:hidden; } .testimonial-item{ left:0 !important; width:100%; padding:0 20px !important; transition:.45s ease; } .testimonial-item.prev{ top:0 !important; opacity:.45 !important; transform:translateY(0) scale(.94) !important; filter:none !important; } .testimonial-item.active{ top:50px !important; opacity:1 !important; transform:none !important; filter:none !important; } .testimonial-item.next{ top:250px !important; opacity:.45 !important; transform:translateY(0) scale(.94) !important; filter:none !important; } .testimonial-item.hidden{ top:520px !important; } /* ---- Contact section on homepage ---- */ @media (max-width:1300px){ .contact{ padding: 1px 90px 0; gap: 60px; } } @media (max-width:900px){ .contact{ padding: 70px 24px 0; gap: 50px; } .contact h2{ margin-bottom: 10px; } .contact-sub{ margin-bottom: 30px; } .contact-info h2{ margin-bottom: 30px; } .info-block{ margin-bottom: 26px; gap: 14px; } } @media (max-width:560px){ .contact{ padding: 50px 18px 0; } .contact h2{ font-size: 26px; } .field textarea{ height: 44px; } .field-row{ gap: 0; } .btn-submit{ width: 100%; justify-content: center; padding: 15px 24px; } } /* ============================================================ 4. ABOUT PAGE (about.html) ============================================================ */ /* ---- Hero / Story ---- */ @media (max-width:900px){ .about-hero{ padding: 130px 22px 70px; } .about-hero h1{ letter-spacing: .5px; } .about-hero .tagline{ font-size: 17px; margin-bottom: 26px; } .story{ font-size: 15.5px; line-height: 1.75; gap: 20px; } } /* ---- Founders ---- */ @media (max-width:1200px){ .founders{ grid-template-columns: minmax(0,560px) minmax(0,420px); gap: 50px; transform: none; } } @media (max-width:991px){ .founders{ grid-template-columns: 1fr !important; gap: 40px !important; padding: 40px 24px 90px; transform: none !important; min-height: auto; } .founder-photo{ max-width: 520px; margin: 0 auto; width: 100%; } .founders-copy{ max-width: 100% !important; transform: none !important; text-align: left; } } @media (max-width:560px){ .founder-photo{ width:90%; } .founder-photo img{ width:100%; height:auto; display:block; } .founder-names{ display:grid; grid-template-columns:1fr 1fr; gap:20px; width:100%; padding:16px 12px 0; } .founder-names .name{ font-size:18px; } .founder-names .role{ font-size:12px; } @media (max-width:560px){ /* Uma Name */ .founder-names > div:first-child .name{ margin-top:-5px; margin-left:-55px; } /* Uma Role */ .founder-names > div:first-child .role{ margin-top:8px; margin-left:-20px; } /* Vasudevan Name */ .founder-names > div:last-child .name{ margin-top:50px; margin-left:-360px; } /* Vasudevan Role */ .founder-names > div:last-child .role{ margin-top:8px; margin-left:-482px; } /* About Founders - Mobile */ .founders-copy h2{ margin-left:12px !important; /* Right move */ margin-top:0 !important; /* Top adjustment */ } .founders-copy p{ margin-left:12px !important; /* Right move */ margin-top:16px !important; /* Gap from heading */ max-width:90%; } /* =========================== FOUNDERS - MOBILE =========================== */ .founders{ display:flex; flex-direction:column; } /* About Founders first */ .founders-copy{ order:1; width:100%; margin-bottom:280px; } /* Image + Names after */ .founder-photo{ order:2; width:100%; top: 50px; } .founder-photo img{ width:100%; height:auto; display:block; } .founder-names{ margin-top:16px; } } /* =========================== FOUNDERS - MOBILE =========================== */ .founders{ gap:24px !important; } .founder-photo{ margin-top:-260px !important; } .founder-photo img{ display:block; width:100%; height:auto; } .founder-names{ margin-top:0px } .founder-names .name{ font-size:14px !important; line-height:1.15; max-width:190px; white-space:normal !important; overflow-wrap:break-word; } } /* ---- Team ---- */ @media (max-width:1200px){ .team{ grid-template-columns: minmax(0,380px) 1fr; padding: 60px 40px 100px; gap: 40px; } } @media (max-width:900px){ .team{ grid-template-columns: 1fr !important; padding: 50px 24px 80px; gap: 32px; } .team-grid{ grid-template-columns: repeat(4,1fr) !important; margin-left: 0 !important; gap: 10px !important; } .team-copy p{ max-width: 100%; font-size: 16px; } } @media (max-width:560px){ /* =========================== TEAM GRID - MOBILE =========================== */ .team{ grid-template-columns:1fr !important; gap:40px !important; padding:60px 24px 80px !important; } .team-grid{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:18px !important; margin-left:0 !important; width:100% !important; } .team-grid{ column-gap:16px !important; /* Left ↔ Right */ row-gap:50px !important; /* Top ↕ Bottom */ } .team-photo{ width:100% !important; height:120%; aspect-ratio:1/1 !important; } .team-photo img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center top; transform:scale(1.08) !important; } .team-photo:nth-child(7), .team-photo:nth-child(8), .team-photo:nth-child(9), .team-photo:nth-child(10), .team-photo:nth-child(11), .team-photo:nth-child(12), .team-photo:nth-child(13), .team-photo:nth-child(14), .team-photo:nth-child(15), .team-photo:nth-child(16), .team-photo:nth-child(17), .team-photo:nth-child(18){ grid-column:auto !important; } } /* =========================== MEET OUR TEAM - MOBILE =========================== */ .team-copy{ width:100% !important; padding:0 24px !important; } .team-copy h2{ margin-left:-20px !important; /* Right move */ margin-top:0 !important; margin-bottom:18px !important; } .team-copy p{ margin-left:-20px !important; /* Right move */ margin-right:0 !important; max-width:190% !important; /* Increase paragraph width */ line-height:1.75; margin-top:0 !important; } @media (max-width:380px){ .team-grid{ grid-template-columns: repeat(2,1fr) !important; } } /* ============================================================ 5. PROJECTS LISTING PAGE (projects.html) ============================================================ */ @media (max-width:900px){ .wrapper{ padding: 120px 20px 70px; } .grid{ grid-template-columns: repeat(2,1fr) !important; gap: 26px 20px; } h1{ margin-bottom: 30px; } } @media (max-width:600px){ .grid{ grid-template-columns: 1fr !important; } .title{ font-size: 17px; } } /* ============================================================ 6. CONTACT PAGE (contact.html) ============================================================ */ @media (max-width:900px){ .contact-hero{ padding: 120px 20px 50px; } .contact-hero h1{ letter-spacing: 0; } .contact-hero p{ font-size: 16.5px; } } @media (max-width:768px){ .contact-main{ grid-template-columns: 1fr !important; gap: 44px !important; padding: 20px 22px 80px !important; } .contact-form{ padding: 26px !important; } .field-row{ grid-template-columns: 1fr !important; gap: 0 !important; } } @media (max-width:560px){ .btn-submit{ width:100%; justify-content:center; } /* Studio Map Text */ .map-section{ text-align:left !important; } .map-eyebrow{ margin-left:0 !important; text-align:left !important; } .map-section h2{ margin-left:0 !important; text-align:left !important; } } /* Map section — the fixed 250px left margin overlapped the viewport edge and hid the heading on any non-desktop width. */ @media (max-width:1200px){ .map-eyebrow, .map-section h2{ margin-left: 0; } .map-section{ padding: 20px 32px 70px; } } @media (max-width:600px){ .map-section{ padding: 16px 18px 56px; } .map-frame{ height: 280px; } .map-section h2{ font-size: 28px; } } /* ============================================================ 7. PROJECT DETAIL PAGE (project.html / Project.html) ============================================================ */ /* Desktop/tablet: keep the horizontal scroll-jack gallery but let the fixed side paddings breathe on narrower laptop widths. */ @media (max-width:1200px) and (min-width:821px){ .hz-track{ padding: 110px 90px 70px; gap: 16px; } .panel-info{ width: 720px; padding: 0 40px 0 60px; } .panel-eyebrow{ left: -70px; } .panel-loc{ left: -70px; } } /* Below 820px the page already switches from the horizontal scroll-jack to a normal stacked layout (see the base <820px rule in Project.html). The block below neutralises the large inline top/margin offsets that were tuned only for the horizontal composition — left as-is they created huge empty gaps or overlapping text once stacked. */ @media (max-width:820px){ .hz-wrapper{ height:auto !important; } .hz-sticky{ position:relative !important; height:auto !important; overflow:visible !important; } .hz-track{ display:flex !important; flex-direction:column !important; padding:110px 20px 40px !important; transform:none !important; height:auto !important; } .panel-info{ width:100% !important; padding:0 !important; } .gallery-wrapper{ display:flex !important; flex-direction:column !important; gap:20px; width:100%; } .panel-img{ width:100% !important; height:auto !important; } .panel-img .art img{ width:100%; height:auto; display:block; } .panel-next{ width:100%; margin-top:40px; } } @media (max-width:560px){ .panel-info{ padding: -80px 10px 30px !important; } .panel-info p{ font-size: 16px; } .panel-meta{ grid-template-columns: 1fr 1fr !important; } .panel-img{ height: 36vh !important; } .panel-next-info{ padding: 40px 20px 24px !important; } .panel-next-img{ height: 40vh; } .open-project{ right: 20px; bottom: 18px; padding: 10px 16px; } #pTitle{ font-size:40px !important; line-height:1 !important; letter-spacing:-1px; } #pTitle{ font-size:40px !important; top: 5vh; line-height:1 !important; letter-spacing:-1px; } #pParagraphs{ font-size:40px !important; line-height:1 !important; letter-spacing:-1px; } .panel-info h1{ margin-bottom:-146px !important; } #pParagraphs{ margin-top:0 !important; } #pParagraphs p{ margin-top:0 !important; } #pParagraphs p:first-child{ margin-top:0 !important; } /* Move project details up */ .panel-meta{ margin-top:230px !important; padding-top:30px !important; gap:18px !important; } .project-spacepalette .panel-meta{ transform: translateY(-19px); } .project-akshaya .panel-meta{ transform: translateY(-19px); } .project-mohr .panel-meta{ transform: translateY(-19px); } .project-dfmc .panel-meta{ transform: translateY(-10px); } .gallery-wrapper{ display:flex; flex-direction:column; gap:24px; } .panel-img{ width:100%; aspect-ratio:4/3; overflow:hidden; margin:0; flex:none; } .panel-img .art{ width:100%; height:100%; display:flex; overflow:hidden; } .panel-img .art img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center center; } .panel-next-info{ padding-left:20px !important; /* content left move */ border-left:1px solid rgba(255, 255, 255, 0.144); } .panel-next::before{ display:none !important; } .panel-next-info h2{ margin-bottom:20px !important; } .btn-line{ top:0 !important; margin-bottom:54px !important; } .np-loc{ margin-top:0 !important; } .panel-next-img{ width:100% !important; max-width:340px !important; max-height:360px !important; /* Increase/decrease as needed */ margin:20px auto 0 !important; } .panel-next-img img{ width:100%; aspect-ratio:3 / 4; /* Nice mobile proportion */ object-fit:cover; display:block; } } /* =========================== Desktop Header Fix =========================== */ @media (min-width:992px){ header{ display:flex; align-items:center; justify-content:space-between; padding:10px 40px; } nav.mainnav{ width:clamp(520px, 45vw, 760px); margin:0 auto; justify-content:space-between; } nav.mainnav a{ margin-left:0 !important; } } /* ====================================== Desktop (Small Desktop / Laptop) ====================================== */ @media (min-width:992px) and (max-width:1600px){ .gallery-img:first-child{ width:clamp(480px, 38vw, 660px); } .gallery-img:last-child{ width:clamp(380px, 30vw, 560px); } .project-title{ font-size: clamp(48px, 4vw, 70px); } .project-bottom{ transform: scale(.92); transform-origin: left bottom; } } /* ====================================== About Page - Desktop Alignment ====================================== */ @media (min-width:1700px){ .about-hero{ max-width: 1200px; margin: 0 auto; padding-left: 60px; padding-right: 60px; } .story{ max-width: 900px; margin: 0 auto; } } /* ========================================== DESKTOP HEADER FIX (992px and above) ========================================== */ @media (min-width:992px){ header{ display:flex; align-items:center; } .logo{ flex:0 0 auto; } nav.mainnav{ flex:1; display:flex; justify-content:center; align-items:center; gap:240px; width:auto !important; margin:0 !important; transform:none !important; } nav.mainnav a{ margin:0 !important; } .nav-spacer{ width:70px; flex-shrink:0; } } /* ====================================== Contact Page - Map Heading Only ====================================== */ @media (min-width:992px) and (max-width:1700px){ .map-section .map-eyebrow, .map-section h2{ position: relative; left: -200px; /* Adjust this value */ } } /* ====================================== Project Detail - Move Meta Up ====================================== */ @media (min-width:992px) and (max-width:1700px){ .project-spacepalette .panel-meta{ transform: translateY(-100px); } } @media (min-width:992px) and (max-width:1700px){ .project-akshaya .panel-meta{ transform: translateY(-40px); } } @media (min-width:992px) and (max-width:1700px){ .project-dfmc .panel-meta{ transform: translateY(-100px); } } @media (min-width:992px) and (max-width:1700px){ .project-mohr .panel-meta{ transform: translateY(-20px); } } @media (min-width:992px) and (max-width:1700px){ .project-ncompass .panel-meta{ transform: translateY(-80px); } } @media (min-width:992px) and (max-width:1700px){ .project-spa .panel-meta{ transform: translateY(-85px); } } @media (min-width:992px) and (max-width:1700px){ .project-TVS .panel-meta{ transform: translateY(-75px); } } @media (min-width:992px) and (max-width:1700px){ .project-VRX360 .panel-meta{ transform: translateY(-75px); } } @media (min-width:992px) and (max-width:1700px){ .project-VRXTerrace .panel-meta{ transform: translateY(-75px); } } @media (min-width:992px) and (max-width:1700px){ .project-steelcase .panel-meta{ transform: translateY(-75px); } } /* ====================================== Project Detail - Next Project Section ====================================== */ @media (min-width:992px) and (max-width:1700px){ .panel-next-info{ position: relative; top: 70px; /* Adjust this value */ } } /* ====================================== Project Detail - Right Image Gap ====================================== */ @media (min-width:992px) and (max-width:1700px){ .panel-next-img{ width:calc(50vw - 70px) !important; margin-left: -50px; } } /* ====================================== About Page - Scroll To Top Button ====================================== */ @media (min-width:992px) and (max-width:1700px){ body:has(.about-hero) #scrollTopBtn{ right: 90px !important; } } /* =========================== Intro Video =========================== */ /* Desktop */ .desktop-video{ display:block; } .mobile-video{ display:none; } /* Mobile */ @media (max-width:860px){ .desktop-video{ display:none; } .mobile-video{ display:block; width:100%; height:100%; object-fit:cover; } }