master home page final

<header class="site-header">

    <div class="header-container">

        <div class="menu-and-nav-container">

            <div class="menu-toggle">

                <div class="hamburger-line top"></div>

                <div class="hamburger-line middle"></div>

                <div class="hamburger-line bottom"></div>

            </div>

            <nav class="main-nav">

                <ul>

                    <li><a href="/shop">Shop</a></li>

                    <li><a href="/doggyography">Doggyography</a></li>

                    <li><a href="/blog">Blog</a></li>

                    <li><a href="/contact">Contact</a></li>

                </ul>

            </nav>

        </div>

        <a href="/" class="logo">

            <img src="https://raverdogs.com/wp-content/uploads/2025/06/Artboard-1-4.svg" alt="Raver Dogs Logo">

        </a>

    </div>

</header>

<main class="rd-main-content">

    <section class="rd-section staircase-section">

        <div class="staircase-text">

            <p>More than a collar.</p>

            <p>A nightly transformation.</p>

            <p>An expression of identity.</p>

            <p>A statement of love.</p>

            <p>Your dog deserves to be seen.</p>

            <p>...And you deserve to walk without worry.</p>

        </div>

    </section>

    <section class="rd-section origin-story">

        <h2>The Night Everything Changed</h2>

        <div class="origin-story-grid">

            <div class="origin-story-text">

                <p>

                    Late one night, in the quiet dark, I threw a ball for Raider. It was a moment of pure joy that turned to sheer terror as the ball bounced unexpectedly onto the road. Raider, in her blissful focus, gave chase. A taxi appeared from nowhere, its headlights cutting through the blackness.

                </p>

                <p>

                    For a split second that stretched into an eternity, the world stopped. It was only by a miracle of timing and the driver's swerve that Raider was spared. In that heart-stopping moment, shaking and holding my dog, I knew I had to do something. The thought of losing her was unbearable.

                </p>

                 <p>

                    That night, the idea for the Halo™ was born. Not as a product, but as a promise: to make sure that she, and every dog like her, would always be seen. To turn the terrifying invisibility of the night into a beacon of safety and style. That's our origin. That's our mission.

                </p>

            </div>

            <div class="story-image">

                <img src="URL_TO_RAIDER_PHOTO.jpg" alt="Raider the dog">

            </div>

        </div>

    </section>

    <section class="rd-section shop-preview">

        <h2>Meet The Halo™</h2>

        <div class="shop-grid">

            <div class="product-item">

                <h3>The Halo™ Collar</h3>

                <img src="URL_TO_HALO_IMAGE.jpg" alt="The Raver Dogs Halo LED Collar">

                <p>A nightly transformation with 500m visibility and a 12-hour battery. An expression of identity and a statement of love.</p>

                <a href="/shop/halo-collar" class="rd-button">Shop The Halo</a>

            </div>

            <div class="product-item">

                <h3>The Night Vest™</h3>

                <img src="URL_TO_VEST_IMAGE.jpg" alt="The Raver Dogs Night Vest">

                <p>Two Halos of light for your hell hound. A devilish glow, seen by everyone around, for maximum presence and safety.</p>

                <a href="/shop/night-vest" class="rd-button">Shop The Vest</a>

            </div>

        </div>

    </section>

    <section class="rd-section doggyography-section">

         <h2>Raver Doggyography</h2>

         <p class="section-intro">Your dog's nightlife captured on film is a world must-see. Professional night photography sessions to capture the magic.</p>

         <div class="gallery-placeholder">

            <p>For the best user experience and SEO, we'll create your galleries here, directly on your site, using a WordPress gallery plugin. This provides a much more seamless experience than linking out to Lightroom.</p>

             <a href="/doggyography" class="rd-button">View Galleries</a>

         </div>

    </section>

    <footer class="rd-section site-footer-content">

        <h2>Get In Touch</h2>

        <div class="footer-grid">

            <div class="footer-contact-form">

                <form action="#" method="post" class="rd-contact-form">

                    <input type="text" name="name" placeholder="Your Name" required>

                    <input type="email" name="email" placeholder="Your Email" required>

                    <textarea name="message" placeholder="Your Message" required></textarea>

                    <button type="submit" class="rd-button">Send Message</button>

                </form>

            </div>

            <div class="footer-details">

                <div class="footer-logo">

                    <img src="https://raverdogs.com/wp-content/uploads/2025/06/Artboard-1-4.svg" alt="Raver Dogs Logo">

                </div>

                <p>Safe Up-Late K9 Culture.<br>Based in Canberra, shipping worldwide.</p>

                <div class="social-media-icons">

                    <a href="URL_TO_YOUR_FACEBOOK" target="_blank" title="Facebook">FB</a>

                    <a href="URL_TO_YOUR_YOUTUBE" target="_blank" title="YouTube">YT</a>

                    <a href="URL_TO_YOUR_INSTAGRAM" target="_blank" title="Instagram">IG</a>

                    <a href="URL_TO_YOUR_TIKTOK" target="_blank" title="TikTok">TT</a>

                </div>

            </div>

        </div>

        <p class="footer-copyright">&copy; 2025 Raver Dogs. All Rights Reserved.</p>

    </footer>

