Initial import of live site
This commit is contained in:
+250
@@ -0,0 +1,250 @@
|
||||
<!-- ============================================================
|
||||
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>
|
||||
Reference in New Issue
Block a user