From 1b04384770013eb8c93a78b5dab9b934922a3d60 Mon Sep 17 00:00:00 2001 From: Maxim Dolgolyov Date: Fri, 29 May 2026 21:23:44 +0300 Subject: [PATCH] fix(shop): opaque cards on owned/active so backgrounds don't bleed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The shop item card .owned/.active states used semi-transparent fills (rgba(34,197,94,0.03) / rgba(6,214,224,0.04)) for a subtle color hint. Phase 6 made the free background presets auto-owned, so every 'Применить'-able card got the translucent overlay — and with an animated background active, the page-wide gradient bled straight through the content (see screenshot). Switch to fully opaque #fff fills, keep the color cue in the border plus a thin inner-shadow halo. Same visual signal, no bleed. Co-Authored-By: Claude Opus 4.7 (1M context) --- frontend/profile.html | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/frontend/profile.html b/frontend/profile.html index 91bad24..ee49621 100644 --- a/frontend/profile.html +++ b/frontend/profile.html @@ -516,7 +516,14 @@ box-shadow: 0 2px 12px rgba(15,23,42,0.05); } .shop-item:hover { box-shadow: 0 4px 20px rgba(15,23,42,0.08); transform: translateY(-2px); } - .shop-item.owned { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.03); } + /* Owned + active states keep an opaque card so animated backgrounds + don't bleed through the content. Color cue lives in the border + plus a tiny inner-shadow halo. */ + .shop-item.owned { + border-color: rgba(34,197,94,0.5); + background: #fff; + box-shadow: 0 2px 12px rgba(15,23,42,0.05), inset 0 0 0 1px rgba(34,197,94,0.08); + } .shop-item.disabled:not(.owned) { opacity: 0.5; } .shop-item-icon { color: var(--violet); margin-bottom: 4px; } .shop-frame-preview { @@ -588,7 +595,11 @@ animation: ls-dot-pulse 1.5s infinite; } @keyframes ls-dot-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } - .shop-item.active { border-color: rgba(6,214,224,0.4); background: rgba(6,214,224,0.04); } + .shop-item.active { + border-color: rgba(6,214,224,0.55); + background: #fff; + box-shadow: 0 4px 18px rgba(6,214,224,0.18), inset 0 0 0 1px rgba(6,214,224,0.10); + } .shop-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; font-size: 0.88rem; color: var(--text-3); font-weight: 600;