</main>

<style>

/* =================================================================

   RAVER DOGS - MASTER STYLESHEET (FINAL)

   ================================================================= */

/* --- YOUR PERFECTED HEADER STYLES (UNCHANGED) --- */

body { color: #FFFFFF; font-family: "brandon-grotesque", sans-serif; font-size: 18px; font-weight: 700; line-height: 1.6; }

body.nav-is-open { overflow: hidden; }

a { color: #FFFFFF; text-decoration: none; }

.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; padding: 25px 0; transition: background-color 0.3s ease; }

.header-container { width: 95%; max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }

.logo img { height: 55px; width: auto; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.logo:hover img { animation: pulse 1s infinite; }

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

.menu-toggle { cursor: pointer; width: 35px; height: 28px; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 10000; background: none; border: none; padding: 0;}

.hamburger-line { width: 100%; height: 4px; background-color: #FF03E6; border-radius: 4px; transition: transform 0.3s ease-in-out, opacity 0.3s ease; transform-origin: center; }

.nav-is-open .hamburger-line.top { transform: translateY(12px) rotate(45deg); }

.nav-is-open .hamburger-line.middle { opacity: 0; transform: scaleX(0); }

.nav-is-open .hamburger-line.bottom { transform: translateY(-12px) rotate(-45deg); }

.main-nav { display: block; position: fixed; top: 0; left: 0; width: 320px; height: 100vh; padding: 120px 40px; background-color: rgba(25, 0, 23, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateX(-100%); transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; }

.nav-is-open .main-nav { opacity: 1; visibility: visible; transform: translateX(0); }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; }

.main-nav li { width: 100%; margin-bottom: 15px; }

.main-nav a { display: block; font-size: 24px; padding: 10px 15px; border-radius: 5px; color: #39FF14; transition: background-color 0.3s ease, color 0.3s ease; }

.main-nav a:hover { background-color: rgba(255, 3, 230, 0.2); color: #FFFFFF; }

.main-nav .current-menu-item a { color: #FF03E6; text-decoration: line-through; text-decoration-thickness: 2px; pointer-events: none; }

.elementor-section-wrap { z-index: auto; } /* FIX for Elementor Invisible Overlap */

/* --- Page Content MUST start below the header height --- */

.rd-main-content { padding-top: 120px; /* Adjust this value to match header height */ }

/* --- HOMEPAGE CONTENT STYLES --- */

h2 { font-size: 42px; font-weight: 700; text-transform: uppercase; color: #FF03E6; margin-bottom: 30px; text-align: center; line-height: 1.2; }

.rd-section { padding: 80px 5%; max-width: 1200px; margin: 0 auto; }

.section-intro { max-width: 600px; margin: -20px auto 40px auto; text-align: center; font-size: 20px; font-style: oblique; font-weight: 400;}

.rd-button { display: inline-block; background-color: rgba(255, 3, 230, 0.2); color: #39FF14 !important; padding: 12px 25px; border-radius: 5px; text-transform: uppercase; font-weight: 700; transition: transform 0.2s ease, background-color 0.2s ease; border: 2px solid #39FF14;}

.rd-button:hover { transform: scale(1.05); background-color: #39FF14; color: #000000 !important; }

/* --- Staircase Text Section --- */

.staircase-text { text-align: left; max-width: 900px; margin: 20px auto 80px; }

.staircase-text p { margin: 10px 0; font-size: 24px; font-weight: 400; line-height: 1.4; }

.staircase-text p:nth-child(1) { margin-left: 0px; }

.staircase-text p:nth-child(2) { margin-left: 60px; }

.staircase-text p:nth-child(3) { margin-left: 120px; }

.staircase-text p:nth-child(4) { margin-left: 180px; }

.staircase-text p:nth-child(5) { margin-left: 240px; }

.staircase-text p:nth-child(6) { margin-left: 300px; font-style: oblique; color: #FF03E6; }

/* --- Origin Story Section --- */

.origin-story-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }

.origin-story-text h2 { text-align: left; }

.origin-story-text p { font-weight: 400; line-height: 1.7; }

.story-image img { width: 100%; border-radius: 8px; border: 1px solid #39FF14; }

/* --- Shop & Doggyography Section --- */

.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; text-align: center; }

.product-item { background-color: rgba(255, 255, 255, 0.05); padding: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; justify-content: space-between; }

.product-item h3 { font-size: 28px; color: #39FF14; margin-bottom: 15px; text-transform: uppercase; }

.product-item img { max-width: 100%; height: auto; border-radius: 5px; margin-bottom: 20px; }

.gallery-placeholder { background-color: rgba(255, 255, 255, 0.05); border: 1px dashed #39FF14; padding: 40px; text-align: center; border-radius: 8px; }

/* --- Footer & Contact Section --- */

.site-footer-content { border-top: 1px solid rgba(255, 3, 230, 0.2); }

.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; }

.rd-contact-form { display: flex; flex-direction: column; gap: 15px; }

.rd-contact-form input, .rd-contact-form textarea { background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; padding: 15px; color: #FFFFFF; font-family: inherit; font-size: 16px; }

.rd-contact-form textarea { resize: vertical; min-height: 120px; }

.footer-details { text-align: right; }

.footer-logo img { height: 60px; margin-bottom: 20px; }

.social-media-icons { margin-top: 20px; }

.social-media-icons a { display: inline-block; color: #39FF14; border: 1px solid #39FF14; border-radius: 50%; width: 40px; height: 40px; line-height: 40px; text-align: center; margin-left: 10px; font-weight: 700; transition: all 0.3s ease; }

.social-media-icons a:hover { background-color: #39FF14; color: #000000; }

.footer-copyright { margin-top: 60px; font-size: 14px; opacity: 0.6; text-align: center; }

/* --- Responsive Adjustments for Tablet & Mobile --- */

@media (max-width: 900px) {

    .origin-story-grid, .footer-grid { grid-template-columns: 1fr; }

    .origin-story-text h2 { text-align: center; }

    .footer-details { text-align: center; }

    .staircase-text { margin-left: auto; margin-right: auto; }

}

@media (max-width: 768px) {

    h2 { font-size: 32px; }

    .staircase-text p { text-align: center; margin-left: 0 !important; }

    .shop-grid { grid-template-columns: 1fr; }

    .social-media-icons a { margin: 0 5px; }

}

</style>

<script>

/* ======================================================

   RAVER DOGS - MASTER JAVASCRIPT (FINAL)

   ====================================================== */

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

    // --- Header Menu Toggle Script (Your Perfected Code) ---

    const menuToggle = document.querySelector('.menu-toggle');

    if (menuToggle) {

        menuToggle.addEventListener('click', function() {

            document.body.classList.toggle('nav-is-open');

        });

    }

});

</script>