`data/artifacts/2b11fe341ffd/hermes3-8b.html`

156 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design Style Showdown</title>
<style>
:root {
  --bg: #0d0d0f;
  --surface: #17171c;
  --text: #f5f2ea;
  --muted: #8a8578; 
  --accent1: #c9a961;
  --accent2: #7d6a45;
  --line: 1px solid var(--text);
  --shadow: 0 8px 24px rgba(0,0,0,.12);  
  --ease: cubic-bezier(.22,1,.36,1);
}
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'EB Garamond', Georgia, serif;
  line-height: 1.6;
}
.muted { 
  color: var(--muted);
  letter-spacing: .15em;
}
h2 {
  font-family: 'Didot', 'Playfair Display', 'Bodoni MT', Didot, Garamond, serif;
  font-size: 38px;
  text-align: left;
}
h3 {
  font-size: 28px;
  font-weight: normal;
  margin-top: 24px;
}
.card {
  background-color: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  position: relative;
  transition: all .7s var(--ease);
}
.card::after {
  background: linear-gradient(45deg, var(--accent1) 50%, var(--accent2) 50%);
  content: '';
  height: 100%;
  left: 0;
  opacity: .5;
  position: absolute;
  top: 0;
  width: 100%;
}
.card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
button {
  background-color: var(--text);
  border: var(--line);
  border-radius: 9999px;
  color: var(--surface);
  font-family: 'EB Garamond', sans-serif;
  font-size: 14px;
  letter-spacing: .15em;
  padding: 12px;
  position: relative;
  transition: background-color .3s, top .3s, box-shadow .3s;
}
button::after {
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: var(--accent1);
  transition: all .5s;
  opacity: .5;
}
button:hover::after {
  opacity: 1;
}
header {
  background-color: var(--surface);
  color: var(--text);
  font-family: 'EB Garamond', serif; 
  font-size: 40px;
  font-weight: bold;
  letter-spacing: .18em;
  line-height: 1.2;
  padding: 32px;
}
header h1 {
  margin: 0;
}
section {
  background-color: var(--surface);
  color: var(--text);
  padding: 96px;
}
section h3 {
  margin-bottom: 24px;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.fadeIn {
  animation: fadeUp .7s var(--ease) both;
  opacity: 0;
}
.staggerChild {
  animation: fadeUp .7s var(--ease) forwards;
  animation-delay: calc(.2s * var(--i));
  animation-fill-mode: forwards;
  opacity: 0;
  position: absolute;
  top: var(--y);
  width: 100%;
}
</style>
</head>
<body>
<header>
  <h1>DESIGNER WALLCOVERINGS</h1>
</header>
<section class="quarter" id="q1">
  <h3>QUARTER FINAL - TOP LEFT</h3>
  <div class="card">
    <img src="#" alt="Damask CSS swatch">
    <button class="fadeIn staggerChild" style="--i:0; --y:32px">Toile</button>
    <button class="fadeIn staggerChild" style="--i:1; --y:64px">Ikat</button>  
  </div>
</section>
<section class="quarter" id="q2">
  <h3>QUARTER FINAL - TOP RIGHT</h3>
  <div class="card">
    <img src="#" alt="Chinoiserie CSS swatch">
    <button class="fadeIn staggerChild" style="--i:0; --y:32px">Art Deco</button>
    <button class="fadeIn staggerChild" style="--i:1; --y:64px">Boho</button>  
  </div>
</section>
<!-- additional sections for semi-finals, finals, and championship -->
<script>
document.addEventListener('DOMContentLoaded', function(){
  // JavaScript to handle the tournament logic goes here
});
</script>
</body>
</html>