`data/artifacts/0a809ac3ac48/qwen25-7b.html`

122 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color of the Season</title>
    <style>
        :root {
            --bg: #f7efe6;
            --surface: #fff9f1;
            --text: #3a2c22;
            --muted: #a08c7a;
            --accent: #c65f38;
            --line: 1px solid var(--text);
            --shadow: 0 8px 24px rgba(0,0,0,.12), hover 0 16px 48px rgba(0,0,0,.18);
            --ease: cubic-bezier(.22,1,.36,1);
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        header {
            font-size: 50px;
            letter-spacing: .18em;
            color: var(--text);
            margin-bottom: 32px;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 48px;
        }

        h1, p {
            font-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
        }

        p {
            font-size: 21px;
            line-height: 1.5;
            margin-bottom: 32px;
        }

        .swatches {
            display: flex;
            gap: 24px;
        }

        .swatch {
            width: 200px;
            height: 150px;
            border: var(--line);
            background-size: cover;
            background-repeat: no-repeat;
            margin-bottom: 8px;
            box-shadow: var(--shadow);
            animation: fadeUp .7s ease-in-out both, ambientGradientDrift 18s linear infinite;
        }

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

        @keyframes ambientGradientDrift {
            0% { background-position: 0 0; }
            100% { background-position: 9600px 9600px; }
        }

        .cta {
            font-size: 24px;
            letter-spacing: .15em;
            color: var(--accent);
        }
    </style>
</head>
<body>

<header>
    DESIGNER WALLCOVERINGS
</header>

<div class="container">
    <h1>This season it's all about...</h1>
    <p>Celadon</p>
    <div class="swatches">
        <div class="swatch" style="background: linear-gradient(45deg, var(--accent) 0%, rgba(var(--accent-rgb), .7) 25%, transparent 38.5%);"></div>
        <div class="swatch" style="background: repeating-linear-gradient(to right, var(--accent), var(--accent) 10px, #fff9f1 10px, #fff9f1 20px);"></div>
        <div class="swatch" style="background: radial-gradient(circle at center, var(--accent), rgba(var(--accent-rgb), .5));"></div>
    </div>
    <p>Styling Tip: Use Celadon in layers for a subtle yet sophisticated look.</p>
    <a href="#" class="cta">Explore Our Collection</a>
</div>

<script>
    const container = document.querySelector('.container');
    let intervalId;

    function startAnimation() {
        if (intervalId) return;
        intervalId = setInterval(() => {
            window.scrollTo(0, window.scrollY + 1);
            if (window.innerHeight >= container.scrollHeight) clearInterval(intervalId);
        }, 50);
    }

    startAnimation();
</script>

</body>
</html>