← back to Model Arena
data/artifacts/1cc50031c12f/grok.html
1123 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Designer Wallcoverings — Grandmillennial Lookbook</title>
<style>
:root {
--bg: #f7f3eb;
--surface: #fffdf8;
--ink: #1c1a17;
--muted: #6e685c;
--accent: #9a3d4a;
--accent-soft: #c4a dig 8a;
--gold: #b8956c;
--line: rgba(28, 26, 23, 0.12);
--shadow: 0 18px 48px rgba(28, 26, 23, 0.08), 0 4px 12px rgba(28, 26, 23, 0.04);
--shadow-soft: 0 8px 24px rgba(28, 26, 23, 0.06);
--ease: cubic-bezier(.22, .9, .24, 1);
--ease-scene: cubic-bezier(.77, 0, .18, 1);
--ease-out: cubic-bezier(.22, 1, .36, 1);
--serif: 'Didot', 'Bodoni MT', 'Playfair Display', 'EB Garamond', Georgia, 'Times New Roman', serif;
--sans: 'Avenir Next', 'Century Gothic', 'Helvetica Neue', Futura, sans-serif;
--bar-h: 72px;
--radius: 2px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
/* ——— Fixed brand bar ——— */
.brand-bar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--bar-h);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
background: rgba(247, 243, 235, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.wordmark {
font-family: var(--serif);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.25;
white-space: normal;
max-width: 280px;
}
.bar-meta {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
/* ——— Stage ——— */
.stage {
height: 100%;
padding-top: var(--bar-h);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.carousel-shell {
width: min(420px, calc(100vw - 32px));
height: min(740px, calc(100vh - var(--bar-h) - 48px));
position: relative;
display: flex;
flex-direction: column;
}
.phone-frame {
flex: 1;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
border-radius: 4px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
/* ——— Track ——— */
.track-wrap {
flex: 1;
overflow: hidden;
position: relative;
touch-action: pan-y;
cursor: grab;
}
.track-wrap:active { cursor: grabbing; }
.track {
display: flex;
height: 100%;
transition: transform 0.55s var(--ease-scene);
will-change: transform;
}
.slide {
min-width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* ——— Cover ——— */
.slide-cover {
background: var(--ink);
color: var(--bg);
justify-content: flex-end;
padding: 40px 36px 48px;
}
.cover-ornament {
position: absolute;
inset: 0;
opacity: 0.18;
background-image:
radial-gradient(circle at 20% 30%, var(--gold) 0.6px, transparent 0.8px),
radial-gradient(circle at 80% 70%, var(--gold) 0.6px, transparent 0.8px);
background-size: 28px 28px, 28px 28px;
background-position: 0 0, 14px 14px;
}
.cover-rule {
width: 48px;
height: 1px;
background: var(--gold);
margin-bottom: 28px;
position: relative;
z-index: 1;
}
.cover-kicker {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 18px;
position: relative;
z-index: 1;
}
.cover-title {
font-family: var(--serif);
font-size: 52px;
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.02em;
color: #f5f2ea;
position: relative;
z-index: 1;
margin-bottom: 16px;
}
.cover-sub {
font-family: var(--sans);
font-size: 14px;
color: rgba(245, 242, 234, 0.65);
max-width: 28ch;
line-height: 1.6;
position: relative;
z-index: 1;
}
.cover-edit {
margin-top: 32px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.edit-label {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 242, 234, 0.45);
}
.edit-row {
display: flex;
gap: 8px;
align-items: center;
}
.style-input {
background: transparent;
border: none;
border-bottom: 1px solid rgba(201, 169, 97, 0.4);
color: #f5f2ea;
font-family: var(--serif);
font-size: 18px;
padding: 6px 0;
width: 180px;
outline: none;
letter-spacing: 0.02em;
}
.style-input:focus { border-bottom-color: var(--gold); }
.swatch-dot {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid rgba(245, 242, 234, 0.25);
cursor: pointer;
transition: transform 0.25s var(--ease);
}
.swatch-dot:hover { transform: scale(1.15); }
.swatch-dot.active { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--gold); }
/* ——— Content slides ——— */
.slide-body {
padding: 28px 28px 20px;
gap: 18px;
background: var(--surface);
}
.slide-index {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
.slide-heading {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.15;
color: var(--ink);
}
.pair {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 14px;
flex: 1;
min-height: 0;
}
.panel {
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
position: relative;
background: var(--bg);
box-shadow: var(--shadow-soft);
}
.panel-label {
position: absolute;
bottom: 10px;
left: 12px;
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
background: rgba(255, 253, 248, 0.88);
padding: 4px 8px;
border: 1px solid var(--line);
z-index: 2;
}
/* Pattern swatches — pure CSS */
.swatch {
width: 100%;
height: 100%;
}
/* 1 — Chintz floral lattice */
.pat-chintz {
background-color: #f0e6d8;
background-image:
radial-gradient(ellipse 18px 14px at 30% 35%, rgba(154, 61, 74, 0.55) 0%, transparent 70%),
radial-gradient(ellipse 12px 10px at 55% 42%, rgba(184, 149, 108, 0.5) 0%, transparent 70%),
radial-gradient(ellipse 10px 14px at 42% 58%, rgba(74, 110, 90, 0.4) 0%, transparent 70%),
radial-gradient(circle 3px at 50% 50%, rgba(154, 61, 74, 0.35) 99%, transparent 100%),
repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(28,26,23,0.06) 47px, rgba(28,26,23,0.06) 48px),
repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(28,26,23,0.06) 47px, rgba(28,26,23,0.06) 48px);
background-size: 96px 96px;
}
/* 2 — Ribbon stripe */
.pat-ribbon {
background-color: #ebe4d6;
background-image:
repeating-linear-gradient(
90deg,
#9a3d4a 0px,
#9a3d4a 10px,
#f0e8da 10px,
#f0e8da 22px,
#b8956c 22px,
#b8956c 28px,
#f0e8da 28px,
#f0e8da 48px,
#4a6e5a 48px,
#4a6e5a 52px,
#f0e8da 52px,
#f0e8da 72px
);
}
/* 3 — Scallop toile */
.pat-scallop {
background-color: #e8dfd0;
background-image:
radial-gradient(circle at 50% 0%, transparent 14px, rgba(154, 61, 74, 0.22) 14px, rgba(154, 61, 74, 0.22) 16px, transparent 16px),
radial-gradient(circle at 0% 50%, transparent 14px, rgba(74, 110, 90, 0.18) 14px, rgba(74, 110, 90, 0.18) 16px, transparent 16px),
radial-gradient(circle at 100% 50%, transparent 14px, rgba(184, 149, 108, 0.2) 14px, rgba(184, 149, 108, 0.2) 16px, transparent 16px),
radial-gradient(circle at 50% 100%, transparent 14px, rgba(154, 61, 74, 0.18) 14px, rgba(154, 61, 74, 0.18) 16px, transparent 16px);
background-size: 48px 48px;
background-position: 0 0, 24px 0, 24px 0, 0 0;
}
/* Room vignettes — CSS art */
.room {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
/* Room 1 — parlor with skirted chair */
.room-parlor {
background: linear-gradient(180deg, #ddd4c4 0%, #ddd4c4 58%, #c8bba6 58%, #c8bba6 100%);
}
.room-parlor .wall-paper {
position: absolute;
top: 0; left: 0; right: 0; height: 58%;
background-color: #e8dcc8;
background-image:
radial-gradient(ellipse 8px 6px at 25% 30%, rgba(154,61,74,0.35) 0%, transparent 70%),
radial-gradient(ellipse 6px 8px at 60% 55%, rgba(74,110,90,0.28) 0%, transparent 70%),
radial-gradient(circle 2px at 40% 70%, rgba(184,149,108,0.4) 99%, transparent 100%);
background-size: 40px 40px;
opacity: 0.85;
}
.room-parlor .wainscot {
position: absolute;
top: 52%; left: 0; right: 0; height: 6%;
background: #f5f0e6;
border-top: 1px solid rgba(28,26,23,0.15);
border-bottom: 1px solid rgba(28,26,23,0.12);
}
.room-parlor .floor {
position: absolute;
bottom: 0; left: 0; right: 0; height: 42%;
background:
repeating-linear-gradient(90deg, #b8a88e 0px, #b8a88e 28px, #a89878 28px, #a89878 30px);
}
.room-parlor .chair {
position: absolute;
bottom: 18%;
left: 50%;
transform: translateX(-50%);
width: 42%;
height: 38%;
}
.room-parlor .chair-back {
position: absolute;
top: 0; left: 15%; right: 15%;
height: 48%;
background: #9a3d4a;
border-radius: 40% 40% 4px 4px / 30% 30% 4px 4px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.room-parlor .chair-seat {
position: absolute;
top: 42%; left: 8%; right: 8%;
height: 28%;
background: #8a3540;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.room-parlor .chair-skirt {
position: absolute;
top: 66%; left: 6%; right: 6%;
height: 34%;
background:
repeating-linear-gradient(90deg, #9a3d4a 0, #9a3d4a 8px, #7a2f3a 8px, #7a2f3a 10px);
border-radius: 0 0 2px 2px;
}
.room-parlor .chair-leg-l,
.room-parlor .chair-leg-r {
position: absolute;
bottom: -8%;
width: 4px;
height: 18%;
background: #5c4a32;
}
.room-parlor .chair-leg-l { left: 18%; }
.room-parlor .chair-leg-r { right: 18%; }
.room-parlor .lamp {
position: absolute;
bottom: 42%;
right: 12%;
width: 14%;
height: 32%;
}
.room-parlor .lamp-shade {
position: absolute;
top: 0; left: 0; right: 0;
height: 38%;
background: #f0e6d4;
clip-path: polygon(10% 100%, 90% 100%, 100% 0, 0 0);
box-shadow: 0 2px 8px rgba(184,149,108,0.3);
}
.room-parlor .lamp-base {
position: absolute;
bottom: 0; left: 35%; width: 30%;
height: 62%;
background: linear-gradient(90deg, #b8956c, #d4b896, #b8956c);
border-radius: 2px 2px 40% 40%;
}
/* Room 2 — dining with draped table */
.room-dining {
background: linear-gradient(180deg, #d5cbb8 0%, #d5cbb8 55%, #b8a990 55%, #b8a990 100%);
}
.room-dining .wall-stripe {
position: absolute;
top: 0; left: 0; right: 0; height: 55%;
background-image:
repeating-linear-gradient(90deg,
#e4d8c4 0px, #e4d8c4 14px,
#9a3d4a 14px, #9a3d4a 18px,
#e4d8c4 18px, #e4d8c4 28px,
#b8956c 28px, #b8956c 31px);
opacity: 0.7;
}
.room-dining .picture-rail {
position: absolute;
top: 8%; left: 0; right: 0; height: 1px;
background: rgba(28,26,23,0.2);
}
.room-dining .floor-d {
position: absolute;
bottom: 0; left: 0; right: 0; height: 45%;
background: #a8987a;
background-image:
linear-gradient(90deg, transparent 49%, rgba(0,0,0,0.06) 50%, transparent 51%);
background-size: 40px 100%;
}
.room-dining .table {
position: absolute;
bottom: 14%;
left: 18%;
right: 18%;
height: 36%;
}
.room-dining .table-cloth {
position: absolute;
inset: 0;
background: #f5f0e6;
border-radius: 2px;
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.room-dining .table-cloth::after {
content: '';
position: absolute;
bottom: -18%;
left: 5%; right: 5%;
height: 22%;
background: #ebe4d4;
clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
box-shadow: inset 0 2px 0 rgba(0,0,0,0.04);
}
.room-dining .runner {
position: absolute;
top: 8%; left: 30%; right: 30%; bottom: 8%;
background: #9a3d4a;
opacity: 0.85;
}
.room-dining .vase {
position: absolute;
top: -28%;
left: 50%;
transform: translateX(-50%);
width: 18%;
height: 42%;
background: linear-gradient(90deg, #4a6e5a, #5a8270, #4a6e5a);
border-radius: 40% 40% 30% 30% / 20% 20% 50% 50%;
}
.room-dining .bloom {
position: absolute;
top: -48%;
left: 42%;
width: 16%;
height: 22%;
background: radial-gradient(circle, #9a3d4a 0%, #9a3d4a 40%, transparent 70%);
border-radius: 50%;
}
.room-dining .bloom2 {
position: absolute;
top: -42%;
left: 52%;
width: 12%;
height: 16%;
background: radial-gradient(circle, #b8956c 0%, transparent 70%);
border-radius: 50%;
}
.room-dining .candle-l,
.room-dining .candle-r {
position: absolute;
top: -12%;
width: 4px;
height: 22%;
background: #f5f0e6;
border-radius: 1px;
}
.room-dining .candle-l { left: 22%; }
.room-dining .candle-r { right: 22%; }
.room-dining .candle-l::before,
.room-dining .candle-r::before {
content: '';
position: absolute;
top: -6px; left: 50%;
transform: translateX(-50%);
width: 5px; height: 7px;
background: radial-gradient(ellipse, #e8a840, #c45a20);
border-radius: 50% 50% 40% 40%;
}
/* Room 3 — bedroom nook */
.room-bed {
background: linear-gradient(180deg, #cfc4b0 0%, #cfc4b0 50%, #b0a08a 50%, #b0a08a 100%);
}
.room-bed .wall-scallop {
position: absolute;
top: 0; left: 0; right: 0; height: 50%;
background-color: #e0d4c0;
background-image:
radial-gradient(circle at 50% 100%, transparent 10px, rgba(154,61,74,0.15) 10px, rgba(154,61,74,0.15) 12px, transparent 12px);
background-size: 36px 36px;
background-position: 0 -18px;
}
.room-bed .headboard {
position: absolute;
bottom: 38%;
left: 22%;
right: 22%;
height: 28%;
background: #8a6a4a;
border-radius: 50% 50% 0 0 / 60% 60% 0 0;
box-shadow: inset 0 0 0 3px #b8956c;
}
.room-bed .mattress {
position: absolute;
bottom: 22%;
left: 18%;
right: 18%;
height: 18%;
background: #f5f0e6;
border-radius: 2px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.room-bed .pillow-l,
.room-bed .pillow-r {
position: absolute;
bottom: 36%;
width: 18%;
height: 10%;
background: #9a3d4a;
border-radius: 40% 40% 30% 30%;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.room-bed .pillow-l { left: 26%; }
.room-bed .pillow-r { right: 26%; background: #4a6e5a; }
.room-bed .throw {
position: absolute;
bottom: 22%;
right: 20%;
width: 28%;
height: 14%;
background:
repeating-linear-gradient(135deg, #b8956c 0, #b8956c 4px, #f0e6d4 4px, #f0e6d4 8px);
border-radius: 2px;
transform: rotate(-4deg);
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.room-bed .nightstand {
position: absolute;
bottom: 22%;
left: 6%;
width: 12%;
height: 16%;
background: #6a5640;
border-radius: 1px;
}
.room-bed .ns-lamp {
position: absolute;
bottom: 38%;
left: 7%;
width: 10%;
height: 18%;
}
.room-bed .ns-shade {
position: absolute;
top: 0; left: 5%; right: 5%;
height: 40%;
background: #f0e8d8;
clip-path: polygon(15% 100%, 85% 100%, 100% 0, 0 0);
}
.room-bed .ns-stem {
position: absolute;
bottom: 0; left: 42%;
width: 16%; height: 60%;
background: var(--gold);
border-radius: 1px;
}
.room-bed .rug {
position: absolute;
bottom: 4%;
left: 25%;
right: 25%;
height: 14%;
background: #9a3d4a;
border-radius: 50%;
opacity: 0.7;
box-shadow: inset 0 0 0 3px #b8956c;
}
.note {
font-family: var(--serif);
font-size: 15px;
font-style: italic;
color: var(--muted);
line-height: 1.45;
padding-top: 2px;
border-top: 1px solid var(--line);
margin-top: auto;
}
/* ——— CTA slide ——— */
.slide-cta {
background: var(--bg);
padding: 48px 36px;
justify-content: center;
align-items: center;
text-align: center;
gap: 20px;
}
.cta-ornament {
width: 40px;
height: 1px;
background: var(--gold);
}
.cta-title {
font-family: var(--serif);
font-size: 36px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
}
.cta-body {
font-size: 14px;
color: var(--muted);
max-width: 28ch;
line-height: 1.65;
}
.cta-btn {
margin-top: 12px;
appearance: none;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--bg);
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 32px;
cursor: pointer;
transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease);
}
.cta-btn:hover {
background: transparent;
color: var(--ink);
}
.cta-btn:active { transform: scale(0.98); }
.cta-fine {
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-top: 8px;
}
/* ——— Dots + nav ——— */
.chrome {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 4px 0;
gap: 12px;
}
.dots {
display: flex;
gap: 8px;
align-items: center;
flex: 1;
justify-content: center;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--line);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.dot[aria-current="true"] {
background: var(--ink);
transform: scale(1.25);
}
.nav-btn {
appearance: none;
background: transparent;
border: 1px solid var(--line);
color: var(--ink);
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 8px 14px;
cursor: pointer;
transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav-btn:hover {
border-color: var(--ink);
background: var(--surface);
}
.nav-btn:disabled {
opacity: 0.3;
cursor: default;
}
/* ——— Overlay ——— */
.overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(28, 26, 23, 0.45);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease);
}
.overlay.open {
opacity: 1;
pointer-events: auto;
}
.overlay-card {
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: 40px 36px;
max-width: 340px;
width: calc(100% - 48px);
text-align: center;
transform: translateY(12px);
transition: transform 0.45s var(--ease-out);
}
.overlay.open .overlay-card { transform: translateY(0); }
.overlay-card h2 {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
margin-bottom: 12px;
color: var(--ink);
}
.overlay-card p {
font-size: 14px;
color: var(--muted);
margin-bottom: 24px;
line-height: 1.6;
}
.overlay-card button {
appearance: none;
border: 1px solid var(--ink);
background: var(--ink);
color: var(--bg);
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 14px 28px;
cursor: pointer;
transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.overlay-card button:hover {
background: transparent;
color: var(--ink);
}
/* Entrance */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-cover .cover-rule,
.slide-cover .cover-kicker,
.slide-cover .cover-title,
.slide-cover .cover-sub,
.slide-cover .cover-edit {
animation: fadeUp 0.7s var(--ease-out) both;
}
.slide-cover .cover-kicker { animation-delay: 0.08s; }
.slide-cover .cover-title { animation-delay: 0.16s; }
.slide-cover .cover-sub { animation-delay: 0.24s; }
.slide-cover .cover-edit { animation-delay: 0.32s; }
</style>
</head>
<body>
<header class="brand-bar">
<div class="wordmark">Designer<br>Wallcoverings</div>
<div class="bar-meta">Lookbook · 01</div>
</header>
<main class="stage">
<div class="carousel-shell">
<div class="phone-frame">
<div class="track-wrap" id="trackWrap">
<div class="track" id="track">
<!-- COVER -->
<section class="slide slide-cover" data-slide="0">
<div class="cover-ornament" aria-hidden="true"></div>
<div class="cover-rule"></div>
<p class="cover-kicker">A Design Style Series</p>
<h1 class="cover-title" id="styleTitle">Grand­millennial</h1>
<p class="cover-sub">Heirloom chintz, skirted seating, and the quietly rebellious return of the formal parlor.</p>
<div class="cover-edit">
<span class="edit-label">Edit style name</span>
<div class="edit-row">
<input class="style-input" id="styleInput" type="text" value="Grandmillennial" maxlength="28" aria-label="Style name">
</div>
<span class="edit-label" style="margin-top:8px">Palette accent</span>
<div class="edit-row" id="paletteRow" role="group" aria-label="Accent palette">
<button type="button" class="swatch-dot active" data-accent="#9a3d4a" data-gold="#b8956c" style="background:#9a3d4a" title="Garnet"></button>
<button type="button" class="swatch-dot" data-accent="#2f4a3c" data-gold="#a8926a" style="background:#2f4a3c" title="Forest"></button>
<button type="button" class="swatch-dot" data-accent="#3d4a6b" data-gold="#b8a078" style="background:#3d4a6b" title="Ink blue"></button>
<button type="button" class="swatch-dot" data-accent="#6b3d2e" data-gold="#c4a46c" style="background:#6b3d2e" title="Cognac"></button>
</div>
</div>
</section>
<!-- SLIDE 1 — Chintz -->
<section class="slide slide-body" data-slide="1">
<span class="slide-index">01 — Pattern</span>
<h2 class="slide-heading">English Chintz Lattice</h2>
<div class="pair">
<div class="panel">
<div class="swatch pat-chintz" id="swatch1"></div>
</div>
<div class="panel">
<div class="room room-parlor">
<div class="wall-paper"></div>
<div class="wainscot"></div>
<div class="floor"></div>
<div class="chair">
<div class="chair-back"></div>
<div class="chair-seat"></div>
<div class="chair-skirt"></div>
<div class="chair-leg-l"></div>
<div class="chair-leg-r"></div>
</div>
<div class="lamp">
<div class="lamp-shade"></div>
<div class="lamp-base"></div>
</div>
</div>
</div>
</div>
<p class="note">Skirt a bergère in matching chintz — pattern on pattern is the point, not the problem.</p>
</section>
<!-- SLIDE 2 — Ribbon -->
<section class="slide slide-body" data-slide="2">
<span class="slide-index">02 — Pattern</span>
<h2 class="slide-heading">Heirloom Ribbon Stripe</h2>
<div class="pair">
<div class="panel">
<div class="swatch pat-ribbon" id="swatch2"></div>
</div>
<div class="panel">
<div class="room room-dining">
<div class="wall-stripe"></div>
<div class="picture-rail"></div>
<div class="floor-d"></div>
<div class="table">
<div class="table-cloth"></div>
<div class="runner"></div>
<div class="vase"></div>
<div class="bloom"></div>
<div class="bloom2"></div>
<div class="candle-l"></div>
<div class="candle-r"></div>
</div>
</div>
</div>
</div>
<p class="note">Run a formal stripe behind the sideboard; let silver and taper candles do the rest.</p>
</section>
<!-- SLIDE 3 — Scallop -->
<section class="slide slide-body" data-slide="3">
<span class="slide-index">03 — Pattern</span>
<h2 class="slide-heading">Scalloped Toile Ground</h2>
<div class="pair">
<div class="panel">
<div class="swatch pat-scallop" id="swatch3"></div>
</div>
<div class="panel">
<div class="room room-bed">
<div class="wall-scallop"></div>
<div class="headboard"></div>
<div class="mattress"></div>
<div class="pillow-l"></div>
<div class="pillow-r"></div>
<div class="throw"></div>
<div class="nightstand"></div>
<div class="ns-lamp">
<div class="ns-shade"></div>
<div class="ns-stem"></div>
</div>
<div class="rug"></div>
</div>
</div>
</div>
<p class="note">A scalloped ground behind an upholstered headboard reads collected, never costume.</p>
</section>
<!-- CTA -->
<section class="slide slide-cta" data-slide="4">
<div class="cta-ornament"></div>
<h2 class="cta-title">Paper the parlor.</h2>
<p class="cta-body">Request the Grandmillennial sample folio — three hand-finished grounds, bound in linen.</p>
<button type="button" class="cta-btn" id="ctaBtn">Request the folio</button>
<p class="cta-fine">Designer Wallcoverings · Est. atelier</p>
</section>
</div>
</div>
</div>
<div class="chrome">
<button type="button" class="nav-btn" id="prevBtn" disabled>Prev</button>
<div class="dots" id="dots" role="tablist" aria-label="Slides"></div>
<button type="button" class="nav-btn" id="nextBtn">Next</button>
</div>
</div>
</main>
<div class="overlay" id="overlay" role="dialog" aria-modal="true" aria-labelledby="ovTitle">
<div class="overlay-card">
<h2 id="ovTitle">Folio requested</h2>
<p>Your Grandmillennial sample set is reserved. A curator will confirm delivery of the linen-bound folio.</p>
<button type="button" id="ovClose">Close</button>
</div>
</div>
<script>
(function () {
const track = document.getElementById('track');
const trackWrap = document.getElementById('trackWrap');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const dotsEl = document.getElementById('dots');
const styleInput = document.getElementById('styleInput');
const styleTitle = document.getElementById('styleTitle');
const overlay = document.getElementById('overlay');
const ctaBtn = document.getElementById('ctaBtn');
const ovClose = document.getElementById('ovClose');
const slides = Array.from(document.querySelectorAll('.slide'));
const total = slides.length;
let index = 0;
// Dots
slides.forEach((_, i) => {
const b = document.createElement('button');
b.type = 'button';
b.className = 'dot';
b.setAttribute('role', 'tab');
b.setAttribute('aria-label', 'Slide ' + (i + 1));
b.addEventListener('click', () => go(i));
dotsEl.appendChild(b);
});
const dots = Array.from(dotsEl.children);
function go(i) {
index = Math.max(0, Math.min(total - 1, i));
track.style.transform = 'translateX(' + (-index * 100) + '%)';
dots.forEach((d, di) => d.setAttribute('aria-current', di === index ? 'true' : 'false'));
prevBtn.disabled = index === 0;
nextBtn.disabled = index === total - 1;
}
prevBtn.addEventListener('click', () => go(index - 1));
nextBtn.addEventListener('click', () => go(index + 1));
// Swipe
let startX = 0, deltaX = 0, dragging = false;
trackWrap.addEventListener('pointerdown', (e) => {
if (e.target.closest('input, button')) return;
dragging = true;
startX = e.clientX;
deltaX = 0;
track.style.transition = 'none';
trackWrap.setPointerCapture(e.pointerId);
});
trackWrap.addEventListener('pointermove', (e) => {
if (!dragging) return;
deltaX = e.clientX - startX;
const pct = (deltaX / trackWrap.offsetWidth) * 100;
track.style.transform = 'translateX(calc(' + (-index * 100) + '% + ' + pct + '%))';
});
function endDrag() {
if (!dragging) return;
dragging = false;
track.style.transition = '';
if (deltaX < -50) go(index + 1);
else if (deltaX > 50) go(index - 1);
else go(index);
deltaX = 0;
}
trackWrap.addEventListener('pointerup', endDrag);
trackWrap.addEventListener('pointercancel', endDrag);
// Keyboard
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') go(index + 1);
if (e.key === 'ArrowLeft') go(index - 1);
if (e.key === 'Escape') overlay.classList.remove('open');
});
// Editable style name
styleInput.addEventListener('input', () => {
const v = styleInput.value.trim() || 'Grandmillennial';
styleTitle.innerHTML = v.replace(/([a-z])([A-Z])/g, '$1­$2');
if (v.length > 12 && !v.includes(' ')) {
styleTitle.innerHTML = v.slice(0, Math.ceil(v.length / 2)) + '­' + v.slice(Math.ceil(v.length / 2));
} else {
styleTitle.textContent = v;
}
});
// Palette
document.getElementById('paletteRow').addEventListener('click', (e) => {
const btn = e.target.closest('.swatch-dot');
if (!btn) return;
document.querySelectorAll('.swatch-dot').forEach(d => d.classList.remove('active'));
btn.classList.add('active');
const a = btn.dataset.accent;
const g = btn.dataset.gold;
document.documentElement.style.setProperty('--accent', a);
document.documentElement.style.setProperty('--gold', g);
// Retint key pattern accents via inline filters on swatches that use the garnet
document.querySelectorAll('.chair-back, .chair-seat, .chair-skirt, .runner, .pillow-l, .rug').forEach(el => {
el.style.background = a;
});
document.querySelectorAll('.chair-skirt').forEach(el => {
el.style.background = 'repeating-linear-gradient(90deg, ' + a + ' 0, ' + a + ' 8px, color-mix(in srgb, ' + a + ' 70%, #000) 8px, color-mix(in srgb, ' + a + ' 70%, #000) 10px)';
});
});
// CTA overlay
ctaBtn.addEventListener('click', () => overlay.classList.add('open'));
ovClose.addEventListener('click', () => overlay.classList.remove('open'));
overlay.addEventListener('click', (e) => {
if (e.target === overlay) overlay.classList.remove('open');
});
go(0);
})();
</script>
</body>
</html>