Theme post code blocks + a11y fixes (impeccable audit) (#25)

Code blocks in posts rendered with the markdown plugin's default light highlight.js theme — white blocks on the dark ledger. This adds dark velvet pre/code styling and a Westgate-toned syntax palette (gold keywords, ledger-ink titles, muted green strings) for post content and the composer preview.

Also picks up the quick wins from an impeccable audit:

- Visible focus ring on the mobile drawer search (input had `outline: 0` with no replacement)
- Input placeholder contrast raised to pass WCAG 4.5:1; tagsinput placeholder reuses the token instead of `$gray-500`
- `prefers-reduced-motion` block zeroing transitions/animations (there were none before)
- Fixed a stray `</li>` closing a `<div>` in `quick-search-results.tpl`

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Reviewed-on: #25
Co-authored-by: vickydotbat <vickydotbat@tutamail.com>
Co-committed-by: vickydotbat <vickydotbat@tutamail.com>

DESIGN.md

@@ -37,7 +37,10 @@ typography:
     fontFamily: "'IBM Plex Mono', ui-monospace, monospace"
     fontWeight: 400
 rounded:
-  md: "8px"
+  xs: "3px"
+  sm: "4px"
+  md: "6px"
+  lg: "8px"
 spacing:
   2xs: "0.25rem"
   xs: "0.5rem"
@@ -61,7 +64,7 @@ components:
   card:
     backgroundColor: "{colors.velvet-panel}"
     textColor: "{colors.ash-text}"
-    rounded: "{rounded.md}"
+    rounded: "{rounded.lg}"
 ---
 
 # Design System: Westgate
@@ -152,25 +155,31 @@ Shadows here are candlelight, not physics. They set mood — a soft top highligh
 ### Named Rules
 **The Candlelight Rule.** Shadows are atmosphere. If you need to show one thing sits above another, change the panel tone and border alpha; do not invent a bigger shadow.
 
+## 4½. Motion & Modes
+
+- Transitions are short (0.16–0.25s) and touch only paint/composite properties (color, background, border-color, box-shadow, transform). No layout-property animation.
+- A global `prefers-reduced-motion: reduce` block zeroes all transition and animation durations.
+- Box-shadow focus rings carry a transparent 2px outline so forced-colors / high-contrast mode still shows focus.
+
 ## 5. Components
 
 Etched and restrained: controls read as engraved metal — thin gilt borders, quiet vertical gradients, nothing shouts.
 
 ### Buttons
-- **Shape:** softly rounded (Bootstrap default radius; surfaces use 8px).
+- **Shape:** softly rounded. Radius scale: 8px for surfaces (cards, panels, dropdowns), 6px for controls and post containers, 4px for chips and inline code, 3px for tiny badges.
 - **Primary:** dark gold plate. Gradient #5a4a1a → #473914, border Old Gilt (#a8893f), text #f0e6d8, with a 1px inner top highlight. Hover warms the gradient to #6a5720 → #53431a and brightens the border to Tarnished Gold.
 - **Secondary / Ghost:** near-transparent dark fill (rgba(8,7,10,0.12)) with a gilt border at 28% alpha and text #d8cec0. Hover adds a faint gold wash (rgba(194,163,90,0.075)) and strengthens the border.
 - **Focus:** 2px outline in solid Tarnished Gold (#c2a35a, the `--wg-focus-ring` token) — WCAG wants ≥3:1 for focus indicators, so the outline never uses the soft alpha token. The soft token (rgba(194,163,90,0.28)) is only for input glows.
 
 ### Cards / Containers (the velvet surface)
-- **Corner Style:** 8px radius.
+- **Corner Style:** 8px radius (6px on post containers).
 - **Background:** the velvet gradient — a 100° sweep from bruised plum (rgba(42,18,34,0.46)) into near-black — over category rows, topic rows, post containers, and headers.
 - **Border:** 1px Tarnished Gold at 14% alpha; hover raises it to 22%.
 - **Shadow Strategy:** Velvet rest → Velvet hover (see Elevation).
 - **Plain panels** (cards, list-group items) use flat Velvet Panel (#18141d) with a soft gold border at 8% alpha.
 
 ### Inputs / Fields
-- **Style:** near-black well (rgba(18,15,22,0.96)), 1px gilt border at 18% alpha, Bone Text. Placeholders are Ash Text at 62% alpha.
+- **Style:** near-black well (rgba(18,15,22,0.96)), 1px gilt border at 18% alpha, Bone Text. Placeholders are Ash Text at 74% alpha (the floor that keeps 4.5:1 contrast).
 - **Focus:** border rises to gold at 50% alpha plus a 1px gold ring (rgba(194,163,90,0.28)) and a faint light wash. Focus is always visible.
 - **Selects:** custom gold chevron (inline SVG, stroke #c2a35a).
 - **Switches:** dark track with gilt border; the thumb is a Ledger Ink dot.
@@ -178,6 +187,9 @@ Etched and restrained: controls read as engraved metal — thin gilt borders, qu
 ### Navigation (topbar)
 - Cinzel labels, tracked 0.08em and uppercase, over the dark base. Count bubbles honor the `hidden` class and only show with a real count.
 
+### Code (posts, composer preview, wiki prose)
+Code is written in a darker well of the same page: blocks use a vertical near-black gradient (rgba(18,15,22,0.92) → rgba(8,7,10,0.82)) with a gilt border at 22% alpha and 6px radius; inline code sits in rgba(8,7,10,0.45) with a 12% gilt border and 4px radius, in IBM Plex Mono. Syntax colors stay in the court's palette: keywords Gold Lit (#e0c878), titles/functions Ledger Ink (#d8c28a), types/built-ins Tarnished Gold (#c2a35a), strings a muted moss (#a3c58a), numbers/attributes a dry apricot (#d9a37a), comments Dust Text italic, deletions #c55a5f. Never ship the highlighter's default light theme.
+
 ### The Ledger (signature component)
 Ruled, page-like surfaces (notification tables, list ledgers): a flat 100° gradient from dark plum into black, faint gold rulings (rgba(194,163,90,0.055)) with stronger rules (0.16) for structure, headers in Cinzel Ledger Ink Muted, text in Ledger Ink, and Wax Seal (#a84a4e) for stamped accents.
 

languages/en-GB/westgate.json

@@ -1,5 +1,24 @@
 {
     "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."
+    "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.",
+    "view-original": "View Original",
+    "copy-handle": "Copy handle",
+    "select-topic": "Select topic",
+    "footer.description": "A Neverwinter Nights: Enhanced Edition persistent world of gothic intrigue, set in the Forgotten Realms port city of Westgate.",
+    "footer.motto": "Mind the shadows.",
+    "footer.explore": "Explore",
+    "footer.home": "Home",
+    "footer.news": "News",
+    "footer.gallery": "Gallery",
+    "footer.dev-blog": "Dev Blog",
+    "footer.join-team": "Join the Team",
+    "footer.community": "Community",
+    "footer.forums": "Forums",
+    "footer.wiki": "Wiki",
+    "footer.register": "Register",
+    "footer.how-to-join": "How to Join",
+    "footer.copyright": "&copy; %1 Shadows Over Westgate &middot; A NWN:EE Persistent World",
+    "footer.setting": "Forgotten Realms &middot; Westgate &middot; Sea of Fallen Stars",
+    "footer.powered-by": "Powered by"
 }

lib/theme.js

@@ -178,6 +178,11 @@ library.filterMiddlewareRenderHeader = async function (hookData) {
 	return hookData;
 };
 
+library.filterMiddlewareRenderFooter = async function (hookData) {
+	hookData.templateData.currentYear = new Date().getFullYear();
+	return hookData;
+};
+
 // generated avatars stay in the court's palette instead of core's material-design brights;
 // core deterministically remaps any stored color not in this list (src/user/data.js)
 library.getIconBackgrounds = async function (data) {

plugin.json

@@ -9,6 +9,7 @@
     { "hook": "filter:user.saveSettings", "method": "saveUserSettings" },
     { "hook": "filter:user.profileMenu", "method": "addProfileItem" },
     { "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" },
+    { "hook": "filter:middleware.renderFooter", "method": "filterMiddlewareRenderFooter" },
     { "hook": "filter:user.iconBackgrounds", "method": "getIconBackgrounds" }
   ],
   "scripts": ["public/client.js", "../nodebb-theme-harmony/public/harmony.js"],

public/client.js

@@ -115,13 +115,15 @@
 		return element && element.offsetWidth ? element.offsetWidth : 0;
 	}
 
-	function setMobileTableMinWidth(table, wrapper) {
+	function measureMobileTableMinWidth(table) {
 		const columnCount = getTableColumnCount(table);
 		const measuredWidth = getRenderedWidth(table);
 		const columnWidthFloor = getTableColumnWidthFloor(table, columnCount);
 		const desktopWidthFloor = tableUsesFluidWidth(table) && columnCount >= 8 ? WIKI_TABLE_DESKTOP_MIN_WIDTH : 0;
-		const minWidth = Math.ceil(Math.max(measuredWidth, columnWidthFloor, desktopWidthFloor));
+		return Math.ceil(Math.max(measuredWidth, columnWidthFloor, desktopWidthFloor));
+	}
 
+	function applyMobileTableMinWidth(wrapper, minWidth) {
 		if (minWidth > 0 && wrapper && wrapper.style && typeof wrapper.style.setProperty === 'function') {
 			wrapper.style.setProperty('--wg-mobile-table-min-width', `${minWidth}px`);
 		}
@@ -133,6 +135,7 @@
 			return;
 		}
 
+		const wrapped = [];
 		toArray(scope.querySelectorAll(WIKI_TABLE_SELECTOR)).forEach((table) => {
 			if (!table || !table.parentNode || table.closest(SKIP_TABLE_SELECTOR)) {
 				return;
@@ -144,7 +147,15 @@
 			wrapper.setAttribute('aria-label', 'Scrollable table');
 			table.parentNode.insertBefore(wrapper, table);
 			wrapper.appendChild(table);
-			setMobileTableMinWidth(table, wrapper);
+			wrapped.push({ table, wrapper });
+		});
+
+		// batch: measure every table first, then write, so reads and writes
+		// don't interleave and force repeated reflows
+		wrapped
+			.map(({ table, wrapper }) => ({ wrapper, minWidth: measureMobileTableMinWidth(table) }))
+			.forEach(({ wrapper, minWidth }) => {
+				applyMobileTableMinWidth(wrapper, minWidth);
 			});
 	}
 
@@ -223,6 +234,20 @@
 	$(document).ready(function () {
 		wrapWestgateWikiTables(document);
 		initWestgateTopbar();
+
+		// topic-select checkboxes are <i> elements; make them keyboard-operable
+		$(document).on('keydown', 'i[component="topic/select"]', function (ev) {
+			if (ev.key === 'Enter' || ev.key === ' ') {
+				ev.preventDefault();
+				$(this).trigger('click');
+			}
+		});
+		$(document).on('click', 'i[component="topic/select"]', function () {
+			// core toggles the icon class in its own click handler; sync after it runs
+			setTimeout(() => {
+				this.setAttribute('aria-checked', this.classList.contains('fa-check-square') ? 'true' : 'false');
+			}, 0);
+		});
 		$(window).on('action:ajaxify.end', function () {
 			wrapWestgateWikiTables(document);
 			initWestgateTopbar();
@@ -272,6 +297,9 @@
 							class: category.class || classMap[String(category.cid)] || '',
 						}));
 						callback(null, payload);
+					}).catch(() => {
+						// class map is cosmetic; never block search results on it
+						callback(null, payload);
 					});
 				});
 			};

scss/overrides.scss

@@ -66,7 +66,7 @@ $input-bg: rgba($white, 0.025) !default;
 $input-color: $wg-text !default;
 $input-border-color: rgba($wg-gold, 0.18) !default;
 $input-focus-border-color: rgba($wg-gold, 0.42) !default;
-$input-placeholder-color: rgba($wg-text-soft, 0.62) !default;
+$input-placeholder-color: rgba($wg-text-soft, 0.74) !default;
 $btn-border-radius: 6px !default;
 $border-radius: 8px !default;
 $border-radius-sm: 6px !default;
@@ -109,5 +109,5 @@ $breadcrumb-active-color: $body-color !default;
 $breadcrumb-item-padding-x: 12px !default;
 
 .form-control::placeholder, .bootstrap-tagsinput::placeholder {
-	color: $gray-500 !important;
+	color: $input-placeholder-color !important;
 }

scss/westgate/_controls.scss

@@ -216,8 +216,12 @@ input[type="number"].form-control::-webkit-outer-spin-button {
   border-color: rgba(194, 163, 90, 0.5) !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.026),
-    0 0 0 1px rgba(194, 163, 90, 0.28) !important;
+    0 0 0 1px var(--wg-focus) !important;
   color: var(--wg-text) !important;
+  // invisible normally; forced-colors mode paints transparent outlines in the
+  // system highlight color, so box-shadow-only focus stays visible there
+  outline: 2px solid transparent;
+  outline-offset: 1px;
 }
 
 input[type="password"].form-control,
