/* Listing portal layout — Stacker-inspired client-portal feel for property pages. Applied when . Keeps brand fonts/colors; changes composition. */ body.listing-portal{ --portal-accent:#2E6F8E; --portal-accent-hover:#255A74; --portal-surface:#f4f6f8; --portal-chip:#eef1f4; --portal-radius:12px; background:var(--portal-surface); } /* Mosaic first, intro second — no FOUC wait on JS reorder */ body.listing-portal #main-content{ display:flex; flex-direction:column; } body.listing-portal #main-content > .gallery-sec, body.listing-portal #main-content > #gallery{ order:-2; } body.listing-portal #main-content > .lst-hero, body.listing-portal #main-content > .hero{ order:-1; } /* ---- Mosaic gallery (Airbnb / portal style) ---- */ body.listing-portal .gallery-sec, body.listing-portal section.sec.gallery-sec{ max-width:1320px; margin:0 auto; padding:calc(var(--nav-h,72px) + 20px) clamp(20px,4vw,56px) 8px; background:transparent; } body.listing-portal .gallery-kicker, body.listing-portal .gallery-sec > .kicker, body.listing-portal .gallery-sec > h2, body.listing-portal .gallery-sec .sec-wrap > .kicker, body.listing-portal .gallery-sec .sec-wrap > h2{ display:none; } body.listing-portal .gallery-sec .sec-wrap{ max-width:none; margin:0; padding:0; } body.listing-portal .gallery, body.listing-portal #gallery-grid.gallery, body.listing-portal #gallery-grid{ display:grid; grid-template-columns:1.65fr 1fr; /* 3 rows so large lead + 3 side tiles (incl. Show all) fill the mosaic. A 2-row grid with row-span on the lead left the 4th tile in an implicit row and collapsed the fr tracks — only the Show-all bedroom was visible. */ grid-template-rows:1fr 1fr 1fr; grid-auto-rows:0; gap:8px; height:min(52vh,480px); min-height:280px; border-radius:var(--portal-radius); overflow:hidden; background:transparent; } body.listing-portal .gallery button, body.listing-portal #gallery-grid button{ position:relative; padding:0; border:none; cursor:pointer; background:#d8dde3; border-radius:0; overflow:hidden; aspect-ratio:auto; display:block; min-height:0; min-width:0; animation:portalFade .55s ease both; } body.listing-portal .gallery button:first-child, body.listing-portal #gallery-grid button:first-child{ grid-row:1 / span 3; animation-delay:.04s; } body.listing-portal .gallery button:nth-child(2){animation-delay:.1s} body.listing-portal .gallery button:nth-child(3){animation-delay:.16s} body.listing-portal .gallery button:nth-child(4){animation-delay:.22s} body.listing-portal .gallery button:nth-child(n+5), body.listing-portal #gallery-grid button:nth-child(n+5){ display:none; } body.listing-portal .gallery img, body.listing-portal #gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease,filter .3s ease; } body.listing-portal .gallery button:hover img, body.listing-portal #gallery-grid button:hover img{ transform:scale(1.04); } body.listing-portal .gallery button .gtag{z-index:2} body.listing-portal .portal-show-all{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(20,30,40,.48); color:#fff; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:none; backdrop-filter:blur(1px); transition:background .2s; } body.listing-portal .gallery button:hover .portal-show-all{ background:rgba(20,30,40,.58); } body.listing-portal .gallery-mls, body.listing-portal .gallery-disclosure{ margin-top:14px; font-size:12px; } body.listing-portal .gallery-disclosure{margin-bottom:0} @keyframes portalFade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } /* ---- Hero → light portal intro ---- */ body.listing-portal .lst-hero, body.listing-portal section.hero{ min-height:0!important; background:#fff!important; background-image:none!important; padding:28px clamp(20px,4vw,56px) 8px!important; align-items:flex-start!important; display:block!important; overflow:visible!important; position:relative; max-width:1320px; margin:0 auto; border-radius:var(--portal-radius); box-shadow:0 1px 0 rgba(35,55,70,.04); } body.listing-portal .lst-hero::before, body.listing-portal .lst-hero::after, body.listing-portal section.hero::after{ display:none!important; } body.listing-portal .lst-hero-img, body.listing-portal .hero-img, body.listing-portal .lst-hero > picture, body.listing-portal section.hero > picture{ display:none!important; } body.listing-portal .lst-hero-inner, body.listing-portal .hero-inner{ position:relative; z-index:2; max-width:none; width:100%; margin:0; padding:8px 4px 4px!important; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px); gap:clamp(28px,4vw,48px); align-items:start; } body.listing-portal .lst-status, body.listing-portal .hero-status{ background:var(--portal-chip); border:none; color:var(--navy); border-radius:999px; margin-bottom:14px; } body.listing-portal .lst-status .dot, body.listing-portal .hero-status .dot{background:var(--portal-accent)} body.listing-portal .lst-hero h1, body.listing-portal section.hero h1{ color:var(--navy)!important; font-size:clamp(2rem,4vw,2.85rem)!important; margin-bottom:6px; letter-spacing:-.02em; } body.listing-portal .lst-hero-loc, body.listing-portal .hero-loc, body.listing-portal .lst-hero-tag{ color:var(--muted)!important; margin-bottom:14px; } body.listing-portal .lst-hero-tag{ font-style:normal!important; font-family:'DM Sans',sans-serif!important; font-size:15px!important; font-weight:300!important; line-height:1.7!important; max-width:56ch; } body.listing-portal .lst-hero-price, body.listing-portal .hero-price, body.listing-portal .hero-rent{ display:none!important; } /* Assumable / highlight callout → soft chip (not dark navy banner) */ body.listing-portal .hero-assume, body.listing-portal .lst-hero .hero-assume, body.listing-portal .portal-assume{ display:inline-flex!important; align-items:center; gap:8px; background:#eef5f8!important; border:1px solid rgba(46,111,142,.22)!important; border-radius:10px!important; padding:10px 14px!important; margin:0 0 16px!important; font-size:13.5px!important; color:var(--navy)!important; max-width:40rem; } body.listing-portal .hero-assume svg, body.listing-portal .portal-assume svg{color:var(--portal-accent)!important;flex-shrink:0} body.listing-portal .hero-assume b, body.listing-portal .portal-assume b{color:var(--navy)!important;font-weight:600} body.listing-portal .hero-assume a, body.listing-portal .portal-assume a{color:var(--portal-accent)!important;border-bottom:1px solid currentColor} /* Stats → soft chips */ body.listing-portal .lst-hero-stats, body.listing-portal .hero-stats{ display:flex!important; flex-wrap:wrap; gap:10px; border:none!important; background:transparent!important; backdrop-filter:none!important; max-width:none!important; margin:18px 0 22px!important; overflow:visible!important; border-radius:0!important; } body.listing-portal .lst-stat, body.listing-portal .hero-stat{ flex:0 0 auto; min-width:0; padding:12px 16px; border:none!important; border-right:none!important; background:var(--portal-chip); border-radius:10px; display:flex; align-items:center; gap:10px; } body.listing-portal .lst-stat .n, body.listing-portal .hero-stat .n{ font-family:'DM Sans',sans-serif!important; font-size:14px!important; font-weight:600!important; color:var(--navy)!important; line-height:1.2; } body.listing-portal .lst-stat .l, body.listing-portal .hero-stat .l{ font-size:12px!important; font-weight:400!important; letter-spacing:0!important; text-transform:none!important; color:var(--muted)!important; margin-top:0!important; } body.listing-portal .lst-hero-ctas, body.listing-portal .hero-ctas{ display:none!important; } /* Portal sticky summary card — price + full facts + agent + CTAs */ body.listing-portal .portal-summary{ background:#fff; border:1px solid var(--border); border-radius:var(--portal-radius); padding:24px 22px 20px; position:sticky; top:92px; max-height:calc(100vh - 110px); overflow:auto; animation:portalFade .55s ease .12s both; scrollbar-width:thin; } body.listing-portal .portal-summary-price{ font-family:'Cormorant Garamond','Cormorant Fallback',serif; font-size:2.05rem; font-weight:400; color:var(--navy); line-height:1; margin:0 0 4px; } body.listing-portal .portal-summary-meta{ font-size:13px; color:var(--muted); margin:0 0 8px; line-height:1.45; } body.listing-portal .portal-summary-meta b{ color:var(--navy); font-weight:500; } body.listing-portal .portal-mls{ font-size:12px; margin:0 0 14px; } body.listing-portal .portal-mls a{ color:var(--portal-accent); border-bottom:1px solid rgba(46,111,142,.35); } body.listing-portal .portal-facts{ display:flex; flex-direction:column; gap:0; margin:0 0 12px; padding:4px 0 2px; border-top:1px solid var(--border); } body.listing-portal .portal-fact{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid rgba(230,223,212,.75); font-size:13.5px; } body.listing-portal .portal-fact:last-child{border-bottom:none} body.listing-portal .portal-fact .pf-l{ color:var(--muted); font-weight:300; } body.listing-portal .portal-fact .pf-v{ color:var(--navy); font-weight:500; text-align:right; } body.listing-portal .portal-records{ margin:0 0 14px; border:1px solid var(--border); border-radius:10px; background:var(--portal-surface); overflow:hidden; } body.listing-portal .portal-records > summary{ cursor:pointer; list-style:none; padding:11px 14px; font-size:12.5px; font-weight:500; color:var(--navy); letter-spacing:.01em; } body.listing-portal .portal-records > summary::-webkit-details-marker{display:none} body.listing-portal .portal-records > summary::after{ content:'+'; float:right; color:var(--muted); font-weight:400; } body.listing-portal .portal-records[open] > summary::after{content:'–'} body.listing-portal .portal-records-body{ padding:0 14px 12px; border-top:1px solid var(--border); } body.listing-portal .portal-records .portal-fact{padding:8px 0;font-size:12.5px} body.listing-portal .portal-note{ font-size:11px; line-height:1.55; color:var(--muted); margin:8px 0 0; } body.listing-portal .portal-aerial{ margin:8px 0 0; font-size:11.5px; } body.listing-portal .portal-aerial a{ color:var(--portal-accent); border-bottom:1px solid currentColor; } body.listing-portal .portal-agent{ display:flex; align-items:center; gap:12px; padding:14px 0 8px; border-top:1px solid var(--border); margin-bottom:4px; } body.listing-portal .portal-agent img{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0; } body.listing-portal .portal-agent .pa-name{ font-size:14.5px; font-weight:500; color:var(--navy); line-height:1.2; } body.listing-portal .portal-agent .pa-role{ font-size:12px; color:var(--muted); margin-top:2px; } body.listing-portal .portal-agent-line{ font-size:12.5px; color:var(--muted); margin:0 0 14px; line-height:1.45; } body.listing-portal .portal-agent-line b{color:var(--navy);font-weight:500} body.listing-portal .portal-summary-ctas{ display:flex; flex-direction:column; gap:8px; } body.listing-portal .portal-btn-primary, body.listing-portal .portal-btn-secondary{ display:flex; align-items:center; justify-content:center; text-align:center; padding:13px 18px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:500; letter-spacing:.02em; border-radius:10px; transition:background .2s,border-color .2s,transform .15s; width:100%; } body.listing-portal .portal-btn-primary{ background:var(--portal-accent); color:#fff; border:none; } body.listing-portal .portal-btn-primary:hover{ background:var(--portal-accent-hover); transform:translateY(-1px); } body.listing-portal .portal-btn-secondary{ background:var(--portal-chip); color:var(--navy); border:1px solid transparent; } body.listing-portal .portal-btn-secondary:hover{ border-color:var(--border); background:#e6ebf0; } /* Duplicate At a Glance sidebar removed — facts live in portal summary */ body.listing-portal.portal-facts-merged .overview{ grid-template-columns:1fr!important; gap:0!important; } body.listing-portal.portal-facts-merged .overview-side, body.listing-portal.portal-facts-merged .facts-card{ display:none!important; } body.listing-portal.portal-facts-merged .lst-body{ grid-template-columns:1fr!important; } /* Content sections — quieter, less card clutter */ body.listing-portal .sec, body.listing-portal .lst-body{ background:transparent; } body.listing-portal .sec{ padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px); } body.listing-portal .feat-sec, body.listing-portal .faq-sec{ background:#fff; border-radius:var(--portal-radius); margin:0 clamp(20px,4vw,56px); max-width:1320px; margin-left:auto; margin-right:auto; } body.listing-portal .feat-col{ border:none; background:transparent; border-radius:0; box-shadow:none; padding:8px 8px 8px 0; } body.listing-portal .feat-grid{ gap:clamp(12px,2vw,28px); border-top:1px solid var(--border); padding-top:8px; } body.listing-portal .feat-col h3{ font-size:1.15rem; margin-bottom:12px; } body.listing-portal .feat-col li{ font-size:14.5px; margin-bottom:10px; } body.listing-portal .card-cta, body.listing-portal .btn-primary{ border-radius:10px!important; background:var(--portal-accent)!important; } body.listing-portal .card-cta:hover, body.listing-portal .btn-primary:hover{ background:var(--portal-accent-hover)!important; } body.listing-portal .loc-map, body.listing-portal .listing-map{ border-radius:var(--portal-radius); } body.listing-portal .gallery-mls{ color:var(--muted); } body.listing-portal .gallery-mls a{color:var(--portal-accent)} /* Assume band: soften into portal strip */ body.listing-portal .assume-band{ margin:20px clamp(20px,4vw,56px) 0; max-width:1320px; margin-left:auto; margin-right:auto; border-radius:var(--portal-radius); } /* Intro panel sits cleanly under mosaic */ body.listing-portal .lst-hero, body.listing-portal section.hero{ margin-top:18px!important; margin-bottom:8px!important; box-shadow:0 1px 2px rgba(35,55,70,.04); } @media(max-width:900px){ body.listing-portal .lst-hero-inner, body.listing-portal .hero-inner{ grid-template-columns:1fr; } body.listing-portal .portal-summary{ position:static; } body.listing-portal .gallery, body.listing-portal #gallery-grid.gallery, body.listing-portal #gallery-grid{ height:min(42vh,360px); min-height:240px; } } @media(max-width:640px){ body.listing-portal .gallery, body.listing-portal #gallery-grid.gallery, body.listing-portal #gallery-grid{ grid-template-columns:1fr 1fr; grid-template-rows:1.35fr 1fr 1fr; height:auto; min-height:0; aspect-ratio:1/1.05; } body.listing-portal .gallery button:first-child, body.listing-portal #gallery-grid button:first-child{ grid-column:1 / -1; grid-row:auto; } body.listing-portal .gallery button:nth-child(4), body.listing-portal #gallery-grid button:nth-child(4){ display:block; } body.listing-portal .lst-stat .n, body.listing-portal .hero-stat .n{ font-size:13px!important; } } @media(prefers-reduced-motion:reduce){ body.listing-portal .gallery button, body.listing-portal .portal-summary, body.listing-portal .gallery img{ animation:none!important; transition:none!important; } }