cinema landing

CINEMATIC LANDING — AETHER

Accent: Amber (#FFBF00) · Language: English · Sections: Hero, Features, Footer

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AETHER | The Art of Precision</title>
    <style>
        :root {
            --bg: #050508;
            --bg-alt: #0a0a0f;
            --accent: #FFBF00;
            --accent-glow: rgba(255, 191, 0, 0.2);
            --ink: #ffffff;
            --muted: #88888b;
            --font-display: "Georgia", serif;
            --font-body: system-ui, -apple-system, sans-serif;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            background: var(--bg); 
            color: var(--ink); 
            font-family: var(--font-body); 
            overflow-x: hidden; 
            line-height: 1.6;
        }

        .grain {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC42NSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC4wNSIvPjwvc3ZnPg==');
            pointer-events: none; z-index: 99;
        }

        .hero {
            height: 100vh; min-height: 700px;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            text-align: center; position: relative;
            background: radial-gradient(circle at 50% 50%, #1a1a25 0%, var(--bg) 70%);
        }

        .vignette {
            position: absolute; inset: 0;
            background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.8) 100%);
            pointer-events: none;
        }

        h1 {
            font-family: var(--font-display);
            font-size: clamp(3rem, 8vw, 6rem);
            letter-spacing: -0.02em;
            text-transform: uppercase;
            margin-bottom: 1rem;
            position: relative;
        }

        .tagline {
            font-size: clamp(1rem, 2vw, 1.25rem);
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 0.4em;
            margin-bottom: 2rem;
            opacity: 0.8;
        }

        .cta {
            padding: 1rem 2.5rem;
            background: transparent;
            border: 1px solid var(--accent);
            color: var(--accent);
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            font-size: 0.8rem;
            transition: all 0.4s ease;
            box-shadow: 0 0 15px var(--accent-glow);
        }

        .cta:hover {
            background: var(--accent);
            color: var(--bg);
            box-shadow: 0 0 30px var(--accent);
        }

        .features {
            padding: 10rem 2rem;
            max-width: 1200px; margin: 0 auto;
            display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 4rem;
        }

        .feature-card {
            border-left: 1px solid #222;
            padding-left: 2rem;
        }

        .feature-label {
            color: var(--accent);
            font-size: 0.7rem;
            letter-spacing: 0.3em;
            margin-bottom: 1rem;
            display: block;
        }

        .reveal { opacity: 0; transform: translateY(30px); transition: 1s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }
    </style>
</head>
<body>
    <div class="grain"></div>
    <section class="hero">
        <div class="vignette"></div>
        <span class="tagline reveal">The Art of Precision</span>
        <h1 class="reveal">AETHER</h1>
        <a href="#order" class="cta reveal">Acquire</a>
    </section>

    <section class="features">
        <div class="feature-card reveal">
            <span class="feature-label">ACT I: MATERIAL</span>
            <h3>Grade-5 Titanium</h3>
            <p>Aerospace-grade housing milled from a single block for unparalleled acoustic density.</p>
        </div>
        <div class="feature-card reveal">
            <span class="feature-label">ACT II: ACOUSTICS</span>
            <h3>Gasket Resonance</h3>
            <p>Poron isolation dampening tuned to eliminate high-frequency ping and deliver a deep thole.</p>
        </div>
        <div class="feature-card reveal">
            <span class="feature-label">ACT III: FINISH</span>
            <h3>Amber Glow</h3>
            <p>Signature backlighting that cuts through the dark with a warm, cinematic radiance.</p>
        </div>
    </section>

    <script>
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if(entry.isIntersecting) entry.target.classList.add('active');
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
    </script>
</body>
</html>

Notes

• Built a high-fidelity hero section with a radial spotlight and grain overlay.
• Included a 3-column feature grid with cinematic "Act" labels and scroll-reveal transitions.
• Next steps:

1. Open the file in a Chrome or Safari window to check the radial glow.
2. Replace the text content in the feature cards with your specific specs.
3. Link the CTA button to your checkout page.