crcp header: display-scale two-line title lockup (LA County CRE / Investment Explorer), 34/28/22px responsive weight-800, fixes mobile truncation; comma-format + de-bold subline counts (TK-10883 #1,#2)

cb833c4dbb7209f69e8f941bf7aa4172e550cc5c · 2026-08-26 11:15:01 -0700 · Steve Abrams
Files touched

M public/index.html
Diff

commit cb833c4dbb7209f69e8f941bf7aa4172e550cc5c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Wed Aug 26 11:15:01 2026 -0700

    crcp header: display-scale two-line title lockup (LA County CRE / Investment Explorer), 34/28/22px responsive weight-800, fixes mobile truncation; comma-format + de-bold subline counts (TK-10883 #1,#2)
---
 public/index.html | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/public/index.html b/public/index.html
index 014e1ba..3bf9416 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,8 +23,15 @@
   .burger:hover { border-color:var(--blue); }
   .fcount { display:none; background:var(--blue); color:#04122b; font-size:11px; font-weight:700; border-radius:20px; padding:1px 7px; }
   .fcount.on { display:inline-block; }
-  .htitle h1 { margin:0; font-size:18px; letter-spacing:.2px; }
-  .htitle .sub { color:var(--mut); font-size:12px; }
+  /* TK-10883 — display-scale two-line title lockup. Line 1 = brand identity at true display
+     weight/scale; line 2 = qualifier in muted slate, smaller, tight leading. Two lines also fix
+     the mobile "LA County…" truncation of the old single 36-char line. */
+  .htitle h1 { margin:0; font-size:34px; font-weight:800; letter-spacing:-.2px; line-height:1.06; display:flex; flex-direction:column; }
+  .htitle h1 .tl1 { color:var(--ink); }
+  .htitle h1 .tl2 { font-size:.56em; font-weight:600; color:var(--mut,#64748b); letter-spacing:.1px; margin-top:1px; }
+  @media (max-width:1000px){ .htitle h1 { font-size:28px; } }
+  @media (max-width:640px){  .htitle h1 { font-size:22px; } }
+  .htitle .sub { color:var(--mut); font-size:12px; margin-top:4px; }
   header .spacer { margin-left:auto; }
   /* nav-link cluster; on wide screens it sits inline right-aligned, on tablets/phones it becomes a swipeable strip (see @media 1024) */
   .topnav { display:flex; align-items:center; flex-wrap:nowrap; }
@@ -73,8 +80,11 @@
     header{ flex-wrap:nowrap; gap:10px; }
     header .spacer{ display:none; }                    /* nav no longer right-pushed; topnav flexes to fill */
     .htitle{ min-width:0; flex:0 1 auto; }             /* let the title shrink instead of shoving nav off-screen */
-    .htitle h1{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
-    .htitle .sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }  /* keep title block 2 lines → header stays ~57px so sticky bar/drawer offsets hold */
+    /* TK-10883 — the title is now a two-line lockup of short lines; DON'T nowrap/ellipsis the h1
+       (that caused the old "LA County…" mobile truncation). Ellipsis stays on the sub only. */
+    .htitle h1{ white-space:normal; overflow:visible; }
+    .htitle h1 .tl1, .htitle h1 .tl2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+    .htitle .sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
     .topnav{ flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden;
              -webkit-overflow-scrolling:touch; scrollbar-width:none; }  /* iOS momentum-scroll, hidden scrollbar */
     .topnav::-webkit-scrollbar{ display:none; }
@@ -446,7 +456,7 @@
 <header>
   <button class="burger" id="burger" aria-label="Open filters">☰ Filters <span class="fcount" id="fcount">0</span></button>
   <div class="htitle">
-    <h1>LA County CRE — Investment Explorer</h1>
+    <h1><span class="tl1">LA County CRE</span><span class="tl2">Investment Explorer</span></h1>
     <div class="sub" id="sub">loading…</div>
   </div>
   <div class="spacer"></div>
@@ -2329,7 +2339,8 @@ function loadRanked(_retry){ return fetch('data/ranked.json').then(r=>{ if(!r.ok
   DATA=d; if(window.__comps) DATA.comps=window.__comps;
   // Merge condo inventory in-grid (best-effort; explorer still works if the API is down).
   let condoN=0; try{ const cd=await (await fetch('/api/condos')).json(); const cs=(cd.condos||[]).map(mapCondo); condoN=cs.length; DATA.ranked=DATA.ranked.concat(cs); }catch(e){}
-  $('#sub').innerHTML = `${d.ranked.length} listings${condoN?` · ${condoN} condos`:''} · <b>${d.meta.market}</b>${d.generated?' · sourced '+d.generated:''}`;
+  const nf = n => Number(n).toLocaleString('en-US'); // TK-10883 — comma-format counts, drop bold on geography
+  $('#sub').innerHTML = `${nf(d.ranked.length)} listings${condoN?` · ${nf(condoN)} condos`:''} · ${d.meta.market}${d.generated?' · sourced '+d.generated:''}`;
 
   scenario = localStorage.getItem('cre_scenario')||'25';
   $$('#scenario button').forEach(b=>b.classList.toggle('active',b.dataset.s===scenario));
← 06ef276 auto-data-snapshot: 2026-08-26T10:15:42 (4 data files) — dat · back to Commercialrealestate · corner-nav: ghost/outline menu pill (transparent bg, slate 1 12e1254 →