From aca13571281c9363cff2f7f7157821ef82744fbd Mon Sep 17 00:00:00 2001
From: sakrecoer <setto@dyne.org>
Date: Tue, 4 Aug 2026 11:33:13 +0200
Subject: [PATCH] minor styling of play button

---
 themes/one-pager/assets/css/style.css | 64 +++++++++++++--------------
 themes/one-pager/assets/js/scripts.js |  4 +-
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/themes/one-pager/assets/css/style.css b/themes/one-pager/assets/css/style.css
index ee733e8..b685df6 100644
--- a/themes/one-pager/assets/css/style.css
+++ b/themes/one-pager/assets/css/style.css
@@ -1817,10 +1817,28 @@ button {
     font-size: 1.6rem;
   }
 
+  /* Music lightbox play button - clean version */
   .music-lightbox-play-btn {
-    width: 60px;
-    height: 60px;
-    font-size: 2rem;
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: var(--accent-yellow);
+    color: var(--accent-black);
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    font-size: 2.5rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 30px rgba(255, 215, 0, 0.3);
+    line-height: 1;
+    padding: 0;
+  }
+
+  .music-lightbox-play-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 8px 40px rgba(255, 215, 0, 0.5);
   }
 
   .music-lightbox-close {
@@ -1862,7 +1880,7 @@ button {
   to { opacity: 1; transform: scale(1); }
 }
 
-/* Music card play overlay */
+/* Music card play overlay - Clean version without circle */
 .music-image-wrapper {
   position: relative;
   overflow: hidden;
@@ -1900,37 +1918,19 @@ button {
   opacity: 1;
 }
 
-.music-play-circle {
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  background: var(--accent-yellow);
-  color: var(--accent-black);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.8rem;
-  border: 3px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 0 4px 30px rgba(255, 215, 0, 0.3);
+/* Play button - clean emoji, no circle */
+.music-play-btn {
+  font-size: 4rem;
+  color: white;
+  text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
   transition: all 0.3s ease;
+  line-height: 1;
+  user-select: none;
 }
 
-.music-play-circle:hover {
-  transform: scale(1.1);
-  box-shadow: 0 8px 40px rgba(255, 215, 0, 0.5);
-}
-
-.music-card.clickable {
-  cursor: pointer;
-}
-
-.music-card.clickable .music-image {
-  cursor: pointer;
-}
-
-/* Hide default audio controls on card */
-.music-card audio {
-  display: none;
+.music-play-btn:hover {
+  transform: scale(1.15);
+  text-shadow: 0 0 50px rgba(255, 215, 0, 0.8);
 }
 
 /* ============ END CYBERPUNK FOOTER ============ */
diff --git a/themes/one-pager/assets/js/scripts.js b/themes/one-pager/assets/js/scripts.js
index d1a0b5e..d92acdd 100644
--- a/themes/one-pager/assets/js/scripts.js
+++ b/themes/one-pager/assets/js/scripts.js
@@ -264,9 +264,7 @@ function renderMusicTracks(tracks, containerId, randomize = false) {
     <div class="music-image-wrapper">
     ${track.image ? `<img src="${track.image}" alt="${track.title}" class="music-image" loading="lazy">` : ''}
     <div class="music-play-overlay">
-    <div class="music-play-circle">
-    <span>▶</span>
-    </div>
+    <span class="music-play-btn">▶</span>
     </div>
     </div>
     <div class="music-info-header">