/** Shopify CDN: Minification failed

Line 14:0 Unexpected "<"
Line 46:4 Unexpected "<"
Line 206:8 Comments in CSS use "/* ... */" instead of "//"
Line 211:12 Comments in CSS use "/* ... */" instead of "//"
Line 216:12 Comments in CSS use "/* ... */" instead of "//"
Line 221:20 Comments in CSS use "/* ... */" instead of "//"
Line 224:20 Comments in CSS use "/* ... */" instead of "//"
Line 229:12 Comments in CSS use "/* ... */" instead of "//"
Line 238:8 Comments in CSS use "/* ... */" instead of "//"

**/
<!DOCTYPE html>
<html lang="no">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sila Sabi - Elegant klesbutikk</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');
        body {
            font-family: 'Montserrat', sans-serif;
        }
        .hero-section {
            background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://huggingface.co/spaces/Nasalgoldfish59/sila/resolve/main/images/Skjermbilde%202025-09-05%20213958.png');
            background-size: cover;
            background-position: center;
        }
        .logo {
            font-family: 'Playfair Display', serif;
            letter-spacing: 1px;
        }
        .nav-link:hover {
            border-bottom: 2px solid white;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-white text-gray-900">
    <!-- Email Popup -->
    <div id="emailPopup" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50">
        <div class="bg-white p-8 max-w-md w-full rounded-lg text-center">
            <h2 class="text-2xl font-bold mb-4">Bli med på vårt eksklusive motereise</h2>
            <p class="mb-6 text-gray-600">Meld deg på for å motå 15% rabatt på ditt første kjøp og bli den første til å se våre nye kolleksjoner</p>
            <form id="emailForm" class="space-y-4">
                <input type="email" placeholder="Din e-postadresse" class="w-full px-4 py-3 border border-gray-300 rounded" required>
                <button type="submit" class="w-full bg-black text-white px-6 py-3 font-medium hover:bg-gray-800 transition duration-300">
                    Meld meg på
                </button>
            </form>
        </div>
    </div>

    <!-- Navigation -->
    <nav class="bg-black text-white py-4 px-6 fixed w-full z-50">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="logo p-2">
                    <img src="https://huggingface.co/spaces/Nasalgoldfish59/sila/resolve/main/images/Skjermbilde%202025-09-05%20210350.png" alt="Sila Sabi Logo" class="h-12 filter grayscale brightness-0">
                </div>
                <span class="text-2xl font-bold">SILA SABI</span>
            </div>
            <div class="hidden md:flex space-x-8">
                <a href="#" class="nav-link font-medium">Hjem</a>
                <a href="#" class="nav-link font-medium">Kolleksjoner</a>
                <a href="#" class="nav-link font-medium">Om oss</a>
                <a href="#" class="nav-link font-medium">Kontakt</a>
            </div>
            <div class="flex items-center space-x-4">
                <a href="#"><i data-feather="search"></i></a>
                <a href="#"><i data-feather="user"></i></a>
                <a href="#"><i data-feather="shopping-bag"></i></a>
                <button class="md:hidden">
                    <i data-feather="menu"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section h-screen flex items-center justify-center text-white pt-16">
        <div class="text-center px-4" data-aos="fade-up">
            <div class="flex flex-col items-center">
                <h1 class="text-4xl font-bold mt-4">SILA SABI</h1>
            </div>
            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Elegant mote for den moderne stilbevisste</p>
            <button class="bg-white text-black px-8 py-3 font-medium hover:bg-gray-100 transition duration-300">
                Utforsk kolleksjonen
            </button>
        </div>
    </section>

    <!-- Featured Collections -->
    <section class="py-20 px-6">
        <div class="container mx-auto">
            <h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">Våre kolleksjoner</h2>
            <div class="max-w-4xl mx-auto">
                <div class="product-card bg-gray-50 p-6 rounded-lg transition duration-300" data-aos="fade-up">
                    <img src="https://huggingface.co/spaces/Nasalgoldfish59/sila/resolve/main/images/Skjermbilde%202025-09-05%20215914.png" alt="Hovedprodukt" class="w-full h-auto object-cover mb-4">
                    <div class="flex justify-center mt-4">
                        <div class="flex space-x-4">
                            <div class="w-8 h-8 rounded-full bg-rose-500"></div>
                            <div class="w-8 h-8 rounded-full bg-black"></div>
                            <div class="w-8 h-8 rounded-full bg-white border border-gray-300"></div>
                            <div class="w-8 h-8 rounded-full bg-gray-400"></div>
                        </div>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">Vår Flaggskip Kolleksjon</h3>
                    <p class="text-gray-600 mb-4">Eksklusive plagg designet med omhu for den ultimate eleganten</p>
                    <a href="#" class="text-black font-medium flex items-center">
                        Utforsk kolleksjonen <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section class="py-20 px-6 bg-black text-white">
        <div class="container mx-auto flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10" data-aos="fade-right">
                <img src="https://huggingface.co/spaces/Nasalgoldfish59/sila/resolve/main/images/Skjermbilde%202025-09-05%20214107.png" alt="About Sila Sabi" class="w-full rounded-lg">
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <h2 class="text-3xl font-bold mb-6 logo">Om Sila Sabi</h2>
                <p class="mb-6">Sila Sabi ble grunnlagt med en visjon om å bringe tidløs eleganse til den moderne garderoben. Vårt mål er å skape plagg som kombinerer kvalitet, komfort og stil.</p>
                <p class="mb-8">Hvert plagg er nøye utvalgt eller designet for å reflektere vår filosofi om minimalistisk raffinement med et snev av personlighet.</p>
                <button class="border border-white px-8 py-3 font-medium hover:bg-white hover:text-black transition duration-300">
                    Les mer om vår historie
                </button>
            </div>
        </div>
    </section>

    <!-- Newsletter -->
    <section class="py-20 px-6 bg-gray-50">
        <div class="container mx-auto max-w-4xl text-center" data-aos="fade-up">
            <h2 class="text-3xl font-bold mb-6">Meld deg på vårt nyhetsbrev</h2>
            <p class="mb-8 text-gray-600">Få eksklusive tilbud, nyheter om nye kolleksjoner og stylingtips direkte til din innboks.</p>
            <div class="flex flex-col md:flex-row gap-4 justify-center">
                <input type="email" placeholder="Din e-postadresse" class="px-4 py-3 border border-gray-300 flex-grow max-w-md">
                <button class="bg-black text-white px-8 py-3 font-medium hover:bg-gray-800 transition duration-300">
                    Abonner
                </button>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-black text-white py-12 px-6">
        <div class="container mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4 logo">SILA SABI</h3>
                    <p class="text-gray-400">Elegant mote for den moderne stilbevisste</p>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Butikk</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Alle produkter</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Nyheter</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Bestselgere</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Tilbud</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Informasjon</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Om oss</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Kontakt oss</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Leveringsbetingelser</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Returpolicy</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Kontakt</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li class="flex items-center"><i data-feather="map-pin" class="mr-2 w-4 h-4"></i> Modergata 12, 0151 Oslo</li>
                        <li class="flex items-center"><i data-feather="mail" class="mr-2 w-4 h-4"></i> post@sila-sabi.no</li>
                        <li class="flex items-center"><i data-feather="phone" class="mr-2 w-4 h-4"></i> +47 123 45 678</li>
                    </ul>
                    <div class="flex space-x-4 mt-4">
                        <a href="#"><i data-feather="instagram"></i></a>
                        <a href="#"><i data-feather="facebook"></i></a>
                        <a href="#"><i data-feather="twitter"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
                <p>&copy; 2025
                   Sila Sabi. Alle rettigheter reservert.</p>
            </div>
        </div>
    </footer>

    <script>
        // Email popup functionality
        document.addEventListener('DOMContentLoaded', function() {
            const popup = document.getElementById('emailPopup');
            const emailForm = document.getElementById('emailForm');
            
            // Check if email was already submitted
            if (!localStorage.getItem('emailSubmitted')) {
                popup.style.display = 'flex';
            }
            
            // Form submission handler
            emailForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const email = this.querySelector('input[type="email"]').value;
                if (email) {
                    // Store in localStorage to remember submission
                    localStorage.setItem('emailSubmitted', 'true');
                    popup.style.display = 'none';
                    // Here you would typically send the email to your server
                    console.log('Submitted email:', email);
                }
            });
            
            // Allow closing by clicking outside
            popup.addEventListener('click', function(e) {
                if (e.target === popup) {
                    popup.style.display = 'none';
                    localStorage.setItem('emailClosed', 'true');
                }
            });
        });

        // Initialize AOS after email popup is handled
        setTimeout(() => {
            AOS.init({
                duration: 800,
                easing: 'ease-in-out',
                once: true
            });
        }, 100);
        feather.replace();
    </script>
</body>
</html>
