From b081b7f7ffc2057234d000e79e70ec58e54d3727 Mon Sep 17 00:00:00 2001
From: Darius Cepulis <dcepulis@mux.com>
Date: Mon, 9 Mar 2026 15:23:36 -0500
Subject: [PATCH] feat(site): darker dark mode footer (#780)

---
 site/src/components/FooterEasterEgg.astro       | 10 +++++-----
 site/src/components/home/Built/Intro.astro      |  2 +-
 site/src/components/home/GetStartedBanner.astro |  2 +-
 site/src/styles/globals.css                     |  1 +
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/site/src/components/FooterEasterEgg.astro b/site/src/components/FooterEasterEgg.astro
index 2429a9dc..a92c81f4 100644
--- a/site/src/components/FooterEasterEgg.astro
+++ b/site/src/components/FooterEasterEgg.astro
@@ -14,9 +14,9 @@ const { variant = 'normal', class: className } = Astro.props;
   ]}
   style="grid-template-rows: 80fr 60fr 45fr 20fr 10fr"
 >
-  <div class="bg-bright-yellow"></div>
-  <div class="bg-gold"></div>
-  <div class="bg-orange"></div>
-  <div class="bg-red"></div>
-  <div class="bg-magenta"></div>
+  <div class="bg-bright-yellow dark:bg-gold"></div>
+  <div class="bg-gold dark:bg-orange"></div>
+  <div class="bg-orange dark:bg-red"></div>
+  <div class="bg-red dark:bg-magenta"></div>
+  <div class="bg-magenta dark:bg-magenta-dark"></div>
 </div>
diff --git a/site/src/components/home/Built/Intro.astro b/site/src/components/home/Built/Intro.astro
index 0b14feef..941e532d 100644
--- a/site/src/components/home/Built/Intro.astro
+++ b/site/src/components/home/Built/Intro.astro
@@ -5,7 +5,7 @@
   class="rounded-xs border border-manila-dark bg-faded-black p-5 md:p-10 lg:p-15"
 >
   <p class="text-p2 text-manila-light">
-    VideoJS 10 is complete ground-up rewrite of the player for the modern web.
+    Video.js 10 is complete ground-up rewrite of the player for the modern web.
     The UI is separated from the underlying media renderer. Every component is
     independent and works together through open API contracts. We've structured
     the project for modern JavaScript bundlers to support tree-shaking and
diff --git a/site/src/components/home/GetStartedBanner.astro b/site/src/components/home/GetStartedBanner.astro
index 2267047a..9e1fff9f 100644
--- a/site/src/components/home/GetStartedBanner.astro
+++ b/site/src/components/home/GetStartedBanner.astro
@@ -6,7 +6,7 @@ import GetStartedLink from '../NavBar/GetStartedLink';
 
 <section class="mx-auto w-full max-w-305 px-5">
   <div
-    class="group relative mb-20 items-center bg-faded-black py-2.5 text-center text-manila-light transition-colors duration-200 has-[a:hover]:text-faded-black lg:mb-30 lg:flex lg:text-left lg:duration-300 dark:bg-manila-light dark:text-faded-black dark:has-[a:hover]:text-manila-light"
+    class="group relative mb-34 items-center bg-faded-black py-2.5 text-center text-manila-light transition-colors duration-200 has-[a:hover]:text-faded-black lg:mb-40 lg:flex lg:text-left lg:duration-300 dark:bg-manila-light dark:text-faded-black dark:has-[a:hover]:text-manila-light"
   >
     <div
       class="absolute top-(--top) right-2.5 bottom-2.5 left-2.5 z-0 bg-orange duration-200 group-has-[a:hover]:top-2.5 lg:top-2.5 lg:left-(--lg-left) lg:duration-300 lg:group-has-[a:hover]:left-2.5 dark:bg-black"
diff --git a/site/src/styles/globals.css b/site/src/styles/globals.css
index 6e48aba9..f512d691 100644
--- a/site/src/styles/globals.css
+++ b/site/src/styles/globals.css
@@ -73,6 +73,7 @@
   --color-orange: #ff6200;
   --color-red: #eb3132;
   --color-magenta: #cc3566;
+  --color-magenta-dark: #922e4f;
 
   /* Typography */
   --tracking-*: initial;