/* ============================================================ Responsive — breakpoints (loaded last so it wins the cascade) ============================================================ */ /* ---- Nav collapses to a slide-in panel ---- */ /* Desktop: the shell is transparent to layout — the nav lays out inline in the header. */ .nav-shell { display: contents; } @media (max-width: 1080px) { /* A fixed, viewport-sized clip box. Because it's a normal positioned element (not the root ), its overflow:hidden reliably clips the off-screen drawer on every browser — including mobile Safari, where html/body overflow-x cannot clip a position:fixed panel. This is what kills the phantom horizontal scroll caused by the parked-off-screen menu. */ .nav-shell { display: block; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 120; } .site-nav { position: absolute; inset: 0 0 0 auto; width: min(86vw, 360px); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; background: #fff; box-shadow: -20px 0 60px rgba(0, 0, 0, .16); padding: calc(var(--header-h) + 1rem) 1.6rem 2rem; transform: translateX(100%); transition: transform .4s var(--ease); overflow-y: auto; pointer-events: auto; } body.nav-open .site-nav { transform: none; } body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(15, 22, 16, .42); z-index: 110; } .site-nav__list { flex-direction: column; align-items: stretch; gap: .1rem; width: 100%; } .site-nav__link { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; } .site-nav__link::after { display: none; } .site-nav__cta { display: inline-flex; margin-top: 1.3rem; } .header-cta { display: none; } /* The toggle stays above the open drawer so it remains tappable and flips to a close (×). */ .nav-toggle { display: inline-flex; position: relative; z-index: 130; } .nav-toggle__close { display: none; } body.nav-open .nav-toggle__open { display: none; } body.nav-open .nav-toggle__close { display: inline-flex; } /* Lift the header's whole stacking context above the dim overlay (z 110) so the drawer — which lives inside the header — actually shows instead of hiding behind it. */ body.nav-open .site-header { z-index: 130; } } /* ---- Hero stacks ---- */ @media (max-width: 920px) { .hero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2.25rem; min-height: 0; } .hero__content { max-width: none; } .hero__form { justify-content: flex-start; } .lead-form { max-width: 460px; } /* Apartment showcase image — gives the stacked mobile hero a strong visual instead of a wall of text. Only fetched here (background set inside the query). */ .hero__photo { display: block; margin-bottom: 2.1rem; aspect-ratio: 16 / 10; border-radius: var(--r-card); background: url("../glimpse1.png") center / cover no-repeat var(--brand-100); box-shadow: var(--sh-card); } } /* ---- Phones ---- */ @media (max-width: 560px) { :root { --header-h: 70px; } /* Compact brand so the menu button always fits */ .brand__logo { height: 20px; } .brand__sep, .brand__project { display: none; } /* Keep the headline on the screen */ .hero__title { font-size: clamp(1.95rem, 6.4vw, 2.4rem); letter-spacing: -0.01em; } .hero__overlay { background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .92) 52%, rgba(255, 255, 255, .80) 76%, rgba(255, 255, 255, .66) 100%); } .hero__bg { background-position: center bottom; } .hero__stats { gap: 1.1rem 0; } .stat { flex: 1 1 42%; padding: 0 1rem 0 0; } .stat:not(:last-child) { border-right: 0; } .stat:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 1rem; } .hero__price { width: 100%; } .price-card { width: 100%; } .lead-form { max-width: none; padding: 1.4rem 1.2rem 1.2rem; } .btn { padding: .8rem 1.3rem; } } /* ---- Reduce hero height on short landscape screens ---- */ @media (max-height: 680px) and (min-width: 921px) { .hero__inner { min-height: 0; } } /* ---- Project Highlights (2 rows of 5 -> 2 columns on small screens) ---- */ @media (max-width: 820px) { .highlights__grid { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; } .highlight { border-right: 1px solid var(--line) !important; } .highlight:nth-child(2n) { border-right: 0 !important; } } /* ---- Amenities ---- */ @media (max-width: 880px) { .amenities__inner { grid-template-columns: 1fr; gap: 2rem; } .amenities__media img { height: auto; aspect-ratio: 16 / 10; } .amenities__content { max-width: 640px; } } @media (max-width: 480px) { .amenity-grid { grid-template-columns: repeat(2, 1fr); gap: 1.3rem 1rem; } } /* ---- Spacious Homes / Floor Plans ---- */ @media (max-width: 768px) { .fp-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } } /* ---- EMI Calculator ---- */ @media (max-width: 880px) { .emi__inner { grid-template-columns: 1fr; } } @media (max-width: 560px) { .emi__result-grid { grid-template-columns: 1fr; } .emi__chart { justify-self: start; } .emi-input input { width: 6rem; } } /* ---- FAQ ---- */ @media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; max-width: 720px; } } /* ---- Brochure lead band ---- */ @media (max-width: 880px) { .brochure__inner { grid-template-columns: 1fr; gap: 1.5rem; } } @media (max-width: 560px) { .brochure-form__row { flex-direction: column; } .brochure-form__submit { width: 100%; justify-content: center; } } /* ---- Gallery ---- */ @media (max-width: 880px) { .gallery__inner { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; } } @media (max-width: 560px) { .gallery .swiper-slide { width: 80%; } .glimpse-card img { height: 300px; } .gallery__nav { display: none; } } /* ---- Distance from Key Places ---- */ @media (max-width: 880px) { .location__inner { grid-template-columns: 1fr; } .location__map, .location__map iframe { min-height: 300px; } } /* ---- About the Developer ---- */ @media (max-width: 880px) { .about__inner { grid-template-columns: 1fr; gap: 2.25rem; } } @media (max-width: 420px) { .about__stats { grid-template-columns: 1fr; } }