/* The RESULT CARD — /price-check/ and every project page render the same one. Lifted out of website/pages/price-check/index.html (2026-08-07) when the project pages started rating a typed price in place instead of sending the visitor to /price-check/. Paired with /assets/pricecard.js; the two must move together. Colours come from the CSS variables in web.css, so this file adds no palette of its own. */ /* ── Result card (mirrors /rate-your-property) ──────────────────────────────── */ /* #result on /price-check, #pcResult in a project page's rating door. */ #result,#pcResult{max-width:600px;margin:24px auto 0;scroll-margin-top:80px} .spin{width:26px;height:26px;border-radius:50%;margin:22px auto;border:3px solid rgba(27,42,74,.12); border-top-color:var(--navy);animation:sp .7s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} .rc{background:var(--surface);border:1px solid var(--rule);border-radius:8px;overflow:hidden;box-shadow:0 18px 48px -12px rgba(27,42,74,.22)} .rc-top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--parch-lt); border-bottom:1px solid var(--rule);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brass-dk)} .rc-body{padding:16px 20px} .rc .subj{font-family:var(--d);font-size:19px;font-weight:600;color:var(--navy)} .rc .subj .ask{float:right;font-size:16px;color:var(--sec);font-variant-numeric:tabular-nums} .rc .submeta{font-size:13px;color:var(--ter);margin-top:5px;clear:both} .bandchip{display:inline-block;font-size:12.5px;font-weight:700;color:var(--brass-dk);background:var(--parch-dp); border:1px solid var(--rule);border-radius:99px;padding:2px 9px;margin-left:8px} .verdictrow{display:flex;align-items:center;gap:14px;margin:14px 0 2px} .med{width:84px;height:84px;flex:0 0 84px;position:relative;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 34% 26%,#FFFDF6 0%,var(--parch-lt) 42%,var(--parch-dp) 100%); box-shadow:0 1px 0 #fff inset,0 -2px 6px rgba(142,111,55,.14) inset,0 10px 22px rgba(27,42,74,.15)} .med::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px solid var(--brass);opacity:.85} .med::after{content:"";position:absolute;inset:11px;border-radius:50%;border:1px dashed #CBA765;opacity:.5} .med .stack{position:relative;text-align:center;line-height:1} .med .n{display:block;font-family:var(--d);font-weight:700;font-size:38px;line-height:.8;color:#7E6130} .med .o{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--ter);margin-top:7px} .verdict{font-family:var(--d);font-size:23px;font-weight:600;color:var(--navy);line-height:1.2} .ev{font-size:13px;color:var(--ter);margin-top:4px;line-height:1.5} .beta{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--amber-fg);background:var(--amber-bg);border-radius:2px;padding:2px 6px;margin-left:8px} .halves{display:flex;gap:12px;margin:14px 0 4px} .half{flex:1;background:var(--parch-lt);border:1px solid var(--rule);border-radius:6px;padding:10px 12px;text-align:center} .half .hk{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--brass-dk)} .half .hn{font-family:var(--d);font-size:26px;font-weight:700;color:var(--navy);line-height:1.1;margin:2px 0} .half .hw{font-size:13px;color:var(--ter)} .sect-hd{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--brass-dk); margin:16px 0 9px;padding-top:12px;border-top:1px solid var(--rule)} .lens{margin-bottom:11px} .lens .lh{display:flex;justify-content:space-between;gap:10px;font-size:15px;color:var(--navy);font-weight:600} .lens .lst{font-weight:700} .lens .lst.below{color:var(--sage-fg)} .lens .lst.above{color:#8A5A1B} /* Column header above the price-vs-record rows: names on the left, your price's position on the right. */ .lens.lhd{margin-bottom:7px} .lens.lhd .lh span{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ter)} .lens .lm{font-size:13px;color:var(--ter);line-height:1.45;margin-top:2px} .kv{display:flex;justify-content:space-between;gap:12px;font-size:15px;margin-bottom:6px} .kv .k{color:var(--sec)}.kv .v{font-weight:600;color:var(--navy);text-align:right} .two{display:grid;grid-template-columns:1fr 1fr;gap:0 22px} @media(max-width:440px){.two{grid-template-columns:1fr}} .rc-foot{padding:11px 20px;border-top:1px solid var(--rule);background:var(--parch-lt);font-size:13px;color:var(--ter);text-align:left;line-height:1.55} .rc-foot b{color:var(--navy);font-weight:600} .miss .card{text-align:center} /* ── PRD-21 conviction report ──────────────────────────────────────────────────── Design record: website/design/industrial-conviction-mock.html. Everything here renders fields the Lambda composed server-side (reading, conviction) or arithmetic on numbers the user typed — no new model output, so the oracle guards are untouched. */ /* Grades the EVIDENCE, not the price. Sits directly under the verdict because a strong verdict on a thin record has to be read together with the thinness. */ .convo{display:flex;align-items:center;gap:9px;margin:12px 0 0;padding:9px 12px;border-radius:6px; border:1px solid var(--rule);background:var(--parch-lt);font-size:13px;color:var(--sec);flex-wrap:wrap} .convo .cg{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:3px;padding:3px 8px} .convo .cg.strong{background:var(--sage-bg);color:var(--sage-fg)} .convo .cg.moderate{background:var(--amber-bg);color:var(--amber-fg)} .convo .cg.thin{background:#F4E4E4;color:#7E1F1F} /* The verdict as a paragraph — serif, quotable, the thing an agent reads aloud. */ .reading{font-family:var(--d);font-size:17px;line-height:1.65;color:var(--navy); margin:14px 0 2px;padding:13px 16px;border-left:3px solid var(--brass);background:var(--parch-lt);border-radius:0 6px 6px 0} .howto{margin:12px 0 0;font-size:13px;color:var(--ter);line-height:1.55} .howto summary{cursor:pointer;font-weight:700;color:var(--brass-dk);font-size:11px;letter-spacing:.1em;text-transform:uppercase} .howto p{margin:7px 0 0} .lens .lst.inl{color:var(--sec)} /* Grouped fact rows: a small sub-label so twelve amenity rows read as four answers. */ .grp{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ter);margin:12px 0 2px} .kv.row-b{border-top:1px solid var(--parch-lt);padding-top:6px} .note-in{font-size:13px;color:var(--ter);line-height:1.55;margin-top:8px} /* Financing assumptions read BEFORE the monthly figure they produce (UX review item 12). */ .assume{font-size:13px;color:var(--sec);background:var(--parch-lt);border-left:2px solid var(--brass); border-radius:0 3px 3px 0;padding:5px 10px;margin:9px 0 7px} .assume b{color:var(--navy);font-weight:600} .note-in b{color:var(--sec)} /* Income case: two figures side by side, each carrying its own basis caption. */ .yrow{display:flex;gap:12px;margin:4px 0 8px;flex-wrap:wrap} .ycell{flex:1;min-width:150px;background:var(--parch-lt);border:1px solid var(--rule);border-radius:6px;padding:9px 12px;text-align:center} .ycell .yk{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--brass-dk)} .ycell .yn{font-family:var(--d);font-size:22px;font-weight:700;color:var(--navy);margin:2px 0;font-variant-numeric:tabular-nums} .ycell .yw{font-size:13px;color:var(--ter);line-height:1.4} /* ── The gate: what a signed-out visitor sees ──────────────────────────────────── Same shape as the card they will get, with the verdict blurred out and the building left legible. The building facts and the band are already on the crawlable project pages, so nothing here is withheld twice; the 0–100 and the price rows are, which is exactly what the blur covers (MKT-01). The blurred block is aria-hidden and inert — a screen reader is not read placeholder dashes. */ .gatewrap{position:relative;margin-top:16px;border-top:1px solid var(--rule);padding-top:14px} .gatewrap .glabel{font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700; color:var(--brass-dk);margin-bottom:9px} .pvblur{filter:blur(7px);opacity:.9;pointer-events:none;user-select:none} .gate-cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;text-align:center;padding:20px; background:linear-gradient(180deg,rgba(255,254,250,.35) 0%,rgba(255,254,250,.82) 42%,rgba(255,254,250,.96) 100%)} /* The one figure the visitor already knows — the price they typed — framed like a receipt. Sans with tabular figures, never the brass serif: Georgia's OLD-STYLE numerals make a long price read crooked. Same call as the teaser on /rate-your-property/. */ .gate-cta .askbox{width:100%;max-width:300px;margin:0 0 15px;padding:12px 16px; background:var(--navy);border:1px solid var(--brass);border-radius:8px; display:flex;align-items:center;justify-content:space-between;gap:12px; box-shadow:0 8px 20px -8px rgba(27,42,74,.55)} .gate-cta .askbox .lab{flex:0 0 auto;text-align:left;line-height:1.25;font-size:13.5px; letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#C9A063} .gate-cta .askbox .num{font-family:var(--s);font-size:24px;font-weight:700;color:#fff; font-variant-numeric:tabular-nums;letter-spacing:.01em} .gate-cta h3{font-family:var(--d);font-size:24px;font-weight:600;color:var(--navy);margin:0 0 6px} .gate-cta p{font-size:15px;color:var(--sec);max-width:360px;margin:0 0 14px} .gate-cta .sub{font-size:13px;color:var(--ter);margin-top:10px} @media(max-width:640px){.gate-cta .askbox{max-width:100%}} /* The quantitative lens row — a pasted listing, whose ±% the server does not strip. Moved here from /rate-your-property's inline