From 6480d02b11adbd8ec8c7766edec18ac0afc6b1df Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Fri, 13 Feb 2026 22:38:45 +0000
Subject: [PATCH] style: use deep black glass morphism for content detail modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the flat #141414 grey background with a dark glass container
matching the header's floating-glass style — rgba(6,6,6,0.92) with
backdrop-filter blur, subtle white/6% border, and layered shadows.
Updated the hero gradient to blend seamlessly into the new base.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docker-compose.yml                    |  2 +-
 src/components/ContentDetailModal.vue | 30 +++++++++++++++++----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 3de67fc..d775c12 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -20,7 +20,7 @@ services:
       context: .
       dockerfile: Dockerfile
       args:
-        CACHEBUST: "20"
+        CACHEBUST: "21"
         VITE_USE_MOCK_DATA: "false"
         VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
         VITE_INDEEHUB_API_URL: /api
diff --git a/src/components/ContentDetailModal.vue b/src/components/ContentDetailModal.vue
index bfc14a5..6860379 100644
--- a/src/components/ContentDetailModal.vue
+++ b/src/components/ContentDetailModal.vue
@@ -510,7 +510,9 @@ function openSubscriptionFromRental() {
   height: 100%;
   max-width: 900px;
   max-height: 100vh;
-  background: #141414;
+  background: rgba(6, 6, 6, 0.92);
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
   border-radius: 0;
   overflow: hidden;
   position: relative;
@@ -519,7 +521,12 @@ function openSubscriptionFromRental() {
 @media (min-width: 768px) {
   .detail-container {
     max-height: 90vh;
-    border-radius: 16px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    box-shadow:
+      0 32px 80px rgba(0, 0, 0, 0.6),
+      0 12px 32px rgba(0, 0, 0, 0.4),
+      inset 0 1px 0 rgba(255, 255, 255, 0.08);
   }
 }
 
@@ -545,19 +552,20 @@ function openSubscriptionFromRental() {
   right: 16px;
   z-index: 20;
   padding: 8px;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   border-radius: 9999px;
   color: rgba(255, 255, 255, 0.8);
-  border: none;
+  border: 1px solid rgba(255, 255, 255, 0.08);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .detail-close-btn:hover {
   color: white;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(0, 0, 0, 0.8);
+  border-color: rgba(255, 255, 255, 0.15);
 }
 
 /* Hero */
@@ -578,10 +586,10 @@ function openSubscriptionFromRental() {
   inset: 0;
   background: linear-gradient(
     to top,
-    #141414 0%,
-    rgba(20, 20, 20, 0.85) 30%,
-    rgba(20, 20, 20, 0.3) 60%,
-    rgba(20, 20, 20, 0) 100%
+    rgba(6, 6, 6, 1) 0%,
+    rgba(6, 6, 6, 0.85) 30%,
+    rgba(6, 6, 6, 0.3) 60%,
+    rgba(6, 6, 6, 0) 100%
   );
 }