/* ============================================================ listing.css — shared base stylesheet for every listing site ------------------------------------------------------------ SHIP THIS FILE VERBATIM into /site/assets/. Do NOT hand-edit it per listing. A listing's look is set by: 1. a small :root token override block in the page (palette / fonts / spacing — see references/themes.md), and 2. variant classes on / the hero element (`t-upscale`, and `hero--gallery` on .hero). The class + token names below are the fixed contract shared by the markup (index.html), this CSS, and listing.js. Rename in one place only by renaming in all three. ============================================================ */ /* ---------- Design tokens (defaults = "minimal" theme) ---------- */ :root{ /* color */ --accent:#1f3a5f; /* primary accent — price, CTAs, links, active nav */ --accent-2:var(--accent); /* secondary/metallic — eyebrow tick, rules, ticks (palettes/upscale override) */ --ink:#1a1a1a; /* primary text */ --muted:#666; /* secondary text / labels */ --faint:#9a9a9a; /* muted-est */ --hair:#e7e7e7; /* hairlines / borders */ --bg:#ffffff; /* page background */ --bg-alt:#fafafa; /* alternating section band */ --on-accent:#fff; /* text over the accent fill */ /* type */ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --font-display:var(--font-sans); /* headings/price — t-upscale switches this to serif */ /* layout */ --maxw:1180px; --gut:clamp(20px,5vw,40px); --sp:clamp(56px,8vw,96px); /* section padding-block */ --radius:4px; /* hero + depth + motion (variant classes retune these) */ --hero-h:84vh; --hero-min:480px; --hero-scrim:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.20) 38%,rgba(0,0,0,.10) 60%,rgba(0,0,0,.28) 100%); --card-shadow:0 1px 2px rgba(0,0,0,.04); --reveal-dur:.6s; --reveal-ease:ease; } /* "upscale" structural base — everything else rides on tokens. The palette/serif can still be tuned by the per-page :root block. */ body.t-upscale{ --font-display:var(--font-serif); --card-shadow:0 8px 30px rgba(0,0,0,.06); --hero-h:88vh; --sp:clamp(64px,9vw,112px); --reveal-dur:.4s; } /* ---------- Reset / base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;font-family:var(--font-sans);color:var(--ink);background:var(--bg); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.15;margin:0} .container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} .tabnum{font-variant-numeric:tabular-nums} section{scroll-margin-top:76px} .eyebrow{ font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-2)} .section{padding-block:var(--sp);border-top:1px solid var(--hair)} .section--alt{background:var(--bg-alt)} .section__title{font-size:clamp(24px,3.4vw,32px);letter-spacing:-.01em;margin:0 0 6px} .section__lead{font-family:var(--font-sans);color:var(--muted);max-width:62ch;margin:0 0 38px} /* ---------- Buttons ---------- */ .btn{ display:inline-block;font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:.02em;cursor:pointer; padding:12px 24px;border-radius:var(--radius);border:1px solid var(--ink);background:none;color:var(--ink); transition:background .2s,color .2s,border-color .2s,opacity .2s; } .btn:hover{background:var(--ink);color:var(--on-accent);text-decoration:none} .btn--accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .btn--accent:hover{filter:brightness(1.08);background:var(--accent);color:var(--on-accent)} /* ---------- Sticky header ---------- */ .hdr{ position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:20px; padding:16px var(--gut);color:#fff; transition:background .3s ease,color .3s ease,box-shadow .3s ease,padding .3s ease; } .hdr__brand{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.01em;margin-right:auto;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.35);transition:opacity .3s ease} /* In gallery-hero mode the big address is already in the hero overlay AND the photo counter sits top-left — so hide the redundant header brand until scroll to avoid the collision. Reappears once the header goes solid. Standard heroes are unaffected. */ body:has(.hero--gallery) .hdr:not(.scrolled) .hdr__brand{opacity:0;pointer-events:none} .hdr__nav{display:flex;gap:26px} .hdr__nav a{color:inherit;font-size:14px;letter-spacing:.02em;opacity:.92;text-shadow:0 1px 8px rgba(0,0,0,.35)} .hdr__nav a:hover{opacity:1;text-decoration:none} .hdr__cta{ font-size:13px;font-weight:600;letter-spacing:.03em;padding:9px 16px; border:1px solid currentColor;border-radius:var(--radius);color:#fff;white-space:nowrap; transition:background .2s,color .2s,border-color .2s; } .hdr__cta:hover{background:#fff;color:var(--ink);text-decoration:none;border-color:#fff} .hdr.scrolled{ background:rgba(255,255,255,.96);color:var(--ink); box-shadow:0 1px 0 var(--hair);backdrop-filter:saturate(160%) blur(8px);padding-block:12px; } .hdr.scrolled .hdr__brand,.hdr.scrolled .hdr__nav a{text-shadow:none} .hdr.scrolled .hdr__cta{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .hdr.scrolled .hdr__cta:hover{filter:brightness(1.08)} /* ---------- Hero (standard) ---------- */ .hero{position:relative;min-height:var(--hero-min);height:var(--hero-h);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0c0c0e} .hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero:not(.hero--gallery)::after{content:"";position:absolute;inset:0;background:var(--hero-scrim)} .hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gut) clamp(40px,6vw,72px)} .pill{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:var(--accent);padding:6px 13px;border-radius:999px;margin-bottom:18px} .hero__addr{font-family:var(--font-display);font-size:clamp(34px,6vw,56px);font-weight:300;letter-spacing:-.02em;line-height:1.04;text-shadow:0 1px 24px rgba(0,0,0,.25)} .hero__sub{font-size:clamp(16px,2.4vw,20px);opacity:.95;margin-top:8px} .hero__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 26px;margin-top:22px} .hero__price{font-family:var(--font-display);font-size:clamp(26px,4vw,38px);font-weight:500} .hero__price small{font-size:.5em;font-weight:400;opacity:.85;letter-spacing:.02em} .hero__agent{font-size:15px;opacity:.95} .hero__agent a{color:#fff;text-decoration:underline;text-underline-offset:3px} .scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;opacity:.85;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff;animation:bob 2.4s ease-in-out infinite} @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}} /* upscale: slow Ken Burns on the standard hero image */ body.t-upscale .hero:not(.hero--gallery) .hero__img{animation:kenburns 20s ease-out forwards} @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}} /* ---------- Hero (gallery mode) ---------- --hero-h is set LOCALLY here so it beats body.t-upscale's 88vh (a closer ancestor than :root): a gallery hero stays ~74vh in either style base. */ .hero--gallery{--hero-h:74vh;height:var(--hero-h);align-items:stretch} .hero--gallery .hero__stage{position:absolute;inset:0} .hero--gallery .hero__img{cursor:zoom-in;transition:opacity .28s ease;animation:none} .hero__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.28) 36%,rgba(0,0,0,.05) 62%,transparent 100%)} .hero__nav{position:absolute;top:calc((100% - 96px)/2);transform:translateY(-50%);z-index:5;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;background:rgba(18,18,20,.42);color:#fff;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:background .2s ease} .hero__nav:hover{background:rgba(18,18,20,.72)} .hero__nav svg{width:26px;height:26px} .hero__nav--prev{left:18px} .hero__nav--next{right:18px} .hero__count{position:absolute;top:20px;left:24px;z-index:5;background:rgba(18,18,20,.5);color:#fff;font-size:12.5px;letter-spacing:.06em;padding:6px 13px;border-radius:999px;backdrop-filter:blur(4px)} .hero--gallery .hero__inner{position:absolute;left:0;right:0;bottom:126px;z-index:3;padding-bottom:0;pointer-events:none} .hero--gallery .hero__inner a{pointer-events:auto} .hero__rail{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;gap:8px;align-items:center;padding:13px 18px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.12));scrollbar-width:none} .hero__rail::-webkit-scrollbar{height:0} .hero__thumb{flex:0 0 auto;width:104px;height:70px;padding:0;border:2px solid transparent;border-radius:5px;overflow:hidden;cursor:pointer;background:none;opacity:.62;transition:opacity .2s ease,border-color .2s ease} .hero__thumb img{width:100%;height:100%;object-fit:cover} .hero__thumb:hover{opacity:1} .hero__thumb.is-active{opacity:1;border-color:#fff} /* Video rail card — a .hero__thumb that navigates to a video slide instead of a photo. */ .hero__thumb--video{position:relative;opacity:1;border-color:var(--accent-2)} .hero__thumb--video img{opacity:.6} .hero__thumb--video.is-active{border-color:#fff} .hero__thumb__vicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(18,18,20,.6);color:#fff;border:1.5px solid rgba(255,255,255,.85)} .hero__thumb__vicon svg{width:14px;height:14px;fill:currentColor;margin-left:2px} .hero__thumb__vlabel{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.65)} /* Big play cue shown over the hero stage when the active slide is a video. */ .hero__playcue{position:absolute;top:calc((100% - 96px)/2);left:50%;transform:translate(-50%,-50%);z-index:4;display:none;flex-direction:column;align-items:center;gap:12px;border:0;background:none;color:#fff;cursor:pointer} .hero__stage--video .hero__playcue{display:flex} .hero__stage--video .hero__img{cursor:pointer} .hero__playcue__ring{width:84px;height:84px;border-radius:50%;background:rgba(18,18,20,.5);backdrop-filter:blur(4px);border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease} .hero__playcue:hover .hero__playcue__ring{background:rgba(18,18,20,.75);transform:scale(1.05)} .hero__playcue__ring svg{width:34px;height:34px;fill:#fff;margin-left:4px} .hero__playcue__txt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.6)} /* Inline video playback — the