SOIKA – Private Artistic & Documentary Photography Project

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>404 — Lost & Found | soika.me</title>
<style>
:root{
--bg:#0b1020; --glass: rgba(255,255,255,0.06);
--accent:#7be0f7; --accent2:#8a6cff;
--muted: rgba(255,255,255,0.65);
--mono: 'SFMono-Regular', ui-monospace, Menlo, monospace;
}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:#0b1020; color:#e8f6ff;}

/* starfield */
.stars {position:fixed;inset:0;pointer-events:none;background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.06) 0.5px, transparent 0.7px), radial-gradient(circle at 60% 40%, rgba(255,255,255,0.04) 0.6px, transparent 0.9px); background-size: 100% 100%, 500% 500%; opacity:0.9; animation: twinkle 8s linear infinite;}
@keyframes twinkle{0%{opacity:.9}50%{opacity:.7}100%{opacity:.9}}

.wrap{min-height:100vh;display:grid;place-items:center;padding:40px}
.card{width:min(1100px,94%);display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}

/* left */
.hero{padding:36px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow: 0 10px 30px rgba(2,6,23,0.6);backdrop-filter: blur(6px);}

.big{font-weight:800;font-size:clamp(48px,9vw,120px);line-height:0.88;letter-spacing:-4px;position:relative}
/* glitch */
.glitch{position:relative;display:inline-block}
.glitch::before, .glitch::after{content:attr(data-text);position:absolute;left:0;top:0;}
.glitch::before{color:var(--accent);mix-blend-mode:screen;clip-path:polygon(0 0,100% 0,100% 33%,0 33%);transform:translate(-6px,-3px);opacity:.9}
.glitch::after{color:var(--accent2);mix-blend-mode:screen;clip-path:polygon(0 66%,100% 66%,100% 100%,0 100%);transform:translate(6px,3px);opacity:.9}
@keyframes jitter{0%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,2px)}80%{transform:translate(1px,-2px)}100%{transform:translate(0,0)}}
.glitch{animation:jitter 2.6s infinite}

.sub{font-size:18px;color:var(--muted);margin-top:8px}

.explain{margin-top:18px;color:rgba(255,255,255,0.86);font-size:15px}

/* search + actions */
.controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent2));padding:12px 16px;border-radius:12px;color:#021224;font-weight:700;text-decoration:none;box-shadow:0 8px 20px rgba(124,178,255,0.08);}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:12px 14px;border-radius:12px;color:var(--muted);text-decoration:none}

/* right pane — scene */
.scene{display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.badge{font-family:var(--mono);font-size:13px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.02);display:inline-block;color:var(--muted)}

.ship{position:relative;height:260px;display:flex;align-items:center;justify-content:center}
.rocket{width:160px;height:160px;filter:drop-shadow(0 10px 30px rgba(12,22,50,0.6));transform-origin:center;animation: floaty 4s ease-in-out infinite}
@keyframes floaty{0%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}100%{transform:translateY(0) rotate(-3deg)}}

.orb{position:absolute;right:18px;top:18px;width:60px;height:60px;border-radius:999px;background:linear-gradient(180deg,var(--accent),transparent);filter:blur(18px);opacity:.9}

.hint{color:var(--muted);font-size:13px}

footer{margin-top:18px;color:rgba(255,255,255,0.45);font-size:13px}

/* responsive */
@media (max-width:900px){.card{grid-template-columns:1fr;}.scene{order:-1}}
</style>
</head>
<body>
<div class="stars" aria-hidden></div>
<div class="wrap">
<div class="card" role="main">
<section class="hero" aria-labelledby="title">
<div class="big">
<span class="glitch" data-text="404">404</span>
</div>
<div class="sub">Lost page — found style.</div>

<p class="explain">Sorry, this page can’t be found. Maybe it’s drifting through space or simply never existed. Either way, here are some safe landing spots:</p>

<div class="controls" role="navigation" aria-label="Quick links">
<a href="https://soika.me/" class="btn">Home</a>
<a href="https://soika.me/portfolio" class="ghost">Portfolio</a>
<a href="https://soika.me/contact" class="ghost">Contact</a>
<a href="https://soika.me/about" class="ghost">About</a>
</div>

<footer>Error code: 404 · If the problem persists, <a href="https://soika.me/contact" style="color:var(--accent);text-decoration:underline">get in touch</a>.</footer>
</section>

<aside class="scene" aria-hidden="true">
<div style="display:flex;justify-content:space-between;align-items:center">
<span class="badge">PATH: /missing</span>
<span class="badge">TIME: <span id="time">—</span></span>
</div>

<div style="padding:8px 6px;border-radius:12px;background:rgba(255,255,255,0.01);">
<div class="hint">Tip: Click Home to teleport back safely.</div>
</div>
</aside>
</div>
</div>

↑Back to Top