← back to Wallco Ai
public/brand/gucci.html
325 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Gucci — Brand Reference for Fliepaper Bugs</title>
<style>
:root {
--emerald-marmont: #0F4F38;
--papyrus-archive: #EDE0C4;
--midnight-flora: #1A1F3C;
--antique-horsebit:#B8914A;
--plum-dionysus: #3D1F52;
--oxblood-flora: #6B1F1F;
--ink: #0c0c0c;
--paper: #faf7f1;
--hair: rgba(0,0,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:"Inter",-apple-system,sans-serif}
body{min-height:100vh;padding:24px 32px 80px}
/* Hero anatomy per DW standing rule — logo UL, ≡ MENU UR, wordmark below */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 0 28px}
.logo{font-family:"Times New Roman",serif;font-weight:700;font-size:22px;letter-spacing:.04em}
.menu{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;user-select:none}
.menu .bars{display:inline-block;width:24px;height:10px;position:relative}
.menu .bars::before,.menu .bars::after,.menu .bars span{content:"";display:block;height:1px;background:currentColor;position:absolute;left:0;right:0}
.menu .bars::before{top:0}.menu .bars span{top:4px}.menu .bars::after{top:9px}
/* Wordmark stack */
.wordmark{text-align:center;padding:24px 0 56px;border-bottom:1px solid var(--hair)}
.wordmark h1{font-family:"Times New Roman",serif;font-weight:400;font-size:clamp(40px,7vw,84px);letter-spacing:.02em;line-height:1}
.wordmark .tag{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:#555;margin-top:14px}
/* Section grid */
section{padding:56px 0;border-bottom:1px solid var(--hair)}
section:last-of-type{border-bottom:none}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}
.sec-title{font-family:"Times New Roman",serif;font-size:24px;font-weight:400}
.sec-sub{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#777}
/* The brand reference panel */
.ref-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch}
@media (max-width:880px){.ref-wrap{grid-template-columns:1fr}}
.ref-canvas{position:relative;background:var(--paper);border:1px solid var(--hair);aspect-ratio:4/5;overflow:hidden}
.ref-canvas .upload-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:11px;letter-spacing:.25em;color:#999;text-transform:uppercase;pointer-events:none}
.ref-canvas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ref-canvas svg{position:absolute;inset:0;width:100%;height:100%}
.ref-canvas[data-has-image="true"] .gucci-svg,
.ref-canvas[data-has-image="true"] .upload-hint{display:none}
/* Drop-in admin button */
.admin-bar{position:absolute;left:12px;top:12px;display:flex;gap:8px;z-index:3}
.admin-bar button{appearance:none;border:1px solid var(--ink);background:rgba(255,255,255,.92);color:var(--ink);padding:6px 12px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;cursor:pointer}
.admin-bar button:hover{background:var(--ink);color:#fff}
/* The 6 colorway swatches */
.palette-panel{display:flex;flex-direction:column;gap:14px}
.swatch{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;padding:14px 16px;border:1px solid var(--hair);background:#fff}
.chip{aspect-ratio:1/1;width:64px;border:1px solid rgba(0,0,0,.08)}
.swatch .name{font-family:"Times New Roman",serif;font-size:18px;line-height:1.2;margin-bottom:4px}
.swatch .ref{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#666}
.swatch .role{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:#999;font-weight:600}
.swatch .hex{font-family:"SF Mono",ui-monospace,monospace;font-size:11px;color:#555;text-align:right}
/* Pattern strip — our 6 bug patterns to coordinate */
.pattern-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media (max-width:760px){.pattern-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.pattern-strip{grid-template-columns:repeat(2,1fr)}}
.pat-card{aspect-ratio:1/1.15;background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%);position:relative;overflow:hidden;border:1px solid var(--hair)}
.pat-card .pat-name{position:absolute;left:10px;right:10px;bottom:10px;color:#fff;font-family:"Times New Roman",serif;font-size:14px;line-height:1.1;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pat-card .pat-bug{position:absolute;left:10px;top:10px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.pat-card .pat-pending{position:absolute;right:10px;top:10px;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.35);padding:2px 8px;border-radius:999px}
/* Color coordination grid — shows every pattern × every colorway */
.coord-grid{display:grid;grid-template-columns:120px repeat(6,1fr);gap:6px}
.coord-grid .ch{height:48px;display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.coord-grid .rh{font-family:"Times New Roman",serif;font-size:13px;line-height:1.1;color:#222;display:flex;align-items:center;padding-right:8px}
.coord-grid .col-head{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#666;display:flex;align-items:center;justify-content:center;height:32px;text-align:center}
.coord-grid .corner{height:32px}
/* Theme toggle (per DW standing rule) */
.theme-toggle{position:fixed;right:24px;bottom:24px;width:42px;height:42px;border-radius:50%;border:1px solid var(--hair);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:50}
body[data-theme="dark"]{--paper:#0c0c0c;--ink:#faf7f1;--hair:rgba(255,255,255,.12)}
body[data-theme="dark"] .swatch{background:#181818}
body[data-theme="dark"] .admin-bar button{background:rgba(0,0,0,.6);color:#fff;border-color:#fff}
/* Source / footer */
footer{padding:40px 0 0;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#888;text-align:center}
footer a{color:#888;text-decoration:underline}
</style>
</head>
<body>
<!-- Per universal corner-nav rule 2026-05-13: UR 4-icon (Bag/Person/Search/Menu) on every DW-family site -->
<script>
window.CornerNavConfig = {
bagUrl: 'https://designerwallcoverings.com/collections/fliepaper-bugs',
accountUrl: 'https://designerwallcoverings.com/account',
infoEmail: 'info@fliepaper.com',
menuLinks: [
{name:'Brand reference · Gucci', url:'/brand/gucci.html'},
{name:'Fliepaper Bugs collection', url:'/collections/fliepaper-bugs'},
{name:'wallco.ai home', url:'/'},
{name:'Designer Wallcoverings', url:'https://designerwallcoverings.com'}
]
};
</script>
<script src="/corner-nav.js" defer></script>
<div class="topbar">
<div class="logo">fliepaper</div>
<!-- corner-nav widget replaces the in-page ≡ MENU button -->
</div>
<div class="wordmark">
<h1>Brand Reference · Gucci</h1>
<div class="tag">A house style guide for the fliepaper bugs collection</div>
</div>
<section>
<div class="sec-head">
<div class="sec-title">House anchor</div>
<div class="sec-sub">Coordinated palette</div>
</div>
<div class="ref-wrap">
<div class="ref-canvas" id="refCanvas" data-has-image="false">
<div class="admin-bar">
<button onclick="document.getElementById('upload').click()">Replace reference</button>
</div>
<input type="file" id="upload" accept="image/*" style="display:none" onchange="onUpload(event)">
<img id="refImg" alt="Gucci brand reference">
<!-- Default SVG: Gucci-house signature — web stripe + interlocked GG monogram + horsebit accent -->
<svg class="gucci-svg" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
<defs>
<pattern id="gg" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
<rect width="60" height="60" fill="#EDE0C4"/>
<g fill="#0F4F38" font-family="Times New Roman, serif" font-weight="700">
<text x="6" y="34" font-size="32" letter-spacing="-3">GG</text>
<text x="38" y="34" font-size="32" letter-spacing="-3" transform="rotate(180 50 28)">GG</text>
</g>
</pattern>
</defs>
<!-- Cream ground -->
<rect x="0" y="0" width="400" height="500" fill="#EDE0C4"/>
<!-- GG monogram field -->
<rect x="0" y="0" width="400" height="500" fill="url(#gg)" opacity=".55"/>
<!-- Web stripe (signature Gucci green-red-green) -->
<g>
<rect x="60" y="0" width="36" height="500" fill="#0F4F38"/>
<rect x="96" y="0" width="36" height="500" fill="#6B1F1F"/>
<rect x="132" y="0" width="36" height="500" fill="#0F4F38"/>
</g>
<!-- Horsebit hardware bar -->
<g transform="translate(220,240)">
<rect x="0" y="0" width="140" height="22" fill="#B8914A" rx="2"/>
<rect x="6" y="4" width="128" height="14" fill="none" stroke="#7a5a26" stroke-width="1"/>
<circle cx="20" cy="11" r="6" fill="none" stroke="#7a5a26" stroke-width="1.5"/>
<circle cx="120" cy="11" r="6" fill="none" stroke="#7a5a26" stroke-width="1.5"/>
<rect x="26" y="9" width="88" height="4" fill="#7a5a26"/>
</g>
<!-- Decorative deep plum corner block (Dionysus) -->
<rect x="280" y="380" width="100" height="100" fill="#3D1F52" opacity=".85"/>
<!-- Midnight navy script tag -->
<rect x="220" y="320" width="160" height="46" fill="#1A1F3C"/>
<text x="300" y="350" font-family="Times New Roman, serif" font-size="22" fill="#EDE0C4" text-anchor="middle" letter-spacing="2">GUCCI</text>
</svg>
<div class="upload-hint">↑ House signature · Replace with any Gucci reference</div>
</div>
<div class="palette-panel" id="palettePanel"></div>
</div>
</section>
<section>
<div class="sec-head">
<div class="sec-title">The collection</div>
<div class="sec-sub">Six patterns · twenty-four colorways</div>
</div>
<div class="pattern-strip" id="patternStrip"></div>
</section>
<section>
<div class="sec-head">
<div class="sec-title">Coordination matrix</div>
<div class="sec-sub">Every pattern × every house anchor</div>
</div>
<div class="coord-grid" id="coordGrid"></div>
</section>
<footer>
Internal brand reference · house anchor: gucci · fliepaper-bugs collection · 36 SKUs · Settlement-gated generation · wallco.ai
</footer>
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">☾</button>
<script>
const SPEC_URL = '/data/fliepaper-bugs/spec.json';
// Bundled fallback spec — survives if API not wired yet
const FALLBACK_SPEC = {
patterns: [
{slug:"scarab-reverie",bug:"scarab",name:"Scarab Reverie"},
{slug:"luna-moth-nocturne",bug:"luna moth",name:"Luna Moth Nocturne"},
{slug:"dragonfly-lacquer",bug:"dragonfly",name:"Dragonfly Lacquer"},
{slug:"stag-beetle-cabinet",bug:"stag beetle",name:"Stag Beetle Cabinet"},
{slug:"bee-damask",bug:"honeybee",name:"Bee Damask"},
{slug:"firefly-nocturne",bug:"firefly",name:"Firefly Nocturne"}
],
palette: [
{slug:"emerald-marmont", name:"Emerald Marmont", hex:"#0F4F38",role:"ground", gucci_ref:"GG Marmont velvet emerald"},
{slug:"papyrus-archive", name:"Papyrus Archive", hex:"#EDE0C4",role:"ground/figure",gucci_ref:"GG Supreme canvas natural"},
{slug:"midnight-flora", name:"Midnight Flora", hex:"#1A1F3C",role:"ground", gucci_ref:"Velvet midnight navy FW20"},
{slug:"antique-horsebit", name:"Antique Horsebit", hex:"#B8914A",role:"accent/figure",gucci_ref:"Horsebit hardware antique gold"},
{slug:"deep-plum-dionysus",name:"Deep Plum Dionysus", hex:"#3D1F52",role:"ground/figure",gucci_ref:"Dionysus suede deep violet"},
{slug:"oxblood-flora", name:"Oxblood Flora", hex:"#6B1F1F",role:"figure/accent",gucci_ref:"Signature red leather SS18"}
]
};
let SPEC = FALLBACK_SPEC;
async function loadSpec(){
try {
const r = await fetch(SPEC_URL,{cache:'no-store'});
if (r.ok) SPEC = await r.json();
} catch(e){ /* fallback in place */ }
renderPalette(); renderPatterns(); renderCoord();
}
function renderPalette(){
const host = document.getElementById('palettePanel');
host.innerHTML = SPEC.palette.map(p=>`
<div class="swatch">
<div class="chip" style="background:${p.hex}"></div>
<div>
<div class="name">${p.name}</div>
<div class="ref">${p.gucci_ref || ''}</div>
</div>
<div>
<div class="role">${p.role || ''}</div>
<div class="hex">${p.hex.toUpperCase()}</div>
</div>
</div>
`).join('');
}
function renderPatterns(){
const host = document.getElementById('patternStrip');
// Lead each pattern card with the strongest two-color gradient pulled from the palette
const c1 = SPEC.palette[0].hex; // emerald
const c2list = ['#1A1F3C','#3D1F52','#6B1F1F','#B8914A','#EDE0C4','#0F4F38'];
host.innerHTML = SPEC.patterns.map((pat,i)=>`
<a class="pat-card" href="/collections/fliepaper-bugs.html#${pat.slug}" style="--c1:${c1};--c2:${c2list[i%6]}">
<span class="pat-bug">${pat.bug}</span>
<span class="pat-pending">Pending</span>
<span class="pat-name">${pat.name}</span>
</a>
`).join('');
}
function renderCoord(){
const grid = document.getElementById('coordGrid');
let html = '<div class="corner"></div>';
SPEC.palette.forEach(p=>{ html += `<div class="col-head">${p.name.split(' ')[0]}</div>`; });
SPEC.patterns.forEach(pat=>{
html += `<div class="rh">${pat.name}</div>`;
SPEC.palette.forEach(p=>{
html += `<div class="ch" style="background:${p.hex}">${pat.slug.slice(0,3).toUpperCase()}·${p.slug.slice(0,3).toUpperCase()}</div>`;
});
});
grid.innerHTML = html;
}
function onUpload(ev){
const f = ev.target.files[0]; if (!f) return;
const fr = new FileReader();
fr.onload = e => {
const img = document.getElementById('refImg');
img.src = e.target.result;
document.getElementById('refCanvas').setAttribute('data-has-image','true');
try { localStorage.setItem('fliepaper.brand-ref.gucci', e.target.result); } catch(_){}
};
fr.readAsDataURL(f);
}
function restoreRef(){
try{
const saved = localStorage.getItem('fliepaper.brand-ref.gucci');
if (saved){
document.getElementById('refImg').src = saved;
document.getElementById('refCanvas').setAttribute('data-has-image','true');
}
}catch(_){}
}
function toggleTheme(){
const cur = document.body.getAttribute('data-theme')||'light';
const next = cur==='light' ? 'dark':'light';
document.body.setAttribute('data-theme',next);
document.getElementById('themeToggle').textContent = next==='light' ? '☾' : '☀';
try{ localStorage.setItem('fliepaper.theme',next); }catch(_){}
}
function restoreTheme(){
try{
const t = localStorage.getItem('fliepaper.theme');
if (t){ document.body.setAttribute('data-theme',t); document.getElementById('themeToggle').textContent = t==='light'?'☾':'☀'; }
}catch(_){}
}
function toggleMenu(){
// Stub — wallco-ai handles real menu drawer when embedded
alert('Menu — wire to wallco-ai global drawer on embed');
}
loadSpec(); restoreRef(); restoreTheme();
</script>
</body>
</html>