Upgrade typography to Bricolage Grotesque for a unique student feel

Author: thribhuvan003

public/demo/student.html

@@ -6,7 +6,7 @@
   <title>Tray — Premium Student Portal</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Geist:wght@100..900&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Geist:wght@100..900&display=swap" rel="stylesheet" />
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://unpkg.com/framer-motion@11.18.2/dist/framer-motion.js"></script>
   <script src="https://unpkg.com/lucide@latest"></script>
@@ -18,7 +18,7 @@
       --dust: #908879;
       --ocean: #0066FF;
       --font-display: "Instrument Serif", serif;
-      --font-sans: "Geist", sans-serif;
+      --font-sans: "Bricolage Grotesque", sans-serif;
       --ease: cubic-bezier(0.23, 1, 0.32, 1);
     }
 
@@ -124,7 +124,7 @@
         <div class="w-10 h-10 bg-ink text-white rounded-xl flex items-center justify-center font-display text-2xl italic">T</div>
         <div>
           <h1 class="font-display text-2xl tracking-tight leading-none">Tray<span class="text-dust">.</span></h1>
-          <p id="canteenName" class="text-[9px] font-bold uppercase tracking-[0.2em] text-dust leading-none mt-1">Aditya Engineering</p>
+          <p id="canteenName" class="text-[10px] font-extrabold uppercase tracking-[0.25em] text-dust leading-none mt-1.5">Aditya Engineering</p>
         </div>
       </div>
 
@@ -150,7 +150,7 @@ <h2 class="font-display text-6xl md:text-8xl tracking-tighter italic leading-non
         </div>
 
         <div class="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
-          <button class="cat-pill px-6 py-3 rounded-full bg-ink text-white text-xs font-bold uppercase tracking-widest transition-all">All</button>
+          <button class="cat-pill px-6 py-3 rounded-full bg-ink text-white text-[10px] font-extrabold uppercase tracking-[0.15em] transition-all">All</button>
           <button class="cat-pill px-6 py-3 rounded-full bg-ink/5 text-dust text-xs font-bold uppercase tracking-widest hover:bg-ink/10 transition-all">Mains</button>
           <button class="cat-pill px-6 py-3 rounded-full bg-ink/5 text-dust text-xs font-bold uppercase tracking-widest hover:bg-ink/10 transition-all">Snacks</button>
           <button class="cat-pill px-6 py-3 rounded-full bg-ink/5 text-dust text-xs font-bold uppercase tracking-widest hover:bg-ink/10 transition-all">Drinks</button>

src/app/globals.css

@@ -4,7 +4,7 @@
 
 @theme {
   /* Type */
-  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui;
+  --font-sans: "Bricolage Grotesque", "Geist", "Inter", ui-sans-serif, system-ui;
   --font-display: "Instrument Serif", serif;
 
   /* Premium Palette */
@@ -58,6 +58,6 @@
 }
 
 [data-portal="student"] {
-  --portal-font-sans: "Geist", sans-serif;
+  --portal-font-sans: "Bricolage Grotesque", sans-serif;
   --portal-font-display: "Instrument Serif", serif;
 }