Art Deco Sport/Fitness Hamburger Menü

<div class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-sans overflow-hidden">
  <!-- Header Section -->
  <header class="relative z-20 p-4 sm:p-6 lg:p-8 flex items-center justify-between shadow-lg backdrop-blur-sm bg-white/70 dark:bg-gray-900/70 border-b-4 border-opacity-70 border-purple-300 dark:border-gray-600">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/50/50?random=1" alt="Team Logo" class="rounded-full shadow-md border-2 border-purple-400 dark:border-gray-500">
      <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white tracking-wider uppercase text-shadow-art-deco">
        <span class="text-purple-600 dark:text-purple-300">Elite</span> <span class="text-pink-600 dark:text-pink-300">Athletics</span>
      </h1>
    </div>

    <!-- Mobile Hamburger Toggle -->
    <input type="checkbox" id="menu-toggle" class="hidden peer">
    <label for="menu-toggle" class="relative z-50 flex flex-col justify-between w-8 h-6 xl:hidden cursor-pointer group">
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:rotate-45 peer-checked:translate-y-2.5"></span>
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:opacity-0"></span>
      <span class="block w-full h-1 bg-purple-600 dark:bg-purple-300 transform transition duration-300 rounded-full group-hover:bg-pink-500 peer-checked:-rotate-45 peer-checked:-translate-y-2.5"></span>
    </label>

    <!-- Desktop Navigation -->
    <nav class="hidden xl:flex space-x-8 text-lg font-semibold">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Schedule
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Team
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Results
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Shop
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors duration-300 relative group">
        Contact
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 dark:bg-purple-300 transition-all duration-300 group-hover:w-full"></span>
      </a>
    </nav>
  </header>

  <!-- Mobile Navigation (Off-canvas) -->
  <nav class="fixed inset-0 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-950 dark:via-gray-850 dark:to-gray-750 flex flex-col justify-center items-center space-y-8 text-2xl font-bold transition-transform duration-500 -translate-x-full peer-checked:translate-x-0 z-40 shadow-xl overflow-y-auto px-4 py-16">
    <div class="absolute top-0 left-0 w-full h-full opacity-30 pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100\' height=\'100\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><defs><pattern id=\'art-deco-pattern\' width=\'100\' height=\'100\' patternUnits=\'userSpaceOnUse\'><path d=\'M0 0 L100 0 L50 50 Z M50 50 L100 100 L0 100 Z\' fill=\'none\' stroke=\'rgba(0,0,0,0.1)\' stroke-width=\'1\'/><circle cx=\'50\' cy=\'50\' r=\'5\' fill=\'rgba(0,0,0,0.1)\'/></pattern></defs><rect width=\'100%\' height=\'100%\' fill=\'url(%23art-deco-pattern)\'/></svg>'); background-size: 100px 100px;"></div>

    <div class="relative z-10 flex flex-col items-center space-y-6 sm:space-y-8">
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-purple-200 dark:hover:bg-gray-600 hover:text-purple-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-purple-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[50ms]">
        <i class="fas fa-home mr-3 text-purple-600 dark:text-purple-300"></i> Home
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-pink-200 dark:hover:bg-gray-600 hover:text-pink-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-pink-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[100ms]">
        <i class="fas fa-calendar-alt mr-3 text-pink-600 dark:text-pink-300"></i> Schedule
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-yellow-200 dark:hover:bg-gray-600 hover:text-yellow-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-yellow-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[150ms]">
        <i class="fas fa-users mr-3 text-yellow-600 dark:text-yellow-300"></i> Team
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-green-200 dark:hover:bg-gray-600 hover:text-green-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-green-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[200ms]">
        <i class="fas fa-clipboard-list mr-3 text-green-600 dark:text-green-300"></i> Results
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-blue-200 dark:hover:bg-gray-600 hover:text-blue-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-blue-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[250ms]">
        <i class="fas fa-shopping-cart mr-3 text-blue-600 dark:text-blue-300"></i> Shop
      </a>
      <a href="#" class="text-gray-800 dark:text-gray-100 py-3 px-6 rounded-full bg-white/80 dark:bg-gray-700/80 shadow-md transition-all duration-300 hover:scale-105 hover:bg-indigo-200 dark:hover:bg-gray-600 hover:text-indigo-800 dark:hover:text-white font-semibold text-center w-64 md:w-80 border-2 border-indigo-300 dark:border-gray-500 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[300ms]">
        <i class="fas fa-envelope mr-3 text-indigo-600 dark:text-indigo-300"></i> Contact
      </a>
    </div>

    <!-- Social Media Links -->
    <div class="relative z-10 flex space-x-6 mt-8 sm:mt-12 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[350ms]">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-300 transition-colors text-3xl"><i class="fab fa-facebook"></i></a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-pink-600 dark:hover:text-pink-300 transition-colors text-3xl"><i class="fab fa-twitter"></i></a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-yellow-600 dark:hover:text-yellow-300 transition-colors text-3xl"><i class="fab fa-instagram"></i></a>
    </div>

    <!-- User Mini-Profile -->
    <div class="relative z-10 flex items-center space-x-4 mt-8 sm:mt-12 p-4 bg-white/70 dark:bg-gray-800/70 rounded-lg shadow-lg border-2 border-purple-300 dark:border-gray-600 opacity-0 transform translate-y-4 peer-checked:opacity-100 peer-checked:translate-y-0 transition-opacity transition-transform duration-300 delay-[400ms]">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-purple-400 dark:border-gray-500 shadow-md">
      <div>
        <p class="text-gray-800 dark:text-gray-100 text-lg font-semibold">John "The Bolt" Doe</p>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Athlete - Running</p>
      </div>
    </div>
  </nav>

  <!-- Main Content Area (for visual context) -->
  <main class="p-8 text-center text-gray-800 dark:text-gray-200 z-10 relative">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-6 mt-12 leading-tight text-shadow-art-deco-light">
      Unleash Your Inner <span class="text-pink-600 dark:text-pink-300">Champion</span>
    </h2>
    <p class="text-lg sm:text-xl max-w-2xl mx-auto mb-12 opacity-90">
      Dedicated to excellence in sports and fitness. Join our community and elevate your performance.
    </p>
    <div class="flex justify-center flex-wrap gap-6">
      <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-purple-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
          <img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-purple-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=2" alt="Training Session">
          <h3 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-200">Training Sessions</h3>
          <p class="text-gray-700 dark:text-gray-300">Discover personalized training programs for all skill levels.</p>
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/3 p-4">
        <div class="bg-white/80 dark:bg-gray-800/80 rounded-xl p-6 shadow-xl border-4 border-pink-300 dark:border-gray-600 backdrop-blur-sm transform transition-transform hover:scale-105 duration-300">
          <img class="w-full h-48 object-cover rounded-md mb-4 border-2 border-pink-400 dark:border-gray-500" src="https://picsum.photos/400/300?random=3" alt="Team Sports">
          <h3 class="text-2xl font-bold mb-2 text-pink-700 dark:text-pink-200">Team Sports</h3>
          <p class="text-gray-700 dark:text-gray-300">Join a team and experience the thrill of competitive play.</p>
        </div>
      </div>
    </div>
  </main>

  <!-- Art Deco Geometric Background Elements (Absolute Positioning) -->
  <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
    <!-- Top Left Triangle -->
    <div class="absolute top-0 left-0 w-64 h-64 sm:w-80 sm:h-80 bg-purple-300 dark:bg-gray-700 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left "></div>
    <div class="absolute top-0 left-0 w-48 h-48 sm:w-64 sm:h-64 bg-pink-300 dark:bg-gray-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2 origin-top-left translate-x-16 translate-y-16 "></div>

    <!-- Bottom Right Chevron -->
    <div class="absolute bottom-0 right-0 w-64 h-32 sm:w-80 sm:h-40 bg-yellow-300 dark:bg-gray-700 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right"></div>
    <div class="absolute bottom-0 right-0 w-48 h-24 sm:w-64 sm:h-32 bg-purple-300 dark:bg-gray-600 transform rotate-45 translate-x-1/4 translate-y-1/4 origin-bottom-right -translate-x-16 -translate-y-8"></div>

    <!-- Middle Horizontal Bars -->
    <div class="absolute left-1/4 top-1/2 -translate-y-1/2 w-1/2 h-8 bg-pink-300 dark:bg-gray-700 rounded-full transform rotate-3 z-0"></div>
    <div class="absolute left-1/4 top-[calc(50%+2rem)] -translate-y-1/2 w-1/2 h-8 bg-purple-300 dark:bg-gray-600 rounded-full transform -rotate-3 z-0"></div>
  </div>

  <style>
    .text-shadow-art-deco {
      text-shadow: 2px 2px 0px rgba(109, 40, 217, 0.2), 4px 4px 0px rgba(219, 39, 119, 0.2);
      /* Combined purple and pink shadow */
    }

    .dark .text-shadow-art-deco {
      text-shadow: 2px 2px 0px rgba(82, 82, 91, 0.5), 4px 4px 0px rgba(37, 99, 235, 0.2);
    }

    .text-shadow-art-deco-light {
      text-shadow: 1px 1px 0px rgba(109, 40, 217, 0.1), 2px 2px 0px rgba(219, 39, 119, 0.1);
      /* Lighter for main heading copy */
    }

    .dark .text-shadow-art-deco-light {
      text-shadow: 1px 1px 0px rgba(82, 82, 91, 0.3), 2px 2px 0px rgba(37, 99, 235, 0.1);
    }

    /* Prevent scrolling when menu is open */
    body.menu-open {
      overflow: hidden;
    }

    /* Use JS for adding/removing menu-open class on body */
    /* Example (add this script manually elsewhere, not in the provided HTML context): */
    /*
    document.getElementById('menu-toggle').addEventListener('change', function() {
      if (this.checked) {
        document.body.classList.add('menu-open');
      } else {
        document.body.classList.remove('menu-open');
      }
    });
    */
  </style>
  <!-- Font Awesome for Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</div>