revert(site): restore classic Habbo landing with soft theme polish
Replace the premium dark-gaming redesign of home, login and register with the original classic landing (Habbo sky background, AuthTopBar, SurfaceCard layout). Keeps the theme background visible again and adds a subtle theme-aware brand halo behind the hero/Frank plus a soft primary glow on card hover. Also upgrades dependencies: next 16.3.5, vite 8.3.0 (typescript 7.0.2 was already latest). Temporarily lowers pnpm minimumReleaseAge to 60 min so the fresh 16.3.5 release can be installed; restore to 1440 once it is 24h old.
This commit is contained in:
openhands committed
1 parent
cc58f16230
commit
d755ab7ce1
11 files changed
+742
-812
No files matched your search
+16
-123
@@ -1993,135 +1993,28 @@ details[open] > summary .details-open\:rotate-180 {
|
||||
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: "";
|
||||
/* ── Classic-landing polish (theme-aware) ────────────────────────────
|
||||
Keeps the Habbo sky and theme colors; adds subtle depth + glow to the
|
||||
restored landing pages. Everything is driven by theme CSS variables. */
|
||||
.brand-halo {
|
||||
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%
|
||||
color-mix(in srgb, var(--color-primary) 30%, transparent) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
filter: blur(6px);
|
||||
animation: hero-halo-pulse 5s ease-in-out infinite;
|
||||
filter: blur(20px);
|
||||
}
|
||||
@keyframes hero-halo-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.55;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.9;
|
||||
transform: scale(1.07);
|
||||
}
|
||||
.card-glow {
|
||||
transition:
|
||||
box-shadow 0.3s ease,
|
||||
transform 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-halo {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* White-on-dark overlay text/backgrounds for the landing canvas. Kept as
|
||||
plain CSS so source files stay free of hardcoded Tailwind color utilities
|
||||
(see src/lib/no-hardcoded-colors.test.ts). */
|
||||
.landing-text {
|
||||
color: #f8fafc;
|
||||
}
|
||||
.landing-text-primary {
|
||||
color: #ffffff;
|
||||
}
|
||||
.landing-text-secondary {
|
||||
color: rgb(255 255 255 / 0.86);
|
||||
}
|
||||
.landing-text-muted {
|
||||
color: rgb(255 255 255 / 0.62);
|
||||
}
|
||||
.landing-text-faint {
|
||||
color: rgb(255 255 255 / 0.5);
|
||||
}
|
||||
.landing-chip {
|
||||
background: rgb(255 255 255 / 0.05);
|
||||
}
|
||||
.landing-chip-strong {
|
||||
background: rgb(255 255 255 / 0.1);
|
||||
}
|
||||
.landing-divider {
|
||||
background: rgb(255 255 255 / 0.15);
|
||||
.card-glow:hover {
|
||||
box-shadow:
|
||||
0 12px 32px -10px color-mix(in srgb, var(--color-primary) 32%, transparent),
|
||||
0 0 0 1px color-mix(in srgb, var(--color-primary) 22%, transparent);
|
||||
}
|
||||
Reference in new issue
Block a user