/* ============================================================ PARTNER LOGO STRIP — Developer + portal partners Infinite white-mono marquee on a brand-coral band (no cards). Logos are pre-rendered silhouettes (assets/developers/mono/*.png), forced to white via filter so they read cleanly on the coral. The surrounding footer stays light/cream with dark text — only this logo band is coral, so the white logos have contrast. ============================================================ */ .partner-strip { /* Brand coral band — var(--mc-red) = #E07856, the exact accent used on the WhatsApp button + coral italic headlines. NOT var(--mc-black): that token is inverted to #FAFAF8 (light) on the Asia pages, which made the white logos vanish. Coral gives the white-mono logos a deliberate branded ground. */ background: var(--mc-red, #E07856); color: rgba(255,255,255,0.92); /* Inset, softly-rounded brand panel — reads as a deliberate "trusted developers" card lifted off the page so it eases between its neighbors instead of a scissor-cut stripe. Breathing room (margin) + soft shadow + radius do the blending; the marquee is clipped by the rounded corners. */ padding: clamp(48px, 6vw, 78px) 0 clamp(44px, 5vw, 70px); margin: clamp(30px, 4vw, 56px) clamp(20px, 3.5vw, 56px); border-radius: clamp(28px, 3vw, 44px); box-shadow: 0 30px 70px -30px rgba(176,74,42,0.42), 0 12px 30px -18px rgba(0,0,0,0.20); position: relative; /* contain the band's internal stacking so it can never compete with the portaled language dropdown (which sits at --z-language-sheet on ). */ isolation: isolate; overflow: hidden; } .partner-strip::before { content: ''; position: absolute; inset: 0; /* soft top sheen for depth on the flat coral */ background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.12), 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; /* soft edge fade so logos dissolve at the boundaries */ -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; /* margin (not gap) per logo so a -50% shift lands seamlessly on the duplicate set */ 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; height: clamp(44px, 4vw, 56px); margin-right: clamp(44px, 5vw, 76px); transition: transform 0.3s ease; } .partner-logo img { width: auto; height: auto; max-height: clamp(26px, 2.6vw, 36px); max-width: clamp(110px, 12vw, 160px); object-fit: contain; /* near-black silhouettes -> pure white, reading on the coral band */ 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); } /* ── Seamless variant (homepage) ────────────────────────────────────────── On the homepage the strip sits between dark sections (section.mc-contact #0A0A0A above, footer.mc-footer #050810 below), where the coral card breaks the flow. This variant makes it a continuous dark band: a gradient that dissolves into the black section above and the navy footer below — no margin, no radius, no shadow, no cream gap, no coral fill. White logos read on dark; coral stays only as a small eyebrow accent. Scoped by class, so the coral card treatment on every other page is untouched. */ .partner-strip.partner-strip--seamless { background: linear-gradient(180deg, #0A0A0A 0%, #050810 100%); margin: 0; border-radius: 0; box-shadow: none; } .partner-strip--seamless::before { background: none; } .partner-strip--seamless .partner-eyebrow { color: rgba(245,237,224,0.60); } .partner-strip--seamless .partner-eyebrow em { color: var(--mc-red); } .partner-strip--seamless .partner-eyebrow::before, .partner-strip--seamless .partner-eyebrow::after { background: rgba(245,237,224,0.16); } /* 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) { /* Full-bleed on mobile: the accent band touches both screen edges with squared corners (no margin/radius/shadow). Coral/red fill is retained; the eyebrow + logos stay inset because they live in .mc-container, which keeps its own horizontal padding. Shared rule → applies on all 70 pages. */ .partner-strip { padding: 32px 0 30px; margin: 0; border-radius: 0; box-shadow: none; } .partner-logo { height: 40px; margin-right: clamp(32px, 8vw, 48px); } .partner-logo img { max-height: 24px; } } /* ============================================================ 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; } }