@@ -318,7 +322,7 @@ table[component="notification/table"] a[data-type]:focus {
   background-size:
     100% 1.65rem,
     auto;
-  border-color: rgba(194, 163, 90, 0.28) !important;
+  border-color: var(--wg-focus) !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 244, 221, 0.035),
     0 0 0 1px rgba(0, 0, 0, 0.28) !important;
@@ -427,7 +431,7 @@ table[component="notification/table"] a[data-type]:focus {
   border-radius: 8px !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.026),
-    0 0 0 1px rgba(194, 163, 90, 0.28) !important;
+    0 0 0 1px var(--wg-focus) !important;
 }
 
 .composer .title-container {
@@ -461,7 +465,7 @@ table[component="notification/table"] a[data-type]:focus {
 [component="composer"] .btn:hover,
 .quick-reply .btn:hover,
 [component="topic/quickreply/container"] .btn:hover {
-  background: rgba(194, 163, 90, 0.08) !important;
+  background: var(--wg-border-soft) !important;
   color: var(--wg-text) !important;
 }
 
@@ -521,14 +525,14 @@ table[component="notification/table"] a[data-type]:focus {
   color: var(--wg-gold) !important;
 }
 .dropdown-item.active {
-  background-color: rgba(194, 163, 90, 0.08) !important;
+  background-color: var(--wg-border-soft) !important;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus,
 .dropdown-menu .nav-link:hover,
 .dropdown-menu .nav-link:focus {
-  background: rgba(194, 163, 90, 0.08) !important;
+  background: var(--wg-border-soft) !important;
   color: var(--wg-text) !important;
 }
 
@@ -602,7 +606,7 @@ table[component="notification/table"] a[data-type]:focus {
 [component="sidebar/right"] .nav-link:focus,
 .bottombar-nav .nav-link:hover,
 .bottombar-nav .nav-link:focus {
-  background: rgba(194, 163, 90, 0.08);
+  background: var(--wg-border-soft);
   color: var(--wg-text) !important;
 }
 

scss/westgate/_pages.scss

@@ -136,7 +136,7 @@ a.sow-card:hover {
 	letter-spacing: 0.08em;
 	text-transform: uppercase;
 	color: var(--wg-gold);
-	background: rgba(194, 163, 90, 0.08);
+	background: var(--wg-border-soft);
 	border: 1px solid var(--wg-gold-soft);
 	border-radius: 4px;
 	padding: 3px 9px;
@@ -654,7 +654,7 @@ a.sow-card:hover {
 	margin-top: var(--wg-space-md);
 	padding: 3px 9px;
 	color: var(--wg-gold);
-	background: rgba(194, 163, 90, 0.08);
+	background: var(--wg-border-soft);
 	border: 1px solid var(--wg-gold-soft);
 	border-radius: 4px;
 }

scss/westgate/_posts.scss

@@ -129,6 +129,101 @@ li[component="post"] .content h4 {
 	text-shadow: none;
 }
 
+// Code in posts: the markdown plugin ships a light highlight.js stylesheet
+// (white .hljs background), so both the block and its syntax colors must be
+// re-inked for the dark ledger.
+li[component="post"] .content code,
+.composer .preview code {
+	background: rgba(8, 7, 10, 0.45);
+	border: 1px solid rgba(194, 163, 90, 0.12);
+	border-radius: 4px;
+	padding: 0.1em 0.35em;
+	color: var(--wg-text);
+	font-family: var(--wg-font-code);
+	font-size: 0.88em;
+}
+
+li[component="post"] .content pre,
+.composer .preview pre {
+	background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82)) !important;
+	border: 1px solid rgba(194, 163, 90, 0.22) !important;
+	border-radius: 6px;
+	padding: 0.85rem 1rem;
+	color: var(--wg-text-soft) !important;
+	scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
+	scrollbar-width: thin;
+}
+
+li[component="post"] .content pre code,
+.composer .preview pre code {
+	background: transparent;
+	border: 0;
+	padding: 0;
+	color: inherit;
+	font-size: 0.85rem;
+}
+
+li[component="post"] .content pre code.hljs,
+.composer .preview pre code.hljs {
+	background: transparent !important;
+	color: var(--wg-text-soft) !important;
+
+	.hljs-comment,
+	.hljs-quote {
+		color: var(--wg-text-muted);
+		font-style: italic;
+	}
+
+	.hljs-keyword,
+	.hljs-selector-tag,
+	.hljs-literal,
+	.hljs-tag {
+		color: #e0c878;
+	}
+
+	.hljs-string,
+	.hljs-regexp,
+	.hljs-addition {
+		color: #a3c58a;
+	}
+
+	.hljs-number,
+	.hljs-attr,
+	.hljs-attribute,
+	.hljs-variable,
+	.hljs-template-variable,
+	.hljs-symbol {
+		color: #d9a37a;
+	}
+
+	.hljs-title,
+	.hljs-section,
+	.hljs-name,
+	.hljs-selector-id,
+	.hljs-selector-class {
+		color: var(--wg-ledger-ink);
+	}
+
+	.hljs-type,
+	.hljs-built_in,
+	.hljs-builtin-name,
+	.hljs-meta {
+		color: var(--wg-gold);
+	}
+
+	.hljs-deletion {
+		color: #c55a5f;
+	}
+
+	.hljs-emphasis {
+		font-style: italic;
+	}
+
+	.hljs-strong {
+		font-weight: 600;
+	}
+}
+
 li[component="post"] .content blockquote {
 	background: rgba(35, 27, 23, 0.36);
 	border-left: 3px solid rgba(194, 163, 90, 0.4);
@@ -150,7 +245,7 @@ li[component="post"] [component="post/reply-count"] {
 li[component="post"] [component="post/actions"] .btn:hover,
 li[component="post"] [component="post/reply-count"]:hover {
 	color: var(--wg-text) !important;
-	background: rgba(194, 163, 90, 0.08) !important;
+	background: var(--wg-border-soft) !important;
 	border-color: rgba(194, 163, 90, 0.2) !important;
 }
 
@@ -239,7 +334,7 @@ li[component="post"] [component="post/downvote"] {
 
 .pagination-block {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.08) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-border-soft) calc(100% - 1px)),
 		rgba(18, 15, 22, 0.96) !important;
 	background-size: 100% var(--wg-ledger-line), auto;
 	border-color: var(--wg-ledger-border) !important;

scss/westgate/_responsive.scss

@@ -54,3 +54,13 @@
 		box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.28);
 	}
 }
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+	}
+}

