gradient perf improvements (#1077)

* gradient perf improvements

* tweak to lower gradient size

* fixing comment

Author: kkellydesign

media/css/cms/flare26-card.css

@@ -151,7 +151,8 @@ Basic Card
 
 .fl-card {
     align-items: stretch;
-    backdrop-filter: blur(7.5px);
+
+    /* backdrop-filter: blur(7.5px); */
     background: var(--fl-theme-default-card-bg);
     border: 1px solid var(--card-border-color);
     border-radius: var(--token-border-radius-sm);
@@ -223,7 +224,8 @@ Sticker Card
 
 .fl-sticker-card {
     align-items: stretch;
-    backdrop-filter: blur(7.5px);
+
+    /* backdrop-filter: blur(7.5px); */
     background: var(--fl-theme-surface-card-gradient);
     block-size: auto;
     border-radius: var(--token-border-radius-md);

media/css/cms/flare26-template.css

@@ -95,43 +95,31 @@ body.fl-modal-open {
 }
 
 .has-gradient-top::before {
-    --gradient-height: 44vh;
-    background-image: radial-gradient(
-        var(--token-color-light-purple) 0%,
-        var(--token-color-dark-purple) 50%
-    );
+    --gradient-height: 70vh;
+    background-image: var(--token-gradient-blurred-bg);
     block-size: var(--gradient-height);
     content: var(--content-dark-mode-only);
-    filter: blur(200px);
-    inset: calc(var(--gradient-height) / -2) -30vw auto;
+    inset: calc(var(--gradient-height) / -1.5) -30vw auto;
     position: absolute;
     z-index: 0;
 }
 
 .has-gradient-bottom::before,
 .has-sitting-kit::before {
     --gradient-height: 60vh;
-    background-image: radial-gradient(
-        var(--token-color-light-purple) 0%,
-        var(--token-color-dark-purple) 50%
-    );
+    background-image: var(--token-gradient-blurred-bg);
     block-size: var(--gradient-height);
     content: var(--content-dark-mode-only);
-    filter: blur(200px);
     inset: auto -40vw calc(var(--gradient-height) / -2);
     position: absolute;
     z-index: 0;
 }
 
 .has-gradient-bottom-100-always::before {
     --gradient-height: 100vh;
-    background-image: radial-gradient(
-        var(--token-color-light-purple) 0%,
-        var(--token-color-dark-purple) 50%
-    );
+    background-image: var(--token-gradient-blurred-bg);
     block-size: var(--gradient-height);
     content: '';
-    filter: blur(200px);
     inset: 0;
     inset-block-start: calc(100% - 25vh);
     position: absolute;

media/css/cms/flare26-tokens.css

@@ -91,6 +91,21 @@ Static values extracted from Figma that do not change based on context.
         var(--token-color-grey-2) 100%
     );
 
+    /* using manual OCLCH copies of var(--token-color-light-purple)
+       and var(--token-color-dark-purple), plus some tweaking of the color stops
+       to mimic the effect I was getting with a blur filter. */
+    --token-gradient-blurred-bg: radial-gradient(
+        oklch(53.618% 0.2266 291.092deg) 0%,
+        oklch(50.1% 0.214 292deg) 8%,
+        oklch(44.8% 0.196 293.7deg) 18%,
+        oklch(37.5% 0.17 295.5deg) 30%,
+        oklch(30% 0.143 297.1deg) 42%,
+        oklch(24.2% 0.122 298.3deg) 54%,
+        oklch(21.9% 0.112 299deg) 68%,
+        oklch(21.3% 0.107 299.3deg) 82%,
+        oklch(21.027% 0.105 299.458deg) 100%
+    );
+
     /* Light and dark gradients */
     --token-gradient-light: linear-gradient(
         180deg,