ShadowsOverWestgate/sow-nodebb-theme
3
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Activity
Files
ada632dd3c06a51883827c0b6fe5414f6e81655f
sow-nodebb-theme/custom_pages/Westgate.dc.html
T
archvillainette 52999ae604 docs/website-pages-spec (#5) 
Reviewed-on: #5
Reviewed-by: xtul <mpiasecki720@protonmail.com>
Co-authored-by: vickydotbat <vickydotbat@tutamail.com>
Co-committed-by: vickydotbat <vickydotbat@tutamail.com>
2026-06-26 08:00:05 +00:00

642 lines
73 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Jost:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;}
body{margin:0;background:#09080b;}
::selection{background:rgba(194,163,90,0.28);color:#f3ead9;}
@keyframes fadeUp{from{transform:translateY(14px);}to{transform:translateY(0);}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,184,106,0.5);}70%{box-shadow:0 0 0 9px rgba(127,184,106,0);}100%{box-shadow:0 0 0 0 rgba(127,184,106,0);}}
@keyframes drift{from{background-position:0 0;}to{background-position:60px 60px;}}
a{text-decoration:none;color:inherit;}
.wg-scroll::-webkit-scrollbar{width:0;height:0;}
</style>
</helmet>
<div style="min-height:100vh;font-family:'Jost',sans-serif;color:#b9b2a6;background:radial-gradient(120% 70% at 50% -10%, #1a1020 0%, #120e16 40%, #0f0d12 72%);background-attachment:fixed;overflow-x:hidden;">
<!-- ================= NAV ================= -->
<nav style="position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(15,13,18,0.84);border-bottom:1px solid rgba(194,163,90,0.16);">
<div style="max-width:1240px;margin:0 auto;padding:0 32px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:24px;">
<div onClick="{{ goHome }}" style="display:flex;align-items:center;gap:13px;cursor:pointer;">
<div style="width:26px;height:26px;transform:rotate(45deg);border:1.5px solid #c2a35a;display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(194,163,90,0.25);">
<div style="width:9px;height:9px;background:#c2a35a;"></div>
</div>
<div style="font-family:'Cinzel',serif;font-weight:600;font-size:16px;letter-spacing:0.16em;color:#e6e0d6;white-space:nowrap;">SHADOWS OVER WESTGATE</div>
</div>
<div style="display:flex;align-items:center;gap:30px;">
<div onClick="{{ goHome }}" style="position:relative;cursor:pointer;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#c4b8a6;padding:6px 0;" style-hover="color:#e6e0d6;">Home
<sc-if value="{{ isHome }}" hint-placeholder-val="{{ true }}"><span style="position:absolute;left:-4px;right:-4px;bottom:-21px;height:2px;background:linear-gradient(90deg,transparent,#c2a35a,transparent);"></span></sc-if>
</div>
<div onClick="{{ goNews }}" style="position:relative;cursor:pointer;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#c4b8a6;padding:6px 0;" style-hover="color:#e6e0d6;">News
<sc-if value="{{ isNews }}" hint-placeholder-val="{{ false }}"><span style="position:absolute;left:-4px;right:-4px;bottom:-21px;height:2px;background:linear-gradient(90deg,transparent,#c2a35a,transparent);"></span></sc-if>
</div>
<a href="https://westgate.pw/categories" style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#c4b8a6;padding:6px 0;" style-hover="color:#e6e0d6;">Forums</a>
<a href="https://westgate.pw/wiki" style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#c4b8a6;padding:6px 0;" style-hover="color:#e6e0d6;">Wiki</a>
<div onClick="{{ goGallery }}" style="position:relative;cursor:pointer;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#c4b8a6;padding:6px 0;" style-hover="color:#e6e0d6;">Gallery
<sc-if value="{{ isGallery }}" hint-placeholder-val="{{ false }}"><span style="position:absolute;left:-4px;right:-4px;bottom:-21px;height:2px;background:linear-gradient(90deg,transparent,#c2a35a,transparent);"></span></sc-if>
</div>
<div onClick="{{ goBlog }}" style="position:relative;cursor:pointer;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.13em;text-transform:uppercase;color:#c4b8a6;padding:6px 0;white-space:nowrap;" style-hover="color:#e6e0d6;">Dev Blog
<sc-if value="{{ isBlog }}" hint-placeholder-val="{{ false }}"><span style="position:absolute;left:-4px;right:-4px;bottom:-21px;height:2px;background:linear-gradient(90deg,transparent,#c2a35a,transparent);"></span></sc-if>
</div>
</div>
<div style="display:flex;align-items:center;gap:14px;">
<a href="https://westgate.pw/login" style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:#c4b8a6;white-space:nowrap;" style-hover="color:#e6e0d6;">Log In</a>
<a href="https://westgate.pw/register" style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#150f08;background:linear-gradient(180deg,#d3b573,#a8854a);padding:9px 18px;border-radius:3px;border:1px solid #ddc488;box-shadow:0 2px 12px rgba(168,133,74,0.3);">Register</a>
</div>
</div>
</nav>
<!-- ================= HOME ================= -->
<sc-if value="{{ isHome }}" hint-placeholder-val="{{ true }}">
<div style="animation:fadeUp .5s ease both;">
<!-- HERO -->
<section style="position:relative;height:560px;border-bottom:1px solid rgba(194,163,90,0.16);overflow:hidden;">
<div style="position:absolute;inset:0;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-hero" shape="rect" placeholder="Drop banner key art" style="width:100%;height:100%;" hint-size="100%,100%"></x-import>
</div>
<div style="position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,7,14,0.55) 0%,rgba(10,7,14,0.2) 35%,rgba(10,7,14,0.78) 82%,#0a0710 100%);"></div>
<div style="position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;">
<div style="font-family:'Cinzel',serif;font-size:13px;letter-spacing:0.42em;text-transform:uppercase;color:#c2a35a;margin-bottom:22px;">Neverwinter Nights · Persistent World</div>
<h1 style="font-family:'Cinzel',serif;font-weight:700;font-size:72px;line-height:1.02;letter-spacing:0.03em;color:#f3ede4;margin:0;text-shadow:0 4px 40px rgba(0,0,0,0.7);">Welcome to Westgate</h1>
<p style="font-family:'Jost',sans-serif;font-weight:300;font-size:20px;color:#cfc5b7;max-width:620px;margin:24px 0 0;line-height:1.6;text-shadow:0 2px 16px rgba(0,0,0,0.8);">An ancient port city rises out of the mists, at the edge of the Sea of Fallen Stars. Mind the shadows.</p>
<div style="display:flex;gap:16px;margin-top:38px;pointer-events:auto;">
<a href="https://westgate.pw/wiki" style="font-family:'Jost',sans-serif;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#150f08;background:linear-gradient(180deg,#d3b573,#a8854a);padding:15px 32px;border-radius:3px;border:1px solid #ddc488;box-shadow:0 4px 22px rgba(168,133,74,0.35);">How to Join</a>
<div onClick="{{ goNews }}" style="cursor:pointer;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#e6e0d6;background:rgba(20,14,26,0.55);backdrop-filter:blur(6px);padding:15px 32px;border-radius:3px;border:1px solid rgba(194,163,90,0.4);">Latest News</div>
</div>
</div>
</section>
<!-- SERVER STATUS -->
<section style="max-width:1240px;margin:0 auto;padding:0 32px;">
<div style="margin-top:-44px;position:relative;z-index:10;background:linear-gradient(100deg, rgba(58,24,48,0.5) 0%, rgba(31,25,39,0.97) 23%, rgba(21,18,27,1) 62%, rgba(15,14,20,0.99) 100%);border:1px solid rgba(194,163,90,0.2);border-radius:5px;box-shadow:0 24px 60px rgba(0,0,0,0.5);padding:26px 34px;display:flex;align-items:center;gap:40px;flex-wrap:wrap;">
<div style="display:flex;align-items:center;gap:16px;">
<div style="width:13px;height:13px;border-radius:50%;background:#7fb86a;animation:pulse 2.4s infinite;"></div>
<div>
<div style="font-family:'Cinzel',serif;font-size:18px;letter-spacing:0.06em;color:#e6e0d6;">Server Online</div>
<div style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.08em;color:#9a9086;margin-top:3px;">Alpha · Module 0.3</div>
</div>
</div>
<div style="width:1px;height:42px;background:rgba(194,163,90,0.18);"></div>
<div>
<div style="font-family:'Cinzel',serif;font-size:26px;color:#e6e0d6;">14 <span style="font-size:15px;color:#9a9086;">souls online</span></div>
<div style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.08em;color:#9a9086;margin-top:2px;">Peaked 32 today</div>
</div>
<div style="width:1px;height:42px;background:rgba(194,163,90,0.18);"></div>
<div style="flex:1;min-width:180px;">
<div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#c2a35a;">Direct Connect</div>
<div style="font-family:'Jost',sans-serif;font-size:15px;color:#cfc5b7;margin-top:4px;">play.westgate.pw</div>
</div>
<a href="https://westgate.pw/wiki" style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#150f08;background:linear-gradient(180deg,#d3b573,#a8854a);padding:13px 26px;border-radius:3px;border:1px solid #ddc488;">Connect Guide</a>
</div>
</section>
<!-- PITCH -->
<section style="max-width:760px;margin:0 auto;padding:96px 32px 30px;text-align:center;">
<div style="display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:40px;">
<div style="height:1px;width:80px;background:linear-gradient(90deg,transparent,#c2a35a);"></div>
<div style="width:7px;height:7px;background:#c2a35a;transform:rotate(45deg);"></div>
<div style="height:1px;width:80px;background:linear-gradient(90deg,#c2a35a,transparent);"></div>
</div>
<p style="font-family:'Jost',sans-serif;font-weight:300;font-size:23px;line-height:1.7;color:#cfc5b7;margin:0 0 34px;">Long ago, merchants from distant lands filled its harbors, and gold flowed as freely as wine — but time, as it does, has a way of curdling mortal splendor.</p>
<p style="font-family:'Jost',sans-serif;font-size:17px;line-height:1.95;color:#9a9086;margin:0 0 26px;">Today its bones are old stone and salt-worn docks, and bargains are struck beneath every lantern's glow. Here, hoarded secrets, owed favour, and unspoken truths are the true measure of power — although coin certainly helps.</p>
<p style="font-family:'Jost',sans-serif;font-size:17px;line-height:1.95;color:#9a9086;margin:0 0 26px;">Westgate is a city ever-balanced on a blade's edge, built upon decaying decadence. The masked and nameless guilds clot the veins of the city with their greed and cruelty. Noble houses cling to fading legacies as their bloodlines tangle with curses, ambition, and desperation. Old cults and buried powers hold the Undergate by its throat. Beneath it all, antediluvian things begin to stir — patient, watchful, and hungry.</p>
<blockquote style="font-family:'Cinzel',serif;font-style:italic;font-size:22px;line-height:1.5;color:#d8c28a;margin:46px auto;max-width:560px;position:relative;">
<span style="position:absolute;left:50%;top:-34px;transform:translateX(-50%);font-size:54px;color:rgba(194,163,90,0.3);font-family:'Cinzel',serif;">“</span>
To walk Westgate's streets is to wager your soul in a game of chance.
</blockquote>
<p style="font-family:'Jost',sans-serif;font-size:17px;line-height:1.95;color:#9a9086;margin:0 0 26px;">Every alley offers opportunity, yet each carries a price. While some come seeking fortune or power, others arrive hoping to disappear — and indeed they do, for in these boulevards you are lucky to merely survive. In Westgate, few leave unchanged… and fewer still leave at all.</p>
<p style="font-family:'Cinzel',serif;font-size:19px;letter-spacing:0.04em;color:#e6e0d6;margin:34px 0 0;">Welcome to Westgate. Mind the shadows.</p>
</section>
<!-- GET STARTED -->
<section style="max-width:1240px;margin:0 auto;padding:70px 32px 30px;">
<div style="text-align:center;margin-bottom:46px;">
<div style="font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:#c2a35a;margin-bottom:12px;">Your First Steps</div>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:38px;color:#e6e0d6;margin:0;letter-spacing:0.03em;">Enter the City</h2>
</div>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;">
<a href="https://westgate.pw/wiki" style="display:block;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;padding:30px 26px;transition:all .25s;" style-hover="border:1px solid rgba(194,163,90,0.4);transform:translateY(-4px);">
<div style="width:42px;height:42px;border:1px solid rgba(194,163,90,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;"><div style="width:13px;height:13px;border:1.5px solid #c2a35a;transform:rotate(45deg);"></div></div>
<div style="font-family:'Cinzel',serif;font-size:19px;color:#e6e0d6;margin-bottom:10px;">How to Join</div>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.7;color:#9a9086;margin:0;">Install Neverwinter Nights: EE, point it at our server, and step through the gate.</p>
</a>
<a href="https://westgate.pw/wiki" style="display:block;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;padding:30px 26px;transition:all .25s;" style-hover="border:1px solid rgba(194,163,90,0.4);transform:translateY(-4px);">
<div style="width:42px;height:42px;border:1px solid rgba(194,163,90,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;"><div style="width:13px;height:13px;border:1.5px solid #c2a35a;"></div></div>
<div style="font-family:'Cinzel',serif;font-size:19px;color:#e6e0d6;margin-bottom:10px;">New Player Wiki</div>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.7;color:#9a9086;margin:0;">Starter guides, character creation, and everything you need for your first night.</p>
</a>
<a href="https://westgate.pw/categories" style="display:block;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;padding:30px 26px;transition:all .25s;" style-hover="border:1px solid rgba(194,163,90,0.4);transform:translateY(-4px);">
<div style="width:42px;height:42px;border:1px solid rgba(194,163,90,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;"><div style="width:15px;height:11px;border:1.5px solid #c2a35a;border-radius:2px;"></div></div>
<div style="font-family:'Cinzel',serif;font-size:19px;color:#e6e0d6;margin-bottom:10px;">The Setting Bible</div>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.7;color:#9a9086;margin:0;">Lore of Westgate — its districts, guilds, noble houses, and buried histories.</p>
</a>
<a href="https://westgate.pw/categories" style="display:block;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;padding:30px 26px;transition:all .25s;" style-hover="border:1px solid rgba(194,163,90,0.4);transform:translateY(-4px);">
<div style="width:42px;height:42px;border:1px solid rgba(194,163,90,0.4);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;"><div style="width:11px;height:11px;border-radius:50%;border:1.5px solid #c2a35a;"></div></div>
<div style="font-family:'Cinzel',serif;font-size:19px;color:#e6e0d6;margin-bottom:10px;">Join the Community</div>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.7;color:#9a9086;margin:0;">Introduce yourself in the forums and find your place among Westgate's denizens.</p>
</a>
</div>
</section>
<!-- LATEST NEWS STRIP -->
<section style="max-width:1240px;margin:0 auto;padding:70px 32px 100px;">
<div style="display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:34px;">
<div>
<div style="font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:#c2a35a;margin-bottom:10px;">From the Watch</div>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:34px;color:#e6e0d6;margin:0;letter-spacing:0.03em;">Latest News</h2>
</div>
<div onClick="{{ goNews }}" style="cursor:pointer;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#c2a35a;border-bottom:1px solid rgba(194,163,90,0.4);padding-bottom:3px;">All Dispatches →</div>
</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:22px;">
<div onClick="{{ goNews }}" style="cursor:pointer;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;overflow:hidden;transition:all .25s;" style-hover="border:1px solid rgba(194,163,90,0.4);">
<div style="height:160px;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(194,163,90,0.12);"><span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;color:#6b6152;text-transform:uppercase;">news image</span></div>
<div style="padding:24px;">
<div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#9a9086;margin-bottom:10px;">24 Jun 2026 · Announcement</div>
<div style="font-family:'Cinzel',serif;font-size:19px;line-height:1.35;color:#e6e0d6;margin-bottom:10px;">The Gates Open — Alpha Has Begun</div>
<p style="font-family:'Jost',sans-serif;font-size:14px;line-height:1.7;color:#9a9086;margin:0;">Westgate opens its harbour to its first wave of adventurers. Here is everything you need to know.</p>
</div>
</div>
<div onClick="{{ goNews }}" style="cursor:pointer;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;overflow:hidden;transition:all .25s;" style-hover="border:1px solid rgba(194,163,90,0.4);">
<div style="height:160px;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(194,163,90,0.12);"><span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;color:#6b6152;text-transform:uppercase;">news image</span></div>
<div style="padding:24px;">
<div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#9a9086;margin-bottom:10px;">21 Jun 2026 · Patch Note</div>
<div style="font-family:'Cinzel',serif;font-size:19px;line-height:1.35;color:#e6e0d6;margin-bottom:10px;">Patch 0.3 — The Undergate</div>
<p style="font-family:'Jost',sans-serif;font-size:14px;line-height:1.7;color:#9a9086;margin:0;">The tunnels beneath the city are now open. New areas, factions, and dangers await below.</p>
</div>
</div>
<div onClick="{{ goNews }}" style="cursor:pointer;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;overflow:hidden;transition:all .25s;" style-hover="border:1px solid rgba(194,163,90,0.4);">
<div style="height:160px;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(194,163,90,0.12);"><span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;color:#6b6152;text-transform:uppercase;">news image</span></div>
<div style="padding:24px;">
<div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#9a9086;margin-bottom:10px;">18 Jun 2026 · Community</div>
<div style="font-family:'Cinzel',serif;font-size:19px;line-height:1.35;color:#e6e0d6;margin-bottom:10px;">The Community Charter</div>
<p style="font-family:'Jost',sans-serif;font-size:14px;line-height:1.7;color:#9a9086;margin:0;">Our revised rules and the principles that keep Westgate's streets worth walking.</p>
</div>
</div>
</div>
</section>
</div>
</sc-if>
<!-- ================= NEWS ================= -->
<sc-if value="{{ isNews }}" hint-placeholder-val="{{ false }}">
<div style="animation:fadeUp .5s ease both;max-width:1100px;margin:0 auto;padding:72px 32px 100px;">
<div style="text-align:center;margin-bottom:56px;">
<div style="font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:#c2a35a;margin-bottom:14px;">Dispatches from the Watch</div>
<h1 style="font-family:'Cinzel',serif;font-weight:700;font-size:54px;color:#f3ede4;margin:0;letter-spacing:0.03em;">News</h1>
<p style="font-family:'Jost',sans-serif;font-weight:300;font-size:18px;color:#9a9086;margin:18px auto 0;max-width:520px;">Official server announcements, patch notes, and word from those who keep the gates.</p>
</div>
<!-- featured -->
<div style="background:linear-gradient(100deg, rgba(58,24,48,0.5) 0%, rgba(31,25,39,0.97) 23%, rgba(21,18,27,1) 62%, rgba(15,14,20,0.99) 100%);border:1px solid rgba(194,163,90,0.2);border-radius:6px;overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr;margin-bottom:46px;box-shadow:0 20px 50px rgba(0,0,0,0.4);">
<div style="position:relative;min-height:320px;background:repeating-linear-gradient(135deg,#241a30,#241a30 13px,#1a1326 13px,#1a1326 26px);display:flex;align-items:center;justify-content:center;">
<span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;color:#6b6152;text-transform:uppercase;">feature image</span>
</div>
<div style="padding:46px 44px;display:flex;flex-direction:column;justify-content:center;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;">
<span style="font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:#150f08;background:#c2a35a;padding:4px 11px;border-radius:2px;font-weight:600;">Announcement</span>
<span style="font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.06em;color:#9a9086;">24 June 2026</span>
</div>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:31px;line-height:1.2;color:#f3ede4;margin:0 0 18px;">The Gates of Westgate Open — Alpha Has Begun</h2>
<p style="font-family:'Jost',sans-serif;font-size:16px;line-height:1.85;color:#9a9086;margin:0 0 26px;">After long months in the shipyards, the harbour is open. Our alpha welcomes its first denizens to walk the salt-worn docks, strike bargains beneath the lanterns, and write the first chapters of Westgate's living history. Read on for what to expect, how to join, and where to begin.</p>
<div style="display:flex;align-items:center;gap:14px;">
<div onClick="{{ goArticle }}" style="cursor:pointer;font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#150f08;background:linear-gradient(180deg,#d3b573,#a8854a);padding:12px 26px;border-radius:3px;border:1px solid #ddc488;">Read Dispatch</div>
<span style="font-family:'Jost',sans-serif;font-size:12px;color:#9a9086;">by The Watch · 4 min read</span>
</div>
</div>
</div>
<!-- list -->
<div style="display:flex;flex-direction:column;">
<a href="https://westgate.pw/category/1/news" style="display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:center;padding:26px 8px;border-top:1px solid rgba(194,163,90,0.12);transition:background .2s;" style-hover="background:rgba(194,163,90,0.04);">
<div style="text-align:center;"><div style="font-family:'Cinzel',serif;font-size:30px;color:#d8c28a;line-height:1;">21</div><div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#9a9086;margin-top:5px;">Jun 2026</div></div>
<div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:7px;"><span style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#bf8a86;border:1px solid rgba(166,74,78,0.4);padding:2px 8px;border-radius:2px;">Patch Note</span></div>
<div style="font-family:'Cinzel',serif;font-size:21px;color:#e6e0d6;margin-bottom:6px;">Patch 0.3 — The Undergate Expansion</div>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.6;color:#9a9086;margin:0;">New sub-levels, the Quivering Thumb questline, balance passes to thievery, and a reworked lantern lighting system.</p>
</div>
<div style="font-family:'Jost',sans-serif;font-size:22px;color:#6b6151;">→</div>
</a>
<a href="https://westgate.pw/category/1/news" style="display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:center;padding:26px 8px;border-top:1px solid rgba(194,163,90,0.12);transition:background .2s;" style-hover="background:rgba(194,163,90,0.04);">
<div style="text-align:center;"><div style="font-family:'Cinzel',serif;font-size:30px;color:#d8c28a;line-height:1;">18</div><div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#9a9086;margin-top:5px;">Jun 2026</div></div>
<div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:7px;"><span style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#c2a35a;border:1px solid rgba(194,163,90,0.4);padding:2px 8px;border-radius:2px;">Community</span></div>
<div style="font-family:'Cinzel',serif;font-size:21px;color:#e6e0d6;margin-bottom:6px;">The Community Charter & Rules Revision</div>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.6;color:#9a9086;margin:0;">An update to our code of conduct and roleplay standards. Please review before your next session.</p>
</div>
<div style="font-family:'Jost',sans-serif;font-size:22px;color:#6b6151;">→</div>
</a>
<a href="https://westgate.pw/category/1/news" style="display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:center;padding:26px 8px;border-top:1px solid rgba(194,163,90,0.12);transition:background .2s;" style-hover="background:rgba(194,163,90,0.04);">
<div style="text-align:center;"><div style="font-family:'Cinzel',serif;font-size:30px;color:#d8c28a;line-height:1;">12</div><div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#9a9086;margin-top:5px;">Jun 2026</div></div>
<div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:7px;"><span style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#150f08;background:#c2a35a;padding:2px 8px;border-radius:2px;font-weight:600;">Announcement</span></div>
<div style="font-family:'Cinzel',serif;font-size:21px;color:#e6e0d6;margin-bottom:6px;">New Player Onboarding: The Watch Welcomes You</div>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.6;color:#9a9086;margin:0;">A streamlined path from download to your first night in the city — mentors now available on arrival.</p>
</div>
<div style="font-family:'Jost',sans-serif;font-size:22px;color:#6b6151;">→</div>
</a>
<a href="https://westgate.pw/category/1/news" style="display:grid;grid-template-columns:130px 1fr auto;gap:28px;align-items:center;padding:26px 8px;border-top:1px solid rgba(194,163,90,0.12);border-bottom:1px solid rgba(194,163,90,0.12);transition:background .2s;" style-hover="background:rgba(194,163,90,0.04);">
<div style="text-align:center;"><div style="font-family:'Cinzel',serif;font-size:30px;color:#d8c28a;line-height:1;">06</div><div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#9a9086;margin-top:5px;">Jun 2026</div></div>
<div>
<div style="display:flex;align-items:center;gap:10px;margin-bottom:7px;"><span style="font-family:'Jost',sans-serif;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:#bf8a86;border:1px solid rgba(166,74,78,0.4);padding:2px 8px;border-radius:2px;">Maintenance</span></div>
<div style="font-family:'Cinzel',serif;font-size:21px;color:#e6e0d6;margin-bottom:6px;">Scheduled Module Reset — June 28</div>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.6;color:#9a9086;margin:0;">The server will be briefly unavailable for a planned reset. Expect roughly thirty minutes of downtime.</p>
</div>
<div style="font-family:'Jost',sans-serif;font-size:22px;color:#6b6151;">→</div>
</a>
</div>
</div>
</sc-if>
<!-- ================= DEV BLOG ================= -->
<sc-if value="{{ isBlog }}" hint-placeholder-val="{{ false }}">
<div style="animation:fadeUp .5s ease both;max-width:880px;margin:0 auto;padding:72px 32px 100px;">
<div style="text-align:center;margin-bottom:60px;">
<div style="font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:#c2a35a;margin-bottom:14px;">From the Workshop</div>
<h1 style="font-family:'Cinzel',serif;font-weight:700;font-size:54px;color:#f3ede4;margin:0;letter-spacing:0.03em;">Developer Blog</h1>
<p style="font-family:'Jost',sans-serif;font-weight:300;font-size:18px;color:#9a9086;margin:18px auto 0;max-width:540px;">Behind-the-scenes development updates — the craft, the decisions, and the long work of building a living city.</p>
</div>
<div style="position:relative;padding-left:38px;">
<div style="position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,rgba(194,163,90,0.5),rgba(194,163,90,0.08));"></div>
<article style="position:relative;margin-bottom:48px;">
<div style="position:absolute;left:-34px;top:6px;width:13px;height:13px;border:1.5px solid #c2a35a;background:#100b18;transform:rotate(45deg);"></div>
<div style="background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.16);border-radius:6px;overflow:hidden;">
<div style="height:200px;background:repeating-linear-gradient(135deg,#241a30,#241a30 13px,#1a1326 13px,#1a1326 26px);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(194,163,90,0.12);"><span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;color:#6b6152;text-transform:uppercase;">screenshot / wip render</span></div>
<div style="padding:34px 38px;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
<span style="font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:#bf8a86;border:1px solid rgba(166,74,78,0.4);padding:3px 10px;border-radius:2px;">Worldbuilding</span>
<span style="font-family:'Jost',sans-serif;font-size:12px;color:#9a9086;">22 June 2026 · 7 min read</span>
</div>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:27px;line-height:1.25;color:#f3ede4;margin:0 0 16px;">Building the Undergate: Tunnels Beneath the City</h2>
<p style="font-family:'Jost',sans-serif;font-size:16px;line-height:1.9;color:#9a9086;margin:0 0 22px;">Westgate has always been a city of two halves — the lantern-lit streets above, and the flooded warrens below. This month we walk you through how the Undergate came together: the layout philosophy, the lighting passes that took far longer than we'd like to admit, and the factions that now call the dark home.</p>
<div style="display:flex;align-items:center;gap:12px;">
<div style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3a1830,#1a1322);border:1px solid rgba(194,163,90,0.3);"></div>
<span style="font-family:'Jost',sans-serif;font-size:13px;color:#b9b2a6;">archvillainette</span>
<span style="color:#6b6152;">·</span>
<a href="https://westgate.pw/category/84/developer-blog" style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:#c2a35a;">Read Entry →</a>
</div>
</div>
</div>
</article>
<article style="position:relative;margin-bottom:48px;">
<div style="position:absolute;left:-34px;top:6px;width:13px;height:13px;border:1.5px solid #c2a35a;background:#100b18;transform:rotate(45deg);"></div>
<div style="background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.16);border-radius:6px;padding:30px 36px;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
<span style="font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:#c2a35a;border:1px solid rgba(194,163,90,0.4);padding:3px 10px;border-radius:2px;">Systems</span>
<span style="font-family:'Jost',sans-serif;font-size:12px;color:#9a9086;">9 June 2026 · 6 min read</span>
</div>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:25px;line-height:1.25;color:#f3ede4;margin:0 0 14px;">Faction Systems & the Masked Guilds</h2>
<p style="font-family:'Jost',sans-serif;font-size:15.5px;line-height:1.85;color:#9a9086;margin:0 0 20px;">Reputation, favour, and betrayal — how the guild standing system tracks the webs of loyalty players weave, and why we chose to let almost everything be undone with the right bribe.</p>
<div style="display:flex;align-items:center;gap:12px;">
<div style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3a1830,#1a1322);border:1px solid rgba(194,163,90,0.3);"></div>
<span style="font-family:'Jost',sans-serif;font-size:13px;color:#b9b2a6;">The Westgate Team</span>
<span style="color:#6b6152;">·</span>
<a href="https://westgate.pw/category/84/developer-blog" style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:#c2a35a;">Read Entry →</a>
</div>
</div>
</article>
<article style="position:relative;margin-bottom:48px;">
<div style="position:absolute;left:-34px;top:6px;width:13px;height:13px;border:1.5px solid #c2a35a;background:#100b18;transform:rotate(45deg);"></div>
<div style="background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.16);border-radius:6px;padding:30px 36px;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
<span style="font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:#bf8a86;border:1px solid rgba(166,74,78,0.4);padding:3px 10px;border-radius:2px;">Art & Atmosphere</span>
<span style="font-family:'Jost',sans-serif;font-size:12px;color:#9a9086;">27 May 2026 · 5 min read</span>
</div>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:25px;line-height:1.25;color:#f3ede4;margin:0 0 14px;">Lighting Westgate: A Study in Lanternlight</h2>
<p style="font-family:'Jost',sans-serif;font-size:15.5px;line-height:1.85;color:#9a9086;margin:0 0 20px;">Mood is everything in a city built on shadow. A look at our approach to colour temperature, fog, and the hundreds of placed light sources that make the docks feel cold and the taverns feel like refuge.</p>
<div style="display:flex;align-items:center;gap:12px;">
<div style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3a1830,#1a1322);border:1px solid rgba(194,163,90,0.3);"></div>
<span style="font-family:'Jost',sans-serif;font-size:13px;color:#b9b2a6;">archvillainette</span>
<span style="color:#6b6152;">·</span>
<a href="https://westgate.pw/category/84/developer-blog" style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:#c2a35a;">Read Entry →</a>
</div>
</div>
</article>
<article style="position:relative;">
<div style="position:absolute;left:-34px;top:6px;width:13px;height:13px;border:1.5px solid #c2a35a;background:#100b18;transform:rotate(45deg);"></div>
<div style="background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.16);border-radius:6px;padding:30px 36px;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
<span style="font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:#c2a35a;border:1px solid rgba(194,163,90,0.4);padding:3px 10px;border-radius:2px;">Design</span>
<span style="font-family:'Jost',sans-serif;font-size:12px;color:#9a9086;">14 May 2026 · 8 min read</span>
</div>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:25px;line-height:1.25;color:#f3ede4;margin:0 0 14px;">Why We Chose Persistent Roleplay</h2>
<p style="font-family:'Jost',sans-serif;font-size:15.5px;line-height:1.85;color:#9a9086;margin:0 0 20px;">The first entry. Who we are, what Shadows Over Westgate is trying to be, and the kind of stories we hope you'll tell in its streets.</p>
<div style="display:flex;align-items:center;gap:12px;">
<div style="width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#3a1830,#1a1322);border:1px solid rgba(194,163,90,0.3);"></div>
<span style="font-family:'Jost',sans-serif;font-size:13px;color:#b9b2a6;">The Westgate Team</span>
<span style="color:#6b6152;">·</span>
<a href="https://westgate.pw/category/84/developer-blog" style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:#c2a35a;">Read Entry →</a>
</div>
</div>
</article>
</div>
</div>
</sc-if>
<!-- ================= GALLERY ================= -->
<sc-if value="{{ isGallery }}" hint-placeholder-val="{{ false }}">
<div style="animation:fadeUp .5s ease both;max-width:1240px;margin:0 auto;padding:72px 32px 100px;">
<div style="text-align:center;margin-bottom:56px;">
<div style="font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:#c2a35a;margin-bottom:14px;">The Archive</div>
<h1 style="font-family:'Cinzel',serif;font-weight:700;font-size:54px;color:#f3ede4;margin:0;letter-spacing:0.03em;">Gallery</h1>
<p style="font-family:'Jost',sans-serif;font-weight:300;font-size:18px;color:#9a9086;margin:18px auto 0;max-width:540px;">Scenes from the streets of Westgate, captured by its denizens. Drag your own screenshots onto any frame.</p>
</div>
<div style="column-count:3;column-gap:18px;">
<div style="break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid rgba(194,163,90,0.16);border-radius:5px;overflow:hidden;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-g1" shape="rect" placeholder="Drop screenshot" style="width:100%;height:300px;display:block;" hint-size="100%,300px"></x-import>
<div style="position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(180deg,transparent,rgba(8,5,12,0.9));pointer-events:none;"><div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;">The Undergate at Low Tide</div><div style="font-family:'Jost',sans-serif;font-size:11px;color:#9a9086;margin-top:3px;">@duskwarden</div></div>
</div>
<div style="break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid rgba(194,163,90,0.16);border-radius:5px;overflow:hidden;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-g2" shape="rect" placeholder="Drop screenshot" style="width:100%;height:220px;display:block;" hint-size="100%,220px"></x-import>
<div style="position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(180deg,transparent,rgba(8,5,12,0.9));pointer-events:none;"><div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;">Rain over the Harbour</div><div style="font-family:'Jost',sans-serif;font-size:11px;color:#9a9086;margin-top:3px;">@archvillainette</div></div>
</div>
<div style="break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid rgba(194,163,90,0.16);border-radius:5px;overflow:hidden;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-g3" shape="rect" placeholder="Drop screenshot" style="width:100%;height:340px;display:block;" hint-size="100%,340px"></x-import>
<div style="position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(180deg,transparent,rgba(8,5,12,0.9));pointer-events:none;"><div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;">Noble Row, House Malforten</div><div style="font-family:'Jost',sans-serif;font-size:11px;color:#9a9086;margin-top:3px;">@velvethand</div></div>
</div>
<div style="break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid rgba(194,163,90,0.16);border-radius:5px;overflow:hidden;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-g4" shape="rect" placeholder="Drop screenshot" style="width:100%;height:240px;display:block;" hint-size="100%,240px"></x-import>
<div style="position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(180deg,transparent,rgba(8,5,12,0.9));pointer-events:none;"><div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;">Masks of the Quivering Thumb</div><div style="font-family:'Jost',sans-serif;font-size:11px;color:#9a9086;margin-top:3px;">@silktongue</div></div>
</div>
<div style="break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid rgba(194,163,90,0.16);border-radius:5px;overflow:hidden;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-g5" shape="rect" placeholder="Drop screenshot" style="width:100%;height:300px;display:block;" hint-size="100%,300px"></x-import>
<div style="position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(180deg,transparent,rgba(8,5,12,0.9));pointer-events:none;"><div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;">The Tankard's Rest</div><div style="font-family:'Jost',sans-serif;font-size:11px;color:#9a9086;margin-top:3px;">@ghostofeltabbar</div></div>
</div>
<div style="break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid rgba(194,163,90,0.16);border-radius:5px;overflow:hidden;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-g6" shape="rect" placeholder="Drop screenshot" style="width:100%;height:230px;display:block;" hint-size="100%,230px"></x-import>
<div style="position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(180deg,transparent,rgba(8,5,12,0.9));pointer-events:none;"><div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;">Cobbles after Curfew</div><div style="font-family:'Jost',sans-serif;font-size:11px;color:#9a9086;margin-top:3px;">@ashen</div></div>
</div>
<div style="break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid rgba(194,163,90,0.16);border-radius:5px;overflow:hidden;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-g7" shape="rect" placeholder="Drop screenshot" style="width:100%;height:330px;display:block;" hint-size="100%,330px"></x-import>
<div style="position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(180deg,transparent,rgba(8,5,12,0.9));pointer-events:none;"><div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;">The Sea of Fallen Stars at Dusk</div><div style="font-family:'Jost',sans-serif;font-size:11px;color:#9a9086;margin-top:3px;">@cartographer</div></div>
</div>
<div style="break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid rgba(194,163,90,0.16);border-radius:5px;overflow:hidden;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-g8" shape="rect" placeholder="Drop screenshot" style="width:100%;height:250px;display:block;" hint-size="100%,250px"></x-import>
<div style="position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(180deg,transparent,rgba(8,5,12,0.9));pointer-events:none;"><div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;">A Bargain Beneath the Lantern</div><div style="font-family:'Jost',sans-serif;font-size:11px;color:#9a9086;margin-top:3px;">@nightjar</div></div>
</div>
<div style="break-inside:avoid;margin-bottom:18px;position:relative;border:1px solid rgba(194,163,90,0.16);border-radius:5px;overflow:hidden;">
<x-import component-from-global-scope="image-slot" from="./image-slot.js" id="wg-g9" shape="rect" placeholder="Drop screenshot" style="width:100%;height:290px;display:block;" hint-size="100%,290px"></x-import>
<div style="position:absolute;left:0;right:0;bottom:0;padding:16px 16px 13px;background:linear-gradient(180deg,transparent,rgba(8,5,12,0.9));pointer-events:none;"><div style="font-family:'Cinzel',serif;font-size:15px;color:#e6e0d6;">Something in the Undergate</div><div style="font-family:'Jost',sans-serif;font-size:11px;color:#9a9086;margin-top:3px;">@nameless</div></div>
</div>
</div>
</div>
</sc-if>
<!-- ================= JOIN THE TEAM ================= -->
<sc-if value="{{ isRecruit }}" hint-placeholder-val="{{ false }}">
<div style="animation:fadeUp .5s ease both;">
<!-- HERO -->
<section style="max-width:1240px;margin:0 auto;padding:82px 32px 20px;">
<div style="display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;">
<div>
<div style="font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:#c2a35a;margin-bottom:22px;">Persistent World · Made by Hand</div>
<h1 style="font-family:'Cinzel',serif;font-weight:700;font-size:52px;line-height:1.08;letter-spacing:0.02em;color:#f3ede4;margin:0 0 22px;">Come build a world that's a pleasure to work on.</h1>
<p style="font-family:'Jost',sans-serif;font-weight:300;font-size:18px;line-height:1.7;color:#cfc5b7;margin:0 0 34px;max-width:30em;">Westgate is made by a handful of people who love this stuff — artists, writers, builders, scripters. We've kept the tools pleasant so your time goes where it matters: into the world itself. If you make things, we'd love to meet you.</p>
<div style="display:flex;align-items:center;gap:22px;flex-wrap:wrap;">
<a href="https://westgate.pw/categories" style="font-family:'Jost',sans-serif;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#150f08;background:linear-gradient(180deg,#d3b573,#a8854a);padding:15px 30px;border-radius:3px;border:1px solid #ddc488;box-shadow:0 4px 22px rgba(168,133,74,0.32);">Say Hello on Discord</a>
</div>
</div>
<div style="background:linear-gradient(100deg, rgba(58,24,48,0.5) 0%, rgba(31,25,39,0.97) 23%, rgba(21,18,27,1) 62%, rgba(15,14,20,0.99) 100%);border:1px solid rgba(194,163,90,0.2);border-radius:6px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.5);">
<div style="display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid rgba(194,163,90,0.16);">
<span style="display:flex;gap:6px;"><i style="width:9px;height:9px;border-radius:50%;background:#7fb86a;display:block;"></i><i style="width:9px;height:9px;border-radius:50%;background:#d3b573;display:block;"></i><i style="width:9px;height:9px;border-radius:50%;background:#bf8a86;display:block;"></i></span>
<span style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#9a9086;margin-left:6px;">westgate — the undergate</span>
</div>
<div style="aspect-ratio:16/11;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);display:flex;align-items:center;justify-content:center;">
<span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:#6b6152;background:#100b18;border:1px solid rgba(194,163,90,0.16);padding:7px 13px;border-radius:3px;">screenshot · a corner you'll help build</span>
</div>
</div>
</div>
</section>
<!-- PILLARS -->
<section id="wg-stack" style="max-width:1240px;margin:0 auto;padding:80px 32px 30px;scroll-margin-top:80px;">
<div style="text-align:center;margin-bottom:46px;">
<div style="font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:#c2a35a;margin-bottom:12px;">Who We Need</div>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:36px;color:#e6e0d6;margin:0 0 14px;letter-spacing:0.03em;">Every kind of maker has a place here</h2>
<p style="font-family:'Jost',sans-serif;font-size:16px;line-height:1.7;color:#9a9086;margin:0 auto;max-width:32em;">Code, art, words, world — whatever you make, there's a part of Westgate waiting for it.</p>
</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:22px;">
<article style="background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;">
<div style="aspect-ratio:16/9;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(194,163,90,0.12);"><span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:#6b6152;">toolset · scripts</span></div>
<div style="padding:26px 26px 28px;">
<h3 style="font-family:'Cinzel',serif;font-size:20px;color:#e6e0d6;margin:0 0 10px;">Tools that stay out of your way</h3>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.7;color:#9a9086;margin:0;">For builders and scripters: a clean toolset and modern scripting on a fast core — none of NWScript's old quirks to fight. Everything's saved and versioned, so you can experiment without fear of breaking things.</p>
</div>
</article>
<article style="background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;">
<div style="aspect-ratio:16/9;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(194,163,90,0.12);"><span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:#6b6152;">models · textures · music</span></div>
<div style="padding:26px 26px 28px;">
<h3 style="font-family:'Cinzel',serif;font-size:20px;color:#e6e0d6;margin:0 0 10px;">Your craft, your stamp</h3>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.7;color:#9a9086;margin:0;">For artists and asset-makers: models, textures, areas, sound. We're not after a house style to copy — we want the thing only you'd make, and we'll help get it into the game.</p>
</div>
</article>
<article style="background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;">
<div style="aspect-ratio:16/9;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(194,163,90,0.12);"><span style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:#6b6152;">lore · quests · factions</span></div>
<div style="padding:26px 26px 28px;">
<h3 style="font-family:'Cinzel',serif;font-size:20px;color:#e6e0d6;margin:0 0 10px;">Ideas that reach players</h3>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.7;color:#9a9086;margin:0;">For writers and designers: a questline, a faction, a forgotten corner of the city. What you dream up this month is something players are living in the next.</p>
</div>
</article>
</div>
</section>
<!-- TEAM -->
<section style="max-width:1240px;margin:0 auto;padding:56px 32px 30px;">
<div style="background:linear-gradient(100deg, rgba(58,24,48,0.5) 0%, rgba(31,25,39,0.97) 23%, rgba(21,18,27,1) 62%, rgba(15,14,20,0.99) 100%);border:1px solid rgba(194,163,90,0.2);border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,0.4);padding:46px 50px;display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;">
<div>
<div style="font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:#c2a35a;margin-bottom:14px;">What It's Actually Like</div>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:30px;line-height:1.2;color:#f3ede4;margin:0 0 16px;">Low ego, high trust — and your work goes live.</h2>
<p style="font-family:'Jost',sans-serif;font-size:16px;line-height:1.85;color:#9a9086;margin:0;">No gatekeeping, no hazing, no “figure it out yourself.” We give honest, kind feedback, lend a hand when it helps, and keep things moving. The thing you make this week is the thing players see this week.</p>
</div>
<div style="display:flex;flex-direction:column;gap:16px;">
<div style="display:flex;align-items:center;gap:14px;font-family:'Jost',sans-serif;font-size:15.5px;color:#b9b2a6;"><span style="width:7px;height:7px;background:#c2a35a;transform:rotate(45deg);flex:none;"></span>Honest, kind feedback on your work</div>
<div style="display:flex;align-items:center;gap:14px;font-family:'Jost',sans-serif;font-size:15.5px;color:#b9b2a6;"><span style="width:7px;height:7px;background:#c2a35a;transform:rotate(45deg);flex:none;"></span>A hand whenever you want one</div>
<div style="display:flex;align-items:center;gap:14px;font-family:'Jost',sans-serif;font-size:15.5px;color:#b9b2a6;"><span style="width:7px;height:7px;background:#c2a35a;transform:rotate(45deg);flex:none;"></span>What you make can be in-game within the week</div>
<div style="display:flex;align-items:center;gap:14px;font-family:'Jost',sans-serif;font-size:15.5px;color:#b9b2a6;"><span style="width:7px;height:7px;background:#c2a35a;transform:rotate(45deg);flex:none;"></span>Work at whatever pace fits your life</div>
</div>
</div>
</section>
<!-- CTA -->
<section style="max-width:760px;margin:0 auto;padding:70px 32px 100px;text-align:center;">
<div style="display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:40px;">
<div style="height:1px;width:80px;background:linear-gradient(90deg,transparent,#c2a35a);"></div>
<div style="width:7px;height:7px;background:#c2a35a;transform:rotate(45deg);"></div>
<div style="height:1px;width:80px;background:linear-gradient(90deg,#c2a35a,transparent);"></div>
</div>
<h2 style="font-family:'Cinzel',serif;font-weight:700;font-size:40px;color:#f3ede4;margin:0 0 16px;letter-spacing:0.02em;">Sound like your kind of place?</h2>
<p style="font-family:'Jost',sans-serif;font-weight:300;font-size:18px;line-height:1.7;color:#cfc5b7;margin:0 0 30px;">No test gauntlet, no résumé. Just come say hi and tell us what you'd love to build.</p>
<!-- ponytail: point at the real Discord invite when you have it -->
<a href="https://westgate.pw/categories" style="display:inline-block;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#150f08;background:linear-gradient(180deg,#d3b573,#a8854a);padding:16px 36px;border-radius:3px;border:1px solid #ddc488;box-shadow:0 4px 26px rgba(168,133,74,0.4);">Join the Team on Discord →</a>
<div style="margin-top:46px;padding-top:22px;border-top:1px solid rgba(194,163,90,0.12);font-family:'Jost',sans-serif;font-size:12px;letter-spacing:0.08em;color:#7f756f;">Artists · writers · builders · scripters — all welcome</div>
</section>
</div>
</sc-if>
<!-- ================= ARTICLE (topic rendered as banner-led article) ================= -->
<sc-if value="{{ isArticle }}" hint-placeholder-val="{{ false }}">
<div style="animation:fadeUp .5s ease both;">
<!-- BANNER HERO (pulled from topic thumbnail / first image) -->
<section style="max-width:1180px;margin:14px auto 0;padding:0 32px;">
<div style="position:relative;overflow:hidden;border:1px solid rgba(194,163,90,0.22);border-radius:10px;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset 0 1px 0 rgba(255,242,204,0.06),0 18px 42px rgba(0,0,0,0.3);">
<div style="position:absolute;inset:0;background:repeating-linear-gradient(135deg,#241a30,#241a30 13px,#1a1326 13px,#1a1326 26px);"></div>
<div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,8,11,0.2) 0%,rgba(9,8,11,0.55) 55%,rgba(9,8,11,0.94) 100%);"></div>
<div style="position:absolute;top:18px;left:20px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:#6b6152;background:rgba(9,8,11,0.6);border:1px solid rgba(194,163,90,0.16);padding:6px 11px;border-radius:3px;">topic banner · first image from post</div>
<div style="position:relative;padding:46px 50px;">
<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
<span style="font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:#150f08;background:#c2a35a;padding:4px 11px;border-radius:2px;font-weight:600;">Announcement</span>
<span style="font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.06em;color:#b9b2a6;">24 June 2026</span>
</div>
<h1 style="font-family:'Cinzel',serif;font-weight:700;font-size:clamp(34px,4.4vw,52px);line-height:1.08;letter-spacing:0.02em;color:#f3ede4;margin:0;max-width:18em;text-shadow:0 4px 30px rgba(0,0,0,0.7);">The Gates of Westgate Open — Alpha Has Begun</h1>
<div style="display:flex;align-items:center;gap:13px;margin-top:22px;">
<div style="width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3a1830,#1a1322);border:1px solid rgba(194,163,90,0.3);"></div>
<span style="font-family:'Jost',sans-serif;font-size:14px;color:#cfc5b7;">The Watch</span>
<span style="color:#6b6152;">·</span>
<span style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:#9a9086;">4 min read</span>
</div>
</div>
</div>
</section>
<!-- BREADCRUMB -->
<section style="max-width:760px;margin:0 auto;padding:26px 32px 0;">
<div style="font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:#9a9086;display:flex;align-items:center;gap:12px;">
<span onClick="{{ goNews }}" style="cursor:pointer;" style-hover="color:#e0c878;">News</span>
<span style="color:#a8893f;">→</span>
<span style="color:#b9b2a6;">Alpha Has Begun</span>
</div>
</section>
<!-- ARTICLE PROSE (uses the wiki-article-prose vocabulary in production) -->
<article style="max-width:760px;margin:0 auto;padding:30px 32px 20px;font-family:'Jost',sans-serif;">
<p style="font-size:20px;line-height:1.75;color:#cfc5b7;margin:0 0 28px;font-weight:300;">After long months in the shipyards, the harbour is open at last. Westgate welcomes its first denizens to walk the salt-worn docks, strike bargains beneath the lanterns, and write the first chapters of the city's living history.</p>
<p style="font-size:17px;line-height:1.95;color:#b9b2a6;margin:0 0 22px;">This is the moment we've been building toward. The gates are unbarred, the lanterns are lit, and the streets are yours to walk. Whether you come seeking fortune, power, or simply somewhere to disappear, there is a place for you among the shadows — and a price for everything, as there always is in Westgate.</p>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:27px;color:#c2a35a;margin:42px 0 8px;padding-bottom:8px;position:relative;">What to Expect<span style="position:absolute;left:0;bottom:0;width:min(14rem,48%);height:1px;background:linear-gradient(90deg,rgba(194,163,90,0.42),rgba(194,163,90,0.1) 54%,transparent);"></span></h2>
<p style="font-size:17px;line-height:1.95;color:#b9b2a6;margin:0 0 22px;">The world is alpha — rough in places, and all the better for your fingerprints on it. Expect active development, frequent patches, and a team that listens. Your characters, your stories, and your feedback shape what Westgate becomes.</p>
<blockquote style="font-family:'Cinzel',serif;font-style:italic;font-size:21px;line-height:1.55;color:#d8c28a;margin:34px 0;padding:8px 0 8px 28px;border-left:2px solid rgba(194,163,90,0.4);background:rgba(35,27,23,0.36);">In Westgate, few leave unchanged… and fewer still leave at all.</blockquote>
<h2 style="font-family:'Cinzel',serif;font-weight:600;font-size:27px;color:#c2a35a;margin:42px 0 8px;padding-bottom:8px;position:relative;">How to Begin<span style="position:absolute;left:0;bottom:0;width:min(14rem,48%);height:1px;background:linear-gradient(90deg,rgba(194,163,90,0.42),rgba(194,163,90,0.1) 54%,transparent);"></span></h2>
<p style="font-size:17px;line-height:1.95;color:#b9b2a6;margin:0 0 22px;">Install Neverwinter Nights: Enhanced Edition, follow the connect guide on the wiki, and create your character. A mentor from the Watch will meet you at the gate. Mind the shadows — and welcome.</p>
</article>
<!-- ARTICLE FOOTER: discuss on forum -->
<section style="max-width:760px;margin:0 auto;padding:18px 32px 0;">
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:22px 26px;border:1px solid rgba(194,163,90,0.14);border-radius:8px;background:linear-gradient(100deg, 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%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.025),0 10px 26px rgba(0,0,0,0.24);">
<div style="font-family:'Jost',sans-serif;font-size:15px;color:#b9b2a6;">This is a live forum topic — replies appear below it on the real page.</div>
<a href="https://westgate.pw/category/1/news" style="font-family:'Jost',sans-serif;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:#150f08;background:linear-gradient(180deg,#d8bd76,#a8893f);padding:11px 22px;border-radius:6px;border:1px solid rgba(216,194,138,0.6);white-space:nowrap;">Join the Discussion →</a>
</div>
</section>
<!-- MORE FROM NEWS -->
<section style="max-width:1180px;margin:0 auto;padding:64px 32px 100px;">
<div style="font-family:'Cinzel',serif;font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:#c2a35a;margin-bottom:24px;text-align:center;">More Dispatches</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:22px;">
<div onClick="{{ goArticle }}" style="cursor:pointer;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.025),0 10px 26px rgba(0,0,0,0.24);">
<div style="height:140px;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);border-bottom:1px solid rgba(194,163,90,0.12);"></div>
<div style="padding:20px 22px;"><div style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#9a9086;margin-bottom:9px;">21 Jun · Patch Note</div><div style="font-family:'Cinzel',serif;font-size:18px;line-height:1.35;color:#e6e0d6;">Patch 0.3 — The Undergate</div></div>
</div>
<div onClick="{{ goArticle }}" style="cursor:pointer;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.025),0 10px 26px rgba(0,0,0,0.24);">
<div style="height:140px;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);border-bottom:1px solid rgba(194,163,90,0.12);"></div>
<div style="padding:20px 22px;"><div style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#9a9086;margin-bottom:9px;">18 Jun · Community</div><div style="font-family:'Cinzel',serif;font-size:18px;line-height:1.35;color:#e6e0d6;">The Community Charter</div></div>
</div>
<div onClick="{{ goArticle }}" style="cursor:pointer;background:linear-gradient(100deg, 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%);border:1px solid rgba(194,163,90,0.14);border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.025),0 10px 26px rgba(0,0,0,0.24);">
<div style="height:140px;background:repeating-linear-gradient(135deg,#1b1320,#1b1320 11px,#161019 11px,#161019 22px);border-bottom:1px solid rgba(194,163,90,0.12);"></div>
<div style="padding:20px 22px;"><div style="font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#9a9086;margin-bottom:9px;">06 Jun · Maintenance</div><div style="font-family:'Cinzel',serif;font-size:18px;line-height:1.35;color:#e6e0d6;">Scheduled Module Reset</div></div>
</div>
</div>
</section>
</div>
</sc-if>
<!-- ================= FOOTER ================= -->
<footer style="border-top:1px solid rgba(194,163,90,0.16);background:linear-gradient(180deg,rgba(13,9,18,0),rgba(8,5,12,0.6));margin-top:20px;">
<div style="max-width:1240px;margin:0 auto;padding:64px 32px 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:50px;">
<div>
<div style="display:flex;align-items:center;gap:12px;margin-bottom:18px;">
<div style="width:22px;height:22px;transform:rotate(45deg);border:1.5px solid #c2a35a;display:flex;align-items:center;justify-content:center;"><div style="width:7px;height:7px;background:#c2a35a;"></div></div>
<div style="font-family:'Cinzel',serif;font-weight:600;font-size:15px;letter-spacing:0.14em;color:#e6e0d6;">SHADOWS OVER WESTGATE</div>
</div>
<p style="font-family:'Jost',sans-serif;font-size:14.5px;line-height:1.8;color:#9a9086;margin:0 0 18px;max-width:380px;">A Neverwinter Nights: Enhanced Edition persistent world of gothic intrigue, set in the Forgotten Realms port city of Westgate.</p>
<p style="font-family:'Cinzel',serif;font-style:italic;font-size:14px;color:#9a8262;margin:0;">Mind the shadows.</p>
</div>
<div>
<div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#c2a35a;margin-bottom:18px;">Explore</div>
<div style="display:flex;flex-direction:column;gap:12px;">
<div onClick="{{ goHome }}" style="cursor:pointer;font-family:'Jost',sans-serif;font-size:14.5px;color:#9a9086;" style-hover="color:#e6e0d6;">Home</div>
<div onClick="{{ goNews }}" style="cursor:pointer;font-family:'Jost',sans-serif;font-size:14.5px;color:#9a9086;" style-hover="color:#e6e0d6;">News</div>
<div onClick="{{ goGallery }}" style="cursor:pointer;font-family:'Jost',sans-serif;font-size:14.5px;color:#9a9086;" style-hover="color:#e6e0d6;">Gallery</div>
<div onClick="{{ goBlog }}" style="cursor:pointer;font-family:'Jost',sans-serif;font-size:14.5px;color:#9a9086;" style-hover="color:#e6e0d6;">Dev Blog</div>
<div onClick="{{ goRecruit }}" style="cursor:pointer;font-family:'Jost',sans-serif;font-size:14.5px;color:#9a9086;" style-hover="color:#e6e0d6;">Join the Team</div>
</div>
</div>
<div>
<div style="font-family:'Jost',sans-serif;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:#c2a35a;margin-bottom:18px;">Community</div>
<div style="display:flex;flex-direction:column;gap:12px;">
<a href="https://westgate.pw/categories" style="font-family:'Jost',sans-serif;font-size:14.5px;color:#9a9086;" style-hover="color:#e6e0d6;">Forums</a>
<a href="https://westgate.pw/wiki" style="font-family:'Jost',sans-serif;font-size:14.5px;color:#9a9086;" style-hover="color:#e6e0d6;">Wiki</a>
<a href="https://westgate.pw/register" style="font-family:'Jost',sans-serif;font-size:14.5px;color:#9a9086;" style-hover="color:#e6e0d6;">Register</a>
<a href="https://westgate.pw/wiki" style="font-family:'Jost',sans-serif;font-size:14.5px;color:#9a9086;" style-hover="color:#e6e0d6;">How to Join</a>
</div>
</div>
</div>
<div style="max-width:1240px;margin:0 auto;padding:22px 32px 40px;border-top:1px solid rgba(194,163,90,0.1);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
<div style="font-family:'Jost',sans-serif;font-size:12px;color:#7f756f;">© 2026 Shadows Over Westgate · A NWN:EE Persistent World</div>
<div style="font-family:'Jost',sans-serif;font-size:12px;color:#7f756f;">Forgotten Realms · Westgate · Sea of Fallen Stars</div>
</div>
</footer>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1280,&quot;height&quot;:860},&quot;startPage&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;home&quot;,&quot;news&quot;,&quot;blog&quot;,&quot;gallery&quot;,&quot;recruit&quot;,&quot;article&quot;],&quot;default&quot;:&quot;home&quot;,&quot;tsType&quot;:&quot;'home'|'news'|'blog'|'gallery'|'recruit'|'article'&quot;}}">
class Component extends DCLogic {
state = { page: this.props.startPage || 'home' };
go(page) {
this.setState({ page });
if (typeof window !== 'undefined') {
try { window.scrollTo({ top: 0, behavior: 'smooth' }); } catch (e) { window.scrollTo(0, 0); }
}
}
renderVals() {
const p = this.state.page;
return {
isHome: p === 'home',
isNews: p === 'news',
isBlog: p === 'blog',
isGallery: p === 'gallery',
isRecruit: p === 'recruit',
isArticle: p === 'article',
goHome: () => this.go('home'),
goArticle: () => this.go('article'),
goNews: () => this.go('news'),
goBlog: () => this.go('blog'),
goGallery: () => this.go('gallery'),
goRecruit: () => this.go('recruit'),
};
}
}
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink