2025-09-19 02:33:56 -07:00
<!doctype html>
2025-04-30 23:06:58 -07:00
< html lang = "en" >
< head >
2025-09-19 02:33:56 -07:00
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< title > ObliStudios — Home of Shardwalker: The Mirror’ < / title >
< meta name = "description" content = "ObliStudios — Home of Shardwalker: The Mirror’ / >
< meta property = "og:title" content = "ObliStudios — Shardwalker: The Mirror’ / >
< meta property = "og:description" content = "Explore Shardwalker: The Mirror’ / >
< 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" >
2025-04-30 23:06:58 -07:00
< style >
2025-09-19 02:33:56 -07:00
: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;
2025-04-30 23:06:58 -07:00
}
2025-09-19 02:33:56 -07:00
* {
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)
2025-04-30 23:06:58 -07:00
}
2025-05-04 10:05:42 -07:00
2025-09-19 02:33:56 -07:00
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
2025-05-04 10:05:42 -07:00
}
2025-09-19 02:33:56 -07:00
@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 {
2025-05-04 10:05:42 -07:00
display: flex;
2025-09-19 02:33:56 -07:00
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
2025-05-04 10:05:42 -07:00
}
2025-09-19 02:33:56 -07:00
.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/10;
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(18,255,157,.18), rgba(18,255,157,.05) 30%, rgba(0,0,0,.2) 70%), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80& w=1600& auto=format& fit=crop') 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);
2025-05-04 10:05:42 -07:00
padding: 20px;
2025-09-19 02:33:56 -07:00
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;
2025-05-04 10:05:42 -07:00
border-radius: 8px;
2025-09-19 02:33:56 -07:00
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
2025-05-04 10:05:42 -07:00
}
2025-09-19 02:33:56 -07:00
.glow {
filter: drop-shadow(0 0 10px rgba(18,255,157,.55)) drop-shadow(0 0 24px rgba(18,255,157,.2))
2025-05-04 10:05:42 -07:00
}
2025-04-30 23:06:58 -07:00
< / style >
< / head >
< body >
2025-09-19 02:33:56 -07:00
< 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 = "#home" > Home< / a > < / li >
< li > < a href = "#game" > Games< / a > < / li >
< li > < a href = "#about" > About< / a > < / li >
< li > < a href = "#contact" > Contact< / a > < / li >
2025-09-19 02:44:15 -07:00
< a href = "https://www.oblistudios.com/roadmap.html" > Roadmap< / a >
2025-09-19 02:33:56 -07:00
< / 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’ < / span > < / h1 >
2025-09-19 02:44:15 -07:00
< p class = "lead" > Step through the wolrd of Laim and master the art of shard‑ < / p >
2025-09-19 02:33:56 -07:00
< div class = "actions" >
< a class = "btn primary" href = "#game" > Learn More< / a >
< a class = "btn" href = "#trailer" > Watch Trailer< / a >
2025-05-04 10:05:42 -07:00
< / div >
< / div >
2025-09-19 02:33:56 -07:00
< div class = "hero-art" role = "img" aria-label = "Atmospheric key art for Shardwalker" >
< div class = "badge" > FEATURED TITLE< / div >
< / div >
< / div >
2025-04-30 23:06:58 -07:00
< / main >
2025-09-19 02:33:56 -07:00
< 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‑ < / 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’ < / 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‑ < / p >
< div class = "grid" >
< article class = "card" >
< h3 > Indie at Heart< / h3 >
< p > Small 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. 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 = "#" 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 = "#" 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 >
2025-04-30 23:06:58 -07:00
< / footer >
2025-09-19 02:33:56 -07:00
< script >
// Year stamp
document.getElementById('y').textContent = new Date().getFullYear();
< / script >
2025-04-30 23:06:58 -07:00
< / body >
< / html >
