From fa8dfd6ed33f76d296e8428ca68a0d3d527c295b Mon Sep 17 00:00:00 2001 From: Sergio Date: Sat, 23 May 2026 16:46:15 +0000 Subject: [PATCH] gioser-web: ambient page bg: blur(60px) + centered gradient for seamless glow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - filter: blur(60px) so the radial-gradient is a soft uniform glow, no visible circle or division - Centered at 50% 50%, opacity 0.30→0.60 breathe --- crates/apps/gioser-web/styles.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/crates/apps/gioser-web/styles.css b/crates/apps/gioser-web/styles.css index bee8dc0..7914b5b 100644 --- a/crates/apps/gioser-web/styles.css +++ b/crates/apps/gioser-web/styles.css @@ -232,26 +232,28 @@ body.deck-active-tierra .deck { --deck-glow: rgba(212, 152, 115, 0.24); } pointer-events: none; z-index: 0; transition: opacity 2s ease; + filter: blur(60px); + opacity: 0.5; } .deck-page[data-element="aire"] .page-ambience { - background: radial-gradient(circle at 50% 60%, rgba(208,219,255,0.18), transparent 70%); + background: radial-gradient(circle at 50% 50%, rgba(208,219,255,0.22), transparent 60%); animation: page-breathe 8s ease-in-out infinite alternate; } .deck-page[data-element="fuego"] .page-ambience { - background: radial-gradient(circle at 50% 80%, rgba(245,144,86,0.22), transparent 70%); + background: radial-gradient(circle at 50% 50%, rgba(245,144,86,0.22), transparent 60%); animation: page-breathe 6s ease-in-out infinite alternate; } .deck-page[data-element="agua"] .page-ambience { - background: radial-gradient(circle at 50% 80%, rgba(108,208,243,0.18), transparent 70%); + background: radial-gradient(circle at 50% 50%, rgba(108,208,243,0.22), transparent 60%); animation: page-breathe 10s ease-in-out infinite alternate; } .deck-page[data-element="tierra"] .page-ambience { - background: radial-gradient(circle at 50% 85%, rgba(140,100,60,0.22), transparent 70%); + background: radial-gradient(circle at 50% 50%, rgba(140,100,60,0.22), transparent 60%); animation: page-breathe 7s ease-in-out infinite alternate; } @keyframes page-breathe { - from { opacity: 0.35; } - to { opacity: 0.80; } + from { opacity: 0.30; } + to { opacity: 0.60; } } /* Head + controls — fijos en el deck, no dentro de la página */