Elegant front page: Photoshop Snell-Roundhand script logo (topbar + hero, mix-blend multiply), full-bleed hero over faint museum-collage backdrop with 3 CTAs, corner hamburger opening Amazon-style left drawer holding ALL browse controls (tabs/categories/use/sort/density/views + links), The Collection section head, /assets route (TK-10181)

aeefcc57b207cd94e559ae9652d921b9e5112a47 · 2026-08-03 13:11:03 -0700 · Steve Abrams
Files touched

A public/assets/logo-celebsig.png
M public/index.html
M server.js
Diff

commit aeefcc57b207cd94e559ae9652d921b9e5112a47
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 3 13:11:03 2026 -0700

    Elegant front page: Photoshop Snell-Roundhand script logo (topbar + hero, mix-blend multiply), full-bleed hero over faint museum-collage backdrop with 3 CTAs, corner hamburger opening Amazon-style left drawer holding ALL browse controls (tabs/categories/use/sort/density/views + links), The Collection section head, /assets route (TK-10181)
---
 public/assets/logo-celebsig.png | Bin 0 -> 16294 bytes
 public/index.html               | 112 +++++++++++++++++++++++++++++++++++-----
 server.js                       |   1 +
 3 files changed, 99 insertions(+), 14 deletions(-)

diff --git a/public/assets/logo-celebsig.png b/public/assets/logo-celebsig.png
new file mode 100644
index 0000000..300cff5
Binary files /dev/null and b/public/assets/logo-celebsig.png differ
diff --git a/public/index.html b/public/index.html
index d598806..b007a5e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -131,6 +131,53 @@
     body[data-layout] .meta .name { opacity:1 !important; transform:none !important; }
   }
   .layout-chips .chip { font-size:12px; padding:4px 11px; }
