fix: remove redundant Home nav link, refine brand guidelines and font…

src/components/Navbar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, type JSX } from "react";
-import { Link, useLocation } from "react-router";
+import { Link } from "react-router";
 import { Sun, Moon, Menu, X, ExternalLink } from "lucide-react";
 import { NavLink } from "@/components/NavLink";
 import { useTheme } from "@/hooks/useTheme";
@@ -27,21 +27,11 @@ const NavThemeToggle = ({ theme, onToggle, className }: NavThemeToggleProps): JS
 );
 
 type NavLinksProps = {
-  homeActive: boolean;
   onNavigate?: () => void;
 };
 
-const NavLinks = ({ homeActive, onNavigate }: NavLinksProps): JSX.Element => (
+const NavLinks = ({ onNavigate }: NavLinksProps): JSX.Element => (
   <>
-    <NavLink
-      to="/"
-      className={cn(linkCls, homeActive && activeCls)}
-      aria-current={homeActive ? "page" : undefined}
-      end
-      onClick={onNavigate}
-    >
-      Home
-    </NavLink>
     <NavLink to="/challenges/" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>Challenges</NavLink>
     <NavLink to="/about/" className={linkCls} activeClassName={activeCls} onClick={onNavigate}>About</NavLink>
     <a
@@ -62,8 +52,6 @@ const NavLinks = ({ homeActive, onNavigate }: NavLinksProps): JSX.Element => (
 export const Navbar = (): JSX.Element => {
   const { theme, toggle } = useTheme();
   const [menuOpen, setMenuOpen] = useState(false);
-  const location = useLocation();
-  const homeActive = location.pathname === "/";
 
   const triggerRef = useRef<HTMLButtonElement>(null);
 
@@ -140,14 +128,14 @@ export const Navbar = (): JSX.Element => {
     >
       <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-1.5">
         <Link to="/" aria-label="offon.dev" className="logo-link flex items-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm">
-          {/* Both always in DOM so React Router preloads both; CSS controls visibility. */}
+          {/* Dark logo is high-priority: it's visible in the default (dark) theme. Light logo uses auto priority since it's hidden until the user switches theme. */}
           <img src={logoDark} alt="" aria-hidden="true" width={130} height={33} loading="eager" fetchPriority="high" className="h-8 dark:block hidden" />
-          <img src={logoLight} alt="" aria-hidden="true" width={130} height={33} loading="eager" fetchPriority="high" className="h-8 block dark:hidden" />
+          <img src={logoLight} alt="" aria-hidden="true" width={130} height={33} loading="eager" className="h-8 block dark:hidden" />
         </Link>
 
         {/* Desktop nav */}
         <div className="hidden md:flex items-center gap-8">
-          <NavLinks homeActive={homeActive} />
+          <NavLinks />
           <NavThemeToggle theme={theme} onToggle={toggle} className="hover:border-primary/30" />
         </div>
 
@@ -173,7 +161,7 @@ export const Navbar = (): JSX.Element => {
           id="mobile-menu"
           className="md:hidden border-t border-[hsl(var(--surface-border))] bg-background px-6 py-2 flex flex-col gap-1"
         >
-          <NavLinks homeActive={homeActive} onNavigate={closeMenu} />
+          <NavLinks onNavigate={closeMenu} />
         </div>
       )}
     </nav>

src/components/StarterNudge.tsx

@@ -32,7 +32,7 @@ export const StarterNudge = (): JSX.Element | null => {
           New here?{" "}
           <Link
             to={`/adventures/${starterAdventure.id}/levels/${starterLevel.id}/`}
-            className="font-bold underline decoration-2 underline-offset-2 hover:underline-offset-4 transition-all text-primary-foreground"
+            className="font-semibold underline decoration-2 underline-offset-2 hover:underline-offset-4 transition-all text-primary-foreground"
           >
             Start with {starterAdventure.title}, a {starterAdventure.tags[0]} adventure
           </Link>

src/components/WalkthroughSection.tsx

@@ -71,7 +71,7 @@ export const WalkthroughSection = ({ steps }: WalkthroughSectionProps): JSX.Elem
                 className="flex w-full items-start gap-4 p-5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg"
               >
                 <span
-                  className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold"
+                  className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-semibold"
                   aria-hidden="true"
                 >
                   {i + 1}

src/index.css

@@ -478,7 +478,7 @@ html {
 
   /* Inverse button - for use on primary-colored section backgrounds */
   .btn-inverse {
-    @apply inline-flex items-center gap-2 rounded-md bg-background text-primary font-bold text-sm px-5 py-3 border-2 border-primary transition-all active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply inline-flex items-center gap-2 rounded-md bg-background text-primary font-semibold text-sm px-5 py-3 border-2 border-primary transition-all active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
   }
   .btn-inverse:hover {
     background-color: hsl(var(--primary));
@@ -488,7 +488,7 @@ html {
 
   /* Ghost inverse button - for use on primary-colored section backgrounds */
   .btn-ghost-inverse {
-    @apply inline-flex items-center gap-2 rounded-md bg-transparent text-background font-bold text-sm px-5 py-3 border-2 border-background/70 transition-all active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+    @apply inline-flex items-center gap-2 rounded-md bg-transparent text-background font-semibold text-sm px-5 py-3 border-2 border-background/70 transition-all active:scale-[0.97] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
   }
   .btn-ghost-inverse:hover {
     background-color: hsl(var(--primary-foreground));