/* ============================================================================ Living Inner City — design system · "Survey" --------------------------------------------------------------------------- The reference is an architectural survey drawing and a property monograph: paper, ink, hairlines, measured numerals. There is no decorative accent colour — colour appears only where it carries meaning (listing status) or in the photography itself. Everything else is contrast, scale and rule. Class names are unchanged from the previous system on purpose: the markup, the map, the filters, the forms and the tracking all keep working. ========================================================================= */ :root{ /* ---- the accent is ink ------------------------------------------------- --brass* kept as token NAMES so every existing rule and inline style re-points here instead of needing a markup edit. They are no longer gold. */ --brass:#101418; /* accent fill on a light ground */ --brass-lo:#3C444C; /* accent, one step back */ --brass-hi:#FFFFFF; /* accent on photography / always-dark bands */ --brass-tx:#101418; /* accent as small text */ /* ---- reserved for meaning, never for decoration ------------------------ */ --ok:#2E5F45; /* new / active */ --warn:#8A5A1E; /* open house */ --hot:#8C3A2E; /* under contract */ --clay:#2F3A42; --clay-d:#1B2228; --clay-l:#7B858E; /* data second series */ --warm:#B0764C; /* the one warm note: eyebrow rules, link underlines, hovers — never text on its own */ --serif:"Bodoni Moda",Georgia,"Times New Roman",serif; --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --wrap:1360px; --r:0px; /* containers are square */ --rs:6px; /* controls soften — the page should feel lived-in */ --ease:cubic-bezier(.22,.61,.36,1); --gut:clamp(20px,4vw,40px); /* ---- light (default) --------------------------------------------------- */ --bg:#FCFAF7; --bg2:#F3EEE7; --surf:#FFFFFF; --surf2:#F7F3ED; --ink:#14171B; --ink2:#3E444B; --mute:#6C7278; --faint:#8B9096; --hair:#E7E1D8; --hair2:#CFC7BB; --tagbg:#F1EBE2; --tagink:#3E444B; /* quiet status tag, under a photo */ --rm-far:#F6F5F1; --rm-land:#E8DAC0; --rm-core:#CFBC98; --rm-water:#A9C9DC; /* ring maps: established, the ring, the core, rivers */ --okbg:#E4F0E6; --okink:#1F5138; /* available now */ --warmtint:#F7F1E8; /* a room-lit band */ --btn:#101418; --btn-ink:#FFFFFF; --btn-h:#2B3239; --link:#101418; --sh:none; --sh-lg:0 18px 44px rgba(16,20,24,.10); --scrim:rgba(10,12,14,.52); --map-filter:none; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --brass:#ECEBE8; --brass-lo:#B9B7B2; --brass-hi:#FFFFFF; --brass-tx:#ECEBE8; --ok:#6FAE8B; --bg:#14130F; --bg2:#1B1A16; --surf:#1B1A16; --surf2:#22201B; --ink:#F1EDE5; --ink2:#C9C4BA; --mute:#9B968D; --faint:#7C776F; --hair:#2A2823; --hair2:#3D3A33; --tagbg:#25231E; --tagink:#D5D0C6; --rm-far:#1C1B18; --rm-land:#2E2A22; --rm-core:#474034; --rm-water:#2A4250; --okbg:#1E2B22; --okink:#93D5AE; --warmtint:#1D1B16; --warm:#D8A87A; --btn:#ECEBE8; --btn-ink:#101316; --btn-h:#FFFFFF; --link:#ECEBE8; --sh:none; --sh-lg:0 18px 44px rgba(0,0,0,.55); --scrim:rgba(4,6,8,.58); --map-filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); } } :root[data-theme="dark"]{ --brass:#ECEBE8; --brass-lo:#B9B7B2; --brass-hi:#FFFFFF; --brass-tx:#ECEBE8; --bg:#14130F; --bg2:#1B1A16; --surf:#1B1A16; --surf2:#22201B; --ink:#F1EDE5; --ink2:#C9C4BA; --mute:#9B968D; --faint:#7C776F; --hair:#2A2823; --hair2:#3D3A33; --tagbg:#25231E; --tagink:#D5D0C6; --rm-far:#1C1B18; --rm-land:#2E2A22; --rm-core:#474034; --rm-water:#2A4250; --okbg:#1E2B22; --okink:#93D5AE; --warmtint:#1D1B16; --btn:#ECEBE8; --btn-ink:#101316; --btn-h:#FFFFFF; --link:#ECEBE8; --sh:none; --sh-lg:0 18px 44px rgba(0,0,0,.55); --scrim:rgba(4,6,8,.58); --map-filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); } /* Bodoni at 400 loses its hairlines on a dark ground; carry 500 wherever the ground is dark */ @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) h1,:root:not([data-theme="light"]) h2,:root:not([data-theme="light"]) .tile b{font-weight:500}} :root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] .tile b{font-weight:500} .ink-band h1,.ink-band h2,.ink-band .tile b,.hero h1{font-weight:500} /* an always-dark band, regardless of theme */ .ink-band{ --brass:#FFFFFF; --brass-lo:#B9B7B2; --brass-hi:#FFFFFF; --brass-tx:#FFFFFF; --bg:#15120E; --bg2:#1C1813; --surf:#1C1813; --surf2:#231E18; --ink:#F5F0E8; --ink2:#D2CABE; --mute:#A39B8F; --faint:#7F776C; --hair:#2C2620; --hair2:#403830; --btn:#F5F0E8; --btn-ink:#15120E; --btn-h:#FFFFFF; --link:#F5F0E8; --warm:#D8A87A; --clay-l:#9E958A; background:var(--bg); color:var(--ink); } /* ---------------------------------------------------------------- base ---- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:92px} @media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}} body{ margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;overflow-x:clip; font-synthesis-weight:none; } img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:0} .ink-band :focus-visible,.hero :focus-visible,.lightbox :focus-visible{outline-color:#fff} /* ---- type scale --------------------------------------------------------- Display serif is used ONLY at large sizes, where its hairlines still read. h3/h4 are the grotesque — which sharpens hierarchy rather than blurring it. */ h1,h2{font-family:var(--serif);font-weight:400;font-optical-sizing:auto; letter-spacing:-.014em;line-height:1.04;margin:0;text-wrap:balance} h3,h4{font-family:var(--sans);font-weight:600;letter-spacing:-.011em;line-height:1.18; margin:0;text-wrap:balance} h1{font-size:clamp(2.5rem,5.2vw,4.4rem)} h2{font-size:clamp(1.85rem,3.4vw,2.8rem)} h3{font-size:clamp(1.08rem,1.5vw,1.28rem)} h4{font-size:1rem} p{margin:0 0 1em} p:last-child{margin-bottom:0} hr.hair{height:1px;background:var(--hair);border:0;margin:0} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)} .wrap-n{max-width:760px;margin:0 auto;padding:0 var(--gut)} .sec{padding:clamp(60px,7.4vw,124px) 0} .sec.alt{background:var(--bg2);--mute:#5E646A} /* --mute is 4.2:1 on the paper-2 ground; 5.2:1 here */ @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sec.alt{--mute:#9B968D}} :root[data-theme="dark"] .sec.alt{--mute:#9B968D} .sec-t{padding:clamp(28px,3.4vw,52px) 0} /* the eyebrow is a drawing annotation: a rule, then the label */ .eyebrow{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mute);font-weight:600;margin:0 0 18px;display:flex;align-items:center;gap:12px} .eyebrow::before{content:"";width:26px;height:1px;background:var(--warm);flex:0 0 auto} .lede{font-size:1.06rem;color:var(--ink2);max-width:62ch;line-height:1.6} .mute{color:var(--mute)} .mono{font-family:var(--sans);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:-999px;top:8px;z-index:9999;background:var(--btn);color:var(--btn-ink); padding:12px 20px} .skip:focus{left:12px} /* an editorial section header: title left, standfirst right — breaks the stacked eyebrow/headline/lede rhythm that repeats on every generic page */ .sechead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,64px);align-items:end;padding-bottom:26px; border-bottom:1px solid var(--hair)} .sechead > :last-child{padding-bottom:4px} .sechead .lede{margin:0} @media (max-width:860px){ .sechead{grid-template-columns:1fr;gap:18px;align-items:start;padding-bottom:20px} } /* --------------------------------------------------------------- buttons -- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border-radius:0;border:1px solid var(--btn); background:var(--btn);color:var(--btn-ink);font-size:.9rem;font-weight:500; letter-spacing:.005em;cursor:pointer;white-space:nowrap;min-height:48px; transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)} .btn:hover{background:var(--btn-h);border-color:var(--btn-h)} .btn.ghost{background:transparent;border-color:var(--hair2);color:var(--ink)} .btn.ghost:hover{background:transparent;border-color:var(--warm);color:var(--ink)} .btn.brass{background:var(--brass);color:var(--bg);border-color:var(--brass)} .btn.brass:hover{background:var(--btn-h);border-color:var(--btn-h)} .btn.sm{padding:10px 18px;font-size:.84rem;min-height:40px} .btn.lg{padding:17px 34px;font-size:.96rem;min-height:54px} .btn.block{width:100%} /* a text action: the third weight, used where a button would be too loud */ .tlink{color:var(--link);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:4px;text-decoration-color:var(--hair2); transition:text-decoration-color .18s} .tlink:hover{text-decoration-color:var(--warm)} .alink{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600; padding:6px 0;border-bottom:1px solid var(--ink);transition:gap .2s var(--ease)} .alink:hover{gap:14px} /* ---------------------------------------------------------------- header -- */ header.site{position:sticky;top:0;z-index:400;background:var(--bg); border-bottom:1px solid var(--hair)} header.site.float{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent; transition:background .3s var(--ease),border-color .3s var(--ease)} header.site.float:not(.solid){--ink:#fff;--ink2:rgba(255,255,255,.9);--mute:rgba(255,255,255,.72); --hair2:rgba(255,255,255,.42);--hair:rgba(255,255,255,.22);--surf2:rgba(255,255,255,.12); --btn:#fff;--btn-ink:#101316;--btn-h:rgba(255,255,255,.86);--surf:#16191D} header.site.float:not(.solid) .brand b,header.site.float:not(.solid) .nav>a, header.site.float:not(.solid) .nav .drop>button{color:#fff} header.site.float:not(.solid) .brand span{color:rgba(255,255,255,.7)} header.site.float:not(.solid) .tgl{color:#fff} header.site.float:not(.solid) .burger i{background:#fff} header.site.float.solid{background:var(--bg);border-bottom-color:var(--hair)} .hbar{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:76px; display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand .mk{width:22px;height:22px;flex-shrink:0} .brand b{font-family:var(--sans);font-weight:600;font-size:1.02rem;letter-spacing:-.005em; display:block;line-height:1.1} .brand span{font-size:.56rem;letter-spacing:.17em;text-transform:uppercase;color:var(--mute); display:block;margin-top:2px} .nav{display:flex;gap:clamp(14px,1.7vw,26px);margin-left:auto;align-items:center} .nav > a,.nav .drop > button{font-size:.875rem;font-weight:500;color:var(--ink2); padding:26px 0;position:relative;background:none;border:0;cursor:pointer; display:inline-flex;align-items:center;gap:6px;transition:color .18s} .nav > a:hover,.nav .drop > button:hover{color:var(--ink)} /* the active page is marked by a rule flush with the header's own bottom edge */ .nav > a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:var(--ink);transform:scaleX(0);transform-origin:left; transition:transform .28s var(--ease)} .nav > a:hover::after{transform:scaleX(1)} .nav > a[aria-current]{color:var(--ink);font-weight:600} .nav > a[aria-current]::after{transform:scaleX(1)} .drop{position:relative} .drop-menu{position:absolute;top:100%;left:-18px;min-width:290px;background:var(--surf); border:1px solid var(--hair);box-shadow:var(--sh-lg);padding:10px; opacity:0;visibility:hidden;transform:translateY(-4px);transition:.18s var(--ease);z-index:10} .drop[data-open="1"] .drop-menu{opacity:1;visibility:visible;transform:none} .drop-menu a{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;font-size:.885rem} .drop-menu a:hover{background:var(--surf2)} .drop-menu a i{font-style:normal;color:var(--faint);font-family:var(--mono);font-size:.74rem; font-variant-numeric:tabular-nums} .drop-menu hr{border:0;height:1px;background:var(--hair);margin:8px 4px} .hcta{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto} .tgl{width:40px;height:40px;flex-shrink:0;border:1px solid var(--hair2);border-radius:0; background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink2); transition:border-color .18s,color .18s} .tgl:hover{border-color:var(--ink);color:var(--ink)} .burger{display:none;width:46px;height:46px;border:1px solid var(--hair2);border-radius:0; background:transparent;cursor:pointer;align-items:center;justify-content:center} .burger i{display:block;width:17px;height:1.5px;background:var(--ink);position:relative} .burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:inherit} .burger i::before{top:-6px}.burger i::after{top:6px} .mobnav{display:none;position:fixed;inset:76px 0 0;background:var(--bg);z-index:399;overflow:auto; padding:8px var(--gut) 72px;overscroll-behavior:contain} .mobnav.on{display:block} .mobnav a{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px 0;border-bottom:1px solid var(--hair);font-size:1.02rem;min-height:56px} .mobnav h4{margin:26px 0 2px;color:var(--mute);font-family:var(--sans);font-size:.68rem; letter-spacing:.16em;text-transform:uppercase;font-weight:600} /* ------------------------------------------------------------------ hero -- */ .hero{position:relative;min-height:min(82svh,760px);display:flex;align-items:flex-end; overflow:hidden;background:#0C0E11} .hero-bg{position:absolute;inset:0} .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transition:opacity 1.4s var(--ease)} .hero-bg img.on{opacity:1} /* one deep gradient at the foot, a light one at the head for the nav — no full-frame wash, so the photograph stays a photograph */ .hero-scrim{position:absolute;inset:0;background: linear-gradient(102deg,rgba(8,10,12,.82) 0%,rgba(8,10,12,.60) 30%,rgba(8,10,12,.14) 66%,rgba(8,10,12,.04) 100%), linear-gradient(180deg,rgba(8,10,12,.50) 0%,rgba(8,10,12,.10) 24%,rgba(8,10,12,.10) 46%, rgba(8,10,12,.68) 86%,rgba(8,10,12,.90) 100%)} .hero-in{position:relative;width:100%;padding:170px 0 44px;color:#fff} .hero h1{color:#fff;max-width:15ch;letter-spacing:-.02em;font-weight:500} .hero h1 em{font-style:italic;color:#fff} .hero .sub{color:rgba(255,255,255,.86);font-size:1.06rem;max-width:52ch;margin-top:20px;line-height:1.55} .hero .eyebrow{color:rgba(255,255,255,.78)} .hero .eyebrow::before{background:rgba(255,255,255,.45)} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px} .hero .btn{background:#fff;color:#101316;border-color:#fff} .hero .btn:hover{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.86)} .hero .btn.ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff} .hero .btn.ghost:hover{background:transparent;border-color:#fff} .hero .alink{color:#fff;border-bottom-color:rgba(255,255,255,.6)} .hero .alink:hover{border-bottom-color:#fff} /* the counts now read as a measured strip on the hairline, not a hero feature */ .hero-meta{display:flex;gap:clamp(22px,4.4vw,58px);flex-wrap:wrap;margin-top:clamp(34px,5vw,58px); padding-top:20px;border-top:1px solid rgba(255,255,255,.26)} .hero-meta b{font-family:var(--sans);font-size:1.16rem;font-weight:600;display:block;line-height:1; color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.01em} .hero-meta span{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase; color:rgba(255,255,255,.66);display:block;margin-top:7px} .hero-credit{position:absolute;right:var(--gut);bottom:12px;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)} .dots{position:absolute;left:var(--gut);bottom:16px;display:flex;gap:8px;z-index:3} .dots button{width:28px;height:2px;background:rgba(255,255,255,.3);border:0;padding:0;cursor:pointer; transition:background .3s} .dots button[aria-current="true"]{background:#fff} .dots button:hover{background:rgba(255,255,255,.66)} /* ------------------------------------------------------------ search bar -- */ .qbar{display:flex;background:var(--surf);border-radius:0;padding:0; max-width:660px;align-items:stretch;gap:0;border:1px solid var(--ink)} .qbar input{flex:1;border:0;outline:0;background:transparent;font-size:.98rem;min-width:0; color:var(--ink);padding:15px 18px} .qbar input::placeholder{color:var(--mute)} .qbar .btn{border-radius:0;flex-shrink:0;border-color:transparent} /* ------------------------------------------------------------ grid + card -- A property card is a photograph with a caption. No fill, no border, no radius, no shadow and no hover-lift — the image does the work and the grid's alignment does the rest. Consistent 4:3 crop across every grid on the site. */ .grid{display:grid;gap:clamp(30px,3.2vw,52px) clamp(22px,2.4vw,36px)} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:transparent;border:0;border-radius:0;overflow:visible; display:flex;flex-direction:column;position:relative;container-type:inline-size} .card .shot{position:relative;aspect-ratio:4/3;background:var(--bg2);overflow:hidden} .card .shot img{width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease),filter .4s var(--ease)} .card:hover .shot img{transform:scale(1.03)} .card .body{padding:17px 0 0;display:flex;flex-direction:column;gap:6px;flex:1} .card.sold .price{font-size:1.05rem;color:var(--ink2)} .card .price{font-family:var(--sans);font-size:1.22rem;font-weight:600;line-height:1.1; letter-spacing:-.015em;font-variant-numeric:tabular-nums} .card .addr{font-size:.95rem;font-weight:500;line-height:1.35;color:var(--ink2); text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px; text-decoration-thickness:1px;transition:text-decoration-color .2s} .card:hover .addr{text-decoration-color:var(--hair2)} .card .hood{font-size:.8rem;color:var(--mute);line-height:1.4} .card .hood a{color:var(--mute);text-decoration:underline;text-decoration-color:var(--hair2); text-underline-offset:2px;position:relative;z-index:2} .card .hood a:hover{color:var(--ink)} .card .facts{display:flex;flex-wrap:wrap;gap:4px 15px;font-size:.795rem;color:var(--ink2); margin-top:auto;padding-top:10px;border-top:1px solid var(--hair); font-variant-numeric:tabular-nums} .card .facts b{font-weight:600;color:var(--ink)} .card .facts > span{white-space:nowrap} .card a.stretch::after{content:"";position:absolute;inset:0;z-index:1} /* Status is set in type, under the photograph — nothing is written across a picture of a house. Colour is used only where the status carries a warning. */ .card .badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px} .badges{display:flex;flex-wrap:wrap;gap:6px} .bdg{font-size:.62rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase; padding:4px 9px;border-radius:999px;background:var(--tagbg);color:var(--tagink); border:1px solid var(--hair2);line-height:1.45} .bdg.karen{background:var(--ink);color:var(--bg);border-color:transparent} .bdg.new{background:var(--okbg);color:var(--okink);border-color:transparent} .bdg.open{background:var(--tagbg);color:var(--tagink)} .bdg.tour{background:var(--tagbg);color:var(--tagink)} .bdg.land{background:var(--tagbg);color:var(--tagink)} .bdg.uc{background:var(--hot);color:#fff;border-color:transparent} .bdg.soon{background:var(--tagbg);color:var(--tagink)} .card .shotmeta{display:flex;gap:12px;padding-top:8px;font-size:.72rem;color:var(--mute); font-variant-numeric:tabular-nums} .shotmeta span{white-space:nowrap} .fav{position:absolute;right:0;top:0;z-index:3;width:38px;height:38px;border-radius:0;border:0; background:rgba(12,14,17,.5);color:#fff;cursor:pointer;display:grid;place-items:center; opacity:0;transition:opacity .2s,background .2s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .card:hover .fav,.fav:focus-visible,.fav[aria-pressed="true"]{opacity:1} .fav:hover{background:rgba(12,14,17,.82)} .fav[aria-pressed="true"]{background:#fff;color:#101316} @media (hover:none){.fav{opacity:1}} /* ------------------------------------------------------------- filter bar -- */ .filterbar{position:sticky;top:76px;z-index:300;background:var(--bg); border-bottom:1px solid var(--hair);padding:12px 0} .fb-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:flex;gap:8px; align-items:center;overflow-x:auto;scrollbar-width:thin} .fb-in::-webkit-scrollbar{height:4px} .fb-in::-webkit-scrollbar-thumb{background:var(--hair2)} .fsel{position:relative;flex-shrink:0} .fsel > button{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:0; border:1px solid var(--hair2);background:transparent;cursor:pointer;font-size:.85rem; white-space:nowrap;min-height:42px;transition:border-color .18s,background .18s,color .18s} .fsel > button:hover{border-color:var(--ink)} .fsel[data-on="1"] > button{background:var(--ink);color:var(--bg);border-color:var(--ink)} .fsel .pop{position:absolute;top:calc(100% + 9px);left:0;background:var(--surf); border:1px solid var(--ink);box-shadow:var(--sh-lg);padding:16px;min-width:264px;z-index:20;display:none} .fsel[data-open="1"] .pop{display:block} .fsel .pop label{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:.88rem; cursor:pointer;min-height:38px} .fsel .pop .row{display:flex;gap:8px;align-items:center} .fsel .pop input[type=number],.fsel .pop select{width:100%;padding:10px 12px; border:1px solid var(--hair2);border-radius:var(--rs);background:var(--bg);color:var(--ink)} .chips{display:flex;gap:8px;flex-wrap:wrap;padding:11px 0 0} .chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:0; background:transparent;border:1px solid var(--hair2);font-size:.8rem} .chip button{border:0;background:none;cursor:pointer;color:var(--mute);line-height:1; font-size:1.05rem;padding:0 2px;min-width:22px;min-height:22px} .chip button:hover{color:var(--ink)} /* ------------------------------------------------------- split list + map -- */ .split{display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);gap:0; height:calc(100svh - 76px - 60px)} .split .listcol{overflow-y:auto;padding:24px var(--gut) 72px;scroll-behavior:smooth} .split .mapcol{position:sticky;top:0;height:100%;border-left:1px solid var(--hair);background:var(--bg2)} #map{width:100%;height:100%} .leaflet-tile-pane{filter:var(--map-filter)} .leaflet-container{background:var(--bg2);font:inherit} .pin{background:var(--ink);color:var(--bg);border-radius:0;padding:5px 9px;font-size:.74rem; font-weight:600;white-space:nowrap;border:1px solid var(--bg); font-variant-numeric:tabular-nums;cursor:pointer} .pin.karen{background:#fff;color:#101316;border-color:#101316} .pindot{width:11px;height:11px;border-radius:50%;background:var(--ink);border:2px solid var(--bg); box-shadow:0 0 0 1px var(--ink);transform:translate(-50%,-50%);margin:0} .pindot.karen{background:#C43C3C;box-shadow:0 0 0 1px #C43C3C;width:13px;height:13px} .pin.on{background:#fff;color:#101316;border-color:#101316;z-index:1000 !important} .cluster{background:var(--ink);color:var(--bg);border-radius:0;width:38px;height:38px;display:grid; place-items:center;font-weight:600;font-size:.82rem;border:1px solid var(--bg); font-variant-numeric:tabular-nums} .maptip{font-family:var(--sans)} .leaflet-popup-content-wrapper{background:var(--surf);color:var(--ink);border-radius:0; box-shadow:var(--sh-lg);border:1px solid var(--hair)} .leaflet-popup-tip{background:var(--surf)} .leaflet-popup-content{margin:0;width:236px !important} .maptip img{aspect-ratio:4/3;object-fit:cover;border-radius:0;width:100%} .maptip .t{padding:11px 13px 13px} .maptip .p{font-weight:600;font-size:1.02rem;font-variant-numeric:tabular-nums} .maptip .a{font-size:.85rem;color:var(--ink2);margin-top:2px} .maptip .f{font-size:.77rem;color:var(--mute);margin-top:4px;font-variant-numeric:tabular-nums} .alertbox{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start;margin-top:56px; padding:34px 0 0;border-top:1px solid var(--hair)} .alertbox h2{font-size:1.5rem} .alertform label.consent{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0; font-size:.82rem;color:var(--ink2);line-height:1.45} .alertform label.consent input{width:auto;margin-top:3px} @media(max-width:860px){.alertbox{grid-template-columns:1fr;gap:22px}} .viewtoggle{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:350} /* --------------------------------------------------------- listing detail -- */ .gal{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px; aspect-ratio:2.4/1;border-radius:0;overflow:hidden;background:var(--bg2)} .gal a{position:relative;overflow:hidden;background:var(--bg2)} .gal a:first-child{grid-row:span 2} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .gal a:hover img{transform:scale(1.03)} .gal .more{position:absolute;inset:0;background:rgba(10,12,15,.58);color:#fff;display:grid; place-items:center;font-size:.92rem;font-weight:600;letter-spacing:.02em} .dtl{display:grid;grid-template-columns:minmax(0,1fr) 356px;gap:clamp(32px,4.6vw,72px);align-items:start} .dtl-side{position:sticky;top:100px;background:transparent;border:1px solid var(--hair); border-radius:0;padding:26px;box-shadow:none} .spec{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px; background:var(--bg);border:1px solid var(--hair);border-radius:0;overflow:hidden} .spec div{background:var(--bg);padding:14px 16px;outline:1px solid var(--hair)} .spec dt{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:5px} .spec dd{margin:0;font-size:.94rem;font-weight:600;font-variant-numeric:tabular-nums} .rooms{width:100%;border-collapse:collapse;font-size:.9rem} .rooms th{text-align:left;font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--mute);padding:0 12px 10px 0;border-bottom:1px solid var(--hair2)} .rooms td{padding:10px 12px 10px 0;border-bottom:1px solid var(--hair)} .rooms td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink2)} .pricebox{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .pricebox .big{font-family:var(--sans);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums} .keyfacts{display:flex;gap:22px;flex-wrap:wrap;font-size:.96rem;padding:15px 0; border-block:1px solid var(--hair);margin:18px 0;font-variant-numeric:tabular-nums} .keyfacts b{font-weight:600} .note{background:transparent;border:0;border-left:2px solid var(--ink); border-radius:0;padding:4px 0 4px 16px;font-size:.9rem;color:var(--ink2)} .lightbox{position:fixed;inset:0;background:#0A0C0E;z-index:900;display:none;flex-direction:column} .lightbox.on{display:flex} .lightbox .lb-top{display:flex;justify-content:space-between;align-items:center; padding:16px var(--gut);color:#fff;flex-shrink:0;font-size:.86rem} .lightbox .lb-stage{flex:1;display:grid;place-items:center;padding:0 var(--gut) 8px;min-height:0} .lightbox img{max-height:100%;max-width:100%;object-fit:contain} .lightbox .lb-film{display:flex;gap:6px;overflow-x:auto;padding:12px var(--gut) 20px;flex-shrink:0} .lightbox .lb-film img{height:58px;width:88px;object-fit:cover;border-radius:0;opacity:.5; cursor:pointer;flex-shrink:0;transition:opacity .2s} .lightbox .lb-film img:hover{opacity:.85} .lightbox .lb-film img[aria-current="true"]{opacity:1;outline:2px solid #fff;outline-offset:-2px} .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:0; border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.3);color:#fff;cursor:pointer;font-size:1.3rem; transition:background .2s,border-color .2s} .lb-nav:hover{background:rgba(255,255,255,.14);border-color:#fff} .lb-nav.prev{left:16px}.lb-nav.next{right:16px} .lb-cap{color:#B9BCC0;font-size:.84rem;max-width:70ch;padding:0 var(--gut) 10px;flex-shrink:0} /* -------------------------------------------------------- tiles + tables -- Figures are a ledger, not a row of boxes: hairline-separated columns. */ .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:0; border-top:1px solid var(--hair2)} .tile{background:transparent;border:0;border-bottom:1px solid var(--hair);border-radius:0; padding:20px 22px 20px 0} .tile + .tile{border-left:1px solid var(--hair);padding-left:22px} .tile b{font-family:var(--serif);font-size:clamp(1.9rem,2.6vw,2.35rem);font-weight:400;display:block; line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)} .tile span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute); display:block;margin-top:11px} .tile i{font-style:normal;font-size:.82rem;color:var(--ink2);display:block;margin-top:7px} .tbl{width:100%;border-collapse:collapse;font-size:.9rem} .tbl th{text-align:left;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute); font-weight:600;padding:0 16px 11px 0;border-bottom:1px solid var(--hair2);white-space:nowrap} .tbl td{padding:12px 16px 12px 0;border-bottom:1px solid var(--hair);vertical-align:top} .tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums;padding-right:0} .tbl tbody tr{transition:background .15s} .tbl tbody tr:hover td{background:var(--surf2)} .bar{height:3px;border-radius:0;background:var(--ink);min-width:2px} .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ------------------------------------------------------------ misc blocks -- */ .plate{aspect-ratio:4/3;border-radius:0;overflow:hidden;background:var(--bg2);position:relative} .plate img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .hoodcard{position:relative;border-radius:0;overflow:visible;background:transparent;border:0; display:flex;flex-direction:column} .hoodcard .plate{aspect-ratio:5/4;flex:0 0 auto} .hoodcard:hover .plate img{transform:scale(1.03)} .hoodcard .t{padding:14px 0 0;display:flex;flex-direction:column;flex:1} .hoodcard h3{font-size:1.06rem} .hoodcard .m{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:var(--mute); margin-top:auto;padding-top:11px;border-top:1px solid var(--hair);font-variant-numeric:tabular-nums; min-height:calc(11px + 3 * 1.5em + 6px)} .hoodcard .t > p{margin-bottom:12px} .faq details{border-bottom:1px solid var(--hair)} .faq summary{cursor:pointer;padding:20px 0;font-weight:600;font-size:1rem;list-style:none; display:flex;justify-content:space-between;gap:24px;align-items:flex-start} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--mono);color:var(--mute);font-size:1.2rem;line-height:1.2} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 0 22px;color:var(--ink2);max-width:72ch} .crumb{font-size:.78rem;color:var(--mute);padding:22px 0 0;letter-spacing:.01em} .crumb a{color:var(--mute);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--hair2)} .crumb a:hover{color:var(--ink)} .pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:0; border:1px solid var(--hair2);font-size:.82rem;background:transparent;min-height:40px; transition:border-color .18s,color .18s} .pill:hover{border-color:var(--ink)} .pill b{font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums} .pill:hover b{color:var(--ink)} .pillrow{display:flex;flex-wrap:wrap;gap:8px} .split-cta{display:grid;grid-template-columns:1fr 1fr;gap:0;border:0;border-top:1px solid var(--ink); border-radius:0;overflow:visible} .split-cta > div{padding:36px 0 0} .split-cta > div + div{border-left:1px solid var(--hair);background:transparent;padding-left:clamp(24px,4vw,56px)} .split-cta > div:first-child{padding-right:clamp(24px,4vw,56px)} form.lead{display:grid;gap:16px} form.lead label{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase; color:var(--mute);font-weight:600;margin-bottom:7px} form.lead input,form.lead textarea,form.lead select{width:100%;padding:13px 14px; border:1px solid var(--hair2);border-radius:var(--rs);background:var(--bg);color:var(--ink); min-height:48px;transition:border-color .18s} form.lead input:hover,form.lead textarea:hover,form.lead select:hover{border-color:var(--mute)} form.lead input:focus,form.lead textarea:focus,form.lead select:focus{border-color:var(--ink); outline:1px solid var(--ink);outline-offset:-2px} form.lead input:user-invalid,form.lead textarea:user-invalid{border-color:var(--hot)} form.lead textarea{min-height:112px;resize:vertical} form.lead .consent{font-size:.8rem;color:var(--mute);display:flex;gap:10px;align-items:flex-start; text-transform:none;letter-spacing:0;font-weight:400} form.lead .consent input{width:auto;min-height:auto;margin-top:3px} form.lead .err{color:var(--hot);font-size:.82rem} form.lead .ok{color:var(--ok);font-size:.9rem;font-weight:600} /* ---------------------------------------------------------------- footer -- */ footer.site{padding:clamp(56px,6vw,88px) 0 32px;border-top:1px solid var(--ink);background:var(--bg)} footer.site .cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:clamp(24px,3vw,40px)} footer.site h2.fcol{font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mute);margin:0 0 15px;font-weight:600;line-height:1.4} footer.site a{display:block;padding:5px 0;font-size:.87rem;color:var(--ink2)} footer.site .legal a{display:inline;padding:0;font-size:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px} footer.site a:hover{color:var(--ink)} .legal{margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--hair); font-size:.76rem;color:var(--mute);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} .attrib{font-size:.785rem;color:var(--ink2);line-height:1.65;max-width:76ch} .mlsmark{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;color:var(--mute)} .fcontact{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--ink2);margin-top:8px} .fcontact span{white-space:nowrap} .fcontact a{display:inline;padding:0} .fcontact a+a::before{content:'·';margin:0 10px 0 8px;color:var(--faint);text-decoration:none;display:inline-block} .remaxmark{margin:0 0 16px;line-height:0} .remaxmark img{width:112px;height:auto;display:block} .remaxmark .on-dark{display:none} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .remaxmark .on-light{display:none} :root:not([data-theme="light"]) .remaxmark .on-dark{display:block} } html[data-theme="dark"] .remaxmark .on-light{display:none} html[data-theme="dark"] .remaxmark .on-dark{display:block} /* -------------------------------------------------------- build sequence -- */ #buildstage{position:relative;height:100svh;overflow:hidden;background:#0A0C0E} .bposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease)} [data-mode="live"] .bposter{opacity:0;pointer-events:none} [data-mode="static"] #buildstage{height:auto;aspect-ratio:16/10;max-height:78svh} [data-mode="static"] .bstep,[data-mode="static"] .bprog,[data-mode="static"] .bphase,[data-mode="static"] .bskip,[data-mode="static"] #buildcanvas{display:none} #buildcanvas{position:absolute;inset:0;width:100%;height:100%;display:block} .bstep{position:absolute;left:0;right:0;bottom:0;padding:28px 0 36px; background:linear-gradient(180deg,transparent,rgba(6,8,10,.88) 44%);color:#fff;pointer-events:none} .bstep .n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:rgba(255,255,255,.7)} .bstep h3{color:#fff;margin:10px 0 6px;font-size:clamp(1.3rem,2.4vw,1.9rem)} .bstep p{color:rgba(255,255,255,.78);max-width:56ch;font-size:.94rem;margin:0} .bprog{position:absolute;left:0;right:0;top:76px;height:2px;background:rgba(255,255,255,.14)} .bprog i{display:block;height:100%;background:#fff;width:0} .bphase{position:absolute;right:var(--gut);top:96px;display:flex;flex-direction:column;gap:8px;align-items:flex-end} .bphase span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:rgba(255,255,255,.55); transition:color .3s} .bphase span.on{color:#fff} .bfall{padding:0} .blist{counter-reset:s;display:grid;gap:0} .blist li{list-style:none;display:grid;grid-template-columns:64px 1fr;gap:22px;padding:22px 0; border-bottom:1px solid var(--hair)} .blist li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono); font-size:.78rem;color:var(--mute)} .blist h4{margin:0 0 6px} .blist p{margin:0;color:var(--ink2);font-size:.92rem;grid-column:2} .bskip{position:absolute;left:var(--gut);top:94px;z-index:5} /* ============================================================================ MOTION POLICY --------------------------------------------------------------------------- Motion is spent in four places only: page transitions, the hero crossfade, image hover, and interface state (nav rule, filters, gallery). Scroll-driven reveals are gone — every element that used to wait for an observer is now visible at rest, which also means a shared link, a thumbnail and a reader with JS disabled all see a finished page. ========================================================================= */ .rv,.rv[data-rv="left"],.rv[data-rv="scale"],.rv-st > *, html.motion .rv,html.motion .rv-st > *{opacity:1;transform:none;transition:none} .grain{display:none} @view-transition{navigation:auto} @media (prefers-reduced-motion: no-preference){ ::view-transition-old(root){animation:vt-out .22s var(--ease) both} ::view-transition-new(root){animation:vt-in .3s var(--ease) both} } @keyframes vt-out{to{opacity:0}} @keyframes vt-in{from{opacity:0}to{opacity:1}} html.pageout body{opacity:0;transition:opacity .14s ease} html.motion body{transition:opacity .2s ease} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important; scroll-behavior:auto !important} .hero-bg img{transition:opacity .3s} } /* ---------------------------------------------------------- one accent ---- The per-page hue rotation is gone. A site that changes its accent colour on every page reads as a template with a variable filled in; one system reads as one publication. --accent2 stays as a token so data graphics keep their hook, and the second data series is the neutral --clay-l. */ html{--accent2:var(--ink); --accent2-tx:var(--ink)} ::selection{background:var(--ink);color:var(--bg)} .ink-band ::selection{background:#fff;color:#101316} .bar{background:var(--accent2)} .tile b{color:var(--ink)} .ink-band .tile b{color:#fff} /* ------------------------------------------------------- listing: photos -- */ .allph{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px} .allph a{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:0; background:var(--bg2);content-visibility:auto;contain-intrinsic-size:260px 195px} .allph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .allph a:hover img{transform:scale(1.03)} .allph .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:.72rem;color:#fff; background:linear-gradient(transparent,rgba(8,10,12,.76));opacity:0;transition:opacity .25s} .allph a:hover .cap,.allph a:focus-visible .cap{opacity:1} /* --------------------------------------------------------- listing: tour -- */ .tourbox{position:relative;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:#0A0C0E} .tourbox img{width:100%;height:100%;object-fit:cover;opacity:.66} .tourbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .tourplay{position:absolute;inset:0;margin:auto;width:max-content;height:max-content; display:inline-flex;align-items:center;gap:11px;padding:15px 28px;border-radius:0;border:0; background:#fff;color:#101316;font-weight:600;font-size:.92rem;cursor:pointer;min-height:50px; transition:background .2s} .tourplay:hover{background:rgba(255,255,255,.86)} /* ---------------------------------------------------------- mortgage calc -- */ .mcalc label{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase; color:var(--mute);font-weight:600;margin-top:14px} .mcalc input,.mcalc select{width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--hair2); border-radius:var(--rs);background:var(--bg);min-height:46px;font-variant-numeric:tabular-nums} .mcalc input:focus,.mcalc select:focus{border-color:var(--ink);outline:1px solid var(--ink);outline-offset:-2px} /* ------------------------------------------------------------ photo rails -- */ .railwrap{overflow:hidden;border-block:1px solid var(--hair);background:var(--bg)} .rail{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x proximity;padding:0;scrollbar-width:thin} .rail .rl{position:relative;flex:0 0 auto;width:min(340px,72vw);aspect-ratio:4/3;border-radius:0; overflow:hidden;scroll-snap-align:start;background:var(--bg2)} .rail img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .rail .rl:hover img{transform:scale(1.03)} .rail .rl span{position:absolute;left:0;bottom:0;color:#fff;font-size:.74rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase;background:rgba(12,14,17,.68);padding:7px 11px} .commstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0} .commstrip a{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:0;background:var(--bg2)} .commstrip img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .commstrip a:hover img{transform:scale(1.03)} .commstrip span{position:absolute;left:0;bottom:0;color:#fff;font-size:.74rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase;background:rgba(12,14,17,.68);padding:7px 11px} @media (max-width:760px){.commstrip{grid-template-columns:repeat(2,1fr)}} /* ------------------------------------------------------- home: two ways ---- Two routes into the market, set as facing pages rather than two cards. */ .waygrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ink)} .way{display:flex;flex-direction:column;border:0;border-radius:0;background:transparent; padding:34px 0 0;transition:none} .way + .way{border-left:1px solid var(--hair);padding-left:clamp(26px,4vw,64px)} .waygrid > .way:first-child{padding-right:clamp(26px,4vw,64px)} .way:hover{transform:none;box-shadow:none} .way .mono{color:var(--mute)} .way h3{margin-top:14px;font-size:clamp(1.2rem,1.8vw,1.5rem)} .way p{margin-top:14px;color:var(--ink2);font-size:.94rem;max-width:46ch} .waycta{display:inline-flex;gap:10px;align-items:center;margin-top:22px;font-weight:600;font-size:.89rem; padding-bottom:7px;border-bottom:1px solid var(--ink);align-self:flex-start; transition:gap .2s var(--ease)} .way:hover .waycta{gap:15px} .waycta b{font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums} @media (max-width:820px){ .waygrid{grid-template-columns:1fr} .way + .way{border-left:0;border-top:1px solid var(--hair);padding-left:0;margin-top:30px;padding-top:30px} .waygrid > .way:first-child{padding-right:0} } /* --------------------------------------------------------------- land ------ */ .landhero{position:relative;overflow:hidden} .landhero .parcels{position:absolute;right:-40px;top:-10px;width:min(52vw,580px);opacity:.42; color:var(--hair2);pointer-events:none;-webkit-mask-image:linear-gradient(215deg,#000 45%,transparent 78%); mask-image:linear-gradient(215deg,#000 45%,transparent 78%)} .landhero .wrap{position:relative} .parcels .pg rect,.parcels .pf rect{opacity:1;animation:none} /* ----------------------------------------------------------- ring map ------ */ .ringmap{margin-top:28px;border:1px solid var(--hair);border-radius:0;background:transparent; padding:18px 18px 12px} .ringmap svg{width:100%;height:auto;display:block} .ringmap circle{cursor:pointer;opacity:1;transform:none;transition:opacity .25s} .ringmap a:hover circle,.ringmap a:focus circle{stroke:var(--ink);stroke-width:2} .ringmap text{font-family:var(--sans);font-size:12.5px;fill:var(--ink2)} .ringmap .rm-key{display:flex;gap:20px;align-items:center;padding:12px 6px 4px;flex-wrap:wrap; font-size:.82rem;color:var(--mute)} .ringmap .rm-key i{display:inline-block;width:10px;height:10px;border-radius:0;margin-right:7px} .rm-r1{fill:#C43C3C;background:#C43C3C} .rm-r2{fill:var(--ink);background:var(--ink)} .rm-r3{fill:var(--mute);background:var(--mute);fill-opacity:.55} .schmap rect{transition:opacity .25s} .sm-cbe{fill:var(--ink);background:var(--ink)} .sm-ccsd{fill:#C43C3C;background:#C43C3C} .sm-other{fill:var(--mute);background:var(--mute);fill-opacity:.6} @media (max-width:640px){.ringmap .rm-key span:last-child{display:none}} .soldtbl .yr th{font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.02em; padding-top:30px;border-bottom-width:1px;border-bottom-color:var(--ink);color:var(--ink)} .tbl td.mls{font-family:var(--mono);font-size:.76rem;color:var(--mute)} /* ------------------------------------------------------------ consent bar -- */ .cbar{position:fixed;left:0;right:0;bottom:0;z-index:800;display:flex;gap:22px; align-items:center;justify-content:center;flex-wrap:wrap; padding:16px var(--gut);background:var(--bg);border-top:1px solid var(--ink);box-shadow:var(--sh-lg)} .cbar p{margin:0;font-size:.86rem;color:var(--ink2);max-width:70ch} .cbar div{display:flex;gap:10px;flex-shrink:0} .cbar[hidden]{display:none} .savelink{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--hair2); color:var(--ink);text-decoration:none;font-family:var(--mono);font-size:.8rem} .savelink:hover,.savelink:focus-visible{border-color:var(--ink)} .cmp th[scope=row]{white-space:nowrap;text-align:left;font-weight:500;color:var(--mute)} .cmp thead th.n{text-align:right;vertical-align:bottom} .cmp thead th.n a{white-space:normal} .cmp td,.cmp th{vertical-align:top} @media(max-width:640px){ .savelink span:not(.sr){min-width:1ch} } /* --- a listing that is still being built ------------------------------- */ .bdg.soon{background:var(--brass);color:var(--bg);border-color:var(--brass)} .stageband{margin-top:20px;border:1px solid var(--hair2);padding:18px 20px;background:var(--surf2)} .stageband .mono{margin:0 0 12px;color:var(--ink2)} .stageband dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:0} .stageband dt{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)} .stageband dd{margin:4px 0 0;font-size:1.02rem;font-weight:500} .stageband .mute{margin:14px 0 0;font-size:.82rem;max-width:68ch;color:var(--ink2)} /* --- section nav -------------------------------------------------------- */ .secnav{position:sticky;top:var(--hdr,64px);z-index:40;background:var(--bg);border-bottom:1px solid var(--hair)} .secnav .wrap{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none} .secnav .wrap::-webkit-scrollbar{display:none} .secnav a{padding:13px 0;font-size:.86rem;color:var(--mute);text-decoration:none;white-space:nowrap; border-bottom:2px solid transparent} .secnav a:hover,.secnav a:focus-visible{color:var(--ink);border-bottom-color:var(--ink)} /* --- what an image actually is ------------------------------------------ */ .gal a,.allph a{position:relative} .mtag{position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em; text-transform:uppercase;background:rgba(12,14,17,.78);color:#fff;padding:4px 8px;pointer-events:none} .mtag-plan{background:rgba(255,255,255,.94);color:#101418} /* --- areas, highlights, plans ------------------------------------------- */ .areagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;margin-top:26px; border-top:1px solid var(--hair);padding-top:20px} .areagrid dt{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)} .areagrid dd{margin:5px 0 0;font-size:1.3rem;font-family:var(--mono)} .areagrid i{display:block;margin-top:4px;font-style:normal;font-size:.8rem;color:var(--ink2);font-family:var(--sans)} .scroll-x:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .hlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:24px} .hlgrid>div{border-left:2px solid var(--brass);padding-left:14px} .hlgrid b{display:block;font-size:.98rem} .hlgrid span{display:block;margin-top:4px;font-size:.86rem;color:var(--mute)} .listcta{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .listcta .mute{font-size:.82rem;max-width:34ch} .floorlist{display:flex;gap:26px;flex-wrap:wrap;list-style:none;padding:0;margin:14px 0 0} .floorlist li{display:flex;flex-direction:column} .floorlist b{font-size:.95rem} .floorlist span{font-family:var(--mono);font-size:.84rem;color:var(--mute);margin-top:2px} .planfig{margin:20px 0 0} .planfig{max-width:860px} .planfig a{display:block;position:relative;background:#fff;border:1px solid var(--hair2)} .planfig img{width:100%;height:auto;display:block} .planzoom{position:absolute;right:12px;bottom:12px;background:var(--ink);color:var(--bg); font-size:.78rem;padding:7px 12px} .planfig figcaption{margin-top:10px;font-size:.83rem;max-width:74ch} .lmap{height:min(52svh,420px);margin-top:16px;border:1px solid var(--hair2)} /* --- the action follows you on a phone ---------------------------------- */ .stickycta{display:none} @media(max-width:760px){ .stickycta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:12px;align-items:center; justify-content:space-between;padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:var(--bg);border-top:1px solid var(--hair2);box-shadow:0 -6px 24px rgba(0,0,0,.10)} .stickycta span{font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stickycta b{font-family:var(--mono)} .has-cbar .stickycta{bottom:var(--cbar-h,96px)} .secnav{display:none} } [hidden]{display:none !important} @media (max-width:640px){.cbar{padding:14px 18px;gap:14px}.cbar p{font-size:.82rem}.cbar div{width:100%} .cbar .btn{flex:1}} @media print{.cbar{display:none !important}} /* ------------------------------------------ Karen: the redevelopment cycle -- */ .cycwrap{display:grid;gap:0} .cyc{background:transparent;border:0;border-top:1px solid var(--hair);border-radius:0; padding:clamp(26px,3vw,42px) 0;box-shadow:none} .cycwrap > .cyc:first-child{border-top:1px solid var(--ink)} .cyc header{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px; padding-bottom:20px;border-bottom:1px solid var(--hair)} .cyc header h3{font-family:var(--sans);font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:600; letter-spacing:-.012em;margin:0;flex:1 1 auto} .cyc header .eyebrow{flex:0 0 100%;margin:0 0 4px} .cdur{font-size:.76rem;color:var(--mute);font-variant-numeric:tabular-nums; border:1px solid var(--hair2);border-radius:0;padding:5px 12px;white-space:nowrap} .cgrid{display:grid;grid-template-columns:1fr 52px 1fr;gap:0;margin-top:26px;align-items:start} .cside{min-width:0} .clab{font-family:var(--sans);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase; color:var(--mute);margin:0 0 16px;font-weight:600} .clist{list-style:none;margin:0;padding:0;display:grid;gap:20px} .clist li{min-width:0} .caddr{font-family:var(--sans);font-weight:600;font-size:1rem;margin:0;letter-spacing:-.008em} .cmeta{font-size:.82rem;color:var(--mute);margin:4px 0 10px;font-variant-numeric:tabular-nums} .cyc-bar{display:block;height:4px;border-radius:0;background:var(--hair2)} .cyc-bar.is-new{background:var(--ink)} .cwhen{font-size:.84rem;color:var(--ink2);margin:10px 0 0;font-variant-numeric:tabular-nums} .cwhen b{font-weight:600;color:var(--ink)} .carrow{display:flex;flex-direction:column;align-items:center;align-self:stretch;padding-top:28px} .carrow span{display:block;width:1px;flex:1 1 auto;background:var(--hair);position:relative} .carrow span::after{content:'';position:absolute;left:50%;top:64px;width:20px;height:20px; transform:translate(-50%,-50%) rotate(45deg);border-top:1px solid var(--ink); border-right:1px solid var(--ink);border-radius:0;background:var(--bg);box-sizing:border-box} .csplit{margin:18px 0 0;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase; color:var(--mute);font-weight:600} .grph{font-family:var(--sans);font-weight:600;font-size:1.15rem;margin:40px 0 0; display:flex;align-items:baseline;gap:12px} .grph span{font-family:var(--sans);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase; color:var(--mute);border:1px solid var(--hair2);border-radius:0;padding:4px 10px;font-weight:600} .grpn{margin:10px 0 18px;font-size:.9rem;max-width:70ch;color:var(--ink2)} @media(max-width:760px){ .cgrid{grid-template-columns:1fr;gap:0} .carrow{flex-direction:row;padding:18px 0;align-self:auto;align-items:stretch} .carrow span{width:100%;height:1px;flex:0 0 auto} .carrow span::after{transform:translate(-50%,-50%) rotate(135deg)} } /* ------------------------------------------------- Karen: cycle band figure -- */ .cycband{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,80px);align-items:center} .cycfig{margin:0;display:grid;gap:0} .cycfig > div{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:baseline; padding:20px 0;border-bottom:1px solid var(--hair)} .cycfig > div:first-child{border-top:1px solid var(--hair2)} .cycfig dt{font-family:var(--serif);font-size:clamp(2.1rem,3.6vw,3rem);line-height:.92; font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums; color:var(--ink);min-width:2.2ch;text-align:right} .cycfig dd{margin:0;font-size:.92rem;color:var(--ink2);line-height:1.4;max-width:32ch} .figbar{display:block;height:3px;margin-top:12px;border-radius:0;background:var(--ink); transform:none} @media(max-width:860px){.cycband{grid-template-columns:1fr;gap:36px}.cycfig dt{font-size:2.3rem}} /* --------------------------------------- infill vs blended $/sq ft chart ---- */ .ppsffig{margin:28px 0 0} .ppsffig figcaption{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:18px; font-size:.82rem;color:var(--ink2)} .ppsffig figcaption span{display:flex;align-items:center;gap:8px} .ppsffig figcaption i{width:10px;height:10px;border-radius:0;flex:0 0 auto} .k-inf{background:var(--ink);border:1px solid var(--ink)} .k-bl{background:var(--bg);border:1.5px solid var(--clay-l)} .rb-key{margin-left:auto;color:var(--mute)} .rbchart{display:grid;gap:0} .rb{display:grid;grid-template-columns:minmax(120px,190px) 1fr 64px;align-items:center;gap:16px;height:34px;border-bottom:1px solid var(--hair);color:inherit;text-decoration:none} .rb:hover,.rb:focus-visible{background:var(--surf2)} .rb-n{font-size:.86rem;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rb-bar{position:relative;height:14px} .rb-bar i{position:absolute;left:0;top:0;height:14px;background:var(--ink)} .rb-bar b{position:absolute;top:-2px;margin-left:8px;font-family:var(--mono);font-size:.76rem;font-weight:500;font-variant-numeric:tabular-nums} .rb-g{font-family:var(--mono);font-size:.78rem;text-align:right;color:var(--mute);font-variant-numeric:tabular-nums} .rb-g.up{color:var(--ink)}.rb-g.dn{color:var(--clay)} .rb-more{display:none}.rb-open .rb-more{display:grid} @media(max-width:640px){.rb{grid-template-columns:110px 1fr 52px;gap:10px}.rb-n{font-size:.78rem}} .gchart{display:block;min-width:760px;max-width:100%;height:auto;font-family:var(--sans)} .gchart a{cursor:pointer} .gax{stroke:var(--hair);stroke-width:1} .gtk,.ghd{fill:var(--mute);font-size:10px;letter-spacing:.09em} .ghd{font-weight:600} .gnm{fill:var(--ink);font-size:11.5px} .gvl{fill:var(--ink);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums} .gvm{fill:var(--mute);font-size:11.5px;font-variant-numeric:tabular-nums} .gvg{font-size:11px;font-variant-numeric:tabular-nums;font-weight:600} .gvg.is-up{fill:var(--ink)} .gvg.is-dn{fill:var(--clay-l)} .gln{stroke-width:2;stroke-linecap:butt} .gln.is-up{stroke:var(--ink)} .gln.is-dn{stroke:var(--clay-l)} .gdb{fill:var(--bg);stroke:var(--clay-l);stroke-width:1.5} .gdi{fill:var(--ink);stroke:var(--ink);stroke-width:1} .grow{fill:transparent} .gchart a:hover .grow,.gchart a:focus-visible .grow{fill:var(--surf2)} .gchart a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px} .figfoot{margin-top:18px;font-size:.86rem;max-width:78ch;color:var(--ink2)} .k-ln{width:20px !important;height:2px !important;border-radius:0 !important;border:0 !important} .k-ln.k-up{background:var(--ink)} .k-ln.k-dn{background:var(--clay-l)} /* ------------------------------------------------- communities: the index -- */ .secth{font-family:var(--sans);font-weight:600;font-size:1.1rem;margin:clamp(44px,5vw,68px) 0 20px; display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;letter-spacing:-.008em; padding-bottom:14px;border-bottom:1px solid var(--ink)} .secth span{font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase; color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums} .ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:clamp(22px,2.2vw,32px) clamp(18px,1.8vw,26px)} .ctile{display:flex;flex-direction:column;border-radius:0;overflow:visible;background:transparent; border:0;text-decoration:none;color:inherit} .ctile:hover{transform:none;box-shadow:none} .ctile:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .cshot{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg2);position:relative;flex:0 0 auto} .cshot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)} .ctile:hover .cshot img{transform:scale(1.03)} .ctile.noimg .cshot{aspect-ratio:6/1;background:var(--bg2)} .cbody{display:flex;flex-direction:column;flex:1;padding:13px 0 0} .cbody b{display:block;font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:-.008em} .cn{display:block;font-size:.8rem;color:var(--mute);margin-top:4px;margin-bottom:10px; font-variant-numeric:tabular-nums} .cf{display:block;font-size:.78rem;color:var(--mute);margin-top:auto;padding-top:10px; border-top:1px solid var(--hair);font-variant-numeric:tabular-nums} .cf b{display:inline;font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--ink2)} @media(max-width:520px){ .ctiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 14px} .cbody b{font-size:.92rem} } /* -------------------------------------------- Karen: photos on the record -- */ .clist li:has(.cshot-l){display:grid;grid-template-columns:200px 1fr;gap:0 20px;align-items:start} .clist li:has(.cshot-l) > :not(.cshot-l){grid-column:2} .cshot-l{grid-row:1 / span 4;display:block;border-radius:0;overflow:hidden;position:relative; aspect-ratio:4/3;background:var(--bg2);align-self:start} .cshot-l img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)} .cshot-l:hover img{transform:scale(1.03)} .cshot-l span{position:absolute;right:0;bottom:0;color:#fff;font-size:.62rem;font-weight:600; letter-spacing:.07em;text-transform:uppercase;background:rgba(12,14,17,.7);padding:4px 9px;border-radius:0} .cshot-l:focus-visible{outline:2px solid var(--ink);outline-offset:2px} .tthumb{display:block;width:200px;aspect-ratio:4/3;border-radius:var(--rs);overflow:hidden; margin-bottom:0;background:var(--bg2);flex:0 0 auto} .trow{display:flex;align-items:center;gap:14px;min-width:240px} .trow b{display:block} .trow .became{display:block;margin-top:4px} .tthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)} .tthumb:hover img{transform:scale(1.04)} .tthumb:focus-visible{outline:2px solid var(--ink);outline-offset:2px} @media(max-width:760px){ .tthumb{width:128px} .clist li:has(.cshot-l){grid-template-columns:124px 1fr;gap:0 14px} } /* ============================================================================ RESPONSIVE — mobile is laid out on purpose, not scaled down ========================================================================= */ @media (max-width:1180px){ .g4{grid-template-columns:repeat(3,1fr)} .dtl{grid-template-columns:1fr;gap:34px} .dtl-side{position:static} footer.site .cols{grid-template-columns:1fr 1fr 1fr} .ctiles{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))} } @media (max-width:1000px){ .nav,.hcta .btn{display:none} .burger{display:flex} .hbar{height:68px} .mobnav{inset:68px 0 0} .filterbar{top:68px} .g3,.g4{grid-template-columns:repeat(2,1fr)} .g3.feat>:nth-child(n+9){display:none} .split{grid-template-columns:1fr;height:auto} .split .mapcol{display:none;position:fixed;inset:126px 0 0;height:auto;z-index:340;border:0} .split[data-view="map"] .mapcol{display:block} .split[data-view="map"] .listcol{display:none} .viewtoggle{display:block} .has-cbar .viewtoggle{bottom:calc(24px + var(--cbar-h,96px))} .gal{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:4/3} .gal a:not(:first-child){display:none} .gal a:first-child{grid-row:auto} .split-cta{grid-template-columns:1fr} .split-cta > div{padding:28px 0 0} .split-cta > div + div{border-left:0;border-top:1px solid var(--hair);padding-left:0; margin-top:28px;padding-top:28px} .split-cta > div:first-child{padding-right:0} .cycband{grid-template-columns:1fr} } @media (max-width:640px){ body{font-size:16px} h1{font-size:clamp(2.15rem,9vw,2.9rem)} h2{font-size:clamp(1.6rem,6.4vw,2.05rem)} .hbar{gap:12px} .brand span{display:none} .brand b{font-size:.98rem} .bphase{display:none} .bskip{top:86px} /* one column: on a phone a property is a photograph, full width */ .g2,.g3,.g4{grid-template-columns:1fr} .grid{gap:34px} .card .shot{aspect-ratio:3/2} .tiles{grid-template-columns:1fr 1fr} .tile{padding:16px 14px 16px 0} .tile + .tile{padding-left:14px} .tiles > .tile:nth-child(odd){border-left:0;padding-left:0} footer.site .cols{grid-template-columns:1fr 1fr} .hero{min-height:0} .hero-in{padding:120px 0 34px} .hero .sub{font-size:1rem} .hero-cta{margin-top:26px;gap:12px} .hero-cta .btn{flex:1 1 auto} .hero-meta{gap:16px 26px;margin-top:30px;padding-top:16px} .hero-meta > div{flex:1 1 30%} .hero-credit{left:20px;right:18px;bottom:24px;font-size:.55rem;max-width:none;text-align:left;line-height:1.3} .dots{bottom:8px;left:20px} .blist li{grid-template-columns:40px 1fr;gap:14px} .qbar{flex-direction:column;border:0;gap:10px;background:transparent} .qbar input{border:1px solid var(--ink);padding:14px 16px} .qbar .btn{width:100%;border-color:var(--btn)} .cyc header .eyebrow{margin-bottom:2px} .lightbox .lb-film img{height:48px;width:70px} .lb-nav{width:46px;height:46px} .sechead{gap:14px} .filterbar{padding:10px 0;position:static} .fb-in{gap:7px;flex-wrap:wrap;overflow:visible} .fb-in > .fsel:first-child{flex:1 0 100% !important} .fsel > button{padding:8px 12px;min-height:38px;font-size:.82rem} } @media (max-width:400px){ .tiles{grid-template-columns:1fr} .tiles > .tile{border-left:0;padding-left:0} } /* --------------------------------------------------- v12 collapse helpers -- */ @media (max-width:860px){ .split-cta-plain{grid-template-columns:1fr !important} .sellgrid{grid-template-columns:1fr !important} .sellgrid .dtl-side{position:static !important} .split-cta-plain .tiles{grid-template-columns:1fr 1fr} } @media print{ header.site,footer.site,.filterbar,.viewtoggle,.grain,.fav,#buildstage,.cbar{display:none !important} body{background:#fff;color:#000} .card .shot{aspect-ratio:16/10} } /* ============================================================================ Components added with the redesign. Appended last on purpose: these carry the same specificity as the rules they refine, so source order decides — which keeps them out of a specificity arms race with !important. ========================================================================= */ /* the "listed by" mark, in the page rather than on a photograph */ .bdg-inline{display:inline-flex;align-items:center;font-size:.62rem;font-weight:600; letter-spacing:.11em;text-transform:uppercase;padding:5px 10px; border:1px solid var(--ink);color:var(--ink);white-space:nowrap} /* the action that sits opposite a section title */ .sechead-act{display:flex;justify-content:flex-end;align-items:flex-end} /* ---- forms: a label above every field, never a placeholder standing in --- The controls inherit `font:inherit` from the base reset, so each one has to be told explicitly that it is not the label's small uppercase type. */ form.lead > label{display:block;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase; color:var(--mute);font-weight:600;line-height:1.4} form.lead > label > input, form.lead > label > textarea, form.lead > label > select{margin-top:8px;font-size:1rem;line-height:1.5;letter-spacing:0; text-transform:none;font-weight:400;color:var(--ink)} form.lead > label .opt{color:var(--mute);font-weight:400;letter-spacing:.09em} form.lead > label:focus-within{color:var(--ink)} form.lead select{appearance:none;-webkit-appearance:none;background-image: linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px); background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px} @media (max-width:860px){ /* the action moves under the title and reads left, like everything else */ .sechead-act{justify-content:flex-start} } /* ---- touch targets ------------------------------------------------------ Inline links inside a sentence are exempt from the minimum target size and are left alone; these two are not sentences. The card's own link already stretches over the whole card via .stretch. */ .brand{min-height:44px} form.lead .consent input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--ink)} /* Bodoni's hairlines thin out against a dark ground — one weight step back up keeps the display face readable in the ink bands and the hero. */ .ink-band h1,.ink-band h2,.ink-band .cycfig dt,.hero h1{font-weight:500} /* ============================================================================ Brand photography and renderings --------------------------------------------------------------------------- Real photographs of completed infills and studio renderings of unbuilt ones. They are never listing imagery: no address, no price, and every rendering says so on the image itself. ========================================================================= */ /* hero video: sits above the photographs, fades in only once it can play */ .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none} .hero-video.on{opacity:1} .dots [data-video]{display:none} .hero.has-video .dots [data-video]{display:inline-block} @media (prefers-reduced-motion:reduce){.hero-video{display:none}} /* a full-width photograph as a section opener */ .band-img{margin:0;background:var(--bg2)} .band-img .band-in{aspect-ratio:2/1;overflow:hidden} .band-img img,.band-img video{width:100%;height:100%;object-fit:cover;object-position:50% 62%;display:block} .band-video .band-in{aspect-ratio:21/9;background:#0C0E11} .poster-loop{width:100%;height:100%;object-fit:cover;display:block} .pgrid{display:grid;gap:18px;margin-top:26px} .pgrid-3{grid-template-columns:repeat(3,1fr)} .pcell{margin:0}.pcell .plate{aspect-ratio:4/3;overflow:hidden;background:var(--bg2)} .pcell img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)} .pcell:hover img{transform:scale(1.03)} .pcell figcaption{padding:8px 0 0} @media (max-width:860px){.pgrid-3{grid-template-columns:1fr 1fr}} @media (max-width:520px){.pgrid-3{grid-template-columns:1fr}} .band-img figcaption{max-width:var(--wrap);margin:0 auto;padding:12px var(--gut) 0; font-size:.76rem;color:var(--ink2);display:flex;gap:12px;align-items:baseline} .rlabel{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2); border:1px solid var(--hair2);padding:3px 7px;white-space:nowrap} @media (max-width:640px){.band-img .band-in{aspect-ratio:4/3}} /* renderings rail: the label is on the picture, not beside it */ .rail-render .rl{width:min(480px,72vw);aspect-ratio:16/9} .rail-render .rl span{left:0;right:auto;background:rgba(12,14,17,.72)} /* Karen: the photograph shares the tile grid's column */ .kphoto{grid-column:1 / -1;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block; margin-top:0;border-top:1px solid var(--hair)} /* Karen: the "why" column and the photograph on the cycle band */ .why h3{font-size:clamp(1.2rem,1.8vw,1.5rem);margin-top:4px} .why > p:not(.eyebrow){margin-top:14px;color:var(--ink2);font-size:.98rem;line-height:1.6;max-width:52ch} .why .kphoto{margin-top:26px;border-top:0} .cycphoto{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block} /* Karen: three beats instead of a paragraph */ .beats{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .beats li{padding:18px 0;border-bottom:1px solid var(--hair)} .beats h3{font-size:1.02rem;margin:0 0 6px} .beats p{margin:0;color:var(--ink2);font-size:.94rem;line-height:1.55;max-width:48ch} /* Karen: the rendering loop, full width, with a still for reduced motion */ .kvideo-wrap{margin:0;background:#0C0E11;position:relative} .kvideo,.kvideo-still{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;max-height:78vh} .kvideo-still{display:none} .kvideo-wrap figcaption{position:absolute;left:var(--gut);bottom:14px} .kvideo-wrap .rlabel{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(12,14,17,.55)} @media (prefers-reduced-motion:reduce){.kvideo{display:none}.kvideo-still{display:block}} /* Karen: record rows without a licensed photograph get a plate, not a hole */ .tplate{background:var(--bg2);border:1px solid var(--hair)} .est-dash{font-family:var(--sans);font-weight:300;padding:0 .18em} .became{display:block;font-size:.78rem;color:var(--mute);margin-top:3px;font-variant-numeric:tabular-nums} .nav > a,.nav .drop > button{white-space:nowrap} .soldtbl td.mls,.soldtbl th:last-child{padding-left:18px} /* ------------------------------------------------------------- schools --- */ .schf{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .schf + .schf{margin-top:10px} .schf button{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--hair2); background:var(--bg);color:var(--ink2);font:inherit;font-size:.82rem;font-weight:500;cursor:pointer;min-height:40px} .schf button i{font-style:normal;color:var(--mute);font-variant-numeric:tabular-nums;font-size:.76rem} .schf button:hover{border-color:var(--ink);color:var(--ink)} .schf button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)} .schf button[aria-pressed="true"] i{color:var(--bg);opacity:.75} .schcount{margin-top:14px;font-size:.88rem;min-height:1.3em} .schsec h2{font-size:1.8rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px} .schsec h2 small{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:500} .schgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 40px;margin-top:22px; border-top:1px solid var(--ink)} .schc{padding:20px 0 26px;border-bottom:1px solid var(--hair)} .schc h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;display:flex;align-items:baseline;justify-content:space-between;gap:12px} .schc h3 small{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap} .schl{list-style:none;margin:12px 0 0;padding:0} .sch{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--hair);font-size:.9rem} .sch:first-child{border-top:0} .sch b{font-weight:600;color:var(--ink)} .sch .sb{grid-column:2;grid-row:1;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute); white-space:nowrap;padding-top:3px} .sch .sg{grid-column:1;color:var(--ink2);font-variant-numeric:tabular-nums} .sch .sa{grid-column:1 / -1;color:var(--mute);font-size:.82rem} .sch .srate{grid-column:1 / -1;font-size:.78rem;color:var(--ink2);font-variant-numeric:tabular-nums} .sch .srate b{font-weight:600;color:var(--ink)} .sch .srate i{font-style:normal;color:var(--mute)} .schrank td.n,.schrank th.n{padding-right:22px} .schrank td.n:last-child,.schrank th.n:last-child{padding-right:0} .schrank td span{display:block;font-size:.72rem;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;margin-top:2px} .schrank td i{font-style:normal;color:var(--mute)} .sch .sa i{font-style:normal} .sch.out b{font-weight:500;color:var(--ink2)} .schsub{margin:14px 0 0;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);font-weight:600} .schnone{margin:12px 0 0;font-size:.88rem;color:var(--mute)} .schc.empty{display:none} @media (max-width:640px){.schgrid{grid-template-columns:1fr}.schsec h2{font-size:1.5rem}} /* ---------------------------------------------------- mortgage, full --- */ .calcgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start} .mcalc-full{margin-top:22px;max-width:440px} .calcout{border:1px solid var(--hair);padding:22px 24px 24px} .calctiles{grid-template-columns:1fr 1fr} .calctiles .tile:nth-child(2n+1){padding-left:0;border-left:0} .calctiles .tile:nth-child(n+3){padding-top:20px} .calcwarn{margin-top:16px;font-size:.88rem;color:var(--warn);padding:12px 14px;border:1px solid var(--warn)} .calcwarn[hidden]{display:none} @media (max-width:940px){.calcgrid{grid-template-columns:1fr;gap:28px}.mcalc-full{max-width:none}} @media (max-width:480px){.calctiles{grid-template-columns:1fr}.calctiles .tile{padding-left:0;border-left:0}} /* ------------------------------------------- header fit, 1001–1440px --- */ /* Seven no-wrap nav items plus the brand tagline overflowed the bar on ordinary laptops; the bar compresses in two steps before the burger. */ @media (max-width:1440px) and (min-width:1001px){ .nav{gap:14px} .nav > a,.nav .drop > button{font-size:.82rem} header.site .brand > span[aria-hidden]{font-size:.52rem;letter-spacing:.1em} } @media (max-width:1200px) and (min-width:1001px){ header.site .brand > span[aria-hidden]{display:none} .nav{gap:12px} .hcta .btn.sm{padding-inline:14px} } /* ------------------------------------------------------------- rentals -- */ /* The rentals page is the one place on the site that is a shop window rather than a record: big photographs, the rent in plain figures, and what is free right now marked in the one colour the site reserves for good news. */ .rentintro{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:end} .rentstats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0; border-top:1px solid var(--hair);padding-top:18px} .rentstats dt{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.6rem);line-height:1; font-variant-numeric:tabular-nums} .rentstats dt.ok{color:var(--okink)} .rentstats dd{margin:6px 0 0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)} .rentbuild{padding-block:clamp(34px,5vw,64px)} .rentbuild + .rentbuild{border-top:1px solid var(--hair)} .rentgrid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,56px);align-items:start} .rentshot{position:relative;display:block;background:var(--bg2);overflow:hidden;border-radius:var(--rs)} .rentshot img{width:100%;height:auto;display:block;transition:transform .8s var(--ease)} a.rentshot:hover img{transform:scale(1.02)} .rentshot-n{position:absolute;right:10px;bottom:10px;font-size:.66rem;letter-spacing:.08em; text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--surf);color:var(--ink2)} .rentbody h2{font-size:clamp(1.6rem,3vw,2.2rem)} .rentrows{margin-top:26px;border-top:1px solid var(--hair)} .rentrow{padding:18px 0;border-bottom:1px solid var(--hair)} .ru-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .ru-head h3{font-family:var(--sans);font-size:1rem;font-weight:600;margin:0} .ru-n{color:var(--mute);font-weight:500} .ru-facts{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:.82rem;color:var(--ink2); font-variant-numeric:tabular-nums} .ru-rent{margin-top:8px;font-size:1.12rem;font-variant-numeric:tabular-nums} .ru-rent b{font-weight:600} .ru-rent .per{color:var(--mute);font-size:.82rem;margin-left:3px} .ru-rent i{display:block;font-style:normal;font-size:.78rem;color:var(--mute);margin-top:2px} .ru-more{margin-top:8px;font-size:.82rem} .rentnote{margin-top:6px;font-size:.8rem} .bdg.avail{background:var(--okbg);color:var(--okink);border-color:transparent} .bdg.soon{background:var(--warmtint);color:var(--ink2);border-color:transparent} .updated{margin-top:26px;font-size:.78rem;color:var(--mute)} .rentalso{margin-top:6px;font-size:.78rem;color:var(--mute)} .rendcredit{margin-top:8px;font-size:.74rem;letter-spacing:.02em} .rentvid{display:block;background:var(--bg2)} .rentvid video{width:100%;height:auto;display:block} .rentcare{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:22px 0 34px} .rentcare h3{font-size:1.02rem;margin-bottom:8px} .rentcare p{color:var(--ink2);font-size:.95rem;line-height:1.55} @media(max-width:760px){.rentcare{grid-template-columns:1fr;gap:20px}} .rentterms{list-style:none;margin:20px 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 28px} .rentterms li{position:relative;padding-left:20px;color:var(--ink2);font-size:.92rem} .rentterms li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--mute)} .mvin[hidden]{display:none} .rentfacts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px} .rentfacts li{font-size:.78rem;color:var(--ink2);background:var(--tagbg);padding:5px 11px;border-radius:999px} .rentbody > .ru-head{justify-content:space-between} .rentrow .ru-head{justify-content:space-between;align-items:baseline} .rentrow .ru-rent{margin-top:0;flex:0 0 auto} .ru-open{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px} .ru-open li{display:flex;flex-wrap:wrap;align-items:center;gap:9px} .ou{font-size:.82rem;color:var(--ink2)} @media (max-width:900px){ .rentintro,.rentgrid{grid-template-columns:1fr;gap:26px} .rentstats{max-width:none} .rentrow .ru-head{flex-direction:column;align-items:flex-start;gap:4px} } /* two-up 'recently sold' — bigger frames than the three-across grid */ .soldbig .card .shot{aspect-ratio:3/2} @media (max-width:860px){.soldbig{grid-template-columns:1fr}} .iglink{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--hair2); border-radius:var(--rs);color:var(--ink2);flex:0 0 auto} .iglink:hover{color:var(--ink);border-color:var(--ink)} @media (max-width:1000px){.iglink{display:none}} /* ---- the ring maps ------------------------------------------------------- One base shared by /rentals/, /inner-city-calgary/ and /schools/: the City of Calgary's own community boundaries from content/ringmap.json, with the Bow and the Elbow clipped to the land. Scoped under .ringbase because the older dot-plot rules (.ringmap, .rm-r1, .rm-r2, .rm-key) are still global and would otherwise repaint these. SVG text lives inside a scaled viewBox, so at phone width 14px would render at about 6. The media query scales the labels back up in user units and drops what no longer fits. */ .ringbase{margin:22px 0 0;border:1px solid var(--hair);border-radius:14px; padding:10px 12px 0;background:var(--surf)} .ringbase svg{display:block;width:100%;height:auto} .ringbase .rc-c{stroke:var(--hair2);stroke-width:.6;vector-effect:non-scaling-stroke} .ringbase .rc-r3{fill:var(--rm-far)} .ringbase .rc-r2{fill:var(--rm-land)} .ringbase .rc-r1{fill:var(--rm-core)} .ringbase .rc-w{fill:var(--rm-water);stroke:none} .ringbase .rc-dt circle{fill:var(--mute)} .ringbase .rc-dt text{fill:var(--ink2);font:600 10.5px var(--mono);text-anchor:middle; letter-spacing:.09em;text-transform:uppercase} .ringbase .rm-key{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center; padding:10px 2px 12px;font-size:.72rem;color:var(--ink2); border-top:1px solid var(--hair);margin-top:4px} .ringbase .rm-key i{display:inline-block;width:9px;height:9px;border-radius:50%; margin-right:7px;vertical-align:-1px} .ringbase .rm-key .rm-src{margin-left:auto;color:var(--mute)} /* /rentals/ — five linked addresses */ .rentring .rm-b{cursor:pointer} .rentring .rm-b text{font:600 14px var(--sans);fill:var(--ink);fill-opacity:1; paint-order:stroke;stroke:var(--surf);stroke-width:3.5} .rentring .rm-hit{fill:transparent} .rentring .rm-dot{stroke:var(--surf);stroke-width:2.5;fill-opacity:1;transition:r .12s ease} .rentring .rm-b:hover .rm-dot,.rentring .rm-b:focus-visible .rm-dot{r:8.5} .rentring .rm-b:focus-visible{outline:none} .rentring .rm-b:focus-visible text{text-decoration:underline} .rentring .rm-open .rm-dot,.rentring .rm-key i.rm-open{fill:var(--okink);background:var(--okink)} .rentring .rm-full .rm-dot,.rentring .rm-key i.rm-full{fill:var(--mute);background:var(--mute)} .rentring .rm-soon .rm-dot,.rentring .rm-key i.rm-soon{fill:var(--ink);background:var(--ink)} /* /inner-city-calgary/ — polygons say which ring, dots say how much is live */ .iccring .rc-dot{fill:var(--clay);fill-opacity:.85;stroke:var(--surf);stroke-width:1.5} .iccring a:hover .rc-dot,.iccring a:focus-visible .rc-dot{fill-opacity:1;stroke-width:2.5} .iccring .rc-labels text{font:600 12px var(--sans);fill:var(--ink); paint-order:stroke;stroke:var(--surf);stroke-width:3} .iccring .rm-key i.rc-k1{background:var(--rm-core)} .iccring .rm-key i.rc-k2{background:var(--rm-land)} .iccring .rm-key i.rc-k3{background:var(--rm-far)} .iccring .rm-key i{border:1px solid var(--hair2)} /* /schools/ — squares so a school never reads as a listing dot */ .schring .schmarks rect{stroke:var(--surf);stroke-width:1.2} .schring .sm-cbe{fill:var(--clay)} .schring .sm-ccsd{fill:var(--okink)} .schring .sm-other{fill:var(--mute)} .schring .rm-key i.sm-cbe{background:var(--clay);border-radius:2px} .schring .rm-key i.sm-ccsd{background:var(--okink);border-radius:2px} .schring .rm-key i.sm-other{background:var(--mute);border-radius:2px} @media (max-width:720px){ .rentring .rm-b text{font-size:26px;stroke-width:6} .rentring .rm-av{display:none} .rentring .rm-dot{r:11;stroke-width:4} .rentring .rm-hit{r:26} .ringbase .rc-dt text{font-size:19px} .iccring .rc-labels{display:none} .ringbase .rm-key .rm-src{margin-left:0;flex-basis:100%} }