From 91dd58c0b2544c569faf8931ded206442ebdb556 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 3 Feb 2026 00:01:33 +0000
Subject: [PATCH] Update Play and More Info buttons with glassmorphism styles

- Add hero-play-button with light mode glass effect (white background)
- Add hero-info-button with dark mode glass effect
- Apply gradient borders with ::before pseudo-elements
- Add hover animations with translateY and enhanced shadows
- Responsive padding: 10px/28px mobile, 12px/32px desktop
- Match nav button styling with proper backdrop blur and inset highlights

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/views/Browse.vue | 102 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 100 insertions(+), 2 deletions(-)

diff --git a/src/views/Browse.vue b/src/views/Browse.vue
index e73e93f..1d0c41f 100644
--- a/src/views/Browse.vue
+++ b/src/views/Browse.vue
@@ -69,13 +69,13 @@
 
           <!-- Action Buttons -->
           <div class="flex items-center gap-2.5 md:gap-3 pt-1.5 md:pt-2">
-            <button class="px-5 md:px-7 py-2 md:py-2.5 bg-white text-black font-semibold rounded-md hover:bg-white/90 transition-all flex items-center gap-2 shadow-xl text-xs md:text-sm">
+            <button class="hero-play-button flex items-center gap-2">
               <svg class="w-4 h-4 md:w-5 md:h-5" fill="currentColor" viewBox="0 0 24 24">
                 <path d="M8 5v14l11-7z"/>
               </svg>
               Play
             </button>
-            <button class="px-5 md:px-7 py-2 md:py-2.5 bg-white/20 text-white font-semibold rounded-md hover:bg-white/30 transition-all backdrop-blur-md flex items-center gap-2 text-xs md:text-sm">
+            <button class="hero-info-button flex items-center gap-2">
               <svg class="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
@@ -314,4 +314,102 @@ onUnmounted(() => {
   border-radius: 12px;
   background: rgba(255, 255, 255, 0.1);
 }
+
+/* Hero Button Styles */
+.hero-play-button {
+  position: relative;
+  padding: 10px 28px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.95);
+  color: rgba(0, 0, 0, 0.9);
+  box-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.hero-play-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(200, 200, 200, 0.3));
+  -webkit-mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.hero-play-button:hover {
+  transform: translateY(-2px);
+  background: rgba(255, 255, 255, 1);
+  box-shadow:
+    0 16px 40px rgba(0, 0, 0, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+.hero-info-button {
+  position: relative;
+  padding: 10px 28px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 16px;
+  background: rgba(0, 0, 0, 0.35);
+  color: rgba(255, 255, 255, 1);
+  box-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.6),
+    inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.hero-info-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
+  -webkit-mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.hero-info-button:hover {
+  transform: translateY(-2px);
+  background: rgba(0, 0, 0, 0.40);
+  box-shadow:
+    0 16px 40px rgba(0, 0, 0, 0.7),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+}
+
+@media (min-width: 768px) {
+  .hero-play-button,
+  .hero-info-button {
+    padding: 12px 32px;
+    font-size: 16px;
+  }
+}
+
 </style>