+  /* ── elegant front page: topbar logo · hero · left drawer ── */
+  .masthead .logo img { height:30px; display:block; mix-blend-mode:multiply; }
+  .topsearch { flex:1; max-width:440px; margin:0 8px; }
+  .topsearch input { width:100%; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font:inherit; background:#faf9f6; }
+  .burger { width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; }
+  .burger span { display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; }
+  .burger:hover { border-color:var(--ink); }
+  .hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:#fbfaf7; }
+  .hero-bg { position:absolute; inset:-2%; background:url('/output/collage-masters-of-the-met.png') center 30%/cover no-repeat; opacity:.16; filter:saturate(.7); }
+  .hero-inner { position:relative; max-width:860px; margin:0 auto; padding:64px 24px 58px; text-align:center; }
+  .hero-logo { max-width:min(560px,86%); mix-blend-mode:multiply; }
+  .hero-tag { font:italic 400 18px/1.6 'Playfair Display', Georgia, serif; color:#4a463f; max-width:560px; margin:14px auto 22px; }
+  .hero-ctas { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
+  .hbtn { padding:11px 26px; border-radius:999px; background:var(--ink); color:#fff; text-decoration:none; font-size:14.5px; border:1px solid var(--ink); }
+  .hbtn.ghost { background:rgba(255,255,255,.85); color:var(--ink); }
+  .hbtn:hover { background:#000; color:#fff; }
+  /* drawer */
+  .dback { position:fixed; inset:0; background:rgba(20,18,14,.45); z-index:60; }
+  .dback[hidden] { display:none; }
+  .drawer { position:fixed; top:0; left:0; bottom:0; width:min(320px,88vw); background:#fff; z-index:61; box-shadow:8px 0 40px rgba(0,0,0,.18);
+    transform:translateX(-103%); transition:transform .22s ease; overflow-y:auto; padding:16px 18px 40px; }
+  .drawer.open { transform:none; }
+  .d-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:12px; }
+  .d-head b { font:600 18px 'Playfair Display', Georgia, serif; }
+  .d-x { border:none; background:none; font-size:26px; cursor:pointer; color:var(--muted); line-height:1; }
+  .d-sec { margin-bottom:14px; }
+  .d-lab { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:0 0 8px; }
+  .d-links { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
+  .d-links a { color:var(--ink); text-decoration:none; font-size:14px; padding:6px 2px; border-bottom:1px dashed var(--line); }
+  .d-links a:hover { color:var(--green, #1d7a36); }
+  .drawer .tabs { margin-top:0; }
+  .drawer .controls { flex-direction:column; align-items:stretch; gap:14px; margin-top:8px; }
+  .drawer .controls > div { width:100%; }
+  .drawer .controls select { width:100%; }
+  .drawer .chips { gap:6px; }
+  .drawer .density { display:flex !important; }
+  .section-head { display:flex; align-items:center; gap:14px; margin:6px 0 16px; }
+  .section-head h2 { margin:0; font:600 22px 'Playfair Display', Georgia, serif; }
+  .section-head h2 span { color:var(--muted); font:400 13px -apple-system,sans-serif; }
+  .filters-hint { margin-left:auto; border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 16px; font:inherit; font-size:13px; color:var(--muted); cursor:pointer; }
+  .filters-hint:hover { border-color:var(--ink); color:var(--ink); }
+  @media (max-width:700px){
+    .masthead .logo img { height:22px; }
+    .topsearch { order:5; max-width:none; margin:0; width:100%; }
+    .hero-inner { padding:34px 16px 32px; }
+    .hero-tag { font-size:15px; }
+  }
   /* ── mobile ── */
   @media (max-width:700px) {
     .masthead { height:auto; flex-wrap:wrap; padding:10px 14px; gap:8px 14px; }
@@ -185,23 +232,47 @@
 </head>
 <body>
 <div class="masthead">
-  <a class="wordmark" href="/">Celebrity Signatures</a>
+  <a class="logo" href="/"><img src="/assets/logo-celebsig.png" alt="Celebrity Signatures"></a>
+  <div class="search topsearch"><input type="search" id="q" placeholder="Search any name — Monet, Lincoln, Kahlo…" aria-label="Search signatures by name"></div>
   <nav class="gnav">
-    <a href="/" class="on">Browse signatures</a>
-    <a href="/murals">Order a mural</a>
-    <a href="/game">Play “Whose Hand?”</a>
-    <a href="/upload">Upload your signature</a>
+    <a href="/murals">Murals</a>
+    <a href="/game">Games</a>
+    <a href="/upload">Upload yours</a>
   </nav>
+  <button class="burger" id="burger" aria-label="Open menu" aria-expanded="false"><span></span><span></span><span></span></button>
 </div>
-<header>
-  <h1>Authentic signatures of history's icons <span id="count"></span></h1>
-  <p class="valueprop">1,300+ verified signatures — artists, presidents, founders — each traced to a real archival source. <a href="/murals">Order any collection as a made-to-order wall mural →</a></p>
-  <div class="tabs">
-    <span class="tab on" data-v="grid">Grid</span>
-    <span class="tab" data-v="collages">Collages</span>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-bg" aria-hidden="true"></div>
+  <div class="hero-inner">
+    <img class="hero-logo" src="/assets/logo-celebsig.png" alt="Celebrity Signatures">
+    <p class="hero-tag">Seven thousand authentic signatures — artists, authors, presidents, founders — every one traced to a real archival source.</p>
+    <div class="hero-ctas">
+      <a class="hbtn" href="#collection">Browse the collection</a>
+      <a class="hbtn ghost" href="/murals">Order a mural</a>
+      <a class="hbtn ghost" href="/game">Play the games</a>
+    </div>
+  </div>
+</section>
+
+<!-- LEFT DRAWER (all browse controls live here) -->
+<div class="dback" id="dback" hidden></div>
+<aside class="drawer" id="drawer" aria-label="Browse options">
+  <div class="d-head"><b>Browse</b><button class="d-x" id="drawerX" aria-label="Close menu">×</button></div>
+  <div class="d-sec">
+    <div class="d-lab">Explore</div>
+    <div class="tabs">
+      <span class="tab on" data-v="grid">Grid</span>
+      <span class="tab" data-v="collages">Collages</span>
+    </div>
+    <nav class="d-links">
+      <a href="/murals">Signature murals</a>
+      <a href="/game">The Signature Games</a>
+      <a href="/upload">Upload your signature</a>
+    </nav>
   </div>
   <div class="controls" id="controls">
-    <div class="search"><input type="search" id="q" placeholder="Search any name — Monet, Lincoln, Kahlo…" aria-label="Search signatures by name"></div>
     <div><label>Category</label></div>
     <div class="chips" id="catChips"></div>
     <div><label>Use</label>
@@ -247,8 +318,13 @@
     <div><label>View</label></div>
     <div class="chips layout-chips" id="layoutChips"></div>
   </div>
-</header>
-<main>
+</aside>
+
+<main id="collection">
+  <div class="section-head">
+    <h2>The Collection <span id="count"></span></h2>
+    <button class="filters-hint" id="filtersHint">☰ Categories, sort &amp; views</button>
+  </div>
   <div id="gridView"><div class="grid" id="grid"></div><div class="empty" id="empty" hidden>No signatures match these filters.</div></div>
   <div id="collagesView" class="collages" hidden></div>
 </main>
@@ -333,6 +409,14 @@ function buildChips() {
     document.querySelectorAll('.chip').forEach(x=>x.classList.toggle('on', x.dataset.c===c)); render(); };
 }
 $('#density').oninput = (e) => { prefs.density=+e.target.value; save(); render(); };
+// ── left drawer (Amazon-style browse panel) ──
+function openDrawer(){ $('#drawer').classList.add('open'); $('#dback').hidden=false; $('#burger').setAttribute('aria-expanded','true'); }
+function closeDrawer(){ $('#drawer').classList.remove('open'); $('#dback').hidden=true; $('#burger').setAttribute('aria-expanded','false'); }
+$('#burger').onclick = openDrawer;
+$('#filtersHint').onclick = openDrawer;
+$('#drawerX').onclick = closeDrawer;
+$('#dback').onclick = closeDrawer;
+document.addEventListener('keydown', e => { if(e.key==='Escape') closeDrawer(); });
 // ── 6 switchable shopping layouts (signature-only; info on hover) ──
 const LAYOUTS = [
   ['gallery','Gallery'], ['float','Float'], ['plaque','Plaque'],
diff --git a/server.js b/server.js
index 7efc7d3..5e62212 100644
--- a/server.js
+++ b/server.js
@@ -295,6 +295,7 @@ createServer(async (req, res) => {
     if (path === '/murals') path = '/public/murals.html';
     if (path === '/upload') path = '/public/upload-signature.html';
     if (path === '/game') path = '/public/game.html';
+    if (path.startsWith('/assets/')) path = '/public' + path;
     if (path === '/account.js') path = '/public/account.js';
     if (path === '/api/murals-catalog') path = '/data/murals-catalog.json';
     if (path === '/api/signature-evolution') path = '/data/signature-evolution.json';
← 0faa6c2 mobile pass: responsive masthead (wrap + scrollable nav), 2- · back to CelebritySignatures · celebsignatures.com go-live runbook (nginx vhost IP-bound pe 934e111 →