feat(site): redesign home, login and register with premium dark gaming theme
CI / check (push) Failing after 1m5s
CI / deploy (push) Skipped
CI / publish-container (push) Skipped

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.
This commit is contained in:
openhands committed 2026-09-12 15:40:54 +02:00
1 parent 4d720ee03c
commit 741f01e897
8 files changed
+694 -657

No files matched your search

+105
View File
@@ -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;
}
}