← back to Model Arena
data/artifacts/1cc50031c12f/gpt.html
1235 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Designer Wallcoverings · Instagram Carousel Lookbook</title>
<style>
:root {
/* Design Tokens */
--bg: #0d0d0f;
--surface: #17171c;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961; /* metallic gold */
--accent-soft: #7d6a45;
--line: rgba(245, 242, 234, 0.16);
--shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.65);
--shadow-subtle: 0 1px 0 rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(0, 0, 0, 0.75);
--radius-card: 18px;
--radius-pill: 999px;
--font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
--font-body: "Avenir Next", "Century Gothic", Futura, "Segoe UI", sans-serif;
--fs-caption: 12px;
--fs-label: 12px;
--fs-body: 16px;
--fs-lead: 21px;
--fs-h3: 28px;
--fs-h2: 38px;
--fs-h1: 50px;
--fs-display: 67px;
--ease-swift: cubic-bezier(.22,.9,.24,1);
--ease-hero: cubic-bezier(.22,1,.36,1);
--carousel-width: 360px;
--carousel-height: 480px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Header / Wordmark */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
backdrop-filter: blur(10px);
background: linear-gradient(to bottom, rgba(13,13,15,0.96), rgba(13,13,15,0.88));
border-bottom: 1px solid var(--line);
}
.site-header-inner {
max-width: 1120px;
margin: 0 auto;
padding: 14px 20px 10px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.wordmark {
font-family: var(--font-display);
font-size: 44px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
line-height: 1.05;
white-space: normal;
}
.header-meta {
display: flex;
align-items: center;
gap: 18px;
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
}
.header-tag {
padding: 6px 12px;
border-radius: var(--radius-pill);
border: 1px solid rgba(201,169,97,0.5);
box-shadow: var(--shadow-subtle);
}
/* Main layout */
.main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 20px 40px;
}
.carousel-shell {
max-width: 1120px;
width: 100%;
display: flex;
justify-content: center;
}
/* Carousel frame mimicking Instagram post */
.ig-frame {
width: min(100%, 420px);
border-radius: 28px;
background: radial-gradient(circle at top left, rgba(201,169,97,0.12), transparent 55%), var(--surface);
border: 1px solid rgba(245,242,234,0.06);
box-shadow: var(--shadow-soft);
padding: 14px 14px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Faux Instagram top bar inside frame */
.ig-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--fs-caption);
color: var(--muted);
}
.ig-profile {
display: flex;
align-items: center;
gap: 8px;
}
.ig-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: conic-gradient(from 210deg, var(--accent), var(--accent-soft), #333, var(--accent));
padding: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
}
.ig-avatar-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 30% 20%, #f6f0e2, #c0aa7a 55%, #4b3b24);
}
.ig-handle {
display: flex;
flex-direction: column;
gap: 2px;
}
.ig-handle-main {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 10px;
}
.ig-handle-sub {
font-size: 11px;
color: var(--muted);
}
.ig-dots {
display: flex;
gap: 2px;
}
/* Carousel Core */
.carousel {
position: relative;
width: 100%;
height: var(--carousel-height);
border-radius: 22px;
overflow: hidden;
background-color: #0b0b0d;
border: 1px solid rgba(245,242,234,0.18);
}
.carousel-track {
display: flex;
height: 100%;
transform: translateX(0);
transition: transform 480ms var(--ease-swift);
}
.slide {
flex: 0 0 100%;
height: 100%;
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--text);
}
/* Shared slide layout */
.slide-header-eyebrow {
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
margin-bottom: 6px;
}
.slide-title {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: 1.08;
letter-spacing: 0.02em;
margin: 0 0 8px;
}
.slide-subtitle {
font-size: var(--fs-body);
color: rgba(245,242,234,0.82);
max-width: 28em;
}
.slide-footer-note {
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
}
/* Cover slide (1) */
.style-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--radius-pill);
border: 1px solid rgba(201,169,97,0.6);
background: radial-gradient(circle at 0% 0%, rgba(201,169,97,0.3), transparent 55%), rgba(12,11,10,0.4);
box-shadow: var(--shadow-subtle);
margin-bottom: 12px;
}
.style-pill-swatch {
width: 16px;
height: 16px;
border-radius: 50%;
background: conic-gradient(from 180deg, var(--accent), var(--accent-soft), #33291a, var(--accent));
box-shadow: 0 0 0 1px #050506;
}
.style-pill-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
}
.cover-style-name {
font-family: var(--font-display);
font-size: var(--fs-display);
letter-spacing: 0.02em;
line-height: 0.95;
margin: 0 0 12px;
}
.cover-style-tagline {
font-size: var(--fs-lead);
color: rgba(245,242,234,0.86);
max-width: 20em;
}
.cover-footnote {
font-size: var(--fs-caption);
color: var(--muted);
max-width: 24em;
}
/* Pattern + vignette grid */
.slide-main {
display: grid;
grid-template-columns: 44% 56%;
gap: 16px;
align-items: stretch;
margin: 10px 0 14px;
}
.pattern-card,
.vignette-card {
position: relative;
border-radius: 18px;
overflow: hidden;
background-color: #050506;
border: 1px solid rgba(245,242,234,0.12);
box-shadow: var(--shadow-subtle);
}
/* Pattern label bar inside card */
.pattern-label {
position: absolute;
inset: 14px 14px auto 14px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 6px;
border-radius: var(--radius-pill);
background: linear-gradient(to right, rgba(13,13,15,0.95), rgba(13,13,15,0.2));
backdrop-filter: blur(6px);
border: 1px solid rgba(245,242,234,0.16);
}
.pattern-label-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: radial-gradient(circle at 30% 20%, #f2e8d3, var(--accent-soft));
}
.pattern-label-text {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
/* Pattern swatch geometry */
.pattern-swatch {
position: absolute;
inset: 0;
}
/* Distinct motif 1: Deco fan scallop */
.pattern-deco-fans {
background:
radial-gradient(circle at 0 120%, transparent 44%, rgba(201,169,97,0.3) 45%, transparent 48%) 0 0 / 60px 60px repeat,
radial-gradient(circle at 60px 120%, transparent 44%, rgba(201,169,97,0.18) 45%, transparent 48%) 0 0 / 60px 60px repeat,
linear-gradient(120deg, #141218, #0a0a0d);
}
/* Distinct motif 2: vertical pinstripe */
.pattern-pinstripe {
background-image:
linear-gradient(to right, rgba(201,169,97,0.3) 1px, transparent 1px),
linear-gradient(to right, rgba(201,169,97,0.1) 1px, transparent 1px),
linear-gradient(135deg, #17151d, #0b0b0e);
background-size:
16px 100%,
4px 100%,
100% 100%;
}
/* Distinct motif 3: interlocking lattice */
.pattern-lattice {
background-image:
linear-gradient(45deg, transparent 46%, rgba(201,169,97,0.34) 48%, transparent 52%),
linear-gradient(-45deg, transparent 46%, rgba(201,169,97,0.16) 48%, transparent 52%),
radial-gradient(circle at center, #17151d, #080809 70%);
background-size: 36px 36px;
}
/* Vignette scenes */
.vignette-inner {
position: absolute;
inset: 0;
padding: 16px 16px 14px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Scene ground gradient */
.vignette-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at top left, rgba(201,169,97,0.16), transparent 55%),
radial-gradient(circle at bottom right, rgba(0,0,0,0.9), #050506 70%);
}
/* Generic floor line */
.vignette-floor {
position: absolute;
left: 0;
right: 0;
bottom: 26%;
height: 1px;
background: linear-gradient(to right, rgba(245,242,234,0.02), rgba(245,242,234,0.3), rgba(245,242,234,0.02));
}
/* Scene 1: glam cocktail corner */
.scene1-wall {
position: absolute;
inset: 0 0 30% 0;
background:
linear-gradient(to bottom, rgba(15,15,20,0.1), rgba(0,0,0,0.85)),
linear-gradient(135deg, #15131b, #050407);
}
.scene1-console {
position: absolute;
left: 14%;
right: 18%;
bottom: 26%;
height: 26%;
background:
linear-gradient(to bottom, rgba(245,242,234,0.08), rgba(0,0,0,0.9)),
linear-gradient(to right, #131218, #070609);
border-radius: 14px 14px 6px 6px;
box-shadow: 0 18px 35px rgba(0,0,0,0.8);
border: 1px solid rgba(245,242,234,0.08);
}
.scene1-console::before {
content: "";
position: absolute;
inset: 12% 8% auto;
height: 2px;
background: linear-gradient(to right, rgba(245,242,234,0.3), rgba(201,169,97,0.9), rgba(245,242,234,0.3));
opacity: 0.9;
}
.scene1-lamp-base {
position: absolute;
bottom: 26%;
left: 20%;
width: 10px;
height: 26%;
background: linear-gradient(to bottom, rgba(201,169,97,0.1), rgba(201,169,97,0.8));
border-radius: 999px;
box-shadow: 0 10px 20px rgba(0,0,0,0.85);
}
.scene1-lamp-shade {
position: absolute;
bottom: calc(26% + 20%);
left: 16%;
width: 48px;
height: 32px;
background:
radial-gradient(circle at top, rgba(245,242,234,0.75), rgba(245,242,234,0.1)),
linear-gradient(to bottom, rgba(201,169,97,0.8), rgba(201,169,97,0.2));
border-radius: 40px 40px 18px 18px;
box-shadow: 0 14px 28px rgba(0,0,0,0.8);
}
.scene1-lamp-shade::after {
content: "";
position: absolute;
inset: auto 16% -4px 16%;
height: 6px;
border-radius: 999px;
background: radial-gradient(circle at center, rgba(201,169,97,0.9), rgba(201,169,97,0.1));
filter: blur(1px);
}
.scene1-chair {
position: absolute;
right: 14%;
bottom: 26%;
width: 40%;
height: 32%;
border-radius: 22px 22px 16px 16px;
background:
linear-gradient(135deg, #31211a, #8e5d3b);
box-shadow: 0 20px 40px rgba(0,0,0,0.9);
border: 1px solid rgba(245,242,234,0.05);
}
.scene1-chair::before {
content: "";
position: absolute;
inset: 16% 18% auto;
height: 40%;
border-radius: 18px;
background: radial-gradient(circle at 20% 20%, rgba(245,242,234,0.4), rgba(139,90,54,0.2));
}
.scene1-chair::after {
content: "";
position: absolute;
inset: auto 20% 10px 20%;
height: 16%;
border-radius: 14px;
background: linear-gradient(to bottom, rgba(18,11,8,0.4), rgba(6,3,2,0.9));
}
/* Scene 2: calm reading nook */
.scene2-wall {
position: absolute;
inset: 0 0 32% 0;
background:
linear-gradient(to bottom, rgba(23,23,30,0.12), rgba(0,0,0,0.9)),
linear-gradient(145deg, #151623, #050508);
}
.scene2-shelf {
position: absolute;
left: 10%;
right: 30%;
bottom: 32%;
height: 6px;
border-radius: 999px;
background: linear-gradient(to right, rgba(73,63,48,1), rgba(23,19,14,1));
box-shadow: 0 10px 25px rgba(0,0,0,0.9);
}
.scene2-books {
position: absolute;
left: 12%;
bottom: calc(32% + 6px);
width: 52%;
height: 16%;
background:
linear-gradient(to right, #b9b0a2 5%, #7c6f63 5%, #7c6f63 8%, transparent 8%),
linear-gradient(to right, #d8cfc1 15%, #9c8c78 15%, #9c8c78 19%, transparent 19%),
linear-gradient(to right, #f5f2ea 25%, #b19b80 25%, #b19b80 29%, transparent 29%),
linear-gradient(to right, #c9a961 35%, #7d6a45 35%, #7d6a45 39%, transparent 39%);
border-radius: 3px;
}
.scene2-armchair {
position: absolute;
right: 12%;
bottom: 26%;
width: 42%;
height: 36%;
border-radius: 24px 24px 18px 18px;
background:
linear-gradient(145deg, #2c2723, #746252);
box-shadow: 0 22px 42px rgba(0,0,0,0.9);
}
.scene2-armchair::before {
content: "";
position: absolute;
inset: 12% 18% auto;
height: 48%;
border-radius: 18px;
background: radial-gradient(circle at 10% 10%, rgba(245,242,234,0.5), rgba(110,95,77,0.3));
}
.scene2-side-table {
position: absolute;
left: 24%;
bottom: 26%;
width: 18%;
height: 22%;
border-radius: 16px 16px 10px 10px;
background:
linear-gradient(to bottom, rgba(201,169,97,0.6), rgba(201,169,97,0.1));
box-shadow: 0 18px 30px rgba(0,0,0,0.9);
}
.scene2-side-table::before {
content: "";
position: absolute;
inset: 10% 12% auto;
height: 2px;
border-radius: 999px;
background: linear-gradient(to right, rgba(245,242,234,0.4), rgba(201,169,97,0.9), rgba(245,242,234,0.3));
}
.scene2-glow {
position: absolute;
left: 40%;
bottom: 54%;
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(245,242,234,0.6), transparent 65%);
filter: blur(6px);
}
/* Scene 3: dining drama */
.scene3-wall {
position: absolute;
inset: 0 0 34% 0;
background:
linear-gradient(to bottom, rgba(15,15,25,0.16), rgba(0,0,0,0.9)),
linear-gradient(145deg, #191321, #050507);
}
.scene3-table {
position: absolute;
left: 18%;
right: 18%;
bottom: 32%;
height: 18%;
border-radius: 18px 18px 12px 12px;
background:
linear-gradient(to bottom, rgba(35,25,18,1), rgba(8,5,3,1));
box-shadow: 0 20px 36px rgba(0,0,0,0.95);
}
.scene3-table::before {
content: "";
position: absolute;
inset: 12% 10% auto;
height: 20%;
border-radius: 999px;
background: radial-gradient(circle at 30% 20%, rgba(245,242,234,0.3), transparent 70%);
}
.scene3-chairs {
position: absolute;
left: 12%;
right: 12%;
bottom: 26%;
height: 22%;
}
.scene3-chair-left,
.scene3-chair-right {
position: absolute;
bottom: 0;
width: 34%;
height: 100%;
border-radius: 18px 18px 12px 12px;
background: linear-gradient(145deg, #3a291c, #8f6040);
box-shadow: 0 18px 32px rgba(0,0,0,0.9);
}
.scene3-chair-left {
left: 0;
}
.scene3-chair-right {
right: 0;
}
.scene3-centerpiece {
position: absolute;
left: 50%;
bottom: calc(32% + 14%);
width: 42px;
height: 42px;
transform: translateX(-50%);
border-radius: 50%;
background:
radial-gradient(circle at center, rgba(201,169,97,0.9), rgba(201,169,97,0.2));
box-shadow: 0 10px 22px rgba(0,0,0,0.9);
}
.scene3-centerpiece::before {
content: "";
position: absolute;
inset: 18% 18%;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(245,242,234,0.8), transparent 70%);
}
.scene3-pendants {
position: absolute;
left: 22%;
right: 22%;
top: 10%;
height: 40%;
}
.scene3-pendant {
position: absolute;
width: 10px;
height: 10px;
border-radius: 999px 999px 4px 4px;
background:
radial-gradient(circle at top, rgba(245,242,234,0.9), rgba(245,242,234,0.4));
box-shadow: 0 10px 18px rgba(0,0,0,0.85);
}
.scene3-pendant::before {
content: "";
position: absolute;
width: 1px;
height: 46px;
top: -46px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to bottom, rgba(245,242,234,0.3), transparent 70%);
}
.scene3-pendant:nth-child(1) { left: 6%; top: 30%; }
.scene3-pendant:nth-child(2) { left: 50%; top: 24%; transform: translateX(-50%); }
.scene3-pendant:nth-child(3) { right: 6%; top: 32%; }
/* Slide text blocks */
.slide-text-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.slide-text-block h3 {
font-family: var(--font-display);
font-size: var(--fs-h3);
margin: 0;
letter-spacing: 0.02em;
}
.slide-text-block p {
margin: 0;
font-size: var(--fs-body);
color: rgba(245,242,234,0.84);
}
/* CTA slide */
.cta-card {
height: 100%;
border-radius: 18px;
background:
radial-gradient(circle at top left, rgba(201,169,97,0.24), transparent 60%),
radial-gradient(circle at bottom right, rgba(0,0,0,0.9), #050506 70%);
border: 1px solid rgba(245,242,234,0.18);
box-shadow: var(--shadow-subtle);
padding: 26px 24px 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cta-heading {
font-family: var(--font-display);
font-size: var(--fs-h1);
letter-spacing: 0.02em;
line-height: 1.02;
margin: 0 0 10px;
}
.cta-subcopy {
font-size: var(--fs-lead);
max-width: 26em;
color: rgba(245,242,234,0.86);
}
.cta-chip-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.cta-chip {
padding: 6px 14px;
border-radius: var(--radius-pill);
border: 1px solid rgba(245,242,234,0.16);
background: radial-gradient(circle at top left, rgba(245,242,234,0.14), transparent 60%);
font-size: var(--fs-caption);
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted);
}
.cta-chip--accent {
border-color: rgba(201,169,97,0.9);
color: var(--accent);
}
.cta-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.cta-palette {
display: flex;
align-items: center;
gap: 8px;
}
.cta-swatch {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(245,242,234,0.08);
box-shadow: 0 0 0 1px rgba(0,0,0,0.8);
}
.cta-swatch.bg {
background: #0d0d0f;
}
.cta-swatch.ivory {
background: #f5f2ea;
}
.cta-swatch.gold {
background: linear-gradient(135deg, #f4e3b0, #c9a961, #7d6a45);
}
.cta-swatch-labels {
font-size: 11px;
color: var(--muted);
}
.cta-button {
padding: 10px 18px;
border-radius: var(--radius-pill);
border: 1px solid rgba(201,169,97,0.9);
background: radial-gradient(circle at top left, rgba(201,169,97,0.45), rgba(201,169,97,0.1));
color: var(--text);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.22em;
cursor: pointer;
transition:
background-color 260ms var(--ease-swift),
box-shadow 260ms var(--ease-swift),
transform 260ms var(--ease-swift);
box-shadow: 0 14px 30px rgba(0,0,0,0.85);
}
.cta-button:hover {
transform: translateY(-1px);
box-shadow: 0 16px 38px rgba(0,0,0,0.95);
}
.cta-button:active {
transform: translateY(0);
box-shadow: 0 10px 24px rgba(0,0,0,0.85);
}
/* Carousel controls + pagination */
.carousel-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.carousel-dots {
display: flex;
justify-content: center;
gap: 6px;
}
.carousel-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background-color: rgba(245,242,234,0.24);
border: none;
padding: 0;
cursor: pointer;
transition:
background-color 220ms var(--ease-swift),
transform 220ms var(--ease-swift),
width 220ms var(--ease-swift);
}
.carousel-dot.active {
width: 18px;
background: linear-gradient(to right, var(--accent), var(--accent-soft));
transform: translateY(-1px);
}
.arrow-button {
border: none;
background: transparent;
color: var(--muted);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 4px 4px;
transition: color 220ms var(--ease-swift), transform 220ms var(--ease-swift);
}
.arrow-button svg {
width: 14px;
height: 14px;
}
.arrow-button:hover {
color: var(--accent);
transform: translateY(-1px);
}
.arrow-button:active {
transform: translateY(0);
}
/* Small "Saved" / likes meta */
.ig-footer-meta {
margin-top: 2px;
display: flex;
justify-content: space-between;
font-size: var(--fs-caption);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.16em;
}
/* Responsive tweaks */
@media (max-width: 480px) {
.wordmark {
font-size: 40px;
}
.main {
padding-top: 112px;
}
.slide {
padding: 20px 18px 18px;
}
.slide-main {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<header class="site-header">
<div class="site-header-inner">
<div class="wordmark">DESIGNER WALLCOVERINGS</div>
<div class="header-meta">
<div class="header-tag">Lookbook Carousel</div>
<div>Refined Residential · 2026</div>
</div>
</div>
</header>
<main class="main">
<div class="carousel-shell">
<div class="ig-frame" aria-label="Instagram-style carousel for a luxury wallcovering lookbook">
<div class="ig-meta">
<div class="ig-profile">
<div class="ig-avatar"><div class="ig-avatar-inner"></div></div>
<div class="ig-handle">
<span class="ig-handle-main">Designer Wallcoverings</span>
<span class="ig-handle-sub">Velvet Noir Collection</span>
</div>
</div>
<div class="ig-dots">
<svg width="18" height="4" viewBox="0 0 18 4" xmlns="http://www.w3.org/2000/svg">
<circle cx="2" cy="2" r="1.2" fill="rgba(245,242,234,0.5)"/>
<circle cx="9" cy="2" r="1.2" fill="rgba(245,242,234,0.5)"/>
<circle cx="16" cy="2" r="1.2" fill="rgba(245,242,234,0.5)"/>
</svg>
</div>
</div>
<div class="carousel" data-current="0" aria-live="polite">
<div class="carousel-track">
<!-- Slide 1: Cover -->
<section class="slide" aria-label="Cover slide introducing the style">
<div>
<div class="style-pill">
<div class="style-pill-swatch"></div>
<div class="style-pill-label">Style Edit</div>
</div>
<h1 class="cover-style-name" contenteditable="true" spellcheck="false">Velvet Noir</h1>
<p class="cover-style-tagline">A sultry, light-soaked take on deco glamour: inky walls, luminous metals, and upholstery that feels like midnight velvet.</p>
</div>
<div class="cover-footnote">
Swipe through this carousel to pair luxe wallcovering motifs with curated room vignettes, then save the final slide for your designer brief.
</div>
</section>
<!-- Slide 2: Deco cocktail corner -->
<section class="slide" aria-label="Deco cocktail corner pairing">
<div>
<div class="slide-header-eyebrow">Slide 1 · Pattern & Room Pairing</div>
<div class="slide-main">
<!-- Pattern -->
<div class="pattern-card" aria-hidden="true">
<div class="pattern-swatch pattern-deco-fans"></div>
<div class="pattern-label">
<div class="pattern-label-dot"></div>
<div class="pattern-label-text">Gilded fan relief</div>
</div>
</div>
<!-- Vignette -->
<div class="vignette-card" aria-hidden="true">
<div class="vignette-bg"></div>
<div class="vignette-floor"></div>
<div class="scene1-wall"></div>
<div class="scene1-console"></div>
<div class="scene1-lamp-base"></div>
<div class="scene1-lamp-shade"></div>
<div class="scene1-chair"></div>
<div class="vignette-inner">
<div></div>
<div class="slide-footer-note">Cocktail hour in burnished brass and velvet umber.</div>
</div>
</div>
</div>
<div class="slide-text-block">
<h3>Midnight Deco Cocktail Corner</h3>
<p>Pair a scalloped gilt wall with a single jewel-toned chair and one sculptural lamp — high contrast, minimal clutter, maximum glow.</p>
</div>
</div>
</section>
<!-- Slide 3: Quiet reading nook -->
<section class="slide" aria-label="Reading nook pairing">
<div>
<div class="slide-header-eyebrow">Slide 2 · Pattern & Room Pairing</div>
<div class="slide-main">
<!-- Pattern -->
<div class="pattern-card" aria-hidden="true">
<div class="pattern-swatch pattern-pinstripe"></div>
<div class="pattern-label">
<div class="pattern-label-dot"></div>
<div class="pattern-label-text">Ivory pinstripe</div>
</div>
</div>
<!-- Vignette -->
<div class="vignette-card" aria-hidden="true">
<div class="vignette-bg"></div>
<div class="vignette-floor"></div>
<div class="scene2-wall"></div>
<div class="scene2-shelf"></div>
<div class="scene2-books"></div>
<div class="scene2-armchair"></div>
<div class="scene2-side-table"></div>
<div class="scene2-glow"></div>
<div class="vignette-inner">
<div></div>
<div class="slide-footer-note">Soft stripes, tailored upholstery, and one quiet pool of light.</div>
</div>
</div>
</div>
<div class="slide-text-block">
<h3>Pinstriped Reading Nook</h3>
<p>Layer a near-black pinstripe with tobacco leather and warm library brass to make even a small corner feel like a private club.</p>
</div>
</div>
</section>
<!-- Slide 4: Dramatic dining room -->
<section class="slide" aria-label="Dining room pairing">
<div>
<div class="slide-header-eyebrow">Slide 3 · Pattern & Room Pairing</div>
<div class="slide-main">
<!-- Pattern -->
<div class="pattern-card" aria-hidden="true">
<div class="pattern-swatch pattern-lattice"></div>
<div class="pattern-label">
<div class="pattern-label-dot"></div>
<div class="pattern-label-text">Gilded lattice</div>
</div>
</div>
<!-- Vignette -->
<div class="vignette-card" aria-hidden="true">
<div class="vignette-bg"></div>
<div class="vignette-floor"></div>
<div class="scene3-wall"></div>
<div class="scene3-table"></div>
<div class="scene3-chairs">
<div class="scene3-chair-left"></div>
<div class="scene3-chair-right"></div>
</div>
<div class="scene3-centerpiece"></div>
<div class="scene3-pendants">
<div class="scene3-pendant"></div>
<div class="scene3-pendant"></div>
<div class="scene3-pendant"></div>
</div>
<div class="vignette-inner">
<div></div>
<div class="slide-footer-note">Let pattern crown the room; keep the table setting sculptural and spare.</div>
</div>
</div>
</div>
<div class="slide-text-block">
<h3>Velvet Noir Dining Drama</h3>
<p>Use a shimmering lattice above rich timber and low pendant lighting so faces — not tableware — become the brightest thing in the room.</p>
</div>
</div>
</section>
<!-- Slide 5: CTA -->
<section class="slide" aria-label="Call to action slide">
<div class="cta-card">
<div>
<div class="slide-header-eyebrow">Slide 4 · Save For Your Designer</div>
<h2 class="cta-heading">Bring Your Velvet Noir Room To Life</h2>
<p class="cta-subcopy">
Screenshot this slide and highlight your favourite pairing; your designer can translate it into custom wallcoverings, fabrics, and finishes.
</p>
<div class="cta-chip-row">
<div class="cta-chip cta-chip--accent">Edit style name</div>
<div class="cta-chip">Adjust palette tokens</div>
<div class="cta-chip">Swap pattern motifs</div>
</div>
</div>
<div class="cta-footer">
<div class="cta-palette" aria-label="Current palette swatches">
<div class="cta-swatch bg"></div>
<div class="cta-swatch ivory"></div>
<div class="cta-swatch gold"></div>
<div class="cta-swatch-labels">
<div>Velvet noir ground</div>
<div>Ivory ink & gilt highlight</div>
</div>
</div>
<button class="cta-button" type="button" id="ctaButton">
Request Sample Edit
</button>
</div>
</div>
</section>
</div>
</div>
<div class="carousel-controls">
<button class="arrow-button" type="button" id="prevButton">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path d="M9.8 3.2a.7.7 0 0 1 0 1L6.98 7.98H13a.7.7 0 0 1 0 1.4H6.98l2.82 3.78a.7.7 0 0 1-1.12.84l-3.8-5.08a.7.7 0 0 1 0-.84l3.8-5.08a.7.7 0 0 1 1.12.2Z" fill="currentColor"/>
</svg>
Prev
</button>
<div class="carousel-dots" aria-label="Carousel pagination" role="tablist">
<button class="carousel-dot active" data-index="0" role="tab" aria-label="Slide 1"></button>
<button class="carousel-dot" data-index="1" role="tab" aria-label="Slide 2"></button>
<button class="carousel-dot" data-index="2" role="tab" aria-label="Slide 3"></button>
<button class="carousel-dot" data-index="3" role="tab" aria-label="Slide 4"></button>
<button class="carousel-dot" data-index="4" role="tab" aria-label="Slide 5"></button>
</div>
<button class="arrow-button" type="button" id="nextButton">
Next
<svg viewBox="0 0 16 16" aria-hidden="true">
<path d="M6.2 12.8a.7.7 0 0 1 0-1L9.02 8.02H3a.7.7 0 0 1 0-1.4h6.02L6.2 2.84A.7.7 0 0 1 7.32 2l3.8 5.08a.7.7 0 0 1 0 .84l-3.8 5.08a.7.7 0 0 1-1.12-.2Z" fill="currentColor"/>
</svg>
</button>
</div>
<div class="ig-footer-meta">
<span>Curated · Velvet Noir</span>
<span>Save · Share · Repeat</span>
</div>
</div>
</div>
</main>
<script>
(function() {
const carousel = document.querySelector('.carousel');
const track = carousel.querySelector('.carousel-track');
const slides = Array.from(track.children);
const dots = Array.from(document.querySelectorAll('.carousel-dot'));
const prevButton = document.getElementById('prevButton');
const nextButton = document.getElementById('nextButton');
const ctaButton = document.getElementById('ctaButton');
let currentIndex = 0;
const total = slides.length;
function updateCarousel(targetIndex) {
if (targetIndex < 0) targetIndex = 0;
if (targetIndex >= total) targetIndex = total - 1;
currentIndex = targetIndex;
const offset = -currentIndex * 100;
track.style.transform = 'translateX(' + offset + '%)';
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
prevButton.addEventListener('click', () => {
updateCarousel(currentIndex - 1);
});
nextButton.addEventListener('click', () => {
updateCarousel(currentIndex + 1);
});
dots.forEach(dot => {
dot.addEventListener('click', () => {
const index = Number(dot.getAttribute('data-index'));
updateCarousel(index);
});
});
// CTA subtle feedback without alerts
ctaButton.addEventListener('click', () => {
ctaButton.textContent = 'Palette Request Noted';
ctaButton.style.opacity = '0.9';
setTimeout(() => {
ctaButton.textContent = 'Request Sample Edit';
ctaButton.style.opacity = '1';
}, 1800);
});
// Basic keyboard support: left/right arrows
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') {
updateCarousel(currentIndex + 1);
} else if (event.key === 'ArrowLeft') {
updateCarousel(currentIndex - 1);
}
});
})();
</script>
</body>
</html>