src/app.css

@@ -476,6 +476,55 @@ a {
     }
 }
 
+/* ========================================
+   Nav Item and Footer Links Common Styles
+   ======================================== */
+
+.footer-links,
+.nav-item {
+    display: flex;
+    gap: var(--space-lg);
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 480px) {
+        gap: var(--space-md);
+    }
+
+    & a {
+        font-size: var(--font-size-medium);
+        font-weight: var(--font-weight-medium);
+        color: var(--color-text-secondary);
+        text-decoration: none;
+        transition: color var(--transition-fast);
+        border-bottom: 1px solid transparent;
+        padding: var(--space-xs) var(--space-sm);
+        margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-sm));
+        min-height: 44px;
+        display: inline-flex;
+        align-items: center;
+
+        &:hover {
+            color: var(--color-primary);
+            border-bottom-color: var(--color-primary);
+        }
+
+        &:focus-visible {
+            outline: 4px solid var(--color-focus);
+            outline-offset: 4px;
+            border-bottom-color: transparent;
+            box-shadow: 0 0 0 8px var(--color-focus-outline);
+            border-radius: 3px;
+        }
+
+        @media print {
+            &:after {
+                content: none;
+            }
+        }
+    }
+}
+
 /* ========================================
    Responsive Design
    ======================================== */

src/lib/components/Footer.svelte

@@ -35,48 +35,4 @@
         color: var(--color-text-tertiary);
         max-width: 100%;
     }
-
-    .footer-links {
-        display: flex;
-        gap: var(--space-lg);
-        justify-content: center;
-        align-items: center;
-
-        @media (max-width: 480px) {
-            gap: var(--space-md);
-        }
-
-        & a {
-            font-size: var(--font-size-medium);
-            font-weight: var(--font-weight-medium);
-            color: var(--color-text-secondary);
-            text-decoration: none;
-            transition: color var(--transition-fast);
-            border-bottom: 1px solid transparent;
-            padding: var(--space-xs) var(--space-sm);
-            margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-sm));
-            min-height: 44px;
-            display: inline-flex;
-            align-items: center;
-
-            &:hover {
-                color: var(--color-primary);
-                border-bottom-color: var(--color-primary);
-            }
-
-            &:focus-visible {
-                outline: 4px solid var(--color-focus);
-                outline-offset: 4px;
-                border-bottom-color: transparent;
-                box-shadow: 0 0 0 8px var(--color-focus-outline);
-                border-radius: 3px;
-            }
-
-            @media print {
-                &:after {
-                    content: none;
-                }
-            }
-        }
-    }
 </style>

src/lib/components/Navigation.svelte

