feat: add Habbo sky background and pixel-font logo

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>