scss/westgate/_surfaces.scss

@@ -141,7 +141,7 @@ samp,
 }
 
 .alert {
-  background: rgba(194, 163, 90, 0.08);
+  background: var(--wg-border-soft);
   border-color: rgba(194, 163, 90, 0.18);
   color: var(--wg-text-soft);
 }
@@ -291,7 +291,7 @@ li[component="category/topic"] .user-icon {
       rgba(8, 7, 10, 0.08)
     ),
     var(--wg-velvet-panel) !important;
-  border: 1px solid rgba(194, 163, 90, 0.14) !important;
+  border: 1px solid var(--wg-border) !important;
   border-radius: 8px !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 244, 221, 0.028),
@@ -335,7 +335,7 @@ li[component="category/topic"] .user-icon {
 .chats-dropdown .mark-read:focus,
 .chats-list .mark-read:hover,
 .chats-list .mark-read:focus {
-  background: rgba(194, 163, 90, 0.08) !important;
+  background: var(--wg-border-soft) !important;
 }
 
 .chats-dropdown .chat-room-btn,
@@ -352,7 +352,7 @@ li[component="category/topic"] .user-icon {
 [component="chat/public/room"]:hover,
 [component="chat/public/room"]:focus,
 [component="chat/public/room"].unread {
-  background: rgba(194, 163, 90, 0.08) !important;
+  background: var(--wg-border-soft) !important;
   border-color: rgba(194, 163, 90, 0.24) !important;
   color: var(--wg-text) !important;
 }
@@ -387,7 +387,7 @@ li[component="category/topic"] .user-icon {
     rgba(216, 194, 138, 0.13),
     rgba(70, 45, 52, 0.28)
   ) !important;
-  border: 1px solid rgba(194, 163, 90, 0.28) !important;
+  border: 1px solid var(--wg-focus) !important;
   color: var(--wg-ledger-ink) !important;
 }
 

scss/westgate/_topbar.scss

@@ -189,7 +189,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 .wg-topbar .btn.btn-light:hover,
 .wg-topbar .btn.btn-light:focus {
   color: var(--wg-text) !important;
-  background: rgba(194, 163, 90, 0.08) !important;
+  background: var(--wg-border-soft) !important;
 }
 
 // one primary vocabulary: the dark gold plate from _controls.scss
@@ -296,6 +296,12 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
   outline: 0;
 }
 
