/* Full-device responsive fixes for Emaar landing page */ /* "Optima-400" (used inline everywhere for headings) is declared via @font-face pointing at properties.emaar.com/.../Optima-Regular.ttf — that domain now 301-redirects to emaar.com's homepage, so the font file never actually loads, on any device. Desktop happened to fall back to the browser's own default (Times New Roman-ish on Windows Chrome), which looked fine by luck; mobile's default fallback looks plain/generic instead. Force a consistent, good-looking fallback chain everywhere via an attribute selector (targets the inline style="...font-family: Optima-400..." elements directly). */ [style*="Optima-400"] { font-family: "Optima-400", Georgia, "Times New Roman", serif !important; } /* "Lato" (body text) was meant to be injected by Unbounce's own script (window.ub.page.webFonts) — that script isn't part of the clone, so Lato never loaded either. Now loaded for real via Google Fonts (see the added in index.html's ). */ /* Use clip (not hidden) so overflow-y stays visible — overflow-x:hidden forces overflow-y to auto and collapses document scrollHeight to the viewport. */ html, body { overflow-x: clip; max-width: 100vw; margin: 0; padding: 0; } body.lp-pom-body { min-height: 100vh; } /* Pricing headings — flat lining figures (Optima old-style 3/4/5 hang below baseline) */ #lp-pom-text-154 h2, #lp-pom-text-154 h2 span, #lp-pom-text-116 h2, #lp-pom-text-116 h2 span { font-family: Lato, sans-serif !important; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "onum" 0; } /* ---- Mobile (phones + iPad/tablet) — match Unbounce native 320px canvas ---- Official site: .lp-positioned-content { left:50%; width:320px; margin-left:-160px } Do NOT scale #lp-pom-root — that breaks scrollHeight and left:50% math. Hero video full-bleed comes from resizeVideo() (width=100vw, left=-offset). */ @media screen and (max-width: 1024px) { #lp-pom-root { min-width: 0 !important; width: auto !important; max-width: 100% !important; margin: 0 auto !important; overflow: visible !important; transform: none !important; -webkit-transform: none !important; } #lp-pom-root .lp-positioned-content { position: absolute !important; left: 50% !important; top: 0 !important; width: 320px !important; margin-left: -160px !important; transform: none !important; -webkit-transform: none !important; } #lp-pom-root-color-overlay { width: 100% !important; } /* Section headings — prevent clip/overflow */ #lp-pom-text-16 { left: 0 !important; width: 320px !important; height: auto !important; min-height: 84px !important; transform: none !important; -webkit-transform: none !important; padding: 0 12px !important; box-sizing: border-box !important; } #lp-pom-text-16 h2, #lp-pom-text-16 h2 span { font-size: 28px !important; line-height: 1.2 !important; white-space: normal !important; } #lp-pom-text-191 h2 span, #lp-pom-text-119 h2 span, #lp-pom-text-86 h2 span, #lp-pom-text-88 h2 span { font-size: 28px !important; line-height: 1.2 !important; } #lp-pom-text-154 { left: 0 !important; width: 320px !important; height: auto !important; min-height: 100px !important; padding: 0 10px !important; box-sizing: border-box !important; } #lp-pom-text-154 h2, #lp-pom-text-154 h2 span { font-size: 20px !important; line-height: 1.4 !important; white-space: normal !important; } /* Flow blocks paint as siblings of .lp-positioned-content (z-index:1). Keep card-section white block transparent so it can't flash over cards. */ #lp-pom-block-15 { background: transparent !important; margin-bottom: 0 !important; } /* * Communities gray must end at the Why Invest Dubai heading (5802), * not 48px below it. Default height 548 ended at 5850 and left the * heading split across gray/white (and its solid white box cut a * notch into the gray). Shorten gray → white starts under the title. */ #lp-pom-block-185 { background: rgba(242, 244, 248, 1) !important; height: 500px !important; /* 5302 + 500 = 5802 */ } #lp-pom-box-179 { background: transparent !important; } #lp-pom-box-179-color-overlay { background: none !important; } #lp-pom-text-16, #lp-pom-box-17, #lp-pom-box-30, #lp-pom-box-41, #lp-pom-box-52, #lp-pom-box-63, #lp-pom-box-74, #lp-pom-box-500, #lp-pom-box-520 { z-index: 50 !important; pointer-events: auto !important; } #lp-pom-text-16 { z-index: 51 !important; } /* * Why Invest in Emaar navy band is a sibling of .lp-positioned-content. * That content wrapper is z-index:1, so any z-index > 1 on the band * covers ALL stats/text inside the wrapper. Keep the band at z-index:0. */ #lp-pom-block-118 { z-index: 0 !important; } /* Gold figures + white labels on navy (match original Unbounce colors) */ #lp-pom-text-119 h2, #lp-pom-text-119 h2 span { color: #ffffff !important; } #lp-pom-text-123 span, #lp-pom-text-130 span, #lp-pom-text-136 span, #lp-pom-text-142 span { color: #ceab6e !important; } #lp-pom-text-124, #lp-pom-text-124 span, #lp-pom-text-131, #lp-pom-text-131 span, #lp-pom-text-137, #lp-pom-text-137 span, #lp-pom-text-143, #lp-pom-text-143 span { color: #ffffff !important; } /* Hide desktop Request a Call — overlaps EMAAR logo on mobile */ #lp-pom-button-105, #lp-pom-button-117 { display: none !important; visibility: hidden !important; pointer-events: none !important; } } /* ---- Desktop / PC — keep section heading on one line ---- */ @media screen and (min-width: 1025px) { #lp-pom-text-16 { left: 0 !important; width: 1180px !important; height: auto !important; text-align: center !important; } #lp-pom-text-16 h2, #lp-pom-text-16 h2 span { white-space: nowrap !important; } } /* ---- Tablet (iPad, small laptops) ---- */ @media screen and (min-width: 1025px) and (max-width: 1179px) { #lp-pom-scaler { width: 100%; max-width: 100vw; margin: 0 auto; overflow: hidden; } #lp-pom-root { min-width: 0 !important; width: 1180px !important; margin-left: auto !important; margin-right: auto !important; overflow: visible !important; transform-origin: top center !important; } #lp-pom-root .lp-positioned-content { margin-left: 0 !important; left: 0 !important; width: 1180px !important; transform: none !important; } #lp-pom-root.is-tablet-scaled .full-border { width: 100% !important; left: 0 !important; position: absolute !important; } .Communities_slider, .Communities_slider .swiper-wrapper { height: 480px !important; } .Communities_slider .bottom-section { width: 160px !important; height: 160px !important; } .Communities_slider .bottom-section img { width: 88px !important; height: 82px !important; } .scroller-container { height: 520px !important; } } /* ---- Large desktop ---- */ @media screen and (min-width: 1180px) { #lp-pom-root { min-width: 1180px !important; max-width: 100% !important; margin: 0 auto !important; transform: none !important; } #lp-pom-root .lp-positioned-content { margin-left: -590px !important; left: 50% !important; width: 1180px !important; } } /* Sticky CTA — phones + tablets */ @media screen and (max-width: 1024px) { .m-sticky-btn { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; width: 100% !important; max-width: 100vw !important; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15); } .m-sticky-btn #lp-pom-button-183 { display: block !important; left: 50% !important; transform: translateX(-50%) !important; } body.no-scroll { overflow: hidden !important; } } /* Map scroll — phones + iPad/tablet (mobile layout) */ @media screen and (max-width: 1024px) { .scroll-map-container, .scroller-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none !important; -ms-overflow-style: none !important; } .scroll-map-container::-webkit-scrollbar, .scroller-container::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } } /* Touch-friendly tap targets */ @media (hover: none) and (pointer: coarse) { .lp-pom-button, .mobile-popup, .pro-form { min-height: 44px; } } /* Hide reCAPTCHA badge/iframe (local clone — no captcha) */ .grecaptcha-badge, #recaptcha, iframe[title="reCAPTCHA"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* #page-loader (inside lp-code-216) was meant to be removed by the live site's JS once the real page finished loading. That JS doesn't exist here, so it sits permanently, rendering as a stray white box wherever its containing block happens to land — showing up as blank gaps. */ #page-loader { display: none !important; visibility: hidden !important; } /* Pricing heading helpers (desktop text-116 may still use these classes elsewhere) */ #lp-pom-text-116 h2 { overflow: visible; } #lp-pom-text-116 .price-currencies { display: inline-block; white-space: nowrap; } /* Contact footer — replaces EMAAR FOOTPRINT heading only. Map is restored below privacy/terms via map-restore.css. */ #lp-pom-text-86, #lp-pom-block-85 { display: none !important; visibility: hidden !important; } #cc-footer.cc-footer { position: absolute !important; top: 4997px !important; left: 50% !important; width: 100vw !important; margin-left: -50vw !important; display: block !important; z-index: 10 !important; } @media screen and (max-width: 1024px) { #cc-footer.cc-footer { padding-bottom: 96px !important; box-sizing: border-box !important; } } #lp-pom-text-116 .price-payment-plan { display: inline-block; }