/* BlockLot console — the "Brief" design (B), which is also the DEFAULT SKIN. Light, calm and editorial: a toned paper ground, a serif for headlines, a quiet sans for everything read at length, numbers in tabular figures. Adopted 2026-09-29 (owner decision) from the three mockups on the design canvas; the other two skins, A — Terminal and C — Atlas, are `static/skins/*.css`, which override the tokens below and a few layouts. A skin never changes markup (`api/skins.py`). ⚠️ The dossier PDF does NOT read this file — `reports/templates/dossier.html` carries its own inline stylesheet. A change here is a change to the screen only. Chart colours (`--accent`, `--plum`, `--intel-mark`) are the categorical set validated with the dataviz palette checker (light surface, CVD-separated, >= 3:1 contrast). */ /* Self-hosted fonts. The demo host serves `font-src 'self'`, so nothing may come from a font CDN; the files are the Latin subsets from Fontsource, under the SIL OFL (licences beside them in `static/fonts/`). `font-display:swap` so text is never invisible while a font loads — the system fallback is close enough in metrics to read. */ @font-face{font-family:"Newsreader";src:url("fonts/newsreader-opsz.woff2") format("woff2"); font-weight:200 800;font-style:normal;font-display:swap} @font-face{font-family:"Newsreader";src:url("fonts/newsreader-opsz-italic.woff2") format("woff2"); font-weight:200 800;font-style:italic;font-display:swap} @font-face{font-family:"IBM Plex Sans";src:url("fonts/plex-sans-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Sans";src:url("fonts/plex-sans-400-italic.woff2") format("woff2"); font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"IBM Plex Sans";src:url("fonts/plex-sans-500.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Sans";src:url("fonts/plex-sans-600.woff2") format("woff2"); font-weight:600 700;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-500.woff2") format("woff2"); font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-600.woff2") format("woff2"); font-weight:600 700;font-style:normal;font-display:swap} :root{ --surface:#ffffff; --page:#fbfaf7; --sunk:#f3f1ec; --ink:#17191e; --ink-2:#4a4f57; --ink-mute:#6b7079; --grid:#e5e1d8; --axis:#cfcac0; --rule:#17191e; --accent:#2b64b0; --accent-ink:#1e4a86; --accent-soft:#dce6f4; --plum:#8a5bb0; /* The intelligence voice — BlockLot's own analysis (Future View, the block outlook), as distinct from the public record it is derived from. Used for nothing else, so a reader learns that brick means "this is our reading, not the city's". */ --intel:#a8481a; --intel-mark:#d56a2a; --intel-soft:#fbeee5; --intel-line:#f1d5c2; --good:#2e7d4f; --warn:#d99a1e; --serious:#c2562f; --crit:#b3261e; --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Newsreader",Georgia,"Times New Roman",serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --display:var(--serif); --pad:28px; --gap:20px; --radius:10px; /* The width of the first column in the header AND in the bar under it, so the brand and the "Search people" label occupy the same slot and the two inputs line up. One variable, because two hand-tuned numbers drift the first time the wordmark changes. */ --brandw:172px; --shadow:0 1px 2px rgba(23,25,30,.04); --menu-shadow:0 12px 32px rgba(23,25,30,.14); } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--page);color:var(--ink);font:14.5px/1.55 var(--font);-webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} a:hover{color:var(--accent)} .num{font-variant-numeric:tabular-nums} header{display:flex;align-items:center;gap:var(--gap);padding:14px var(--pad); background:var(--page);border-bottom:1px solid var(--grid);position:sticky;top:0;z-index:20} .brand{font:600 24px/1 var(--display);letter-spacing:-.01em;white-space:nowrap; display:inline-flex;align-items:center;gap:10px;min-width:var(--brandw)} .brand span{color:var(--ink-mute);font-weight:400} /* The mark: four lots on a block, one picked out. `.bl-` is the Brief component prefix (tests/test_class_tokens.py). */ .bl-mark{display:inline-grid;grid-template-columns:9px 9px;gap:3px;flex:none} .bl-mark i{width:9px;height:9px;border:1.5px solid var(--ink)} .bl-mark i:last-child{background:var(--intel-mark);border-color:var(--intel-mark)} .omni{flex:1;max-width:560px;padding:11px 16px;border:1px solid var(--axis); border-radius:8px;background:var(--surface);font:inherit} .omni:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent} /* The person-lookup bar. It is a sibling of
, not a flex item inside it, so it is on its own line by default-stylesheet block layout rather than by `flex-wrap` — see the comment in base.html for why that mattered. Sticky under the header so it stays reachable while a long card scrolls. */ .subbar{position:sticky;top:var(--hdr-h,69px);z-index:19;background:var(--page); border-bottom:1px solid var(--grid);padding:0 var(--pad) 14px; display:flex;align-items:center;gap:var(--gap)} /* Same slot as `.brand`, so the input beside it starts exactly where the omni above does. Not a hand-tuned margin: both read `--brandw`. */ .subbar-label{min-width:var(--brandw);white-space:nowrap;color:var(--ink-2); font-size:14px;flex:0 0 auto} .omni-person{flex:1;max-width:560px} nav.top{display:flex;align-items:center;gap:20px;margin-left:auto;color:var(--ink-2);font-size:14px; white-space:nowrap} /* The one filled button in an anonymous header. */ .bl-navcta{background:var(--ink);color:var(--surface);padding:9px 16px;border-radius:6px; font-weight:500} .bl-navcta:hover{color:var(--surface);background:color-mix(in srgb,var(--ink) 85%,var(--accent))} main{padding:32px var(--pad);max-width:1280px;margin:0 auto} .card{background:var(--surface);border:1px solid var(--grid);border-radius:var(--radius); padding:var(--pad);box-shadow:var(--shadow);margin-bottom:var(--gap)} /* Section titles are set in the serif: the page reads as a brief, one chapter per card. */ .card>h2{font:500 25px/1.2 var(--display);letter-spacing:-.005em;margin-bottom:10px;display:flex; align-items:baseline;gap:10px;flex-wrap:wrap} .card>h2 .sub{font:400 13px/1.4 var(--font);color:var(--ink-mute);letter-spacing:0} /* Sub-sections inside a card (Neighborhood's Crime / Mortgage lending / Zoned schools, the broker page's record blocks). The reset left them flush against the table above, at default h3 size, so a new sub-section read as another row of the previous one. A hairline and 28px of air make each one read as its own chapter. */ .card>h3{font-size:16px;font-weight:600;margin:28px 0 8px;padding-top:16px; border-top:1px solid var(--grid);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .card>h3:first-child,.card>h2+h3{margin-top:0;padding-top:0;border-top:0} .card>h3 .sub{font-size:12px;font-weight:400;color:var(--ink-mute)} /* The same `.sub` inside a table cell or a definition had no rule at all, so "8 of 78" and "1 = quietest" ran together as one phrase at full weight. */ .card td .sub,.card dd .sub{font-size:12px;color:var(--ink-mute);margin-left:4px} .card dd div.sub{margin-left:0} .row{display:flex;gap:var(--gap);flex-wrap:wrap}.row>*{flex:1;min-width:220px} .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.07em; color:var(--ink-mute);font-weight:600;margin-bottom:8px} /* The headline number or name of a card. Serif, like the section titles: it is what the card is ABOUT, and the figures around it are set in the sans. */ .hero{font:500 68px/1.02 var(--display);letter-spacing:-.02em} .hero-sub{font-size:18px;color:var(--ink-2);margin-top:8px} /* REQ-204: the header's ZIP and block numbers, and the Owner card's roll owner, are links. Links here inherit their colour, so these carry a quiet underline to read as one. */ .hero-link,.owner-link{text-decoration:underline;text-decoration-color:var(--grid); text-underline-offset:4px} .hero-link:hover,.owner-link:hover{text-decoration-color:currentColor} .hero-link b{color:var(--ink)} .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap)} .tile{background:var(--surface);border:1px solid var(--grid);border-radius:var(--radius);padding:18px} .tile .lab{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute); font-weight:600;margin-bottom:6px} .tile .val{font-size:28px;font-weight:500;line-height:1.15;letter-spacing:-.01em} .tile .meta{font-size:12px;color:var(--ink-mute);margin-top:4px} /* The five-value confidence vocabulary. Fixed set — never invent a sixth. */ .chip{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--font); letter-spacing:.03em;padding:3px 6px;border-radius:3px;border:1px solid;white-space:nowrap} .chip::before{font-size:9px} .c-verified{color:var(--good);border-color:color-mix(in srgb,var(--good) 42%,transparent); background:color-mix(in srgb,var(--good) 9%,transparent)}.c-verified::before{content:"✓"} .c-inferred{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,transparent); background:color-mix(in srgb,var(--accent) 9%,transparent)}.c-inferred::before{content:"≈"} .c-proxy{color:var(--serious);border-color:color-mix(in srgb,var(--serious) 48%,transparent); background:color-mix(in srgb,var(--serious) 11%,transparent)}.c-proxy::before{content:"~"} .c-ambiguous{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 55%,transparent); background:color-mix(in srgb,var(--warn) 13%,transparent)}.c-ambiguous::before{content:"?"} .c-unavail{color:var(--ink-mute);border-color:var(--axis)}.c-unavail::before{content:"—"} /* Gate (d) — the peer set stated at headline weight when it is not the block. A weaker comp set has to announce itself where the number is read, not in the subhead. */ .scope-flag{display:inline-block;font:600 12px/1 var(--font);letter-spacing:.01em; color:var(--ink-2);background:color-mix(in srgb,var(--warn) 13%,transparent); border:1px solid color-mix(in srgb,var(--warn) 45%,transparent); border-radius:3px;padding:5px 8px;margin-bottom:8px} .scope-flag .muted{font-weight:400} /* A coded value from a published city vocabulary — building class, zoning district, land use. Monospaced because these are identifiers, not words, and neutral in colour because a code carries no severity: `R6B` is not better or worse than `M1-4`. REQ-4 attaches the definition drawer to this class, so there is one hook, not one per field. */ .chip.code{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace); letter-spacing:0;color:var(--ink-2);border-color:var(--axis); background:color-mix(in srgb,var(--ink-2) 6%,transparent)} /* Only a code with a published definition is clickable. The dotted underline is the same "there is more behind this" language `.drill` uses, kept quieter because a dossier carries a dozen of these and twelve dashed rules would read as noise. */ button.chip.code{cursor:default} button.chip.code.defined{cursor:pointer; border-bottom:1px dashed color-mix(in srgb,var(--accent) 55%,transparent)} button.chip.code.defined:hover,button.chip.code.defined:focus-visible{ color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 8%,transparent)} /* A concept, triggered from its label. Inherits `.drill` and drops its accent colour: the definition of "Built FAR" is reference material, not a finding, and colouring every
on the page would drown the counts that genuinely do drill into rows. */ .drill.term{color:var(--ink-2);font:inherit; border-bottom-color:color-mix(in srgb,var(--ink-2) 34%,transparent)} .drill.term:hover,.drill.term:focus-visible{color:var(--accent)} /* Markers — chip *shape*, deliberately NOT a sixth confidence value. `m-` not `c-`. A confidence chip answers "how sure are we"; this answers "which row are you on", which is navigation. Mixing them would make the five-value set unreadable. */ .m-here{color:var(--ink-2);border-color:var(--axis); background:color-mix(in srgb,var(--ink-2) 8%,transparent)}.m-here::before{content:"▸"} /* The subject's own row in the owner's-portfolio table (BUG-17). Tinted and ruled on the left so it is identifiable at a glance without reading the chip. */ tr.pf-subject>td{background:color-mix(in srgb,var(--ink-2) 5%,transparent)} tr.pf-subject>td:first-child{box-shadow:inset 2px 0 0 var(--ink-2)} /* BUG-32. A link the gate rejected, in the traversed-links table. It was a grey `.chip` in the last column, which on a real subject — 8 rejected against 2 kept — read at a glance as ten members of the portfolio. This is a debug surface: the verdict is the most important thing in the row, so it is ruled and tinted down the row's whole length rather than announced at the end of it. Deliberately NOT a sixth `c-` confidence value: "not counted" is what the rule DID, not how sure it is. */ tr.gate-off>td{background:color-mix(in srgb,var(--serious) 6%,transparent)} tr.gate-off>td:first-child{box-shadow:inset 3px 0 0 var(--serious)} .siblings table.weak tr.gate-off>td{color:color-mix(in srgb,var(--ink-mute) 70%,var(--ink-2))} /* The condition the row lost on, under its verdict. */ .gate-why{font:400 10px/1.25 var(--font);color:var(--ink-mute);margin-top:3px; max-width:190px;white-space:normal} /* Status pills — icon + label always, never colour alone. */ .pill{display:inline-flex;align-items:center;gap:4px;font:600 11px/1 var(--font); padding:4px 8px;border-radius:99px;white-space:nowrap} .p-crit{background:color-mix(in srgb,var(--crit) 15%,transparent);color:var(--crit)} .p-serious{background:color-mix(in srgb,var(--serious) 18%,transparent);color:var(--serious)} .p-warn{background:color-mix(in srgb,var(--warn) 20%,transparent);color:color-mix(in srgb,var(--warn) 72%,var(--ink))} .p-good{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good)} /* Two timestamps, never one: the city's publish lag is not our pull cadence. */ .stamp{display:inline-flex;gap:8px;align-items:center;font-size:12px;color:var(--ink-mute)} .stamp b{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums} .stamp .sep{width:1px;height:11px;background:var(--axis)} table{width:100%;border-collapse:collapse;font-size:14px} th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em; color:var(--ink-mute);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap} td{padding:0 10px;height:44px;border-bottom:1px solid var(--grid);vertical-align:middle} /* A ROW header (`` in a tbody — the account page's label column) is a label, not a column heading: it takes the row's light rule, not the ink one. */ tbody th{border-bottom-color:var(--grid)} tbody tr:hover{background:var(--page)} td.n,th.n{text-align:right}td.n{font-variant-numeric:tabular-nums} .muted{color:var(--ink-mute)} /* Density toggle — Studio rows are generous; list-heavy screens need the option. */ table.compact td{height:30px}table.compact th{padding:6px 8px} /* The history card (`_history.html`), on `/` and `/account`. TWO groups, because a search and a report are two different lines on the bill: reports spend the monthly allowance, searches spend only the burst windows. Reading the list should not require reading each tag to work out which of the two you are looking at. The tag carries the colour, not the row text: the keys are LINKS the customer has already paid for, and recolouring a link to signal its category makes it look disabled. The search rows get the muted treatment because they are the cheap half — you scan past them to find the report you opened. */ .hkind{display:inline-block;min-width:70px;margin-right:9px;padding:2px 7px; border:1px solid transparent;border-radius:5px;text-align:center; font:600 10px/1.6 var(--font);letter-spacing:.06em;text-transform:uppercase} .hrow-report .hkind{color:var(--accent);background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 30%,transparent)} .hrow-search .hkind{color:var(--ink-mute);background:color-mix(in srgb,var(--axis) 26%,transparent); border-color:var(--axis)} .hrow-search td{color:var(--ink-2)} /* The BBL kept beside the address on a property row. The address is the label a person recognises; the BBL is the identity the link is built on and the one they paste into ACRIS, so it stays visible rather than being traded away for readability. */ .hbbl{margin-left:8px;color:var(--ink-mute);font-size:12px; font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace)} .flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;margin-top:var(--gap)} .flow-col h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em; color:var(--ink-mute);font-weight:600;margin-bottom:10px} .node{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 11px; margin-bottom:4px;border-radius:5px;background:var(--page);border:1px solid var(--grid);font-size:12px} .pivot{display:flex;flex-direction:column;justify-content:center;align-items:center; gap:8px;padding:0 30px;position:relative} .pivot .box{background:var(--accent);color:#fff;border-radius:var(--radius); padding:18px 22px;text-align:center;max-width:210px} .pivot .box .t{font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.06em} .pivot .box .a{font-weight:650;margin-top:4px;line-height:1.35} .pivot::before,.pivot::after{content:"";position:absolute;top:50%;width:30px;height:1px;background:var(--axis)} .pivot::before{left:0}.pivot::after{right:0} /* Bar: open state filled, closed history greyed behind. Two states of one measure. */ .bars{display:flex;flex-direction:column;gap:2px;margin-top:10px} .bar-row{display:grid;grid-template-columns:170px 1fr 76px;align-items:center;gap:10px;font-size:12px} .bar-track{height:16px;background:var(--page);border-radius:2px} .bar-ghost{height:16px;background:var(--grid);border-radius:0 4px 4px 0; outline:1px solid var(--axis);outline-offset:-1px;max-width:100%} .bar-fill{height:16px;background:var(--accent);border-radius:0 4px 4px 0;max-width:100%} .bar-row .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)} .bar-row .v em{font-style:normal;color:var(--ink-mute);font-size:.85em} .note{border-left:2px solid var(--accent);padding:11px 14px;background:var(--page); border-radius:0 var(--radius) var(--radius) 0;font-size:12px;color:var(--ink-2);margin-top:var(--gap)} .note b{color:var(--ink)}.warnbox{border-left-color:var(--warn)} /* REQ-7. The drawer's required explanation, set apart from the caveat that may follow it: one answers "what am I looking at", the other "what is wrong with it". Same box at a slightly higher contrast, because it is the first thing to read, not an aside. */ .note.what{color:var(--ink);font-size:13.5px} /* BUG-22. A break in a year sequence, set apart from the data it interrupts: hatched, italic and un-numeric, so it cannot be scanned as a row of values. */ .row-gap>td{background:repeating-linear-gradient(135deg,transparent,transparent 5px, var(--page) 5px,var(--page) 10px);color:var(--ink-2);font-style:italic;font-size:12px; border-top:1px solid var(--axis);border-bottom:1px solid var(--axis)} .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 18px} .kv dt{color:var(--ink-mute);white-space:nowrap} /* DOF sales sits BELOW the Value & tax grid, full card width (2026-09-29). As a `
` it was a six-column table in the value column of a half-width card and ran past the card's right edge on almost every building. It scrolls inside the card if it is still wider than that, never over the edge. */ .dof-sales{margin-top:14px} .dof-sales-h{color:var(--ink-mute);margin-bottom:4px} .dof-sales-scroll{max-width:100%;overflow-x:auto} .dof-sales table{width:100%} .dof-sales table.compact th,.dof-sales table.compact td{padding-left:6px;padding-right:6px} .dof-sales td:nth-child(3){white-space:nowrap} .dof-sales .chip{white-space:normal;line-height:1.25;text-align:left} /* Sales history (IDEA-13): on a condo unit's page, that unit's own sales. */ .sales-history tr.mine td{font-weight:600} .sales-history .chip{white-space:normal;line-height:1.25;text-align:left} .nowrap{white-space:nowrap} /* Owner card "Last sold" — the second line under the date and price. */ .last-sold-why{font-size:12.5px;margin-top:2px} .btn{font:500 13px/1 var(--font);padding:10px 15px;border-radius:6px; border:1px solid var(--axis);background:var(--surface);color:var(--ink);cursor:pointer; display:inline-flex;align-items:center;gap:6px} .btn:hover{border-color:var(--ink-2);color:var(--ink)} /* Primary is ink, not blue: blue is the colour of DATA on these pages (links, bars, inferred chips), and a blue button reads as one more chart element. */ .btn.pri{background:var(--ink);border-color:var(--ink);color:var(--surface)} .btn.pri:hover{color:var(--surface);background:color-mix(in srgb,var(--ink) 85%,var(--accent))} .toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:var(--gap)} .htmx-request{opacity:.55;transition:opacity .1s} /* ── The auth surface (Phase 1 of users-and-access) ────────────────────────────── Plain form controls, because these pages carry no JavaScript at all: the demo host enforces `script-src 'self'` and refuses an inline handler silently (BUG-113). Every affordance below is a
, a