+// The input's own outline is off; put the visible focus ring on its wrapper.
+.wg-topbar__drawer-search:focus-within {
+  border-color: rgba(194, 163, 90, 0.5);
+  box-shadow: 0 0 0 1px var(--wg-focus);
+}
+
 .wg-topbar__drawer-nav,
 .wg-topbar__drawer-actions,
 .wg-topbar__drawer-auth {
@@ -323,7 +329,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 .wg-topbar__drawer-actions a:focus {
   color: var(--wg-text);
   border-color: rgba(194, 163, 90, 0.22);
-  background: rgba(194, 163, 90, 0.08);
+  background: var(--wg-border-soft);
 }
 
 @media (max-width: 1199.98px) {

scss/westgate/_topics.scss

@@ -28,7 +28,7 @@ body.template-category .category-header .description {
 
 .topic-list-header .btn {
 	background: transparent !important;
-	border-color: rgba(194, 163, 90, 0.14) !important;
+	border-color: var(--wg-border) !important;
 	color: var(--wg-text-soft) !important;
 	font-family: var(--wg-font-ui);
 }
@@ -57,7 +57,7 @@ li[component="category/topic"] {
 	overflow: hidden;
 	background:
 		linear-gradient(to bottom, transparent calc(100% - 1px), var(--wg-ledger-ruling) calc(100% - 1px)),
-		linear-gradient(to right, rgba(194, 163, 90, 0.08), transparent 5.25rem),
+		linear-gradient(to right, var(--wg-border-soft), transparent 5.25rem),
 		var(--wg-ledger-panel) !important;
 	background-size: 100% var(--wg-ledger-line), auto, auto;
 	border: 1px solid var(--wg-ledger-border) !important;
@@ -89,7 +89,7 @@ li[component="category/topic"]::after {
 	right: 0;
 	left: 0;
 	height: 1px;
-	background: linear-gradient(to right, rgba(194, 163, 90, 0.28), rgba(194, 163, 90, 0.05), transparent);
+	background: linear-gradient(to right, var(--wg-focus), rgba(194, 163, 90, 0.05), transparent);
 	pointer-events: none;
 }
 
@@ -133,7 +133,7 @@ li[component="category/topic"].pinned:not(.unread) {
 		linear-gradient(90deg, rgba(122, 101, 45, 0.09), transparent 5.75rem),
 		linear-gradient(100deg, rgba(28, 22, 26, 0.36), rgba(13, 12, 17, 0.94)) !important;
 	border-color: rgba(194, 163, 90, 0.12) !important;
-	border-left-color: rgba(194, 163, 90, 0.28) !important;
+	border-left-color: var(--wg-focus) !important;
 }
 
 li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.pinned)) {

scss/westgate/_widgets.scss

@@ -56,7 +56,7 @@
 		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
 		var(--wg-velvet-panel) !important;
 	background-size: 100% var(--wg-ledger-line), auto;
-	border: 1px solid rgba(194, 163, 90, 0.14);
+	border: 1px solid var(--wg-border);
 	border-radius: 8px;
 	box-shadow: var(--wg-velvet-shadow);
 }
@@ -81,7 +81,7 @@
 
 [data-widget-area] .card-header {
 	background:
-		linear-gradient(to right, rgba(194, 163, 90, 0.08), rgba(42, 18, 34, 0.2), transparent),
+		linear-gradient(to right, var(--wg-border-soft), rgba(42, 18, 34, 0.2), transparent),
 		rgba(8, 7, 10, 0.24) !important;
 	border-color: rgba(194, 163, 90, 0.13) !important;
 	color: var(--wg-ledger-ink) !important;
@@ -97,7 +97,7 @@
 }
 
 [data-widget-area] .card-header + .card-body {
-	border-top: 1px solid rgba(194, 163, 90, 0.08);
+	border-top: 1px solid var(--wg-border-soft);
 }
 
 [data-widget-area] .alert {
@@ -135,7 +135,7 @@
 	background:
 		linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem),
 		var(--wg-velvet-panel) !important;
-	border-color: rgba(194, 163, 90, 0.28) !important;
+	border-color: var(--wg-focus) !important;
 	border-left-color: rgba(194, 163, 90, 0.62) !important;
 	color: #e0cea2 !important;
 }
@@ -184,7 +184,7 @@
 
 [data-widget-area] .list-group-item {
 	background: rgba(255, 255, 255, 0.014) !important;
-	border-color: rgba(194, 163, 90, 0.08) !important;
+	border-color: var(--wg-border-soft) !important;
 	color: var(--wg-text-soft) !important;
 }
 
@@ -234,7 +234,7 @@
 	background:
 		linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
 		var(--wg-velvet-panel) !important;
-	border: 1px solid rgba(194, 163, 90, 0.14);
+	border: 1px solid var(--wg-border);
 	border-radius: 8px;
 	box-shadow: var(--wg-velvet-shadow);
 }

