534 lines
18 KiB
HTML
534 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>ObliStudios · Roadmap — Shardwalker</title>
|
||
<meta name="description" content="ObliStudios roadmap for Shardwalker: milestones, phases, and status." />
|
||
<meta name="theme-color" content="#10e39a" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<!-- Inter for UI, Cinzel for headings (optional aesthetic) -->
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Cinzel:wght@600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
/* Brandable palette */
|
||
--bg: #0a0b10;
|
||
--panel: #111421;
|
||
--panel-2: #0e1220;
|
||
--text: #e8eef6;
|
||
--muted: #9aa6b2;
|
||
--line: #21283a;
|
||
--accent: #10e39a;
|
||
--accent-2: #0dc07f;
|
||
--planned: #3b82f6;
|
||
--progress: #f59e0b;
|
||
--done: #10b981;
|
||
--radius: 14px;
|
||
--shadow: 0 12px 28px rgba(0,0,0,.35);
|
||
--ring: 0 0 0 3px rgba(16, 227, 154, .25);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box
|
||
}
|
||
|
||
html, body {
|
||
height: 100%
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font: 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||
color: var(--text);
|
||
background: radial-gradient(1000px 500px at 80% -10%, rgba(16,227,154,.08), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(16,227,154,.06), transparent 60%), var(--bg);
|
||
}
|
||
|
||
/* Layout helpers */
|
||
.container {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 0 20px
|
||
}
|
||
|
||
.stack {
|
||
display: grid;
|
||
gap: 22px
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none
|
||
}
|
||
|
||
a:focus-visible {
|
||
outline: none;
|
||
box-shadow: var(--ring)
|
||
}
|
||
|
||
/* Header / Nav */
|
||
header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
backdrop-filter: saturate(180%) blur(8px);
|
||
background: rgba(10,11,16,.6);
|
||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||
}
|
||
|
||
.nav {
|
||
height: 68px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
gap: .65rem;
|
||
align-items: center
|
||
}
|
||
|
||
.brand svg {
|
||
width: 30px;
|
||
height: 30px;
|
||
filter: drop-shadow(0 0 10px rgba(16,227,154,.4));
|
||
}
|
||
|
||
.wordmark {
|
||
font-weight: 800;
|
||
letter-spacing: .2px
|
||
}
|
||
|
||
.wordmark em {
|
||
color: var(--accent);
|
||
font-style: normal
|
||
}
|
||
|
||
.links {
|
||
display: flex;
|
||
gap: 18px;
|
||
color: var(--muted);
|
||
font-weight: 600
|
||
}
|
||
|
||
.links a:hover {
|
||
color: var(--text)
|
||
}
|
||
|
||
.cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
padding: .6rem .9rem;
|
||
border-radius: 999px;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg,var(--accent),var(--accent-2));
|
||
color: #02140d;
|
||
box-shadow: 0 8px 22px rgba(16,227,154,.25);
|
||
}
|
||
|
||
/* Hero */
|
||
.hero {
|
||
padding: 56px 0 24px;
|
||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||
background: linear-gradient(180deg, rgba(16,227,154,.05), rgba(16,227,154,0) 60%);
|
||
}
|
||
|
||
.eyebrow {
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: .22em;
|
||
font-weight: 800;
|
||
}
|
||
|
||
h1 {
|
||
margin: .35rem 0 .6rem;
|
||
font-family: Cinzel, Inter, serif;
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
font-size: clamp(2rem, 1rem + 3.2vw, 3.2rem);
|
||
}
|
||
|
||
.lead {
|
||
color: var(--muted);
|
||
max-width: 70ch
|
||
}
|
||
|
||
.legend {
|
||
margin-top: 16px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
color: var(--muted);
|
||
font-size: .95rem;
|
||
}
|
||
|
||
.dot {
|
||
display: inline-flex;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
margin-right: 8px
|
||
}
|
||
|
||
.dot.planned {
|
||
background: var(--planned)
|
||
}
|
||
|
||
.dot.progress {
|
||
background: var(--progress)
|
||
}
|
||
|
||
.dot.done {
|
||
background: var(--done)
|
||
}
|
||
|
||
/* Timeline */
|
||
.timeline {
|
||
position: relative;
|
||
display: grid;
|
||
gap: 28px;
|
||
padding: 42px 0 64px
|
||
}
|
||
|
||
.timeline:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 22px;
|
||
width: 2px;
|
||
background: var(--line);
|
||
}
|
||
|
||
.phase {
|
||
position: relative;
|
||
display: grid;
|
||
grid-template-columns: 46px 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.node {
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 999px;
|
||
display: grid;
|
||
place-items: center;
|
||
background: var(--panel-2);
|
||
border: 1px solid rgba(255,255,255,.08);
|
||
box-shadow: 0 6px 16px rgba(0,0,0,.35);
|
||
}
|
||
|
||
.node svg {
|
||
width: 22px;
|
||
height: 22px
|
||
}
|
||
|
||
.card {
|
||
background: var(--panel);
|
||
border: 1px solid rgba(255,255,255,.08);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
padding: 18px 18px 12px;
|
||
}
|
||
|
||
.card h3 {
|
||
margin: .1rem 0 .5rem;
|
||
font-family: Cinzel, Inter, serif;
|
||
letter-spacing: .2px;
|
||
}
|
||
|
||
.meta {
|
||
color: var(--muted);
|
||
font-size: .95rem;
|
||
margin: -2px 0 10px
|
||
}
|
||
|
||
.chips {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-top: 8px
|
||
}
|
||
|
||
.chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .4rem;
|
||
padding: .35rem .55rem;
|
||
border-radius: 10px;
|
||
font-weight: 700;
|
||
font-size: .82rem;
|
||
border: 1px solid rgba(255,255,255,.08);
|
||
background: #0c1220;
|
||
}
|
||
|
||
.chip.planned {
|
||
background: rgba(59,130,246,.1);
|
||
border-color: rgba(59,130,246,.35);
|
||
color: #c9dafd
|
||
}
|
||
|
||
.chip.progress {
|
||
background: rgba(245,158,11,.1);
|
||
border-color: rgba(245,158,11,.35);
|
||
color: #ffe2b2
|
||
}
|
||
|
||
.chip.done {
|
||
background: rgba(16,185,129,.12);
|
||
border-color: rgba(16,185,129,.35);
|
||
color: #c6f3e3
|
||
}
|
||
|
||
ul.feature-list {
|
||
list-style: none;
|
||
padding-left: 0;
|
||
margin: 0
|
||
}
|
||
|
||
ul.feature-list li {
|
||
position: relative;
|
||
padding-left: 26px;
|
||
margin: .28rem 0;
|
||
color: var(--text);
|
||
}
|
||
|
||
ul.feature-list li:before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: .45rem;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
box-shadow: 0 0 0 3px rgba(16,227,154,.18);
|
||
}
|
||
|
||
ul.feature-list li.planned:before {
|
||
background: var(--planned);
|
||
box-shadow: none
|
||
}
|
||
|
||
ul.feature-list li.progress:before {
|
||
background: var(--progress);
|
||
box-shadow: none
|
||
}
|
||
|
||
ul.feature-list li.done:before {
|
||
background: var(--done);
|
||
box-shadow: none
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
padding: 40px 0 64px;
|
||
color: var(--muted);
|
||
border-top: 1px solid rgba(255,255,255,.06);
|
||
}
|
||
|
||
.foot {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.social a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 8px;
|
||
background: #0a0c12;
|
||
border: 1px solid rgba(255,255,255,.06);
|
||
margin-left: 8px;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width:720px) {
|
||
.timeline:before {
|
||
left: 18px
|
||
}
|
||
|
||
.phase {
|
||
grid-template-columns: 40px 1fr
|
||
}
|
||
|
||
.node {
|
||
width: 40px;
|
||
height: 40px
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Header -->
|
||
<header>
|
||
<div class="container nav" aria-label="Main">
|
||
<a class="brand" href="#" aria-label="ObliStudios Home">
|
||
<!-- Minimal alien mark -->
|
||
<svg viewBox="0 0 64 64" aria-hidden="true" role="img">
|
||
<defs>
|
||
<linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stop-color="#10e39a" />
|
||
<stop offset="100%" stop-color="#0dc07f" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path fill="url(#g)" d="M32 6c11 0 20 8 20 20s-9 22-20 22S12 38 12 26 21 6 32 6Z" />
|
||
<ellipse cx="24" cy="28" rx="7" ry="5" fill="#06090f" />
|
||
<ellipse cx="40" cy="28" rx="7" ry="5" fill="#06090f" />
|
||
</svg>
|
||
<div class="wordmark">Obli<strong><em>Studios</em></strong></div>
|
||
</a>
|
||
<nav class="links" aria-label="Primary">
|
||
<a href="https://www.oblistudios.com">Home</a>
|
||
</nav>
|
||
<a class="cta" href="#subscribe">Follow updates</a>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hero -->
|
||
<section class="hero">
|
||
<div class="container stack">
|
||
<span class="eyebrow">Roadmap</span>
|
||
<h1>Shardwalker: The Mirror’s Edge</h1>
|
||
<p class="lead">
|
||
Track our progress across phases—from core systems to launch preparation. Status chips indicate what’s
|
||
planned, in progress, or completed.
|
||
</p>
|
||
<div class="legend" role="list" aria-label="Status Legend">
|
||
<span role="listitem"><span class="dot planned"></span>Planned</span>
|
||
<span role="listitem"><span class="dot progress"></span>In Progress</span>
|
||
<span role="listitem"><span class="dot done"></span>Done</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Timeline -->
|
||
<main class="container timeline" aria-labelledby="roadmap">
|
||
<h2 id="roadmap" class="sr-only" style="position:absolute;left:-9999px;">Roadmap timeline</h2>
|
||
|
||
<!-- Phase 1 -->
|
||
<article class="phase">
|
||
<div class="node" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2">
|
||
<circle cx="12" cy="12" r="8" />
|
||
</svg>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Phase 1: Core Systems <span class="meta">(Now–Q3 2026)</span></h3>
|
||
<div class="chips">
|
||
<span class="chip progress">In Progress</span>
|
||
</div>
|
||
<ul class="feature-list">
|
||
<li class="progress">Shard Core Mechanic (Shard-Switching & Attunement)</li>
|
||
<li class="progress">Basic Combat Loop (PvE AI + Abilities)</li>
|
||
<li class="progress">Prototype PvP Mode</li>
|
||
<li class="progress">Environmental Interaction / Puzzle Drafts</li>
|
||
<li class="progress">UI/UX Exploration (HUD, Menus, Codex)</li>
|
||
<li class="planned">Open Alpha Signups</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Phase 2 -->
|
||
<article class="phase">
|
||
<div class="node" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#a9b4c2" stroke-width="2">
|
||
<rect x="6" y="6" width="12" height="12" rx="2" />
|
||
</svg>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Phase 2: Campaign & PvP Integration <span class="meta">(Q4 2026)</span></h3>
|
||
<div class="chips">
|
||
<span class="chip progress">In Progress</span>
|
||
<span class="chip planned">Planned</span>
|
||
</div>
|
||
<ul class="feature-list">
|
||
<li class="planned">Solo Campaign Chapter 1</li>
|
||
<li class="planned">First Arena PvP Mode</li>
|
||
<li class="planned">Multiplayer Backend Integration (Steam / EOS)</li>
|
||
<li class="planned">Boss Encounter Design</li>
|
||
<li class="planned">Invite-Only Alpha PvP Test</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Phase 3 -->
|
||
<article class="phase">
|
||
<div class="node" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#a9b4c2" stroke-width="2">
|
||
<polygon points="12 5 19 19 5 19" />
|
||
</svg>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Phase 3: Polish & Scale <span class="meta">(Q1 2027)</span></h3>
|
||
<div class="chips">
|
||
<span class="chip progress">In Progress</span>
|
||
<span class="chip planned">Planned</span>
|
||
</div>
|
||
<ul class="feature-list">
|
||
<li class="planned">Visual Effects, Animations, and Polish</li>
|
||
<li class="planned">Inventory / Gear / Character Progression</li>
|
||
<li class="planned">Cross-Shard Synergy System</li>
|
||
<li class="planned">Leaderboards + Matchmaking Systems</li>
|
||
<li class="planned">Public PvP Alpha</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Phase 4 -->
|
||
<article class="phase">
|
||
<div class="node" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#a9b4c2" stroke-width="2">
|
||
<path d="M3 12h18M12 3v18" />
|
||
</svg>
|
||
</div>
|
||
<div class="card">
|
||
<h3>Phase 4: Marketing & Launch Prep <span class="meta">(Q2 2027)</span></h3>
|
||
<div class="chips">
|
||
<span class="chip progress">In Progress</span>
|
||
<span class="chip planned">Planned</span>
|
||
</div>
|
||
<ul class="feature-list">
|
||
<li class="planned">Steam Page Live</li>
|
||
<li class="planned">Demo Build / Free Prologue</li>
|
||
<li class="planned">Content Creator Outreach</li>
|
||
<li class="planned">Closed Beta Signups</li>
|
||
<li class="planned">Feedback-driven balance iteration</li>
|
||
</ul>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="container foot">
|
||
<small>© <span id="y"></span> ObliStudios LLC. All rights reserved.</small>
|
||
<div class="social" id="subscribe" aria-label="Social links">
|
||
<a href="https://twitter.com/obli_studios" title="Follow on X (Twitter)">
|
||
<!-- simple X mark -->
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><path d="M3 3l18 18M21 3L3 21" /></svg>
|
||
</a>
|
||
<a href="https://discord.gg/ErRyqwKWfB" title="Discord">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><circle cx="12" cy="12" r="9" /></svg>
|
||
</a>
|
||
<a href="https://www.youtube.com/channel/UCcCZJy3AUMyZN8rFd2GpWNg" title="YouTube">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2"><polygon points="10,8 16,12 10,16" /></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
document.getElementById('y').textContent = new Date().getFullYear();
|
||
</script>
|
||
</body>
|
||
</html>
|