first pass - kryz inspired

src/app/navbar/navbar.component.html

@@ -0,0 +1,28 @@
+<nav class="navbar" role="navigation" aria-label="Main navigation">
+  <div class="container navbar-inner">
+    <a routerLink="/" class="navbar-brand" routerLinkActive="active">
+      <img src="assets/svg/small-flower.svg" alt="" class="brand-flower" aria-hidden="true">
+      <span class="brand-name">
+        <span class="brand-mountain">K</span>MOUNTAIN
+        <span class="brand-accent">FLOWER</span>
+      </span>
+      <span class="brand-tagline">Community Radio — Est. 1987</span>
+    </a>
+
+    <button class="navbar-toggle" aria-label="Toggle menu" (click)="toggleMenu()">
+      <span class="bar"></span>
+      <span class="bar"></span>
+      <span class="bar"></span>
+    </button>
+
+    <div class="navbar-menu" [class.open]="menuOpen">
+      <ul class="nav-links">
+        <li><a routerLink="/about" routerLinkActive="active" (click)="closeMenu()">About</a></li>
+        <li><a routerLink="/schedule" routerLinkActive="active" (click)="closeMenu()">Schedule</a></li>
+        <li><a routerLink="/events" routerLinkActive="active" (click)="closeMenu()">Events</a></li>
+        <li><a routerLink="/contact" routerLinkActive="active" (click)="closeMenu()">Contact</a></li>
+      </ul>
+      <a routerLink="/donate" class="btn btn-donate-nav" (click)="closeMenu()">Donate Now</a>
+    </div>
+  </div>
+</nav>

src/app/navbar/navbar.component.scss

@@ -0,0 +1,143 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+
+.navbar {
+  background: var(--color-primary-dark);
+  padding: $spacing-sm 0;
+  position: sticky;
+  top: 0;
+  z-index: $z-sticky;
+  box-shadow: $shadow-md;
+}
+
+.navbar-inner {
+  @include flex-between;
+}
+
+.navbar-brand {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  text-decoration: none;
+  color: var(--color-white);
+}
+
+.brand-flower {
+  width: 36px;
+  height: 36px;
+}
+
+.brand-name {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.1;
+}
+
+.brand-mountain {
+  font-family: var(--font-heading);
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--color-white);
+  letter-spacing: 0.08em;
+}
+
+.brand-accent {
+  font-family: var(--font-heading);
+  font-size: 1.1rem;
+  font-weight: 700;
+  @include gradient-text(var(--color-accent-light), var(--color-accent));
+}
+
+.brand-tagline {
+  font-size: 0.65rem;
+  color: var(--color-medium);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.navbar-toggle {
+  display: none;
+  flex-direction: column;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: $spacing-xs;
+
+  .bar {
+    display: block;
+    width: 24px;
+    height: 2px;
+    background: var(--color-white);
+    border-radius: 1px;
+    transition: $transition-normal;
+  }
+}
+
+.navbar-menu {
+  display: flex;
+  align-items: center;
+  gap: $spacing-lg;
+}
+
+.nav-links {
+  display: flex;
+  list-style: none;
+  gap: $spacing-md;
+
+  a {
+    color: var(--color-light);
+    font-size: 0.95rem;
+    font-weight: 500;
+    padding: $spacing-xs $spacing-sm;
+    border-radius: $radius-sm;
+    transition: color $transition-fast, background $transition-fast;
+
+    &:hover,
+    &.active {
+      color: var(--color-accent-light);
+      background: rgba(232, 122, 46, 0.1);
+    }
+  }
+}
+
+.btn-donate-nav {
+  @include button-style($accent-orange, $neutral-white, $accent-orange-dark);
+  padding: $spacing-xs $spacing-md;
+  font-size: 0.9rem;
+}
+
+// Responsive
+@media (max-width: #{$bp-md - 1px}) {
+  .navbar-toggle {
+    display: flex;
+  }
+
+  .navbar-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--color-primary-dark);
+    flex-direction: column;
+    padding: $spacing-md;
+    gap: $spacing-md;
+    box-shadow: $shadow-lg;
+    transform: translateY(-10px);
+    opacity: 0;
+    pointer-events: none;
+    transition: transform $transition-normal, opacity $transition-normal;
+
+    &.open {
+      transform: translateY(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .nav-links {
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+  }
+}

src/app/navbar/navbar.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+@Component({
+  selector: 'app-navbar',
+  standalone: true,
+  imports: [RouterLink, RouterLinkActive],
+  templateUrl: './navbar.component.html',
+  styleUrl: './navbar.component.scss',
+})
+export class NavbarComponent {
+  menuOpen = false;
+
+  toggleMenu(): void {
+    this.menuOpen = !this.menuOpen;
+  }
+
+  closeMenu(): void {
+    this.menuOpen = false;
+  }
+}