scss/westgate/_wiki-prose.scss

@@ -83,7 +83,7 @@
 	--wiki-prose-footnote-popover-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.035),
 		0 14px 30px rgba(0, 0, 0, 0.46);
-	--wiki-prose-footnote-target-bg: rgba(194, 163, 90, 0.08);
+	--wiki-prose-footnote-target-bg: var(--wg-border-soft);
 	--wiki-prose-image-bg: rgba(8, 7, 10, 0.36);
 	--wiki-prose-image-border: rgba(194, 163, 90, 0.18);
 	--wiki-prose-image-padding: 0;
@@ -102,7 +102,7 @@
 	--wiki-compose-editable-focus-shadow:
 		inset 0 1px 0 rgba(255, 255, 255, 0.026),
 		0 0 0 1px rgba(194, 163, 90, 0.3),
-		0 0 18px rgba(194, 163, 90, 0.08);
+		0 0 18px var(--wg-border-soft);
 
 	--wiki-ck-base-background: #18141d;
 	--wiki-ck-base-foreground: #1e1824;
@@ -121,7 +121,7 @@
 	--wiki-ck-toolbar-border: rgba(194, 163, 90, 0.18);
 	--wiki-ck-button-bg: transparent;
 	--wiki-ck-button-hover-bg: rgba(194, 163, 90, 0.1);
