Frontend update

client/src/routes/public/Maintenance.jsx

@@ -0,0 +1,62 @@
+import { Link } from 'react-router-dom'
+import MoonDot from '../../components/MoonDot.jsx'
+import { useSite } from '../../contexts/SiteContext.jsx'
+
+const HERO_BG =
+  "linear-gradient(180deg,rgba(11,15,20,0.55) 0%,rgba(11,15,20,0.74) 60%,rgba(11,15,20,0.92) 100%),url('/assets/img/uomysticmoon-main-hero.png')"
+
+export default function Maintenance() {
+  const { settings, contactEmail } = useSite()
+  const message =
+    settings.maintenance_message ||
+    'Mysticmoon is in maintenance while we shape its towns, roads, and dungeons. The gates will open soon. Until then, follow along as the world wakes.'
+
+  return (
+    <main
+      style={{
+        minHeight: '100vh',
+        display: 'grid',
+        alignContent: 'center',
+        justifyItems: 'center',
+        textAlign: 'center',
+        padding: '80px max(18px,calc((100% - 760px)/2))',
+        overflow: 'hidden',
+        backgroundColor: 'var(--bg-deep)',
+        backgroundImage: HERO_BG,
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: 'cover',
+      }}
+    >
+      <div style={{ maxWidth: 640, textShadow: '0 2px 22px rgba(0,0,0,0.85)' }}>
+        <div style={{ marginBottom: 26 }}>
+          <MoonDot size={18} glow={0.6} />
+        </div>
+        <p className="eyebrow" style={{ color: '#c2d2e6', letterSpacing: '0.24em' }}>
+          Building beneath the moon
+        </p>
+        <h1
+          className="display"
+          style={{ margin: 0, fontSize: 'clamp(2.6rem,7vw,4.6rem)', lineHeight: 1.05, letterSpacing: '0.02em' }}
+        >
+          The world is not yet open
+        </h1>
+        <p style={{ maxWidth: 520, margin: '24px auto 0', color: '#cdd6e0', fontSize: '1.14rem' }}>{message}</p>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginTop: 34 }}>
+          <Link to="/site/news" className="btn btn-primary">
+            Read the news
+          </Link>
+          <a href={`mailto:${contactEmail}`} className="btn btn-ghost">
+            Contact us
+          </a>
+        </div>
+        <p className="sans" style={{ margin: '40px 0 0', color: '#7a8696', fontSize: '0.82rem' }}>
+          {contactEmail} &nbsp;·&nbsp;{' '}
+          <Link to="/admin/login" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
+            Admin
+          </Link>
+        </p>
+      </div>
+    </main>
+  )
+}