fix: styling and fonts (#152)

Co-authored-by: Kapil Gowru <kapil-fern@mac.mynetworksettings.com>
Co-authored-by: Deep Singhvi <deep@usebirch.com>

Author: 3 people

fern/assets/ABCMonumentGrotesk-Light.woff2

@@ -1,3 +1,11 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -o-font-smoothing: antialiased;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .fern-logo-container {
   margin-left: -8px;
 }
@@ -46,6 +54,9 @@
   border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
 }
 
+.fern-breadcrumb-item {
+  font-weight: 500;
+}
 
 .fern-mdx-link svg {
   display: none !important;

fern/assets/custom-styles.css

@@ -287,6 +287,9 @@ typography:
   bodyFont:
     name: MonumentGrotesk
     paths:
+      - path: ./assets/ABCMonumentGrotesk-Light.woff2
+        style: normal
+        weight: "300"
       - path: ./assets/ABCMonumentGrotesk-Regular.woff2
         style: normal
         weight: "400"

fern/docs.yml

@@ -19,7 +19,7 @@ hide-feedback: true
     width: 100%;
     height: 50%;
     z-index: -1;
-    opacity: 0.2;
+    opacity: 0.1;
   }
   
   .image-2 {
@@ -33,7 +33,7 @@ hide-feedback: true
     width: 100%;
     height: 50%;
     z-index: 1;
-    opacity: 0.2;
+    opacity: 0.1;
   }
   
   @keyframes bigPulse {
@@ -45,26 +45,46 @@ hide-feedback: true
     0%, 100% { transform: scale(1.1); }
     50% { transform: scale(1); }
   }
-        
+  
+  .bg-noise {
+    background-position: 0 0;
+    background-size: 5rem 10rem;
+    background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/6789751936e0c7bd371e8cf2_noise-full.webp);
+
+    z-index: -1;
+    opacity: 0.7;
+    justify-content: center;
+    align-items: center;
+    width: calc(100% + 5rem);
+    height: calc(100% + 5rem);
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  :is(.dark) .bg-noise {
+    background-color: #0d101a;
+    background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/assemblyai/noise-dark-mode.png);
+  } 
+
+
   .banner {
     border-width: 0px !important;
     border-radius: 16px;
-    background-color: #2A2522; 
     z-index: 2;
-    
-    background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/6789751936e0c7bd371e8cf2_noise-full.webp);
-    background-position: 5px 0;
-    background-size: 5rem 10rem;
     justify-content: center;
     align-items: center;
     height: calc(100% + 5rem);
     display: flex;
     justify-content: space-between;
+    overflow: hidden;
+    position: relative;
+    background-color: #F3EFEC;
   }
 
