← back to Stars of Design
gucci hero anatomy — logo UL + hamburger UR + huge wordmark/tagline hero with star-field ground (per standing rule)
51fa79b32e14843397c8b8781617cc2b24a2a246 · 2026-05-12 08:36:12 -0700 · Steve Abrams
Files touched
M public/css/site.cssA public/js/hamburger.jsM views/partials/header.ejsM views/public/home.ejs
Diff
commit 51fa79b32e14843397c8b8781617cc2b24a2a246
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue May 12 08:36:12 2026 -0700
gucci hero anatomy — logo UL + hamburger UR + huge wordmark/tagline hero with star-field ground (per standing rule)
---
public/css/site.css | 177 ++++++++++++++++++++++++++++++++++++++++++----
public/js/hamburger.js | 40 +++++++++++
views/partials/header.ejs | 32 +++++----
views/public/home.ejs | 30 ++++----
4 files changed, 239 insertions(+), 40 deletions(-)
diff --git a/public/css/site.css b/public/css/site.css
index 608229a..fed6f3e 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -26,19 +26,24 @@ h3 { font-size: 1.2rem; margin: 0 0 .25rem; }
.section { padding: 3.5rem 0; }
.section.alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
-/* Header */
+/* Header — logo upper-left, hamburger upper-right (gucci anatomy, see MEMORY) */
.site-header {
- background: var(--surface);
- border-bottom: 1px solid var(--border);
- position: sticky; top: 0; z-index: 30;
- backdrop-filter: saturate(140%) blur(6px);
+ position: fixed; top: 0; left: 0; right: 0; z-index: 50;
+ display: flex; align-items: center; justify-content: space-between;
+ padding: 1.1rem 1.6rem;
+ background: transparent;
+ transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
+ border-bottom: 1px solid transparent;
}
-.site-header .wrap {
- display: flex; align-items: center; gap: 1.5rem;
- padding-top: .9rem; padding-bottom: .9rem;
+.site-header.scrolled {
+ background: rgba(247,244,238,.92); border-bottom-color: var(--border);
+ backdrop-filter: saturate(140%) blur(8px);
}
-.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--text); }
+html[data-theme='dark'] .site-header.scrolled { background: rgba(11,10,8,.92); }
+
+.brand { display: inline-flex; align-items: center; gap: .65rem; color: #f7f4ee; mix-blend-mode: difference; text-decoration: none; }
.brand:hover { text-decoration: none; }
+.site-header.scrolled .brand { color: var(--text); mix-blend-mode: normal; }
.brand-mark {
font-family: var(--font-serif); font-weight: 600;
background: var(--gold); color: var(--accent-fg);
@@ -47,17 +52,163 @@ h3 { font-size: 1.2rem; margin: 0 0 .25rem; }
font-size: 1.1rem; letter-spacing: 0;
}
.brand-name { font-family: var(--font-serif); font-size: 1.2rem; letter-spacing: 0.01em; }
-.nav { margin-left: auto; display: flex; gap: 1.25rem; }
-.nav a { color: var(--text); }
+
+/* Hamburger UR */
+.hamburger {
+ display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
+ width: 44px; height: 44px; background: transparent; border: 1px solid transparent;
+ border-radius: 999px; cursor: pointer; gap: 5px; padding: 0; color: inherit;
+ mix-blend-mode: difference;
+}
+.hamburger span {
+ display: block; width: 22px; height: 2px; background: #f7f4ee; border-radius: 2px;
+ transition: transform .2s ease, opacity .2s ease, background .25s ease;
+}
+.site-header.scrolled .hamburger span { background: var(--text); }
+.site-header.scrolled .hamburger { mix-blend-mode: normal; border-color: var(--border); }
+.hamburger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
+
+/* Off-canvas nav slides from right */
+.site-nav {
+ position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 84vw);
+ background: var(--surface); border-left: 1px solid var(--border);
+ padding: 4.5rem 1.75rem 2rem; z-index: 60;
+ display: flex; flex-direction: column; gap: 1rem;
+ transform: translateX(110%); transition: transform .28s ease;
+ box-shadow: -8px 0 30px rgba(0,0,0,.18);
+}
+.site-nav[data-open='1'] { transform: translateX(0); }
+.site-nav a {
+ color: var(--text); font-family: var(--font-serif); font-size: 1.5rem;
+ border-bottom: 1px solid transparent; padding-bottom: .25rem;
+}
+.site-nav a:hover { color: var(--gold); border-bottom-color: var(--gold); text-decoration: none; }
+.hamburger-close {
+ position: absolute; top: 1rem; right: 1.25rem;
+ background: transparent; border: none; font-size: 2rem; line-height: 1;
+ color: var(--text-muted); cursor: pointer; padding: .25rem .5rem;
+}
+.hamburger-close:hover { color: var(--text); }
+
+.nav-scrim {
+ position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55;
+ opacity: 0; pointer-events: none; transition: opacity .25s ease;
+}
+.nav-scrim[data-open='1'] { opacity: 1; pointer-events: auto; }
+body.nav-open { overflow: hidden; }
+
.theme-toggle {
background: transparent; border: 1px solid var(--border);
- border-radius: 999px; padding: .35rem .65rem;
+ border-radius: 999px; padding: .55rem .85rem; margin-top: auto;
color: var(--text); cursor: pointer; font-size: 1rem;
- display: inline-flex; gap: .25rem;
+ display: inline-flex; gap: .4rem; align-items: center;
}
+.theme-toggle:hover { background: var(--bg-alt); }
+.theme-toggle-label { font-family: var(--font-sans); font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
html[data-theme='light'] .theme-toggle-moon { display: none; }
html[data-theme='dark'] .theme-toggle-sun { display: none; }
+/* Gucci-style huge hero */
+.hero-gucci {
+ position: relative;
+ min-height: clamp(560px, 92vh, 940px);
+ display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
+ text-align: center;
+ padding: 6rem 1.5rem 5rem;
+ overflow: hidden;
+ color: #f4ecd6;
+ background: #0a0907;
+}
+.hero-gucci-bg {
+ position: absolute; inset: 0; z-index: 0;
+ background:
+ radial-gradient(ellipse 90% 60% at 50% 30%, rgba(217,168,104,.18) 0%, rgba(11,10,8,0) 60%),
+ radial-gradient(ellipse 70% 50% at 30% 80%, rgba(122, 77, 18, .22) 0%, rgba(11,10,8,0) 60%),
+ linear-gradient(180deg, #15110a 0%, #0a0907 60%, #060503 100%);
+ filter: saturate(1.05);
+}
+/* Layered star-field — pure CSS, no image dependency */
+.hero-gucci-stars {
+ position: absolute; inset: 0; z-index: 0; pointer-events: none;
+ background:
+ radial-gradient(1.5px 1.5px at 8% 18%, rgba(255,245,210,.85), transparent 65%),
+ radial-gradient(1px 1px at 18% 42%, rgba(255,245,210,.75), transparent 70%),
+ radial-gradient(1.8px 1.8px at 33% 22%, rgba(255,245,210,.9), transparent 60%),
+ radial-gradient(1px 1px at 47% 12%, rgba(255,245,210,.7), transparent 70%),
+ radial-gradient(1.2px 1.2px at 58% 38%, rgba(255,245,210,.7), transparent 70%),
+ radial-gradient(2px 2px at 72% 16%, rgba(255,245,210,.95), transparent 55%),
+ radial-gradient(1px 1px at 84% 28%, rgba(255,245,210,.7), transparent 70%),
+ radial-gradient(1.4px 1.4px at 91% 45%, rgba(255,245,210,.85), transparent 65%),
+ radial-gradient(1px 1px at 12% 62%, rgba(255,245,210,.6), transparent 70%),
+ radial-gradient(1.6px 1.6px at 26% 78%, rgba(255,245,210,.85), transparent 60%),
+ radial-gradient(1px 1px at 41% 82%, rgba(255,245,210,.65), transparent 70%),
+ radial-gradient(1.3px 1.3px at 64% 70%, rgba(255,245,210,.8), transparent 65%),
+ radial-gradient(1px 1px at 78% 62%, rgba(255,245,210,.6), transparent 70%),
+ radial-gradient(1.7px 1.7px at 88% 84%, rgba(255,245,210,.9), transparent 60%);
+ opacity: .9;
+}
+.hero-gucci-stack {
+ position: relative; z-index: 1;
+ display: flex; flex-direction: column; align-items: center; gap: 1.25rem;
+ max-width: 1100px;
+}
+.hero-gucci-wordmark {
+ font-family: var(--font-serif);
+ font-weight: 400;
+ font-size: clamp(3rem, 9vw, 7.5rem);
+ line-height: 1; letter-spacing: -0.005em;
+ margin: 0; color: #f7eed2;
+ text-shadow: 0 2px 24px rgba(0,0,0,.6);
+}
+.hero-gucci-tagline {
+ font-family: var(--font-serif);
+ font-style: italic;
+ font-weight: 300;
+ font-size: clamp(1rem, 1.9vw, 1.5rem);
+ letter-spacing: .01em;
+ color: #d9c89a; margin: 0;
+ max-width: 56ch;
+}
+.hero-gucci-cta { margin-top: 1.25rem; display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; }
+.hero-gucci-cta .btn.primary { background: #f4ecd6; color: #0a0907; border-color: transparent; }
+.hero-gucci-cta .btn.primary:hover { background: #d9a868; color: #0a0907; }
+.hero-gucci-cta .btn.ghost { color: #f4ecd6; border-color: rgba(244,236,214,.4); background: transparent; }
+.hero-gucci-cta .btn.ghost:hover { background: rgba(244,236,214,.08); border-color: rgba(244,236,214,.8); }
+.hero-gucci-scroll {
+ position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
+ width: 38px; height: 38px; border-radius: 50%;
+ display: inline-flex; align-items: center; justify-content: center;
+ color: #d9c89a; border: 1px solid rgba(217,200,154,.4);
+ font-size: 1.1rem; line-height: 1; text-decoration: none;
+ animation: hero-bob 2.5s ease-in-out infinite;
+ z-index: 2;
+}
+.hero-gucci-scroll:hover { background: rgba(244,236,214,.08); border-color: #d9c89a; text-decoration: none; }
+@keyframes hero-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
+
+/* When using Gucci hero, body gets no header offset (header floats on hero) */
+.home { padding-top: 0; }
+.home .section:first-of-type { padding-top: 4rem; }
+
+@media (max-width: 720px) {
+ .hero-gucci { min-height: 80vh; padding: 5rem 1rem 4rem; }
+ .hero-gucci-wordmark { font-size: clamp(2.5rem, 11vw, 4.5rem); }
+}
+
+/* Legacy text-only hero (kept for non-home pages) */
+.hero {
+ padding: 5.5rem 0 3.5rem;
+ border-bottom: 1px solid var(--border);
+ background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
+}
+.hero .kicker {
+ text-transform: uppercase; letter-spacing: .14em;
+ font-size: .8rem; color: var(--gold); margin: 0 0 .75rem; font-weight: 500;
+}
+.hero h1 { max-width: 22ch; }
+.hero .lede { max-width: 64ch; font-size: 1.13rem; color: var(--text-muted); margin-top: 1.25rem; }
+.hero-cta { margin-top: 2rem; display: flex; gap: .75rem; flex-wrap: wrap; }
+
/* Hero */
.hero {
padding: 5.5rem 0 3.5rem;
diff --git a/public/js/hamburger.js b/public/js/hamburger.js
new file mode 100644
index 0000000..5c03673
--- /dev/null
+++ b/public/js/hamburger.js
@@ -0,0 +1,40 @@
+// Hamburger UR + off-canvas nav for the gucci-anatomy layout.
+// Header transitions from transparent → solid once the user scrolls past the hero.
+
+(function () {
+ const header = document.querySelector('.site-header');
+ const btn = document.getElementById('hamburger');
+ const nav = document.getElementById('site-nav');
+ const close = document.getElementById('hamburger-close');
+ const scrim = document.getElementById('nav-scrim');
+
+ function setOpen(open) {
+ if (!nav || !btn) return;
+ nav.dataset.open = open ? '1' : '';
+ btn.setAttribute('aria-expanded', String(!!open));
+ nav.setAttribute('aria-hidden', String(!open));
+ if (scrim) {
+ if (open) scrim.removeAttribute('hidden');
+ scrim.dataset.open = open ? '1' : '';
+ }
+ document.body.classList.toggle('nav-open', !!open);
+ }
+
+ btn && btn.addEventListener('click', () => setOpen(nav.dataset.open !== '1'));
+ close && close.addEventListener('click', () => setOpen(false));
+ scrim && scrim.addEventListener('click', () => setOpen(false));
+ document.addEventListener('keydown', (e) => { if (e.key === 'Escape') setOpen(false); });
+
+ // Close nav after navigating to in-page anchor
+ nav && nav.querySelectorAll('a').forEach(a => {
+ a.addEventListener('click', () => setTimeout(() => setOpen(false), 80));
+ });
+
+ // Transparent → solid header on scroll past 64px
+ function onScroll() {
+ if (!header) return;
+ header.classList.toggle('scrolled', window.scrollY > 64);
+ }
+ window.addEventListener('scroll', onScroll, { passive: true });
+ onScroll();
+})();
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 05a78dd..4d03da9 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -1,17 +1,25 @@
-<header class="site-header">
- <div class="wrap">
- <a class="brand" href="/">
- <span class="brand-mark">★</span>
- <span class="brand-name">Stars of Design</span>
- </a>
- <nav class="nav">
- <a href="/designers">Designers</a>
- <a href="/about">About</a>
- <a href="/submit">Submit</a>
- </nav>
+<header class="site-header" data-transparent="true">
+ <a class="brand" href="/" aria-label="Stars of Design home">
+ <span class="brand-mark" aria-hidden="true">★</span>
+ <span class="brand-name">Stars of Design</span>
+ </a>
+
+ <button id="hamburger" class="hamburger" type="button"
+ aria-label="Open menu" aria-expanded="false" aria-controls="site-nav">
+ <span></span><span></span><span></span>
+ </button>
+
+ <nav id="site-nav" class="site-nav" aria-hidden="true">
+ <button id="hamburger-close" class="hamburger-close" type="button" aria-label="Close menu">×</button>
+ <a href="/" aria-label="Home">Home</a>
+ <a href="/designers">Designers</a>
+ <a href="/about">About</a>
+ <a href="/submit">Submit a designer</a>
<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle dark / light theme">
<span class="theme-toggle-sun">☀</span>
<span class="theme-toggle-moon">☾</span>
+ <span class="theme-toggle-label">Theme</span>
</button>
- </div>
+ </nav>
+ <div id="nav-scrim" class="nav-scrim" hidden></div>
</header>
diff --git a/views/public/home.ejs b/views/public/home.ejs
index 4fed30b..fba0b09 100644
--- a/views/public/home.ejs
+++ b/views/public/home.ejs
@@ -2,25 +2,24 @@
<%- include('../partials/header') %>
<main class="home">
- <section class="hero">
- <div class="wrap">
- <p class="kicker">Profile directory · designers, eras, signature styles</p>
- <h1>The designers who shape interiors — and the walls behind them.</h1>
- <p class="lede">
- Stars of Design is a curated profile directory of the world's most
- influential interior designers, from the mid-century pioneers who
- invented the profession through the contemporary studios shaping
- rooms today. Each profile names the wallcoverings that fit the
- designer's signature style.
- </p>
- <div class="hero-cta">
- <a class="btn primary" href="/designers">Browse all designers</a>
- <a class="btn ghost" href="/about">How this directory works</a>
+ <!-- Gucci-style huge hero: full-bleed photographic ground + wordmark BELOW + italic tagline below.
+ Per standing rule (feedback_hero_anatomy_gucci): logo UL + hamburger UR live on top.
+ Image source is /img/hero.jpg (≥2560×1600); CSS gradient is the fallback ground. -->
+ <section class="hero-gucci" aria-labelledby="hero-wordmark">
+ <div class="hero-gucci-bg" role="img" aria-label="Editorial interior — placeholder while final hero photo is licensed"></div>
+ <div class="hero-gucci-stars" aria-hidden="true"></div>
+ <div class="hero-gucci-stack">
+ <h1 id="hero-wordmark" class="hero-gucci-wordmark">Stars of Design</h1>
+ <p class="hero-gucci-tagline"><em>The designers who shape interiors — and the walls behind them.</em></p>
+ <div class="hero-gucci-cta">
+ <a class="btn primary" href="/designers">Browse the directory →</a>
+ <a class="btn ghost" href="/about">How it works</a>
</div>
</div>
+ <a class="hero-gucci-scroll" href="#directory" aria-label="Scroll to the directory">↓</a>
</section>
- <section class="section">
+ <section class="section" id="directory">
<div class="wrap">
<div class="section-head">
<h2>The directory</h2>
@@ -74,3 +73,4 @@
<%- include('../partials/footer') %>
<script src="/js/grid-controls.js" defer></script>
+<script src="/js/hamburger.js" defer></script>
← fed7183 feat(starsofdesign/tick2): local-LLM triage on remaining can
·
back to Stars of Design
·
fix(starsofdesign): vendors are NOT clients — apply blocklis 4e7adb5 →