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 {