From a05a6289680823e2236a89b0e2678a5951d6c921 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Fri, 24 Apr 2026 19:00:38 +0200
Subject: [PATCH] refactor(css): remove animated login gradient

Strip the heavy animated multi-layer radial gradient from the login
page. Removes:
- ani-gradient keyframes and 40 @property declarations
- Light and dark theme gradient rules
- Empty #gradient div from login template
- prefers-reduced-motion override that only served the gradient

The login page now uses the plain app background color consistently.
---
 templates/login.phtml       |   2 +-
 web/css/pages/app-login.css | 553 ------------------------------------
 2 files changed, 1 insertion(+), 554 deletions(-)

diff --git a/templates/login.phtml b/templates/login.phtml
index ecfa723..115ef27 100644
--- a/templates/login.phtml
+++ b/templates/login.phtml
@@ -63,7 +63,7 @@ $loginComponentConfig = [
     </div>
   </main>
   <?php require __DIR__ . '/partials/app-footer.phtml'; ?>
-  <div id="gradient"></div>
+
   <script type="application/json" id="page-config-login-components"><?php gridJsonForJs($loginComponentConfig); ?></script>
   <?php require __DIR__ . '/partials/app-flash.phtml'; ?>
   <script type="module" src="<?php e(assetVersion('js/app-login-init.js')); ?>"></script>
diff --git a/web/css/pages/app-login.css b/web/css/pages/app-login.css
index fa5cf78..bf179ca 100644
--- a/web/css/pages/app-login.css
+++ b/web/css/pages/app-login.css
@@ -1,551 +1,4 @@
 @layer pages {
-  @keyframes ani-gradient {
-    0% {
-      --s-start-0: 14.489998991212337%;
-      --s-end-0: 72%;
-      --x-0: 93%;
-      --c-0: hsla(212, 0%, 0%, 1);
-      --y-0: 93%;
-      --y-1: 9%;
-      --s-start-1: 0%;
-      --s-end-1: 45%;
-      --c-1: hsla(212, 0%, 0%, 1);
-      --x-1: 26%;
-      --c-2: hsla(257, 91%, 27%, 0.35);
-      --s-start-2: 2.9253667596993065%;
-      --s-end-2: 22.388851682060018%;
-      --x-2: 15%;
-      --y-2: 79%;
-      --c-3: hsla(212, 100%, 50%, 0.5);
-      --x-3: 40%;
-      --s-start-3: 3.985353824694249%;
-      --s-end-3: 47.580278608924694%;
-      --y-3: 104%;
-      --x-4: 0%;
-      --s-start-4: 2.391200382592061%;
-      --s-end-4: 29.307684556768592%;
-      --y-4: 60%;
-      --c-4: hsla(224, 72%, 36%, 1);
-      --c-5: hsla(248, 52%, 24%, 1);
-      --s-start-5: 2.9253667596993065%;
-      --s-end-5: 22.388851682060018%;
-      --x-5: 92%;
-      --y-5: 37%;
-      --c-6: hsla(212, 100%, 50%, 0.19);
-      --y-6: 16%;
-      --x-6: 101%;
-      --s-start-6: 13.173642363290591%;
-      --s-end-6: 31.747336520355095%;
-      --s-start-7: 1%;
-      --s-end-7: 31%;
-      --y-7: 13%;
-      --c-7: hsla(227, 98%, 53%, 1);
-      --x-7: 90%;
-      --y-8: 56%;
-      --x-8: 104%;
-      --c-8: hsla(166, 71%, 60%, 0.32);
-      --s-start-8: 3.985353824694249%;
-      --s-end-8: 13.103042116379756%;
-      --x-9: 97%;
-      --y-9: 19%;
-      --s-start-9: 18.597054544690312%;
-      --s-end-9: 31%;
-      --c-9: hsla(219, 83%, 23%, 0.18);
-    }
-
-    100% {
-      --s-start-0: 2.391200382592061%;
-      --s-end-0: 43.902064173373226%;
-      --x-0: 7%;
-      --c-0: hsla(306, 0%, 0%, 1);
-      --y-0: 9%;
-      --y-1: 93%;
-      --s-start-1: 9%;
-      --s-end-1: 54.805582404585024%;
-      --c-1: hsla(306, 0%, 0%, 1);
-      --x-1: 96%;
-      --c-2: hsla(166, 72%, 60%, 1);
-      --s-start-2: 3%;
-      --s-end-2: 26.722813338714598%;
-      --x-2: -2%;
-      --y-2: 103%;
-      --c-3: hsla(180, 100%, 50%, 0.26);
-      --x-3: 33%;
-      --s-start-3: 2.391200382592061%;
-      --s-end-3: 32.0689540200964%;
-      --y-3: 82%;
-      --x-4: 37%;
-      --s-start-4: 4.40642490323111%;
-      --s-end-4: 37.23528104246256%;
-      --y-4: 81%;
-      --c-4: hsla(212, 88%, 26%, 0.58);
-      --c-5: hsla(271, 98%, 53%, 0.31);
-      --s-start-5: 3%;
-      --s-end-5: 32.537089799783296%;
-      --x-5: 54%;
-      --y-5: 99%;
-      --c-6: hsla(262, 100%, 50%, 0.15);
-      --y-6: 43%;
-      --x-6: 104%;
-      --s-start-6: 6%;
-      --s-end-6: 42.501105312974815%;
-      --s-start-7: 5%;
-      --s-end-7: 13.10107024898374%;
-      --y-7: -16%;
-      --c-7: hsla(298, 36%, 23%, 1);
-      --x-7: 104%;
-      --y-8: 30%;
-      --x-8: 97%;
-      --c-8: hsla(180, 100%, 50%, 0.11);
-      --s-start-8: 2.391200382592061%;
-      --s-end-8: 27.141813016850573%;
-      --x-9: 78%;
-      --y-9: 4%;
-      --s-start-9: 5%;
-      --s-end-9: 21.32164536610654%;
-      --c-9: hsla(219, 83%, 23%, 0.59);
-    }
-  }
-
-  @property --s-start-0 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 14.489998991212337%;
-  }
-
-  @property --s-end-0 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 72%;
-  }
-
-  @property --x-0 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 93%;
-  }
-
-  @property --c-0 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(212, 0%, 0%, 1);
-  }
-
-  @property --y-0 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 93%;
-  }
-
-  @property --y-1 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 9%;
-  }
-
-  @property --s-start-1 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 0%;
-  }
-
-  @property --s-end-1 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 45%;
-  }
-
-  @property --c-1 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(212, 0%, 0%, 1);
-  }
-
-  @property --x-1 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 26%;
-  }
-
-  @property --c-2 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(257, 91%, 27%, 0.35);
-  }
-
-  @property --s-start-2 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 2.9253667596993065%;
-  }
-
-  @property --s-end-2 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 22.388851682060018%;
-  }
-
-  @property --x-2 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 15%;
-  }
-
-  @property --y-2 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 79%;
-  }
-
-  @property --c-3 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(212, 100%, 50%, 0.5);
-  }
-
-  @property --x-3 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 40%;
-  }
-
-  @property --s-start-3 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 3.985353824694249%;
-  }
-
-  @property --s-end-3 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 47.580278608924694%;
-  }
-
-  @property --y-3 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 104%;
-  }
-
-  @property --x-4 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 0%;
-  }
-
-  @property --s-start-4 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 2.391200382592061%;
-  }
-
-  @property --s-end-4 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 29.307684556768592%;
-  }
-
-  @property --y-4 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 60%;
-  }
-
-  @property --c-4 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(224, 72%, 36%, 1);
-  }
-
-  @property --c-5 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(248, 52%, 24%, 1);
-  }
-
-  @property --s-start-5 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 2.9253667596993065%;
-  }
-
-  @property --s-end-5 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 22.388851682060018%;
-  }
-
-  @property --x-5 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 92%;
-  }
-
-  @property --y-5 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 37%;
-  }
-
-  @property --c-6 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(212, 100%, 50%, 0.19);
-  }
-
-  @property --y-6 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 16%;
-  }
-
-  @property --x-6 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 101%;
-  }
-
-  @property --s-start-6 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 13.173642363290591%;
-  }
-
-  @property --s-end-6 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 31.747336520355095%;
-  }
-
-  @property --s-start-7 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 1%;
-  }
-
-  @property --s-end-7 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 31%;
-  }
-
-  @property --y-7 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 13%;
-  }
-
-  @property --c-7 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(227, 98%, 53%, 1);
-  }
-
-  @property --x-7 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 90%;
-  }
-
-  @property --y-8 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 56%;
-  }
-
-  @property --x-8 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 104%;
-  }
-
-  @property --c-8 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(166, 71%, 60%, 0.32);
-  }
-
-  @property --s-start-8 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 3.985353824694249%;
-  }
-
-  @property --s-end-8 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 13.103042116379756%;
-  }
-
-  @property --x-9 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 97%;
-  }
-
-  @property --y-9 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 19%;
-  }
-
-  @property --s-start-9 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 18.597054544690312%;
-  }
-
-  @property --s-end-9 {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 31%;
-  }
-
-  @property --c-9 {
-    syntax: "<color>";
-    inherits: false;
-    initial-value: hsla(219, 83%, 23%, 0.18);
-  }
-
-  #gradient {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    pointer-events: none;
-    opacity: 0.85;
-  }
-
-  html[data-theme="light"] #gradient {
-    background-color: hsla(333, 0%, 100%, 1);
-    background-image:
-      radial-gradient(
-        circle at 0% 0%,
-        hsla(64, 82%, 77%, 0.35) 3.1210986267166043%,
-        transparent 40%
-      ),
-      radial-gradient(
-        circle at 20% 0%,
-        hsla(5, 77%, 74%, 0.35) 3.1210986267166043%,
-        transparent 40%
-      ),
-      radial-gradient(
-        circle at 40% 0%,
-        hsla(315, 77%, 74%, 0.35) 3.1210986267166043%,
-        transparent 40%
-      ),
-      radial-gradient(
-        circle at 60% 0%,
-        hsla(256, 77%, 74%, 0.35) 3.1210986267166043%,
-        transparent 40%
-      ),
-      radial-gradient(
-        circle at 80% 0%,
-        hsla(191, 77%, 74%, 0.35) 3.1210986267166043%,
-        transparent 40%
-      ),
-      radial-gradient(
-        circle at 100% 0%,
-        hsla(152, 77%, 74%, 0.35) 3%,
-        transparent 40%
-      );
-    background-blend-mode: normal, normal, normal, normal, normal, normal;
-    opacity: 0.62;
-  }
-
-  html[data-theme="dark"] #gradient {
-    --x-0: 93%;
-    --c-0: hsla(212, 0%, 0%, 1);
-    --y-0: 93%;
-    --y-1: 9%;
-    --c-1: hsla(212, 0%, 0%, 1);
-    --x-1: 26%;
-    --c-2: hsla(257, 91%, 27%, 0.35);
-    --x-2: 15%;
-    --y-2: 79%;
-    --c-3: hsla(212, 100%, 50%, 0.5);
-    --x-3: 40%;
-    --y-3: 104%;
-    --x-4: 0%;
-    --y-4: 60%;
-    --c-4: hsla(224, 72%, 36%, 1);
-    --c-5: hsla(248, 52%, 24%, 1);
-    --x-5: 92%;
-    --y-5: 37%;
-    --c-6: hsla(212, 100%, 50%, 0.19);
-    --y-6: 16%;
-    --x-6: 101%;
-    --y-7: 13%;
-    --c-7: hsla(227, 98%, 53%, 1);
-    --x-7: 90%;
-    --y-8: 56%;
-    --x-8: 104%;
-    --c-8: hsla(166, 71%, 60%, 0.32);
-    --x-9: 97%;
-    --y-9: 19%;
-    --c-9: hsla(219, 83%, 23%, 0.18);
-    background-color: hsla(305, 0%, 0%, 1);
-    background-image:
-      radial-gradient(
-        circle at var(--x-0) var(--y-0),
-        var(--c-0) var(--s-start-0),
-        transparent var(--s-end-0)
-      ),
-      radial-gradient(
-        circle at var(--x-1) var(--y-1),
-        var(--c-1) var(--s-start-1),
-        transparent var(--s-end-1)
-      ),
-      radial-gradient(
-        circle at var(--x-2) var(--y-2),
-        var(--c-2) var(--s-start-2),
-        transparent var(--s-end-2)
-      ),
-      radial-gradient(
-        circle at var(--x-3) var(--y-3),
-        var(--c-3) var(--s-start-3),
-        transparent var(--s-end-3)
-      ),
-      radial-gradient(
-        circle at var(--x-4) var(--y-4),
-        var(--c-4) var(--s-start-4),
-        transparent var(--s-end-4)
-      ),
-      radial-gradient(
-        circle at var(--x-5) var(--y-5),
-        var(--c-5) var(--s-start-5),
-        transparent var(--s-end-5)
-      ),
-      radial-gradient(
-        circle at var(--x-6) var(--y-6),
-        var(--c-6) var(--s-start-6),
-        transparent var(--s-end-6)
-      ),
-      radial-gradient(
-        circle at var(--x-7) var(--y-7),
-        var(--c-7) var(--s-start-7),
-        transparent var(--s-end-7)
-      ),
-      radial-gradient(
-        circle at var(--x-8) var(--y-8),
-        var(--c-8) var(--s-start-8),
-        transparent var(--s-end-8)
-      ),
-      radial-gradient(
-        circle at var(--x-9) var(--y-9),
-        var(--c-9) var(--s-start-9),
-        transparent var(--s-end-9)
-      );
-    animation: ani-gradient 24s linear infinite alternate;
-    background-blend-mode:
-      normal, normal, normal, normal, normal, normal, normal, normal, normal,
-      normal;
-    will-change: transform, opacity;
-    contain: paint;
-  }
-
   .login-card header {
     background: transparent;
   }
@@ -877,12 +330,6 @@
     cursor: wait;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    html[data-theme="dark"] #gradient {
-      animation: none;
-    }
-  }
-
   @media (min-width: 600px) {
     main.login-main {
       min-height: 90vh;