From 8f32126a4e7ef0c63f9080c1ef1b1b41ad8ad474 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Fri, 26 Dec 2025 21:02:41 -0800
Subject: [PATCH] fix: bg styling outside workspace

---
 .../app/(auth)/components/auth-background.tsx |  1 +
 .../components/background/background-svg.tsx  | 46 +++++++++----------
 .../components/background/background.tsx      |  1 +
 apps/sim/app/_styles/globals.css              | 12 ++---
 apps/sim/app/changelog/layout.tsx             |  3 +-
 apps/sim/app/chat/[identifier]/chat.tsx       |  2 +-
 apps/sim/app/invite/components/layout.tsx     |  3 +-
 apps/sim/app/not-found.tsx                    |  3 +-
 .../[executionId]/resume-page-client.tsx      |  6 ++-
 apps/sim/app/templates/layout-client.tsx      |  5 +-
 apps/sim/app/unsubscribe/unsubscribe.tsx      | 12 ++---
 11 files changed, 52 insertions(+), 42 deletions(-)

diff --git a/apps/sim/app/(auth)/components/auth-background.tsx b/apps/sim/app/(auth)/components/auth-background.tsx
index a06ec0cdbf..47d2d0b8b3 100644
--- a/apps/sim/app/(auth)/components/auth-background.tsx
+++ b/apps/sim/app/(auth)/components/auth-background.tsx
@@ -9,6 +9,7 @@ type AuthBackgroundProps = {
 export default function AuthBackground({ className, children }: AuthBackgroundProps) {
   return (
     <div className={cn('relative min-h-screen w-full overflow-hidden', className)}>
+      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
       <AuthBackgroundSVG />
       <div className='relative z-20'>{children}</div>
     </div>
diff --git a/apps/sim/app/(landing)/components/background/background-svg.tsx b/apps/sim/app/(landing)/components/background/background-svg.tsx
index 7d3129c529..98bea428c5 100644
--- a/apps/sim/app/(landing)/components/background/background-svg.tsx
+++ b/apps/sim/app/(landing)/components/background/background-svg.tsx
@@ -5,39 +5,39 @@ export default function BackgroundSVG() {
       focusable='false'
       className='-translate-x-1/2 pointer-events-none absolute top-0 left-1/2 z-10 hidden h-full min-h-full w-[1308px] sm:block'
       width='1308'
-      height='4942'
-      viewBox='0 18 1308 4066'
+      height='4970'
+      viewBox='0 18 1308 4094'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
       preserveAspectRatio='xMidYMin slice'
     >
-      {/* Pricing section (original height ~380 units) */}
+      {/* Pricing section (extended by ~28 units) */}
       <path d='M6.71704 1236.22H1300.76' stroke='#E7E4EF' strokeWidth='2' />
       <circle cx='11.0557' cy='1236.48' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
       <circle cx='1298.02' cy='1236.48' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M10.7967 1245.42V1613.91' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M1297.76 1245.96V1613.91' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M10.7967 1245.42V1641.91' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M1297.76 1245.96V1641.91' stroke='#E7E4EF' strokeWidth='2' />
 
-      {/* Integrations section (original height ~412 units) */}
-      <path d='M6.71704 1614.89H1291.05' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='11.0557' cy='1615.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='1298.02' cy='1615.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M10.7967 1624.61V2026.93' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M1297.76 1624.61V2026.93' stroke='#E7E4EF' strokeWidth='2' />
+      {/* Integrations section (shifted down by 28 units) */}
+      <path d='M6.71704 1642.89H1291.05' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='11.0557' cy='1643.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='1298.02' cy='1643.15' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M10.7967 1652.61V2054.93' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M1297.76 1652.61V2054.93' stroke='#E7E4EF' strokeWidth='2' />
 
-      {/* Testimonials section (original short height ~149 units) */}
-      <path d='M6.71704 2026.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='11.0557' cy='2026.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='1298.02' cy='2026.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M10.7967 2036.43V2177.43' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M1297.76 2036.43V2177.43' stroke='#E7E4EF' strokeWidth='2' />
+      {/* Testimonials section (shifted down by 28 units) */}
+      <path d='M6.71704 2054.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='11.0557' cy='2054.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='1298.02' cy='2054.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M10.7967 2064.43V2205.43' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M1297.76 2064.43V2205.43' stroke='#E7E4EF' strokeWidth='2' />
 
-      {/* Footer section line */}
-      <path d='M6.71704 2177.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='11.0557' cy='2177.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <circle cx='1298.02' cy='2177.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M10.7967 2187.43V4090.25' stroke='#E7E4EF' strokeWidth='2' />
-      <path d='M1297.76 2187.43V4090.25' stroke='#E7E4EF' strokeWidth='2' />
+      {/* Footer section line (shifted down by 28 units) */}
+      <path d='M6.71704 2205.71H1300.76' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='11.0557' cy='2205.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <circle cx='1298.02' cy='2205.97' r='8.07846' fill='white' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M10.7967 2215.43V4118.25' stroke='#E7E4EF' strokeWidth='2' />
+      <path d='M1297.76 2215.43V4118.25' stroke='#E7E4EF' strokeWidth='2' />
       <path
         d='M959.828 116.604C1064.72 187.189 1162.61 277.541 1293.45 536.597'
         stroke='#E7E4EF'
diff --git a/apps/sim/app/(landing)/components/background/background.tsx b/apps/sim/app/(landing)/components/background/background.tsx
index 5fae578aec..46f7d8d078 100644
--- a/apps/sim/app/(landing)/components/background/background.tsx
+++ b/apps/sim/app/(landing)/components/background/background.tsx
@@ -15,6 +15,7 @@ type BackgroundProps = {
 export default function Background({ className, children }: BackgroundProps) {
   return (
     <div className={cn('relative min-h-screen w-full', className)}>
+      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
       <BackgroundSVG />
       <div className='relative z-0 mx-auto w-full max-w-[1308px]'>{children}</div>
     </div>
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 8915151130..013e6b1d45 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -538,25 +538,25 @@ input[type="search"]::-ms-clear {
   }
 
   .auth-button-gradient {
-    background: linear-gradient(to bottom, var(--brand-500), var(--brand-400)) !important;
+    background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
     border-color: var(--brand-400) !important;
     box-shadow: inset 0 2px 4px 0 var(--brand-400) !important;
   }
 
   .auth-button-gradient:hover {
-    background: linear-gradient(to bottom, var(--brand-500), var(--brand-400)) !important;
+    background: linear-gradient(to bottom, var(--brand-primary-hex), var(--brand-400)) !important;
     opacity: 0.9;
   }
 
   .auth-button-custom {
-    background: var(--brand-500) !important;
-    border-color: var(--brand-500) !important;
+    background: var(--brand-primary-hex) !important;
+    border-color: var(--brand-primary-hex) !important;
     box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
   }
 
   .auth-button-custom:hover {
-    background: var(--brand-500) !important;
-    border-color: var(--brand-500) !important;
+    background: var(--brand-primary-hover-hex) !important;
+    border-color: var(--brand-primary-hover-hex) !important;
     opacity: 1;
   }
 
diff --git a/apps/sim/app/changelog/layout.tsx b/apps/sim/app/changelog/layout.tsx
index 3ce5dbdfa6..f3237c0ca4 100644
--- a/apps/sim/app/changelog/layout.tsx
+++ b/apps/sim/app/changelog/layout.tsx
@@ -2,7 +2,8 @@ import Nav from '@/app/(landing)/components/nav/nav'
 
 export default function ChangelogLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className='min-h-screen bg-background text-foreground'>
+    <div className='relative min-h-screen text-foreground'>
+      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
       <Nav />
       {children}
     </div>
diff --git a/apps/sim/app/chat/[identifier]/chat.tsx b/apps/sim/app/chat/[identifier]/chat.tsx
index 9625ada59a..7c6c8f273c 100644
--- a/apps/sim/app/chat/[identifier]/chat.tsx
+++ b/apps/sim/app/chat/[identifier]/chat.tsx
@@ -553,7 +553,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
 
   // Standard text-based chat interface
   return (
-    <div className='fixed inset-0 z-[100] flex flex-col bg-background text-foreground'>
+    <div className='fixed inset-0 z-[100] flex flex-col bg-white text-foreground'>
       {/* Header component */}
       <ChatHeader chatConfig={chatConfig} starCount={starCount} />
 
diff --git a/apps/sim/app/invite/components/layout.tsx b/apps/sim/app/invite/components/layout.tsx
index 653a3276cd..b5481c8371 100644
--- a/apps/sim/app/invite/components/layout.tsx
+++ b/apps/sim/app/invite/components/layout.tsx
@@ -8,7 +8,8 @@ interface InviteLayoutProps {
 
 export default function InviteLayout({ children }: InviteLayoutProps) {
   return (
-    <div className='bg-white'>
+    <div className='relative min-h-screen'>
+      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
       <Nav variant='auth' />
       <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
         <div className='w-full max-w-[410px]'>{children}</div>
diff --git a/apps/sim/app/not-found.tsx b/apps/sim/app/not-found.tsx
index f57410ef05..2b853fca3b 100644
--- a/apps/sim/app/not-found.tsx
+++ b/apps/sim/app/not-found.tsx
@@ -49,7 +49,8 @@ export default function NotFound() {
   }, [])
 
   return (
-    <div className='min-h-screen bg-white'>
+    <div className='relative min-h-screen'>
+      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
       <Nav variant='auth' />
       <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
         <div className='w-full max-w-[410px]'>
diff --git a/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx b/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
index 74b55d955e..de6c0ef613 100644
--- a/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
+++ b/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
@@ -996,7 +996,8 @@ export default function ResumeExecutionPage({
 
   if (!executionDetail) {
     return (
-      <div className='min-h-screen bg-white'>
+      <div className='relative min-h-screen'>
+        <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
         <Nav variant='auth' />
         <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
           <div className='w-full max-w-[410px]'>
@@ -1042,7 +1043,8 @@ export default function ResumeExecutionPage({
   }
 
   return (
-    <div className='min-h-screen bg-gradient-to-b from-slate-50 to-white'>
+    <div className='relative min-h-screen bg-gradient-to-b from-slate-50 to-white'>
+      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
       <Nav variant='auth' />
       <div className='mx-auto min-h-[calc(100vh-120px)] max-w-7xl px-4 py-6 sm:py-8'>
         {/* Header Section */}
diff --git a/apps/sim/app/templates/layout-client.tsx b/apps/sim/app/templates/layout-client.tsx
index 347740d97c..d886b6c379 100644
--- a/apps/sim/app/templates/layout-client.tsx
+++ b/apps/sim/app/templates/layout-client.tsx
@@ -6,7 +6,10 @@ import { season } from '@/app/_styles/fonts/season/season'
 export default function TemplatesLayoutClient({ children }: { children: React.ReactNode }) {
   return (
     <Tooltip.Provider delayDuration={600} skipDelayDuration={0}>
-      <div className={`${season.variable} flex min-h-screen flex-col font-season`}>{children}</div>
+      <div className={`${season.variable} relative flex min-h-screen flex-col font-season`}>
+        <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
+        {children}
+      </div>
     </Tooltip.Provider>
   )
 }
diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
index 88abb7c6cf..a48f8afe46 100644
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -118,7 +118,7 @@ function UnsubscribeContent() {
 
   if (loading) {
     return (
-      <div className='flex min-h-screen items-center justify-center bg-background'>
+      <div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
         <Card className='w-full max-w-md border shadow-sm'>
           <CardContent className='flex items-center justify-center p-8'>
             <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />
@@ -130,7 +130,7 @@ function UnsubscribeContent() {
 
   if (error) {
     return (
-      <div className='flex min-h-screen items-center justify-center bg-background p-4'>
+      <div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
         <Card className='w-full max-w-md border shadow-sm'>
           <CardHeader className='text-center'>
             <XCircle className='mx-auto mb-2 h-12 w-12 text-red-500' />
@@ -191,7 +191,7 @@ function UnsubscribeContent() {
 
   if (data?.isTransactional) {
     return (
-      <div className='flex min-h-screen items-center justify-center bg-background p-4'>
+      <div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
         <Card className='w-full max-w-md border shadow-sm'>
           <CardHeader className='text-center'>
             <Info className='mx-auto mb-2 h-12 w-12 text-blue-500' />
@@ -243,7 +243,7 @@ function UnsubscribeContent() {
 
   if (unsubscribed) {
     return (
-      <div className='flex min-h-screen items-center justify-center bg-background'>
+      <div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
         <Card className='w-full max-w-md border shadow-sm'>
           <CardHeader className='text-center'>
             <CheckCircle className='mx-auto mb-2 h-12 w-12 text-green-500' />
@@ -271,7 +271,7 @@ function UnsubscribeContent() {
   }
 
   return (
-    <div className='flex min-h-screen items-center justify-center bg-background p-4'>
+    <div className='before:-z-50 relative flex min-h-screen items-center justify-center p-4 before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
       <Card className='w-full max-w-md border shadow-sm'>
         <CardHeader className='text-center'>
           <Heart className='mx-auto mb-2 h-12 w-12 text-red-500' />
@@ -391,7 +391,7 @@ export default function Unsubscribe() {
   return (
     <Suspense
       fallback={
-        <div className='flex min-h-screen items-center justify-center bg-background'>
+        <div className='before:-z-50 relative flex min-h-screen items-center justify-center before:pointer-events-none before:fixed before:inset-0 before:bg-white'>
           <Card className='w-full max-w-md border shadow-sm'>
             <CardContent className='flex items-center justify-center p-8'>
               <Loader2 className='h-8 w-8 animate-spin text-muted-foreground' />