fix: habbo background with primary color tint, restore epicnabbo text logo

src/app/globals.css

@@ -185,12 +185,12 @@ body {
 
 .site-bg {
   background:
-    linear-gradient(to bottom, rgba(255,255,255,0.88), rgba(248,250,252,0.95)),
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 18%, rgba(255,255,255,0.7)), rgba(255,255,255,0.85)),
     url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
 }
 .app.dark .site-bg {
   background:
-    linear-gradient(to bottom, rgba(15,17,23,0.92), rgba(15,17,23,0.97)),
+    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 12%, rgba(15,17,23,0.8)), rgba(15,17,23,0.9)),
     url("/assets/images/background-dark.jpg") no-repeat fixed center / cover;
 }
 

src/components/site-header.tsx

@@ -31,9 +31,11 @@ export async function SiteHeader() {
           <div className="flex flex-col items-center justify-center max-w-[600px]">
             <Link href="/" className="transition-all duration-300 hover:scale-110 mb-2.5">
               {logo ? (
-                <img className="drop-shadow block" src={logo} alt="Hotel logo" />
+                <img className="drop-shadow block" src={logo} alt={hotelName ?? "Hotel"} />
               ) : (
-                <span className="text-4xl font-extrabold text-white text-shadow">{hotelName}</span>
+                <span className="text-5xl font-extrabold text-white text-shadow tracking-tight" style={{ fontFamily: "var(--font-family)", textShadow: "0 2px 10px rgba(0,0,0,0.5), 0 0 40px rgba(0,0,0,0.3)", letterSpacing: "0.02em" }}>
+                  {hotelName}
+                </span>
               )}
             </Link>
             <div className="relative flex items-center bg-white dark:bg-gray-800 rounded-md h-[50px] px-4 mt-2">