rtosure/header.html

<!-- ============================================================
     RTOSure — header.html
     Standalone navigation component.
     Include in every page via:
       <div id="site-header"></div>
       <script>
         fetch('header.html').then(r=>r.text()).then(h=>{
           document.getElementById('site-header').innerHTML=h;
         });
       </script>
     ============================================================ -->

<link rel="stylesheet" href="styles.css">

<style>
/* ── Site Header Styles ───────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 200ms var(--ease);
}
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(15,39,68,.10);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: var(--space-xl);
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.header-logo .logo-mark {
  width: 36px;
  height: 36px;
  background: var(--color-navy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.header-logo .logo-mark::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--color-teal);
  border-radius: 3px;
  top: 7px;
  left: 7px;
}
.header-logo .logo-mark::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
  bottom: 7px;
  right: 7px;
  z-index: 1;
}
.logo-wordmark {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.03em;
}
.logo-wordmark span {
  color: var(--color-teal);
}

/* Nav links */
.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1;
  justify-content: center;
}
.nav-link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-charcoal);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  transition: color var(--duration) var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 100%;
  height: 2px;
  background: var(--color-teal);
  transition: right var(--duration) var(--ease);
  border-radius: 1px;
}
.nav-link:hover { color: var(--color-navy); }
.nav-link:hover::after { right: 0; }
.nav-link.active { color: var(--color-teal); }
.nav-link.active::after { right: 0; }

/* Header CTA */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}
.header-login {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-slate);
  transition: color var(--duration);
}
.header-login:hover { color: var(--color-navy); }

/* Mobile hamburger */
.header-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  cursor: pointer;
}
.header-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 1px;
  transition: all 200ms var(--ease);
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-md) var(--space-xl) var(--space-xl);
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link {
  padding: 10px 0;
  font-size: 16px;
  border-bottom: 1px solid var(--color-surface);
}
.mobile-nav .nav-link:last-child { border-bottom: none; }
.mobile-nav .btn { width: 100%; justify-content: center; margin-top: var(--space-md); }

@media (max-width: 900px) {
  .header-nav, .header-login { display: none; }
  .header-hamburger { display: flex; }
}
</style>

<header class="site-header" id="main-header">
  <div class="container">
    <div class="header-inner">
      <!-- Logo -->
      <a href="index.html" class="header-logo" aria-label="RTOSure home">
        <div class="logo-mark" aria-hidden="true"></div>
        <span class="logo-wordmark">RTO<span>Sure</span></span>
      </a>

      <!-- Desktop nav -->
      <nav class="header-nav" aria-label="Main navigation">
        <a href="features.html"    class="nav-link">Features</a>
        <a href="compliance.html"  class="nav-link">Compliance Areas</a>
        <a href="pricing.html"     class="nav-link">Pricing</a>
        <a href="resources.html"   class="nav-link">Resources</a>
        <a href="about.html"       class="nav-link">About</a>
      </nav>

      <!-- Desktop actions -->
      <div class="header-actions">
        <a href="login.html" class="header-login">Log in</a>
        <a href="demo.html" class="btn btn-primary btn-sm">Book a Demo</a>
      </div>

      <!-- Mobile hamburger -->
      <button class="header-hamburger" aria-label="Open menu" aria-expanded="false" id="hamburger-btn">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>

    <!-- Mobile nav drawer -->
    <nav class="mobile-nav" id="mobile-nav" aria-label="Mobile navigation">
      <a href="features.html"    class="nav-link">Features</a>
      <a href="compliance.html"  class="nav-link">Compliance Areas</a>
      <a href="pricing.html"     class="nav-link">Pricing</a>
      <a href="resources.html"   class="nav-link">Resources</a>
      <a href="about.html"       class="nav-link">About</a>
      <a href="login.html"       class="nav-link">Log in</a>
      <a href="demo.html" class="btn btn-primary">Book a Demo</a>
    </nav>
  </div>
</header>

<script>
(function() {
  const header = document.getElementById('main-header');
  const btn    = document.getElementById('hamburger-btn');
  const nav    = document.getElementById('mobile-nav');

  // Sticky shadow on scroll
  window.addEventListener('scroll', () => {
    header.classList.toggle('scrolled', window.scrollY > 10);
  });

  // Mobile toggle
  if (btn && nav) {
    btn.addEventListener('click', () => {
      const open = nav.classList.toggle('open');
      btn.setAttribute('aria-expanded', open);
    });
  }

  // Highlight active nav link
  const path = window.location.pathname.split('/').pop() || 'index.html';
  document.querySelectorAll('.nav-link').forEach(link => {
    if (link.getAttribute('href') === path) link.classList.add('active');
  });
})();
</script>