`data/artifacts/18bd2744dce2/hermes3-8b.html`

86 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 Color Story</title>
<style>
:root {
  --bg: #f7efe6;
  --surface: #fff9f1;
  --text: #3a2c22;
  --muted: #a08c7a;
  --accent: #e0a458 / #c65f38;
  --line: 1px solid rgba(255, 249, 241, 0.5);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body {
  margin: 0;
  padding-top: 48px;
  font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
}
h1 {
  font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
  margin: 0;
  letter-spacing: 0.18em;
  color: var(--surface);
  text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);
}
.card {
  display: flex;
  gap: 24px;
  padding: 32px;
  background-color: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 14px;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s, padding 0.15s, background-color 0.15s;
}
.card:hover {
  box-shadow: var(--shadow);
  transform: translateX(8px);
  padding: 32px 40px;
  background-color: var(--accent);
}
@media (max-width: 768px) {
  h1 {
    font-size: 24px;
  }
  .card {
    flex-direction: column;
    gap: 16px;
  }
}
</style>
<body>
<div style="display: flex; align-items: center; padding-left: 48px; background-color: var(--bg);">
<h1 style="font-size: 50px; letter-spacing: 0.18em; color: #fff9f1; text-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1);">Terracotta & Sage</h1>
</div>
<div class="card" style="--card-bg: #fff9f1;">
<h3 style="font-size: 28px; color: var(--muted); margin-bottom: 16px;">Oatmeal</h3>
<img src="oatmeal.jpg" alt="Oatmeal wallcovering swatch" style="border-radius: 14px; width: 100%; object-fit: cover;">
<p style="font-size: 21px; color: var(--text);">Perfect for a calm bedroom, pairs well with natural woods and linen textiles.</p>
</div>
<div class="card" style="--card-bg: #f7efe6;">
<h3 style="font-size: 28px; color: var(--muted); margin-bottom: 16px;">Celadon</h3>
<img src="celadon.jpg" alt="Celadon wallcovering swatch" style="border-radius: 14px; width: 100%; object-fit: cover;">
<p style="font-size: 21px; color: var(--text);">Creates a serene home office, complements minimalist decor and sleek furniture.</p>
</div>
<div class="card" style="--card-bg: #ffdde0;">
<h3 style="font-size: 28px; color: var(--muted); margin-bottom: 16px;">Terracotta</h3>
<img src="terracotta.jpg" alt="Terracotta wallcovering swatch" style="border-radius: 14px; width: 100%; object-fit: cover;">
<p style="font-size: 21px; color: var(--text);">Brings warmth to a living space, pairs with warm wood tones and earthy accents.</p>
</div>
<div class="card" style="--card-bg: #f7efe6; padding-bottom: 32px;">
<h3 style="font-size: 28px; color: var(--muted); margin-bottom: 16px;">Sage</h3>
<img src="sage.jpg" alt="Sage wallcovering swatch" style="border-radius: 14px; width: 100%; object-fit: cover;">
<p style="font-size: 21px; color: var(--text);">A calming green for a bathroom, complements neutral tiles and chrome fixtures.</p>
<div style="display: flex; justify-content: center; padding-top: 32px;">
<a href="#" style="text-decoration: none; font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 21px; color: var(--accent); background-color: #fff9f1; border-radius: 14px; padding: 16px 32px; box-shadow: var(--shadow); transition: transform 0.3s, box-shadow 0.2s, background-color 0.15s;">Shop This Story</a>
</div>
</div>
</body>
</html>