fix: offset and color banner properly

src/app/explorer/page.tsx

@@ -28,12 +28,13 @@ const Page = async () => {
       <HeaderBackground />
       <Layout.Root>
         <Layout.Hero>
+          <Layout.Header />
           <div id={ActiveSection.YourGuilds}>
             <Layout.Headline title="Guildhall" />
           </div>
           <Layout.Banner>
             <div className="absolute inset-0 bg-[auto_115%] bg-[right_top_10px] bg-[url('/banner.png')] bg-no-repeat opacity-10" />
-            <div className="absolute inset-0 bg-gradient-to-tr from-50% from-[hsl(240_4%_16%)] to-transparent data-[theme='dark']:from-[hsl(240_3%_22%)]" />
+            <div className="absolute inset-0 bg-gradient-to-tr from-50% from-banner to-transparent" />
           </Layout.Banner>
         </Layout.Hero>
 

src/app/globals.css

@@ -52,6 +52,8 @@
     --success-active: 142 72% 29%;
     --success-foreground: 0 0% 100%;
 
+    --banner: 240 4% 16%;
+
     --border: 240 5.9% 90%;
     --border-muted: 240 3% 93%;
     --input: var(--border);
@@ -153,6 +155,8 @@
     --success-active: 142 77% 73%;
     --success-foreground: 0 0% 100%;
 
+    --banner: 240 3% 22%;
+
     --border: 240 3% 38%;
     --border-muted: 240 3% 28%;
     --input: var(--border);

src/v2/components/Layout/Layout.tsx

@@ -68,17 +68,10 @@ interface BannerProps extends PropsWithChildren {
 
 const Banner = ({ children, offset = 112, className }: BannerProps) => (
   <div
-    className={cn(
-      "-z-10 absolute inset-0 overflow-hidden",
-      `-bottom-[${Math.abs(offset)}px]`
-    )}
+    className={"-z-10 absolute inset-0 overflow-hidden"}
+    style={{ bottom: -offset }}
   >
-    <div
-      className={cn(
-        "absolute inset-0 bg-[hsl(240_4%_16%)] data-[theme='dark']:bg-[hsl(240_3%_22%)]",
-        className
-      )}
-    />
+    <div className={cn("absolute inset-0 bg-banner", className)} />
     {children}
   </div>
 )

tailwind.config.ts

@@ -23,6 +23,7 @@ const config = {
         display: ["var(--font-dystopian,sans-serif)"],
       },
       colors: {
+        banner: "hsl(var(--banner))",
         border: "hsl(var(--border))",
         "border-muted": "hsl(var(--border-muted))",
         input: "hsl(var(--input))",