-	--wiki-ck-button-active-bg: rgba(194, 163, 90, 0.14);
+	--wiki-ck-button-active-bg: var(--wg-border);
 	--wiki-ck-button-on-bg: rgba(194, 163, 90, 0.12);
 	--wiki-ck-button-on-hover-bg: rgba(194, 163, 90, 0.18);
 	--wiki-ck-button-on-active-bg: rgba(194, 163, 90, 0.22);
@@ -244,7 +244,7 @@
 	font-family: var(--wg-font-ui);
 	font-weight: 100;
 	line-height: 1;
-	text-shadow: 0 0 10px rgba(194, 163, 90, 0.28);
+	text-shadow: 0 0 10px var(--wg-focus);
 }
 
 .westgate-wiki .wiki-article-prose .wiki-callout::after,
@@ -333,9 +333,9 @@
 				linear-gradient(
 					90deg,
 					transparent,
-					rgba(194, 163, 90, 0.28) 22%,
+					var(--wg-focus) 22%,
 					rgba(194, 163, 90, 0.82) 50%,
-					rgba(194, 163, 90, 0.28) 78%,
+					var(--wg-focus) 78%,
 					transparent
 				)
 			);
@@ -385,9 +385,9 @@
 			linear-gradient(
 				90deg,
 				transparent,
-				rgba(194, 163, 90, 0.28) 22%,
+				var(--wg-focus) 22%,
 				rgba(194, 163, 90, 0.82) 50%,
-				rgba(194, 163, 90, 0.28) 78%,
+				var(--wg-focus) 78%,
 				transparent
 			)
 		);
@@ -553,7 +553,7 @@
 }
 
 .westgate-wiki .wiki-sidebar-disclosure__summary:focus {
-	box-shadow: inset 0 0 0 2px rgba(194, 163, 90, 0.28) !important;
+	box-shadow: inset 0 0 0 2px var(--wg-focus) !important;
 }
 
 .westgate-wiki .wiki-article-toc__ol.wiki-article-toc__ol--nest {
@@ -662,8 +662,8 @@
 .westgate-wiki .wiki-index-jump-link:focus,
 .westgate-wiki .wiki-index-jump-link.is-active {
 	background:
-		linear-gradient(180deg, rgba(194, 163, 90, 0.14), rgba(81, 25, 61, 0.12)),
+		linear-gradient(180deg, var(--wg-border), rgba(81, 25, 61, 0.12)),
-		rgba(194, 163, 90, 0.08) !important;
+		var(--wg-border-soft) !important;
 	border-color: rgba(216, 194, 138, 0.36) !important;
 	color: #fff4dd !important;
 	transform: translateY(-1px);
@@ -694,7 +694,7 @@
 }
 
 .westgate-wiki .wiki-namespace-directory .wiki-index-entry:not(.wiki-index-entry--subpage) .wiki-index-entry-main::before {
-	background: radial-gradient(circle, #e0c878 0 30%, rgba(194, 163, 90, 0.28) 31% 58%, transparent 59%);
+	background: radial-gradient(circle, #e0c878 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
 	block-size: 0.42rem;
 	content: "";
 	inline-size: 0.42rem;
@@ -725,7 +725,7 @@
 }
 
 .westgate-wiki .wiki-index-entry--subpage::after {
-	background: linear-gradient(180deg, rgba(194, 163, 90, 0.08), var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)));
+	background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)));
 	block-size: 1.18rem;
 	content: "";
 	inline-size: 1px;
@@ -793,7 +793,7 @@
 }
 
 .westgate-wiki .wiki-topic-list__item--subpage::after {
-	background: linear-gradient(180deg, rgba(194, 163, 90, 0.08), var(--wiki-tree-line-color));
+	background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color));
 	block-size: 0.44em;
 	content: "";
 	inline-size: 1px;
@@ -871,7 +871,7 @@
 }
 
 .westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-row--page:has(.wiki-sidebar-parent-path)::before {
-	background: linear-gradient(90deg, var(--wiki-sidebar-tree-line-color), rgba(194, 163, 90, 0.08));
+	background: linear-gradient(90deg, var(--wiki-sidebar-tree-line-color), var(--wg-border-soft));
 	block-size: 1px;
 	content: "";
 	inline-size: 0.7rem;
@@ -942,7 +942,7 @@
 
 .westgate-wiki .wiki-index-entry-badge {
 	background: rgba(194, 163, 90, 0.055) !important;
-	border-color: rgba(194, 163, 90, 0.14) !important;
+	border-color: var(--wg-border) !important;
 }
 
 .westgate-wiki .wiki-fab-dock--floating {
@@ -1088,7 +1088,7 @@
 
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-button:focus-visible,
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button:focus-visible {
-	outline: 2px solid rgba(194, 163, 90, 0.28) !important;
+	outline: 2px solid var(--wg-focus) !important;
 	outline-offset: 1px;
 }
 
@@ -1200,7 +1200,7 @@
 	.westgate-wiki .wiki-article-prose :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table),
 	.westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-content :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table),
 	.westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content :where(.tableWrapper, .table-responsive, .table-responsive-sm, .table-responsive-md, figure.table) {
-		border: 1px solid rgba(194, 163, 90, 0.14);
+		border: 1px solid var(--wg-border);
 		border-radius: 7px;
 		box-shadow:
 			inset -1.25rem 0 1rem -1rem rgba(194, 163, 90, 0.16),
@@ -1263,7 +1263,7 @@
 .westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-content pre[data-language]::after,
 .westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content pre[data-language]::after,
 .westgate-wiki-compose .ck-code-block-language-label {
-	background: rgba(194, 163, 90, 0.14) !important;
+	background: var(--wg-border) !important;
 	border: 1px solid rgba(194, 163, 90, 0.22) !important;
 	border-radius: 0 0 0 5px !important;
 	color: var(--wg-text-soft) !important;
@@ -1372,7 +1372,7 @@ body:has(#westgate-wiki-compose) .ck.ck-dropdown__panel .ck.ck-button:not(.ck-co
 body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon) .ck.ck-button:not(.ck-color-grid__tile).ck-on,
 body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile).ck-on {
 	background: var(--wiki-ck-button-on-bg) !important;
-	border-color: rgba(194, 163, 90, 0.28) !important;
+	border-color: var(--wg-focus) !important;
 	color: var(--wiki-ck-button-on-color) !important;
 }
 
@@ -1542,7 +1542,7 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:focus {
 }
 
 body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box.ck-on {
-	background: rgba(194, 163, 90, 0.28) !important;
+	background: var(--wg-focus) !important;
 	border-color: rgba(246, 223, 163, 0.64) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.08),
@@ -1582,7 +1582,7 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input
 	border-color: rgba(194, 163, 90, 0.5) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.026),
