languages/en-GB/westgate.json

@@ -1,3 +1,5 @@
 {
-	"wiki-badge": "Wiki"
+    "wiki-badge": "Wiki",
+    "404.title": "You've wandered off the map.",
+    "404.message": "This alley leads nowhere, and in Westgate, nowhere is where the Night Masks find you.<br>Turn back to the <a href=\"%1/\">lantern-lit streets</a> before they notice you lingering."
 }

scss/westgate/_controls.scss

@@ -397,7 +397,7 @@ table[component="notification/table"] a[data-type]:focus {
       transparent calc(100% - 1px),
       rgba(194, 163, 90, 0.055) calc(100% - 1px)
     ),
-    linear-gradient(100deg, rgba(32, 19, 30, 0.98), rgba(13, 12, 17, 0.98)) !important;
+    var(--wg-velvet-panel) !important;
   background-size:
     100% var(--wg-ledger-line),
     auto;

scss/westgate/_responsive.scss

@@ -1,6 +1,6 @@
 @include media-breakpoint-down(lg) {
 	#panel {
-		background: linear-gradient(180deg, rgba(18, 15, 22, 0.96), rgba(9, 8, 11, 1));
+		background: rgba(17, 14, 21, 0.98);
 	}
 
 	ul.categories-list,

scss/westgate/_surfaces.scss

@@ -5,6 +5,10 @@ body {
 }
 
 body {
+  --bs-link-color: var(--wg-gold);
+  --bs-link-color-rgb: 194, 163, 90;
+  --bs-link-hover-color: #e0c878;
+  --bs-link-hover-color-rgb: 224, 200, 120;
   font-family: var(--wg-font-text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -14,6 +18,12 @@ body {
   background: var(--wg-bg);
 }
 
+// h-100 on #content collapses inside the flex-grown #panel, so the 404's
+// flex-fill never gets height to center in; let #content grow instead
+body.template-404 #content {
+  flex-grow: 1;
+}
+
 .layout-container,
 #content {
   color: var(--wg-text-soft);

scss/westgate/_tokens.scss

@@ -105,12 +105,7 @@
 	--wg-border-soft: rgba(194, 163, 90, 0.08);
 	--wg-focus: rgba(194, 163, 90, 0.28);
 	--wg-focus-ring: #c2a35a;
-	--wg-ledger-panel: linear-gradient(
+	--wg-ledger-panel: rgba(21, 17, 26, 0.97);
-		100deg,
-		rgba(38, 22, 35, 0.5) 0%,
-		rgba(19, 17, 24, 0.97) 34%,
-		rgba(13, 12, 17, 0.98) 100%
-	);
 	--wg-ledger-ruling: rgba(194, 163, 90, 0.055);
 	--wg-ledger-rule-strong: rgba(194, 163, 90, 0.16);
 	--wg-ledger-border: rgba(194, 163, 90, 0.18);
@@ -120,20 +115,8 @@
 		--wg-ledger-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024), inset 0 -1px 0 rgba(0, 0, 0, 0.42), 0 8px 18px rgba(0, 0, 0, 0.2);
 		--wg-etched-highlight: rgba(246, 223, 163, 0.34);
 		--wg-etched-shadow: rgba(23, 12, 16, 0.82);
-		--wg-velvet-panel: linear-gradient(
+	--wg-velvet-panel: rgba(24, 20, 29, 0.97);
-		100deg,
+	--wg-velvet-panel-hover: rgba(31, 26, 38, 0.98);
-		rgba(42, 18, 34, 0.46) 0%,
-		rgba(25, 22, 31, 0.95) 23%,
-		rgba(18, 16, 23, 0.99) 62%,
-		rgba(13, 12, 17, 0.98) 100%
-	);
-	--wg-velvet-panel-hover: linear-gradient(
-		100deg,
-		rgba(58, 24, 48, 0.56) 0%,
-		rgba(31, 25, 39, 0.98) 23%,
-		rgba(21, 18, 27, 1) 62%,
-		rgba(15, 14, 20, 0.99) 100%
-	);
 	--wg-velvet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 0 34px rgba(96, 32, 68, 0.11), 0 10px 26px rgba(0, 0, 0, 0.24);
 	--wg-control-bg: linear-gradient(to bottom, rgba(194, 163, 90, 0.15), rgba(194, 163, 90, 0.05));
 }

scss/westgate/_topbar.scss

@@ -1,10 +1,4 @@
-$wg-topbar-panel-bg: linear-gradient(
+$wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
-  100deg,
-  #2a1222 0%,
-  #19161f 23%,
-  #121017 62%,
-  #0d0c11 100%
-);
 
 .wg-layout-container {
   min-height: 100vh;
@@ -14,9 +8,7 @@ $wg-topbar-panel-bg: linear-gradient(
   top: 0;
   z-index: 1020;
   color: var(--wg-text-soft);
-  background:
+  background: rgba(24, 20, 29, 0.98);
-    linear-gradient(180deg, rgba(255, 241, 196, 0.035), transparent 42%),
-    linear-gradient(90deg, rgba(42, 18, 34, 0.96), rgba(15, 13, 18, 0.98) 38%, rgba(9, 8, 11, 0.99));
   border-bottom: 1px solid rgba(194, 163, 90, 0.2);
   box-shadow:
     inset 0 1px 0 rgba(255, 244, 221, 0.04),

scss/westgate/_widgets.scss

@@ -54,7 +54,7 @@
 	padding: var(--wg-space-md);
 	background:
 		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
-		linear-gradient(100deg, rgba(42, 18, 34, 0.34), rgba(18, 16, 23, 0.96) 62%, rgba(13, 12, 17, 0.98)) !important;
+		var(--wg-velvet-panel) !important;
 	background-size: 100% var(--wg-ledger-line), auto;
 	border: 1px solid rgba(194, 163, 90, 0.14);
 	border-radius: 8px;

templates/404.tpl

@@ -0,0 +1,12 @@
+<div class="flex-fill d-flex flex-column justify-content-center">
+	<h2 class="fw-semibold tracking-tight text-center">[[westgate:404.title]]</h2>
+
+	<div class="mx-auto">
+		<div class="d-flex flex-column gap-3 justify-content-center text-center">
+			<div class="mx-auto p-4">
+				<i class="text-secondary fa fa-fw fa-4x {{{ if icon }}}{icon}{{{ else }}}fa-mask{{{ end }}}"></i>
+			</div>
+			<p class="mb-0">{{{ if error }}}{tx(error)}{{{ else }}}[[westgate:404.message, {config.relative_path}]]{{{ end }}}</p>
+		</div>
+	</div>
+</div>