feat(site): redesign home, login and register with premium dark gaming theme

Replaced the classic Habbo landing style on the home, login and register pages with a modern premium dark-gaming look: always-dark hero canvas with brand glows, grid overlay and ambient orbs, glass panels, gradient text and floating art. Adds shared LandingTopBar, AuthShell and BrandFrank components plus reusable premium CSS utilities. Build, typecheck and lint pass.
2026-09-12 15:40:54 +02:00
parent 4d720ee03c
commit 741f01e897
8 changed files with 694 additions and 657 deletions
@@ -1992,3 +1992,108 @@ details[open] > summary .details-open\:rotate-180 {
 .stagger-children > *:nth-child(8) {
 	animation-delay: 0.4s;
 }
+
+/* ── Premium landing kit (dark gaming style) ───────────────────
+   Shared primitives for the redesigned home / login / register
+   pages. Everything stays theme-aware: brand colors are driven by
+   --color-primary / --color-accent, and the "always-dark" hero
+   canvas is mixed from the surface token so it blends with both
+   light and dark hotel themes. */
+.landing-hero {
+	position: relative;
+	isolation: isolate;
+	overflow: hidden;
+	background:
+		radial-gradient(
+			60em 40em at 12% -10%,
+			color-mix(in srgb, var(--color-primary) 22%, transparent) 0%,
+			transparent 60%
+		),
+		radial-gradient(
+			50em 36em at 108% 12%,
+			color-mix(in srgb, var(--color-accent) 18%, transparent) 0%,
+			transparent 62%
+		),
+		linear-gradient(
+			175deg,
+			color-mix(in srgb, var(--color-surface) 6%, #05070d) 0%,
+			color-mix(in srgb, var(--color-surface) 8%, #0a0f1d) 55%,
+			color-mix(in srgb, var(--color-background) 45%, #0a0f1d) 100%
+		);
+	color-scheme: dark;
+}
+.landing-hero::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background-image:
+		linear-gradient(
+			to right,
+			color-mix(in srgb, #ffffff 5%, transparent) 1px,
+			transparent 1px
+		),
+		linear-gradient(
+			to bottom,
+			color-mix(in srgb, #ffffff 5%, transparent) 1px,
+			transparent 1px
+		);
+	background-size: 44px 44px;
+	-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
+	mask-image: linear-gradient(to bottom, #000 30%, transparent 92%);
+	z-index: 0;
+}
+
+/* Text with a brand gradient (primary → accent). */
+.text-gradient {
+	background: linear-gradient(
+		115deg,
+		var(--color-primary) 10%,
+		color-mix(in srgb, var(--color-primary) 55%, var(--color-accent)) 48%,
+		var(--color-accent) 92%
+	);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+/* Primary-tinted glass card used for auth forms / panels. */
+.glass-panel {
+	background: color-mix(in srgb, #0b1020 62%, transparent);
+	backdrop-filter: blur(22px);
+	-webkit-backdrop-filter: blur(22px);
+	border: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
+	box-shadow:
+		0 30px 80px -20px rgba(0, 0, 0, 0.55),
+		inset 0 1px 0 color-mix(in srgb, #ffffff 9%, transparent);
+}
+
+/* Soft animated halo behind floating hero art. */
+.hero-halo {
+	position: absolute;
+	border-radius: 999px;
+	background: radial-gradient(
+		circle,
+		color-mix(in srgb, var(--color-primary) 55%, transparent) 0%,
+		transparent 68%
+	);
+	filter: blur(6px);
+	animation: hero-halo-pulse 5s ease-in-out infinite;
+}
+@keyframes hero-halo-pulse {
+	0%,
+	100% {
+		opacity: 0.55;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 0.9;
+		transform: scale(1.07);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.hero-halo {
+		animation: none;
+	}
+}