/* Fundo animado com gradiente + "blobs" — tema claro/escuro. Extraído do Economizador Coala (D:\LucroJa), depois suavizado (cores menos saturadas, sem ciclo de matiz) pro portfólio do Rafael Cosme. Como funciona o tema: as variáveis do bloco `:root` são o tema claro (padrão). O bloco `[data-theme="dark"]` redefine as mesmas variáveis pro escuro — é só colocar `data-theme="dark"` num elemento ancestral (ex: ) que tudo troca sozinho. */ :root { --app-gradient: linear-gradient( 120deg, #eef1f5 0%, #e6ebf1 22%, #eef1ec 42%, #f1efe9 58%, #e9edf1 74%, #eef1f5 100% ); --blob-1: #8fa3c2; --blob-2: #b7ab8c; --blob-3: #93b5a3; --blob-opacity: 0.2; --blob-blur: 120px; } [data-theme="dark"] { --app-gradient: linear-gradient( 120deg, #131417 0%, #16191c 22%, #14171a 42%, #17191c 58%, #14161a 74%, #131417 100% ); --blob-1: #46617a; --blob-2: #6b5a42; --blob-3: #3f5a52; --blob-opacity: 0.24; --blob-blur: 110px; } /* Aplique isso no container que envolve o — ele precisa ser `position: relative` (ou `isolate`) e `overflow: hidden` pros blobs não vazarem pro resto da página. No Economizador Coala isso é a própria .app-shell (o "cartão" central do app); adapte pro seu layout. */ .app-shell { position: relative; isolation: isolate; overflow: hidden; } .app-background { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; transform: translateZ(0); } .app-background-gradient { position: absolute; inset: 0; background: var(--app-gradient); background-size: 400% 400%; animation: gradient-dance 42s ease infinite; } .app-blob { position: absolute; border-radius: 9999px; filter: blur(var(--blob-blur)); opacity: var(--blob-opacity); animation: blob-drift 34s ease-in-out infinite; will-change: transform; } .app-blob-1 { top: -80px; left: -80px; width: 380px; height: 380px; background: var(--blob-1); } .app-blob-2 { top: 38%; right: -100px; width: 340px; height: 340px; background: var(--blob-2); animation-delay: -11s; } .app-blob-3 { bottom: -90px; left: 25%; width: 340px; height: 340px; background: var(--blob-3); animation-delay: -22s; } @keyframes blob-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(50px, 65px) scale(1.12); } 50% { transform: translate(-45px, 35px) scale(0.92); } 75% { transform: translate(35px, -55px) scale(1.04); } } @keyframes gradient-dance { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Respeita quem prefere menos animação */ @media (prefers-reduced-motion: reduce) { .app-background, .app-background-gradient, .app-blob { animation: none !important; opacity: 1 !important; transform: none !important; } }