remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add Habbo sky background and pixel-font logo
Deploy / release (push) Skipped
Details
Deploy / deploy (push) Successful in 1m48s
Details

Browse Source
This commit is contained in:
openhands committed 2026-07-22 14:07:33 +02:00
1 parent eb60f1a762
commit 5fe01532ca
2 files changed
+90 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/globals.css
+66 -13
View File
@@ -257,26 +257,79 @@ summary,
}
}
/* ── Site background ── */
/* ── Site background: Habbo sky ── */
.site-bg {
background:
linear-gradient(
to bottom,
color-mix(in srgb, var(--color-primary) 12%, rgba(255, 255, 255, 0.6)),
rgba(255, 255, 255, 0.75)
),
url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
background-blend-mode: overlay;
180deg,
color-mix(in srgb, var(--color-primary) 4%, #b3d9f7) 0%,
color-mix(in srgb, var(--color-primary) 6%, #d4e8fa) 25%,
color-mix(in srgb, var(--color-primary) 8%, #e8f0f8) 50%,
color-mix(in srgb, var(--color-primary) 10%, #f0e8d8) 75%,
color-mix(in srgb, var(--color-primary) 14%, var(--color-background)) 100%
);
background-attachment: fixed;
position: relative;
}
/* Habbo-style clouds */
.site-bg::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 240px 60px at 15% 8%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(ellipse 320px 70px at 35% 12%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(ellipse 200px 50px at 55% 6%, rgba(255,255,255,0.45) 0%, transparent 100%),
radial-gradient(ellipse 280px 65px at 75% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(ellipse 180px 45px at 90% 5%, rgba(255,255,255,0.35) 0%, transparent 100%),
radial-gradient(ellipse 260px 55px at 50% 18%, rgba(255,255,255,0.25) 0%, transparent 100%),
radial-gradient(ellipse 200px 40px at 20% 22%, rgba(255,255,255,0.2) 0%, transparent 100%);
}
/* Subtle primary glow */
.site-bg::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 600px 400px at 20% 0%, color-mix(in srgb, var(--color-primary) 10%, transparent) 0%, transparent 100%),
radial-gradient(ellipse 500px 300px at 80% 0%, color-mix(in srgb, var(--color-primary) 6%, transparent) 0%, transparent 100%);
}
/* Ensure all content sits above the cloud/glow layers */
.site-bg > * {
position: relative;
z-index: 1;
}
html.dark .site-bg {
background:
linear-gradient(
to bottom,
color-mix(in srgb, var(--color-primary) 10%, rgba(0, 0, 0, 0.72)),
rgba(0, 0, 0, 0.82)
),
url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
background-blend-mode: overlay;
180deg,
color-mix(in srgb, var(--color-primary) 6%, #0a0e1a) 0%,
color-mix(in srgb, var(--color-primary) 8%, #10152a) 30%,
color-mix(in srgb, var(--color-primary) 10%, #161c30) 60%,
color-mix(in srgb, var(--color-primary) 12%, #0f141f) 100%
);
background-attachment: fixed;
}
html.dark .site-bg::before {
opacity: 0.08;
background:
radial-gradient(ellipse 240px 60px at 15% 8%, rgba(200,210,255,0.5) 0%, transparent 100%),
radial-gradient(ellipse 320px 70px at 35% 12%, rgba(200,210,255,0.4) 0%, transparent 100%),
radial-gradient(ellipse 200px 50px at 55% 6%, rgba(200,210,255,0.45) 0%, transparent 100%),
radial-gradient(ellipse 280px 65px at 75% 10%, rgba(200,210,255,0.5) 0%, transparent 100%),
radial-gradient(ellipse 180px 45px at 90% 5%, rgba(200,210,255,0.35) 0%, transparent 100%),
radial-gradient(ellipse 260px 55px at 50% 18%, rgba(200,210,255,0.25) 0%, transparent 100%),
radial-gradient(ellipse 200px 40px at 20% 22%, rgba(200,210,255,0.2) 0%, transparent 100%);
}
html.dark .site-bg::after {
background:
radial-gradient(ellipse 600px 400px at 20% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent) 0%, transparent 100%),
radial-gradient(ellipse 500px 300px at 80% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, transparent 100%);
}
/* Admin must not inherit the public wallpaper — solid HK canvas only. */