537 lines
18 KiB
HTML
537 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 — Home of Shardwalker: The Mirror’s Edge</title>
|
||
<meta name="description" content="ObliStudios — Home of Shardwalker: The Mirror’s Edge. News, trailer, and updates." />
|
||
<meta property="og:title" content="ObliStudios — Shardwalker: The Mirror’s Edge" />
|
||
<meta property="og:description" content="Explore Shardwalker: The Mirror’s Edge — a dark, atmospheric adventure by ObliStudios." />
|
||
<meta property="og:type" content="website" />
|
||
<meta name="theme-color" content="#12FF9D" />
|
||
<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=Inter:wght@300;400;600;800&family=Cinzel:wght@600;800&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg: #0a0b10; /* deep space */
|
||
--bg-2: #0e1017; /* panels */
|
||
--text: #e6eef5; /* primary text */
|
||
--muted: #9aa6b2; /* secondary */
|
||
--accent: #12FF9D; /* neon shard green */
|
||
--accent-2: #00c978; /* darker green */
|
||
--shadow: 0 10px 30px rgba(0,0,0,.45);
|
||
--radius: 16px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box
|
||
}
|
||
|
||
html, body {
|
||
height: 100%
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
|
||
color: var(--text);
|
||
background: radial-gradient(1200px 600px at 75% -10%, rgba(18,255,157,.12), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(18,255,157,.08), transparent 60%), var(--bg);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px
|
||
}
|
||
|
||
/* Header */
|
||
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 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 68px
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .75rem
|
||
}
|
||
|
||
.logo {
|
||
width: 34px;
|
||
height: 34px;
|
||
filter: drop-shadow(0 0 10px rgba(18,255,157,.5))
|
||
}
|
||
|
||
.wordmark {
|
||
font-weight: 800;
|
||
letter-spacing: .2px
|
||
}
|
||
|
||
.wordmark span {
|
||
color: var(--accent)
|
||
}
|
||
|
||
nav ul {
|
||
display: flex;
|
||
gap: 22px;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0
|
||
}
|
||
|
||
nav a {
|
||
color: var(--muted);
|
||
font-weight: 600
|
||
}
|
||
|
||
nav a:hover {
|
||
color: var(--text)
|
||
}
|
||
|
||
.cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .6rem;
|
||
padding: .7rem 1rem;
|
||
border-radius: 999px;
|
||
font-weight: 700;
|
||
background: linear-gradient(135deg,var(--accent),var(--accent-2));
|
||
color: #00110a;
|
||
box-shadow: 0 6px 18px rgba(18,255,157,.25)
|
||
}
|
||
|
||
/* Mobile menu */
|
||
.menu-btn {
|
||
display: none;
|
||
background: none;
|
||
border: 0;
|
||
color: var(--text);
|
||
font-size: 1.2rem
|
||
}
|
||
|
||
@media (max-width:840px) {
|
||
nav ul {
|
||
display: none
|
||
}
|
||
|
||
.menu-btn {
|
||
display: inline-flex
|
||
}
|
||
|
||
.mobile-nav {
|
||
display: none;
|
||
background: rgba(14,16,23,.96);
|
||
border-top: 1px solid rgba(255,255,255,.06)
|
||
}
|
||
|
||
.mobile-nav a {
|
||
display: block;
|
||
padding: 16px 20px;
|
||
color: var(--muted)
|
||
}
|
||
|
||
.mobile-nav a:hover {
|
||
background: rgba(255,255,255,.03);
|
||
color: var(--text)
|
||
}
|
||
}
|
||
|
||
/* Hero */
|
||
.hero {
|
||
position: relative;
|
||
padding: 96px 0 72px;
|
||
overflow: hidden
|
||
}
|
||
|
||
.hero:before { /* subtle vignette */
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(1200px 600px at 50% -20%, rgba(18,255,157,.15), rgba(0,0,0,.0) 45%), radial-gradient(900px 500px at 30% 120%, rgba(0,0,0,.35), transparent 60%);
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
.hero-grid {
|
||
display: grid;
|
||
grid-template-columns: 1.1fr .9fr;
|
||
gap: 48px;
|
||
align-items: center
|
||
}
|
||
|
||
.eyebrow {
|
||
color: var(--accent);
|
||
font-weight: 700;
|
||
letter-spacing: .2em;
|
||
text-transform: uppercase
|
||
}
|
||
|
||
h1 {
|
||
font-family: Cinzel,Inter,serif;
|
||
font-weight: 800;
|
||
line-height: 1.05;
|
||
font-size: clamp(2.2rem, 3.5vw + 1rem, 4rem);
|
||
margin: .4rem 0 1rem
|
||
}
|
||
|
||
.lead {
|
||
font-size: 1.1rem;
|
||
color: var(--muted);
|
||
max-width: 60ch
|
||
}
|
||
|
||
.actions {
|
||
display: flex;
|
||
gap: 14px;
|
||
margin-top: 22px
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
padding: .9rem 1.15rem;
|
||
border: 1px solid rgba(255,255,255,.12);
|
||
border-radius: 12px;
|
||
font-weight: 700
|
||
}
|
||
|
||
.btn.primary {
|
||
border: none;
|
||
background: linear-gradient(135deg,var(--accent),var(--accent-2));
|
||
color: #00110a;
|
||
box-shadow: 0 12px 36px rgba(18,255,157,.25)
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: translateY(-1px)
|
||
}
|
||
|
||
.hero-art {
|
||
position: relative;
|
||
aspect-ratio: 16/16;
|
||
border-radius: var(--radius);
|
||
background: url('img/mainmenu.png') center/cover no-repeat;
|
||
box-shadow: var(--shadow);
|
||
border: 1px solid rgba(255,255,255,.06)
|
||
}
|
||
|
||
.badge {
|
||
position: absolute;
|
||
top: 16px;
|
||
left: 16px;
|
||
padding: .45rem .6rem;
|
||
border-radius: 999px;
|
||
font-size: .8rem;
|
||
font-weight: 800;
|
||
letter-spacing: .06em;
|
||
background: rgba(10,11,16,.7);
|
||
color: var(--accent);
|
||
border: 1px solid rgba(18,255,157,.35);
|
||
backdrop-filter: blur(6px)
|
||
}
|
||
|
||
@media (max-width:980px) {
|
||
.hero-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 28px
|
||
}
|
||
|
||
.hero {
|
||
padding: 80px 0 56px
|
||
}
|
||
}
|
||
|
||
/* Features */
|
||
.section {
|
||
padding: 64px 0
|
||
}
|
||
|
||
.section h2 {
|
||
font-family: Cinzel,Inter,serif;
|
||
font-size: 2rem;
|
||
margin: 0 0 12px
|
||
}
|
||
|
||
.kicker {
|
||
color: var(--muted);
|
||
margin-bottom: 22px
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3,1fr);
|
||
gap: 22px
|
||
}
|
||
|
||
.card {
|
||
background: var(--bg-2);
|
||
padding: 20px;
|
||
border-radius: var(--radius);
|
||
border: 1px solid rgba(255,255,255,.06);
|
||
box-shadow: var(--shadow)
|
||
}
|
||
|
||
.card h3 {
|
||
margin: .2rem 0 .4rem;
|
||
font-size: 1.05rem
|
||
}
|
||
|
||
.card p {
|
||
color: var(--muted);
|
||
margin: 0
|
||
}
|
||
|
||
@media (max-width:900px) {
|
||
.grid {
|
||
grid-template-columns: 1fr 1fr
|
||
}
|
||
}
|
||
|
||
@media (max-width:640px) {
|
||
.grid {
|
||
grid-template-columns: 1fr
|
||
}
|
||
}
|
||
|
||
/* Trailer / media */
|
||
.media {
|
||
display: grid;
|
||
grid-template-columns: 1.2fr .8fr;
|
||
gap: 24px;
|
||
align-items: center
|
||
}
|
||
|
||
.media .frame {
|
||
aspect-ratio: 16/9;
|
||
border-radius: var(--radius);
|
||
background: #05060a;
|
||
border: 1px solid rgba(255,255,255,.06);
|
||
box-shadow: var(--shadow);
|
||
display: grid;
|
||
place-items: center;
|
||
color: var(--muted)
|
||
}
|
||
|
||
.media .note {
|
||
color: var(--muted)
|
||
}
|
||
|
||
@media (max-width:980px) {
|
||
.media {
|
||
grid-template-columns: 1fr
|
||
}
|
||
}
|
||
|
||
/* Newsletter */
|
||
.newsletter {
|
||
background: linear-gradient(180deg, rgba(18,255,157,.06), rgba(18,255,157,.0));
|
||
border: 1px solid rgba(255,255,255,.06);
|
||
border-radius: var(--radius);
|
||
padding: 22px;
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: center
|
||
}
|
||
|
||
.newsletter input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
background: #0a0c12;
|
||
color: var(--text);
|
||
border: 1px solid rgba(255,255,255,.08);
|
||
border-radius: 10px;
|
||
padding: .8rem .9rem
|
||
}
|
||
|
||
.newsletter button {
|
||
white-space: nowrap
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
padding: 40px 0 60px;
|
||
color: var(--muted)
|
||
}
|
||
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 16px;
|
||
align-items: center
|
||
}
|
||
|
||
.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
|
||
}
|
||
|
||
/* Simple alien head mark (inline SVG usage) */
|
||
.alien {
|
||
width: 34px;
|
||
height: 34px
|
||
}
|
||
|
||
.glow {
|
||
filter: drop-shadow(0 0 10px rgba(18,255,157,.55)) drop-shadow(0 0 24px rgba(18,255,157,.2))
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="container nav" aria-label="Main">
|
||
<a href="#" class="brand" aria-label="ObliStudios Home">
|
||
<!-- Simple inline alien logo to avoid external assets -->
|
||
<svg class="alien glow" 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="#12FF9D" />
|
||
<stop offset="100%" stop-color="#00c978" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path fill="url(#g)" d="M32 6c11 0 20 8 20 20 0 12-9 22-20 22S12 38 12 26C12 14 21 6 32 6Z" />
|
||
<ellipse cx="24" cy="28" rx="7" ry="5" fill="#091016" />
|
||
<ellipse cx="40" cy="28" rx="7" ry="5" fill="#091016" />
|
||
</svg>
|
||
<div class="wordmark">Obli<span>Studios</span></div>
|
||
</a>
|
||
|
||
<nav>
|
||
<ul>
|
||
<li><a href="https://www.oblistudios.com/index.html">Home</a></li>
|
||
<li><a href="#game">Games</a></li>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
<li><a href="https://www.oblistudios.com/roadmap.html">Roadmap</a></li>
|
||
<li><a href="https://www.oblistudios.com/ASAshop.html"> ASA Shop</a></li>
|
||
<li><a herf="https://www.oblistudios.com/shardwalkershop.html">Shardwalker Shop</a></li>
|
||
|
||
</ul>
|
||
</nav>
|
||
<a class="cta" href="#game">Playtest Signup</a>
|
||
<button class="menu-btn" aria-label="Open menu" onclick="document.querySelector('.mobile-nav').style.display = (document.querySelector('.mobile-nav').style.display==='block'?'none':'block')">☰</button>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
<main id="home" class="container hero">
|
||
<div class="hero-grid">
|
||
<div>
|
||
<div class="eyebrow">Home of Shardwalker</div>
|
||
<h1>Shardwalker: <br /> <span style="color:var(--accent)">The Mirror’s Edge</span></h1>
|
||
<p class="lead">Step through the wolrd of Eidralis and master the art of shard‑switching and uncover the truth behind the Edge.</p>
|
||
<div class="actions">
|
||
<a class="btn primary" href="#game">Learn More</a>
|
||
<a class="btn" href="#trailer">Watch Trailer</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-art" role="img" aria-label="Atmospheric key art for Shardwalker">
|
||
<div class="badge">SHARDWALKER: THE MIRRORS EDGE</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<section id="game" class="container section">
|
||
<h2>About the Game</h2>
|
||
<p class="kicker">A fast, tactical, and atmospheric journey through broken worlds.</p>
|
||
<div class="grid">
|
||
<article class="card">
|
||
<h3>Shard‑Switching</h3>
|
||
<p>Phase between mirrored layers to bypass hazards, expose enemy weaknesses, and solve environmental puzzles.</p>
|
||
</article>
|
||
<article class="card">
|
||
<h3>Combat Mastery</h3>
|
||
<p>Build attunements, chain abilities, and adapt to enemy factions hunting within the Mirror’s Edge.</p>
|
||
</article>
|
||
<article class="card">
|
||
<h3>World & Lore</h3>
|
||
<p>Explore ancient structures and living biomes fractured by the Void. Each shard reveals new paths and secrets.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="trailer" class="container section">
|
||
<div class="media">
|
||
<div class="frame">
|
||
<!-- Replace the placeholder below with your YouTube/Vimeo embed -->
|
||
<span>Trailer Embed Placeholder (16:9)</span>
|
||
</div>
|
||
<div>
|
||
<h2>Watch the Trailer</h2>
|
||
<p class="note">
|
||
Drop in your trailer iframe here. Example (YouTube):
|
||
<code><iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></code>
|
||
</p>
|
||
<div class="newsletter" role="form" aria-label="Newsletter signup">
|
||
<input type="email" placeholder="Enter your email for updates" aria-label="Email address" />
|
||
<button class="btn primary" type="button">Subscribe</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about" class="container section">
|
||
<h2>About ObliStudios</h2>
|
||
<p class="kicker">We craft atmospheric, mechanics‑driven games with striking identity.</p>
|
||
<div class="grid">
|
||
<article class="card">
|
||
<h3>Indie at Heart</h3>
|
||
<p>One man team, big worlds. We prototype fast and iterate with our community.</p>
|
||
</article>
|
||
<article class="card">
|
||
<h3>Technical Artistry</h3>
|
||
<p>From dynamic lighting to systemic encounters, we push tools to serve player stories.</p>
|
||
</article>
|
||
<article class="card">
|
||
<h3>Community</h3>
|
||
<p>Join playtests, shape balance, and help chart the roadmap across shards.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<footer id="contact" class="container">
|
||
<div class="footer-grid">
|
||
<small>© <span id="y"></span> ObliStudios LLC. All rights reserved.</small>
|
||
<div class="social" aria-label="Social links">
|
||
<a href="https://twitter.com/obli_studios" aria-label="X (Twitter)">
|
||
<!-- Minimal X icon -->
|
||
<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" aria-label="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" aria-label="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>
|
||
// Year stamp
|
||
document.getElementById('y').textContent = new Date().getFullYear();
|
||
</script>
|
||
</body>
|
||
</html>
|