← back to Celeb Gucci Mockup
Gucci-style Celebrity Signatures mockup (Lincoln concept) — reference only
4db35659287e76e0604ef2278d4de9b591976997 · 2026-09-09 10:44:24 -0700 · Steve
Standalone visual mockup extracted from the CelebritySignatures repo after a
case-insensitive path collision. AI-generated imagery + invented autograph;
kept as design reference, NOT the real build (which uses real PD signatures).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U2uvgXWs4FjLd6eDBDNUxP
Files touched
A .gitignoreA gen-images.pyA img/editorial.jpgA img/hat.jpgA img/hero.jpgA img/shirt.jpgA img/socks.jpgA index.html
Diff
commit 4db35659287e76e0604ef2278d4de9b591976997
Author: Steve <steve@designerwallcoverings.com>
Date: Wed Sep 9 10:44:24 2026 -0700
Gucci-style Celebrity Signatures mockup (Lincoln concept) — reference only
Standalone visual mockup extracted from the CelebritySignatures repo after a
case-insensitive path collision. AI-generated imagery + invented autograph;
kept as design reference, NOT the real build (which uses real PD signatures).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U2uvgXWs4FjLd6eDBDNUxP
---
.gitignore | 5 +
gen-images.py | 88 ++++++++++++
img/editorial.jpg | Bin 0 -> 2077355 bytes
img/hat.jpg | Bin 0 -> 2346764 bytes
img/hero.jpg | Bin 0 -> 2184007 bytes
img/shirt.jpg | Bin 0 -> 2313658 bytes
img/socks.jpg | Bin 0 -> 2196864 bytes
index.html | 407 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
8 files changed, 500 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..88dc65a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+.env*
+*.log
+.DS_Store
+__pycache__/
diff --git a/gen-images.py b/gen-images.py
new file mode 100644
index 0000000..c2f8fae
--- /dev/null
+++ b/gen-images.py
@@ -0,0 +1,88 @@
+#!/usr/bin/env python3
+"""Generate the Celebrity Signatures editorial model shots via OpenAI gpt-image-1.
+Fails LOUD on any API error (no silent empty files). Saves into ./img/."""
+import os, sys, base64, json, urllib.request, urllib.error, pathlib, re
+
+KEY = os.environ.get("OPENAI_API_KEY", "")
+if not KEY:
+ env = pathlib.Path.home() / "Projects/secrets-manager/.env"
+ if env.exists():
+ m = re.search(r'^OPENAI_API_KEY=(.+)$', env.read_text(), re.M)
+ if m: KEY = m.group(1).strip().strip('"')
+if not KEY:
+ sys.exit("gen-images: no OPENAI_API_KEY in env or secrets-manager/.env")
+
+IMG = pathlib.Path(__file__).parent / "img"
+IMG.mkdir(exist_ok=True)
+
+# Original independent house — NO Gucci / GG monogram / horsebit / any real-brand marks.
+# House motif = an allover tonal HANDWRITTEN-SIGNATURE / autograph jacquard (the "Celebrity
+# Signatures" signature) + a small five-point STAR emblem. Loafers are plain & hardware-free.
+STYLE = ("high-fashion luxury editorial campaign photography, cinematic soft natural light, "
+ "muted warm film tones, subtle 35mm grain, elegant and minimal, medium-format film, "
+ "sophisticated. Original independent fashion house — absolutely NO brand logos, NO GG "
+ "monogram, NO interlocking-letter monogram, NO horsebit or metal shoe hardware, and "
+ "nothing referencing Gucci or any real brand.")
+
+# The featured "celebrity" (the example). Abraham Lincoln — historical public figure, freely
+# depictable. His OWN autograph doubles as the house 'signature' motif on the pieces.
+LINCOLN = ("Abraham Lincoln himself — the historical 16th President of the United States, "
+ "unmistakable and historically accurate: tall and lean, gaunt angular face, deep-set "
+ "eyes, dark hair, full chin-beard without moustache")
+MOTIF = ("an allover subtle tonal jacquard of his own looping 'A. Lincoln' handwritten signature "
+ "repeated as the house motif, tone-on-tone")
+
+JOBS = [
+ ("hero", "1536x1024",
+ f"{LINCOLN}. He is OLDER (early 50s), weathered and gaunt, with his ICONIC FULL DARK CHIN-BEARD, "
+ f"instantly recognizable as Abraham Lincoln — do not make him young or clean-shaven. Standing full "
+ f"body in a high-fashion editorial campaign, wearing his iconic tall black stovepipe top hat, a silk "
+ f"shirt patterned with {MOTIF}, tailored trousers, and ribbed dress socks with plain polished leather "
+ f"loafers (no metal hardware). Positioned toward the right third of the frame, with generous empty "
+ f"wall space on the left and above for a headline. {STYLE}"),
+ ("editorial", "1536x1024",
+ f"{LINCOLN}. Seated in a refined editorial pose in the full look — the tall-crown felt hat, a silk "
+ f"shirt with {MOTIF}, and ribbed socks with plain loafers — warm cinematic light, dignified. {STYLE}"),
+ ("hat", "1024x1536",
+ f"{LINCOLN}. Editorial portrait, wearing an elegant tall-crown felt hat with a simple grosgrain band "
+ f"(an original refined luxury product nodding to his iconic stovepipe). Solid felt, no logo. {STYLE}"),
+ ("shirt", "1024x1536",
+ f"{LINCOLN}. Three-quarter editorial portrait, wearing a luxurious silk button shirt patterned with "
+ f"{MOTIF}, poised and dignified. {STYLE}"),
+ ("socks", "1024x1536",
+ f"{LINCOLN}, seated. Editorial crop of his lower legs wearing ribbed dress socks with a single small "
+ f"embroidered five-point star at the cuff, worn with plain polished black leather loafers that have NO "
+ f"metal bit and NO buckle. {STYLE}"),
+]
+
+def gen(name, size, prompt):
+ body = json.dumps({
+ "model": "gpt-image-1", "prompt": prompt, "size": size,
+ "quality": "medium", "n": 1,
+ }).encode()
+ req = urllib.request.Request(
+ "https://api.openai.com/v1/images/generations", data=body,
+ headers={"Content-Type": "application/json", "Authorization": f"Bearer {KEY}"})
+ try:
+ with urllib.request.urlopen(req, timeout=180) as r:
+ data = json.load(r)
+ except urllib.error.HTTPError as e:
+ detail = e.read().decode(errors="replace")[:500]
+ sys.exit(f"gen-images: HTTP {e.code} generating '{name}': {detail}")
+ except Exception as e:
+ sys.exit(f"gen-images: error generating '{name}': {e}")
+
+ b64 = (data.get("data") or [{}])[0].get("b64_json")
+ if not b64:
+ sys.exit(f"gen-images: no image bytes for '{name}'. Raw: {json.dumps(data)[:400]}")
+ out = IMG / f"{name}.jpg"
+ out.write_bytes(base64.b64decode(b64))
+ print(f" ✓ {name:9s} {size:9s} -> {out.name} ({out.stat().st_size//1024} KB)")
+
+if __name__ == "__main__":
+ only = sys.argv[1:] or [j[0] for j in JOBS]
+ print(f"Generating {len(only)} image(s) with gpt-image-1 (medium)...")
+ for name, size, prompt in JOBS:
+ if name in only:
+ gen(name, size, prompt)
+ print("done.")
diff --git a/img/editorial.jpg b/img/editorial.jpg
new file mode 100644
index 0000000..86c3d92
Binary files /dev/null and b/img/editorial.jpg differ
diff --git a/img/hat.jpg b/img/hat.jpg
new file mode 100644
index 0000000..6e8e1b8
Binary files /dev/null and b/img/hat.jpg differ
diff --git a/img/hero.jpg b/img/hero.jpg
new file mode 100644
index 0000000..446550e
Binary files /dev/null and b/img/hero.jpg differ
diff --git a/img/shirt.jpg b/img/shirt.jpg
new file mode 100644
index 0000000..1cef913
Binary files /dev/null and b/img/shirt.jpg differ
diff --git a/img/socks.jpg b/img/socks.jpg
new file mode 100644
index 0000000..3e7cd32
Binary files /dev/null and b/img/socks.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..76d43c2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,407 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Celebrity Signatures — № 001, Abraham Lincoln</title>
+<meta name="description" content="Celebrity Signatures — a curated house where each icon's own autograph becomes the signature. № 001: Abraham Lincoln. The Hat. The Shirt. The Socks." />
+
+<!-- Bodoni Moda (Didone editorial serif) + Jost (clean grotesque for nav/body) -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet" />
+
+<style>
+ :root {
+ --ink: #111010;
+ --ivory: #f4f1ea;
+ --paper: #ffffff;
+ --line: rgba(17,16,16,0.14);
+ --gucci-green: #1e5631;
+ --gucci-red: #7c1c2a;
+ --nav-h: 74px;
+ }
+ * { margin: 0; padding: 0; box-sizing: border-box; }
+ html { scroll-behavior: smooth; }
+ body {
+ font-family: "Jost", system-ui, sans-serif;
+ color: var(--ink);
+ background: var(--ivory);
+ -webkit-font-smoothing: antialiased;
+ overflow-x: hidden;
+ }
+ img { display: block; max-width: 100%; }
+ a { color: inherit; text-decoration: none; }
+
+ /* ---------- The house green-red-green signature stripe ---------- */
+ .signature-stripe {
+ height: 4px;
+ width: 100%;
+ background: linear-gradient(
+ to right,
+ var(--gucci-green) 0 40%,
+ var(--gucci-red) 40% 60%,
+ var(--gucci-green) 60% 100%
+ );
+ }
+
+ /* ---------- NAV ---------- */
+ header.nav {
+ position: fixed; top: 0; left: 0; right: 0; z-index: 60;
+ height: var(--nav-h);
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
+ padding: 0 clamp(18px, 4vw, 48px);
+ color: var(--paper);
+ transition: background .4s ease, color .4s ease, border-color .4s ease;
+ border-bottom: 1px solid transparent;
+ }
+ /* solid state once scrolled past the hero */
+ header.nav.scrolled {
+ background: var(--ivory);
+ color: var(--ink);
+ border-bottom: 1px solid var(--line);
+ }
+ .nav-left { justify-self: start; }
+ .nav-right { justify-self: end; }
+
+ .wordmark {
+ justify-self: center;
+ font-family: "Bodoni Moda", serif;
+ font-weight: 500;
+ letter-spacing: .38em;
+ font-size: clamp(14px, 1.5vw, 19px);
+ text-transform: uppercase;
+ padding-left: .38em; /* optical: recenter the tracked text */
+ white-space: nowrap;
+ }
+ .nav-icon-btn {
+ background: none; border: 0; cursor: pointer; color: inherit;
+ font-family: "Jost", sans-serif; font-size: 12px; letter-spacing: .18em;
+ text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px;
+ padding: 8px 2px;
+ }
+ /* hamburger glyph */
+ .burger { display: inline-block; width: 26px; height: 12px; position: relative; }
+ .burger span {
+ position: absolute; left: 0; height: 1.5px; width: 100%; background: currentColor;
+ transition: transform .35s ease, opacity .25s ease, top .35s ease;
+ }
+ .burger span:nth-child(1) { top: 0; }
+ .burger span:nth-child(2) { top: 10px; }
+
+ /* ---------- FULLSCREEN MENU OVERLAY (CLOSED ON LOAD) ---------- */
+ .menu {
+ position: fixed; inset: 0; z-index: 80;
+ background: var(--ink); color: var(--ivory);
+ display: flex; flex-direction: column; justify-content: center;
+ padding: clamp(40px, 8vw, 120px);
+ /* closed by default */
+ opacity: 0; visibility: hidden; pointer-events: none;
+ transform: translateY(-12px);
+ transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
+ }
+ body.menu-open .menu {
+ opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
+ transition: opacity .5s ease, transform .5s ease, visibility 0s;
+ }
+ body.menu-open { overflow: hidden; } /* lock scroll while menu open */
+ .menu-close {
+ position: absolute; top: 26px; right: clamp(18px, 4vw, 48px);
+ background: none; border: 0; color: var(--ivory); cursor: pointer;
+ font-family: "Jost", sans-serif; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
+ }
+ .menu nav { display: flex; flex-direction: column; gap: clamp(8px, 1.4vw, 16px); }
+ .menu nav a {
+ font-family: "Bodoni Moda", serif; font-weight: 400;
+ font-size: clamp(34px, 6vw, 76px); line-height: 1.02; letter-spacing: .01em;
+ width: max-content; position: relative; opacity: .92;
+ transition: opacity .3s ease, letter-spacing .4s ease;
+ }
+ .menu nav a:hover { opacity: 1; letter-spacing: .04em; font-style: italic; }
+ .menu .menu-meta {
+ margin-top: clamp(28px, 5vw, 60px); display: flex; gap: 40px; flex-wrap: wrap;
+ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .6;
+ }
+
+ /* ---------- HERO ---------- */
+ .hero {
+ position: relative; min-height: 100svh; display: flex; align-items: flex-end;
+ color: var(--paper); overflow: hidden;
+ }
+ .hero-media { position: absolute; inset: 0; }
+ .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
+ .hero-media::after { /* editorial gradient for text legibility */
+ content: ""; position: absolute; inset: 0;
+ background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
+ }
+ .hero-inner {
+ position: relative; z-index: 2; width: 100%;
+ padding: clamp(28px, 6vw, 88px) clamp(18px, 4vw, 48px) clamp(40px, 6vw, 76px);
+ display: grid; gap: 22px; max-width: 1500px; margin: 0 auto;
+ }
+ .hero-eyebrow { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; opacity: .9; }
+ .hero h1 {
+ font-family: "Bodoni Moda", serif; font-weight: 400;
+ font-size: clamp(44px, 9vw, 132px); line-height: .96; letter-spacing: -.01em; max-width: 14ch;
+ }
+ .hero h1 em { font-style: italic; }
+ .hero-cta {
+ display: inline-flex; align-items: center; gap: 14px; width: max-content;
+ border: 1px solid rgba(255,255,255,.75); color: #fff;
+ padding: 15px 30px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
+ transition: background .35s ease, color .35s ease, border-color .35s ease;
+ }
+ .hero-cta:hover { background: #fff; color: var(--ink); border-color: #fff; }
+
+ /* ---------- THE SIGNATURE EDIT (3 products) ---------- */
+ .edit { padding: clamp(64px, 9vw, 140px) clamp(18px, 4vw, 48px); background: var(--ivory); }
+ .edit-head { text-align: center; margin-bottom: clamp(40px, 6vw, 80px); }
+ .edit-head .kick { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gucci-green); }
+ .edit-head h2 {
+ font-family: "Bodoni Moda", serif; font-weight: 400; font-style: italic;
+ font-size: clamp(30px, 5vw, 58px); margin-top: 12px;
+ }
+ .edit-head p { max-width: 44ch; margin: 18px auto 0; opacity: .68; font-size: 15px; line-height: 1.7; }
+
+ .trio {
+ display: grid; grid-template-columns: repeat(3, 1fr);
+ gap: clamp(14px, 2vw, 30px); max-width: 1500px; margin: 0 auto;
+ }
+ .piece { display: block; }
+ .piece-media {
+ position: relative; aspect-ratio: 3/4; overflow: hidden; background: #e7e2d8;
+ }
+ .piece-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
+ .piece:hover .piece-media img { transform: scale(1.045); }
+ .piece-media .no { /* item number tab */
+ position: absolute; top: 16px; left: 16px; z-index: 2;
+ font-size: 11px; letter-spacing: .2em; color: #fff; mix-blend-mode: difference;
+ }
+ .piece-body { padding: 20px 4px 0; display: flex; justify-content: space-between; align-items: baseline; }
+ .piece-body h3 { font-family: "Bodoni Moda", serif; font-weight: 500; font-size: clamp(20px, 2.4vw, 27px); }
+ .piece-body .price { font-size: 14px; letter-spacing: .04em; opacity: .8; }
+ .piece-body .cat { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; margin-top: 4px; }
+
+ /* ---------- EDITORIAL STRIP ---------- */
+ .worn-as-one {
+ display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
+ background: var(--ink); color: var(--ivory);
+ }
+ .worn-as-one .img { min-height: 60vh; }
+ .worn-as-one .img img { width: 100%; height: 100%; object-fit: cover; }
+ .worn-as-one .txt {
+ padding: clamp(40px, 7vw, 110px); display: flex; flex-direction: column; justify-content: center; gap: 22px;
+ }
+ .worn-as-one .txt .kick { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .55; }
+ .worn-as-one .txt h2 {
+ font-family: "Bodoni Moda", serif; font-weight: 400; font-size: clamp(30px, 4.5vw, 62px); line-height: 1.02;
+ }
+ .worn-as-one .txt h2 em { font-style: italic; }
+ .worn-as-one .txt p { max-width: 46ch; opacity: .72; line-height: 1.8; font-size: 15px; }
+ .worn-as-one .txt a.link {
+ width: max-content; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
+ border-bottom: 1px solid rgba(244,241,234,.5); padding-bottom: 6px;
+ }
+
+ /* ---------- FOOTER ---------- */
+ footer {
+ background: var(--ivory); padding: clamp(50px, 7vw, 90px) clamp(18px, 4vw, 48px) 40px;
+ border-top: 1px solid var(--line);
+ }
+ .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; max-width: 1500px; margin: 0 auto 50px; }
+ .foot-grid .brand { font-family: "Bodoni Moda", serif; letter-spacing: .3em; text-transform: uppercase; font-size: 18px; }
+ .foot-grid p { opacity: .6; font-size: 14px; line-height: 1.7; margin-top: 14px; max-width: 34ch; }
+ .foot-col h4 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; margin-bottom: 16px; }
+ .foot-col a { display: block; font-size: 14px; opacity: .8; margin-bottom: 10px; }
+ .foot-col a:hover { opacity: 1; }
+ .foot-base { max-width: 1500px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12px; letter-spacing: .1em; opacity: .5; }
+
+ /* ---------- RESPONSIVE ---------- */
+ @media (max-width: 860px) {
+ .trio { grid-template-columns: 1fr; gap: 40px; }
+ .worn-as-one { grid-template-columns: 1fr; }
+ .foot-grid { grid-template-columns: 1fr; gap: 30px; }
+ .nav-right .label { display: none; } /* icon-only burger on mobile */
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ * { transition: none !important; animation: none !important; scroll-behavior: auto; }
+ }
+</style>
+</head>
+<body>
+
+ <!-- ============ NAV (wordmark centered · hamburger upper-right) ============ -->
+ <header class="nav" id="nav">
+ <div class="nav-left">
+ <button class="nav-icon-btn" type="button" onclick="location.href='#edit'">
+ <span class="label">Shop</span>
+ </button>
+ </div>
+
+ <a href="#top" class="wordmark">Celebrity Signatures</a>
+
+ <div class="nav-right">
+ <button class="nav-icon-btn" id="menuOpen" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="menu">
+ <span class="label">Menu</span>
+ <span class="burger" aria-hidden="true"><span></span><span></span></span>
+ </button>
+ </div>
+ </header>
+
+ <!-- ============ FULLSCREEN MENU (CLOSED ON LOAD) ============ -->
+ <div class="menu" id="menu" role="dialog" aria-modal="true" aria-label="Main menu">
+ <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">Close ✕</button>
+ <nav>
+ <a href="#edit">The Hat</a>
+ <a href="#edit">The Shirt</a>
+ <a href="#edit">The Socks</a>
+ <a href="#worn">Worn As One</a>
+ <a href="#top">The House</a>
+ </nav>
+ <div class="menu-meta">
+ <span>Client Services</span>
+ <span>Book an Appointment</span>
+ <span>Stores</span>
+ </div>
+ </div>
+
+ <span id="top"></span>
+
+ <!-- ============ HERO ============ -->
+ <section class="hero">
+ <div class="hero-media">
+ <!-- generated: man + woman wearing the hat, shirt & socks -->
+ <img src="img/hero.jpg" alt="A man and a woman in the Celebrity Signatures hat, shirt and socks" />
+ </div>
+ <div class="hero-inner">
+ <span class="hero-eyebrow">Celebrity № 001 — Abraham Lincoln</span>
+ <h1>Three pieces. <em>One</em> signature.</h1>
+ <a href="#edit" class="hero-cta">Shop the Collection <span aria-hidden="true">→</span></a>
+ </div>
+ </section>
+ <div class="signature-stripe"></div>
+
+ <!-- ============ THE SIGNATURE EDIT — 3 PRODUCTS ============ -->
+ <section class="edit" id="edit">
+ <div class="edit-head">
+ <span class="kick">The Signature Edit</span>
+ <h2>The Hat. The Shirt. The Socks.</h2>
+ <p>Three pieces, each carrying Abraham Lincoln's own autograph woven as the house signature. The first drop in the Celebrity Signatures series.</p>
+ </div>
+
+ <div class="trio">
+ <a class="piece" href="#">
+ <div class="piece-media">
+ <span class="no">N° 01</span>
+ <img src="img/hat.jpg" alt="The Signature Hat" />
+ </div>
+ <div class="piece-body">
+ <div>
+ <h3>The Hat</h3>
+ <span class="cat">Signature Headwear</span>
+ </div>
+ <span class="price">$420</span>
+ </div>
+ </a>
+
+ <a class="piece" href="#">
+ <div class="piece-media">
+ <span class="no">N° 02</span>
+ <img src="img/shirt.jpg" alt="The Signature Shirt" />
+ </div>
+ <div class="piece-body">
+ <div>
+ <h3>The Shirt</h3>
+ <span class="cat">Signature Ready-to-Wear</span>
+ </div>
+ <span class="price">$890</span>
+ </div>
+ </a>
+
+ <a class="piece" href="#">
+ <div class="piece-media">
+ <span class="no">N° 03</span>
+ <img src="img/socks.jpg" alt="The Signature Socks" />
+ </div>
+ <div class="piece-body">
+ <div>
+ <h3>The Socks</h3>
+ <span class="cat">Signature Legwear</span>
+ </div>
+ <span class="price">$180</span>
+ </div>
+ </a>
+ </div>
+ </section>
+
+ <!-- ============ WORN AS ONE ============ -->
+ <section class="worn-as-one" id="worn">
+ <div class="img">
+ <img src="img/editorial.jpg" alt="The man and woman styled together in the full Celebrity Signatures look" />
+ </div>
+ <div class="txt">
+ <span class="kick">The Campaign · Abraham Lincoln</span>
+ <h2>Signed, <em>Mr. Lincoln.</em></h2>
+ <p>Our first celebrity, photographed in the full look — the stovepipe, the signature silk, the star socks. His actual autograph runs through every thread. One icon, one signature, worn as one.</p>
+ <a href="#edit" class="link">Discover the Look →</a>
+ </div>
+ </section>
+
+ <!-- ============ FOOTER ============ -->
+ <footer>
+ <div class="foot-grid">
+ <div>
+ <div class="brand">Celebrity Signatures</div>
+ <p>A curated house where each icon's own autograph becomes the signature. Collected, and worn as one.</p>
+ </div>
+ <div class="foot-col">
+ <h4>The Collection</h4>
+ <a href="#edit">The Hat</a>
+ <a href="#edit">The Shirt</a>
+ <a href="#edit">The Socks</a>
+ <a href="#worn">Worn As One</a>
+ </div>
+ <div class="foot-col">
+ <h4>House</h4>
+ <a href="#">Client Services</a>
+ <a href="#">Book an Appointment</a>
+ <a href="#">Stores</a>
+ <a href="#">Contact</a>
+ </div>
+ </div>
+ <div class="foot-base">
+ <span>© <span id="yr"></span> Celebrity Signatures</span>
+ <span>Privacy · Terms · Accessibility</span>
+ </div>
+ </footer>
+
+ <script>
+ // ---- Menu: CLOSED on load; open/close the fullscreen overlay ----
+ const body = document.body;
+ const openBtn = document.getElementById('menuOpen');
+ const closeBtn = document.getElementById('menuClose');
+ const menu = document.getElementById('menu');
+
+ function openMenu() { body.classList.add('menu-open'); openBtn.setAttribute('aria-expanded','true'); menu.querySelector('a')?.focus(); }
+ function closeMenu() { body.classList.remove('menu-open'); openBtn.setAttribute('aria-expanded','false'); openBtn.focus(); }
+
+ openBtn.addEventListener('click', openMenu);
+ closeBtn.addEventListener('click', closeMenu);
+ // close on Escape, and when a menu link is chosen
+ document.addEventListener('keydown', e => { if (e.key === 'Escape' && body.classList.contains('menu-open')) closeMenu(); });
+ menu.querySelectorAll('nav a').forEach(a => a.addEventListener('click', closeMenu));
+
+ // ---- Nav goes solid once the hero is scrolled past ----
+ const nav = document.getElementById('nav');
+ const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > window.innerHeight * 0.72);
+ window.addEventListener('scroll', onScroll, { passive: true });
+ onScroll();
+
+ // ---- current year ----
+ document.getElementById('yr').textContent = new Date().getFullYear();
+ </script>
+</body>
+</html>
(oldest)
·
back to Celeb Gucci Mockup
·
(newest)