From 152b0c5555b14629081e9d9680dde513b1ae3ceb Mon Sep 17 00:00:00 2001
From: Jonathan Miller <jmiller-moko@noreply.git.mokoconsulting.tech>
Date: Sat, 18 Apr 2026 12:08:07 -0500
Subject: [PATCH] Offline page: logo header area uses body-bg color

The top section of the card (where the logo sits) now uses
var(--body-bg) background with negative margins to bleed into
the card's border-radius. Creates a clean two-tone card effect.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/media/css/offline.css | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/media/css/offline.css b/src/media/css/offline.css
index e5e3008..2ac716a 100644
--- a/src/media/css/offline.css
+++ b/src/media/css/offline.css
@@ -53,13 +53,30 @@
 	}
 }
 
-/* === Logo (with glow effect like clarksvillefurs) === */
+/* === Logo header area === */
 .moko-offline-brand {
 	display: block;
 	text-align: center;
 	text-decoration: none;
-	color: #fff;
-	margin-bottom: 1.5rem;
+	color: var(--body-font-color, #e6ebf1);
+	background: var(--body-bg, #0e1318);
+	margin: -2.5rem -2rem 1.5rem -2rem;
+	padding: 2rem;
+	border-radius: 0.875rem 0.875rem 0 0;
+}
+
+@media (min-width: 768px) {
+	.moko-offline-brand {
+		margin: -3rem -3rem 1.5rem -3rem;
+		padding: 2.5rem 3rem;
+	}
+}
+
+@media (max-width: 575.98px) {
+	.moko-offline-brand {
+		margin: -2rem -1.25rem 1.5rem -1.25rem;
+		padding: 1.5rem 1.25rem;
+	}
 }
 
 .moko-offline-brand:hover {
@@ -71,10 +88,6 @@
 	max-height: 120px;
 	width: auto;
 	height: auto;
-	background: #fff;
-	padding: 1rem 1.5rem;
-	border-radius: 0.5rem;
-	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
 
 .moko-offline-brand .site-title {