← back to Celeb Gucci Mockup
index.html
408 lines
<!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>