/** * Innovation Infra — Global Responsive (Mobile / Tablet / Desktop) * Load LAST in — overrides property.css & custom-sections */ /* ── Base: no horizontal scroll ── */ html { -webkit-text-size-adjust: 100%; } html, body { overflow-x: hidden !important; max-width: 100vw; width: 100%; } *, *::before, *::after { box-sizing: border-box; } img, video, iframe, embed, svg { max-width: 100%; height: auto; } table { max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } main#main, main { width: 100%; max-width: 100vw; overflow-x: hidden; } /* ── Containers ── */ .container, .container-lg, .container-fluid { width: 100% !important; max-width: 100% !important; margin-left: auto; margin-right: auto; padding-left: 15px !important; padding-right: 15px !important; } @media (min-width: 992px) { .container-lg { max-width: 1200px; } } /* ── Main layout (custom sections pages) ── */ .main-wrapper-flex { max-width: 100% !important; width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; gap: 20px !important; } @media (max-width: 1024px) { .main-wrapper-flex { flex-direction: column !important; } .main-content-left { max-height: none !important; overflow-y: visible !important; padding-right: 0 !important; width: 100% !important; } .sticky-sidebar-right { width: 100% !important; max-width: 100% !important; position: relative !important; top: 0 !important; max-height: none !important; overflow: visible !important; overflow-x: hidden !important; overscroll-behavior: auto !important; touch-action: pan-y !important; } } /* ── Hero banner ── */ .property-detail-banner { width: 100%; max-width: 100vw; overflow: hidden; } .property-detail-banner .bg, .hero-slider-container, .hero-swiper { width: 100% !important; max-width: 100% !important; } .property-detail-banner.hero-scroll-priority .bg { height: 100% !important; min-height: 100% !important; max-height: 100% !important; } .property-detail-banner .banner-wrapper { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; left: 0 !important; right: 0 !important; } .property-detail-banner .banner-wrapper .container { max-width: 100% !important; padding: 0 !important; } .property-detail-banner .flex { flex-wrap: wrap; } /* Mobile hero — no gap under image (see custom-sections.css) */ @media (max-width: 540px) { .property-detail-banner .banner-wrapper .content h1, .property-detail-banner .banner-wrapper h1 { display: none !important; } } @media (min-width: 541px) { .nav-strip-wrap .on-mobile { display: none !important; } } /* ── Nav strip (blue bar) ── */ .nav-strip2 { width: 100% !important; max-width: 100vw !important; overflow: hidden; } .nav-strip2 .container { width: 100% !important; max-width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; } @media (max-width: 991px) { .nav-strip-wrap { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; padding: 16px 0 !important; text-align: left !important; justify-content: flex-start !important; } .config-dtl { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; flex-direction: unset !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 12px 16px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .config-dtl li { width: 100% !important; min-width: 0 !important; } .nav-strip-wrap .card { width: 100% !important; margin: 0 !important; } .nav-strip-wrap .btn-wrap { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 10px !important; width: 100% !important; } .nav-strip-wrap .btn, .nav-strip-wrap .btn-wrap .btn { width: 100% !important; max-width: 100% !important; justify-content: center !important; box-sizing: border-box !important; } } @media (max-width: 675px) { .config-dtl { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } @media (max-width: 420px) { .config-dtl { grid-template-columns: 1fr !important; } } @media (max-width: 540px) { .nav-strip-wrap .on-mobile { display: block !important; width: 100%; } .nav-strip-wrap .on-mobile h1 { font-size: 1.1rem !important; line-height: 1.3 !important; } } /* ── Property content sections ── */ .prop-dtl-secB, .prop-dtl-secG, .prop-dtl-secz, .prop-dtl-secy, .prop-dtl-secI, section { max-width: 100%; overflow-x: hidden; } .prop-dtl-secB .prop-dtl-secB-bg { width: 100% !important; max-width: 100% !important; padding: 15px !important; box-sizing: border-box; } .prop-dtl-secB .content { max-width: 100% !important; word-wrap: break-word; overflow-wrap: break-word; } .prop-dtl-secG iframe { width: 100% !important; max-width: 100% !important; min-height: 250px; height: 50vw; max-height: 400px; } .prop-dtl-secz img { width: 100% !important; height: auto !important; } /* ── Floor plans ── */ @media (min-width: 992px) { .fpContainer .row.gap-row { flex-wrap: wrap !important; overflow-x: visible !important; justify-content: center; } .fpBox { flex: 0 0 calc(33.333% - 18px) !important; max-width: calc(33.333% - 18px) !important; } .fp-scroll-wrap { padding: 0 !important; } .fp-scroll-btn { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .fpContainer .row.gap-row { flex-wrap: wrap !important; overflow-x: visible !important; justify-content: center; } .fpBox { flex: 0 0 calc(50% - 12px) !important; max-width: calc(50% - 12px) !important; } } @media (max-width: 767px) { .fpContainer .row.gap-row { padding-left: 8px; padding-right: 8px; } .fpBox { flex: 0 0 88% !important; max-width: 88% !important; } } /* ── Location ── */ @media (max-width: 991px) { .location-grid-layout { grid-template-columns: 1fr !important; } .section-faqs .faq-layout { flex-direction: column !important; } .section-faqs .faq-intro-panel, .section-faqs .faq-accordion-panel { flex: none !important; width: 100% !important; } } /* Walkthrough mobile — see custom-sections.css */ /* ── About / headings ── */ @media (max-width: 767px) { .about-project-section .section-title, .section-floorplan h2, .section-location .heading h2, .section-faqs .faq-section-head h2 { font-size: 1.4rem !important; } .gradient-list { grid-template-columns: 1fr !important; } .project-flex-wrapper { flex-direction: column !important; } } /* ── Sidebar panels — tablet: partial width; mobile: full screen ── */ @media (min-width: 769px) and (max-width: 1024px) { .custom-sidebar-panel { width: min(92vw, 420px) !important; max-width: 420px !important; transform: translateX(105%) !important; } #project-details-sidebar:target, #walkthrough-sidebar-panel:target { transform: translateX(0) !important; } } @media (max-width: 768px) { .custom-sidebar-panel { left: 0 !important; right: 0 !important; top: 0 !important; width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; transform: translateX(105%) !important; transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) !important; border-left: none !important; border-top: 4px solid #27ae60; box-shadow: none !important; box-sizing: border-box; } #project-details-sidebar:target, #walkthrough-sidebar-panel:target { inset: 0 !important; width: 100vw !important; max-width: 100vw !important; transform: translateX(0) !important; } body:has(#project-details-sidebar:target) .sidebar-backdrop, body:has(#walkthrough-sidebar-panel:target) .sidebar-backdrop, body:has(.enquire-pop.is-open) .sidebar-backdrop { background: transparent !important; opacity: 1 !important; pointer-events: auto !important; } .custom-sidebar-panel .sidebar-footer { padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important; } } /* ── Swiper ── */ .swiper, .swiper-wrapper { max-width: 100%; } /* ── Footer ── */ footer, .footer { max-width: 100vw; overflow-x: hidden; } /* ── Buttons touch targets ── */ @media (max-width: 767px) { .button, .btn, button.btn { min-height: 44px; } }