tawasuyu/brahman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gioser-web: ambient page bg: blur(60px) + centered gradient for seamless glow

Browse Source 
- 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
This commit is contained in:
Sergio
2026-05-23 16:46:15 +00:00
parent 0381585745
commit fa8dfd6ed3
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/apps/gioser-web/styles.css
+8 -6
View File
@@ -232,26 +232,28 @@ body.deck-active-tierra .deck { --deck-glow: rgba(212, 152, 115, 0.24); }
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
transition: opacity 2s ease; transition: opacity 2s ease;
filter: blur(60px);
opacity: 0.5;
} }
.deck-page[data-element="aire"] .page-ambience { .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; animation: page-breathe 8s ease-in-out infinite alternate;
} }
.deck-page[data-element="fuego"] .page-ambience { .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; animation: page-breathe 6s ease-in-out infinite alternate;
} }
.deck-page[data-element="agua"] .page-ambience { .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; animation: page-breathe 10s ease-in-out infinite alternate;
} }
.deck-page[data-element="tierra"] .page-ambience { .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; animation: page-breathe 7s ease-in-out infinite alternate;
} }
@keyframes page-breathe { @keyframes page-breathe {
from { opacity: 0.35; } from { opacity: 0.30; }
to { opacity: 0.80; } to { opacity: 0.60; }
} }
/* Head + controls — fijos en el deck, no dentro de la página */ /* Head + controls — fijos en el deck, no dentro de la página */