APEX Flux - Enhance your Atmospere by @Darkness977 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

widthImposta la larghezza di un elemento HTML
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<label>Mostrare un testo di etichetta per un elemento di input.

Users

Log in to search for users

Explore

Find inspiration

Esercizio 1 - 27/11

esercizio 2 (italia)

Dottor Jakyll e Mr Hyde

vendita ebay(2)

Congressional District Information

Struttura pagina HTML5

Epic Read - Recensioni di libri fa

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Flux - Shape Your Atmosphere</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>

    <!-- NEW: Soft Main Menu -->
    <nav id="main-menu">
        <div class="menu-logo">APEX</div>
        <ul class="menu-links">
            <li><a href="#art-of-light">Experience</a></li>
            <li><a href="#demo">Interactive</a></li>
            <li><a href="#configurator">Configure</a></li>
            <li><a href="#" class="menu-contact">Contact</a></li>
        </ul>
    </nav>

    <!-- 1. Hero Section with Animated Background -->
    <header id="hero">
        <div class="light-beams"></div>
        <div class="hero-content">
            <h1>APEX Flux</h1>
            <p>Shape Your Atmosphere.</p>
            <a href="#demo" class="cta-button">Experience Light</a>
        </div>
    </header>

    <main>
        <!-- 2. The Art of Light Section -->
        <section id="art-of-light">
            <div class="slider-container">
                <div class="slides">
                    <div class="slide" style="background-image: url('https://picsum.photos/seed/fluxliving/1200/600.jpg');">
                        <div class="slide-text">
                            <h3>For the Living Space</h3>
                            <p>Create moods that move with you.</p>
                        </div>
                    </div>
                    <div class="slide" style="background-image: url('https://picsum.photos/seed/fluxoffice/1200/600.jpg');">
                        <div class="slide-text">
                            <h3>For the Creative Studio</h3>
                            <p>Illuminate your inspiration.</p>
                        </div>
                    </div>
                    <div class="slide" style="background-image: url('https://picsum.photos/seed/fluxgallery/1200/600.jpg');">
                        <div class="slide-text">
                            <h3>For the Gallery</h3>
                            <p>Frame your world in color.</p>
                        </div>
                    </div>
                </div>
                <button class="slider-button prev">&#10094;</button>
                <button class="slider-button next">&#10095;</button>
            </div>
        </section>

        <!-- 3. Interactive Demo Section -->
        <section id="demo">
            <h2>Interactive Light</h2>
            <p>Click the buttons below to control the APEX Flux module in real-time.</p>
            <div class="demo-container">
                <div id="flux-module" class="flux-module-default"></div>
            </div>
            <div class="demo-controls">
                <h3>Color</h3>
                <div class="color-buttons">
                    <button data-color="electric-blue" style="background: linear-gradient(45deg, #00d2ff, #3a7bd5);"></button>
                    <button data-color="sunset-purple" style="background: linear-gradient(45deg, #ff6a00, #ee0979);"></button>
                    <button data-color="aurora-green" style="background: linear-gradient(45deg, #11998e, #38ef7d);"></button>
                    <button data-color="neutral-white" style="background: linear-gradient(45deg, #f5f7fa, #c3cfe2);"></button>
                </div>
                <h3>Animation</h3>
                <div class="animation-buttons">
                    <button id="anim-pulse">Pulse</button>
                    <button id="anim-flow">Flow</button>
                    <button id="anim-static">Static</button>
                </div>
            </div>
        </section>

        <!-- 4. Modularity Section -->
        <section id="modularity">
            <div class="feature-card">
                <div class="icon-expand"></div>
                <h3>Expand</h3>
                <p>Start with one and build your system. Each Flux module connects magnetically and seamlessly.</p>
            </div>
            <div class="feature-card">
                <div class="icon-connect"></div>
                <h3>Connect</h3>
                <p>Control your entire system from our intuitive app or with simple voice commands.</p>
            </div>
            <div class="feature-card">
                <div class="icon-control"></div>
                <h3>Control</h3>
                <p>Choose from millions of colors or sync your lights with music, movies, and games.</p>
            </div>
        </section>

        <!-- 5. Build Your System Section -->
        <section id="configurator">
            <h2>Build Your Apex System</h2>
            <div class="config-product">
                <img src="https://picsum.photos/seed/fluxmodule/400/400.jpg" alt="APEX Flux Module">
                <div class="config-details">
                    <h3>APEX Flux Module</h3>
                    <p>The foundational element of your personalized lighting system.</p>
                    <div class="config-stepper">
                        <button id="decrement">-</button>
                        <span id="module-count">1</span>
                        <button id="increment">+</button>
                    </div>
                    <div class="config-price">
                        <span>Price:</span>
                        <span id="total-price">$199</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 6. Final CTA Section (MODIFIED) -->
        <section id="cta-final">
            <h2>Ready to redefine your space?</h2>
            <button class="btn-primary-large">Add to Cart</button>
            <button class="btn-secondary-large">Find a Retailer</button>
        </section>
    </main>

