[object Object]

← back to Commercialrealestate

style: roomier collection grids — bigger card+container padding, 2px white stroke on cards/tiles across index/condos/mls/broker-grid/graphics/deals/fha-loans

177e1b0f548e7eb65ba60068e3f9cf0a9360c94e · 2026-07-02 08:30:11 -0700 · Steve Abrams

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Files touched

Diff

commit 177e1b0f548e7eb65ba60068e3f9cf0a9360c94e
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Jul 2 08:30:11 2026 -0700

    style: roomier collection grids — bigger card+container padding, 2px white stroke on cards/tiles across index/condos/mls/broker-grid/graphics/deals/fha-loans
    
    Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 public/broker-grid.html | 6 +++---
 public/condos.html      | 6 +++---
 public/deals.html       | 6 +++---
 public/fha-loans.html   | 6 +++---
 public/graphics.html    | 4 ++--
 public/index.html       | 4 ++--
 public/mls.html         | 6 +++---
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/public/broker-grid.html b/public/broker-grid.html
index ff5f34f..9efb86d 100644
--- a/public/broker-grid.html
+++ b/public/broker-grid.html
@@ -18,7 +18,7 @@
   .toggle button.on{background:var(--gold);color:#1a1205;font-weight:700;}
   .csvbtn{background:var(--card);border:1px solid var(--line);color:var(--acc);border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer;} .csvbtn:hover{border-color:var(--acc);}
   .count{color:var(--mut);font-size:12px;}
-  .wrap{padding:14px 18px 60px;}
+  .wrap{padding:24px 28px 60px;}
   .tblwrap{overflow:auto;max-height:calc(100vh - 130px);border:1px solid var(--line);border-radius:10px;}
   table.g{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;white-space:nowrap;}
   table.g thead th{position:sticky;top:0;background:#1b2230;color:var(--mut);text-transform:uppercase;letter-spacing:.3px;font-size:10.5px;padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;z-index:2;}
@@ -42,8 +42,8 @@
   #modal .litem{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid #20262f;font-size:13px;} #modal .litem .m{color:var(--mut);}
   .mbtn{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:7px 12px;font-size:13px;cursor:pointer;} .mbtn:hover{border-color:var(--blue);}
   .pitch{background:#0a0d13;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13px;white-space:pre-wrap;margin-top:10px;} .pitch .subj{color:var(--gold);font-weight:700;margin-bottom:6px;}
-  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
-  .gc{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px;}
+  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
+  .gc{background:var(--card);border:2px solid #fff;border-radius:11px;padding:18px 20px;}
   .gc .nm{font-weight:700;} .gc .fm{color:var(--mut);font-size:12px;margin-bottom:6px;}
   .gc .row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:2px 0;border-top:1px solid #20262f;}
   .gc .row .k{color:var(--mut);} .gc .ci{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;font-size:12.5px;}
diff --git a/public/condos.html b/public/condos.html
index b16857c..afe0255 100644
--- a/public/condos.html
+++ b/public/condos.html
@@ -17,9 +17,9 @@
   input[type=text]{min-width:280px;} input[type=range]{accent-color:var(--blue);}
   .controls label{font-size:12px;color:var(--mut);display:flex;align-items:center;gap:7px;}
   .count{margin-left:auto;font-size:12px;color:var(--mut);} .count b{color:var(--ink);}
-  main{padding:20px 22px;}
-  .grid{display:grid;gap:14px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));}
-  .condo{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;}
+  main{padding:30px 32px;}
+  .grid{display:grid;gap:22px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));}
+  .condo{background:var(--card);border:2px solid #fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:6px;}
   .condo .name{font-weight:600;font-size:14px;}
   .condo .addr{font-size:12px;color:var(--mut);}
   .row{display:flex;justify-content:space-between;font-size:12px;}
diff --git a/public/deals.html b/public/deals.html
index 508e4fc..f1a839e 100644
--- a/public/deals.html
+++ b/public/deals.html
@@ -25,7 +25,7 @@
   body::after{content:'';position:fixed;inset:0;z-index:-1;backdrop-filter:blur(70px);background:rgba(7,10,16,.34);}
   @keyframes drift{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
     50%{transform:translate3d(2%,-2%,0) scale(1.08) rotate(4deg);}100%{transform:translate3d(-2%,2%,0) scale(1.04) rotate(-3deg);}}
-  .wrap{max-width:1280px;margin:0 auto;padding:22px 22px 60px;}
+  .wrap{max-width:1280px;margin:0 auto;padding:32px 32px 60px;}
   /* ---- header ---- */
   header{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
   .title h1{font-size:26px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(92deg,#fff,var(--gold) 60%,var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
@@ -54,8 +54,8 @@
   .v.violet{background:linear-gradient(90deg,#fff,var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
   .v.blue{background:linear-gradient(90deg,#fff,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
   /* ---- chart grid ---- */
-  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:15px;}
-  .card{padding:18px 19px 16px;}
+  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;}
+  .card{padding:24px 25px 22px;border:2px solid rgba(255,255,255,.4);}
   .card h3{font-size:13px;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:8px;margin-bottom:3px;}
   .card .sub{font-size:11.5px;color:var(--muted);margin-bottom:12px;}
   .card .cw{position:relative;height:260px;}
diff --git a/public/fha-loans.html b/public/fha-loans.html
index 19c96e4..17a3b28 100644
--- a/public/fha-loans.html
+++ b/public/fha-loans.html
@@ -23,7 +23,7 @@
   body::after{content:'';position:fixed;inset:0;z-index:-1;backdrop-filter:blur(70px);background:rgba(7,10,16,.34);}
   @keyframes drift{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg);}
     50%{transform:translate3d(2%,-2%,0) scale(1.08) rotate(4deg);}100%{transform:translate3d(-2%,2%,0) scale(1.04) rotate(-3deg);}}
-  .wrap{max-width:1320px;margin:0 auto;padding:22px 22px 60px;}
+  .wrap{max-width:1320px;margin:0 auto;padding:32px 32px 60px;}
   /* header */
   header{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap;}
   .title h1{font-size:26px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(92deg,#fff,var(--gold) 60%,var(--teal));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
@@ -49,8 +49,8 @@
   .explain a:hover{color:#fff;}
   .redkey{display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--red);vertical-align:-1px;margin-right:4px;}
   /* hero tiles */
-  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:16px;}
-  .tile{padding:16px 18px;}
+  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:22px;}
+  .tile{padding:22px 24px;border:2px solid rgba(255,255,255,.4);}
   .tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);}
   .tile .v{font-size:30px;font-weight:800;letter-spacing:-.5px;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1;}
   .tile .s{font-size:11.5px;color:var(--muted);margin-top:6px;}
diff --git a/public/graphics.html b/public/graphics.html
index 94936b6..7a017b9 100644
--- a/public/graphics.html
+++ b/public/graphics.html
@@ -14,8 +14,8 @@
   header .nav{margin-left:auto;display:flex;gap:18px;}
   .stats{display:flex;gap:18px;font-size:12px;color:var(--mut);padding:10px 22px;flex-wrap:wrap;border-bottom:1px solid var(--line);}
   .stats b{color:var(--ink);font-size:16px;}
-  main{padding:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1400px;margin:0 auto;}
-  .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;min-height:340px;display:flex;flex-direction:column;}
+  main{padding:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:1400px;margin:0 auto;}
+  .card{background:var(--card);border:2px solid #fff;border-radius:12px;padding:24px;min-height:340px;display:flex;flex-direction:column;}
   .card.wide{grid-column:1 / -1;}
   .card h2{font-size:14px;margin:0 0 4px;}
   .card .sub{font-size:12px;color:var(--mut);margin:0 0 14px;}
diff --git a/public/index.html b/public/index.html
index 03ed2c1..bc2e681 100644
--- a/public/index.html
+++ b/public/index.html
@@ -52,7 +52,7 @@
   .bar .count { font-size:13px; color:var(--mut); } .bar .count b { color:var(--ink); }
   .bar label { font-size:11px; color:var(--mut); text-transform:uppercase; letter-spacing:.5px; }
   .bar .right { margin-left:auto; display:flex; align-items:center; gap:12px; }
-  .grid { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:16px; padding:18px 20px 30px; }
+  .grid { display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:22px; padding:30px 32px 44px; }
   @media (max-width:900px){ .grid{ grid-template-columns:repeat(2,1fr);} }
   @media (max-width:620px){ .grid{ grid-template-columns:1fr;}
     header{ flex-wrap:wrap; gap:10px; }              /* let the scenario seg-control drop to its own row instead of overflowing */
@@ -60,7 +60,7 @@
     .bar{ top:auto; }
     body{ overflow-x:hidden; }                        /* belt+braces: no horizontal scroll on phones */
   }
-  .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; position:relative; transition:box-shadow .2s,border-color .2s; }
+  .card { background:var(--card); border:2px solid #fff; border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:10px; position:relative; transition:box-shadow .2s,border-color .2s; }
   .card.uc { opacity:.62; }
   .card.flash { border-color:var(--blue); box-shadow:0 0 0 3px rgba(88,166,255,.35); }
   .top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
diff --git a/public/mls.html b/public/mls.html
index 8401e1a..77fe81a 100644
--- a/public/mls.html
+++ b/public/mls.html
@@ -18,7 +18,7 @@
   .toggle button.on{background:var(--blue);color:#0b0e14;font-weight:700;}
   .csvbtn{background:var(--card);border:1px solid var(--line);color:var(--acc);border-radius:9px;padding:8px 12px;font-size:13px;cursor:pointer;} .csvbtn:hover{border-color:var(--acc);}
   .count{color:var(--mut);font-size:12px;}
-  .wrap{padding:14px 18px 60px;}
+  .wrap{padding:24px 28px 60px;}
   /* TABLE (spreadsheet) */
   .tblwrap{overflow:auto;max-height:calc(100vh - 130px);border:1px solid var(--line);border-radius:10px;}
   table.mls{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;white-space:nowrap;}
@@ -33,8 +33,8 @@
   .pill.active{background:rgba(63,185,80,.16);color:var(--acc);} .pill.other{background:rgba(210,153,34,.16);color:var(--warn);}
   .mut{color:var(--mut);}
   /* GRID */
-  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
-  .gc{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px;}
+  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}
+  .gc{background:var(--card);border:2px solid #fff;border-radius:11px;padding:18px 20px;}
   .gc .addr{font-weight:600;} .gc .sub{color:var(--mut);font-size:12px;margin-bottom:6px;}
   .gc .row{display:flex;justify-content:space-between;font-size:12.5px;padding:2px 0;border-top:1px solid #20262f;}
   .gc .row .k{color:var(--mut);} .gc .row .v{font-variant-numeric:tabular-nums;}

← c5796c2 afternoon CRE update 2026-07-01  ·  back to Commercialrealestate  ·  feat(index): Amazon-style docked left filter rail + List/Gri c02f5b2 →