From ed25b323e8925ef4864a0a716f464cd3488dd9ae Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Fri, 5 Dec 2025 10:38:23 -0600
Subject: [PATCH] fix(create): use inline styles for dynamic gradient
 backgrounds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Panda CSS's css() function doesn't properly interpolate dynamic gradient
strings. Move background and boxShadow with theme.gradient values to
inline style props for:
- Top gradient bar (converted from _before pseudo to actual div)
- Icon background
- CTA button background

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/app/create/page.tsx | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/app/create/page.tsx b/apps/web/src/app/create/page.tsx
index 36c75079..cf54fbf2 100644
--- a/apps/web/src/app/create/page.tsx
+++ b/apps/web/src/app/create/page.tsx
@@ -73,17 +73,20 @@ function CreatorCard({
             boxShadow: { base: '0 16px 50px rgba(0,0,0,0.2)', md: '0 30px 80px rgba(0,0,0,0.25)' },
             borderColor: 'border.emphasized',
           },
-          _before: {
-            content: '""',
+        })}
+      >
+        {/* Top gradient bar (replaces _before pseudo-element for dynamic gradient support) */}
+        <div
+          className={css({
             position: 'absolute',
             top: 0,
             left: 0,
             right: 0,
             height: { base: '4px', md: '6px' },
-            background: theme.gradient,
-          },
-        })}
-      >
+          })}
+          style={{ background: theme.gradient }}
+        />
+
         {/* Icon */}
         <div
           className={css({
@@ -95,10 +98,12 @@ function CreatorCard({
             width: { base: '56px', sm: '64px', md: '80px' },
             height: { base: '56px', sm: '64px', md: '80px' },
             borderRadius: { base: 'xl', md: '2xl' },
-            background: theme.gradient,
-            boxShadow: `0 8px 24px ${theme.shadowColor}`,
             flexShrink: 0,
           })}
+          style={{
+            background: theme.gradient,
+            boxShadow: `0 8px 24px ${theme.shadowColor}`,
+          }}
         >
           {emoji}
         </div>
@@ -182,13 +187,15 @@ function CreatorCard({
               px: { base: 4, md: 6 },
               py: { base: 2, md: 3 },
               borderRadius: 'xl',
-              background: theme.gradient,
               color: 'white',
               fontWeight: 'bold',
               fontSize: { base: 'sm', md: 'md' },
-              boxShadow: `0 4px 15px ${theme.shadowColor}`,
               transition: 'all 0.3s',
             })}
+            style={{
+              background: theme.gradient,
+              boxShadow: `0 4px 15px ${theme.shadowColor}`,
+            }}
           >
             <span>{buttonText}</span>
             <span className={css({ fontSize: { base: 'md', md: 'lg' } })}>→</span>