/* ============================================================================ THE BUYER SUITE — a port of concept W from the offline design lab (cade-buyer-lab/concepts/W-index.html at e536b79, plus suite-base.css and tilecard.js, which W composes). This is a copy, not an adaptation. The structure, the class names, the proportions, the animations and the comments that explain a decision are W's. The one thing that changed is the palette: W's near-white/electric-blue ground is swapped for CAD-E's 60/30/10 — #F6EEEA ground, #353331 ink, #19433C buyer accent — and W's coral, which was a second accent, folds into that one accent because the palette allows one per suite. What did NOT change colour: the three lane hues (green for walked, orange for imminent, violet for wanted) and the verdict tints. Those are semantic rather than brand — they say which pile a home is in, not whose product this is. Everything is scoped under #caBuyers, and W's three body-level states (open / prop / picking / field) are classes on that element instead of on , because this suite shares a page with the seller one. ============================================================================ */ #caBuyers{ /* W's own near-white ground, which as of 2026-09-09 is the whole app's ground -- Brendan asked for it to carry to production for both suites, so these match #cadeApp's --iv ramp rather than sitting on an ivory of their own. The ink is the 30% from the brand pass; W's own is #101119. */ --pa:#F9F9FB; --pa2:#F1F2F6; --pa3:#E3E5EC; --card:#FFFFFF; --white:#FFFFFF; --ink:#353331; --gr2:#4F4B49; --gr3:#6F6B69; --gr4:#8B8F9F; --ac:#19433C; --ac2:#2F6B5F; --ac-rgb:25,67,60; --ice:#E4EDEA; /* the same black as the top bar */ --chrome:#07070F; --onchrome:#F4F4F7; --rail:#F1F2F6; --railhov:#FFFFFF; --railsel:#FFFFFF; --railselfg:#19433C; --ok:#0A6B5F; /* the lane ramp: one family, three weights. Walked it is the solid one, wants to see the faintest, so the three lanes read as a progression rather than an argument. */ --lc-seen:#19433C; --lc-going:#2F6B5F; --lc-wanting:#8FB3AB; --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.46,.44,1); } #caBuyers button,#caBuyers input,#caBuyers textarea,#caBuyers select{ font:inherit; color:inherit; border:0; background:none; } #caBuyers button{ cursor:pointer; } #caBuyers .serif{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; } /* The two panes. #caBuyers is the stage W puts under its top strip; CAD-E's own header sits above this, so there is no .top here. */ #caBuyers{ position:relative; height:100%; overflow:hidden; background:var(--pa); color:var(--ink); } /* ── buyers landing, then rail ─────────────────────────────────────────── */ #cbPeople{ position:absolute; inset:0; overflow:auto; padding:46px 52px 80px; } #caBuyers .galhead{ max-width:760px; margin-bottom:34px; } #caBuyers .galhead h1{ font-size:52px; line-height:1; letter-spacing:-.03em; margin:0; } #caBuyers .galhead p{ color:var(--gr3); font-size:15px; margin-top:12px; line-height:1.55; } #caBuyers .ghead{ display:flex; align-items:center; gap:12px; margin:0 0 14px; } #caBuyers .ghead h2{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--gr3); margin:0; } #caBuyers .ghead .gn{ font-size:11px; font-weight:800; color:var(--gr4); background:var(--pa2); border-radius:99px; padding:2px 9px; } #caBuyers .ghead::after{ content:''; flex:1; height:1px; background:var(--pa3); } #caBuyers .gsec{ margin-bottom:34px; } #caBuyers .gwrap{ display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:12px; } #caBuyers .person{ position:relative; cursor:pointer; user-select:none; overflow:hidden; text-align:left; background:var(--card); border-radius:26px; padding:20px 22px 18px; box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 20px rgba(0,0,0,.05); transition:transform .38s var(--spring),box-shadow .34s var(--ease),background .25s, padding .4s var(--ease),border-radius .4s var(--ease); } #caBuyers .person::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:hsl(var(--gh) 52% 48%); transition:width .35s var(--ease),background .25s; } #caBuyers .person:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,.14); } #caBuyers .pname{ font-size:18px; font-weight:700; letter-spacing:-.018em; line-height:1.22; transition:font-size .4s var(--ease),color .25s; } #caBuyers .pband{ color:var(--gr3); font-size:12.5px; margin-top:7px; line-height:1.45; } #caBuyers .pmeta{ display:flex; gap:6px; margin-top:13px; flex-wrap:wrap; } #caBuyers .ptag{ font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:99px; background:hsl(var(--gh) 46% 92%); color:hsl(var(--gh) 52% 28%); } #caBuyers .ptag.plain{ background:var(--pa2); color:var(--gr3); } #caBuyers .gempty{ font-size:13px; color:var(--gr4); font-style:italic; } #caBuyers.open #cbPeople{ inset:0 auto 0 0; width:228px; padding:0; background:var(--rail); border-right:1px solid var(--pa3); overflow-y:auto; } #caBuyers.open .galhead{ position:sticky; top:0; z-index:3; margin:0; padding:16px 14px 12px; background:var(--rail); border-bottom:1px solid var(--pa3); max-width:none; } #caBuyers.open .galhead h1{ font-size:12px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--gr3); font-family:'Plus Jakarta Sans',system-ui,sans-serif; } #caBuyers.open .galhead p{ display:none; } #caBuyers.open .gsec{ margin:0; padding:12px 10px 4px; } #caBuyers.open .gsec + .gsec{ border-top:1px solid var(--pa3); } #caBuyers.open .ghead{ margin:0 4px 8px; } #caBuyers.open .ghead h2{ font-size:8.5px; letter-spacing:.16em; color:var(--gr4); } #caBuyers.open .ghead .gn{ font-size:9.5px; padding:1px 7px; background:transparent; } #caBuyers.open .ghead::after{ display:none; } #caBuyers.open .gwrap{ display:block; } #caBuyers.open .person{ padding:9px 12px; border-radius:9px; background:transparent; box-shadow:none; display:flex; align-items:center; gap:10px; margin-bottom:2px; } #caBuyers.open .person::before{ width:0; } #caBuyers.open .person:hover{ transform:none; background:var(--railhov); box-shadow:none; } #caBuyers.open .person.sel{ background:var(--railsel); box-shadow:0 1px 2px rgba(0,0,0,.10),0 5px 14px rgba(0,0,0,.07); } #caBuyers.open .person.sel::before{ width:3px; background:var(--ac); } #caBuyers.open .pname{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; } #caBuyers.open .person.sel .pname{ font-weight:800; color:var(--railselfg); } #caBuyers.open .pband,#caBuyers.open .pmeta{ display:none; } #caBuyers .rdot{ display:none; width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:hsl(var(--gh) 52% 52%); } #caBuyers.open .rdot{ display:block; } /* ── the record ────────────────────────────────────────────────────────── */ #cbRecord{ position:absolute; inset:0 0 0 228px; overflow:auto; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); } #caBuyers.open #cbRecord{ opacity:1; pointer-events:auto; } #caBuyers .rin{ padding:22px 28px 30px; min-height:100%; display:flex; flex-direction:column; } #caBuyers:not(.prop) .rin{ height:100%; } #caBuyers.prop .rin{ display:block; padding-bottom:60px; } #caBuyers .rhead{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; } #caBuyers .back{ width:32px; height:32px; border-radius:50%; flex:0 0 32px; background:var(--pa2); display:none; place-items:center; color:var(--gr2); font-size:16px; transition:.28s var(--ease); } #caBuyers.prop .back{ display:grid; } #caBuyers .back:hover{ background:var(--chrome); color:var(--onchrome); transform:translateX(-3px); } #caBuyers .rname{ font-size:34px; line-height:1; letter-spacing:-.028em; transition:font-size .4s var(--ease); margin:0; } #caBuyers.prop .rname{ font-size:27px; } #caBuyers .rsub{ color:var(--gr3); font-size:12.5px; margin-top:7px; } #caBuyers .rsub b{ color:var(--ac); font-weight:800; letter-spacing:.1em; font-size:10px; } /* Edit is an addition -- W's head is back / name / close -- so it takes the margin that used to push the close button right, and the two travel together. Left on .close, the pair split and the close dropped to a line of its own the moment the head wrapped. */ #caBuyers .rhead #cbEdit{ margin-left:auto; } #caBuyers .close{ width:32px; height:32px; border-radius:50%; flex:0 0 32px; background:var(--pa2); display:grid; place-items:center; color:var(--gr3); font-size:14px; transition:.3s var(--ease); } #caBuyers.prop .close{ margin-left:auto; } #caBuyers .close:hover{ background:var(--chrome); color:var(--onchrome); transform:rotate(90deg); } #caBuyers .bhead{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--pa3); margin-bottom:16px; } #caBuyers.prop .bhead,#caBuyers.prop .board{ display:none; } #caBuyers .blab{ font-size:9px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; color:var(--gr4); margin-right:4px; } #caBuyers .mk{ padding:9px 18px; border-radius:99px; font-size:12.5px; font-weight:700; color:var(--gr2); background:var(--pa2); transition:.26s var(--ease); } #caBuyers .mk:hover{ background:var(--pa3); } #caBuyers .mk.on{ background:var(--ac); color:#fff; box-shadow:0 6px 20px rgba(var(--ac-rgb),.4); } #caBuyers .fieldbtn{ padding:9px 18px; border-radius:99px; font-size:12.5px; font-weight:700; color:var(--gr2); background:var(--pa2); transition:.26s var(--ease); } #caBuyers .fieldbtn:hover{ background:var(--ac); color:#fff; } #caBuyers .q{ margin-left:auto; width:200px; padding:8px 14px; border-radius:99px; background:var(--pa2); font-size:12.5px; } #caBuyers .q::placeholder{ color:var(--gr4); } #caBuyers .q:focus{ outline:0; box-shadow:0 0 0 2px var(--chrome); } #caBuyers .qn{ font-size:11px; font-weight:700; color:var(--gr4); } #caBuyers.picking .q,#caBuyers.picking .qn{ display:none; } #caBuyers .strip{ display:none; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 18px; margin-bottom:16px; border-radius:18px; background:var(--chrome); color:var(--onchrome); animation:cb-drop .45s var(--spring); } @keyframes cb-drop{ from{ opacity:0; transform:translateY(-9px); } } #caBuyers.picking .strip{ display:flex; } #caBuyers .strip .lead{ font-size:13px; } #caBuyers .strip .lead b{ font-weight:800; } #caBuyers .strip .n{ background:rgba(255,255,255,.18); border-radius:99px; padding:3px 11px; font-size:12px; font-weight:800; } #caBuyers .strip .sp{ margin-left:auto; display:flex; gap:8px; } #caBuyers .ghost{ padding:8px 15px; border-radius:99px; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.8); background:rgba(255,255,255,.12); transition:.25s; } #caBuyers .ghost:hover{ background:rgba(255,255,255,.24); color:#fff; } #caBuyers .go{ padding:8px 19px; border-radius:99px; font-size:12.5px; font-weight:800; background:var(--ac2); color:#fff; transition:.25s; } #caBuyers .go:hover{ background:var(--ac); box-shadow:0 0 24px rgba(var(--ac-rgb),.5); } #caBuyers .go:disabled{ opacity:.4; cursor:default; } /* ── one wide list, grouped ────────────────────────────────────────────── */ #caBuyers .board{ flex:1; min-height:0; display:flex; flex-direction:column; gap:24px; overflow-y:auto; padding-right:2px; } #caBuyers .board::-webkit-scrollbar{ width:7px; } #caBuyers .board::-webkit-scrollbar-thumb{ background:var(--pa3); border-radius:7px; } #caBuyers .lhead{ position:sticky; top:0; z-index:3; background:var(--pa); padding:4px 2px 0; border-bottom:2px solid var(--lc); } #caBuyers .ltop{ display:flex; align-items:baseline; gap:11px; padding-bottom:9px; } #caBuyers .lhead h3{ font-size:15px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:0; } #caBuyers .lhead .n{ font-size:12px; font-weight:800; color:var(--lc); } #caBuyers .addbtn{ font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--gr3); padding:3px 10px; border-radius:99px; background:var(--pa2); transition:.22s var(--ease); } #caBuyers .addbtn:hover{ background:var(--ac); color:#fff; } #caBuyers .lsub{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--gr4); } #caBuyers .lane.over .drop{ background:var(--ice); border-radius:12px; box-shadow:inset 0 0 0 2px var(--lc); } #caBuyers .drop{ min-height:54px; padding-top:2px; } #caBuyers .lempty{ font-size:11.5px; color:var(--gr4); font-style:italic; padding:14px 6px; } /* one grid template, shared by the faint header and every row under it */ #caBuyers .colhead,#caBuyers .home{ display:grid; grid-template-columns:44px minmax(0,1.7fr) 108px 52px 52px 94px 96px 68px; gap:13px; align-items:center; } /* the names ride at the foot of the first lane's header, directly on the rule, so they read as the top of the list rather than as a band of their own */ /* 8 not 10: the lane header already carries 2px, and the tracks have to line up with the rows under it exactly */ #caBuyers .colhead{ padding:0 8px 5px; } #caBuyers .colhead>*{ font-size:8.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gr4); white-space:nowrap; text-align:left; } #caBuyers .colhead button{ transition:color .18s var(--ease); position:relative; padding:0; } #caBuyers .colhead button:hover{ color:var(--gr3); } /* the caret only shows on the column being sorted, and points the way the numbers run */ #caBuyers .colhead button::after{ content:''; display:inline-block; width:0; height:0; margin-left:5px; vertical-align:1px; border-left:3px solid transparent; border-right:3px solid transparent; border-top:4px solid currentColor; opacity:0; transition:.18s var(--ease); } #caBuyers .colhead button.sorted{ color:var(--ac); } #caBuyers .colhead button.sorted::after{ opacity:1; } #caBuyers .colhead button.sorted.up::after{ transform:rotate(180deg); } #caBuyers .home{ position:relative; padding:8px 10px; border-radius:10px; cursor:pointer; border-bottom:1px solid var(--pa3); transition:background .2s,transform .28s var(--spring),box-shadow .28s var(--ease),opacity .3s; } #caBuyers .home:last-child{ border-bottom:0; } #caBuyers .home.rise{ animation:cb-slide .44s var(--spring) backwards; animation-delay:calc(var(--i,0) * 38ms); } @keyframes cb-slide{ from{ opacity:0; transform:translateX(-12px); } } #caBuyers .home:hover{ background:#fff; box-shadow:0 1px 2px rgba(53,51,49,.07),0 6px 18px rgba(53,51,49,.08); } #caBuyers .home.land{ animation:cb-land .5s var(--spring); } @keyframes cb-land{ 0%{ transform:scale(1.02); background:var(--ice); } 100%{ transform:none; } } #caBuyers .home.out{ display:none; } /* A row waiting on its verdict gives up the numeric columns for the question. Three pills do not fit in the 68px the verdict chip normally occupies, and squeezing them there put them on top of the days-on-market column. */ #caBuyers .home.asking{ grid-template-columns:44px minmax(0,1fr) auto; background:#fff; box-shadow:inset 3px 0 0 var(--lc),0 1px 2px rgba(53,51,49,.07),0 6px 18px rgba(53,51,49,.08); } #caBuyers .home.asking .col{ display:none; } #caBuyers .askv{ display:flex; align-items:center; gap:5px; justify-self:end; } #caBuyers .askl{ font-size:10.5px; font-weight:700; color:var(--gr3); margin-right:4px; white-space:nowrap; } #caBuyers .askv .vb{ font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 9px; border-radius:99px; background:var(--pa2); color:var(--gr3); } #caBuyers .askv .vb:hover{ background:var(--vbg); color:var(--vfg); } #caBuyers .askx{ width:20px; height:20px; border-radius:50%; font-size:13px; line-height:1; color:var(--gr4); background:none; } #caBuyers .askx:hover{ background:var(--pa2); color:var(--ink); } /* A row being dragged, and the lane it is over. */ #caBuyers .home[draggable="true"]{ cursor:grab; } #caBuyers .home.drag{ opacity:.28; cursor:grabbing; } #caBuyers .thumb{ position:relative; width:44px; height:44px; border-radius:9px; overflow:hidden; background:linear-gradient(158deg,hsl(calc(96 + var(--t1) * .62) 26% 76%), hsl(calc(84 + var(--t2) * .70) 24% 50%)); } #caBuyers .thumb svg{ position:absolute; inset:0; width:100%; height:100%; transition:transform .55s var(--spring); } #caBuyers .home:hover .thumb svg{ transform:scale(1.12); } #caBuyers .tbody{ min-width:0; } #caBuyers .haddr{ font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #caBuyers .hstat{ font-size:10px; font-weight:600; color:var(--gr4); margin-top:2px; } #caBuyers .dom{ font-size:10px; } /* the showing time is set where you read it */ #caBuyers .whenrow{ font-size:10.5px; font-weight:800; letter-spacing:.03em; color:var(--gr3); padding:2px 8px; border-radius:99px; background:var(--pa2); transition:.2s var(--ease); } #caBuyers .whenrow.set{ color:var(--ok); background:#DCEAE6; } #caBuyers .whenrow:hover{ box-shadow:inset 0 0 0 1.5px currentColor; } #caBuyers .col{ font-size:12px; font-weight:600; color:var(--gr3); white-space:nowrap; } #caBuyers .col i{ font-style:normal; font-size:14px; font-weight:700; color:var(--ink); } #caBuyers .col.price{ font-size:19px; letter-spacing:-.02em; color:var(--ink); font-weight:400; } #caBuyers .col.bad{ color:#9A3520; } #caBuyers .vchip{ font-size:7.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:99px; background:var(--vbg); color:var(--vfg); justify-self:end; } #caBuyers .quick{ position:absolute; right:10px; top:50%; display:flex; gap:5px; opacity:0; pointer-events:none; background:var(--chrome); padding:6px 9px; border-radius:99px; box-shadow:0 8px 22px rgba(0,0,0,.34); z-index:5; transform:translateY(-50%) scale(.68); transition:.28s var(--spring); } #caBuyers .home:hover .quick{ opacity:1; pointer-events:auto; transform:translateY(-50%) scale(.92); } #caBuyers .qd{ width:9px; height:9px; border-radius:50%; background:var(--qc); opacity:.55; transition:.2s; } #caBuyers .qd:hover{ opacity:1; transform:scale(1.35); } #caBuyers .qd.now{ opacity:1; box-shadow:0 0 0 2px var(--chrome),0 0 0 3px var(--qc); } #caBuyers.picking .quick{ display:none; } #caBuyers .ord{ position:absolute; left:-3px; top:50%; margin-top:-9px; width:18px; height:18px; flex:none; border-radius:50%; background:var(--lc); color:#fff; display:none; place-items:center; font-size:10px; font-weight:800; animation:cb-pop .35s var(--spring); } @keyframes cb-pop{ from{ transform:scale(0); } } #caBuyers.picking .home{ opacity:.3; } #caBuyers.picking .home:hover{ opacity:.6; background:none; box-shadow:none; } #caBuyers.picking .home.pick{ opacity:1; background:#fff; box-shadow:inset 3px 0 0 var(--lc); } #caBuyers.picking .home.pick .ord{ display:grid; } #caBuyers.picking .addbtn{ display:none; } /* ── adding a home, in the shape of the row it becomes ─────────────────── */ #caBuyers .addrow{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; padding:11px 10px 12px; margin-bottom:6px; border-radius:12px; background:#fff; box-shadow:0 0 0 2px var(--ac),0 10px 26px rgba(var(--ac-rgb),.14); animation:cb-drop .4s var(--spring); } #caBuyers .aacts{ display:flex; gap:7px; margin-left:auto; } /* The fallback sits left of Cancel and reads as a route, not a third action -- the dropzone is still the front door, because the server reads a Client Detail sheet better than anyone types one out. */ #caBuyers .amanual{ margin-right:auto; font-size:12px; font-weight:700; color:var(--gr3); background:none; padding:9px 2px; transition:color .18s; } #caBuyers .amanual:hover{ color:var(--ac); text-decoration:underline; } /* .addrow is a flex row built for the dropzone, which sits beside its actions. The manual form is a stack of labelled fields, so it takes the same card and overrides the axis rather than inheriting a layout that put the address in the middle and the numbers overlapping off to the right. */ #caBuyers .addrow[data-manual]{ display:block; padding:16px 16px 14px; } #caBuyers .addrow[data-manual] .aacts{ margin-top:14px; align-items:center; } #caBuyers .mfhead{ margin-bottom:14px; } #caBuyers .mfhead b{ display:block; font-size:14px; color:var(--ink); margin-bottom:4px; } #caBuyers .mfhead span{ display:block; font-size:11.5px; line-height:1.55; color:var(--gr4); max-width:62ch; } #caBuyers .mffull{ margin-bottom:10px; } #caBuyers .mfgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; } #caBuyers .mffull label,#caBuyers .mff label{ display:block; font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gr4); margin-bottom:4px; } #caBuyers .mffull input,#caBuyers .mff input{ width:100%; box-sizing:border-box; font-family:inherit; font-size:13.5px; color:var(--ink); background:#fff; border:1px solid var(--pa3); border-radius:9px; padding:9px 11px; } #caBuyers .mffull input:focus,#caBuyers .mff input:focus{ outline:0; border-color:var(--ac); } #caBuyers .mffull input::placeholder,#caBuyers .mff input::placeholder{ color:var(--gr4); } #caBuyers .acancel{ font-size:12px; font-weight:700; color:var(--gr3); padding:8px 13px; border-radius:99px; background:var(--pa2); } #caBuyers .acancel:hover{ background:var(--pa3); } #caBuyers .asave{ font-size:12.5px; font-weight:800; color:#fff; padding:8px 20px; border-radius:99px; background:var(--ac); transition:.22s var(--ease); } #caBuyers .asave:hover{ background:var(--ac2); box-shadow:0 6px 18px rgba(var(--ac-rgb),.34); } #caBuyers .asave:disabled{ opacity:.45; cursor:default; box-shadow:none; } /* the export is the way in */ #caBuyers .addrow.drop-first{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } #caBuyers .dz{ flex:1 1 300px; display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer; border-radius:12px; background:var(--pa2); box-shadow:inset 0 0 0 2px var(--pa3); transition:.22s var(--ease); } #caBuyers .dz:hover,#caBuyers .dz.over{ background:var(--ice); box-shadow:inset 0 0 0 2px var(--ac); } #caBuyers .dzi{ width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:grid; place-items:center; background:var(--ac); color:#fff; font-size:16px; font-weight:800; } #caBuyers .dzt{ display:flex; flex-direction:column; gap:3px; } #caBuyers .dzt b{ font-size:14px; font-weight:800; color:var(--ink); } #caBuyers .dzt span{ font-size:11.5px; color:var(--gr3); line-height:1.45; } #caBuyers .afrom{ flex:1 1 100%; font-size:11.5px; font-weight:600; color:var(--ok); background:#DCEAE6; padding:8px 12px; border-radius:9px; margin-bottom:2px; } #caBuyers .afrom.bad{ color:#9A3520; background:#F7E3DD; } #caBuyers .afiles{ flex:1 1 100%; display:flex; flex-direction:column; gap:5px; } #caBuyers .afile{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--gr2); background:var(--pa2); border-radius:8px; padding:6px 10px; } #caBuyers .afile b{ font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #caBuyers .afile .x{ color:var(--gr4); font-size:14px; } #caBuyers .afile .x:hover{ color:#9A3520; } /* ── the property ──────────────────────────────────────────────────────── */ #cbProp{ display:none; } #caBuyers.prop #cbProp{ display:block; } #caBuyers .detail{ display:grid; grid-template-columns:360px 1fr; gap:28px; align-items:start; margin-bottom:26px; } #caBuyers .bigshot{ position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden; background:linear-gradient(158deg,hsl(calc(96 + var(--t1) * .62) 24% 74%), hsl(calc(84 + var(--t2) * .70) 22% 48%)); box-shadow:0 2px 4px rgba(0,0,0,.08),0 18px 40px rgba(0,0,0,.16); } #caBuyers .bigshot svg,#caBuyers .bigshot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } #caBuyers .shotlab{ position:absolute; left:12px; bottom:11px; z-index:2; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.9); text-shadow:0 1px 6px rgba(0,0,0,.45); } #caBuyers .lanebadge{ position:absolute; right:11px; top:11px; z-index:2; font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:99px; color:#fff; background:hsl(var(--h) var(--s) var(--l)); } #caBuyers .dhead{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; } #caBuyers .dprice{ font-size:44px; letter-spacing:-.03em; line-height:1; } #caBuyers .dsub{ font-size:12px; font-weight:700; color:var(--gr4); letter-spacing:.05em; margin-top:7px; } #caBuyers .dacts{ display:flex; gap:8px; align-items:center; } #caBuyers .zbtn{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px; } #caBuyers .zbtn a{ display:inline-flex; align-items:center; gap:8px; padding:9px 17px; border-radius:99px; background:var(--chrome); color:var(--onchrome); font-size:12.5px; font-weight:700; text-decoration:none; transition:.26s var(--ease); } #caBuyers .zbtn a:hover{ background:var(--ac); color:#fff; } /* the url printed under the button, because half of these are an address guess rather than a link somebody checked */ #caBuyers .zurl{ font-size:10px; color:var(--gr4); font-family:ui-monospace,Menlo,monospace; word-break:break-all; max-width:250px; text-align:right; } #caBuyers .znone{ font-size:11.5px; color:var(--gr4); font-style:italic; } #caBuyers .facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(94px,1fr)); margin-top:20px; border-top:1px solid var(--pa3); } #caBuyers .fact{ padding:12px 14px 13px 0; } #caBuyers .flab{ font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gr4); } #caBuyers .fval{ font-size:16px; font-weight:700; letter-spacing:-.016em; margin-top:3px; } #caBuyers .fval.miss{ color:#9A3520; } #caBuyers .fval.good{ color:var(--ok); } #caBuyers .wants{ margin-top:16px; padding-top:14px; border-top:1px solid var(--pa3); } #caBuyers .wlab{ font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gr4); margin-bottom:9px; } #caBuyers .wrow{ display:flex; gap:7px; flex-wrap:wrap; } #caBuyers .w{ font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:99px; background:var(--pa2); color:var(--gr3); } #caBuyers .w.yes{ background:#DCEAE6; color:#1F6340; } #caBuyers .w.no{ background:#F7E3DD; color:#9A3520; text-decoration:line-through; text-decoration-thickness:1px; } #caBuyers .wnote{ font-size:13.5px; line-height:1.6; color:var(--gr2); } #caBuyers .vset{ display:flex; gap:6px; flex-wrap:wrap; } #caBuyers .vb{ font-size:11.5px; font-weight:700; padding:6px 14px; border-radius:99px; background:var(--pa2); color:var(--gr3); transition:.22s var(--ease); } #caBuyers .vb:hover{ background:var(--pa3); } #caBuyers .vb.on{ background:var(--vbg); color:var(--vfg); box-shadow:inset 0 0 0 1.5px var(--vfg); } #caBuyers .vnote{ font-size:11px; color:var(--gr4); margin-top:8px; font-style:italic; } #caBuyers .whenbtn{ font-size:13px; font-weight:700; padding:7px 15px; border-radius:99px; background:var(--pa2); color:var(--gr3); transition:.22s var(--ease); } #caBuyers .whenbtn.set{ background:#DCEAE6; color:var(--ok); } #caBuyers .bench{ background:var(--card); border-radius:20px; padding:20px 22px; margin-bottom:30px; box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 22px rgba(0,0,0,.05); } #caBuyers .bhrow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; } #caBuyers .bhrow h3{ font-size:17px; letter-spacing:-.014em; margin:0; } #caBuyers .soon{ font-size:8.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; padding:4px 10px; border-radius:99px; background:var(--pa2); color:var(--gr3); } #caBuyers .bhrow p{ font-size:11.5px; color:var(--gr4); flex:1; min-width:190px; line-height:1.5; margin:0; } #caBuyers .benchgrid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } #caBuyers .notein{ width:100%; min-height:118px; resize:vertical; padding:13px 15px; border-radius:14px; background:var(--pa); font-size:13.5px; line-height:1.6; color:var(--ink); } #caBuyers .notein:focus{ outline:0; box-shadow:0 0 0 2px var(--gr2); } #caBuyers .notein::placeholder{ color:var(--gr4); } #caBuyers .outbox{ border-left:2px solid var(--pa3); padding-left:18px; min-height:118px; } #caBuyers .oline{ display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--pa2); animation:cb-fade .35s var(--ease) backwards; } #caBuyers .oline:last-child{ border-bottom:0; } @keyframes cb-fade{ from{ opacity:0; transform:translateY(5px); } } #caBuyers .okey{ font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gr4); flex:0 0 82px; padding-top:3px; } #caBuyers .oval{ font-size:13.5px; font-weight:600; line-height:1.45; } #caBuyers .oval .flagged{ color:#9A3520; } #caBuyers .oempty{ font-size:12px; color:var(--gr4); font-style:italic; padding-top:6px; } #caBuyers .asec{ border-top:1px solid var(--pa3); padding-top:22px; } #caBuyers .abar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; } #caBuyers .abar h3{ font-size:18px; letter-spacing:-.015em; margin:0; } #caBuyers .sortby{ display:flex; gap:2px; background:var(--pa2); border-radius:99px; padding:3px; } #caBuyers .sortby button{ padding:6px 13px; border-radius:99px; font-size:11.5px; font-weight:700; color:var(--gr3); transition:.25s; } #caBuyers .sortby button.on{ background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.13); } #caBuyers .arank{ font-size:9.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--gr4); } #caBuyers .nav{ display:flex; gap:6px; margin-left:auto; } #caBuyers .nav button{ width:32px; height:32px; border-radius:50%; background:var(--pa2); color:var(--gr2); display:grid; place-items:center; font-size:14px; transition:.25s var(--ease); } #caBuyers .nav button:hover{ background:var(--chrome); color:var(--onchrome); } #caBuyers .nav button:disabled{ opacity:.32; cursor:default; } #caBuyers .nav button:disabled:hover{ background:var(--pa2); color:var(--gr2); } #caBuyers .grid{ display:grid; grid-template-columns:1.16fr repeat(4,1fr); align-items:stretch; } #caBuyers .grow{ grid-column:1/-1; height:1px; background:var(--pa3); } #caBuyers .hcell{ position:relative; padding:2px 12px 11px; cursor:pointer; transition:background .3s var(--ease); } #caBuyers .hcell.sel{ background:var(--white); border-radius:16px 16px 0 0; box-shadow:inset 0 3px 0 var(--ac),inset 3px 0 0 var(--ac); } #caBuyers .hplane{ display:inline-block; font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:99px; color:#fff; background:hsl(var(--h) var(--s) var(--l)); } #caBuyers .haddr2{ font-size:13.5px; font-weight:700; letter-spacing:-.014em; line-height:1.3; margin-top:7px; } #caBuyers .hcell.sel .haddr2{ font-size:15.5px; } #caBuyers .hprice2{ font-size:20px; letter-spacing:-.02em; margin-top:3px; } #caBuyers .hcell.sel .hprice2{ font-size:25px; color:var(--ac); } #caBuyers .hrank{ font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gr4); margin-top:5px; } /* Tightened on 2026-09-09. These carried a bar under every value and the padding was sized around it; with the bar gone the rows were sitting in a third more space than their contents needed. */ #caBuyers .gcell{ padding:7px 12px 8px; transition:background .3s var(--ease); } #caBuyers .gcell.sel{ background:var(--white); box-shadow:inset 3px 0 0 var(--ac); } #caBuyers .glab{ font-size:8.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ac); opacity:.9; padding:0 0 3px; } #caBuyers .v{ font-size:14px; font-weight:600; letter-spacing:-.012em; color:var(--gr2); line-height:1.3; } /* One school per line, in the comparison and in the house. The district is the last line and sits back from the three names above it. */ #caBuyers .sch{ display:block; } #caBuyers .sch.dist{ color:var(--gr4); } #caBuyers .gcell.sel .v{ font-weight:800; color:var(--ink); font-size:15px; } #caBuyers .v.win{ color:var(--ok); } #caBuyers .v.miss{ color:#9A3520; } #caBuyers .alegend{ font-size:11px; color:var(--gr4); margin-top:15px; } /* ── in the field ──────────────────────────────────────────────────────── */ #caBuyers.field #cbPeople,#caBuyers.field .bhead,#caBuyers.field .board, #caBuyers.field .rhead,#caBuyers.field .strip,#caBuyers.field #cbProp{ display:none; } #caBuyers.field #cbRecord{ inset:0; background:var(--pa); } #caBuyers.field .rin{ display:block; height:auto; padding:0; } #caBuyers .fwrap{ max-width:760px; margin:0 auto; padding:16px 14px 60px; } #caBuyers .fhead{ display:flex; align-items:center; gap:13px; margin-bottom:16px; } #caBuyers .fback{ width:36px; height:36px; flex:0 0 36px; border-radius:50%; background:var(--pa2); display:grid; place-items:center; font-size:17px; color:var(--gr2); transition:.24s var(--ease); } #caBuyers .fback:hover{ background:var(--ac); color:#fff; } #caBuyers .ftitle{ font-size:25px; letter-spacing:-.024em; line-height:1; } #caBuyers .fsub{ font-size:12px; font-weight:700; color:var(--gr4); margin-top:3px; } #caBuyers .fcols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } #caBuyers .fcol{ display:flex; flex-direction:column; gap:9px; } #caBuyers .fsel{ width:100%; font-size:14px; font-weight:600; padding:11px 13px; border-radius:11px; background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--pa3); appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gr3) 50%), linear-gradient(135deg,var(--gr3) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px; } #caBuyers .fsel:focus{ outline:0; box-shadow:inset 0 0 0 2px var(--ac); } /* landscape, and small: the photo is here to tell the two apart at a glance, not to be looked at */ #caBuyers .fshot{ position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:linear-gradient(158deg,hsl(calc(96 + var(--t1) * .62) 26% 76%), hsl(calc(84 + var(--t2) * .70) 24% 50%)); } #caBuyers .fshot svg,#caBuyers .fshot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* quiet until one is chosen. Nothing to decode: you read the verdicts and tap the one that happened. Three across rather than W's 2x2, because the enum the backend stores is love/maybe/pass. */ #caBuyers .fvrow{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; } #caBuyers .fv{ padding:7px 4px; border-radius:9px; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--gr4); background:var(--pa2); transition:.2s var(--ease); } #caBuyers .fv:hover{ color:var(--gr2); background:var(--pa3); } #caBuyers .fv.on{ background:var(--vbg); color:var(--vfg); } #caBuyers .fvrow.has .fv:not(.on){ opacity:.55; } /* neutral on purpose: the lane ramp belongs to the board, and a coloured chip out here would disagree with it */ #caBuyers .flane{ font-size:8.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--gr2); background:var(--pa2); border-radius:99px; padding:4px 11px; align-self:center; } #caBuyers .faddr{ font-size:15px; font-weight:700; text-align:center; letter-spacing:-.014em; line-height:1.25; } /* no price out here: it is the first line of Side by side, where it can be compared instead of just read */ #caBuyers .fsummary{ margin-top:26px; background:#fff; border-radius:16px; padding:6px 14px 12px; box-shadow:0 1px 2px rgba(53,51,49,.06),0 8px 22px rgba(53,51,49,.05); } #caBuyers .fsummary h3{ font-size:19px; letter-spacing:-.016em; padding:12px 2px 8px; margin:0; } #caBuyers .frow{ display:grid; grid-template-columns:1fr 96px 1fr; align-items:center; gap:8px; padding:9px 2px; border-top:1px solid var(--pa3); } #caBuyers .fv1,#caBuyers .fv2{ font-size:13.5px; font-weight:600; color:var(--gr3); } #caBuyers .fv1{ text-align:right; } #caBuyers .fv2{ text-align:left; } #caBuyers .fv1.win,#caBuyers .fv2.win{ color:var(--ink); font-weight:800; } #caBuyers .fk{ font-size:8px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gr4); text-align:center; } #caBuyers .fnote{ font-size:11.5px; color:var(--gr4); text-align:center; margin-top:16px; line-height:1.5; } /* ── responsive ────────────────────────────────────────────────────────── */ @media(max-width:1180px){ #caBuyers .detail{ grid-template-columns:280px 1fr; gap:20px; } #caBuyers .grid{ grid-template-columns:1.2fr repeat(3,1fr); } #caBuyers .grid .hcell:nth-child(5),#caBuyers .gcell:nth-child(5n+5){ display:none; } } @media(max-width:1080px){ #caBuyers .colhead,#caBuyers .home{ grid-template-columns:44px minmax(0,1.5fr) 104px 94px 96px 68px; } #caBuyers .col.bd,#caBuyers .col.ba, #caBuyers .colhead>*:nth-child(4),#caBuyers .colhead>*:nth-child(5){ display:none; } } @media(max-width:900px){ /* The head is name + mandate line + Edit + close, and at this width the mandate line alone fills the row, so the close wrapped onto a line of its own beneath everything. Pinned to the corner of the head instead. */ #caBuyers .rhead{ position:relative; padding-right:42px; } #caBuyers .close{ position:absolute; right:0; top:0; } #cbPeople{ padding:26px 18px; } #caBuyers.open #cbPeople{ inset:0 0 auto 0; width:100%; height:auto; max-height:118px; border-right:0; border-bottom:1px solid var(--pa3); } #caBuyers.open .galhead{ display:none; } #caBuyers.open .gsec{ display:flex; gap:6px; overflow-x:auto; padding:8px; } #caBuyers.open .ghead{ display:none; } #caBuyers.open .gwrap{ display:flex; gap:6px; } #caBuyers.open .person{ flex:0 0 auto; margin-bottom:0; } #caBuyers.open #cbRecord{ inset:118px 0 0 0; } #caBuyers .rin{ padding:16px 14px 30px; } #caBuyers .detail{ grid-template-columns:1fr; } #caBuyers .benchgrid{ grid-template-columns:1fr; } #caBuyers .outbox{ border-left:0; border-top:2px solid var(--pa3); padding-left:0; padding-top:14px; } #caBuyers .grid{ grid-template-columns:1.3fr 1fr; overflow-x:auto; } } @media(max-width:820px){ #caBuyers .colhead,#caBuyers .home{ grid-template-columns:44px minmax(0,1fr) 98px 68px; } #caBuyers .col.sqft,#caBuyers .col.dom, #caBuyers .colhead>*:nth-child(6),#caBuyers .colhead>*:nth-child(7){ display:none; } } @media(max-width:520px){ #caBuyers .fwrap{ padding:12px 10px 50px; } #caBuyers .faddr{ font-size:13px; } #caBuyers .fv{ font-size:9px; letter-spacing:.05em; padding:6px 2px; } #caBuyers .frow{ grid-template-columns:1fr 76px 1fr; } #caBuyers .fsel{ font-size:12.5px; padding:9px 11px; padding-right:28px; } }