Match desktop background gradient to Nova

apps/desktop/app/globals.css

@@ -17,14 +17,7 @@ body {
 .desktop-shell {
 	position: relative;
 	isolation: isolate;
-	background:
-		radial-gradient(
-			ellipse 80% 60% at 50% 0%,
-			rgba(75, 160, 250, 0.08) 0%,
-			rgba(34, 97, 202, 0.04) 35%,
-			transparent 70%
-		),
-		#05080d;
+	background: #05080d;
 	color: #fafafa;
 }
 
@@ -33,18 +26,18 @@ body {
 	inset: 0;
 	z-index: -2;
 	content: "";
-	background-image: radial-gradient(
-		circle,
-		rgba(105, 167, 240, 0.18) 1px,
-		transparent 1px
-	);
-	background-size: 32px 32px;
-	mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
-	-webkit-mask-image: radial-gradient(
-		ellipse at center,
-		black 55%,
-		transparent 100%
-	);
+	background-image:
+		url("/bg-rectangle.png"), url("/onboarding/bg-gradient-1.png"),
+		url("/onboarding/bg-gradient-0.png");
+	background-position:
+		bottom,
+		center 20%,
+		center 20%;
+	background-repeat: no-repeat;
+	background-size:
+		cover,
+		150% auto,
+		150% auto;
 	pointer-events: none;
 }
 
@@ -53,7 +46,16 @@ body {
 	inset: 0;
 	z-index: -1;
 	content: "";
-	background: rgb(5 8 13 / 0.55);
+	background-image:
+		radial-gradient(
+			circle at center,
+			rgba(105, 167, 240, 0.22) 1px,
+			transparent 1px
+		),
+		linear-gradient(rgb(5 8 13 / 0.55), rgb(5 8 13 / 0.55));
+	background-size:
+		32px 32px,
+		auto;
 	pointer-events: none;
 }
 

apps/desktop/app/onboarding/page.tsx

@@ -880,29 +880,54 @@ function StepIndicator({ step }: { step: DesktopOnboardingStep }) {
 
 function NovaBackground() {
 	return (
-		<>
+		<div
+			aria-hidden
+			className="pointer-events-none absolute inset-0 overflow-hidden"
+		>
 			<div
-				aria-hidden
-				className="pointer-events-none absolute inset-0"
+				className="absolute inset-0"
 				style={{
-					background:
-						"radial-gradient(ellipse 80% 60% at 50% 40%, rgba(75,160,250,0.08) 0%, rgba(34,97,202,0.04) 35%, transparent 70%)",
+					backgroundImage: "url('/onboarding/bg-gradient-0.png')",
+					backgroundPosition: "center 20%",
+					backgroundRepeat: "no-repeat",
+					backgroundSize: "150% auto",
 				}}
 			/>
 			<div
-				aria-hidden
+				className="absolute inset-0"
+				style={{
+					backgroundImage: "url('/onboarding/bg-gradient-1.png')",
+					backgroundPosition: "center 20%",
+					backgroundRepeat: "no-repeat",
+					backgroundSize: "150% auto",
+					opacity: 0.8,
+				}}
+			/>
+			<div
+				className="pointer-events-none absolute inset-0"
+				style={{
+					backgroundImage: "url('/bg-rectangle.png')",
+					backgroundPosition: "bottom",
+					backgroundRepeat: "no-repeat",
+					backgroundSize: "cover",
+					mixBlendMode: "soft-light",
+					opacity: 0.4,
+				}}
+			/>
+			<div className="absolute inset-0 bg-[#05080D]/55" />
+			<div
 				className="pointer-events-none absolute inset-0"
 				style={{
 					backgroundImage:
 						"radial-gradient(circle at center, rgba(105,167,240,0.22) 1px, transparent 1px)",
-					backgroundSize: "28px 28px",
+					backgroundSize: "32px 32px",
 					maskImage:
-						"radial-gradient(ellipse at center, black 0%, black 40%, transparent 90%)",
+						"radial-gradient(ellipse at center, black 55%, transparent 100%)",
 					WebkitMaskImage:
-						"radial-gradient(ellipse at center, black 0%, black 40%, transparent 90%)",
+						"radial-gradient(ellipse at center, black 55%, transparent 100%)",
 				}}
 			/>
-		</>
+		</div>
 	)
 }