-		0 0 0 1px rgba(194, 163, 90, 0.28) !important;
+		0 0 0 1px var(--wg-focus) !important;
 	outline: none !important;
 }
 

templates/category.tpl

@@ -21,8 +21,8 @@
 				</span>
 				{{{ if !isNumber(cid) }}}
 				<a href="{./url}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
-					<span class="fw-normal">View Original</span>
+					<span class="fw-normal">[[westgate:view-original]]</span>
-					<i class="fa fa-external-link"></i>
+					<i class="fa fa-external-link" aria-hidden="true"></i>
 				</a>
 				{{{ end }}}
 				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
@@ -39,7 +39,7 @@
 	{{{ if ./handleFull }}}
 	<p class="text-secondary text-sm fst-italic mb-0 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
 		[[category:handle.description, {handleFull}]]
-		<a href="#" class="link-secondary" data-action="copy" data-clipboard-text="{handleFull}"><i class="fa fa-fw fa-copy" aria-hidden="true"></i></a>
+		<a href="#" class="link-secondary" data-action="copy" data-clipboard-text="{handleFull}" aria-label="[[westgate:copy-handle]]"><i class="fa fa-fw fa-copy" aria-hidden="true"></i></a>
 	</p>
 	{{{ end }}}
 
@@ -65,7 +65,7 @@
 		<div class="alert alert-warning mb-4" id="category-no-followers" data-bs-toggle="dropdown" data-bs-target='[component="topic/watch"] button' aria-hidden="true">
 			<i class="fa fa-triangle-exclamation pe-2"></i>
 			[[category:no-followers]]
-			<a href="#" class="stretched-link"></a>
+			<a href="#" class="stretched-link" tabindex="-1"></a>
 		</div>
 		{{{ end }}}
 

templates/partials/category/selector-dropdown-content.tpl

@@ -24,7 +24,7 @@
         {{{ each categoryItems }}}
         <li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}{{{ if ./class }}} {./class}{{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
             <a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">{./level}
-                <span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
+                <span component="category-markup" class="{{{ if ./match }}}fw-bold{{{end}}}">
                     <span class="category-item d-inline-flex align-items-center gap-1 {{{ if ./class }}}{./class}{{{ end }}}">
                         {{{ if ./icon }}}
                         {{buildCategoryIcon(@value, "24px", "rounded-circle")}}

templates/partials/footer/westgate-global.tpl

@@ -6,36 +6,36 @@
 				<h2 class="wg-footer__title" id="wg-footer-title">{config.siteTitle}</h2>
 			</div>
 			<p class="wg-footer__description">
-				A Neverwinter Nights: Enhanced Edition persistent world of gothic intrigue, set in the Forgotten Realms port city of Westgate.
+				[[westgate:footer.description]]
 			</p>
-			<p class="wg-footer__motto">Mind the shadows.</p>
+			<p class="wg-footer__motto">[[westgate:footer.motto]]</p>
 		</section>
 
-		<nav class="wg-footer__nav" aria-label="Explore">
+		<nav class="wg-footer__nav" aria-label="[[westgate:footer.explore]]">
-			<h2 class="wg-footer__heading">Explore</h2>
+			<h2 class="wg-footer__heading">[[westgate:footer.explore]]</h2>
 			<ul class="wg-footer__links">
-				<li><a href="{relative_path}/">Home</a></li>
+				<li><a href="{relative_path}/">[[westgate:footer.home]]</a></li>
-				<li><a href="{relative_path}/category/1/news">News</a></li>
+				<li><a href="{relative_path}/category/1/news">[[westgate:footer.news]]</a></li>
-				<li><a href="{relative_path}/gallery">Gallery</a></li>
+				<li><a href="{relative_path}/gallery">[[westgate:footer.gallery]]</a></li>
-				<li><a href="{relative_path}/category/84/developer-blog">Dev Blog</a></li>
+				<li><a href="{relative_path}/category/84/developer-blog">[[westgate:footer.dev-blog]]</a></li>
-				<li><a href="{relative_path}/recruitment">Join the Team</a></li>
+				<li><a href="{relative_path}/recruitment">[[westgate:footer.join-team]]</a></li>
 			</ul>
 		</nav>
 
-		<nav class="wg-footer__nav" aria-label="Community">
+		<nav class="wg-footer__nav" aria-label="[[westgate:footer.community]]">
-			<h2 class="wg-footer__heading">Community</h2>
+			<h2 class="wg-footer__heading">[[westgate:footer.community]]</h2>
 			<ul class="wg-footer__links">
-				<li><a href="{relative_path}/categories">Forums</a></li>
+				<li><a href="{relative_path}/categories">[[westgate:footer.forums]]</a></li>
-				<li><a href="{relative_path}/wiki">Wiki</a></li>
+				<li><a href="{relative_path}/wiki">[[westgate:footer.wiki]]</a></li>
-				<li><a href="{relative_path}/register">Register</a></li>
+				<li><a href="{relative_path}/register">[[westgate:footer.register]]</a></li>
-				<li><a href="{relative_path}/wiki">How to Join</a></li>
+				<li><a href="{relative_path}/wiki">[[westgate:footer.how-to-join]]</a></li>
 			</ul>
 		</nav>
 	</div>
 
 	<div class="wg-footer__meta">
-		<p>&copy; 2026 Shadows Over Westgate &middot; A NWN:EE Persistent World</p>
+		<p>[[westgate:footer.copyright, {currentYear}]]</p>
-		<p>Forgotten Realms &middot; Westgate &middot; Sea of Fallen Stars</p>
+		<p>[[westgate:footer.setting]]</p>
 	</div>
 
 	<div class="wg-footer__powered-by" aria-label="Platform credits">
@@ -46,7 +46,7 @@
 			rel="noopener noreferrer"
 			aria-label="Powered by NodeBB"
 		>
-			<span class="wg-footer__powered-label">Powered by</span>
+			<span class="wg-footer__powered-label">[[westgate:footer.powered-by]]</span>
 			<span class="wg-footer__powered-name">NodeBB</span>
 		</a>
 		<a
@@ -56,7 +56,7 @@
 			rel="noopener noreferrer"
 			aria-label="Powered by Tiptap"
 		>
-			<span class="wg-footer__powered-label">Powered by</span>
+			<span class="wg-footer__powered-label">[[westgate:footer.powered-by]]</span>
 			<span class="wg-footer__powered-name">Tiptap</span>
 		</a>
 	</div>

templates/partials/header/topbar.tpl

@@ -32,22 +32,22 @@
 			{{{ if config.loggedIn }}}
 			<ul id="wg-topbar-logged-in-menu" class="wg-topbar__utility-list list-unstyled d-flex align-items-center mb-0">
 				{{{ if (config.searchEnabled && user.privileges.search:content) }}}
-				<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]" role="menuitem">
+				<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]">
 					<!-- IMPORT partials/sidebar/search.tpl -->
 				</li>
 				{{{ end }}}
 
