/* ============================================================ 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-addr-size:clamp(34px,6vw,56px); /* hero address type size */ --hero-addr-weight:300; /* hero address weight (raise it at small sizes) */ --hero-price-size:clamp(26px,4vw,38px); /* hero price type size */ --hero-meta-size:15px; /* hero agent/contact line size */ --hero-meta-font:var(--font-sans); /* set to var(--font-display) to match the price */ --hero-row-gap:14px 26px; /* row/column gap between hero overlay items */ --hero-vthumb-w:168px; /* width of the video rail card (photo thumbs are 104px) */ --vcta-bg:#fff; /* "Watch Video Tour" pill fill */ --vcta-fg:var(--accent); /* …and its text/glyph colour */ --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} /* Visually hidden but read by screen readers / indexed — use to keep a required heading (e.g. the address

) in the document when the design omits it. / .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} 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)} .sectiontitle{font-size:clamp(24px,3.4vw,32px);letter-spacing:-.01em;margin:0 0 6px} .sectionlead{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; } .hdrbrand{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) .hdrbrand{opacity:0;pointer-events:none} .hdrnav{display:flex;gap:26px} .hdrnav a{color:inherit;font-size:14px;letter-spacing:.02em;opacity:.92;text-shadow:0 1px 8px rgba(0,0,0,.35)} .hdrnav a:hover{opacity:1;text-decoration:none} .hdrcta{ 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; } .hdrcta: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 .hdrbrand,.hdr.scrolled .hdrnav a{text-shadow:none} .hdr.scrolled .hdrcta{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .hdr.scrolled .hdrcta: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} .heroimg{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)} .heroinner{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} .heroaddr{font-family:var(--font-display);font-size:var(--hero-addr-size);font-weight:var(--hero-addr-weight);letter-spacing:-.02em;line-height:1.04;text-shadow:0 1px 24px rgba(0,0,0,.25)} .herosub{font-size:clamp(16px,2.4vw,20px);opacity:.95;margin-top:8px} .herorow{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--hero-row-gap);margin-top:22px} / Optional sub-group inside .herorow: keeps price + contact together as one wrap unit, so a one-line overlay breaks address / price+contact, not mid-way. / .herometa{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--hero-row-gap);min-width:0} .herorow:has(.heroaddr){margin-top:0} / address inside the row supplies its own spacing / .heroprice{font-family:var(--font-display);font-size:var(--hero-price-size);font-weight:500} .heroprice small{font-size:.5em;font-weight:400;opacity:.85;letter-spacing:.02em} .heroagent{font-family:var(--hero-meta-font);font-size:var(--hero-meta-size);opacity:.95} .heroagent 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) .heroimg{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 .herostage{position:absolute;inset:0} .hero--gallery .heroimg{cursor:zoom-in;transition:opacity .28s ease;animation:none} .heroscrim{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%)} .heronav{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} .heronav:hover{background:rgba(18,18,20,.72)} .heronav svg{width:26px;height:26px} .heronav--prev{left:18px} .heronav--next{right:18px} .herocount{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 .heroinner{position:absolute;left:0;right:0;bottom:126px;z-index:3;padding-bottom:0;pointer-events:none} .hero--gallery .heroinner a{pointer-events:auto} .herorail{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} .herorail::-webkit-scrollbar{height:0} .herothumb{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} .herothumb img{width:100%;height:100%;object-fit:cover} .herothumb:hover{opacity:1} .herothumb.is-active{opacity:1;border-color:#fff} / Video rail card — a .herothumb that opens the video slide instead of a photo. Deliberately the loudest card in the rail: wider than a photo thumb, brass border, always full opacity, lifted off the strip, with a play badge + label. A video tour is the fastest thing for a buyer to digest, so it gets to shout. / .herothumb--video{position:relative;width:var(--hero-vthumb-w);opacity:1;border-color:var(--accent-2);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.5)} .herothumb--video img{opacity:.52} .herothumb--video:hover img{opacity:.62} .herothumb--video.is-active{border-color:#fff} .herothumbvicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-2);color:#fff;border:2px solid rgba(255,255,255,.92)} .herothumbvicon svg{width:16px;height:16px;fill:currentColor;margin-left:2px} / Soft outward pulse — a low-key "this one moves" signal, motion-safe only. / .herothumbvicon::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--accent-2);animation:vpulse 2.6s ease-out infinite} @keyframes vpulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.85);opacity:0}100%{transform:scale(1.85);opacity:0}} .herothumbvlabel{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 3px rgba(0,0,0,.8)} / "Watch Video Tour" pill in the hero overlay — the loudest entry point, always visible regardless of which slide the rail is parked on. listing.js removes it when the page has no video slide, so it is safe to emit unconditionally. / .herovideocta{display:inline-flex;align-items:center;gap:9px;margin-top:14px;pointer-events:auto;cursor:pointer;border:0;border-radius:999px;padding:10px 20px 10px 15px;background:var(--vcta-bg);color:var(--vcta-fg);font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .2s ease,box-shadow .2s ease} .herovideocta:hover{transform:translateY(-1px);box-shadow:0 7px 24px rgba(0,0,0,.45)} .herovideoctaico{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--vcta-fg);color:var(--vcta-bg);flex:0 0 auto} .herovideoctaico svg{width:12px;height:12px;fill:currentColor;margin-left:2px} / Big play cue shown over the hero stage when the active slide is a video. / .heroplaycue{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} .herostage--video .heroplaycue{display:flex} .herostage--video .heroimg{cursor:pointer} .heroplaycuering{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} .heroplaycue:hover .heroplaycuering{background:rgba(18,18,20,.75);transform:scale(1.05)} .heroplaycuering svg{width:34px;height:34px;fill:#fff;margin-left:4px} .heroplaycue__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