From 89932a253018f4175d59eccf3327cae3f1b7c22b Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 28 Aug 2025 15:32:53 +0000
Subject: [PATCH] Enhance visual appeal with gradient text and remove static
 opacity from background elements

Update CSS styles to implement gradient backgrounds for text elements and remove fixed opacity settings in various page components.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/d8KMm1m
---
 client/src/index.css           | 27 +++++++++++++++++++++------
 client/src/pages/VideoPage.tsx |  2 +-
 client/src/pages/home.tsx      |  6 +++---
 client/src/pages/not-found.tsx |  2 +-
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index 0526f37..bde3caa 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -311,35 +311,50 @@ input[data-testid*="search"]::placeholder {
 .bg-text-large {
   position: absolute;
   font-family: 'Inter', sans-serif;
-  font-weight: 800;
-  color: rgba(255, 255, 255, 0.015);
+  font-weight: 900;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 51, 234, 0.2));
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
   font-size: clamp(120px, 15vw, 220px);
   pointer-events: none;
   z-index: 0;
   user-select: none;
   white-space: nowrap;
+  text-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
+  filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.3));
 }
 
 .bg-text-medium {
   position: absolute;
   font-family: 'Inter', sans-serif;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.012);
+  font-weight: 700;
+  background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(6, 182, 212, 0.18));
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
   font-size: clamp(80px, 10vw, 150px);
   pointer-events: none;
   z-index: 0;
   user-select: none;
   white-space: nowrap;
+  text-shadow: 0 0 25px rgba(147, 51, 234, 0.3);
+  filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.25));
 }
 
 .bg-text-small {
   position: absolute;
   font-family: 'Inter', sans-serif;
-  font-weight: 300;
-  color: rgba(255, 255, 255, 0.008);
+  font-weight: 500;
+  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.12));
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
   font-size: clamp(50px, 6vw, 100px);
   pointer-events: none;
   z-index: 0;
   user-select: none;
   white-space: nowrap;
+  text-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
+  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2));
 }
\ No newline at end of file
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index c1687a8..54a397d 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -164,7 +164,7 @@ export default function VideoPage() {
         <div className="bg-text-large" style={{top: '20%', right: '8%', transform: 'rotate(-15deg)'}}>
           go4.video
         </div>
-        <div className="bg-text-medium" style={{top: '60%', left: '5%', transform: 'rotate(20deg)', opacity: 0.5}}>
+        <div className="bg-text-medium" style={{top: '60%', left: '5%', transform: 'rotate(20deg)'}}>
           go4.video
         </div>
         <div className="bg-text-small" style={{top: '80%', right: '30%', transform: 'rotate(-25deg)'}}>
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 66318bb..035d100 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -94,13 +94,13 @@ export default function Home() {
         <div className="bg-text-small" style={{top: '70%', right: '15%', transform: 'rotate(-10deg)'}}>
           go4.video
         </div>
-        <div className="bg-text-large" style={{top: '85%', left: '25%', transform: 'rotate(25deg)', opacity: 0.4}}>
+        <div className="bg-text-large" style={{top: '85%', left: '25%', transform: 'rotate(25deg)'}}>
           go4.video
         </div>
-        <div className="bg-text-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)', opacity: 0.6}}>
+        <div className="bg-text-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)'}}>
           go4.video
         </div>
-        <div className="bg-text-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)', opacity: 0.5}}>
+        <div className="bg-text-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)'}}>
           go4.video
         </div>
         
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index 6caa190..522bc2c 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -41,7 +41,7 @@ export default function NotFound() {
       <div className="bg-text-large" style={{top: '30%', right: '10%', transform: 'rotate(-18deg)'}}>
         go4.video
       </div>
-      <div className="bg-text-medium" style={{top: '70%', left: '8%', transform: 'rotate(22deg)', opacity: 0.7}}>
+      <div className="bg-text-medium" style={{top: '70%', left: '8%', transform: 'rotate(22deg)'}}>
         go4.video
       </div>