diff --git a/src/views.js b/src/views.js index 308d737..84cd085 100644 --- a/src/views.js +++ b/src/views.js @@ -264,7 +264,7 @@ export async function loadArtistDetail(artist) { const img = imgRes.status === 'fulfilled' ? imgRes.value : null; if(img) { hero.style.background = `url('${img}') center/cover no-repeat`; - if(overlay) overlay.style.background = 'linear-gradient(to right,rgba(7,7,15,.9) 0%,rgba(7,7,15,.5) 60%,rgba(7,7,15,.2) 100%)'; + if(overlay) overlay.style.background = 'linear-gradient(to right,rgba(7,7,15,.95) 0%,rgba(7,7,15,.35) 55%,rgba(7,7,15,.75) 100%)'; } // ── Bio ── diff --git a/styles.css b/styles.css index 6f387a3..43999de 100644 --- a/styles.css +++ b/styles.css @@ -672,9 +672,14 @@ nav{flex:1;overflow-y:auto;padding:4px 10px} .np-drag-handle{width:100%;height:36px;display:flex;align-items:center;justify-content:center;cursor:grab;flex-shrink:0;touch-action:none} .np-drag-handle-bar{width:40px;height:4px;background:rgba(255,255,255,.25);border-radius:2px} -.artist-hero{height:180px;border-radius:14px;overflow:hidden;position:relative;margin-bottom:24px;background:linear-gradient(135deg,var(--surface2),var(--surface))} -.artist-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,15,.85) 0%,transparent 100%);display:flex;align-items:flex-end;padding:20px} +.artist-hero{height:220px;border-radius:14px;overflow:hidden;position:relative;margin-bottom:24px;background:linear-gradient(135deg,var(--surface2),var(--surface))} +.artist-hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(7,7,15,.85) 0%,transparent 100%);display:flex;align-items:flex-end;padding:20px 28px} .artist-hero-name{font-size:32px;font-weight:800;letter-spacing:-1px} +@media(min-width:769px){ + .artist-hero{height:320px;border-radius:16px} + .artist-hero-overlay{padding:28px 36px} + .artist-hero-name{font-size:46px;letter-spacing:-2px} +} /* ── MISC ── */ .spinner{width:28px;height:28px;border:3px solid var(--surface2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:50px auto;display:block}