-				<li component="notifications" class="nav-item notifications dropdown" title="[[global:header.notifications]]" role="menuitem">
+				<li component="notifications" class="nav-item notifications dropdown" title="[[global:header.notifications]]">
 					<!-- IMPORT partials/sidebar/notifications.tpl -->
 				</li>
 
 				{{{ if canChat }}}
-				<li class="nav-item chats dropdown" title="[[global:header.chats]]" role="menuitem">
+				<li class="nav-item chats dropdown" title="[[global:header.chats]]">
 					<!-- IMPORT partials/sidebar/chats.tpl -->
 				</li>
 				{{{ end }}}
 
-				<li component="sidebar/drafts" class="nav-item drafts dropdown" title="[[global:header.drafts]]" role="menuitem">
+				<li component="sidebar/drafts" class="nav-item drafts dropdown" title="[[global:header.drafts]]">
 					<!-- IMPORT partials/sidebar/drafts.tpl -->
 				</li>
 
@@ -57,14 +57,14 @@
 				</li>
 				{{{ end }}}
 
-				<li id="user_label" class="nav-item usermenu dropdown" title="{user.username}" role="menuitem">
+				<li id="user_label" class="nav-item usermenu dropdown" title="{user.username}">
 					<!-- IMPORT partials/sidebar/user-menu.tpl -->
 				</li>
 			</ul>
 			{{{ else }}}
 			<ul id="wg-topbar-logged-out-menu" class="wg-topbar__utility-list wg-topbar__utility-list--guest list-unstyled d-flex align-items-center mb-0">
 				{{{ if (config.searchEnabled && user.privileges.search:content) }}}
-				<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]" role="menuitem">
+				<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]">
 					<!-- IMPORT partials/sidebar/search.tpl -->
 				</li>
 				{{{ end }}}

templates/partials/quick-search-results.tpl

@@ -45,6 +45,6 @@
 {{{ end }}}
 
 {{{if !posts.length}}}
-<div class="text-center no-results py-2 py-md-0">[[search:no-matches]]</li>
+<div class="text-center no-results py-2 py-md-0">[[search:no-matches]]</div>
 <li role="separator" class="dropdown-divider d-block d-md-none"></li>
 {{{end}}}

templates/partials/topics_list.tpl

@@ -15,7 +15,7 @@
 				</a>
 				{{{ if showSelect }}}
 				<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
-					<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible"></i>
+					<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible" role="checkbox" aria-checked="false" tabindex="0" aria-label="[[westgate:select-topic]]"></i>
 				</div>
 				{{{ end }}}
 			</div>
@@ -73,7 +73,7 @@
 				</span>
 				{{{ if showSelect }}}
 				<div class="checkbox position-absolute top-0 end-0 m-0 d-flex d-lg-none" style="max-width:max-content">
-					<i component="topic/select" class="fa fa-square-o text-muted pointer p-1"></i>
+					<i component="topic/select" class="fa fa-square-o text-muted pointer p-1" role="checkbox" aria-checked="false" tabindex="0" aria-label="[[westgate:select-topic]]"></i>
 				</div>
 				{{{ end }}}
 			</div>