[object Object]

← back to Dw Yolo Loop

Brands page: apply graphic-designer pass — uniform logo chips (fixed 66% width), drop-shadow to lift faint logos, tighter 10px grid gap, consistent chip opacity/shadow

a249bd77ee8417ff7b609c3c49cab71f45dc1a75 · 2026-06-13 09:08:52 -0700 · Steve Abrams

Files touched

Diff

commit a249bd77ee8417ff7b609c3c49cab71f45dc1a75
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Jun 13 09:08:52 2026 -0700

    Brands page: apply graphic-designer pass — uniform logo chips (fixed 66% width), drop-shadow to lift faint logos, tighter 10px grid gap, consistent chip opacity/shadow
---
 scripts/brands-page/build-brands.cjs     | 8 ++++----
 scripts/brands-page/page-brands-new.html | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/scripts/brands-page/build-brands.cjs b/scripts/brands-page/build-brands.cjs
index 889dda9..a8ec804 100644
--- a/scripts/brands-page/build-brands.cjs
+++ b/scripts/brands-page/build-brands.cjs
@@ -61,17 +61,17 @@ const css=`<style>
 .dw-brand-head{text-align:center;padding:34px 20px 8px}
 .dw-brand-head h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(26px,3vw,36px);font-weight:600;color:#1c1c1c;margin:0 0 6px;letter-spacing:.01em}
 .dw-brand-head p{font-family:-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;color:#8a8a8a;margin:0}
-.dw-brand-grid{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:14px!important;padding:16px 24px 56px!important;max-width:1400px!important;margin:0 auto!important}
+.dw-brand-grid{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:10px!important;padding:14px 22px 52px!important;max-width:1400px!important;margin:0 auto!important}
 .dw-brand-card{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;border:1px solid #e7e7e7;border-radius:12px;overflow:hidden;text-decoration:none;transition:transform .18s,box-shadow .18s}
 .dw-brand-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.16)}
 .dw-bg{position:absolute;inset:0;display:block}
 .dw-bg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
 .dw-brand-card:hover .dw-bg img{transform:scale(1.05)}
-.dw-chip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80%;min-width:46%;background:rgba(255,255,255,.95);border-radius:11px;padding:14px 18px;box-shadow:0 4px 18px rgba(0,0,0,.20);display:flex;align-items:center;justify-content:center;min-height:34px}
-.dw-chip img{max-width:100%;max-height:46px;object-fit:contain;display:block}
+.dw-chip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66%;min-height:52px;background:rgba(255,255,255,.96);border-radius:10px;padding:12px 14px;box-shadow:0 6px 20px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.6) inset;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
+.dw-chip img{max-width:100%;max-height:44px;object-fit:contain;display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
 .dw-dard .dw-chip,.dw-dark .dw-chip{background:rgba(22,22,22,.92)}
 .dw-brand-logo{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:22px 20px}
-.dw-brand-logo img{max-width:100%;max-height:100%;object-fit:contain}
+.dw-brand-logo img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.10))}
 .dw-dark:not(.dw-has-bg){background:#1b1b1b;border-color:#1b1b1b}
 .dw-wmcard{background:#fcfbf9;border-color:#ece5d9}
 .nm{text-align:center;line-height:1.12;color:#2a2622}
diff --git a/scripts/brands-page/page-brands-new.html b/scripts/brands-page/page-brands-new.html
index 730f561..d5119bb 100644
--- a/scripts/brands-page/page-brands-new.html
+++ b/scripts/brands-page/page-brands-new.html
@@ -5,17 +5,17 @@
 .dw-brand-head{text-align:center;padding:34px 20px 8px}
 .dw-brand-head h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(26px,3vw,36px);font-weight:600;color:#1c1c1c;margin:0 0 6px;letter-spacing:.01em}
 .dw-brand-head p{font-family:-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;color:#8a8a8a;margin:0}
-.dw-brand-grid{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:14px!important;padding:16px 24px 56px!important;max-width:1400px!important;margin:0 auto!important}
+.dw-brand-grid{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:10px!important;padding:14px 22px 52px!important;max-width:1400px!important;margin:0 auto!important}
 .dw-brand-card{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;border:1px solid #e7e7e7;border-radius:12px;overflow:hidden;text-decoration:none;transition:transform .18s,box-shadow .18s}
 .dw-brand-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.16)}
 .dw-bg{position:absolute;inset:0;display:block}
 .dw-bg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
 .dw-brand-card:hover .dw-bg img{transform:scale(1.05)}
-.dw-chip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80%;min-width:46%;background:rgba(255,255,255,.95);border-radius:11px;padding:14px 18px;box-shadow:0 4px 18px rgba(0,0,0,.20);display:flex;align-items:center;justify-content:center;min-height:34px}
-.dw-chip img{max-width:100%;max-height:46px;object-fit:contain;display:block}
+.dw-chip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66%;min-height:52px;background:rgba(255,255,255,.96);border-radius:10px;padding:12px 14px;box-shadow:0 6px 20px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.6) inset;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
+.dw-chip img{max-width:100%;max-height:44px;object-fit:contain;display:block;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.18))}
 .dw-dard .dw-chip,.dw-dark .dw-chip{background:rgba(22,22,22,.92)}
 .dw-brand-logo{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:22px 20px}
-.dw-brand-logo img{max-width:100%;max-height:100%;object-fit:contain}
+.dw-brand-logo img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.10))}
 .dw-dark:not(.dw-has-bg){background:#1b1b1b;border-color:#1b1b1b}
 .dw-wmcard{background:#fcfbf9;border-color:#ece5d9}
 .nm{text-align:center;line-height:1.12;color:#2a2622}

← b065f65 Brands page redesign: room-setting bg + vendor logo chip on  ·  back to Dw Yolo Loop  ·  Brands page: design-panel synthesis (graphic-designer 4/5 + 7863e7d →