`data/artifacts/15bc10e7ee25/kimi.html`

689 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grandmillennial Lookbook — Designer Wallcoverings</title>
<style>
:root{
  /* Color Tokens - Restrained Luxury with Cream Ground */
  --ink:#1c1a17;
  --cream:#f5f2ea;
  --warm-white:#faf8f3;
  --clay:#c4a77d;
  --rose:#b88a8a;
  --sage:#8a9a7b;
  --navy:#2e3a48;
  --gold:#c9a961;
  --stone:#8a8578;
  
  /* Typography */
  --font-display:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
  --font-body:Georgia,'Times New Roman',serif;
  --font-label:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  
  /* Scale */
  --text-caption:12px;
  --text-body:16px;
  --text-lead:21px;
  --text-h3:28px;
  --text-h2:38px;
  --text-h1:50px;
  --text-display:42px;
  
  /* Spacing */
  --space-xs:8px;
  --space-sm:16px;
  --space-md:24px;
  --space-lg:40px;
  --space-xl:64px;
  
  /* Motion */
  --ease-luxe:cubic-bezier(0.22,1,0.36,1);
  --dur:0.7s;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  height:100%;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.6;
  overflow:hidden;
}

/* Header - Fixed at top */
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:var(--cream);
  padding:var(--space-sm) var(--space-md);
  border-bottom:1px solid rgba(28,26,23,0.08);
}

header h1{
  font-family:var(--font-display);
  font-size:var(--text-lead);
  font-weight:400;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--ink);
  text-align:center;
}

/* Carousel Container */
.carousel{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  overflow:hidden;
}

/* Slides Track */
.slides-track{
  display:flex;
  width:500%;
  height:100%;
  transition:transform var(--dur) var(--ease-luxe);
}

/* Individual Slide */
.slide{
  width:20%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-lg);
  padding-top:80px;
}

/* Card Container */
.card{
  width:100%;
  max-width:420px;
  background:var(--warm-white);
  border-radius:4px;
  box-shadow:0 8px 32px rgba(28,26,23,0.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  animation:fadeUp var(--dur) var(--ease-luxe) both;
}

/* Image Container for Patterns/Vignettes */
.card-visual{
  width:100%;
  aspect-ratio:4/5;
  position:relative;
  overflow:hidden;
  background:var(--cream);
}

/* Text Content - Flex Column Layout */
.card-content{
  padding:var(--space-md);
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  flex-shrink:0;
}

.card-content h2{
  font-family:var(--font-display);
  font-size:var(--text-h3);
  line-height:1.2;
  color:var(--ink);
  font-weight:400;
}

.card-content p{
  font-size:var(--text-body);
  color:var(--stone);
  line-height:1.5;
  font-style:italic;
}

/* Label Style */
.label{
  font-family:var(--font-label);
  font-size:var(--text-caption);
  text-transform:uppercase;
  letter-spacing:0.15em;
  color:var(--stone);
  margin-bottom:var(--space-xs);
}

/* Pattern Swatches */
.pattern-swatch{
  position:absolute;
  top:var(--space-sm);
  left:var(--space-sm);
  width:80px;
  height:80px;
  border-radius:50%;
  border:3px solid var(--warm-white);
  box-shadow:0 4px 12px rgba(28,26,23,0.15);
  z-index:10;
}

/* Grandmillennial Patterns */

/* Chintz Floral - SVG Pattern */
.pattern-chintz{
  background:var(--rose);
}
.pattern-chintz svg{
  width:100%;
  height:100%;
  opacity:0.9;
}

/* Toile - SVG Pattern */
.pattern-toile{
  background:var(--navy);
}
.pattern-toile svg{
  width:100%;
  height:100%;
  opacity:0.95;
}

/* Gingham - CSS Pattern */
.pattern-gingham{
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 10px,
      var(--clay) 10px,
      var(--clay) 20px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 10px,
      var(--clay) 10px,
      var(--clay) 20px
    );
  background-color:var(--cream);
  background-blend-mode:multiply;
  opacity:0.7;
}

/* Room Vignettes - CSS Art */

