Refine header spacing and editorial typography

Author: biru-codeastromer

web/app/fonts/CMUSerif-Bold.ttf

@@ -3,8 +3,8 @@
 @tailwind utilities;
 
 :root {
-  --page: #faf7fc;
-  --page-soft: #f4eef4;
+  --page: #fef7ff;
+  --page-soft: #fdf7ff;
   --paper: #fffdfc;
   --paper-strong: #ffffff;
   --paper-muted: #f7f1eb;
@@ -32,28 +32,16 @@ html {
 
 body {
   margin: 0;
+  font-family: var(--font-serif);
   font-weight: 400;
-  letter-spacing: 0.005em;
   color: var(--ink);
-  background:
-    linear-gradient(to right, transparent 80px, rgba(185, 174, 195, 0.45) 80px, rgba(185, 174, 195, 0.45) 81px, transparent 81px, transparent calc(100% - 81px), rgba(185, 174, 195, 0.45) calc(100% - 81px), rgba(185, 174, 195, 0.45) calc(100% - 80px), transparent calc(100% - 80px)),
-    linear-gradient(180deg, var(--page) 0%, var(--page-soft) 48%, #f8f2ea 100%);
+  background: var(--page);
   min-height: 100vh;
   position: relative;
 }
 
 body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  pointer-events: none;
-  background:
-    radial-gradient(circle at top left, rgba(61, 104, 220, 0.08), transparent 24%),
-    radial-gradient(circle at top right, rgba(244, 216, 202, 0.3), transparent 28%),
-    radial-gradient(rgba(110, 98, 114, 0.14) 0.8px, transparent 0.8px);
-  background-size: auto, auto, 16px 16px;
-  opacity: 0.38;
-  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 78%);
+  content: none;
 }
 
 ::selection {
@@ -68,8 +56,8 @@ a {
 .site-shell {
   margin: 0 auto;
   width: 100%;
-  max-width: 1260px;
-  padding: 0 28px 88px;
+  max-width: 1320px;
+  padding: 0 32px 96px;
 }
 
 .site-panel {
@@ -106,7 +94,7 @@ a {
   gap: 10px;
   font-family: var(--font-serif);
   font-size: 18px;
-  font-style: normal;
+  font-style: italic;
   font-weight: 400;
   letter-spacing: 0.01em;
   color: var(--muted);
@@ -128,31 +116,33 @@ a {
 }
 
 .button-primary {
+  font-family: var(--font-mono);
   border-radius: 999px;
   background: var(--accent);
   color: #fffdfa;
-  box-shadow: 0 12px 24px rgba(61, 104, 220, 0.18);
-  transition: transform 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
+  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
 }
 
 .button-primary:hover,
 .button-secondary:hover {
-  transform: translateY(-1px);
+  transform: none;
 }
 
 .button-primary:hover {
-  box-shadow: 0 16px 28px rgba(61, 104, 220, 0.24);
+  background: #2c56d1;
 }
 
 .button-secondary {
+  font-family: var(--font-mono);
   border-radius: 999px;
   border: 1px solid var(--line-strong);
   background: rgba(255, 255, 255, 0.74);
   color: var(--ink);
-  transition: transform 160ms ease, border-color 160ms ease;
+  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
 }
 
 .eyebrow-tab {
+  font-family: var(--font-mono);
   border-bottom: 1px solid rgba(185, 174, 195, 0.5);
   padding: 16px 12px;
   text-align: center;
@@ -172,6 +162,7 @@ a {
 }
 
 .editorial-link {
+  font-family: var(--font-mono);
   color: var(--muted);
   text-decoration: underline;
   text-decoration-color: rgba(106, 100, 114, 0.45);
@@ -198,6 +189,7 @@ a {
   align-items: center;
   gap: 10px;
   padding: 0;
+  font-family: var(--font-mono);
   font-size: 13px;
   color: var(--muted);
 }
@@ -212,6 +204,7 @@ a {
 }
 
 .footer-link {
+  font-family: var(--font-mono);
   color: var(--muted);
   text-decoration: underline;
   text-decoration-color: rgba(106, 100, 114, 0.34);
@@ -224,10 +217,38 @@ a {
   text-decoration-color: rgba(29, 26, 36, 0.55);
 }
 
+.nav-link {
+  display: inline-flex;
+  align-items: center;
+  border-bottom: 1px solid rgba(29, 26, 36, 0.58);
+  padding-bottom: 1px;
+  font-family: var(--font-mono);
+  font-size: 0.95rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--ink);
+  transition: color 160ms ease, border-color 160ms ease;
+}
+
+.nav-link:hover {
+  color: rgba(29, 26, 36, 0.72);
+  border-bottom-color: rgba(29, 26, 36, 0.34);
+}
+
+.nav-link.is-active {
+  border-bottom-color: rgba(29, 26, 36, 0.9);
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: var(--font-mono);
+}
+
 @media (max-width: 768px) {
   body {
-    background:
-      linear-gradient(180deg, var(--page) 0%, var(--page-soft) 52%, #f8f2ea 100%);
+    background: var(--page);
   }
 
   .site-shell {

web/app/fonts/CMUSerif-Italic.ttf

@@ -1,28 +1,29 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
-import { IBM_Plex_Mono } from "next/font/google";
 
 import { Nav } from "@/components/nav";
 import { Providers } from "@/components/providers";
 import { SiteFooter } from "@/components/site-footer";
 import "./globals.css";
 
-const josefinSans = localFont({
+const cmuSerif = localFont({
   src: [
-    { path: "./fonts/JosefinSans-Light.ttf", weight: "300", style: "normal" },
-    { path: "./fonts/JosefinSans-Regular.ttf", weight: "400", style: "normal" },
-    { path: "./fonts/JosefinSans-Medium.ttf", weight: "500", style: "normal" },
-    { path: "./fonts/JosefinSans-SemiBold.ttf", weight: "600", style: "normal" }
+    { path: "./fonts/CMUSerif-Regular.ttf", weight: "400", style: "normal" },
+    { path: "./fonts/CMUSerif-Italic.ttf", weight: "400", style: "italic" },
+    { path: "./fonts/CMUSerif-Bold.ttf", weight: "700", style: "normal" }
   ],
-  variable: "--font-sans",
+  variable: "--font-serif",
   display: "swap"
 });
-const yesevaOne = localFont({
-  src: [{ path: "./fonts/YesevaOne-Regular.ttf", weight: "400", style: "normal" }],
-  variable: "--font-serif",
+const plexMono = localFont({
+  src: [
+    { path: "./fonts/IBMPlexMono-Regular.woff2", weight: "400", style: "normal" },
+    { path: "./fonts/IBMPlexMono-Medium.woff2", weight: "500", style: "normal" },
+    { path: "./fonts/IBMPlexMono-SemiBold.woff2", weight: "600", style: "normal" }
+  ],
+  variable: "--font-mono",
   display: "swap"
 });
-const plexMono = IBM_Plex_Mono({ subsets: ["latin"], variable: "--font-mono", weight: ["400", "500"] });
 
 export const metadata: Metadata = {
   metadataBase: new URL("https://world-model-gym.vercel.app"),
@@ -61,11 +62,11 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={`${josefinSans.variable} ${yesevaOne.variable} ${plexMono.variable}`}>
-      <body className="font-[var(--font-sans)] text-[var(--ink)]">
+    <html lang="en" className={`${cmuSerif.variable} ${plexMono.variable}`}>
+      <body className="text-[var(--ink)]">
         <Providers>
           <Nav />
-          <main className="site-shell pt-8">{children}</main>
+          <main className="site-shell pt-[108px] md:pt-[124px]">{children}</main>
           <SiteFooter />
         </Providers>
       </body>

web/app/fonts/CMUSerif-Regular.ttf

@@ -14,57 +14,60 @@ export function Nav() {
   const pathname = usePathname();
 
   return (
-    <header className="site-shell sticky top-0 z-30 border-b border-[rgba(185,174,195,0.42)] bg-[rgba(250,247,252,0.9)] py-5 backdrop-blur">
-      <div className="grid items-center gap-5 md:grid-cols-[auto_1fr_auto]">
-        <div className="flex items-center gap-3">
-          <div className="flex h-11 w-11 items-center justify-center rounded-[14px] border border-[rgba(29,26,36,0.12)] bg-[var(--ink)] font-[var(--font-serif)] text-lg font-semibold text-white">
+    <header className="fixed inset-x-0 top-0 z-40 bg-[rgba(254,247,255,0.96)] font-[var(--font-mono)]">
+      <div className="mx-auto flex min-h-[78px] max-w-[1320px] items-center justify-between gap-8 px-6 py-4 md:px-10 xl:px-12">
+        <Link href="/" className="flex shrink-0 items-center gap-4">
+          <div className="flex h-10 w-10 items-center justify-center rounded-[8px] bg-[var(--ink)] text-[1.35rem] font-semibold text-white">
             W
           </div>
-          <div>
-            <p className="text-sm font-semibold leading-none text-[var(--ink)]">
-              WorldModel <span className="brand-accent">Gym</span>
+          <div className="leading-none">
+            <p className="text-[0.95rem] font-medium tracking-[-0.03em] text-[var(--ink)]">
+              WorldModel Gym
             </p>
-            <p className="mt-1 text-[10px] font-semibold uppercase tracking-[0.22em] text-[var(--muted)]">
+            <p className="mt-1 text-[0.62rem] uppercase tracking-[0.28em] text-[var(--muted)]">
               Research Benchmark Platform
             </p>
           </div>
-        </div>
+        </Link>
 
-        <nav className="hidden items-center justify-center gap-8 text-sm font-medium text-[var(--muted)] md:flex">
+        <nav className="hidden flex-1 items-center justify-center gap-7 text-sm text-[var(--ink)] lg:flex xl:gap-10">
           {links.map((link) => (
             <Link
               key={link.href}
               href={link.href}
-              className={`editorial-link ${pathname === link.href ? "text-[var(--ink)] !decoration-[rgba(29,26,36,0.55)]" : ""}`}
+              className={`nav-link ${pathname === link.href ? "is-active" : ""}`}
             >
               {link.label}
             </Link>
           ))}
+        </nav>
+
+        <div className="flex items-center justify-end gap-4">
+          <a
+            href="https://github.com/biru-codeastromer/WorldModel-Gym"
+            target="_blank"
+            rel="noreferrer"
+            className="nav-link hidden lg:inline-flex"
+          >
+            GitHub
+          </a>
           <Link
             href="/upload"
-            className="button-primary px-5 py-3 text-sm font-semibold"
+            className="button-primary px-5 py-2.5 text-sm font-medium"
           >
             Get Started
           </Link>
           <a
             href="https://github.com/biru-codeastromer/WorldModel-Gym"
             target="_blank"
             rel="noreferrer"
-            className="button-secondary px-4 py-3 text-sm font-semibold"
+            className="nav-link inline-flex lg:hidden"
           >
             GitHub
           </a>
-        </nav>
-
-        <div className="flex items-center justify-end gap-3">
-          <Link
-            href="/upload"
-            className="button-primary px-4 py-3 text-sm font-semibold md:hidden"
-          >
-            Start
-          </Link>
         </div>
       </div>
+      <div className="pointer-events-none absolute inset-x-0 top-full h-6 bg-gradient-to-b from-[rgba(254,247,255,0.92)] to-transparent" />
     </header>
   );
 }