<!-- 7. Footer (Enhanced) -->
<footer>
    <div class="footer-content">
        <!-- Column 1: Brand & Newsletter -->
        <div class="footer-column footer-brand">
            <h4>APEX</h4>
            <p>Shaping the future of ambient light. Experience the perfect blend of art, technology, and design.</p>
            <div class="newsletter-form">
                <h5>Stay in the Light</h5>
                <p>Get the latest on APEX innovations and exclusive offers.</p>
                <form id="newsletter">
                    <input type="email" placeholder="Enter your email" required>
                    <button type="submit">Subscribe</button>
                </form>
            </div>
        </div>

        <!-- Column 2: Quick Links -->
        <div class="footer-column">
            <h4>Discover</h4>
            <ul>
                <li><a href="#">Products</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Community Gallery</a></li>
                <li><a href="#">Innovation Lab</a></li>
            </ul>
        </div>

        <!-- Column 3: Support -->
        <div class="footer-column">
            <h4>Support</h4>
            <ul>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Installation Guide</a></li>
                <li><a href="#">FAQs</a></li>
                <li><a href="#">Warranty & Returns</a></li>
            </ul>
        </div>

        <!-- Column 4: Company -->
        <div class="footer-column">
            <h4>Company</h4>
            <ul>
                <li><a href="#">Our Story</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="#">Sustainability</a></li>
            </ul>
        </div>
    </div>

    <!-- Bottom Bar: Social & Copyright -->
    <div class="footer-bottom">
        <div class="social-icons">
            <a href="#" aria-label="Instagram">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1 1 12.324 0 6.162 6.162 0 0 1-12.324 0zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm4.965-10.405a1.44 1.44 0 1 1 2.881.001 1.44 1.44 0 0 1-2.881-.001z"/></svg>
            </a>
            <a href="#" aria-label="Twitter">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
            </a>
            <a href="#" aria-label="LinkedIn">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            </a>
            <a href="#" aria-label="YouTube">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
            </a>
        </div>
        <div class="copyright">
            &copy; 2024 APEX. All rights reserved.
        </div>
    </div>
</footer>

    <script src="script.js"></script>
</body>
</html>

/* --- Global Variables & Resets --- */
:root {
    --color-bg: #f4f4f6;
    --color-surface: #ffffff;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-accent: #3a7bd5; /* Electric Blue */
    --font-sans: 'Poppins', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --spacing-unit: 2rem;
    --border-radius: 12px;
    --shadow-light: 0 4px 15px rgba(0,0,0,0.05);
    --shadow-medium: 0 8px 25px rgba(0,0,0,0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 4rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

section {
    padding: calc(var(--spacing-unit) * 3) 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 1. Hero Section with Animated Light Beams --- */
#hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    overflow: hidden;
}

.light-beams {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.light-beams::before, .light-beams::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    animation: beam-move 8s linear infinite;
}

.light-beams::after {
    top: 50%;
    animation-delay: -4s;
    transform: rotate(45deg);
}

@keyframes beam-move {
    0% { transform: translateX(-50%) translateY(-50%) rotate(45deg); }
    100% { transform: translateX(50%) translateY(-50%) rotate(45deg); }
}

.hero-content {
    text-align: center;
    z-index: 2;
    position: relative;
}

.hero-content p {
    font-size: 1.5rem;
    font-family: var(--font-mono);
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
}

.cta-button {
    padding: 1rem 2.5rem;
    background-color: var(--color-accent);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

/* --- 2. Art of Light Slider --- */
#art-of-light {
    padding: 0;
    max-width: 100%;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.slide-text {
    background: rgba(0,0,0,0.5);
    color: white;
    padding: 2rem;
    width: 100%;
    text-align: center;
}

.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.7);
    border: none;
    padding: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.3s;
}

.slider-button:hover {
    background: rgba(255,255,255,0.9);
}
.prev { left: 20px; }
.next { right: 20px; }

/* --- 3. Interactive Demo --- */
#demo {
    text-align: center;
}

