From ca7509effef0df7054992dfb573c04df981132a8 Mon Sep 17 00:00:00 2001
From: Mudskipper <a.dawson@mu.se>
Date: Thu, 16 Oct 2025 14:00:14 +1100
Subject: [PATCH] Update ReleaseVideo section styling to match new branding

- Change background to bg-background-medium
- Update CTA button styling: accent color, rounded-full, white text
- Match button style with primary download and Sign up buttons
---
 src/components/homepage/ReleaseVideo.astro | 2 +-
 src/components/video/FeaturedVideo.jsx     | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/homepage/ReleaseVideo.astro b/src/components/homepage/ReleaseVideo.astro
index 3f1eaae..7ddb467 100644
--- a/src/components/homepage/ReleaseVideo.astro
+++ b/src/components/homepage/ReleaseVideo.astro
@@ -21,7 +21,7 @@ const promoVideo = {
   videoURL:"https://www.youtube-nocookie.com/embed/UGiJCTu67Ak?autoplay=1",
 }
 ---
-<section class="bg-slate-100">
+<section class="bg-background-medium">
   <div class="mx-auto px-6 xs:px-12 md:px-8 py-6 md:py-8 lg:py-12 max-w-screen-lg">
     <div class="flex flex-col md:flex-row gap-12 md:gap-16">
       <!-- First Video Column -->
diff --git a/src/components/video/FeaturedVideo.jsx b/src/components/video/FeaturedVideo.jsx
index 5b74e40..c61a0bc 100644
--- a/src/components/video/FeaturedVideo.jsx
+++ b/src/components/video/FeaturedVideo.jsx
@@ -33,13 +33,11 @@ function FeaturedVideo(props) {
           <h3 className={`content-center ${textColor}`}>{title}</h3>
           {CTA && (
             <a
-              className="py-3 px-4 rounded-md justify-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit"
+              className="py-2 px-4 rounded-full justify-center bg-accent text-white hover:opacity-90 transition-opacity w-fit font-semibold"
               href={ctaURL}
               onClick={() => handleCTAClick()}
             >
-              <p className={`text-slate-900 leading-none font-semibold`}>
-                {ctaText}
-              </p>
+              {ctaText}
             </a>
           )}
         </div>