+
+
+
+ Powered by
+
+ Runic Gateway + +
+ + Runic Gateway + +
{siteTitle} is an independent private shard project.
diff --git a/client/src/contexts/SiteContext.jsx b/client/src/contexts/SiteContext.jsx
index af4435a..781d97f 100644
--- a/client/src/contexts/SiteContext.jsx
+++ b/client/src/contexts/SiteContext.jsx
@@ -40,7 +40,7 @@ export function SiteProvider({ children }) {
siteTitle: brand.name || settings.site_title || 'Runic Gateway',
siteShortName: brand.shortName || brand.name || settings.site_title || 'Runic Gateway',
contactEmail: brand.contactEmail || settings.contact_email || '',
- heroImage: brand.hero || '/assets/img/hero-moon.png',
+ heroImage: brand.hero || '/assets/img/runic-emblem.png',
}
return {children}
diff --git a/client/src/lib/heroLayout.js b/client/src/lib/heroLayout.js
index 368f7f8..b89f7cb 100644
--- a/client/src/lib/heroLayout.js
+++ b/client/src/lib/heroLayout.js
@@ -1,19 +1,27 @@
// Shared hero-layout helpers used by the public portal and the admin editor.
-// Neutral built-in default; the instance hero image (BRAND_HERO) overrides it at
-// runtime, threaded in as `defaultImage` by the portal.
-export const DEFAULT_HERO_IMAGE = '/assets/img/hero-moon.png'
+// Runic Gateway default hero emblem; the instance hero image (BRAND_HERO)
+// overrides it at runtime, threaded in as `defaultImage` by the portal.
+export const DEFAULT_HERO_IMAGE = '/assets/img/runic-emblem.png'
-// The original hand-tuned multi-gradient hero background over a given image
-// (used for the untouched default so the live page stays consistent until edited).
+// Default hero background: the emblem centered behind the text as a medallion,
+// under a symmetric dark overlay tuned to keep centered hero copy legible.
+// Two layers (overlay gradient + image) so the per-layer background-size in
+// `heroBackground` can contain the square emblem while the overlay stays full-bleed.
export function heroBgStack(image) {
return (
- "linear-gradient(90deg,rgba(11,15,20,0.34) 0%,rgba(11,15,20,0.5) 36%,rgba(11,15,20,0.78) 62%,rgba(11,15,20,0.66) 100%),linear-gradient(180deg,rgba(11,15,20,0.08) 0%,rgba(11,15,20,0.72) 100%),url('" +
+ 'linear-gradient(180deg,rgba(11,15,20,0.62) 0%,rgba(11,15,20,0.48) 38%,rgba(11,15,20,0.52) 58%,rgba(11,15,20,0.86) 100%),' +
+ "url('" +
(image || DEFAULT_HERO_IMAGE) +
"')"
)
}
+// Keep the emblem fully visible and centered, capped so it never overflows a
+// narrow viewport; the overlay layer covers.
+export const HERO_DEFAULT_SIZE = 'cover, min(74vh, 640px, 86vw)'
+export const HERO_DEFAULT_POSITION = 'center, center'
+
export const HERO_BG = heroBgStack(DEFAULT_HERO_IMAGE)
// Single-stop dark overlay driven by the editor's opacity slider.
@@ -26,13 +34,20 @@ export function buildOverlay(opacity) {
export function heroBackground(layout, { isDefault = false, defaultImage } = {}) {
const bg = layout.background || {}
const fallback = defaultImage || DEFAULT_HERO_IMAGE
- const backgroundImage =
- isDefault && !bg.image_url
- ? heroBgStack(fallback)
- : `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || fallback}')`
+ // Untouched default: emblem contained + centered behind the text (per-layer
+ // size/position so the overlay stays full-bleed while the square emblem fits).
+ if (isDefault && !bg.image_url) {
+ return {
+ backgroundColor: 'var(--bg-deep)',
+ backgroundImage: heroBgStack(fallback),
+ backgroundPosition: HERO_DEFAULT_POSITION,
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: HERO_DEFAULT_SIZE,
+ }
+ }
return {
backgroundColor: 'var(--bg-deep)',
- backgroundImage,
+ backgroundImage: `${buildOverlay(layout.overlay?.opacity ?? 0.72)}, url('${bg.image_url || fallback}')`,
backgroundPosition: `${bg.position_x || 'left'} ${bg.position_y || 'center'}`,
backgroundRepeat: 'no-repeat',
backgroundSize: bg.size || 'cover',
diff --git a/client/src/routes/admin/AdminLogin.jsx b/client/src/routes/admin/AdminLogin.jsx
index 758cfdf..5c4ba04 100644
--- a/client/src/routes/admin/AdminLogin.jsx
+++ b/client/src/routes/admin/AdminLogin.jsx
@@ -151,7 +151,8 @@ export default function AdminLogin() {
backgroundColor: 'var(--bg-deep)',
backgroundImage: BG,
backgroundPosition: 'center',
- backgroundSize: 'cover',
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: 'min(60vh, 520px)',
}}
>
diff --git a/client/src/routes/player/PlayerShell.jsx b/client/src/routes/player/PlayerShell.jsx
index b2d4a2e..b444054 100644
--- a/client/src/routes/player/PlayerShell.jsx
+++ b/client/src/routes/player/PlayerShell.jsx
@@ -18,7 +18,8 @@ export default function PlayerShell({ subtitle, children, footer }) {
backgroundColor: 'var(--bg-deep)',
backgroundImage: bg,
backgroundPosition: 'center',
- backgroundSize: 'cover',
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: 'min(60vh, 520px)',
}}
>
diff --git a/client/src/routes/public/Maintenance.jsx b/client/src/routes/public/Maintenance.jsx
index 3ca2742..b6b0b5a 100644
--- a/client/src/routes/public/Maintenance.jsx
+++ b/client/src/routes/public/Maintenance.jsx
@@ -23,7 +23,7 @@ export default function Maintenance() {
backgroundImage: heroBg,
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
- backgroundSize: 'cover',
+ backgroundSize: 'min(60vh, 520px)',
}}
>
diff --git a/client/src/styles/theme.css b/client/src/styles/theme.css
index 0683b98..bd51801 100644
--- a/client/src/styles/theme.css
+++ b/client/src/styles/theme.css
@@ -1020,10 +1020,29 @@ button[disabled] {
margin: 0 auto;
}
.site-footer-badge {
- height: 56px;
- width: auto;
+ display: flex;
+ align-items: center;
+ gap: 10px;
flex: 0 0 auto;
- opacity: 0.85;
+}
+.site-footer-badge img {
+ height: 48px;
+ width: 48px;
+ object-fit: contain;
+ filter: drop-shadow(0 0 6px rgba(127, 153, 189, 0.35));
+}
+.site-footer-badge span {
+ font-size: 0.72rem;
+ line-height: 1.25;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: var(--dim);
+ text-align: left;
+}
+.site-footer-badge strong {
+ color: var(--muted);
+ font-weight: 700;
+ letter-spacing: 0.04em;
}
.site-footer-info {
display: flex;
@@ -1045,8 +1064,9 @@ button[disabled] {
.site-footer-inner {
flex-direction: column;
}
- .site-footer-badge {
- height: 44px;
+ .site-footer-badge img {
+ height: 40px;
+ width: 40px;
}
}
diff --git a/server/src/config/brand.js b/server/src/config/brand.js
index 9b3a0c8..a5be124 100644
--- a/server/src/config/brand.js
+++ b/server/src/config/brand.js
@@ -31,7 +31,7 @@ const brand = {
// Visual
accent: process.env.BRAND_ACCENT_COLOR || '#7f99bd',
logo: process.env.BRAND_LOGO || '', // empty → no logo image rendered
- hero: process.env.BRAND_HERO || '/assets/img/hero-moon.png',
+ hero: process.env.BRAND_HERO || '/assets/img/runic-emblem.png',
favicon: process.env.BRAND_FAVICON || '/assets/img/favicon.ico', // Runic Gateway default emblem
}