.demo-container {
    margin: 3rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

#flux-module {
    width: 200px;
    height: 200px;
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 40px rgba(58, 123, 213, 0.5);
}

.flux-module-default { background: linear-gradient(45deg, #f5f7fa, #c3cfe2); }
.flux-module-blue { background: linear-gradient(45deg, #00d2ff, #3a7bd5); }
.flux-module-purple { background: linear-gradient(45deg, #ff6a00, #ee0979); }
.flux-module-green { background: linear-gradient(45deg, #11998e, #38ef7d); }

.animate-pulse { animation: pulse 2s infinite; }
.animate-flow { animation: flow 4s infinite ease-in-out; }

@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(58, 123, 213, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(58, 123, 213, 0.8); }
}

@keyframes flow {
    0%, 100% { border-radius: 20px; }
    50% { border-radius: 50%; }
}

.demo-controls h3 { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 1rem; }
.color-buttons button, .animation-buttons button {
    border: none;
    width: 50px;
    height: 50px;
    margin: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: var(--shadow-light);
}
.color-buttons button:hover, .animation-buttons button:hover { transform: scale(1.1); }
.animation-buttons button { width: auto; padding: 0 1rem; border-radius: 50px; background: var(--color-surface); color: var(--color-text-primary); font-family: var(--font-mono); }

/* --- 4. Modularity Section --- */
#modularity {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-unit);
}

.feature-card {
    background: var(--color-surface);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-card .icon-expand, .icon-connect, .icon-control {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background-color: var(--color-bg);
    border-radius: 50%;
    position: relative;
}
.icon-expand::after { content: '↗'; font-size: 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.icon-connect::after { content: '⇄'; font-size: 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.icon-control::after { content: '✦'; font-size: 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* --- 5. Configurator Section --- */
#configurator .config-product {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    background: var(--color-surface);
    padding: var(--spacing-unit);
    border-radius: var(--border-radius);
}

#configurator img {
    width: 150px;
    border-radius: var(--border-radius);
}

.config-stepper {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.config-stepper button {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-accent);
    background: transparent;
    color: var(--color-accent);
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s;
}
.config-stepper button:hover { background: var(--color-accent); color: white; }

#module-count {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font-mono);
}

#total-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
}

/* --- 6. Final CTA Section --- */
#cta-final {
    text-align: center;
    background: var(--color-surface);
    border-radius: var(--border-radius);
}

.btn-primary-large, .btn-secondary-large {
    padding: 1rem 3rem;
    margin: 1rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.btn-primary-large {
    background: var(--color-accent);
    color: white;
    box-shadow: var(--shadow-light);
}
.btn-primary-large:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }

.btn-secondary-large {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}
.btn-secondary-large:hover { background: var(--color-accent); color: white; }

/* --- 7. Footer --- */
footer {
    background: var(--color-surface);
    padding: calc(var(--spacing-unit) * 2) 5%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--spacing-unit);
    border-top: 1px solid #e0e0e0;
}

.footer-column h4 {
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 1rem;
}
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 0.5rem; }
.footer-column ul li a { font-size: 0.9rem; color: var(--color-text-secondary); }

/* --- Responsive Design --- */
@media (max-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }

    #modularity {
        grid-template-columns: 1fr;
    }
    
    #configurator .config-product {
        flex-direction: column;
    }

    .slider-button {
        font-size: 1rem;
        padding: 0.7rem;
    }
}
/* --- Global Variables & Resets --- */
:root {
    --color-bg: #f4f4f6;
    --color-surface: #ffffff;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-accent: #3a7bd5; /* Electric Blue */
    /* NEW: Dark surface for footer */
    --color-dark-surface: #1a1a1a;
    --font-sans: 'Poppins', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --spacing-unit: 2rem;
    --border-radius: 12px;
    --shadow-light: 0 4px 15px rgba(0,0,0,0.05);
    --shadow-medium: 0 8px 25px rgba(0,0,0,0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-weight: 600;
    line-height: 1.2;
}

h1 { font-size: 4rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }

section {
    padding: calc(var(--spacing-unit) * 3) 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- NEW: Soft Main Menu --- */
#main-menu {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: rgba(255, 255, 255, 0.1); /* Transparent */
    backdrop-filter: blur(10px); /* Blurred effect */
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

#main-menu.scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-light);
}

.menu-logo {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.menu-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.menu-links a {
    font-weight: 500;
    color: var(--color-text-primary);
    transition: color 0.3s ease;
}

.menu-links a:hover {
    color: var(--color-accent);
}

.menu-contact {
    background-color: var(--color-accent);
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

.menu-contact:hover {
    opacity: 0.9;
}


/* --- 1. Hero Section with Animated Light Beams --- */
#hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg);
    overflow: hidden;
}

/* ... (rest of the CSS is the same until the footer) ... */

/* --- 6. Final CTA Section (MODIFIED) --- */
#cta-final {
    /* MODIFIED: Make full width */
    max-width: none;
    padding: calc(var(--spacing-unit) * 3) 5%;
    text-align: center;
    background: var(--color-surface);
    border-top: 1px solid #e0e0e0;
}

.btn-primary-large, .btn-secondary-large {
    padding: 1rem 3rem;
    margin: 1rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

.btn-primary-large {
    background: var(--color-accent);
    color: white;
    box-shadow: var(--shadow-light);
}
.btn-primary-large:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); }

