From b486022c3bc8448f47f41607c6d2647e9034fd92 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Thu, 21 Aug 2025 17:21:39 -0600
Subject: [PATCH] Fix Hero Banner fonts

---
 app/components/Button.js         | 15 +++++----------
 app/components/ContentLockup.js  |  2 +-
 app/components/Footer.js         | 22 +++++++++++-----------
 app/components/Logo.js           |  2 +-
 app/components/MenuBarItem.js    |  8 ++++----
 app/components/NavigationItem.js |  6 ++----
 app/globals.css                  | 19 +++++++++++++++++++
 7 files changed, 43 insertions(+), 31 deletions(-)

diff --git a/app/components/Button.js b/app/components/Button.js
index bfc2dc1..2324ee2 100644
--- a/app/components/Button.js
+++ b/app/components/Button.js
@@ -25,16 +25,11 @@ export default function Button({
   };
 
   const fontStyles = {
-    xsmall:
-      "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
-    small:
-      "font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
-    medium:
-      "font-['Inter'] text-[14px] leading-[16px] font-medium tracking-[0%]",
-    large:
-      "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
-    xlarge:
-      "font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]",
+    xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
+    small: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]",
+    medium: "font-inter text-[14px] leading-[16px] font-medium tracking-[0%]",
+    large: "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]",
+    xlarge: "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]",
   };
 
   const variantStyles = {
diff --git a/app/components/ContentLockup.js b/app/components/ContentLockup.js
index 8083504..b544105 100644
--- a/app/components/ContentLockup.js
+++ b/app/components/ContentLockup.js
@@ -35,7 +35,7 @@ const ContentLockup = ({
         </div>
 
         {/* Description - 20px gap from subtitle at xl */}
-        <p className="font-inter font-[400] text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)] pr-[var(--spacing-scale-032)] md:pr-[var(--spacing-scale-008)] lg:pr-[var(--spacing-scale-032)]">
+        <p className="font-inter font-normal text-[18px] leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] text-[var(--color-content-inverse-primary)]">
           {description}
         </p>
       </div>
diff --git a/app/components/Footer.js b/app/components/Footer.js
index a0b925c..e98da53 100644
--- a/app/components/Footer.js
+++ b/app/components/Footer.js
@@ -51,12 +51,12 @@ export default function Footer() {
             <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1">
               {/* Contact info */}
               <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
-                <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+                <div className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
                   Media Economies Design Lab
                 </div>
                 <a
                   href="mailto:medlab@colorado.edu"
-                  className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+                  className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
                 >
                   medlab@colorado.edu
                 </a>
@@ -76,7 +76,7 @@ export default function Footer() {
                     height={22}
                     className="flex-shrink-0 group-hover:scale-110 transition-transform"
                   />
-                  <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+                  <div className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
                     medlabboulder
                   </div>
                 </a>
@@ -92,7 +92,7 @@ export default function Footer() {
                     height={22}
                     className="flex-shrink-0 grayscale group-hover:scale-110 transition-transform"
                   />
-                  <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+                  <div className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
                     medlabboulder
                   </div>
                 </a>
@@ -103,19 +103,19 @@ export default function Footer() {
             <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end">
               <a
                 href="#"
-                className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+                className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
               >
                 Use cases
               </a>
               <a
                 href="#"
-                className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+                className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
               >
                 Learn
               </a>
               <a
                 href="#"
-                className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+                className="text-[var(--color-content-default-primary)] font-inter text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
               >
                 About
               </a>
@@ -126,25 +126,25 @@ export default function Footer() {
 
           {/* Bottom section */}
           <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] sm:flex-row sm:justify-between sm:items-center w-full">
-            <div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
+            <div className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
               © All right reserved
             </div>
             <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] sm:flex-row sm:gap-[var(--spacing-measures-spacing-040,40px)]">
               <a
                 href="#"
-                className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+                className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
               >
                 Privacy Policy
               </a>
               <a
                 href="#"
-                className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+                className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
               >
                 Terms of Service
               </a>
               <a
                 href="#"
-                className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+                className="text-[var(--color-content-default-secondary)] font-inter text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
               >
                 Cookies Settings
               </a>
diff --git a/app/components/Logo.js b/app/components/Logo.js
index c9057f5..ae8b8ac 100644
--- a/app/components/Logo.js
+++ b/app/components/Logo.js
@@ -123,7 +123,7 @@ export default function Logo({ size = "default", showText = true }) {
       {/* Logo Text - only show if showText is true */}
       {showText && (
         <div
-          className={`font-['Bricolage_Grotesque'] ${
+          className={`font-bricolage-grotesque ${
             size === "homeHeaderXsmall" ||
             size === "homeHeaderSm" ||
             size === "homeHeaderMd" ||
diff --git a/app/components/MenuBarItem.js b/app/components/MenuBarItem.js
index 827776f..757a50e 100644
--- a/app/components/MenuBarItem.js
+++ b/app/components/MenuBarItem.js
@@ -78,13 +78,13 @@ export default function MenuBarItem({
   };
 
   const smallTextStyle =
-    "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]";
+    "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]";
   const mediumTextStyle =
-    "font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]";
+    "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]";
   const largeTextStyle =
-    "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]";
+    "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]";
   const xlargeTextStyle =
-    "font-['Inter'] text-[24px] leading-[28px] font-normal tracking-[0%]";
+    "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]";
 
   const textStyles = {
     default: smallTextStyle,
diff --git a/app/components/NavigationItem.js b/app/components/NavigationItem.js
index 6d6f545..5c148dc 100644
--- a/app/components/NavigationItem.js
+++ b/app/components/NavigationItem.js
@@ -23,10 +23,8 @@ export default function NavigationItem({
 
   // Text styles based on size
   const textStyles = {
-    default:
-      "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
-    xsmall:
-      "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
+    default: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
+    xsmall: "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
   };
 
   const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;
diff --git a/app/globals.css b/app/globals.css
index 09e4337..bdc4871 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,24 @@
 @import "./tailwind.css";
 
+/* Map next/font CSS variables to handy classes */
+.font-inter {
+  font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
+    "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+.font-bricolage-grotesque {
+  font-family: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
+    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+}
+
+/* Set default body text face */
+html,
+body {
+  font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial;
+}
+
 body {
   background-color: black;
   min-height: 100vh;