`data/artifacts/15bc10e7ee25/hermes3-8b.html`

139 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</title>
<style>
  :root {
    --bg-luxe: #0d0d0f;
    --surface-luxe: #17171c; 
    --text-luxe: #f5f2ea;
    --muted-luxe: #8a8578;
    --accent-luxe: #c9a961;
    
    --bg-card: linear-gradient(135deg, var(--accent-luxe) 30%, var(--surface-luxe) 100%);
    --shadow-card: 0 8px 24px rgba(0,0,0,.12);
    --glow-card: 0 0 24px var(--accent-luxe) / #35;
    
    --transition-speed: .7s cubic-bezier(.22,1,.36,1);
    --interact-time: 250ms;
  }
  
  body {
    font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
    background-color: var(--bg-luxe);
    color: var(--text-luxe);
    margin: 0;
    padding-top: 64px;
  }

  header {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-card);
    position: relative;
    z-index: 1;
  }
  
  .wordmark {
    font-size: 32px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-luxe);
  }

  .card {
    display: flex;
    gap: 24px;
    padding: 48px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-card), 0 16px 48px rgba(0,0,0,.18);
    border-radius: 14px;  
    transition: all var(--transition-speed) ease-in-out;
  }

  .card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card), 0 24px 72px rgba(0,0,0,.22);
  }
  
  .pattern {
    flex-shrink: 0;  
    width: 260px;
    height: 160px;
    border-radius: 14px;
    background-color: var(--muted-luxe);
  }

  .vignette {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  h2, p {
    margin: 0;
  }

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

  .fade-in {
    animation: fadeUp var(--transition-speed) ease-in-out forwards;
    opacity: 0;
    transform: translateY(28px);
  }
  
  @keyframes driftBackground {
    0% {background-position: 0 0;}
    100% {background-position: -100% 0;} 
  }

  body, .card {
    will-change: background-image;
    animation: driftBackground 18s linear infinite forwards;
  }
</style>
<body>
<header>
  <div class="wordmark">DESIGNER WALLCOVERINGS</div>
</header>

<div class="cards">
  <div class="fade-in card">
    <div class="pattern"></div>
    <div class="vignette">
      <h2>Grandmillennial</h2>
      <p>A touch of nostalgia, a splash of vintage charm. Elegant living at its finest.</p>
    </div>
  </div>

  <div class="fade-in card stagger card delayed-interact" style="--stagger-delay: calc(1s * var(--card-index));">
    <div class="pattern"></div>
    <div class="vignette">
      <h2>Timeless Luxury</h2>
      <p>Sofisticated patterns, opulent textiles. A true statement of taste and class.</p>
    </div>
  </div>

  <div class="fade-in card stagger card delayed-interact" style="--stagger-delay: calc(1s * var(--card-index)); --stagger-delay: calc(.9s);">
    <div class="pattern"></div>
    <div class="vignette">
      <h2>Timeless Luxury</h2>
      <p>Sofisticated patterns, opulent textiles. A true statement of taste and class.</p>
    </div>
  </div>

  <div class="cta-card">
    <p>Shop the Grandmillennial Collection Now!</p>
  </div>
</div>
</body>
</html>