Apply La Huasca brand colors across layout, nav, login, admin, user and home

src/components/MeasuredText.tsx

@@ -24,11 +24,11 @@ export default function MeasuredText({ text }: MeasuredTextProps) {
 
   return (
     <div>
-      <span ref={ref} style={{ fontSize: '2rem', fontWeight: 700 }}>
+      <span ref={ref} style={{ fontSize: '2rem', fontWeight: 700, color: '#E8A849' }}>
         {text}
       </span>
       {height !== null && (
-        <p style={{ color: 'dimgray' }}>Measured height: {height.toFixed(2)}px</p>
+        <p style={{ color: 'rgba(245,240,232,0.6)' }}>Measured height: {height.toFixed(2)}px</p>
       )}
     </div>
   );

src/components/Navbar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
@@ -15,6 +16,7 @@ const links = [
 export default function Navbar() {
   const [auth, setAuth] = useState<{ authenticated: boolean; role?: string } | null>(null);
   const router = useRouter();
+  const pathname = usePathname();
 
   useEffect(() => {
     fetch('/api/auth/me', { credentials: 'same-origin' })
@@ -29,28 +31,46 @@ export default function Navbar() {
     router.push('/login');
   };
 
+  const navStyle: React.CSSProperties = {
+    position: 'sticky',
+    top: 0,
+    display: 'flex',
+    gap: '1.5rem',
+    alignItems: 'center',
+    padding: '0.75rem 1.5rem',
+    background: '#010D1E',
+    color: '#f5f0e8',
+    boxShadow: '0 2px 8px rgba(1,13,30,0.25)',
+    zIndex: 50,
+  };
+
+  const linkBase: React.CSSProperties = {
+    color: 'rgba(245,240,232,0.85)',
+    textDecoration: 'none',
+    fontSize: '14px',
+    padding: '6px 0',
+    borderBottom: '1.5px solid transparent',
+    transition: 'color .15s, border-color .15s',
+  };
+
+  const activeLink: React.CSSProperties = {
+    color: '#E8A849',
+    borderBottomColor: '#E8A849',
+  };
+
   return (
-    <nav
-      style={{
-        position: 'sticky',
-        top: 0,
-        display: 'flex',
-        gap: '1.5rem',
-        alignItems: 'center',
-        padding: '1rem 2rem',
-        background: '#1a1a1a',
-        color: '#fff',
-        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-      }}
-    >
-      <Link href="/" style={{ fontWeight: 700, color: '#fff', textDecoration: 'none' }}>
+    <nav style={navStyle}>
+      <Link href="/" style={{ fontWeight: 700, color: '#E8A849', textDecoration: 'none', fontSize: '20px', fontStyle: 'italic' }}>
         La Huasca
       </Link>
       {links.map((link) => (
         <Link
           key={link.href}
           href={link.href}
-          style={{ color: '#e5e5e5', textDecoration: 'none' }}
+          style={{
+            ...linkBase,
+            ...(pathname === link.href ? activeLink : {}),
+          }}
         >
           {link.label}
         </Link>
@@ -61,11 +81,13 @@ export default function Navbar() {
           style={{
             marginLeft: 'auto',
             background: 'transparent',
-            border: '1px solid #fff',
-            color: '#fff',
-            padding: '0.4rem 0.75rem',
-            borderRadius: '4px',
+            border: '1px solid #E8A849',
+            color: '#E8A849',
+            padding: '0.4rem 0.9rem',
+            borderRadius: '999px',
             cursor: 'pointer',
+            fontSize: '13px',
+            fontWeight: 600,
           }}
         >
           Logout
@@ -75,11 +97,13 @@ export default function Navbar() {
           href="/login"
           style={{
             marginLeft: 'auto',
-            color: '#e5e5e5',
+            color: '#010D1E',
             textDecoration: 'none',
-            border: '1px solid #e5e5e5',
-            padding: '0.4rem 0.75rem',
-            borderRadius: '4px',
+            background: '#E8A849',
+            padding: '0.45rem 0.9rem',
+            borderRadius: '999px',
+            fontSize: '13px',
+            fontWeight: 600,
           }}
         >
           Login