first pass - kryz inspired

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;
+  }
+}