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.
This commit is contained in:
1 parent
4d720ee03c
commit
741f01e897
8 files changed
+694
-657
No files matched your search
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user