archvillainetteandClaude Opus 5
0705b0100e
Throwaway prototype backing issue #49. Two pages sharing one shell (index.html outdoors, forum.html indoors) plus the rejected ledger-frame option (a-ledger.html) kept for comparison. Not for merge. Values here are candidates, not tokens. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
106 lines
5.7 KiB
HTML
106 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Westgate — outdoors</title>
|
|
<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@600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="shell.css">
|
|
<style>
|
|
/* showcase-only furniture: lives on the home page, nowhere else */
|
|
.horizon{position:relative;min-height:440px;display:flex;flex-direction:column;
|
|
justify-content:flex-end;padding:5rem var(--rail) 3rem;overflow:hidden;
|
|
background:
|
|
radial-gradient(70% 55% at 50% 100%, rgba(200,176,138,.16), transparent 70%),
|
|
radial-gradient(90% 70% at 50% 100%, rgba(53,30,40,.85), transparent 72%),
|
|
linear-gradient(180deg,#07060a 0%, #0d0b11 55%, #16121a 100%)}
|
|
.skyline{position:absolute;left:0;right:0;bottom:0;height:190px;display:flex;
|
|
align-items:flex-end;gap:6px;padding:0 1rem;opacity:.92}
|
|
.skyline b{display:block;background:#06050880;
|
|
border-top:1px solid rgba(140,143,151,.10);box-shadow:0 -1px 0 rgba(0,0,0,.9)}
|
|
/* One Rail: the hero sits on the same 3-column grid as the plaques below,
|
|
so its right edge lands on a shared grid line — a column, not an inset. */
|
|
.horizon .inner{position:relative;display:grid;
|
|
grid-template-columns:repeat(3,1fr);column-gap:1px}
|
|
.horizon .inner > *{grid-column:1 / span 2}
|
|
.horizon h1{font-size:3.2rem;letter-spacing:.03em;line-height:1.08}
|
|
.horizon p{color:var(--ink-muted);margin-top:1rem}
|
|
.cta{display:flex;gap:.9rem;margin-top:1.8rem}
|
|
/* plaques divided by rules that fade top and bottom, not a hard grid */
|
|
.band{display:grid;grid-template-columns:repeat(3,1fr)}
|
|
.plaque{background:linear-gradient(180deg,#191419,#120f14);
|
|
padding:1.6rem var(--rail);position:relative}
|
|
.plaque + .plaque::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
|
|
background:linear-gradient(180deg,transparent,rgba(194,163,90,.28),transparent)}
|
|
.plaque h3{font-size:1.05rem;letter-spacing:.05em;margin:.7rem 0 .5rem}
|
|
.plaque p{font-size:.9rem;color:var(--dust);margin:0}
|
|
.dispatches{padding:2.5rem var(--rail);background:var(--crypt);
|
|
border-top:0}
|
|
.dispatches .lead{display:flex;justify-content:space-between;align-items:baseline;
|
|
margin-bottom:.9rem}
|
|
.dispatches a.more{font-family:Cinzel,serif;font-size:.74rem;letter-spacing:.14em;
|
|
text-transform:uppercase;text-decoration:none}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="tag">Outdoors — showcase density (--fit: 1)</div>
|
|
<div class="page">
|
|
|
|
<header class="lintel">
|
|
<a class="mark" href="index.html">Shadows Over Westgate</a>
|
|
<nav>
|
|
<a href="index.html" aria-current="page">The City</a>
|
|
<a href="forum.html">Forum</a>
|
|
<a href="forum.html">Archive</a>
|
|
<a href="forum.html">Enter</a>
|
|
</nav>
|
|
<div class="rivets"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
|
|
</header>
|
|
|
|
<div class="status"><span class="lamp"></span> The gates are open. Fourteen souls walk the city tonight.</div>
|
|
|
|
<section class="horizon">
|
|
<div class="skyline">
|
|
<b style="width:5%;height:52%"></b><b style="width:3%;height:74%"></b><b style="width:7%;height:38%"></b>
|
|
<b style="width:4%;height:88%"></b><b style="width:6%;height:46%"></b><b style="width:3%;height:96%"></b>
|
|
<b style="width:8%;height:34%"></b><b style="width:5%;height:66%"></b><b style="width:4%;height:44%"></b>
|
|
<b style="width:9%;height:28%"></b><b style="width:3%;height:80%"></b><b style="width:6%;height:40%"></b>
|
|
<b style="width:4%;height:58%"></b><b style="width:7%;height:32%"></b><b style="width:5%;height:70%"></b>
|
|
<b style="width:3%;height:50%"></b><b style="width:8%;height:36%"></b><b style="width:4%;height:62%"></b>
|
|
</div>
|
|
<div class="inner">
|
|
<div class="label">A gothic-fantasy roleplay city</div>
|
|
<h1>The lamps are lit.<br>No one is innocent.</h1>
|
|
<p>Renaissance stone, clockwork and lightning, and a court that has ruled from behind the shutters for four hundred years. You are already compromised. Decide what it bought you.</p>
|
|
<div class="cta">
|
|
<a class="btn" href="forum.html">Enter the city</a>
|
|
<a class="btn dull" href="forum.html">Read the archive</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="band">
|
|
<div class="plaque"><div class="label dull">Decadence</div><h3>The Court</h3><p>Houses, favours, and debts that outlive the people who signed them.</p></div>
|
|
<div class="plaque"><div class="label dull">Decay</div><h3>The Wards</h3><p>Candlewharf, Ashgate, the Foundry. Gaslight where the money is, dark where it is not.</p></div>
|
|
<div class="plaque"><div class="label dull">Machinery</div><h3>The Guild</h3><p>Clockwork, steam, and the new lightning — sold to anyone who can pay the interest.</p></div>
|
|
</section>
|
|
|
|
<section class="dispatches">
|
|
<div class="lead">
|
|
<div class="label">Latest dispatches</div>
|
|
<a class="more" href="forum.html">All entries →</a>
|
|
</div>
|
|
<div class="fade-rule" style="margin-bottom:1rem"></div>
|
|
<div class="ledger framed">
|
|
<div class="row"><a class="t" href="forum.html">The Ashgate Concession</a><span class="m">Ledgerkeeper</span><span class="n">41</span><span class="d">2h</span></div>
|
|
<div class="row"><a class="t" href="forum.html">On the matter of the second seal</a><span class="m">V. Marrow</span><span class="n">17</span><span class="d">5h</span></div>
|
|
<div class="row" style="border:0"><a class="t" href="forum.html">Petition: the widow at Candlewharf</a><span class="m">House Verrine</span><span class="n">63</span><span class="d">1d</span></div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="foundation"><span>Westgate</span><span>Est. 1114 · the record is kept</span></footer>
|
|
</div>
|
|
</body>
|
|
</html>
|