/* Living Room Vignette */
.room-living{
  width:100%;
  height:100%;
  background:
    /* Art frame */
    linear-gradient(to bottom, rgba(28,26,23,0.1) 0%, transparent 100%) 50% 20% / 120px 80px no-repeat,
    /* Wallpaper */
    radial-gradient(circle at 30% 40%, var(--rose) 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, var(--rose) 2px, transparent 2px),
    radial-gradient(circle at 50% 80%, var(--rose) 2px, transparent 2px),
    /* Wall */
    linear-gradient(to bottom, var(--cream) 0%, #ebe6dc 100%);
  background-size: 
    120px 80px,
    60px 60px,
    60px 60px,
    60px 60px,
    100% 100%;
  position:relative;
}

.room-living::before{
  content:'';
  position:absolute;
  bottom:0;
  left:20%;
  right:20%;
  height:45%;
  background:
    /* Sofa back */
    linear-gradient(to bottom, var(--navy) 0%, #3d4d5c 100%);
  border-radius:8px 8px 0 0;
  box-shadow:inset 0 -20px 40px rgba(0,0,0,0.2);
}

.room-living::after{
  content:'';
  position:absolute;
  bottom:10%;
  left:25%;
  right:25%;
  height:25%;
  background:var(--clay);
  border-radius:4px;
  opacity:0.9;
}

/* Bedroom Vignette */
.room-bedroom{
  width:100%;
  height:100%;
  background:
    /* Headboard */
    linear-gradient(to bottom, var(--navy) 0%, #2e3a48 100%) 50% 35% / 200px 120px no-repeat,
    /* Wall pattern */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 40px,
      rgba(200,169,97,0.15) 40px,
      rgba(200,169,97,0.15) 42px
    ),
    /* Wall base */
    linear-gradient(to bottom, #f0ece3 0%, var(--cream) 100%);
  position:relative;
}

.room-bedroom::before{
  content:'';
  position:absolute;
  bottom:0;
  left:15%;
  right:15%;
  height:50%;
  background:
    /* Bedding */
    linear-gradient(135deg, var(--warm-white) 0%, #f0ece3 100%);
  border-radius:8px 8px 0 0;
}

.room-bedroom::after{
  content:'';
  position:absolute;
  bottom:30%;
  left:20%;
  right:20%;
  height:20%;
  background:var(--rose);
  opacity:0.6;
  filter:blur(20px);
}

/* Dining Room Vignette */
.room-dining{
  width:100%;
  height:100%;
  background:
    /* Chandelier suggestion */
    radial-gradient(circle at 50% 15%, var(--gold) 8px, transparent 8px),
    radial-gradient(circle at 50% 15%, rgba(201,169,97,0.3) 0%, transparent 40px),
    /* Wall molding */
    linear-gradient(to right, transparent 0%, rgba(28,26,23,0.05) 50%, transparent 100%) 0 30% / 100% 2px no-repeat,
    linear-gradient(to right, transparent 0%, rgba(28,26,23,0.05) 50%, transparent 100%) 0 70% / 100% 2px no-repeat,
    /* Wall */
    linear-gradient(to bottom, var(--cream) 0%, #ebe6dc 100%);
  position:relative;
}

.room-dining::before{
  content:'';
  position:absolute;
  bottom:15%;
  left:10%;
  right:10%;
  height:8px;
  background:var(--clay);
  border-radius:4px;
}

.room-dining::after{
  content:'';
  position:absolute;
  bottom:15%;
  left:30%;
  right:30%;
  height:35%;
  background:
    /* Chair backs */
    linear-gradient(to bottom, var(--sage) 0%, #7a8a6b 100%) 20% 0 / 40px 100% no-repeat,
    linear-gradient(to bottom, var(--sage) 0%, #7a8a6b 100%) 80% 0 / 40px 100% no-repeat;
  background-color:var(--warm-white);
  border-radius:4px 4px 0 0;
}

/* Cover Slide Styles */
.cover-card{
  text-align:center;
  padding:var(--space-xl) var(--space-lg);
}

.cover-card h2{
  font-family:var(--font-display);
  font-size:var(--text-display);
  line-height:1.1;
  color:var(--ink);
  margin-bottom:var(--space-sm);
  letter-spacing:-0.02em;
}

.cover-card .subtitle{
  font-size:var(--text-lead);
  color:var(--stone);
  font-style:italic;
  margin-bottom:var(--space-md);
}

.cover-year{
  font-family:var(--font-label);
  font-size:var(--text-caption);
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--clay);
}

/* CTA Slide Styles */
.cta-card{
  text-align:center;
  padding:var(--space-xl) var(--space-lg);
}

.cta-card h2{
  font-family:var(--font-display);
  font-size:var(--text-h2);
  color:var(--ink);
  margin-bottom:var(--space-sm);
}

.cta-card p{
  color:var(--stone);
  margin-bottom:var(--space-lg);
  font-size:var(--text-lead);
}

.cta-button{
  display:inline-block;
  padding:var(--space-sm) var(--space-lg);
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-label);
  font-size:var(--text-caption);
  letter-spacing:0.15em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:2px;
  transition:background 0.3s var(--ease-luxe);
}

.cta-button:hover{
  background:var(--navy);
}

/* Navigation Dots */
.dots{
  position:fixed;
  bottom:var(--space-lg);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:var(--space-sm);
  z-index:100;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(28,26,23,0.2);
  cursor:pointer;
  transition:all 0.3s var(--ease-luxe);
  border:none;
}

.dot.active{
  background:var(--ink);
  transform:scale(1.2);
}

/* Touch/Swipe Areas */
.swipe-area{
  position:fixed;
  top:80px;
  bottom:100px;
  width:20%;
  z-index:50;
  cursor:pointer;
}

.swipe-left{left:0;}
.swipe-right{right:0;}

/* Animations */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}

.slide.active .card{
  animation:fadeUp var(--dur) var(--ease-luxe) both;
}

/* Decorative Elements */
.ornament{
  width:60px;
  height:2px;
  background:var(--clay);
  margin:var(--space-md) auto;
}

/* Responsive */
@media(max-width:480px){
  :root{
    --text-display:32px;
    --text-h2:28px;
    --text-h3:24px;
  }
  
  .slide{
    padding:var(--space-md);
    padding-top:80px;
  }
}
</style>
</head>
<body>

<header>
  <h1>Designer Wallcoverings</h1>
</header>

<div class="carousel">
  <div class="slides-track" id="track">
    
    <!-- Slide 1: Cover -->
    <div class="slide active">
      <div class="card cover-card">
        <div class="cover-year">Collection 2024</div>
        <h2>Grandmillennial</h2>
        <div class="ornament"></div>
        <p class="subtitle">Where inherited elegance meets collected comfort</p>
      </div>
    </div>
    
    <!-- Slide 2: Chintz -->
    <div class="slide">
      <div class="card">
        <div class="card-visual">
          <div class="pattern-swatch pattern-chintz">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <pattern id="chintz" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
                  <circle cx="25" cy="25" r="15" fill="none" stroke="#f5f2ea" stroke-width="1.5" opacity="0.6"/>
                  <circle cx="25" cy="25" r="10" fill="none" stroke="#f5f2ea" stroke-width="1" opacity="0.4"/>
                  <circle cx="25" cy="10" r="4" fill="#f5f2ea" opacity="0.5"/>
                  <circle cx="40" cy="25" r="4" fill="#f5f2ea" opacity="0.5"/>
                  <circle cx="25" cy="40" r="4" fill="#f5f2ea" opacity="0.5"/>
                  <circle cx="10" cy="25" r="4" fill="#f5f2ea" opacity="0.5"/>
                  <path d="M25 10 Q35 25 25 40 Q15 25 25 10" fill="none" stroke="#f5f2ea" stroke-width="0.8" opacity="0.3"/>
                  <path d="M10 25 Q25 35 40 25 Q25 15 10 25" fill="none" stroke="#f5f2ea" stroke-width="0.8" opacity="0.3"/>
                </pattern>
              </defs>
              <rect width="100" height="100" fill="url(#chintz)"/>
            </svg>
          </div>
          <div class="room-living"></div>
        </div>
        <div class="card-content">
          <div class="label">Pattern 01</div>
          <h2>English Chintz</h2>
          <p>Layer cabbage rose motifs with modern silhouettes for updated romance</p>
        </div>
      </div>
    </div>
    
    <!-- Slide 3: Toile -->
    <div class="slide">
      <div class="card">
        <div class="card-visual">
          <div class="pattern-swatch pattern-toile">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <pattern id="toile" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
                  <path d="M10 50 Q20 30 30 50 T50 50" fill="none" stroke="#f5f2ea" stroke-width="1" opacity="0.5"/>
                  <path d="M30 10 Q40 30 30 50" fill="none" stroke="#f5f2ea" stroke-width="0.8" opacity="0.4"/>
                  <circle cx="50" cy="20" r="3" fill="#f5f2ea" opacity="0.4"/>
                  <path d="M50 20 L55 10 L60 20 Z" fill="#f5f2ea" opacity="0.3"/>
                  <path d="M10 30 Q20 40 30 30" fill="none" stroke="#f5f2ea" stroke-width="0.8" opacity="0.3"/>
                </pattern>
              </defs>
              <rect width="100" height="100" fill="url(#toile)"/>
            </svg>
          </div>
          <div class="room-bedroom"></div>
        </div>
        <div class="card-content">
          <div class="label">Pattern 02</div>
          <h2>Narrative Toile</h2>
          <p>Storybook scenes in deep indigo create sophisticated sanctuary walls</p>
        </div>
      </div>
    </div>
    
    <!-- Slide 4: Gingham -->
    <div class="slide">
      <div class="card">
        <div class="card-visual">
          <div class="pattern-swatch pattern-gingham"></div>
          <div class="room-dining"></div>
        </div>
        <div class="card-content">
          <div class="label">Pattern 03</div>
          <h2>Refined Gingham</h2>
          <p>Oversized checks in warm neutrals bridge country and contemporary</p>
        </div>
      </div>
    </div>
    
    <!-- Slide 5: CTA -->
    <div class="slide">
      <div class="card cta-card">
        <h2>Start Your Project</h2>
        <p>Request samples or schedule a consultation with our design team</p>
        <a href="#" class="cta-button" onclick="event.preventDefault();">Get in Touch</a>
        <div class="ornament" style="margin-top:var(--space-lg);"></div>
        <p style="font-size:var(--text-caption);color:var(--stone);">designerwallcoverings.com</p>
      </div>
    </div>
    
  </div>
</div>

<!-- Swipe Areas -->
<div class="swipe-area swipe-left" onclick="prevSlide()"></div>
<div class="swipe-area swipe-right" onclick="nextSlide()"></div>

<!-- Navigation Dots -->
<div class="dots" id="dots">
  <button class="dot active" onclick="goToSlide(0)" aria-label="Slide 1"></button>
  <button class="dot" onclick="goToSlide(1)" aria-label="Slide 2"></button>
  <button class="dot" onclick="goToSlide(2)" aria-label="Slide 3"></button>
  <button class="dot" onclick="goToSlide(3)" aria-label="Slide 4"></button>
  <button class="dot" onclick="goToSlide(4)" aria-label="Slide 5"></button>
</div>

<script>
let currentSlide = 0;
const totalSlides = 5;
const track = document.getElementById('track');
const dots = document.querySelectorAll('.dot');
const slides = document.querySelectorAll('.slide');

function updateSlide(){
  track.style.transform = `translateX(-${currentSlide * 20}%)`;
  
  dots.forEach((dot, index) => {
    dot.classList.toggle('active', index === currentSlide);
  });
  
  slides.forEach((slide, index) => {
    slide.classList.toggle('active', index === currentSlide);
  });
}

function nextSlide(){
  currentSlide = (currentSlide + 1) % totalSlides;
  updateSlide();
}

function prevSlide(){
  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
  updateSlide();
}

function goToSlide(index){
  currentSlide = index;
  updateSlide();
}

// Keyboard navigation
document.addEventListener('keydown', (e) => {
  if(e.key === 'ArrowRight') nextSlide();
  if(e.key === 'ArrowLeft') prevSlide();
});

// Touch/Swipe support
let touchStartX = 0;
let touchEndX = 0;

document.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});

document.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});

function handleSwipe(){
  const threshold = 50;
  const diff = touchStartX - touchEndX;
  
  if(Math.abs(diff) > threshold){
    if(diff > 0){
      nextSlide();
    }else{
      prevSlide();
    }
  }
}
</script>

</body>
</html>