From d66e2ef31c7a7f6a41e65017af06585591c6dc44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efe=20G=C3=B6kdemir?= <efe@rexcode.co.uk>
Date: Mon, 21 Sep 2026 14:58:27 +0300
Subject: [PATCH] fix: improve contrast for gradient actions

---
 src/app/globals.css            | 6 ++++++
 src/components/button.tsx      | 2 +-
 src/components/navbar.tsx      | 4 ++--
 src/components/pill-button.tsx | 4 ++--
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index f27f489..dc6b946 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -19,6 +19,8 @@
 
   /* Keep in sync with BRAND_GRADIENT in components/logo.tsx — same colors, same stops, same angle. */
   --gradient-sunset: linear-gradient(135deg, var(--violet) 0%, var(--magenta) 55%, var(--amber) 100%);
+  /* The darker stops keep white action text at or above 4.5:1 across the gradient. */
+  --gradient-action: linear-gradient(135deg, #5b45a5 0%, #a43b72 55%, #8a6200 100%);
   --gradient-glow: radial-gradient(60% 60% at 50% 0%, rgba(167, 139, 250, 0.35), transparent 70%);
 }
 
@@ -56,6 +58,10 @@ body {
   background-image: var(--gradient-sunset);
 }
 
+.bg-gradient-action {
+  background-image: var(--gradient-action);
+}
+
 .border-gradient {
   position: relative;
   border: 1px solid transparent;
diff --git a/src/components/button.tsx b/src/components/button.tsx
index d142875..74d59eb 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -4,7 +4,7 @@ export type ButtonVariant = 'primary' | 'secondary' | 'danger';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
 const VARIANT_CLASSES: Record<ButtonVariant, string> = {
-  primary: 'bg-gradient-sunset text-white shadow-lg shadow-violet/20 hover:opacity-90',
+  primary: 'bg-gradient-action text-white shadow-lg shadow-violet/20 hover:opacity-90',
   secondary: 'border border-border hover:bg-surface',
   danger: 'border border-red-900/50 text-red-300 hover:bg-red-950/30',
 };
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 0e207ac..fc1fbf2 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -106,7 +106,7 @@ export function Navbar() {
               </Link>
               <Link
                 href="/register"
-                className="rounded-full bg-gradient-sunset px-4 py-1.5 font-medium text-white shadow-lg shadow-violet/20 hover:opacity-90"
+                className="rounded-full bg-gradient-action px-4 py-1.5 font-medium text-white shadow-lg shadow-violet/20 hover:opacity-90"
               >
                 Get started
               </Link>
@@ -160,7 +160,7 @@ export function Navbar() {
                 </Link>
                 <Link
                   href="/register"
-                  className="rounded-full bg-gradient-sunset px-4 py-3 text-center text-sm font-medium text-white shadow-lg shadow-violet/20"
+                  className="rounded-full bg-gradient-action px-4 py-3 text-center text-sm font-medium text-white shadow-lg shadow-violet/20"
                 >
                   Get started
                 </Link>
diff --git a/src/components/pill-button.tsx b/src/components/pill-button.tsx
index 4bbd359..237b506 100644
--- a/src/components/pill-button.tsx
+++ b/src/components/pill-button.tsx
@@ -16,12 +16,12 @@ export function PillButton({
       href={href}
       className={`group relative inline-flex items-center overflow-hidden rounded-full border px-6 py-3 font-semibold ${
         variant === 'solid'
-          ? 'border-transparent bg-gradient-sunset text-white shadow-lg shadow-violet/20'
+          ? 'border-transparent bg-gradient-action text-white shadow-lg shadow-violet/20'
           : 'border-border-bright text-foreground'
       }`}
     >
       {variant === 'outline' && (
-        <span className="absolute inset-0 -translate-x-full bg-gradient-sunset transition-transform duration-300 ease-out group-hover:translate-x-0" />
+        <span className="absolute inset-0 -translate-x-full bg-gradient-action transition-transform duration-300 ease-out group-hover:translate-x-0" />
       )}
       <span className="relative flex items-center gap-2 transition-colors duration-300 group-hover:text-white">
         {children}