Add mobile gradient background

src/graphics/loggedOutGradient.svg

@@ -1,48 +0,0 @@
-<svg width="1440" height="500" viewBox="0 0 1440 500" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_f_4162_80135)">
-<circle cx="720" cy="1620" r="1500" fill="url(#paint0_linear_4162_80135)"/>
-<circle cx="720" cy="1620" r="1498.92" stroke="white" stroke-opacity="0.5" stroke-width="2.16028" style="mix-blend-mode:overlay"/>
-</g>
-<g filter="url(#filter1_f_4162_80135)">
-<circle cx="720" cy="1550.86" r="1272.86" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_f_4162_80135" x="-900" y="0" width="3240" height="3240" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
-</filter>
-<filter id="filter1_f_4162_80135" x="-672.863" y="158" width="2785.73" height="2785.73" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_4162_80135"/>
-</filter>
-<linearGradient id="paint0_linear_4162_80135" x1="549.5" y1="120" x2="549.5" y2="505.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#062993"/>
-<stop offset="0.040404" stop-color="#02389D"/>
-<stop offset="0.0808081" stop-color="#0045A6"/>
-<stop offset="0.121212" stop-color="#0051AD"/>
-<stop offset="0.161616" stop-color="#005DB4"/>
-<stop offset="0.20202" stop-color="#0069BA"/>
-<stop offset="0.242424" stop-color="#0075BB"/>
-<stop offset="0.282828" stop-color="#0081BB"/>
-<stop offset="0.323232" stop-color="#008CB9"/>
-<stop offset="0.363636" stop-color="#0098B7"/>
-<stop offset="0.40404" stop-color="#00A3B3"/>
-<stop offset="0.444444" stop-color="#00AEAD"/>
-<stop offset="0.484848" stop-color="#00B8A4"/>
-<stop offset="0.525253" stop-color="#00C2A0"/>
-<stop offset="0.565657" stop-color="#00CC99"/>
-<stop offset="0.606061" stop-color="#3AD396"/>
-<stop offset="0.646465" stop-color="#5DD898"/>
-<stop offset="0.686869" stop-color="#79DD99"/>
-<stop offset="0.727273" stop-color="#92E29B"/>
-<stop offset="0.767677" stop-color="#A8E69F"/>
-<stop offset="0.808081" stop-color="#BBEAA5"/>
-<stop offset="0.848485" stop-color="#CDEEAE"/>
-<stop offset="0.888889" stop-color="#DCF2B9"/>
-<stop offset="0.929293" stop-color="#EAF6C7"/>
-<stop offset="0.969697" stop-color="#F5FBD5"/>
-</linearGradient>
-</defs>
-</svg>

src/graphics/mobile-gradient.svg

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="1391"
+   height="285"
+   viewBox="0 0 1391 285"
+   fill="none"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <g
+     filter="url(#filter0_f_1001_6598)"
+     id="g2"
+     transform="translate(500.50201)">
+    <path
+       d="m -147.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
+       stroke="url(#paint0_linear_1001_6598)"
+       stroke-width="235.517"
+       stroke-linecap="round"
+       id="path1"
+       style="stroke:url(#paint0_linear_1001_6598)" />
+    <path
+       d="m -147.342,495.134 c 188.2881,-188.288 494.684,-190 684.684,0"
+       stroke="url(#paint1_linear_1001_6598)"
+       style="mix-blend-mode:overlay;stroke:url(#paint1_linear_1001_6598)"
+       stroke-width="235.517"
+       stroke-linecap="round"
+       id="path2" />
+  </g>
+  <defs
+     id="defs5">
+    <filter
+       id="filter0_f_1001_6598"
+       x="-500.617"
+       y="0.00012207"
+       width="1391.23"
+       height="848.409"
+       filterUnits="userSpaceOnUse"
+       color-interpolation-filters="sRGB">
+      <feFlood
+         flood-opacity="0"
+         result="BackgroundImageFix"
+         id="feFlood2" />
+      <feBlend
+         mode="normal"
+         in="SourceGraphic"
+         in2="BackgroundImageFix"
+         result="shape"
+         id="feBlend2" />
+      <feGaussianBlur
+         stdDeviation="235.52"
+         result="effect1_foregroundBlur_1001_6598"
+         id="feGaussianBlur2" />
+    </filter>
+    <linearGradient
+       id="paint0_linear_1001_6598"
+       x1="366.17099"
+       y1="323.96301"
+       x2="23.829"
+       y2="666.30499"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#0D5CBD"
+         id="stop2" />
+      <stop
+         offset="0.730863"
+         stop-color="#0DBDA8"
+         id="stop3" />
+    </linearGradient>
+    <linearGradient
+       id="paint1_linear_1001_6598"
+       x1="366.17099"
+       y1="323.96301"
+       x2="23.829"
+       y2="666.30499"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#0D5CBD"
+         id="stop4" />
+      <stop
+         offset="0.730863"
+         stop-color="#0DBDA8"
+         id="stop5" />
+    </linearGradient>
+  </defs>
+</svg>

src/index.css

@@ -55,7 +55,6 @@ layer(compound);
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   --big-drop-shadow: 0px 0px 24px 0px #1b1d221a;
   --subtle-drop-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-  --background-gradient: url("graphics/backgroundGradient.svg");
 
   --call-view-overlay-layer: 1;
   --call-view-header-footer-layer: 2;
@@ -74,7 +73,6 @@ layer(compound);
 
 body {
   background-color: var(--cpd-color-bg-canvas-default);
-  background-repeat: no-repeat;
   color: var(--cpd-color-text-primary);
   color-scheme: dark;
   margin: 0;
@@ -83,8 +81,18 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
-body[data-background="gradient"] {
+body[data-background="gradient"]::before {
-  background-image: var(--background-gradient);
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image: url("graphics/mobile-gradient.svg");
+  background-size: auto;
+  background-position: bottom;
+  background-repeat: no-repeat;
+}
+
+body[data-background="gradient"][data-platform="desktop"]::before {
+  background-image: url("graphics/desktop-gradient.svg");
   background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
   background-position: center;
 }