-  /* Add dark mode styles */
-  :is(.light) .banner {
-    background-color: #F3EFEC;
+  :is(.dark) .banner {
+    background-color: #0d101a;
   }
 
   .fern-card .flex-row.items-start {
@@ -120,31 +140,37 @@ hide-feedback: true
   }
   
   .product-card .fern-card {
-    border-width: 0px !important;
-    background-color: #DFE0F6;
-    background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/6789751936e0c7bd371e8cf2_noise-full.webp);
-    background-position: 5px 0;
-    background-size: 5rem 10rem;
     padding-bottom: 0px !important;
     padding-left: 12px;
     padding-right: 12px;
+    border: 1px solid transparent;
+
+    overflow: hidden;
+    position: relative;
+
+    background-color: #DFE0F6;
+  }
+
+  .product-card .fern-card .text-base {
+    font-weight: 500;
   }
   
   :is(.dark) .product-card .fern-card {
-    background-color: #F4E6DD;
+    background-color: #0d101a;
   }
   
   :is(.dark) .product-card .fern-card .t-muted {
-    background-color: #EECDB8;
-    border-color: #EECDB8;
+    background-color: #0d101a;
+    border-color: #171c29;
   }
   
   :is(.dark) .product-card .fern-card .t-muted p {
-    background-color: #E67E22;
+    background-color: #0d101a;
+
   }
   
   :is(.dark) .product-card .fern-card .text-base {
-    color: black;
+    color: white;
   }
   
   .product-card .fern-card .items-start {
@@ -159,7 +185,7 @@ hide-feedback: true
     border-radius: 12px;
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
-    border-bottom-width: 12px;
+    border-bottom-width: 0px;
     height: 100% !important;
     margin-top: 10px !important;
     height: 85% !important;
@@ -169,6 +195,8 @@ hide-feedback: true
     color: white;
     background-color: #747FDB;
     border-radius: 10px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
     padding-left: 16px;
     padding-right: 16px;
     padding-top: 12px;
@@ -185,18 +213,20 @@ hide-feedback: true
   }
   
   .gradient-card .fern-card {
-    background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/6789751936e0c7bd371e8cf2_noise-full.webp);
-    background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/6789751936e0c7bd371e8cf2_noise-full.webp), linear-gradient(73.23deg, #4F62DB 0%, #9BA3EA 100%);
-    background-position: 0 0;
-    background-size: 100% 100%;
-    border-width: 0px !important;
+    border: 1px solid transparent;
+    background-image: linear-gradient(73.23deg, #4F62DB 0%, #9BA3EA 100%);
+    background-position: -5px -5px;
+    background-size: 102% 102%;
+    position: relative;
+    overflow: hidden;
   }
   
   :is(.dark) .gradient-card .fern-card {
-    background-image: url(https://fern-image-hosting.s3.us-east-1.amazonaws.com/6789751936e0c7bd371e8cf2_noise-full.webp), linear-gradient(73.23deg, #E67E22 0%, #E98B2A 100%);
+    background-image: linear-gradient(73.23deg, #0d101a 0%, #212436 100%);
   }
     
   .gradient-card .fern-card .text-base {
+    font-weight: 500;
     color: white;
   } 
    
@@ -256,8 +286,9 @@ hide-feedback: true
 <div class="image-2"></div>
 
 <div class="fern-card border p-6 center banner">
+  <div class="bg-noise"></div>
   <div class="col">
-    <h3>Industry-leading models on a developer-first API</h3>
+    <h2>Industry-leading models on a developer-first API</h2>
     <p class="t-muted">
       Your AI product strategy depends on the foundation that powers it. Make sure you build on the best. 
     </p>
@@ -270,6 +301,7 @@ hide-feedback: true
       loop
       muted
       playsInline
+      controls
     >
       <source src="https://assemblyaiusercontent.com/landing/videos_landing-fuzzco-preview.mp4" type="video/mp4" />
     </video>
@@ -281,12 +313,15 @@ hide-feedback: true
 <div class="gradient-card">
   <CardGroup cols={2}>
     <Card title="Transcribe an audio file" href="/docs/getting-started/transcribe-an-audio-file">
+      <div class="bg-noise"></div>
       Learn how to transcribe audio files with our SDK
     </Card>
     <Card title="Transcribe streaming audio" href="/docs/getting-started/transcribe-streaming-audio/python">
+      <div class="bg-noise"></div>
       Learn how to transcribe live audio from a microphone
     </Card>
     <Card title="Apply LLMs to audio" href="/docs/getting-started/apply-ll-ms-to-audio-files">
+      <div class="bg-noise"></div>
       Learn how to analyze audio content with LLMs
     </Card>
     <Card title="Cookbooks" href="/docs/build-with-assembly-ai/guides">
@@ -303,20 +338,23 @@ hide-feedback: true
       icon={<img src="https://fern-image-hosting.s3.us-east-1.amazonaws.com/assemblyai/1441.svg" />}
       href="/docs/speech-to-text/speech-recognition"
     >
+    <div class="bg-noise"></div>
     Models for converting audio files, video files, and live speech into text.
     </Card>
     <Card 
       title="LeMUR" 
       icon={<img src="https://fern-image-hosting.s3.us-east-1.amazonaws.com/assemblyai/1442.svg" />}
       href="/docs/lemur/summarize-your-audio-data"
     >
+    <div class="bg-noise"></div>
       LeMUR is a framework for applying Large Language Models (LLMs) to spoken data.
     </Card>
     <Card 
       title="Audio Intelligence" 
       icon={<img src="https://fern-image-hosting.s3.us-east-1.amazonaws.com/assemblyai/1443.svg" />}
       href="/docs"
     >
+    <div class="bg-noise"></div>
       Models for interpreting audio for business and personal workflows.
     </Card>
   </CardGroup>