⚡ Fast Track GenAI

/* ============================================
   HERO SECTION NAVIGATION - FAST TRACK GENAI
   ============================================ */

/* Hero Section Navigation Container */
.hero-nav {
  background: linear-gradient(135deg, #000000 0%, #012b6e 70%, #011d4a 100%);
  border-bottom: 2px solid #07E6DE;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Full nav spec */
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Logo on Hero Nav - MUST BE WHITE */
.hero-nav .logo {
  height: 40px;
  width: auto;
  /* CRITICAL: Use white logo version */
  /* File: logo-white.png or dark-bg-white.png */
}

.hero-nav .logo img {
  height: 100%;
  width: auto;
  filter: brightness(100%); /* Ensures pure white */
}

/* Nav Links Container */
.hero-nav .nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav Links */
.hero-nav .nav-links a {
  color: #FFFFFF; /* White */
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

/* Nav Links Hover State */
.hero-nav .nav-links a:hover {
  color: #07E6DE; /* Bright Turquoise */
  background: rgba(7, 230, 222, 0.1);
}

/* Active/Current Page State */
.hero-nav .nav-links a.active {
  color: #07E6DE; /* Bright Turquoise */
  border-bottom: 2px solid #07E6DE;
}

/* CTA Button in Navigation */
.hero-nav .cta-button {
  background-color: #07E6DE; /* Bright Turquoise */
  color: #000000; /* Black text */
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

/* CTA Button Hover Effect */
.hero-nav .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(7, 230, 222, 0.4);
  background-color: #6DC9C1; /* Slightly darker Bright Turquoise */
}

/* Mobile Responsive (Optional) */
@media (max-width: 768px) {
  .hero-nav {
    flex-direction: column;
    padding: 15px 20px;
  }
  
  .hero-nav .nav-links {
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
  }
  
  .hero-nav .cta-button {
    margin-top: 15px;
    width: 100%;
    text-align: center;
  }
}

<nav class="hero-nav">
  <!-- Logo - MUST BE WHITE VERSION -->
  <div class="logo">
    <img src="logo-white.png" alt="Fast Track GenAI">
  </div>
  
  <!-- Navigation Links -->
  <ul class="nav-links">
    <li><a href="#features">Features</a></li>
    <li><a href="#pricing">Pricing</a></li>
    <li><a href="#about" class="active">About</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
  </ul>
  
  <!-- CTA Button -->
  <a href="#get-started" class="cta-button">Get Started</a>
</nav>

1. Create Custom CSS Section: In GHL page editor, add a "Custom CSS" element
2. Paste CSS Code: Copy the complete CSS from above into the custom CSS section
3. Upload White Logo: Upload the white logo version (logo-white.png) to GHL media library
4. Add Navigation HTML: Add a custom HTML element with the navigation structure
5. Link Logo Image: Replace "logo-white.png" with the actual GHL media URL
6. Configure Links: Update href attributes to point to your actual page sections or URLs
7. Test Hover States: Preview the page and verify all hover effects work correctly
8. Mobile Check: Test on mobile devices to ensure responsive behavior

/* Add these variables at the top of your CSS */
:root {
  --ftg-pure-black: #000000;
  --ftg-white: #FFFFFF;
  --ftg-bright-turquoise-turquoise: #07E6DE;
  --ftg-bright-turquoise-darker: #6DC9C1;
}

/* Then use them in your navigation CSS */
.hero-nav {
  background-color: var(--ftg-pure-black);
}

.hero-nav .nav-links a {
  color: var(--ftg-white);
}

.hero-nav .nav-links a:hover {
  color: var(--ftg-bright-turquoise-turquoise);
}