← back to Model Arena
data/artifacts/15bc10e7ee25/gpt.html
1211 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Designer Wallcoverings – Grandmillennial Lookbook</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
/* Palette from luxe-noir adapted to cream-ground luxury */
--color-ink: #1c1a17;
--color-bg: #f5f2ea;
--color-surface: #f0ebe0;
--color-deep: #17171c;
--color-muted: #8a8578;
--color-accent: #c9a961;
--color-accent2: #7d6a45;
--color-soft-line: rgba(138,133,120,0.35);
--font-display: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
--font-serif: Georgia, "Times New Roman", serif;
--font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--fs-caption: 12px;
--fs-body: 16px;
--fs-lead: 21px;
--fs-h3: 28px;
--fs-h2: 38px;
--fs-h1: 50px;
--fs-display: 67px;
--radius-card: 20px;
--radius-pill: 999px;
--shadow-soft: 0 18px 45px rgba(12, 8, 3, 0.26);
--shadow-subtle: 0 10px 30px rgba(0,0,0,0.12);
--carousel-height: min(520px, 90vh);
--gutter: 24px;
--transition-fast: 260ms cubic-bezier(.22,1,.36,1);
--transition-med: 420ms cubic-bezier(.22,1,.36,1);
}
/* Motion snippets (HyperFrames) */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: none; }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(.92); }
to { opacity: 1; transform: none; }
}
@keyframes clipReveal {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0); }
}
@keyframes blurIn {
from { opacity: 0; filter: blur(12px); }
to { opacity: 1; filter: blur(0); }
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-family: var(--font-sans);
background: radial-gradient(circle at top left, #fdf7ee 0, var(--color-bg) 46%, #e3dccf 100%);
color: var(--color-ink);
-webkit-font-smoothing: antialiased;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
}
.shell {
width: min(1080px, 100%);
max-height: 100%;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding: 12px 18px 10px;
border-radius: 999px;
border: 1px solid rgba(28,26,23,0.08);
background:
linear-gradient(120deg, rgba(201,169,97,0.18), transparent 30%, transparent 70%, rgba(125,106,69,0.16)),
radial-gradient(circle at top right, rgba(23,23,28,0.18), transparent 65%),
var(--color-bg);
box-shadow: 0 18px 40px rgba(0,0,0,0.12);
backdrop-filter: blur(20px);
animation: fadeUp 0.7s cubic-bezier(.22,1,.36,1) both;
}
header .wordmark {
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #1c1a17;
white-space: nowrap;
}
header .eyebrow {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-muted);
display: flex;
align-items: center;
gap: 8px;
}
header .eyebrow::before {
content: "";
width: 26px;
height: 1px;
background: linear-gradient(to right, transparent, rgba(138,133,120,0.9));
}
.frame {
position: relative;
border-radius: 32px;
padding: 22px 22px 26px;
background:
radial-gradient(circle at top left, rgba(255,255,255,0.85), transparent 60%),
radial-gradient(circle at bottom right, rgba(23,23,28,0.12), transparent 70%),
var(--color-surface);
box-shadow: var(--shadow-soft);
overflow: hidden;
animation: scaleIn 0.7s cubic-bezier(.22,1,.36,1) 80ms both;
}
.frame::before {
content: "";
position: absolute;
inset: 1px;
border-radius: 28px;
border: 1px solid rgba(255,255,255,0.7);
pointer-events: none;
}
.frame::after {
content: "";
position: absolute;
inset: 0;
border-radius: 32px;
background:
radial-gradient(circle at top center, rgba(255,255,255,0.35), transparent 60%);
mix-blend-mode: soft-light;
opacity: 0.7;
pointer-events: none;
}
.carousel-shell {
position: relative;
}
.carousel {
position: relative;
overflow: hidden;
border-radius: 24px;
min-height: 380px;
height: var(--carousel-height);
background-color: rgba(245,242,234,0.65);
backdrop-filter: blur(20px);
isolation: isolate;
}
.track {
display: flex;
width: 500%;
height: 100%;
transition: transform var(--transition-med);
will-change: transform;
}
.slide {
width: 100%;
flex-shrink: 0;
display: flex;
padding: 28px 32px;
gap: 32px;
align-items: stretch;
position: relative;
}
.slide::before {
content: attr(data-label);
position: absolute;
top: 18px;
right: 32px;
font-size: var(--fs-caption);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
}
.slide-cover {
justify-content: center;
align-items: center;
text-align: center;
padding-inline: min(9vw, 72px);
}
.cover-inner {
max-width: 540px;
margin: 0 auto;
animation: blurIn 0.9s cubic-bezier(.22,1,.36,1) both;
}
.cover-kicker {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 10px;
}
.cover-title {
font-family: var(--font-display);
font-size: clamp(34px, 4.1vw, 52px);
letter-spacing: -0.03em;
line-height: 1.04;
margin-bottom: 14px;
}
.cover-sub {
font-family: var(--font-serif);
font-size: var(--fs-lead);
line-height: 1.5;
color: rgba(28,26,23,0.88);
margin-bottom: 20px;
}
.cover-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--radius-pill);
border: 1px solid rgba(201,169,97,0.8);
background: linear-gradient(145deg, rgba(255,255,255,0.85), rgba(243,234,219,0.95));
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #5e543c;
}
.cover-tag span.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, var(--color-accent) 0, var(--color-accent2) 70%);
box-shadow: 0 0 0 1px rgba(125,106,69,0.4);
}
.card-media {
flex: 0 0 46%;
min-width: 0;
position: relative;
border-radius: 18px;
overflow: hidden;
background: radial-gradient(circle at top left, #fffaf2 0, #efe3cf 40%, #d9cbb1 100%);
box-shadow: var(--shadow-subtle);
animation: clipReveal 0.8s cubic-bezier(.22,1,.36,1) both;
}
.card-media::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(255,255,255,0.5), transparent 40%, transparent 60%, rgba(201,169,97,0.4));
mix-blend-mode: soft-light;
opacity: 0.9;
pointer-events: none;
}
.card-copy {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
gap: 12px;
padding-inline-end: 12px;
animation: fadeUp 0.7s cubic-bezier(.22,1,.36,1) 80ms both;
}
.card-copy h2 {
font-family: var(--font-display);
font-size: clamp(26px, 2.5vw, 34px);
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 4px;
}
.card-copy p {
font-family: var(--font-serif);
font-size: var(--fs-body);
line-height: 1.6;
color: rgba(28,26,23,0.85);
max-width: 34rem;
}
.styling-note {
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-muted);
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.styling-note::before {
content: "";
width: 22px;
height: 1px;
background: linear-gradient(to right, rgba(125,106,69,0.5), transparent);
}
.swatch-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
margin-top: 10px;
}
/* CTA slide */
.slide-cta {
align-items: center;
justify-content: space-between;
gap: 40px;
padding-inline: clamp(28px, 4vw, 48px);
}
.cta-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
animation: fadeUp 0.7s cubic-bezier(.22,1,.36,1) both;
}
.cta-title {
font-family: var(--font-display);
font-size: clamp(30px, 3.2vw, 40px);
letter-spacing: -0.02em;
line-height: 1.08;
}
.cta-body {
font-family: var(--font-serif);
font-size: var(--fs-body);
line-height: 1.6;
color: rgba(28,26,23,0.86);
max-width: 32rem;
}
.cta-meta {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-muted);
}
.cta-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.btn {
border-radius: 999px;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, #2b2112, #594327);
color: #f8f3e8;
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.btn-primary span.icon {
width: 18px;
height: 18px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 20%, #fdf4d7 0, #f2c879 46%, #c79a4a 100%);
box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 4px 10px rgba(0,0,0,0.5);
}
.btn-secondary {
background: rgba(245,242,234,0.9);
color: #5a5343;
border: 1px solid rgba(201,169,97,0.7);
box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.cta-media {
flex: 0 0 42%;
min-width: 0;
border-radius: 18px;
overflow: hidden;
position: relative;
background:
radial-gradient(circle at top, #fff8e7 0, #eedcc2 38%, #d5c2a5 100%);
box-shadow: var(--shadow-subtle);
}
/* Pattern & vignette compositions */
/* Slide 2: Bedroom – Sprigged Chintz */
.pattern-chintz {
position: absolute;
inset: 0;
background-color: #faf4ec;
background-image:
radial-gradient(circle at 0 0, transparent 0, transparent 13px, rgba(200,180,150,0.15) 14px),
radial-gradient(circle at 100% 0, transparent 0, transparent 13px, rgba(200,180,150,0.15) 14px),
radial-gradient(circle at 0 100%, transparent 0, transparent 13px, rgba(200,180,150,0.15) 14px),
radial-gradient(circle at 100% 100%, transparent 0, transparent 13px, rgba(200,180,150,0.15) 14px);
background-size: 72px 72px;
}
.pattern-chintz svg {
position: absolute;
inset: 12px;
width: calc(100% - 24px);
height: calc(100% - 24px);
}
.room-chintz {
position: absolute;
inset: 16% 8% 6% 40%;
border-radius: 16px;
background:
linear-gradient(to top, rgba(23,23,28,0.2) 0, transparent 40%),
linear-gradient(135deg, #f9f1e5, #ead7c2);
box-shadow: 0 18px 32px rgba(0,0,0,0.28);
overflow: hidden;
}
.chintz-wall {
position: absolute;
inset: 10% 8% 34% 8%;
background:
linear-gradient(135deg, rgba(255,255,255,0.9), rgba(244,229,210,0.9)),
repeating-linear-gradient(135deg,
rgba(201,169,97,0.22) 0,
rgba(201,169,97,0.22) 1px,
transparent 1px,
transparent 12px);
border-radius: 14px 14px 4px 4px;
}
.chintz-bed {
position: absolute;
inset: 48% 10% 10% 14%;
border-radius: 12px;
background:
linear-gradient(to top, #d3c1a7 0, #f0e1cf 55%),
linear-gradient(to right, rgba(23,23,28,0.15), rgba(255,255,255,0.25));
box-shadow: 0 12px 22px rgba(0,0,0,0.38);
}
.chintz-headboard {
position: absolute;
left: 6%;
right: 6%;
top: -18%;
height: 40%;
border-radius: 40px 40px 22px 22px;
background:
repeating-radial-gradient(circle at 0 0,
rgba(125,106,69,0.35) 0,
rgba(125,106,69,0.35) 1px,
transparent 1px,
transparent 9px),
radial-gradient(circle at 20% 0, rgba(255,255,255,0.7), transparent 60%),
#f3e5d2;
}
.chintz-pillow {
position: absolute;
bottom: 40%;
width: 24%;
height: 26%;
border-radius: 10px;
background:
radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9), transparent 70%),
repeating-linear-gradient(45deg,
rgba(125,106,69,0.45) 0,
rgba(125,106,69,0.45) 1px,
transparent 1px,
transparent 7px);
box-shadow: 0 6px 10px rgba(0,0,0,0.25);
}
.chintz-pillow:nth-child(1) {
left: 16%;
}
.chintz-pillow:nth-child(2) {
left: 40%;
transform: scale(1.06);
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9), transparent 70%),
repeating-linear-gradient(-45deg,
rgba(201,169,97,0.7) 0,
rgba(201,169,97,0.7) 1px,
transparent 1px,
transparent 7px);
}
.chintz-pillow:nth-child(3) {
left: 64%;
}
.chintz-throw {
position: absolute;
left: 0;
right: 38%;
bottom: 4%;
height: 32%;
border-radius: 0 40px 18px 18px;
background:
repeating-linear-gradient(135deg,
rgba(88,66,50,0.98) 0,
rgba(88,66,50,0.98) 4px,
rgba(212,188,151,1) 4px,
rgba(212,188,151,1) 8px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.chintz-lamp {
position: absolute;
right: 12%;
bottom: 26%;
width: 12%;
height: 34%;
}
.chintz-lamp::before {
content: "";
position: absolute;
inset: 0;
border-radius: 40% 40% 10% 10%;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.75), transparent 65%),
linear-gradient(to bottom, #f6ead7, #d2b899);
box-shadow: 0 8px 16px rgba(0,0,0,0.35);
}
.chintz-lamp::after {
content: "";
position: absolute;
left: 42%;
bottom: -32%;
width: 18%;
height: 32%;
background: linear-gradient(to bottom, #826747, #4d3622);
border-radius: 99px;
box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}
/* Slide 3: Library – Ticking Stripe */
.pattern-ticking {
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
90deg,
#f3efe8 0,
#f3efe8 14px,
#d1c3af 14px,
#d1c3af 18px,
#f3efe8 18px,
#f3efe8 30px
);
}
.pattern-ticking::after {
content: "";
position: absolute;
inset: 12px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.9);
box-shadow: inset 0 0 0 1px rgba(133,118,88,0.18);
}
.room-library {
position: absolute;
inset: 13% 8% 10% 38%;
border-radius: 18px;
background:
linear-gradient(to right, rgba(20,14,8,0.85), rgba(62,49,34,0.96));
box-shadow: 0 20px 38px rgba(0,0,0,0.45);
overflow: hidden;
}
.library-shelves {
position: absolute;
inset: 12% 8% 34% 10%;
background:
linear-gradient(to bottom, rgba(90,72,50,0.8), rgba(56,40,25,0.95));
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.4);
}
.library-shelf-row {
position: absolute;
left: 6%;
right: 6%;
height: 14%;
border-radius: 6px;
background:
repeating-linear-gradient(90deg,
#b9986b 0,
#b9986b 3px,
#f6e5cd 3px,
#f6e5cd 7px,
#936f44 7px,
#936f44 10px,
#f3dec0 10px,
#f3dec0 14px);
box-shadow: 0 3px 6px rgba(0,0,0,0.38);
}
.library-shelf-row:nth-child(1) { top: 10%; }
.library-shelf-row:nth-child(2) { top: 32%; filter: brightness(0.96); }
.library-shelf-row:nth-child(3) { top: 54%; filter: brightness(0.9); }
.library-chair {
position: absolute;
inset: 54% 42% 8% 12%;
border-radius: 24px 24px 18px 18px;
background:
radial-gradient(circle at 0 0, rgba(255,255,255,0.4), transparent 60%),
repeating-linear-gradient(135deg,
#83604a 0,
#83604a 5px,
#603b27 5px,
#603b27 12px);
box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.library-chair::before {
content: "";
position: absolute;
left: 16%;
right: 16%;
top: -26%;
height: 40%;
border-radius: 26px 26px 8px 8px;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.58), transparent 70%),
linear-gradient(to bottom, #f7f0e5, #d3bba0);
box-shadow: 0 10px 18px rgba(0,0,0,0.45);
}
.library-side-table {
position: absolute;
right: 12%;
bottom: 14%;
width: 18%;
height: 32%;
border-radius: 50% 50% 10px 10px;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.7), transparent 70%),
linear-gradient(to bottom, #d8c1a5, #a48358);
box-shadow: 0 14px 24px rgba(0,0,0,0.6);
}
.library-lamp {
position: absolute;
right: 14%;
top: 18%;
width: 18%;
height: 32%;
}
.library-lamp::before {
content: "";
position: absolute;
inset: 0;
border-radius: 40% 40% 14% 14%;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.9), transparent 70%),
linear-gradient(to bottom, #fff6e0, #f1dcbb);
box-shadow: 0 8px 14px rgba(0,0,0,0.45);
}
/* Slide 4: Dining – Trellis */
.pattern-trellis {
position: absolute;
inset: 0;
background-color: #f6f0e6;
background-image:
linear-gradient(135deg, rgba(120,138,112,0.7) 1px, transparent 1px),
linear-gradient(225deg, rgba(120,138,112,0.7) 1px, transparent 1px);
background-size: 26px 26px;
opacity: 0.96;
}
.pattern-trellis::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.9);
box-shadow: inset 0 0 0 1px rgba(106,120,102,0.26);
}
.room-dining {
position: absolute;
inset: 14% 10% 10% 38%;
border-radius: 20px;
background:
radial-gradient(circle at 0 0, rgba(255,255,255,0.5), transparent 70%),
linear-gradient(to bottom, #fdf9f0, #eadbc8);
box-shadow: 0 20px 40px rgba(0,0,0,0.4);
overflow: hidden;
}
.dining-wall {
position: absolute;
inset: 8% 10% 40% 10%;
border-radius: 14px 14px 6px 6px;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.9), transparent 70%),
repeating-linear-gradient(120deg,
rgba(120,138,112,0.65) 0,
rgba(120,138,112,0.65) 2px,
transparent 2px,
transparent 12px);
}
.dining-table {
position: absolute;
left: 10%;
right: 10%;
bottom: 18%;
height: 14%;
border-radius: 999px;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.7), transparent 60%),
linear-gradient(to right, #c2aa8a, #9b7c5a);
box-shadow: 0 14px 28px rgba(0,0,0,0.4);
}
.dining-chair {
position: absolute;
bottom: 18%;
width: 18%;
height: 24%;
border-radius: 20px 20px 14px 14px;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.9), transparent 70%),
linear-gradient(to bottom, #f5f2ea, #dcd2be);
box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}
.dining-chair.left {
left: 12%;
}
.dining-chair.right {
right: 12%;
}
.dining-centerpiece {
position: absolute;
left: 40%;
right: 40%;
bottom: 32%;
height: 24%;
border-radius: 999px 999px 40% 40%;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.95), transparent 70%),
linear-gradient(to bottom, #ffffff, #e7decf);
box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.dining-centerpiece::before {
content: "";
position: absolute;
left: 28%;
right: 28%;
top: -60%;
height: 80%;
border-radius: 999px 999px 40px 40px;
background:
radial-gradient(circle at 50% 0, rgba(255,255,255,0.9), transparent 70%),
linear-gradient(to bottom, #f2e7d7, #cfbda3);
box-shadow: 0 14px 30px rgba(0,0,0,0.4);
}
/* CTA vignette */
.cta-vignette-wall {
position: absolute;
inset: 10% 12% 40% 12%;
border-radius: 16px 16px 8px 8px;
background:
radial-gradient(circle at 0 0, rgba(255,255,255,0.7), transparent 60%),
repeating-linear-gradient(135deg,
rgba(201,169,97,0.4) 0,
rgba(201,169,97,0.4) 2px,
transparent 2px,
transparent 10px);
}
.cta-vignette-panel {
position: absolute;
inset: 20% 28% 42% 20%;
border-radius: 14px;
background:
linear-gradient(to bottom, rgba(28,26,23,0.86), rgba(28,26,23,1));
box-shadow: 0 10px 20px rgba(0,0,0,0.7);
}
.cta-vignette-panel::before {
content: "";
position: absolute;
inset: 10%;
border-radius: 10px;
border: 1px solid rgba(201,169,97,0.9);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
.cta-vignette-panel::after {
content: "";
position: absolute;
inset: 26% 16% 26% 16%;
border-radius: 10px;
background:
radial-gradient(circle at 30% 0, rgba(255,255,255,0.6), transparent 70%),
linear-gradient(145deg, #d3b892, #9b7c54);
}
.cta-vignette-sofa {
position: absolute;
inset: 54% 14% 12% 16%;
border-radius: 22px 22px 18px 18px;
background:
radial-gradient(circle at 0 0, rgba(255,255,255,0.6), transparent 70%),
linear-gradient(to right, #f4ede1, #d4c5ac);
box-shadow: 0 18px 28px rgba(0,0,0,0.5);
}
.cta-vignette-cushion {
position: absolute;
bottom: 36%;
width: 18%;
height: 32%;
border-radius: 12px;
background:
repeating-linear-gradient(135deg,
#7b6342 0,
#7b6342 3px,
#f5ecd9 3px,
#f5ecd9 7px);
box-shadow: 0 10px 22px rgba(0,0,0,0.4);
}
.cta-vignette-cushion.left { left: 18%; }
.cta-vignette-cushion.right { right: 18%; }
/* Pagination & controls */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 18px;
padding-inline: 4px;
gap: 16px;
}
.dots {
display: flex;
gap: 6px;
justify-content: center;
flex: 1;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid rgba(28,26,23,0.22);
background: rgba(245,242,234,0.8);
cursor: pointer;
transition: all 180ms cubic-bezier(.22,1,.36,1);
}
.dot.active {
width: 22px;
border-radius: 999px;
background: linear-gradient(135deg, var(--color-accent), var(--color-accent2));
border-color: rgba(28,26,23,0.8);
box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}
.nav-btn {
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(28,26,23,0.15);
background: rgba(248,243,234,0.9);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}
.nav-btn svg {
width: 15px;
height: 15px;
fill: none;
stroke: rgba(28,26,23,0.7);
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.nav-btn:hover {
background: linear-gradient(135deg, #fdf7ee, #f0e2cf);
box-shadow: 0 10px 20px rgba(0,0,0,0.18);
transform: translateY(-1px);
border-color: rgba(201,169,97,0.8);
}
.nav-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
text-align: center;
flex: 1;
}
@media (max-width: 900px) {
.slide {
flex-direction: column;
padding: 24px 20px 26px;
gap: 18px;
}
.slide::before {
top: 14px;
right: 20px;
}
.card-media, .cta-media {
flex-basis: 52%;
}
.card-copy {
padding-inline-end: 0;
}
.slide-cta {
padding-inline: 22px;
}
}
@media (max-width: 640px) {
header {
flex-direction: column;
align-items: flex-start;
gap: 4px;
border-radius: 20px;
}
.wordmark {
font-size: 16px;
}
.slide-cover {
padding-inline: 24px;
}
.slide {
padding: 22px 16px 24px;
}
.card-media, .cta-media {
order: -1;
height: 46%;
}
.room-chintz,
.room-library,
.room-dining {
inset: 18% 12% 8% 12%;
}
.slide::before {
font-size: 10px;
letter-spacing: 0.16em;
}
}
</style>
</head>
<body>
<div class="shell">
<header>
<div class="wordmark">DESIGNER WALLCOVERINGS</div>
<div class="eyebrow">Grandmillennial Capsule · AW24</div>
</header>
<div class="frame">
<div class="carousel-shell">
<div class="carousel" id="carousel">
<div class="track" id="track">
<!-- Slide 1: Cover -->
<section class="slide slide-cover" data-index="0" data-label="LOOKBOOK 01">
<div class="cover-inner">
<div class="cover-kicker">Instagram carousel · Style study</div>
<h1 class="cover-title">Grandmillennial Romance</h1>
<p class="cover-sub">
A four–frame love letter to tailored nostalgia: sprigged chintz, ticking stripes,
and garden trellis walls reimagined for the quietly decadent home.
</p>
<div class="cover-tag">
<span class="dot"></span>
Swipe to pair patterns with rooms
</div>
</div>
</section>
<!-- Slide 2: Sprigged Chintz Bedroom -->
<section class="slide" data-index="1" data-label="SPRIGGED CHINTZ">
<div class="card-media">
<div class="pattern-chintz">
<svg viewBox="0 0 100 100" aria-hidden="true">
<defs>
<radialGradient id="chintz-flower" cx="50%" cy="50%" r="50%">
<stop offset="0" stop-color="#ffe9ec"/>
<stop offset="0.4" stop-color="#f7c1c9"/>
<stop offset="1" stop-color="#c78288"/>
</radialGradient>
<radialGradient id="chintz-leaf" cx="50%" cy="0%" r="70%">
<stop offset="0" stop-color="#e5f0dd"/>
<stop offset="1" stop-color="#8ea57b"/>
</radialGradient>
</defs>
<g opacity="0.9">
<circle cx="30" cy="30" r="9" fill="url(#chintz-flower)"/>
<circle cx="70" cy="22" r="7.5" fill="url(#chintz-flower)"/>
<circle cx="24" cy="68" r="7" fill="url(#chintz-flower)"/>
<circle cx="72" cy="72" r="9" fill="url(#chintz-flower)"/>
<path d="M30 30 C32 40 30 52 28 62" fill="none" stroke="#7e8f6a" stroke-width="1.4" stroke-linecap="round"/>
<path d="M70 22 C69 32 68 44 66 54" fill="none" stroke="#7e8f6a" stroke-width="1.4" stroke-linecap="round"/>
<path d="M24 68 C30 76 38 82 46 88" fill="none" stroke="#7e8f6a" stroke-width="1.4" stroke-linecap="round"/>
<path d="M72 72 C64 60 56 52 50 44" fill="none" stroke="#7e8f6a" stroke-width="1.4" stroke-linecap="round"/>
<ellipse cx="26" cy="44" rx="4" ry="7" fill="url(#chintz-leaf)"/>
<ellipse cx="33" cy="47" rx="3.5" ry="6.5" fill="url(#chintz-leaf)"/>
<ellipse cx="67" cy="38" rx="4" ry="7" fill="url(#chintz-leaf)"/>
<ellipse cx="72" cy="40" rx="3.5" ry="6.5" fill="url(#chintz-leaf)"/>
<ellipse cx="34" cy="76" rx="4" ry="7" fill="url(#chintz-leaf)"/>
<ellipse cx="18" cy="54" rx="3.5" ry="6.5" fill="url(#chintz-leaf)"/>
</g>
</svg>
</div>
<div class="room-chintz">
<div class="chintz-wall"></div>
<div class="chintz-bed">
<div class="chintz-headboard"></div>
<div class="chintz-pillow"></div>
<div class="chintz-pillow"></div>
<div class="chintz-pillow"></div>
<div class="chintz-throw"></div>
<div class="chintz-lamp"></div>
</div>
</div>
</div>
<div class="card-copy">
<h2>Sprigged Chintz in a Clouded Bedroom</h2>
<p>
A halo of sprigged florals wrapped around a sculpted headboard and tailored
linens turns the bedroom into a soft–focus portrait, not a set piece.
</p>
<div class="styling-note">Styling note · Match lampshade & wall in a single chintz to feel custom, not busy.</div>
<div class="swatch-label">Pattern · Rose Sprig Chintz on Cream</div>
</div>
</section>
<!-- Slide 3: Ticking Stripe Library -->
<section class="slide" data-index="2" data-label="TICKING STRIPE">
<div class="card-media">
<div class="pattern-ticking"></div>
<div class="room-library">
<div class="library-shelves">
<div class="library-shelf-row"></div>
<div class="library-shelf-row"></div>
<div class="library-shelf-row"></div>
</div>
<div class="library-chair"></div>
<div class="library-side-table"></div>
<div class="library-lamp"></div>
</div>
</div>
<div class="card-copy">
<h2>Tobacco–Ticking Library Nook</h2>
<p>
Narrow ticking on the walls sharpens the silhouette of a club chair and brass
library lamp, making every book spine feel curated.
</p>
<div class="styling-note">Styling note · Vary stripe scale across walls, upholstery, and lampshades for depth.</div>
<div class="swatch-label">Pattern · Tobacco Ticking Stripe</div>
</div>
</section>
<!-- Slide 4: Trellis Dining Room -->
<section class="slide" data-index="3" data-label="GARDEN TRELLIS">
<div class="card-media">
<div class="pattern-trellis"></div>
<div class="room-dining">
<div class="dining-wall"></div>
<div class="dining-table"></div>
<div class="dining-chair left"></div>
<div class="dining-chair right"></div>
<div class="dining-centerpiece"></div>
</div>
</div>
<div class="card-copy">
<h2>Indoor Garden Trellis Dining</h2>
<p>
A soft green trellis climbing the walls frames a pale pedestal table and slipcovered
chairs, turning weekday dinners into tiny garden parties.
</p>
<div class="styling-note">Styling note · Keep furniture pale so the trellis reads like architecture, not print.</div>
<div class="swatch-label">Pattern · Laurel Trellis on Parchment</div>
</div>
</section>
<!-- Slide 5: CTA -->
<section class="slide slide-cta" data-index="4" data-label="BOOK A SAMPLE SET">
<div class="cta-copy">
<div class="cta-meta">Grandmillennial capsule · 3 pattern stories</div>
<h2 class="cta-title">Ready to layer nostalgia into your next project?</h2>
<p class="cta-body">
Receive a hand–taped folio of these three wallcoverings, pre–paired with trims
and paint matches, so you can present a finished story in a single meeting.
</p>
<div class="cta-actions">
<button class="btn btn-primary" type="button">
<span class="icon"></span>
Request sample folio
</button>
<button class="btn btn-secondary" type="button">
Download spec sheet
</button>
</div>
</div>
<div class="cta-media">
<div class="cta-vignette-wall"></div>
<div class="cta-vignette-panel"></div>
<div class="cta-vignette-sofa">
<div class="cta-vignette-cushion left"></div>
<div class="cta-vignette-cushion right"></div>
</div>
</div>
</section>
</div>
</div>
<div class="nav">
<button class="nav-btn" id="prevBtn" type="button" aria-label="Previous slide">
<svg viewBox="0 0 24 24">
<polyline points="14 6 8 12 14 18"/>
</svg>
</button>
<div class="nav-label" id="navLabel">01 · Cover</div>
<button class="nav-btn" id="nextBtn" type="button" aria-label="Next slide">
<svg viewBox="0 0 24 24">
<polyline points="10 6 16 12 10 18"/>
</svg>
</button>
</div>
<div class="dots" aria-label="Carousel pagination" role="tablist">
<button class="dot active" data-go="0" role="tab" aria-label="Slide 1"></button>
<button class="dot" data-go="1" role="tab" aria-label="Slide 2"></button>
<button class="dot" data-go="2" role="tab" aria-label="Slide 3"></button>
<button class="dot" data-go="3" role="tab" aria-label="Slide 4"></button>
<button class="dot" data-go="4" role="tab" aria-label="Slide 5"></button>
</div>
</div>
</div>
</div>
<script>
(function() {
const track = document.getElementById('track');
const slides = Array.from(track.children);
const total = slides.length;
const dots = Array.from(document.querySelectorAll('.dot'));
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const navLabel = document.getElementById('navLabel');
let index = 0;
const labels = [
'01 · Cover',
'02 · Sprigged chintz bedroom',
'03 · Ticking stripe library',
'04 · Trellis dining room',
'05 · Sample set CTA'
];
function goTo(i) {
index = (i + total) % total;
const offset = -index * 100;
track.style.transform = 'translateX(' + offset + '%)';
dots.forEach((d, di) => {
d.classList.toggle('active', di === index);
});
navLabel.textContent = labels[index] || '';
}
prevBtn.addEventListener('click', () => goTo(index - 1));
nextBtn.addEventListener('click', () => goTo(index + 1));
dots.forEach(dot => {
dot.addEventListener('click', () => {
const target = parseInt(dot.getAttribute('data-go'), 10) || 0;
goTo(target);
});
});
let startX = 0;
let currentX = 0;
let isTouching = false;
function onTouchStart(e) {
isTouching = true;
startX = e.touches ? e.touches[0].clientX : e.clientX;
currentX = startX;
}
function onTouchMove(e) {
if (!isTouching) return;
currentX = e.touches ? e.touches[0].clientX : e.clientX;
}
function onTouchEnd() {
if (!isTouching) return;
const dx = currentX - startX;
const threshold = 40;
if (dx > threshold) {
goTo(index - 1);
} else if (dx < -threshold) {
goTo(index + 1);
}
isTouching = false;
}
const carousel = document.getElementById('carousel');
carousel.addEventListener('touchstart', onTouchStart, {passive: true});
carousel.addEventListener('touchmove', onTouchMove, {passive: true});
carousel.addEventListener('touchend', onTouchEnd);
carousel.addEventListener('mousedown', onTouchStart);
window.addEventListener('mouseup', onTouchEnd);
goTo(0);
})();
</script>
</body>
</html>