feat: navbar

app/globals.css

@@ -193,9 +193,84 @@ svg {
 }
 
 .home-nav {
+  position: relative;
+  isolation: isolate;
   display: flex;
+  min-height: 76px;
   width: 100%;
+  padding: 10px 12px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  overflow: hidden;
+  border: 1px solid rgb(168 245 255 / 22%);
+  border-radius: 14px;
+  background:
+    linear-gradient(110deg, rgb(0 231 255 / 8%), transparent 34%),
+    rgb(9 14 31 / 82%);
+  box-shadow:
+    0 16px 44px rgb(0 0 0 / 32%),
+    inset 0 0 0 1px rgb(255 255 255 / 4%);
+  backdrop-filter: blur(16px);
+}
+
+.home-nav::after {
+  position: absolute;
+  right: 12%;
+  bottom: -1px;
+  left: 12%;
+  z-index: -1;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgb(0 231 255 / 80%), transparent);
+  box-shadow: 0 0 18px rgb(0 231 255 / 70%);
+  content: "";
+  pointer-events: none;
+}
+
+.home-nav-links {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+}
+
+.home-nav-link {
+  display: inline-flex;
+  min-height: 44px;
+  padding: 0 18px;
+  align-items: center;
   justify-content: center;
+  border: 1px solid rgb(168 245 255 / 20%);
+  border-radius: 8px;
+  color: #d8fbff;
+  font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
+}
+
+.home-nav-link:hover {
+  transform: translateY(-2px);
+  border-color: rgb(168 245 255 / 65%);
+  background: rgb(0 231 255 / 10%);
+  color: #fff;
+}
+
+.home-nav-link[aria-current="page"] {
+  background: rgb(0 231 255 / 8%);
+}
+
+.home-nav-link--docs {
+  border-color: #fff;
+  background: #fff;
+  color: #09101f;
+}
+
+.home-nav-link--docs:hover {
+  border-color: #a8f5ff;
+  background: #a8f5ff;
+  color: #06111a;
 }
 
 .brand-lockup,
@@ -207,6 +282,7 @@ svg {
 }
 
 .brand-lockup {
+  min-width: 0;
   color: #a8f5ff;
   font-family: var(--font-fredoka), var(--font-geist-sans), sans-serif;
   font-size: 1.2rem;
@@ -215,6 +291,7 @@ svg {
 
 .brand-mark {
   display: grid;
+  flex: 0 0 auto;
   width: 54px;
   height: 54px;
   place-items: center;
@@ -421,10 +498,11 @@ svg {
   border: 2px solid rgb(255 255 255 / 20%);
   border-radius: 8px;
   background: var(--service-accent);
-  color: #06111a;
+  color: #fff;
   font-weight: 800;
   line-height: 1.2;
   text-align: center;
+  text-shadow: 0 2px 0 rgb(0 0 0 / 24%);
 }
 
 .service-action-label {
@@ -434,23 +512,18 @@ svg {
 
 .service-card--jellyfin .service-action {
   background: linear-gradient(180deg, #a95cff, #7d3cff);
-  color: #fff;
-  text-shadow: 0 2px 0 rgb(0 0 0 / 24%);
 }
 
 .service-card--seerr .service-action {
   background: linear-gradient(180deg, #ffd166, #ff6b8a);
-  color: #170b14;
 }
 
 .service-card--minecraft .service-action {
   background: linear-gradient(180deg, #35f48a, #13ca69);
-  color: #041411;
 }
 
 .service-card--astroneer .service-action {
   background: linear-gradient(180deg, #ffd66b, #ff9f43);
-  color: #1a1025;
 }
 
 .service-action svg {
@@ -1303,6 +1376,25 @@ h2.pixel-heading {
     padding-top: 24px;
   }
 
+  .home-nav {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .brand-lockup {
+    justify-content: center;
+  }
+
+  .home-nav-links {
+    width: 100%;
+  }
+
+  .home-nav-link {
+    flex: 1;
+    padding: 0 12px;
+  }
+
   .brand-lockup {
     font-size: 1rem;
   }