From 5fe01532caf4f9ab4fd8f523c41f3531f7b33ce7 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 22 Jul 2026 14:07:33 +0200
Subject: [PATCH] feat: add Habbo sky background and pixel-font logo

---
 src/app/globals.css            | 79 ++++++++++++++++++++++++++++------
 src/components/site-header.tsx | 35 ++++++++++-----
 2 files changed, 90 insertions(+), 24 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 406ced42..7e1db3f3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -257,26 +257,79 @@ summary,
 	}
 }
 
-/* ── Site background ── */
+/* ── Site background: Habbo sky ── */
 .site-bg {
 	background:
 		linear-gradient(
-			to bottom,
-			color-mix(in srgb, var(--color-primary) 12%, rgba(255, 255, 255, 0.6)),
-			rgba(255, 255, 255, 0.75)
-		),
-		url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
-	background-blend-mode: overlay;
+			180deg,
+			color-mix(in srgb, var(--color-primary) 4%, #b3d9f7) 0%,
+			color-mix(in srgb, var(--color-primary) 6%, #d4e8fa) 25%,
+			color-mix(in srgb, var(--color-primary) 8%, #e8f0f8) 50%,
+			color-mix(in srgb, var(--color-primary) 10%, #f0e8d8) 75%,
+			color-mix(in srgb, var(--color-primary) 14%, var(--color-background)) 100%
+		);
+	background-attachment: fixed;
+	position: relative;
 }
+/* Habbo-style clouds */
+.site-bg::before {
+	content: "";
+	position: fixed;
+	inset: 0;
+	pointer-events: none;
+	z-index: 0;
+	background:
+		radial-gradient(ellipse 240px 60px at 15% 8%, rgba(255,255,255,0.5) 0%, transparent 100%),
+		radial-gradient(ellipse 320px 70px at 35% 12%, rgba(255,255,255,0.4) 0%, transparent 100%),
+		radial-gradient(ellipse 200px 50px at 55% 6%, rgba(255,255,255,0.45) 0%, transparent 100%),
+		radial-gradient(ellipse 280px 65px at 75% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
+		radial-gradient(ellipse 180px 45px at 90% 5%, rgba(255,255,255,0.35) 0%, transparent 100%),
+		radial-gradient(ellipse 260px 55px at 50% 18%, rgba(255,255,255,0.25) 0%, transparent 100%),
+		radial-gradient(ellipse 200px 40px at 20% 22%, rgba(255,255,255,0.2) 0%, transparent 100%);
+}
+/* Subtle primary glow */
+.site-bg::after {
+	content: "";
+	position: fixed;
+	inset: 0;
+	pointer-events: none;
+	z-index: 0;
+	background:
+		radial-gradient(ellipse 600px 400px at 20% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 100%),
+		radial-gradient(ellipse 500px 300px at 80% 0%, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 100%);
+}
+/* Ensure all content sits above the cloud/glow layers */
+.site-bg > * {
+	position: relative;
+	z-index: 1;
+}
+
 html.dark .site-bg {
 	background:
 		linear-gradient(
-			to bottom,
-			color-mix(in srgb, var(--color-primary) 10%, rgba(0, 0, 0, 0.72)),
-			rgba(0, 0, 0, 0.82)
-		),
-		url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
-	background-blend-mode: overlay;
+			180deg,
+			color-mix(in srgb, var(--color-primary) 6%, #0a0e1a) 0%,
+			color-mix(in srgb, var(--color-primary) 8%, #10152a) 30%,
+			color-mix(in srgb, var(--color-primary) 10%, #161c30) 60%,
+			color-mix(in srgb, var(--color-primary) 12%, #0f141f) 100%
+		);
+	background-attachment: fixed;
+}
+html.dark .site-bg::before {
+	opacity: 0.08;
+	background:
+		radial-gradient(ellipse 240px 60px at 15% 8%, rgba(200,210,255,0.5) 0%, transparent 100%),
+		radial-gradient(ellipse 320px 70px at 35% 12%, rgba(200,210,255,0.4) 0%, transparent 100%),
+		radial-gradient(ellipse 200px 50px at 55% 6%, rgba(200,210,255,0.45) 0%, transparent 100%),
+		radial-gradient(ellipse 280px 65px at 75% 10%, rgba(200,210,255,0.5) 0%, transparent 100%),
+		radial-gradient(ellipse 180px 45px at 90% 5%, rgba(200,210,255,0.35) 0%, transparent 100%),
+		radial-gradient(ellipse 260px 55px at 50% 18%, rgba(200,210,255,0.25) 0%, transparent 100%),
+		radial-gradient(ellipse 200px 40px at 20% 22%, rgba(200,210,255,0.2) 0%, transparent 100%);
+}
+html.dark .site-bg::after {
+	background:
+		radial-gradient(ellipse 600px 400px at 20% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 100%),
+		radial-gradient(ellipse 500px 300px at 80% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, transparent 100%);
 }
 
 /* Admin must not inherit the public wallpaper — solid HK canvas only. */
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index a9db9922..ffabd630 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -84,17 +84,30 @@ export async function SiteHeader() {
 							unoptimized
 						/>
 					) : (
-						<h1
-							className="text-center font-extrabold tracking-tight leading-none text-white"
-							style={{
-								fontSize: "clamp(2.5rem, 7vw, 4.5rem)",
-								textShadow:
-									"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
-								letterSpacing: "-0.02em",
-							}}
-						>
-							{hotelName} - Hotel
-						</h1>
+						<div className="text-center">
+							<h1
+								className="font-black tracking-tight leading-none text-white"
+								style={{
+									fontFamily: "var(--font-pixel)",
+									fontSize: "clamp(2.8rem, 8vw, 5.5rem)",
+									textShadow:
+										"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
+									letterSpacing: "0.04em",
+								}}
+							>
+								{hotelName}
+							</h1>
+							<p
+								className="text-sm md:text-base font-bold tracking-[0.15em] uppercase mt-1"
+								style={{
+									color: "color-mix(in srgb, var(--color-primary) 70%, white)",
+									textShadow: "0 2px 12px rgba(0,0,0,0.5)",
+									letterSpacing: "0.2em",
+								}}
+							>
+								Hotel
+							</p>
+						</div>
 					)}
 				</Link>