mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:11:09 -05:00
161 lines
4.2 KiB
HTML
161 lines
4.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>PARK CLOSED</title>
|
|
<style>
|
|
:root{
|
|
--bg-wood:#6b4b2a;
|
|
--plank-dark:#5a3f28;
|
|
--plank-light:#8b5e3c;
|
|
--text:#f7f3ee;
|
|
--accent:#d9534f;
|
|
}
|
|
@media (prefers-color-scheme:dark){
|
|
:root{
|
|
--bg-wood:#2b1d14;
|
|
--plank-dark:#24170f;
|
|
--plank-light:#3b2a1f;
|
|
--text:#fff8f2;
|
|
--accent:#ff6b6b;
|
|
}
|
|
}
|
|
|
|
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
|
|
/* Boarded-up background using repeating gradients to simulate planks and nails */
|
|
body{
|
|
min-height:100%;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
background:
|
|
radial-gradient(ellipse at 20% 10%, rgba(0,0,0,0.08) 0%, transparent 40%),
|
|
repeating-linear-gradient(90deg, var(--plank-dark) 0 60px, var(--plank-light) 60px 120px),
|
|
linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02));
|
|
color:var(--text);
|
|
padding:24px;
|
|
}
|
|
|
|
.boarded {
|
|
width:100%;
|
|
max-width:1100px;
|
|
padding:48px;
|
|
border-radius:8px;
|
|
text-align:center;
|
|
position:relative;
|
|
box-shadow: 0 12px 40px rgba(2,6,23,0.45);
|
|
overflow:hidden;
|
|
}
|
|
|
|
/* darkened vignette to feel abandoned */
|
|
.boarded::before{
|
|
content:"";
|
|
position:absolute;
|
|
inset:0;
|
|
background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.32));
|
|
pointer-events:none;
|
|
}
|
|
|
|
/* Big roughed-up title */
|
|
h1 {
|
|
margin:0;
|
|
font-size:clamp(48px, 12vw, 180px);
|
|
line-height:0.9;
|
|
letter-spacing:6px;
|
|
font-weight:900;
|
|
text-transform:uppercase;
|
|
color:var(--text);
|
|
text-shadow:
|
|
0 2px 0 rgba(0,0,0,0.35),
|
|
0 8px 30px rgba(0,0,0,0.45);
|
|
transform:skewX(-6deg);
|
|
display:inline-block;
|
|
padding:12px 28px;
|
|
background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255,255,255,0.02));
|
|
border-radius:6px;
|
|
box-decoration-break: clone;
|
|
}
|
|
|
|
/* Painted-on look for the board text */
|
|
.stencil {
|
|
position:relative;
|
|
display:inline-block;
|
|
color:var(--text);
|
|
background:
|
|
repeating-linear-gradient(
|
|
90deg,
|
|
rgba(0,0,0,0.12) 0 2px,
|
|
rgba(255,255,255,0.02) 2px 4px
|
|
);
|
|
-webkit-mask-image: linear-gradient(#000, #000);
|
|
}
|
|
|
|
p.lead{
|
|
margin:20px 0 0;
|
|
font-size:18px;
|
|
color:rgba(255,255,255,0.85);
|
|
}
|
|
|
|
.actions{
|
|
margin-top:26px;
|
|
display:flex;
|
|
gap:12px;
|
|
justify-content:center;
|
|
align-items:center;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.btn {
|
|
background:var(--accent);
|
|
color:white;
|
|
padding:12px 20px;
|
|
border-radius:8px;
|
|
text-decoration:none;
|
|
font-weight:700;
|
|
box-shadow:0 8px 20px rgba(0,0,0,0.32);
|
|
}
|
|
|
|
.link {
|
|
color:rgba(255,255,255,0.9);
|
|
text-decoration:underline;
|
|
font-weight:600;
|
|
}
|
|
|
|
/* decorative nails */
|
|
.nail{
|
|
width:14px;height:14px;border-radius:50%;
|
|
position:absolute;background:radial-gradient(circle at 35% 30%, #fff8, #0003 40%);
|
|
box-shadow:0 2px 6px rgba(0,0,0,0.6);
|
|
transform:translate(-50%,-50%);
|
|
mix-blend-mode:multiply;
|
|
opacity:0.9;
|
|
}
|
|
|
|
/* responsive smaller paddings */
|
|
@media (max-width:720px){
|
|
.boarded{padding:28px}
|
|
p.lead{font-size:15px}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="boarded" role="main" aria-labelledby="page-title">
|
|
<!-- decorative nails placed around -->
|
|
<div class="nail" style="left:8%;top:12%;"></div>
|
|
<div class="nail" style="left:92%;top:14%;"></div>
|
|
<div class="nail" style="left:6%;top:86%;"></div>
|
|
<div class="nail" style="left:94%;top:84%;"></div>
|
|
|
|
<h1 id="page-title" class="stencil">PARK CLOSED</h1>
|
|
|
|
<p class="lead">We're sorry — this page is temporarily closed.</p>
|
|
|
|
<div class="actions" role="group" aria-label="navigation">
|
|
<a class="btn" href="/">Home</a>
|
|
<a class="link" href="/search/">Search</a>
|
|
<a class="link" href="/contact/">Contact Us</a>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html> |