← back to Interiordesignershowroom
Elevate site UI to steelcase.com-caliber editorial design
1012ec8ef786cfc8396a050fe0627445f9aa3271 · 2026-08-01 21:11:30 -0700 · Steve Abrams
Files touched
M lib/render.jsM public/css/site.cssM server.js
Diff
commit 1012ec8ef786cfc8396a050fe0627445f9aa3271
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Sat Aug 1 21:11:30 2026 -0700
Elevate site UI to steelcase.com-caliber editorial design
---
lib/render.js | 14 +-
public/css/site.css | 1416 +++++++++++++++++++++++++++++++++++++++++----------
server.js | 14 +-
3 files changed, 1163 insertions(+), 281 deletions(-)
diff --git a/lib/render.js b/lib/render.js
index 339444c..f5be283 100644
--- a/lib/render.js
+++ b/lib/render.js
@@ -66,6 +66,9 @@ function layout({ title, description, canonical, jsonld, body, activeNav }) {
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="${esc(SITE.url)}/img/og.png">
<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=DM+Serif+Display&display=swap">
<link rel="stylesheet" href="/css/site.css">
${jsonld ? `<script type="application/ld+json">${JSON.stringify(jsonld)}</script>` : ''}
</head>
@@ -77,8 +80,15 @@ ${disclosureBar()}
</header>
<main>${body}</main>
<footer class="site-footer">
- <p>${esc(DISCLOSURE_SHORT)}</p>
- <p><a href="/disclosure">Affiliate Disclosure</a> · <a href="/privacy">Privacy</a> · <a href="/guides">Buying Guides</a></p>
+ <nav style="display:flex;justify-content:center;gap:32px;margin-bottom:24px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase">
+ <a href="/shop">Shop</a>
+ <a href="/looks">Rooms</a>
+ <a href="/build">Build</a>
+ <a href="/guides">Guides</a>
+ <a href="/disclosure">Disclosure</a>
+ <a href="/privacy">Privacy</a>
+ </nav>
+ <p style="margin:0 0 6px">${esc(DISCLOSURE_SHORT)}</p>
<p class="fine">© ${new Date().getFullYear()} ${esc(SITE.name)}. Prices and availability are accurate as of the date/time shown and are subject to change. As an Amazon Associate we earn from qualifying purchases.</p>
</footer>
</body>
diff --git a/public/css/site.css b/public/css/site.css
index 593d552..317ceeb 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -1,277 +1,1145 @@
-:root{
- --ink:#1a1714; --muted:#6b6259; --line:#e7e1d8; --bg:#faf8f5; --card:#fff;
- --accent:#8a7250; --cols:240px;
- --serif:"Georgia","Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
-}
-*{box-sizing:border-box}
-body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5}
-a{color:inherit;text-decoration:none}
-img{max-width:100%;display:block}
-h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
-main{max-width:1240px;margin:0 auto;padding:0 20px 64px}
-section{margin:44px 0}
-h2{font-size:1.4rem;margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid var(--line)}
-
-.disclosure{background:#1a1714;color:#f3ede3;font-size:.8rem;text-align:center;padding:7px 16px}
-.disclosure a{color:#e6c98a;text-decoration:underline}
-
-.site-header{display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:0 auto;padding:18px 20px;gap:20px}
-.brand{display:flex;align-items:center;gap:12px}
-.brand-mark{font-family:var(--serif);font-weight:700;background:var(--ink);color:#fff;width:38px;height:38px;display:grid;place-items:center;border-radius:3px;letter-spacing:.02em}
-.brand-word{font-family:var(--serif);font-size:1.05rem}
-.site-nav{display:flex;gap:22px;font-size:.92rem}
-.site-nav a{color:var(--muted)}
-.site-nav a.active,.site-nav a:hover{color:var(--ink)}
-
-.hero{text-align:center;padding:56px 20px;background:linear-gradient(180deg,#f2ece2,#faf8f5);border-radius:8px}
-.hero h1{font-size:2.6rem;margin:0 0 10px}
-.tagline{color:var(--muted);font-size:1.1rem;max-width:620px;margin:0 auto 22px}
-.cta{display:inline-block;background:var(--ink);color:#fff;padding:12px 26px;border-radius:40px;font-size:.95rem}
-.cta:hover{background:var(--accent)}
-
-.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
-.room-tile{aspect-ratio:4/3;background:#efe8dd;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-family:var(--serif);font-size:1.1rem;transition:.2s}
-.room-tile:hover{background:#e6dccb;transform:translateY(-2px)}
-
-.grid-controls{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:18px;font-size:.85rem;color:var(--muted)}
-.grid-controls select,.grid-controls input[type=range]{margin-left:6px}
-.grid-controls select{padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:.85rem}
-
-.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cols),1fr));gap:18px}
-.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
-.card:hover{border-color:#cfc4b2;box-shadow:0 6px 20px rgba(40,30,15,.07)}
-.card-img{aspect-ratio:1/1;background:#f1ece3;display:block}
-.card-img img{width:100%;height:100%;object-fit:cover}
-.noimg{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);font-size:.8rem}
-.card-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
-.card-brand{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
-.card-title{font-size:.95rem;font-family:var(--sans);font-weight:600;margin:0;line-height:1.3}
-.card-meta{margin-top:auto}
-.price{font-weight:700}
-.price.sale{color:#a33}
-.price.was{text-decoration:line-through;color:var(--muted);font-weight:400;font-size:.85rem}
-.buy{margin-top:8px;font-size:.82rem;color:var(--accent);font-weight:600}
-.buy:hover{text-decoration:underline}
-.subtle,.dek{color:var(--muted)}
-
-.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
-.guide-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
-.guide-card img{aspect-ratio:16/9;object-fit:cover;width:100%}
-.guide-card h3{margin:12px 14px 4px}
-.guide-card p{margin:0 14px 14px;color:var(--muted);font-size:.9rem}
-
-.guide{max-width:760px;margin:0 auto}
-.guide h1{font-size:2.1rem}
-.guide-hero{border-radius:8px;margin:18px 0}
-.guide-body{font-size:1.05rem}
-.guide-body h2{font-family:var(--serif)}
-.legal{max-width:720px;margin:0 auto}
-.legal p{color:#3a352e}
-
-.site-footer{border-top:1px solid var(--line);padding:32px 20px;text-align:center;color:var(--muted);font-size:.85rem}
-.site-footer a{text-decoration:underline}
-.site-footer .fine{font-size:.75rem;margin-top:10px;max-width:720px;margin-left:auto;margin-right:auto}
-
-/* Faceted catalog */
-.catalog{display:grid;grid-template-columns:210px 1fr;gap:26px;align-items:start}
-.facets{position:sticky;top:14px;display:flex;flex-direction:column;gap:16px}
-.facet-group h4{margin:0 0 6px;font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
-.facet{display:flex;justify-content:space-between;align-items:center;padding:3px 8px;border-radius:4px;font-size:.86rem;text-transform:capitalize;color:#3a352e}
-.facet:hover{background:#efe8dd}
-.facet.active{background:var(--ink);color:#fff}
-.facet .fn{font-size:.72rem;color:var(--muted);margin-left:8px}
-.facet.active .fn{color:#cfc4b2}
-.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
-.chip{background:#efe8dd;border:1px solid var(--line);border-radius:20px;padding:3px 11px;font-size:.8rem;text-transform:capitalize}
-.chip:hover{border-color:var(--accent);color:var(--accent)}
-.chip.clear{background:none;font-weight:600}
-@media(max-width:820px){.catalog{grid-template-columns:1fr}.facets{position:static;flex-flow:row wrap}.facet-group{min-width:140px}}
-
-/* Room Builder */
-.cta.sm{padding:8px 16px;font-size:.85rem}
-.builder-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
-.builder-grid{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start;margin-top:14px}
-.builder-controls{position:sticky;top:14px;display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px}
-.builder-controls label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}
-.builder-controls select,.builder-controls input{padding:7px 9px;border:1px solid var(--line);border-radius:5px;font-size:.9rem;background:#fff}
-.builder-controls h4{margin:6px 0 0;font-family:var(--sans);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
-.paint-strip{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;overflow:auto}
-.paint{width:34px;height:34px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;background:none}
-.paint img{width:100%;height:100%;object-fit:cover}
-.paint.sel{border-color:var(--ink)}
-.builder-save{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
-.builder-save input{padding:8px}
-.mini{font-size:.78rem;color:var(--accent);margin:0;min-height:1em}
-.board{background:#f3ede2;border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:22px}
-.board h3,.builder-main>h3{font-family:var(--serif);font-size:1.05rem;margin:0 0 10px}
-.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
-.empty{color:var(--muted);font-size:.9rem;grid-column:1/-1}
-.bitem{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
-.bitem>img,.bitem .noimg{aspect-ratio:1/1;object-fit:cover;width:100%;background:#efe8dd}
-.bitem-b{padding:7px 8px;display:flex;flex-direction:column;gap:4px;flex:1}
-.bitem-t{font-size:.8rem;line-height:1.25;font-weight:600}
-.bitem-m{font-size:.72rem;color:var(--muted);margin-top:auto}
-.bitem-btn{border:1px solid var(--line);background:#faf8f5;border-radius:4px;padding:4px;font-size:.75rem;cursor:pointer}
-.bitem-btn:hover{border-color:var(--accent);color:var(--accent)}
-
-/* Looks gallery + room page */
-.look-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
-.look-card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
-.look-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:1px;aspect-ratio:1/1;background:var(--line)}
-.look-thumbs img{width:100%;height:100%;object-fit:cover}
-.look-card h3{margin:10px 12px 2px;font-size:1rem}
-.look-card p{margin:0 12px 12px}
-.room-page{max-width:1100px;margin:0 auto}
-.room-scene{width:100%;border-radius:10px;margin:14px 0}
-.room-paint{display:flex;gap:14px;align-items:center;background:#f3ede2;border:1px solid var(--line);border-radius:8px;padding:12px;margin:14px 0;max-width:420px}
-.room-paint img{width:70px;height:70px;object-fit:cover;border-radius:6px}
-.room-cta{text-align:center;margin:30px 0}
-@media(max-width:760px){.builder-grid{grid-template-columns:1fr}.builder-controls{position:static}}
-@media(max-width:640px){.site-nav{gap:14px}.brand-word{display:none}.hero h1{font-size:2rem}}
-
-/* ---- Room Builder v2 (tray + left tabs + mid render + right products) ---- */
-.rb{max-width:1340px;margin:0 auto}
-.rb-tray{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;background:#221e19;color:#f3ede3;padding:10px 14px;border-radius:8px;flex-wrap:wrap}
-.rb-tray select,.rb-tray input{padding:7px 10px;border:1px solid #4a4136;border-radius:5px;background:#2e2820;color:#f3ede3;font-size:.85rem}
-.rb-tray.drop{outline:2px dashed #e6c98a}
-.rb-chips{flex:1;display:flex;gap:6px;flex-wrap:wrap;min-height:30px;align-items:center}
-.rb-hint{color:#a99;font-size:.8rem}
-.rb-chip{display:inline-flex;align-items:center;gap:5px;background:#4a4136;color:#f3ede3;border-radius:20px;padding:3px 10px;font-size:.78rem;cursor:pointer;text-transform:capitalize}
-.rb-chip.prod{background:#5a4d38;padding:2px 8px 2px 2px}
-.rb-chip.prod img{width:22px;height:22px;object-fit:cover;border-radius:50%}
-.rb-tray .cta{background:#e6c98a;color:#221e19;font-weight:700;padding:9px 22px}
-.rb-tray .cta:hover{background:#f0d9a5}
-
-.rb-body{display:grid;grid-template-columns:220px 1fr 300px;gap:16px;margin-top:14px;align-items:start}
-.rb-left{display:flex;flex-direction:column;gap:6px}
-.rb-tab{border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden}
-.rb-tab>summary{cursor:pointer;padding:9px 12px;font-family:var(--sans);font-weight:600;font-size:.85rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
-.rb-tab>summary::-webkit-details-marker{display:none}
-.rb-tab>summary::after{content:'+';color:var(--muted)}
-.rb-tab[open]>summary::after{content:'\2013'}
-.rb-tab[open]>summary{border-bottom:1px solid var(--line)}
-.rb-opts{display:flex;flex-wrap:wrap;gap:5px;padding:10px}
-.rb-opt{border:1px solid var(--line);background:#faf8f5;border-radius:16px;padding:4px 11px;font-size:.78rem;cursor:pointer;text-transform:capitalize}
-.rb-opt:hover{border-color:var(--accent)}
-.rb-opt.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
-.rb-opt.trend{background:#f3ece0;font-weight:600}
-
-.rb-mid{min-height:300px}
-.rb-render{background:#efe8dd;border:1px solid var(--line);border-radius:10px;min-height:300px;display:flex;align-items:center;justify-content:center;padding:16px}
-.rb-render.drop,.rb-mid.drop{outline:2px dashed var(--accent)}
-.rb-render-ph{color:var(--muted);text-align:center;font-family:var(--serif);font-size:1.1rem}
-.rb-scene{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;width:100%}
-.rb-scene.painted{padding:14px;border-radius:8px}
-.rb-scene-item{background:#fff;border-radius:6px;overflow:hidden;aspect-ratio:1/1;box-shadow:0 2px 8px rgba(0,0,0,.08)}
-.rb-scene-item img{width:100%;height:100%;object-fit:cover}
-.rb-ideas-h{margin:18px 0 8px;font-family:var(--serif)}
-.rb-ideas{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
+/* =========================================================
+ Interior Designer's Showroom — Editorial Design System
+ Target: steelcase.com caliber — clean, confident, premium
+ ========================================================= */
+
+/* ---- Google Fonts (preconnect in layout, one family max) ---- */
+/* DM Sans for UI + DM Serif Display for editorial headlines */
+
+:root {
+ /* Palette — warm bone/off-white, near-black ink, one quiet accent */
+ --ink: #16130f;
+ --ink-80: #3a3530;
+ --muted: #7a7168;
+ --muted-lt:#b0a898;
+ --line: #e8e2d9;
+ --line-lt: #f1ece5;
+ --bg: #faf8f5;
+ --bg-warm: #f4f0e9;
+ --card: #ffffff;
+ --accent: #9b7b50; /* single warm-gold accent */
+ --accent-dk: #7a6038;
+
+ /* Type */
+ --serif: 'DM Serif Display', 'Didot', 'Georgia', serif;
+ --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+
+ /* Grid */
+ --cols: 260px;
+ --max-w: 1280px;
+ --pad: 28px;
+
+ /* Motion */
+ --ease: cubic-bezier(.22, 1, .36, 1);
+ --dur: .22s;
+}
+
+/* ---- Reset ---- */
+*, *::before, *::after { box-sizing: border-box; }
+html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
+body {
+ margin: 0;
+ font-family: var(--sans);
+ font-size: 16px;
+ line-height: 1.65;
+ color: var(--ink);
+ background: var(--bg);
+}
+a { color: inherit; text-decoration: none; }
+img { max-width: 100%; display: block; }
+button { font-family: var(--sans); }
+h1, h2, h3 { line-height: 1.2; }
+
+/* ---- Main container ---- */
+main { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad) 96px; }
+section { margin: 64px 0; }
+
+/* ---- Disclosure bar ---- */
+.disclosure {
+ background: var(--ink);
+ color: #d8cfc4;
+ font-size: .72rem;
+ font-family: var(--sans);
+ letter-spacing: .04em;
+ text-align: center;
+ padding: 9px 20px;
+ line-height: 1.5;
+}
+.disclosure a { color: #c9a96e; text-decoration: underline; text-underline-offset: 3px; }
+
+/* =========================================================
+ HEADER — sticky, polished, editorial
+ ========================================================= */
+.site-header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 100%;
+ padding: 0 var(--pad);
+ height: 68px;
+ background: rgba(250, 248, 245, .96);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border-bottom: 1px solid var(--line);
+ gap: 24px;
+}
+
+.brand {
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ flex-shrink: 0;
+}
+.brand-mark {
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: .95rem;
+ letter-spacing: .12em;
+ background: var(--ink);
+ color: #faf8f5;
+ width: 42px;
+ height: 42px;
+ display: grid;
+ place-items: center;
+ border-radius: 2px;
+}
+.brand-word {
+ font-family: var(--serif);
+ font-size: 1.1rem;
+ font-weight: 400;
+ letter-spacing: .01em;
+ color: var(--ink);
+}
+
+.site-nav {
+ display: flex;
+ align-items: center;
+ gap: 32px;
+ font-size: .84rem;
+ letter-spacing: .06em;
+ text-transform: uppercase;
+}
+.site-nav a {
+ color: var(--muted);
+ transition: color var(--dur);
+ padding-bottom: 2px;
+ border-bottom: 1px solid transparent;
+}
+.site-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
+.site-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }
+
+/* =========================================================
+ HERO — large, calm, editorial
+ ========================================================= */
+.hero {
+ text-align: center;
+ padding: 100px 40px 96px;
+ background: var(--bg-warm);
+ border-radius: 4px;
+ margin: 32px 0 0;
+ position: relative;
+ overflow: hidden;
+}
+.hero::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(155,123,80,.06), transparent);
+ pointer-events: none;
+}
+.hero h1 {
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: clamp(2.6rem, 5vw, 4.2rem);
+ letter-spacing: -.02em;
+ margin: 0 0 20px;
+ color: var(--ink);
+}
+.tagline {
+ color: var(--muted);
+ font-size: clamp(1rem, 1.8vw, 1.2rem);
+ max-width: 560px;
+ margin: 0 auto 36px;
+ line-height: 1.7;
+ font-weight: 300;
+}
+.cta {
+ display: inline-block;
+ background: var(--ink);
+ color: #faf8f5;
+ padding: 14px 32px;
+ border-radius: 2px;
+ font-size: .85rem;
+ letter-spacing: .1em;
+ text-transform: uppercase;
+ font-weight: 500;
+ transition: background var(--dur) var(--ease), color var(--dur);
+}
+.cta:hover { background: var(--accent); }
+
+/* =========================================================
+ SECTION HEADINGS — refined editorial style
+ ========================================================= */
+section > h1 {
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: clamp(2rem, 3.5vw, 3rem);
+ letter-spacing: -.02em;
+ margin: 0 0 8px;
+ color: var(--ink);
+}
+section > h2,
+h2 {
+ font-family: var(--sans);
+ font-weight: 400;
+ font-size: .72rem;
+ letter-spacing: .14em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin: 0 0 28px;
+ padding-bottom: 0;
+ border-bottom: none;
+ position: relative;
+}
+section > h2::after,
+h2.ruled::after {
+ content: '';
+ display: block;
+ height: 1px;
+ background: var(--line);
+ margin-top: 12px;
+}
+.section-eyebrow {
+ font-size: .7rem;
+ letter-spacing: .14em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-bottom: 10px;
+ display: block;
+}
+
+/* =========================================================
+ ROOM TILES — editorial grid
+ ========================================================= */
+.room-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 2px;
+}
+.room-tile {
+ aspect-ratio: 5/4;
+ background: var(--bg-warm);
+ display: grid;
+ place-items: center;
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: 1.15rem;
+ color: var(--ink-80);
+ letter-spacing: .01em;
+ transition: background var(--dur), color var(--dur);
+ border: 1px solid var(--line);
+}
+.room-tile:hover {
+ background: var(--ink);
+ color: #faf8f5;
+}
+
+/* =========================================================
+ GRID CONTROLS — refined
+ ========================================================= */
+.grid-controls {
+ display: flex;
+ gap: 28px;
+ align-items: center;
+ flex-wrap: wrap;
+ margin-bottom: 24px;
+ font-size: .75rem;
+ letter-spacing: .06em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.grid-controls label {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+.grid-controls select,
+.grid-controls input[type=range] {
+ margin-left: 0;
+}
+.grid-controls select {
+ padding: 6px 12px;
+ border: 1px solid var(--line);
+ border-radius: 2px;
+ background: var(--card);
+ font-size: .8rem;
+ font-family: var(--sans);
+ color: var(--ink);
+ cursor: pointer;
+ appearance: none;
+ -webkit-appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a7168' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 10px center;
+ padding-right: 28px;
+}
+
+/* =========================================================
+ PRODUCT GRID — image-forward, no chrome
+ ========================================================= */
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(var(--cols), 1fr));
+ gap: 2px;
+}
+.card {
+ background: var(--card);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+ border: 1px solid var(--line-lt);
+ position: relative;
+}
+.card:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 12px 40px rgba(22, 19, 15, .09);
+ z-index: 1;
+}
+.card-img {
+ aspect-ratio: 4/5;
+ background: var(--bg-warm);
+ display: block;
+ overflow: hidden;
+}
+.card-img img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transition: transform .5s var(--ease);
+}
+.card:hover .card-img img { transform: scale(1.03); }
+.noimg {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ place-items: center;
+ color: var(--muted-lt);
+ font-size: .75rem;
+ letter-spacing: .06em;
+ text-transform: uppercase;
+}
+.card-body {
+ padding: 16px 18px 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ flex: 1;
+}
+.card-brand {
+ font-size: .65rem;
+ letter-spacing: .12em;
+ text-transform: uppercase;
+ color: var(--accent);
+ font-weight: 500;
+}
+.card-title {
+ font-family: var(--sans);
+ font-size: .9rem;
+ font-weight: 400;
+ margin: 0;
+ line-height: 1.4;
+ color: var(--ink-80);
+}
+.card-title a:hover { color: var(--ink); }
+.card-meta {
+ margin-top: auto;
+ padding-top: 8px;
+}
+.price {
+ font-size: .88rem;
+ font-weight: 500;
+ color: var(--ink);
+ letter-spacing: .01em;
+}
+.price.sale { color: #8b3a3a; }
+.price.was {
+ text-decoration: line-through;
+ color: var(--muted-lt);
+ font-weight: 400;
+ font-size: .8rem;
+}
+.buy {
+ display: inline-block;
+ margin-top: 10px;
+ font-size: .72rem;
+ letter-spacing: .08em;
+ text-transform: uppercase;
+ color: var(--muted);
+ font-weight: 500;
+ border-bottom: 1px solid transparent;
+ transition: color var(--dur), border-color var(--dur);
+}
+.buy:hover { color: var(--ink); border-bottom-color: var(--ink); }
+.subtle, .dek { color: var(--muted); }
+
+/* =========================================================
+ GUIDE CARDS — editorial
+ ========================================================= */
+.guide-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 2px;
+}
+.guide-card {
+ background: var(--card);
+ border: 1px solid var(--line-lt);
+ overflow: hidden;
+ display: block;
+ transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+}
+.guide-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 32px rgba(22,19,15,.08);
+}
+.guide-card img {
+ aspect-ratio: 16/9;
+ object-fit: cover;
+ width: 100%;
+ transition: transform .5s var(--ease);
+}
+.guide-card:hover img { transform: scale(1.03); }
+.guide-card h3 {
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: 1.15rem;
+ margin: 18px 20px 6px;
+ color: var(--ink);
+}
+.guide-card p {
+ margin: 0 20px 20px;
+ color: var(--muted);
+ font-size: .88rem;
+ line-height: 1.6;
+}
+
+/* =========================================================
+ GUIDE ARTICLE
+ ========================================================= */
+.guide { max-width: 760px; margin: 0 auto; }
+.guide h1 {
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: clamp(2rem, 4vw, 3.2rem);
+ letter-spacing: -.02em;
+ margin: 0 0 12px;
+}
+.guide-hero { border-radius: 3px; margin: 24px 0; width: 100%; }
+.guide-body { font-size: 1.05rem; line-height: 1.8; color: var(--ink-80); }
+.guide-body h2 {
+ font-family: var(--serif);
+ font-size: 1.6rem;
+ font-weight: 400;
+ color: var(--ink);
+ margin: 40px 0 12px;
+ letter-spacing: -.01em;
+ text-transform: none;
+ letter-spacing: normal;
+}
+.guide-body h2::after { display: none; }
+.guide-body h3 { font-family: var(--sans); font-weight: 600; font-size: 1rem; margin: 28px 0 8px; }
+
+.legal { max-width: 720px; margin: 0 auto; }
+.legal h1 {
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: 2.2rem;
+ letter-spacing: -.02em;
+}
+.legal p { color: var(--ink-80); line-height: 1.8; }
+
+/* =========================================================
+ FACETED CATALOG
+ ========================================================= */
+.catalog {
+ display: grid;
+ grid-template-columns: 200px 1fr;
+ gap: 48px;
+ align-items: start;
+}
+.facets {
+ position: sticky;
+ top: 88px;
+ display: flex;
+ flex-direction: column;
+ gap: 28px;
+}
+.facet-group h4 {
+ margin: 0 0 10px;
+ font-family: var(--sans);
+ font-size: .65rem;
+ text-transform: uppercase;
+ letter-spacing: .12em;
+ color: var(--muted-lt);
+}
+.facet {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 5px 10px;
+ border-radius: 2px;
+ font-size: .84rem;
+ text-transform: capitalize;
+ color: var(--ink-80);
+ transition: background var(--dur), color var(--dur);
+}
+.facet:hover { background: var(--bg-warm); }
+.facet.active { background: var(--ink); color: #faf8f5; }
+.facet .fn {
+ font-size: .68rem;
+ color: var(--muted-lt);
+ margin-left: 10px;
+ font-weight: 400;
+}
+.facet.active .fn { color: rgba(250,248,245,.5); }
+.active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
+.chip {
+ background: transparent;
+ border: 1px solid var(--line);
+ border-radius: 2px;
+ padding: 4px 13px;
+ font-size: .72rem;
+ letter-spacing: .06em;
+ text-transform: uppercase;
+ color: var(--ink-80);
+ transition: border-color var(--dur), color var(--dur);
+}
+.chip:hover { border-color: var(--accent); color: var(--accent); }
+.chip.clear { font-weight: 600; }
+@media (max-width: 840px) {
+ .catalog { grid-template-columns: 1fr; }
+ .facets { position: static; flex-flow: row wrap; }
+ .facet-group { min-width: 140px; }
+}
+
+/* =========================================================
+ FOOTER — quiet editorial
+ ========================================================= */
+.site-footer {
+ border-top: 1px solid var(--line);
+ padding: 48px var(--pad) 40px;
+ text-align: center;
+ color: var(--muted);
+ font-size: .8rem;
+ line-height: 1.7;
+ letter-spacing: .02em;
+}
+.site-footer a { border-bottom: 1px solid var(--line); transition: border-color var(--dur), color var(--dur); padding-bottom: 1px; }
+.site-footer a:hover { color: var(--ink); border-bottom-color: var(--ink); }
+.site-footer .fine {
+ font-size: .7rem;
+ margin-top: 16px;
+ max-width: 680px;
+ margin-left: auto;
+ margin-right: auto;
+ color: var(--muted-lt);
+}
+
+/* =========================================================
+ ROOM BUILDER — tray / left tabs / mid gallery / right panel
+ Preserve all existing layout logic; only elevate aesthetics
+ ========================================================= */
+.cta.sm {
+ padding: 10px 20px;
+ font-size: .72rem;
+ letter-spacing: .1em;
+}
+.builder-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ flex-wrap: wrap;
+ gap: 12px;
+ margin-bottom: 8px;
+}
+.builder-grid {
+ display: grid;
+ grid-template-columns: 280px 1fr;
+ gap: 28px;
+ align-items: start;
+ margin-top: 16px;
+}
+.builder-controls {
+ position: sticky;
+ top: 88px;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ background: var(--card);
+ border: 1px solid var(--line);
+ border-radius: 3px;
+ padding: 20px;
+}
+.builder-controls label {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ font-size: .7rem;
+ letter-spacing: .08em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.builder-controls select,
+.builder-controls input {
+ padding: 8px 10px;
+ border: 1px solid var(--line);
+ border-radius: 2px;
+ font-size: .88rem;
+ font-family: var(--sans);
+ background: var(--bg);
+ color: var(--ink);
+}
+.builder-controls h4 {
+ margin: 8px 0 0;
+ font-family: var(--sans);
+ font-size: .65rem;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ color: var(--muted-lt);
+}
+.paint-strip {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+ max-height: 150px;
+ overflow: auto;
+}
+.paint {
+ width: 34px;
+ height: 34px;
+ padding: 0;
+ border: 2px solid transparent;
+ border-radius: 3px;
+ overflow: hidden;
+ cursor: pointer;
+ background: none;
+}
+.paint img { width: 100%; height: 100%; object-fit: cover; }
+.paint.sel { border-color: var(--ink); }
+.builder-save {
+ border-top: 1px solid var(--line);
+ padding-top: 14px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+.builder-save input { padding: 9px; }
+.mini { font-size: .75rem; color: var(--accent); margin: 0; min-height: 1em; }
+.board {
+ background: var(--bg-warm);
+ border: 1px solid var(--line);
+ border-radius: 3px;
+ padding: 16px;
+ margin-bottom: 24px;
+}
+.board h3, .builder-main > h3 {
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: 1.05rem;
+ margin: 0 0 12px;
+}
+.board-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 12px;
+}
+.empty { color: var(--muted); font-size: .88rem; grid-column: 1/-1; }
+.bitem {
+ background: var(--card);
+ border: 1px solid var(--line);
+ border-radius: 3px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+.bitem > img, .bitem .noimg {
+ aspect-ratio: 1/1;
+ object-fit: cover;
+ width: 100%;
+ background: var(--bg-warm);
+}
+.bitem-b { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
+.bitem-t { font-size: .8rem; line-height: 1.25; font-weight: 500; }
+.bitem-m { font-size: .72rem; color: var(--muted); margin-top: auto; }
+.bitem-btn {
+ border: 1px solid var(--line);
+ background: var(--bg);
+ border-radius: 2px;
+ padding: 4px;
+ font-size: .72rem;
+ cursor: pointer;
+ font-family: var(--sans);
+}
+.bitem-btn:hover { border-color: var(--accent); color: var(--accent); }
+
+/* =========================================================
+ LOOKS GALLERY + ROOM PAGE
+ ========================================================= */
+.look-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+ gap: 2px;
+}
+.look-card {
+ background: var(--card);
+ border: 1px solid var(--line-lt);
+ overflow: hidden;
+ display: block;
+ transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
+}
+.look-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 32px rgba(22,19,15,.08);
+}
+.look-thumbs {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1px;
+ aspect-ratio: 1/1;
+ background: var(--line);
+}
+.look-thumbs img { width: 100%; height: 100%; object-fit: cover; }
+.look-card h3 {
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: 1.05rem;
+ margin: 14px 16px 4px;
+}
+.look-card p { margin: 0 16px 16px; font-size: .82rem; color: var(--muted); }
+.room-page { max-width: 1100px; margin: 0 auto; }
+.room-scene { width: 100%; border-radius: 3px; margin: 16px 0; }
+.room-paint {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ background: var(--bg-warm);
+ border: 1px solid var(--line);
+ border-radius: 3px;
+ padding: 14px;
+ margin: 16px 0;
+ max-width: 440px;
+}
+.room-paint img { width: 72px; height: 72px; object-fit: cover; border-radius: 3px; }
+.room-cta { text-align: center; margin: 40px 0; }
+
+/* =========================================================
+ ROOM BUILDER v2 — tray + left tabs + mid render + right products
+ Preserve all layout / js hooks; polish aesthetics
+ ========================================================= */
+.rb { max-width: 1380px; margin: 0 auto; }
+.rb-tray {
+ position: sticky;
+ top: 68px; /* below sticky header */
+ z-index: 20;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ background: var(--ink);
+ color: #f0ebe3;
+ padding: 11px 16px;
+ border-radius: 3px;
+ flex-wrap: wrap;
+}
+.rb-tray select, .rb-tray input {
+ padding: 7px 11px;
+ border: 1px solid rgba(255,255,255,.12);
+ border-radius: 2px;
+ background: rgba(255,255,255,.07);
+ color: #f0ebe3;
+ font-size: .84rem;
+ font-family: var(--sans);
+}
+.rb-tray.drop { outline: 2px dashed #c9a96e; }
+.rb-chips {
+ flex: 1;
+ display: flex;
+ gap: 6px;
+ flex-wrap: wrap;
+ min-height: 30px;
+ align-items: center;
+}
+.rb-hint { color: rgba(240,235,227,.5); font-size: .78rem; }
+.rb-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ background: rgba(255,255,255,.1);
+ color: #f0ebe3;
+ border-radius: 2px;
+ padding: 3px 10px;
+ font-size: .76rem;
+ cursor: pointer;
+ text-transform: capitalize;
+ letter-spacing: .03em;
+}
+.rb-chip.prod {
+ background: rgba(255,255,255,.12);
+ padding: 2px 8px 2px 2px;
+}
+.rb-chip.prod img {
+ width: 26px;
+ height: 26px;
+ object-fit: cover;
+ border-radius: 2px;
+}
+.rb-tray .cta {
+ background: #c9a96e;
+ color: var(--ink);
+ font-weight: 600;
+ padding: 9px 24px;
+ letter-spacing: .08em;
+ border-radius: 2px;
+}
+.rb-tray .cta:hover { background: #d4b87e; }
+
+.rb-body {
+ display: grid;
+ grid-template-columns: 220px 1fr;
+ gap: 18px;
+ margin-top: 16px;
+ align-items: start;
+ transition: grid-template-columns .28s;
+}
+.rb-left { display: flex; flex-direction: column; gap: 4px; }
+.rb-tab {
+ border: 1px solid var(--line);
+ border-radius: 2px;
+ background: var(--card);
+ overflow: hidden;
+}
+.rb-tab > summary {
+ cursor: pointer;
+ padding: 10px 14px;
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: .82rem;
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ letter-spacing: .02em;
+}
+.rb-tab > summary::-webkit-details-marker { display: none; }
+.rb-tab > summary::after { content: '+'; color: var(--muted-lt); font-size: 1rem; font-weight: 300; }
+.rb-tab[open] > summary::after { content: '–'; }
+.rb-tab[open] > summary { border-bottom: 1px solid var(--line); }
+.rb-opts { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px 12px; }
+.rb-opt {
+ border: 1px solid var(--line);
+ background: var(--bg);
+ border-radius: 2px;
+ padding: 4px 12px;
+ font-size: .76rem;
+ cursor: pointer;
+ text-transform: capitalize;
+ font-family: var(--sans);
+ letter-spacing: .03em;
+ transition: background var(--dur), border-color var(--dur), color var(--dur);
+}
+.rb-opt:hover { border-color: var(--accent); }
+.rb-opt.sel { background: var(--ink); color: #faf8f5; border-color: var(--ink); }
+.rb-opt.trend { background: var(--bg-warm); font-weight: 500; }
+
+.rb-mid { min-height: 320px; }
+.rb-render {
+ background: var(--bg-warm);
+ border: 1px solid var(--line);
+ border-radius: 3px;
+ min-height: 320px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+}
+.rb-render.drop, .rb-mid.drop { outline: 2px dashed var(--accent); }
+.rb-render-ph {
+ color: var(--muted);
+ text-align: center;
+ font-family: var(--serif);
+ font-size: 1.05rem;
+ line-height: 1.7;
+}
+.rb-scene { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; width: 100%; }
+.rb-scene.painted { padding: 16px; border-radius: 3px; }
+.rb-scene-item {
+ background: var(--card);
+ border-radius: 3px;
+ overflow: hidden;
+ aspect-ratio: 1/1;
+ box-shadow: 0 2px 10px rgba(22,19,15,.08);
+ cursor: default;
+}
+.rb-scene-item img { width: 100%; height: 100%; object-fit: cover; }
+.rb-ideas-h { margin: 20px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 1.05rem; }
+.rb-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
/* ---- rb-right: slide-in product panel ---- */
-.rb-right{
- position:fixed;top:0;right:0;height:100vh;width:340px;z-index:40;
- background:#fff;border-left:1px solid var(--line);
- box-shadow:-6px 0 28px rgba(30,20,10,.14);
- display:flex;flex-direction:column;
- transform:translateX(0);transition:transform .28s cubic-bezier(.4,0,.2,1);
- overflow:hidden;
-}
-.rb-right.collapsed{transform:translateX(110%)}
-.rb-right-head{
- display:flex;align-items:center;justify-content:space-between;
- padding:14px 16px 12px;border-bottom:1px solid var(--line);
- font-family:var(--serif);font-weight:600;font-size:1rem;flex-shrink:0;
-}
-.rb-ham-close{
- background:none;border:none;cursor:pointer;font-size:1.1rem;line-height:1;
- color:var(--muted);padding:4px 6px;border-radius:4px;
-}
-.rb-ham-close:hover{color:var(--ink);background:#f3ede3}
-.rb-right>input{width:calc(100% - 32px);margin:12px 16px 8px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:.88rem;flex-shrink:0}
-.rb-products{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1;overflow-y:auto;padding:0 16px 16px;}
-.rbp{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;cursor:grab}
-.rbp:active{cursor:grabbing}
-.rbp>img,.rbp .noimg{aspect-ratio:1/1;object-fit:cover;width:100%;background:#efe8dd}
-.rbp-t{font-size:.75rem;font-weight:600;line-height:1.2;padding:6px 7px 2px}
-.rbp-m{font-size:.68rem;color:var(--muted);padding:0 7px}
-.rbp-add{margin:6px 7px 7px;border:1px solid var(--line);background:#faf8f5;border-radius:4px;padding:4px;font-size:.72rem;cursor:pointer}
-.rbp-add:hover{border-color:var(--accent);color:var(--accent)}
-.empty{color:var(--muted);font-size:.85rem;grid-column:1/-1}
-.noimg{display:grid;place-items:center;color:var(--muted);font-size:.7rem}
-/* rb-ham: hamburger pill — top-right of the builder, only shows when panel is closed */
-.rb-ham{
- position:fixed;top:18px;right:18px;z-index:50;
- display:inline-flex;align-items:center;gap:7px;
- background:#221e19;color:#f3ede3;
- border:none;border-radius:40px;padding:9px 18px;font-size:.85rem;font-weight:600;
- cursor:pointer;box-shadow:0 4px 16px rgba(30,20,10,.22);
- transition:opacity .2s,background .2s;
-}
-.rb-ham:hover{background:var(--accent)}
-/* hide the ham button while the panel is open */
+.rb-right {
+ position: fixed;
+ top: 0;
+ right: 0;
+ height: 100vh;
+ width: 340px;
+ z-index: 40;
+ background: var(--card);
+ border-left: 1px solid var(--line);
+ box-shadow: -8px 0 40px rgba(22, 19, 15, .12);
+ display: flex;
+ flex-direction: column;
+ transform: translateX(0);
+ transition: transform .28s var(--ease);
+ overflow: hidden;
+}
+.rb-right.collapsed { transform: translateX(110%); }
+.rb-right-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 18px 13px;
+ border-bottom: 1px solid var(--line);
+ font-family: var(--sans);
+ font-weight: 500;
+ font-size: .82rem;
+ letter-spacing: .08em;
+ text-transform: uppercase;
+ flex-shrink: 0;
+}
+.rb-ham-close {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: .9rem;
+ line-height: 1;
+ color: var(--muted);
+ padding: 5px 7px;
+ border-radius: 2px;
+ transition: background var(--dur), color var(--dur);
+}
+.rb-ham-close:hover { color: var(--ink); background: var(--bg-warm); }
+.rb-right > input {
+ width: calc(100% - 32px);
+ margin: 13px 16px 10px;
+ padding: 9px 12px;
+ border: 1px solid var(--line);
+ border-radius: 2px;
+ font-size: .86rem;
+ font-family: var(--sans);
+ flex-shrink: 0;
+ color: var(--ink);
+ background: var(--bg);
+}
+.rb-products {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 8px;
+ flex: 1;
+ overflow-y: auto;
+ padding: 0 16px 16px;
+}
+.rbp {
+ background: var(--card);
+ border: 1px solid var(--line-lt);
+ border-radius: 2px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ cursor: grab;
+ transition: box-shadow var(--dur);
+}
+.rbp:hover { box-shadow: 0 4px 16px rgba(22,19,15,.09); }
+.rbp:active { cursor: grabbing; }
+.rbp > img, .rbp .noimg {
+ aspect-ratio: 1/1;
+ object-fit: cover;
+ width: 100%;
+ background: var(--bg-warm);
+}
+.rbp-t { font-size: .74rem; font-weight: 500; line-height: 1.25; padding: 7px 8px 3px; color: var(--ink-80); }
+.rbp-m { font-size: .68rem; color: var(--muted); padding: 0 8px; }
+.rbp-add {
+ margin: 6px 8px 8px;
+ border: 1px solid var(--line);
+ background: var(--bg);
+ border-radius: 2px;
+ padding: 5px;
+ font-size: .7rem;
+ cursor: pointer;
+ font-family: var(--sans);
+ letter-spacing: .04em;
+ transition: border-color var(--dur), color var(--dur);
+}
+.rbp-add:hover { border-color: var(--accent); color: var(--accent); }
+
+/* ---- rb-ham hamburger pill ---- */
+.rb-ham {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ z-index: 50;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ background: var(--ink);
+ color: #f0ebe3;
+ border: none;
+ border-radius: 2px;
+ padding: 10px 20px;
+ font-size: .78rem;
+ font-weight: 500;
+ letter-spacing: .08em;
+ text-transform: uppercase;
+ cursor: pointer;
+ box-shadow: 0 4px 20px rgba(22,19,15,.22);
+ transition: opacity .2s, background .2s;
+ font-family: var(--sans);
+}
+.rb-ham:hover { background: var(--accent); }
.rb-right:not(.collapsed) ~ .rb-ham,
-body:has(.rb-right:not(.collapsed)) .rb-ham{ opacity:0;pointer-events:none }
-
-/* rb-body: 3-col when panel is open, 2-col (left + mid) when collapsed */
-.rb-body{display:grid;grid-template-columns:220px 1fr;gap:16px;margin-top:14px;align-items:start;transition:grid-template-columns .28s}
-/* right panel is fixed/overlay, not a grid column */
-
-/* rb-renders: responsive gallery grid for AI room cards */
-.rb-renders{
- display:grid;
- grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
- gap:14px;
- min-height:240px;
-}
-.rb-render-ph{
- grid-column:1/-1;display:flex;align-items:center;justify-content:center;
- min-height:240px;color:var(--muted);text-align:center;font-family:var(--serif);font-size:1.05rem;
- background:#f3ede2;border:1px solid var(--line);border-radius:10px;padding:24px;
-}
-
-/* rb-gen: individual AI room card */
-.rb-gen{
- aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:2px solid transparent;
- background:#efe8dd;position:relative;cursor:pointer;
- transition:border-color .18s,box-shadow .18s;
-}
-.rb-gen img{width:100%;height:100%;object-fit:cover;display:block}
-.rb-gen:hover{box-shadow:0 6px 24px rgba(30,20,10,.14)}
-.rb-gen.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
-.rb-gen.loading{background:#e8e0d5;display:flex;align-items:center;justify-content:center}
-
-/* rb-gen-spin: centered loading indicator inside a .rb-gen.loading card */
-.rb-gen-spin{
- text-align:center;color:var(--muted);font-family:var(--serif);font-size:.95rem;line-height:1.6;
-}
-.rb-gen-spin small{font-size:.78rem}
-
-@media(max-width:980px){
- .rb-body{grid-template-columns:1fr}
- .rb-left{position:static}
- .rb-right{width:100%;border-left:none;border-top:1px solid var(--line)}
- .rb-products{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
- .rb-ham{top:12px;right:12px;padding:8px 14px;font-size:.8rem}
-}
-
-/* Room Builder — render, hover popup, tray images bar */
-.rb-render-bar{display:flex;align-items:center;gap:12px;margin-bottom:10px}
-.rb-cost{font-size:.78rem;color:var(--muted)}
-.rb-scene-img{width:100%;border-radius:10px;display:block}
-.rb-scene-item{cursor:default}
-/* bigger dragged-product thumbnails so the tray reads as an images bar */
-.rb-chip.prod{background:#4a4136;padding:2px 8px 2px 2px;gap:6px}
-.rb-chip.prod img{width:34px;height:34px;border-radius:5px}
-.rb-pop{position:fixed;z-index:100;width:246px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(30,20,10,.22);overflow:hidden;pointer-events:none;font-size:.8rem}
-.rb-pop img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#efe8dd}
-.rb-pop-b{padding:9px 11px}
-.rb-pop-b b{font-size:.85rem;line-height:1.25;display:block}
-.rb-pop-p{color:var(--ink);font-weight:600;margin-top:4px}
-.rb-pop-t{color:var(--muted);font-size:.72rem;text-transform:capitalize;margin-top:2px}
-
-/* 12-color multi-select swatches */
-.rb-swatch{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;position:relative}
-.rb-swatch:hover{transform:scale(1.08)}
-.rb-swatch.sel{box-shadow:0 0 0 2px var(--ink)}
-.rb-swatch.sel::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:.8rem;text-shadow:0 1px 2px rgba(0,0,0,.6)}
-.sw-dot{width:11px;height:11px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
+body:has(.rb-right:not(.collapsed)) .rb-ham { opacity: 0; pointer-events: none; }
+
+/* ---- rb-renders: responsive gallery grid for AI room cards ---- */
+.rb-renders {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+ gap: 12px;
+ min-height: 260px;
+}
+.rb-render-ph {
+ grid-column: 1/-1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 260px;
+ color: var(--muted);
+ text-align: center;
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: 1.05rem;
+ background: var(--bg-warm);
+ border: 1px solid var(--line);
+ border-radius: 3px;
+ padding: 28px;
+ line-height: 1.7;
+}
+
+/* ---- rb-gen: individual AI room card ---- */
+.rb-gen {
+ aspect-ratio: 4/3;
+ border-radius: 3px;
+ overflow: hidden;
+ border: 2px solid transparent;
+ background: var(--bg-warm);
+ position: relative;
+ cursor: pointer;
+ transition: border-color .18s, box-shadow .18s;
+}
+.rb-gen img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.rb-gen:hover { box-shadow: 0 8px 28px rgba(22,19,15,.14); }
+.rb-gen.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
+.rb-gen.loading { background: var(--bg-warm); display: flex; align-items: center; justify-content: center; }
+
+.rb-gen-spin {
+ text-align: center;
+ color: var(--muted);
+ font-family: var(--serif);
+ font-weight: 400;
+ font-size: .92rem;
+ line-height: 1.7;
+}
+.rb-gen-spin small { font-size: .76rem; }
+
+/* ---- render bar ---- */
+.rb-render-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
+.rb-cost { font-size: .72rem; color: var(--muted); letter-spacing: .03em; }
+.rb-scene-img { width: 100%; border-radius: 3px; display: block; }
+
+/* ---- product popup ---- */
+.rb-pop {
+ position: fixed;
+ z-index: 100;
+ width: 252px;
+ background: var(--card);
+ border: 1px solid var(--line);
+ border-radius: 3px;
+ box-shadow: 0 14px 40px rgba(22,19,15,.18);
+ overflow: hidden;
+ pointer-events: none;
+ font-size: .8rem;
+}
+.rb-pop img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-warm); }
+.rb-pop-b { padding: 10px 13px; }
+.rb-pop-b b { font-size: .84rem; line-height: 1.3; display: block; font-weight: 500; color: var(--ink); }
+.rb-pop-p { color: var(--ink); font-weight: 500; margin-top: 5px; }
+.rb-pop-t { color: var(--muted); font-size: .7rem; text-transform: capitalize; margin-top: 3px; letter-spacing: .04em; }
+
+/* ---- color swatches ---- */
+.rb-swatch {
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ border: 2px solid #fff;
+ box-shadow: 0 0 0 1px var(--line);
+ cursor: pointer;
+ padding: 0;
+ position: relative;
+ transition: transform var(--dur);
+}
+.rb-swatch:hover { transform: scale(1.1); }
+.rb-swatch.sel { box-shadow: 0 0 0 2px var(--ink); }
+.rb-swatch.sel::after {
+ content: '✓';
+ position: absolute;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ color: #fff;
+ font-size: .78rem;
+ text-shadow: 0 1px 3px rgba(0,0,0,.7);
+}
+.sw-dot {
+ width: 11px;
+ height: 11px;
+ border-radius: 50%;
+ display: inline-block;
+ box-shadow: 0 0 0 1px rgba(255,255,255,.35);
+}
+
+/* =========================================================
+ RESPONSIVE
+ ========================================================= */
+@media (max-width: 980px) {
+ .rb-body { grid-template-columns: 1fr; }
+ .rb-left { position: static; }
+ .rb-right { width: 100%; border-left: none; border-top: 1px solid var(--line); }
+ .rb-products { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
+ .rb-ham { top: 14px; right: 14px; padding: 9px 16px; font-size: .74rem; }
+}
+@media (max-width: 840px) {
+ .catalog { grid-template-columns: 1fr; }
+ .facets { position: static; flex-flow: row wrap; }
+ .facet-group { min-width: 140px; }
+}
+@media (max-width: 760px) {
+ .builder-grid { grid-template-columns: 1fr; }
+ .builder-controls { position: static; top: auto; }
+ :root { --pad: 16px; }
+}
+@media (max-width: 640px) {
+ .site-nav { gap: 18px; font-size: .76rem; }
+ .brand-word { display: none; }
+ .hero { padding: 72px 24px 64px; }
+ .hero h1 { font-size: 2.2rem; }
+}
diff --git a/server.js b/server.js
index 47048d0..9ea9597 100644
--- a/server.js
+++ b/server.js
@@ -74,12 +74,16 @@ app.get('/', async (_req, res, next) => {
<h3>${esc(g.title)}</h3><p>${esc(g.dek || '')}</p></a>`).join('');
const body = `
<section class="hero">
+ <span class="section-eyebrow">The Showroom</span>
<h1>${esc(SITE.name)}</h1>
<p class="tagline">${esc(SITE.tagline)}</p>
<a class="cta" href="/shop">Enter the showroom →</a>
</section>
- <section class="rooms"><h2>Shop by room</h2><div class="room-grid">${roomTiles}</div></section>
- ${featured.length ? `<section><h2>Editor’s picks</h2>${grid(featured)}</section>` : ''}
+ <section class="rooms">
+ <h2>Shop by room</h2>
+ <div class="room-grid">${roomTiles}</div>
+ </section>
+ ${featured.length ? `<section><h2>Editor's picks</h2>${grid(featured)}</section>` : ''}
${guideCards ? `<section class="guides-strip"><h2>Buying guides</h2><div class="guide-grid">${guideCards}</div></section>` : ''}
<section><h2>New in the showroom</h2>${grid(latest)}</section>`;
res.send(layout({ title: 'Curated Designer Furniture & Decor', description: SITE.tagline, canonical: SITE.url, body, activeNav: '/' }));
@@ -169,16 +173,16 @@ app.get('/go/:id', async (req, res, next) => {
app.get('/disclosure', (_req, res) => {
const body = `<article class="legal"><h1>Affiliate Disclosure</h1>
- <p>Interior Designer’s Showroom is a participant in affiliate advertising programs — including the Amazon Associates Program, Commission Junction (CJ), Rakuten Advertising, and ShareASale/Impact — designed to provide a means for sites to earn advertising fees.</p>
+ <p>Interior Designer's Showroom is a participant in affiliate advertising programs — including the Amazon Associates Program, Commission Junction (CJ), Rakuten Advertising, and ShareASale/Impact — designed to provide a means for sites to earn advertising fees.</p>
<p><strong>When you click a product link and make a purchase, we may earn a commission at no additional cost to you.</strong> This never changes the price you pay, and it never influences which products we feature — every piece is chosen for design merit first.</p>
<p>Prices and availability shown are pulled from our partners and are accurate as of the date and time displayed; they are subject to change. As an Amazon Associate we earn from qualifying purchases.</p></article>`;
- res.send(layout({ title: 'Affiliate Disclosure', description: 'How Interior Designer’s Showroom earns affiliate commissions.', canonical: `${SITE.url}/disclosure`, body }));
+ res.send(layout({ title: 'Affiliate Disclosure', description: "How Interior Designer's Showroom earns affiliate commissions.", canonical: `${SITE.url}/disclosure`, body }));
});
app.get('/privacy', (_req, res) => {
const body = `<article class="legal"><h1>Privacy</h1>
<p>We log anonymous click events (which product link was clicked, referring page, browser type) to understand what our readers find useful. We do not sell personal data. Affiliate partners may set their own cookies when you visit their sites after clicking through.</p></article>`;
- res.send(layout({ title: 'Privacy', description: 'Privacy practices for Interior Designer’s Showroom.', canonical: `${SITE.url}/privacy`, body }));
+ res.send(layout({ title: 'Privacy', description: "Privacy practices for Interior Designer's Showroom.", canonical: `${SITE.url}/privacy`, body }));
});
app.get('/robots.txt', (_req, res) => {
← 3448c99 auto-save: 2026-08-01T21:09:29 (7 files) — lib/scene.js pack
·
back to Interiordesignershowroom
·
Add idempotent nightly live-catalog refresh (SSH-tunnel upse c3798f4 →