From 3313d7ab18c15e64d12f9dab11d7d15e5437a65a Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Fri, 29 Aug 2025 20:14:31 +0000
Subject: [PATCH] Update video card appearance for better readability and
 visual appeal

Refactor VideoCard component to simplify title overlay styling, remove cinematic text animations, and adjust text size and color for improved clarity.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/kdQ95gE
---
 client/src/components/video-card.tsx | 14 +++-----------
 client/src/index.css                 | 12 +-----------
 2 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 75a252f..68f3641 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -226,23 +226,15 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
           </div>
         )}
         
-        {/* Cinematic title overlay */}
-        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent p-4 transition-all duration-500 group-hover:from-black/100 group-hover:via-black/80">
+        {/* Title overlay at bottom */}
+        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3">
           <h3 
-            className="text-white text-sm md:text-lg font-bold tracking-wide leading-tight line-clamp-2 hover:text-yellow-400 transition-all duration-500 cursor-pointer transform group-hover:scale-105 drop-shadow-2xl"
-            style={{
-              fontFamily: 'system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif',
-              textShadow: '2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5)',
-              letterSpacing: '0.025em'
-            }}
+            className="text-white text-sm md:text-base font-semibold line-clamp-2 hover:text-bunny-blue transition-colors duration-300 cursor-pointer"
             onClick={() => onClick?.(video)}
             data-testid={`text-title-${video.id}`}
           >
             {video.title}
           </h3>
-          
-          {/* Subtle accent line */}
-          <div className="w-0 h-0.5 bg-gradient-to-r from-yellow-400 to-orange-500 transition-all duration-700 group-hover:w-full mt-2 opacity-0 group-hover:opacity-100"></div>
         </div>
         
       </div>
diff --git a/client/src/index.css b/client/src/index.css
index b6b484e..cd021d7 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -387,21 +387,11 @@ input[data-testid*="search"]::placeholder {
   opacity: 0;
 }
 
-/* Maximum possible z-index for video card hover with cinematic effects */
+/* Maximum possible z-index for video card hover */
 .video-card:hover {
   z-index: 2147483647 !important;
 }
 
-/* Cinematic text animations */
-@keyframes titleGlow {
-  0%, 100% { text-shadow: 2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5); }
-  50% { text-shadow: 2px 2px 12px rgba(0,0,0,0.9), 0 0 25px rgba(255,215,0,0.3), 0 0 35px rgba(255,165,0,0.2); }
-}
-
-.video-card:hover h3 {
-  animation: titleGlow 2s ease-in-out infinite;
-}
-
 /* Hide picture-in-picture button on all video elements */
 video::-webkit-media-controls-picture-in-picture-button {
   display: none !important;