RAVER DOGS – HEADER V2 STYLESHEET

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

   RAVER DOGS - HEADER V2 STYLESHEET

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

/* --- 1. Global & Body Styles --- */

body {

    color: #FFFFFF;

    font-family: "brandon-grotesque", sans-serif;

    font-size: 18px;

    font-weight: 700; /* Bolder font for menu */

    line-height: 1.6;

}

/* This class is toggled by JS on the body to prevent scrolling when the menu is open */

body.nav-is-open {

    overflow: hidden;

}

a {

    color: #FFFFFF;

    text-decoration: none;

}

/* --- 2. Levitating Header & New Layout --- */

.site-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9999;

    padding: 25px 0; /* Increased padding */

    transition: background-color 0.3s ease;

}

.header-container {

    width: 95%; /* More space from edges */

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

/* --- 3. Logo Pulse Animation --- */

.logo img {

    height: 55px; /* Slightly larger logo */

    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); }

}

/* --- 4. Hamburger Menu Toggle & 'X' Transformation --- */

.menu-toggle {

    cursor: pointer;

    width: 35px;

    height: 28px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    position: relative;

    z-index: 10000; /* Ensure it's above the nav */

}

.hamburger-line {

    width: 100%;

    height: 4px;

    background-color: #FF03E6; /* Purpink */

    border-radius: 4px;

    transition: transform 0.3s ease-in-out, opacity 0.3s ease;

    transform-origin: center;

}

/* 'X' transformation when body has .nav-is-open class */

.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);

}

/* --- 5. Dropdown Navigation Styling --- */

.main-nav {

    display: block;

    position: fixed; /* Fixed to the viewport */

    top: 0;

    left: 0;

    width: 320px; /* 'Tight' frame, not full width */

    height: 100vh; /* Full height */

    padding: 120px 40px;

    /* YOUR CUSTOM COLORS - Purpink Background */

    background-color: rgba(25, 0, 23, 0.85); /* Dark Purpink, mostly opaque */

    backdrop-filter: blur(10px); /* Frosted glass effect */

    -webkit-backdrop-filter: blur(10px);

    /* Hide menu by default */

    opacity: 0;

    visibility: hidden;

    transform: translateX(-100%);

    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;

}

/* Show menu when body has .nav-is-open class */

.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; /* Align text to the left */

}

.main-nav li {

    width: 100%;

    margin-bottom: 15px;

}

.main-nav a {

    display: block;

    font-size: 24px;

    padding: 10px 15px;

    border-radius: 5px;

    /* YOUR CUSTOM COLORS - Green text */

    color: #39FF14; /* Neon Green - adjust if needed */

    transition: background-color 0.3s ease, color 0.3s ease;

}

.main-nav a:hover {

    /* YOUR CUSTOM COLORS - Purpink highlight */

    background-color: rgba(255, 3, 230, 0.2);

    color: #FFFFFF;

}

/* Style for the CURRENT page link */

.main-nav .current-menu-item a {

    color: #FF03E6; /* Purpink */

    text-decoration: line-through;

    text-decoration-thickness: 2px;

    pointer-events: none; /* Disables clicking/hovering */

}