@@ -0,0 +1,319 @@
+<script lang="ts">
+    import Wordmark from './Wordmark.svelte';
+</script>
+
+<nav id="nav" class="nav" aria-label="Main navigation">
+    <input
+        type="checkbox"
+        id="nav-toggle"
+        class="nav-toggle-input"
+        aria-hidden="true"
+        hidden
+    />
+    <div class="mobile-nav-header">
+        <span class="mobile nav-header-logo">
+            <Wordmark />
+        </span>
+        <label for="nav-toggle" class="nav-toggle" aria-label="Toggle navigation">
+            <span class="nav-toggle-inner">
+                <span class="nav-toggle-line"></span>
+                <span class="nav-toggle-line"></span>
+                <span class="nav-toggle-line"></span>
+            </span>
+        </label>
+    </div>
+    <div class="nav-menu container">
+        <span class="nav-header-logo desktop">
+            <Wordmark />
+        </span>
+        <ul class="nav-list">
+            <li class="nav-item">
+                <a href="#what-we-do" class="nav-link">Services</a>
+            </li>
+            <li class="nav-item">
+                <a href="#impact" class="nav-link">Impact</a>
+            </li>
+            <li class="nav-item">
+                <a href="#how-we-work" class="nav-link">Process</a>
+            </li>
+            <li class="nav-item">
+                <a href="#schedule" class="nav-link">Contact</a>
+            </li>
+        </ul>
+        <div class="nav-item nav-back-to-top">
+            <a href="#header" class="nav-link">Back to top</a>
+        </div>
+    </div>
+</nav>
+
+<style>
+    .nav {
+        background-color: var(--color-bg);
+        background-color: var(--color-bg);
+        border-bottom: 1px solid var(--color-border);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
+        padding: var(--space-md) 0;
+        position: sticky;
+        text-align: center;
+        top: 0;
+        z-index: 100;
+
+        @media (max-width: 768px) {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+    }
+
+    .container,
+    .nav-menu {
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .mobile-nav-header {
+        anchor-name: --mobile-nav-header;
+        display: none;
+        justify-content: space-between;
+        align-items: center;
+
+        @media (max-width: 768px) {
+            display: flex;
+        }
+    }
+
+    .nav-header-logo {
+        color: var(--color-text);
+        display: inline-block;
+        max-width: 250px;
+        padding-left: var(--space-md);
+
+        &.mobile {
+            display: none;
+        }
+
+        @media (max-width: 768px) {
+            &.desktop {
+                display: none;
+            }
+
+            &.mobile {
+                display: inline-block;
+            }
+        }
+    }
+
+    /* Hamburger toggle: mobile only, animates to X when open */
+    .nav-toggle-input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+
+        &:checked {
+            & ~ .mobile-nav-header .nav-toggle .nav-toggle-line {
+                &:nth-child(1) {
+                    transform: translateY(8px) rotate(45deg);
+                }
+
+                &:nth-child(2) {
+                    opacity: 0;
+                }
+
+                &:nth-child(3) {
+                    transform: translateY(-8px) rotate(-45deg);
+                }
+            }
+
+            & ~ .nav-menu {
+                max-height: 80vh;
+                opacity: 1;
+                padding-top: var(--space-md);
+                padding-bottom: var(--space-md);
+                border-top: 1px solid var(--color-border);
+            }
+        }
+    }
+
+    .nav-toggle {
+        display: none;
+        align-items: center;
+        justify-content: flex-end;
+        flex: 0 0 auto;
+        padding: var(--space-sm) var(--space-md);
+        width: calc(24px + var(--space-md) + var(--space-md));
+        height: calc(31px + var(--space-sm) + var(--space-sm));
+        cursor: pointer;
+        color: var(--color-text);
+        background: transparent;
+        border: none;
+        border-radius: var(--space-xs);
+        transition:
+            color 0.2s ease,
+            background-color 0.2s ease;
+
+        @media (max-width: 768px) {
+            display: flex;
+        }
+
+        &:hover {
+            color: var(--color-primary);
+        }
+
+        &:focus-visible {
+            outline: 4px solid var(--color-focus);
+            outline-offset: 4px;
+        }
+    }
+
+    .nav-toggle-inner {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 24px;
+        height: 18px;
+    }
+
+    .nav-toggle-line {
+        display: block;
+        width: 100%;
+        height: 2px;
+        background-color: currentColor;
+        border-radius: 1px;
+        transform-origin: center;
+        transition:
+            transform 0.25s ease,
+            opacity 0.2s ease;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition-duration: 0.01ms;
+        }
+    }
+
+    .nav-list {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .nav-item {
+        margin: 0 var(--space-md);
+    }
+
+    /* Back to top + mobile nav logo: hidden until page is scrolled (CSS scroll-driven animation) */
+    .nav-back-to-top,
+    .nav-header-logo {
+        /* Fallback when scroll-driven animations aren’t supported: always visible */
+        opacity: 1;
+        visibility: visible;
+    }
+
+    /* Mobile: show toggle, collapse menu until opened; menu overlays content via anchor */
+    @media (max-width: 768px) {
+        .nav-menu {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            max-height: 0;
+            overflow: hidden;
+            opacity: 0;
+            padding-top: 0;
+            padding-bottom: 0;
+            border-top: none;
+            transition:
+                max-height 0.3s ease,
+                opacity 0.25s ease,
+                padding 0.25s ease;
+
+            & .nav-list,
+            & .nav-item {
+                width: 100%;
+            }
+
+            & .nav-list {
+                flex-direction: column;
+                gap: 0;
+            }
+
+            & .nav-item {
+                margin: 0;
+                text-align: center;
+
+                & a:hover {
+                    border-bottom-color: transparent;
+                }
+            }
+
+            & .nav-item a,
+            & .nav-back-to-top a {
+                display: block;
+                padding: var(--space-md);
+            }
+
+            @supports (top: anchor(bottom)) {
+                position: fixed;
+                position-anchor: --mobile-nav-header;
+                top: anchor(--mobile-nav-header bottom);
+                left: anchor(--mobile-nav-header left);
+                right: anchor(--mobile-nav-header right);
+                margin: 0;
+                overflow-y: auto;
+                background-color: var(--color-bg);
+                border-bottom: 1px solid var(--color-border);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+                z-index: 99;
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                transition-duration: 0.01ms;
+            }
+        }
+    }
+
+    @supports (animation-timeline: scroll()) {
+        .nav-back-to-top,
+        .nav-header-logo {
+            opacity: 0;
+            visibility: hidden;
+            pointer-events: none;
+            animation: nav-reveal-on-scroll linear;
+            animation-timeline: scroll(root block);
+            animation-range: 300px 400px;
+            animation-fill-mode: both;
+        }
+
+        @keyframes nav-reveal-on-scroll {
+            from {
+                opacity: 0;
+                visibility: hidden;
+                pointer-events: none;
+            }
+
+            to {
+                opacity: 1;
+                visibility: visible;
+                pointer-events: auto;
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .nav-back-to-top,
+            .nav-header-logo {
+                animation: none;
+                opacity: 1;
+                visibility: visible;
+                pointer-events: auto;
+            }
+        }
+    }
+</style>

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
     import Hero from '$lib/components/Hero.svelte';
     import ExperienceSection from '$lib/components/ExperienceSection.svelte';
     import WhatWeDo from '$lib/components/WhatWeDo.svelte';
@@ -9,6 +10,7 @@
     import Footer from '$lib/components/Footer.svelte';
 </script>
 
+<Navigation />
 <Hero />
 <main id="main">
     <ExperienceSection />