.btn-secondary-large {
    background: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}
.btn-secondary-large:hover { background: var(--color-accent); color: white; }

/* --- 7. Footer (MODIFIED) --- */
/* --- 7. Footer (Enhanced) --- */
footer {
    background: var(--color-dark-surface);
    color: #e0e0e0;
    padding: 0; /* Reset padding, handled by inner containers */
    margin-top: calc(var(--spacing-unit) * 3); /* Add space above the footer */
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Brand column is wider */
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 3) 5%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-column h4 {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--color-text-primary); /* Brighter text for headings */
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 0.8rem;
}

.footer-column ul li a {
    font-size: 0.95rem;
    color: #a0a0a0; /* Muted link color */
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block; /* Allows for transform */
}

.footer-column ul li a:hover {
    color: var(--color-accent);
    transform: translateX(3px);
}

/* --- Brand & Newsletter Specifics --- */
.footer-brand p {
    max-width: 90%;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.newsletter-form h5 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.newsletter-form p {
    font-size: 0.9rem;
    color: #a0a0a0;
    margin-bottom: 1.5rem;
}

#newsletter {
    display: flex;
    gap: 0.5rem;
}

#newsletter input[type="email"] {
    flex-grow: 1;
    padding: 0.8rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

#newsletter input[type="email"]:focus {
    outline: none;
    border-color: var(--color-accent);
    background-color: rgba(255, 255, 255, 0.08);
}

#newsletter input[type="email"]::placeholder {
    color: #777;
}

#newsletter button {
    padding: 0.8rem 1.5rem;
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-family: var(--font-sans);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#newsletter button:hover {
    background-color: #2c5fb8; /* Darker shade of accent */
    transform: translateY(-2px);
}

/* --- Bottom Bar --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    flex-wrap: wrap;
    gap: 1rem;
}

.social-icons {
    display: flex;
    gap: 1.5rem;
}

.social-icons a {
    color: #777; /* Muted icon color */
    transition: color 0.3s ease, transform 0.2s ease;
}

.social-icons a:hover {
    color: var(--color-accent);
    transform: scale(1.1);
}

.social-icons svg {
    width: 24px;
    height: 24px;
    fill: currentColor; /* Allows color to be controlled by the 'a' tag */
}

.copyright {
    font-size: 0.85rem;
    color: #555;
    font-family: var(--font-mono);
}

