From e7ad0123ac4b8aa97ebb108c388875f75f736df2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Mon, 1 Jun 2026 08:46:21 +0300
Subject: [PATCH] refactor: update music production card layout and hover
 interaction styles

---
 .../front/music-productions/index.blade.php   | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/resources/views/front/music-productions/index.blade.php b/resources/views/front/music-productions/index.blade.php
index a68cb0a..baffe1b 100644
--- a/resources/views/front/music-productions/index.blade.php
+++ b/resources/views/front/music-productions/index.blade.php
@@ -119,21 +119,21 @@
                     @endif
                   </div>
                   <div class="player__track">{{ $production->translate('title') }}</div>
-
-                  <a href="{{ $detailUrl }}" class="album" data-album>
-                    @if($production->cover_image_url)
-                      <div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
-                    @else
-                      <div class="album__cover" style="background-image: url('{{ asset('assets/img/photos/pd6.jpg') }}');"></div>
-                    @endif
-                    <div class="vinyl">
-                      <div class="vinyl__shadow"></div>
-                      <div class="vinyl__circle">
-                        <div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url ?: asset('assets/img/photos/pd6.jpg') }}')"></div>
-                      </div> 
-                    </div>
-                  </a>
                 </div>
+
+                <a href="{{ $detailUrl }}" class="album" data-album>
+                  @if($production->cover_image_url)
+                    <div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
+                  @else
+                    <div class="album__cover" style="background-image: url('{{ asset('assets/img/photos/pd6.jpg') }}');"></div>
+                  @endif
+                  <div class="vinyl">
+                    <div class="vinyl__shadow"></div>
+                    <div class="vinyl__circle">
+                      <div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url ?: asset('assets/img/photos/pd6.jpg') }}')"></div>
+                    </div> 
+                  </div>
+                </a>
               </div>
             </div>
           </div>
@@ -368,16 +368,19 @@
   background-color: var(--color-white);
   height: 100%;
   padding: 50px 15px 0 15px;
-  position: relative;
+  position: absolute;
+  left: 0;
+  top: 0;
   text-align: left;
   width: 100%;
-  z-index: 10;
+  z-index: 50;
   border-radius: 8px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.05);
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   border: 1px solid rgba(8, 60, 130, 0.05);
+  transition: all var(--transition-time) var(--transition-method);
 }
 
 .player .player__artist {
@@ -421,15 +424,14 @@
 }
 
 .album {
-  transform: translateY(-50%);
   transition: all var(--transition-time) var(--transition-method);
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
   cursor: pointer;
-  height: var(--album-size);
+  height: 100%;
   position: absolute;
-  right: 0;
-  top: 50%;
-  width: var(--album-size);
+  left: 0;
+  top: 0;
+  width: 100%;
   z-index: 100;
   border-radius: 8px;
 }
@@ -439,16 +441,18 @@
 }
 
 .player:hover {
-  transform: scale(1.08) translateY(-5px);
   z-index: 999;
 }
 
 .player:hover .player__content {
-  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
+  transform: translateX(-260px);
+  box-shadow: -10px 15px 35px rgba(0,0,0,0.1);
 }
 
 .player:hover .album {
-  right: -140px;
+  transform: scale(1.5);
+  z-index: 150;
+  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.25);
 }
 
 .album__cover {
@@ -498,12 +502,12 @@
 }
 
 .player:hover .vinyl {
-  left: 45%;
+  left: 60%;
 }
 
 .player:hover .vinyl__circle {
   animation-play-state: running;
-  box-shadow: 0 0 25px rgba(227, 30, 36, 0.65), 0 0 50px rgba(227, 30, 36, 0.35);
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35), 0 0 50px rgba(3, 3, 3, 0.35);
 }
 
 .vinyl__center {