← back to Wallco Ai
data/mockups/design-page/11-restoration-hardware.html
126 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>MARINE HEIRLOOM · WALLCO SOURCEBOOK</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Lora:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<style>
:root{
--sepia:#e8dfca; --darksepia:#b3a37e; --ink:#2c241a; --bone:#f0e8d2; --gilt:#b08b4e;
--display:'Cinzel',serif; --serif:'Lora',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--sepia);color:var(--ink);font-family:var(--serif);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* Hairline top with ALL-CAPS chrome */
.top{padding:22px 56px;display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:11px;letter-spacing:.4em;color:var(--ink);border-bottom:1px solid var(--darksepia)}
.top .crest{font-size:22px;letter-spacing:.34em;font-weight:500}
.top .crest small{font-family:var(--serif);font-size:9px;letter-spacing:.32em;display:block;font-style:italic;color:var(--darksepia);font-weight:400;margin-top:2px;text-transform:none}
/* Hero — sepia full-bleed */
.hero{position:relative;height:75vh;min-height:520px;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.4) contrast(1.04) brightness(.94);display:block}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(232,223,202,.05) 0%,rgba(232,223,202,.55) 60%,var(--sepia) 100%)}
.hero-text{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);text-align:center;z-index:2;color:var(--ink);width:100%;padding:0 32px}
.hero-text .coll{font-family:var(--display);font-size:11px;letter-spacing:.5em;margin-bottom:18px;font-weight:400}
.hero-text h1{font-family:var(--display);font-weight:400;font-size:64px;letter-spacing:.16em;line-height:1;margin:0 0 14px}
.hero-text .sub{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);opacity:.85;font-weight:400}
/* Headlines — ALLCAPS Cinzel as section titles */
section.h{padding:88px 56px 64px;text-align:center;max-width:880px;margin:0 auto}
section.h h2{font-family:var(--display);font-size:22px;font-weight:500;letter-spacing:.42em;margin:0 0 14px}
section.h h2::before, section.h h2::after{content:'❖';opacity:.5;font-size:14px;margin:0 16px;display:inline-block;color:var(--gilt);vertical-align:middle;letter-spacing:0}
section.h .lead{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.7;color:var(--ink);max-width:54ch;margin:0 auto;opacity:.92}
section.h .lead::first-letter{font-family:var(--display);font-size:46px;font-style:normal;color:var(--gilt);float:left;line-height:.85;margin:6px 8px 0 0}
/* Specs — old catalog style, centered */
.specs{padding:32px 56px 88px;text-align:center;border-bottom:1px solid var(--darksepia)}
.specs h3{font-family:var(--display);font-size:13px;letter-spacing:.42em;color:var(--ink);margin-bottom:36px}
.specs-grid{max-width:960px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 48px}
.spec{text-align:center}
.spec dt{font-family:var(--display);font-size:10px;letter-spacing:.36em;color:var(--darksepia);font-weight:500;margin-bottom:6px}
.spec dd{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--ink);font-weight:400}
/* Color story — gilt-framed swatches */
.colors{padding:88px 56px;text-align:center;background:var(--bone);border-bottom:1px solid var(--darksepia)}
.colors h3{font-family:var(--display);font-size:13px;letter-spacing:.42em;margin-bottom:14px}
.colors p{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--darksepia);margin-bottom:48px}
.palette-row{display:flex;justify-content:center;gap:36px;flex-wrap:wrap}
.palette-row .col{display:flex;flex-direction:column;align-items:center;gap:10px}
.palette-row .sw{width:84px;height:84px;border-radius:50%;border:3px solid var(--gilt);box-shadow:0 0 0 2px var(--bone),0 0 0 3px var(--darksepia);position:relative}
.palette-row .name{font-family:var(--display);font-size:11px;letter-spacing:.32em;color:var(--ink)}
.palette-row .hex{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--darksepia)}
/* CTA section — like an old printer's ad */
.cta{padding:88px 56px;text-align:center;background:var(--sepia);border-bottom:1px solid var(--darksepia)}
.cta .rule{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:18px;color:var(--gilt)}
.cta .rule::before, .cta .rule::after{content:'';display:block;width:120px;height:1px;background:var(--gilt);opacity:.6}
.cta h3{font-family:var(--display);font-size:20px;letter-spacing:.4em;font-weight:500;margin-bottom:16px}
.cta .lede{font-family:var(--serif);font-style:italic;font-size:18px;max-width:46ch;margin:0 auto 36px;line-height:1.55;color:var(--ink);opacity:.85}
.cta-buttons{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.cta-buttons button{font-family:var(--display);font-size:11px;letter-spacing:.36em;padding:18px 36px;background:var(--ink);color:var(--bone);border:0;cursor:pointer;font-weight:500}
.cta-buttons button.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
footer{padding:32px 56px;text-align:center;font-family:var(--display);font-size:10px;letter-spacing:.5em;color:var(--darksepia);background:var(--ink);color:var(--bone)}
footer .b{margin-bottom:6px;color:var(--gilt)}
@media (max-width:880px){.hero-text h1{font-size:36px;letter-spacing:.1em}.specs-grid{grid-template-columns:1fr 1fr}.palette-row{gap:18px}}
</style></head>
<body>
<header class="top">
<div class="crest">WALLCO<small>Sourcebook · Vol. XLI</small></div>
<div>SPRING MMXXVI</div>
</header>
<section class="hero">
<img src="https://wallco.ai/designs/img/var_41538_hue-60_1779692961993.png" alt="Marine Heirloom">
<div class="hero-text">
<p class="coll">THE MARINE COLLECTION · NO. 41542</p>
<h1>MARINE HEIRLOOM</h1>
<p class="sub">A damask, rendered in slate-teal on bone.</p>
</div>
</section>
<section class="h">
<h2>ABOUT THE PATTERN</h2>
<p class="lead">A deep, slow damask — drawn from a single archive plate and resolved in a half-drop repeat of 27 inches. The rosette is held low to the ground, the leaf cool against the bone. The pattern wants a room with weight. A dining room, a library, a hallway lit by one good lamp.</p>
</section>
<section class="specs">
<h3>SPECIFICATIONS</h3>
<dl class="specs-grid">
<div class="spec"><dt>WIDTH</dt><dd>24″ & 36″</dd></div>
<div class="spec"><dt>REPEAT</dt><dd>27″ half-drop</dd></div>
<div class="spec"><dt>MATERIAL</dt><dd>Paper · Vinyl · P&S</dd></div>
<div class="spec"><dt>SOLD</dt><dd>Per roll, 27 ft.</dd></div>
</dl>
</section>
<section class="colors">
<h3>THE PALETTE</h3>
<p>Five colors, in conversation with the light.</p>
<div class="palette-row">
<div class="col"><span class="sw" style="background:#2b3838"></span><span class="name">SLATE TEAL</span><span class="hex">#2B3838</span></div>
<div class="col"><span class="sw" style="background:#cfc6b3"></span><span class="name">BONE</span><span class="hex">#CFC6B3</span></div>
<div class="col"><span class="sw" style="background:#1a2424"></span><span class="name">DEEP MARINE</span><span class="hex">#1A2424</span></div>
<div class="col"><span class="sw" style="background:#9aa19e"></span><span class="name">DRIFTWOOD</span><span class="hex">#9AA19E</span></div>
<div class="col"><span class="sw" style="background:#5e7b78"></span><span class="name">TIDEWATER</span><span class="hex">#5E7B78</span></div>
</div>
</section>
<section class="cta">
<div class="rule">❖</div>
<h3>SEND ME A MEMO</h3>
<p class="lede">A 24″ × 24″ swatch — mailed, with our compliments. Hold it against the light in your own room before you decide.</p>
<div class="cta-buttons">
<button>ORDER A MEMO</button>
<button class="ghost">SEE IN A ROOM</button>
</div>
</section>
<footer>
<div class="b">WALLCO SOURCEBOOK · NO. 41542 · DIG_AI_041542</div>
<div>SHERMAN OAKS · CALIFORNIA · MMXXVI</div>
</footer>
</body></html>