/* --- Responsive Design for Footer --- */
@media (max-width: 968px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-unit);
    }
    .footer-brand {
        grid-column: 1 / -1; /* Make brand column span full width */
    }
}

@media (max-width: 600px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2rem; }

    #main-menu {
        padding: 1rem 2rem;
    }
    .menu-links {
        gap: 1rem;
        font-size: 0.9rem;
    }
    .menu-contact {
        padding: 0.4rem 0.8rem;
    }

    #modularity {
        grid-template-columns: 1fr;
    }
    
    #configurator .config-product {
        flex-direction: column;
    }

    .slider-button {
        font-size: 1rem;
        padding: 0.7rem;
    }
}

document.addEventListener('DOMContentLoaded', function() {

    // --- NEW: Sticky Menu Scroll Effect ---
    const mainMenu = document.getElementById('main-menu');
    
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) { // If scrolled more than 50px
            mainMenu.classList.add('scrolled');
        } else {
            mainMenu.classList.remove('scrolled');
        }
    });


    // --- Interactive Demo Logic ---
    const fluxModule = document.getElementById('flux-module');
    const colorButtons = document.querySelectorAll('.color-buttons button');
    const animationButtons = document.querySelectorAll('.animation-buttons button');

    // Color Control
    colorButtons.forEach(button => {
        button.addEventListener('click', function() {
            const color = this.dataset.color;
            // Remove all existing color classes
            fluxModule.className = '';
            // Add the new color class
            if (color) {
                fluxModule.classList.add(`flux-module-${color}`);
            }
        });
    });

    // Animation Control
    document.getElementById('anim-pulse').addEventListener('click', () => {
        fluxModule.classList.remove('animate-flow');
        fluxModule.classList.add('animate-pulse');
    });
    document.getElementById('anim-flow').addEventListener('click', () => {
        fluxModule.classList.remove('animate-pulse');
        fluxModule.classList.add('animate-flow');
    });
    document.getElementById('anim-static').addEventListener('click', () => {
        fluxModule.classList.remove('animate-pulse', 'animate-flow');
    });

    // --- Slider Logic ---
    const slides = document.querySelector('.slides');
    const slideCount = document.querySelectorAll('.slide').length;
    let currentSlide = 0;

    document.querySelector('.next').addEventListener('click', () => {
        if (currentSlide < slideCount - 1) {
            currentSlide++;
        } else {
            currentSlide = 0;
        }
        slides.style.transform = `translateX(-${currentSlide * 100}%)`;
    });

    document.querySelector('.prev').addEventListener('click', () => {
        if (currentSlide > 0) {
            currentSlide--;
        } else {
            currentSlide = slideCount - 1;
        }
        slides.style.transform = `translateX(-${currentSlide * 100}%)`;
    });

    // --- Configurator Logic ---
    const moduleCountDisplay = document.getElementById('module-count');
    const totalPriceDisplay = document.getElementById('total-price');
    const incrementButton = document.getElementById('increment');
    const decrementButton = document.getElementById('decrement');
    
    let moduleCount = 1;
    const pricePerModule = 199;

    function updateConfigurator() {
        moduleCountDisplay.textContent = moduleCount;
        totalPriceDisplay.textContent = `$${moduleCount * pricePerModule}`;
    }

    incrementButton.addEventListener('click', () => {
        moduleCount++;
        updateConfigurator();
    });

    decrementButton.addEventListener('click', () => {
        if (moduleCount > 1) {
            moduleCount--;
            updateConfigurator();
        }
    });

});
document.addEventListener('DOMContentLoaded', function() {
    // ... (all your existing code) ...

    // --- NEW: Newsletter Form Submission ---
    const newsletterForm = document.getElementById('newsletter');
    newsletterForm.addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the form from actually submitting
        const email = this.querySelector('input[type="email"]').value;
        if (email) {
            // In a real application, you would send this data to a server.
            // For this demo, we'll just log it to the console.
            console.log(`Newsletter subscription attempted with email: ${email}`);
            alert(`Thank you for subscribing with ${email}! (This is a demo)`);
            this.querySelector('input[type="email"]').value = ''; // Clear the input field
        }
    });

});