#34

frontend/src/index.css

@@ -36,10 +36,11 @@
     --theme-link: 221.2 83.2% 53.3%;
     --top-nav-root-bg-mobile: #fef08a;
     --top-nav-root-bg-desktop: #fefce8;
-    --top-nav-highlight-bg: #fef08a;
+    --top-nav-active-bg: #fef08a;
     --top-nav-submenu-bg: #fef08a;
     --top-nav-mobile-active-bg: #fefce8;
-    --top-nav-link: #db2777;
+    --top-nav-brand-link: #db2777;
+    --top-nav-menu-link: #1d4ed8;
 
     --tag-colour-deerjikist: #9f1239;
     --tag-colour-deerjikist-hover: #b62a51;
@@ -86,10 +87,11 @@
     --ring: 212.7 26.8% 83.9%;
     --top-nav-root-bg-mobile: #230505;
     --top-nav-root-bg-desktop: #230505;
-    --top-nav-highlight-bg: #450a0a;
+    --top-nav-active-bg: #450a0a;
     --top-nav-submenu-bg: #450a0a;
     --top-nav-mobile-active-bg: #450a0a;
-    --top-nav-link: #f9a8d4;
+    --top-nav-brand-link: #f9a8d4;
+    --top-nav-menu-link: #93c5fd;
   }
 
   body
@@ -212,7 +214,6 @@ body
 .top-nav-root
 {
   background: var(--top-nav-root-bg-mobile);
-  border-color: transparent;
 }
 
 @media (min-width: 768px)
@@ -223,19 +224,33 @@ body
   }
 }
 
-.top-nav-link
+.top-nav-brand-link,
+.top-nav-mobile-toggle
 {
-  color: var(--top-nav-link);
+  color: var(--top-nav-brand-link);
 }
 
-.top-nav-link:hover
+.top-nav-brand-link:hover,
+.top-nav-mobile-toggle:hover
 {
-  color: color-mix(in oklab, var(--top-nav-link), white 18%);
+  color: color-mix(in oklab, var(--top-nav-brand-link), white 18%);
+}
+
+.top-nav-menu-link,
+.top-nav-mobile-row
+{
+  color: var(--top-nav-menu-link);
+}
+
+.top-nav-menu-link:hover,
+.top-nav-mobile-row:hover
+{
+  color: color-mix(in oklab, var(--top-nav-menu-link), white 18%);
 }
 
 .top-nav-highlight
 {
-  background: var(--top-nav-highlight-bg);
+  background: var(--top-nav-active-bg);
 }
 
 .top-nav-submenu