/* ============================================================ PARTNER LOGO STRIP (DUBAI) - Developer + portal partners. Dubai pages are DARK, so the band's SURROUND must be the exact dark of its neighbours, not the light surround used on Asia. The section above (off-market CTA) is #0A0A0A and the footer below is #050810; the surround is a top-to-bottom gradient between those two so the three sections read as one unbroken dark field with zero seam at either boundary. The red rounded panel floats inset within it. Logos are pre-rendered silhouettes (assets/developers/mono/*.png), forced to white so they read cleanly on the red panel. ============================================================ */ /* Dark full-bleed surround: matches the neighbours exactly (no white strip, no tonal step). Padding here is the inset that frames the red panel. */ .partner-strip { background: linear-gradient(180deg, #0A0A0A 0%, #050810 100%); color: rgba(255,255,255,0.92); padding: clamp(30px, 4vw, 56px) clamp(20px, 3.5vw, 56px); position: relative; /* contain internal stacking so it never competes with the portaled language dropdown (--z-language-sheet on ). */ isolation: isolate; } /* The red rounded panel - on the inner container so the dark surround paints the full-bleed field and the panel sits inset within it (matches the Asia inset, radius, and breathing room). */ .partner-strip > .mc-container { position: relative; z-index: 1; max-width: none; margin: 0; background: #C41E3A; /* Dubai red (per-market accent), unchanged */ border-radius: clamp(28px, 3vw, 44px); padding: clamp(48px, 6vw, 78px) clamp(22px, 4vw, 56px) clamp(44px, 5vw, 70px); overflow: hidden; /* clip the marquee to the rounded corners */ /* Lift tuned for a DARK field: a soft red glow reads as elevation against the near-black surround, with a faint ambient, and no hard halo or box edge. */ box-shadow: 0 34px 80px -34px rgba(196,30,58,0.55), 0 10px 30px -16px rgba(0,0,0,0.50); } /* soft top sheen for depth on the flat red, kept behind the content */ .partner-strip > .mc-container::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.10), transparent 62%); pointer-events: none; } .partner-strip > .mc-container > * { position: relative; z-index: 1; } .partner-strip .partner-eyebrow { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: clamp(26px, 3vw, 40px); font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.85); } .partner-strip .partner-eyebrow em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 14px; font-weight: 400; letter-spacing: -0.005em; text-transform: none; color: #fff; } .partner-strip .partner-eyebrow::before, .partner-strip .partner-eyebrow::after { content: ''; flex: 1; max-width: 80px; height: 1px; background: rgba(255,255,255,0.30); } /* Infinite marquee */ .partner-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); } .partner-track { display: flex; align-items: center; width: max-content; animation: partner-scroll 40s linear infinite; will-change: transform; } .partner-marquee:hover .partner-track { animation-play-state: paused; } @keyframes partner-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .partner-logo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; /* ONE shared bounding box for every mark: identical width + height so a wide wordmark (EMAAR, OMNIYAT) and a compact mark (Aldar, Nakheel) occupy the same bounds and the gap between them is uniform. */ width: clamp(124px, 13vw, 148px); height: clamp(46px, 4vw, 56px); margin-right: clamp(20px, 2.6vw, 36px); transition: transform 0.3s ease; } .partner-logo img { width: auto; height: auto; /* scale-to-fit inside the shared box: capped by the box width AND a shared height, so nothing dominates and nothing shrinks to a sliver. */ max-width: 100%; max-height: clamp(26px, 2.7vw, 34px); object-fit: contain; /* near-black silhouettes -> pure white, reading on the red panel */ filter: brightness(0) invert(1); opacity: 0.9; transition: opacity 0.3s ease, transform 0.3s ease; } .partner-logo:hover img { opacity: 1; transform: translateY(-2px); } /* Accessibility: freeze into a static, evenly-spaced row (hide the duplicate set) */ @media (prefers-reduced-motion: reduce) { .partner-marquee { -webkit-mask-image: none; mask-image: none; } .partner-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; row-gap: clamp(22px, 3vw, 36px); } .partner-track > .partner-logo[aria-hidden="true"] { display: none; } } @media (max-width: 768px) { .partner-strip { padding: 28px 14px 30px; } .partner-logo { width: clamp(96px, 26vw, 120px); height: 40px; margin-right: clamp(14px, 5vw, 26px); } .partner-logo img { max-height: 22px; max-width: 100%; } } /* ============================================================ FEATURED LISTINGS skeleton - hide the static fallback cards until the live PropSpace data renders (featured-listings.js adds .cgc-loaded), so the old placeholder images never flash on refresh. ============================================================ */ .mc-featured .mc-listing-grid:not(.cgc-loaded) .mc-card { background: #14110D; } .mc-featured .mc-listing-grid:not(.cgc-loaded) .mc-card img { visibility: hidden; } .mc-featured .mc-listing-grid:not(.cgc-loaded) .mc-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 70%); background-size: 200% 100%; animation: cgc-shimmer 1.4s ease-in-out infinite; } @keyframes cgc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }