Fixed topbar

src/styles.scss

@@ -21,11 +21,11 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
 
 /* ---- Custom variables ---- */
 :root {
-  --app-topbar-bg: #{mat.get-theme-color($light-theme, surface)};
   --app-bg: #{mat.get-theme-color($light-theme, surface-container-low)};
   --app-fg: #{mat.get-theme-color($light-theme, on-surface)};
   --app-logo-bg: #313131;
   --app-card-background: #fafafa;
+  --app-topbar-bg: var(--app-card-background);
 
   --card-radius: 18px;
   --card-bg: var(--app-card-background);
@@ -37,11 +37,11 @@ $dark-theme: mat.define-theme((color: (theme-type: dark, primary: mat.$cyan-pale
 }
 
 .dark {
-  --app-topbar-bg: #{mat.get-theme-color($dark-theme, surface-container-highest)};
   --app-bg: #{mat.get-theme-color($dark-theme,surface-variant)};
   --app-fg: #{mat.get-theme-color($dark-theme, on-surface)};
   --app-card-background: #313131;
   --app-logo-bg: #313131;
+  --app-topbar-bg: var(--app-card-background);
 
   --card-bg: var(--app-card-background);
 
@@ -424,77 +424,6 @@ app-root {
   background: var(--app-bg);
 }
 
-/* ---- Topbar ---- */
-app-topbar {
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  display: block;
-}
-
-.topbar {
-  backdrop-filter: saturate(1.1) blur(8px);
-  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
-  border-bottom: 1px solid rgba(0, 0, 0, .08);
-  display: flex;
-  align-items: center;
-  padding: clamp(0.5rem, 1vw, 1rem);
-  color: var(--app-fg);
-}
-
-.topbar .brand {
-  display: flex;
-  align-items: center;
-  gap: clamp(0.4rem, 1vw, 0.6rem);
-  color: inherit;
-  text-decoration: none;
-}
-
-.topbar .brand .logo-dot {
-  width: clamp(36px, 10vw, 48px);
-  height: clamp(36px, 10vw, 48px);
-  border-radius: 50%;
-}
-
-.topbar .brand .brand-text {
-  font-weight: 600;
-  letter-spacing: .2px;
-  font-size: clamp(1rem, 3vw, 1.2rem);
-}
-
-.topbar .nav {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: clamp(0.25rem, 1vw, 0.5rem);
-  justify-content: center;
-}
-
-.topbar .nav-menu-btn {
-  display: none;
-}
-
-.topbar .spacer {
-  flex: 1;
-}
-
-@media (max-width: 760px) {
-  .topbar .nav {
-    display: none;
-  }
-
-  .topbar .nav-menu-btn {
-    display: inline-flex;
-  }
-
-  .topbar .brand {
-    flex: unset;
-  }
-
-  /* Allow brand to sit properly if nav falls back to menu button */
-}
-
 /* ---- Menu Overrides ---- */
 .mat-mdc-menu-item .mdc-list-item__primary-text {
   display: flex;
@@ -556,7 +485,8 @@ app-topbar {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-  flex: 0 0 clamp(300px, 100%, 425px);
+  flex: 0 1 425px;
+  max-width: 100%;
 }
 
 .hero .photo img {