48 lines
2.5 KiB
HTML
48 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Newbury Nights</title>
|
|
<style>
|
|
:root{ --ink:#0a0c14; --mist:#c7ccd9; --mist-dim:#6b7184; --blue:#51EAF1;
|
|
--red:#FF2678; --yellow:#FFF35D; --haze:rgba(199,204,217,0.08); }
|
|
*{ box-sizing:border-box; }
|
|
html,body{ margin:0; min-height:100%; background:var(--ink); color:var(--mist);
|
|
font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace; }
|
|
body{ display:flex; flex-direction:column; align-items:center; justify-content:center;
|
|
min-height:100vh; text-align:center; padding:24px;
|
|
background:radial-gradient(120% 80% at 50% 0%, #14182a 0%, var(--ink) 60%); }
|
|
.sub{ font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--mist-dim);
|
|
margin-bottom:18px; }
|
|
h1{ font-size:clamp(34px,11vw,68px); margin:0; font-weight:600; color:#fff; line-height:0.95;
|
|
letter-spacing:-0.01em; }
|
|
h1 .n2{ display:block; font-style:italic; color:var(--blue); }
|
|
.lures{ display:flex; gap:10px; justify-content:center; margin:22px 0 6px; }
|
|
.lures i{ width:14px; height:14px; border-radius:50%; display:block; }
|
|
.lures .r{ background:var(--red); box-shadow:0 0 12px var(--red); }
|
|
.lures .b{ background:var(--blue); box-shadow:0 0 12px var(--blue); }
|
|
.lures .y{ background:var(--yellow); box-shadow:0 0 12px var(--yellow); }
|
|
p{ max-width:34ch; color:var(--mist-dim); font-size:13px; line-height:1.6; }
|
|
.actions{ display:flex; flex-direction:column; gap:10px; margin-top:24px; width:min(280px,80vw); }
|
|
a.btn{ text-decoration:none; font-size:13px; letter-spacing:0.16em; text-transform:uppercase;
|
|
padding:15px 24px; border-radius:2px; }
|
|
a.primary{ background:var(--mist); color:var(--ink); }
|
|
a.ghost{ background:transparent; color:var(--mist); border:1px solid var(--haze); }
|
|
footer{ margin-top:36px; font-size:9px; letter-spacing:0.14em; color:#3a3f4f; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sub">A spiritual successor · fan tribute</div>
|
|
<h1>Newbury<span class="n2">Nights</span></h1>
|
|
<div class="lures"><i class="r"></i><i class="b"></i><i class="y"></i></div>
|
|
<p>The town doesn't sleep after dark. Raise your phone, lure the spirits by colour,
|
|
and catch them before the haunt takes hold.</p>
|
|
<div class="actions">
|
|
<a class="btn primary" href="/hunt">Begin the hunt</a>
|
|
<a class="btn ghost" href="/#about">About this tribute</a>
|
|
</div>
|
|
<footer>Fan-made tribute. Not affiliated with or endorsed by the LEGO Group.</footer>
|
|
</body>
|
|
</html>
|