index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Idiots With Knifes — Indie Game Studio</title>
<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=Archivo:wght@400;500;600;700;800&family=Kalam:wght@400;700&family=Permanent+Marker&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<style>
  :root{
    --bg: #0a0a0a;
    --bg2: #111;
    --bg3: #1a1a1a;
    --white: #f0f0f0;
    --grey: #888;
    --grey-dark: #444;
    --red: #e00;
    --border: #2a2a2a;
    --card: #141414;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }

  body{
    margin:0;
    background: var(--bg);
    color: var(--white);
    font-family: 'Space Mono', monospace;
    font-size: 15px;
    line-height: 1.6;
  }

  h1,h2,h3{ margin:0; }
  .hand{ font-family: 'Permanent Marker', cursive; font-weight:400; }

  a{ color: inherit; }
  :focus-visible{ outline: 2px solid var(--white); outline-offset: 3px; }

  .wrap{ max-width: 980px; margin: 0 auto; padding: 0 24px; }

  /* NAV */
  .nav{
    padding: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky; top:0; z-index:50;
  }
  .nav-inner{
    max-width: 980px; margin:0 auto; padding: 18px 24px;
    display:flex; align-items:center; justify-content: space-between;
  }
  .nav-brand{
    font-family:'Space Mono', monospace;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .nav-brand span{ color: var(--red); }
  .nav-links{ display:flex; gap: 28px; list-style:none; margin:0; padding:0; }
  .nav-links a{
    text-decoration:none;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grey);
  }
  .nav-links a:hover{ color: var(--white); }

  .nav-logo{
    width: 28px; height: 28px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
    border-radius: 50%;
    opacity: 0.9;
  }

  /* BANNER */
  .banner{
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--grey);
  }
  .banner a{
    text-decoration: underline;
    color: var(--white);
  }
  .banner a:hover{ color: var(--red); }

  /* HERO */
  .hero{
    border-bottom: 1px solid var(--border);
    padding: 100px 24px 110px;
    position: relative;
    overflow: hidden;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.03) 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.03) 40px);
    pointer-events:none;
    z-index:0;
  }
  .hero-inner{ max-width: 700px; text-align: center; margin: 0 auto; position: relative; z-index: 1; }

  .hero-logo{
    display: block;
    width: min(360px, 70vw);
    margin: 0 auto 28px;
    filter: brightness(1.05);
  }
  .hero h1{
    font-family:'Permanent Marker', cursive;
    font-size: clamp(2.6rem, 8vw, 5rem);
    line-height: 1.05;
    color: var(--white);
    margin-bottom: 24px;
  }
  .hero h1 .red{ color: var(--red); }
  .hero-tag{
    font-size: 0.88rem;
    color: var(--grey);
    max-width: 48ch;
    margin: 0 auto 36px;
    line-height: 1.7;
  }
  .badge-row{ display:flex; gap: 8px; flex-wrap:wrap; justify-content: center; }
  .badge-row span{
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--grey-dark);
    color: var(--grey);
    padding: 5px 10px;
  }

  /* INTRO */
  .intro{
    padding: 80px 24px;
    border-bottom: 1px solid var(--border);
  }
  .intro-inner{
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }
  .intro-inner h2{
    font-family:'Permanent Marker', cursive;
    font-size: 1.5rem;
    margin-bottom: 16px;
  }
  .intro-inner p{ margin: 0 0 12px; color: var(--grey); }
  .intro-inner p:last-child{ margin-bottom:0; }

  /* GAMES */
  .games{
    padding: 80px 24px;
    border-bottom: 1px solid var(--border);
  }
  .section-head{
    margin: 0 0 48px;
    text-align: center;
  }
  .section-head h2{
    font-family:'Permanent Marker', cursive;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: 8px;
  }
  .section-head p{ color: var(--grey); font-size: 0.85rem; margin:0; }

  .games-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    border: 1px solid var(--border);
  }
  .game-card{
    background: var(--card);
    padding: 0;
    position: relative;
    transition: background 0.15s ease;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .game-card:hover{ background: var(--bg3); }

  .shot-img{
    width:100%; aspect-ratio: 16/10;
    object-fit: cover;
    display:block;
    transition: filter 0.2s ease;
  }
  .game-card:hover .shot-img{ filter: brightness(1.05); }

  .game-info{ padding: 20px 20px 22px; text-align: left; }
  .game-card h3{
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
  }
  .game-card h3 a{ text-decoration:none; color: inherit; }
  .game-card h3 a:hover{ color: var(--red); }
  .game-card p{ margin: 0 0 14px; font-size: 0.8rem; color: var(--grey); line-height:1.6; }
  .game-status{
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    display:inline-block;
  }
  .status-live{ border: 1px solid var(--white); color: var(--white); }
  .status-dev{ border: 1px solid var(--red); color: var(--red); }

  /* UPDATE BANNER */
  .update-banner{
    background: var(--bg3);
    border: 1px solid var(--red);
    padding: 28px 24px;
    margin-bottom: 48px;
    text-align: center;
  }
  .update-banner h3{
    font-family:'Permanent Marker', cursive;
    font-size: 1.1rem;
    color: var(--red);
    margin-bottom: 8px;
  }
  .update-banner p{
    font-size: 0.85rem;
    color: var(--grey);
    margin: 0;
    line-height: 1.6;
  }

  /* DEVLOG */
  .devlog{
    padding: 80px 24px;
    border-bottom: 1px solid var(--border);
  }
  .log-entry{
    max-width: 600px;
    margin: 0 auto 32px;
    display:grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    text-align: left;
  }
  .log-entry:last-child{ margin-bottom:0; }
  .log-date{
    font-size: 0.72rem;
    color: var(--grey-dark);
    letter-spacing: 0.04em;
    padding-top: 3px;
  }
  .log-entry p{ margin:0; font-size: 0.85rem; color: var(--grey); line-height:1.7; }

  /* CREW */
  .crew{
    padding: 80px 24px;
    border-bottom: 1px solid var(--border);
  }
  .crew-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border: 1px solid var(--border);
    max-width: none;
    margin: 0;
  }
  .crew-card{
    background: var(--card);
    padding: 28px 24px;
    border-right: 1px solid var(--border);
    text-align: left;
    transition: background 0.15s ease;
  }
  .crew-card.main-card{
    background: var(--bg3);
    border: 1px solid var(--red);
    position: relative;
    z-index: 1;
  }
  .crew-card h3{
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .crew-card h3 a{ text-decoration:none; color:inherit; }
  .crew-card h3 a:hover{ color: var(--red); }
  .crew-card .role{
    font-size: 0.72rem;
    color: var(--red);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display:block;
    margin-bottom: 14px;
  }
  .crew-card .quote{ font-size: 0.8rem; color: var(--grey); margin:0; }

  /* FOOTER */
  .contact{
    padding: 80px 24px 40px;
    background: var(--bg);
    text-align: center;
  }
  .contact h2{
    font-family:'Permanent Marker', cursive;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    margin-bottom: 10px;
  }
  .contact > .wrap > p{
    color: var(--grey);
    font-size: 0.85rem;
    margin: 0 auto 32px;
  }

  .find-us{
    display:flex;
    gap: 12px;
    flex-wrap:wrap;
    justify-content: center;
    margin-bottom: 60px;
  }
  .find-us a{
    text-decoration:none;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 20px;
    border: 1px solid var(--grey-dark);
    color: var(--grey);
    transition: border-color 0.15s, color 0.15s;
  }
  .find-us a:hover{ border-color: var(--white); color: var(--white); }

  .foot-bottom{
    font-size: 0.72rem;
    color: var(--grey-dark);
    border-top: 1px solid var(--border);
    padding-top: 24px;
    letter-spacing: 0.03em;
  }

  /* NEWSLETTER */
  .newsletter{
    padding: 80px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
  }
  .newsletter-inner{
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
  }
  .newsletter h2{
    font-family:'Permanent Marker', cursive;
    font-size: 1.5rem;
    margin-bottom: 12px;
  }
  .newsletter p{
    color: var(--grey);
    font-size: 0.85rem;
    margin: 0 0 24px;
    line-height: 1.6;
  }
  .newsletter-form{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .newsletter-form input{
    flex: 1;
    min-width: 200px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--white);
    padding: 11px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
  }
  .newsletter-form input::placeholder{
    color: var(--grey-dark);
  }
  .newsletter-form input:focus{
    outline: none;
    border-color: var(--red);
  }
  .newsletter-form button{
    background: var(--red);
    border: 1px solid var(--red);
    color: var(--white);
    padding: 11px 22px;
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.15s;
  }
  .newsletter-form button:hover{
    background: #c00;
  }

  /* RESPONSIVE */
  @media (max-width: 680px){
    .games-grid{ grid-template-columns: 1fr; }
    .crew-grid{ grid-template-columns: 1fr; }
    .crew-card{ border-right: none; border-bottom: 1px solid var(--border); }
    .log-entry{ grid-template-columns: 1fr; gap: 4px; }
    .nav-links{ display:none; }
  }
</style>
</head>
<body>

  <div class="banner" id="banner"></div>

  <nav class="nav">
    <div class="nav-inner">
      <a class="nav-brand" href="/"><img class="nav-logo" src="/PFP3.
png" alt="IWK"> IDIOTS <span>W/</span> KNIFES</a>
      <ul class="nav-links">
        <li><a href="#games">games</a></li>
        <li><a href="#devlog">devlog</a></li>
        <li><a href="#crew">crew</a></li>
      </ul>
    </div>
  </nav>

  <header class="hero">
    <div class="hero-inner">
      <img class="hero-logo" src="/PFP2.png" alt="Idiots With Knifes logo">
      <p class="hero-tag">3 people making slime-shaped platformers and whatever survives a weekend jam. everything on itch.</p>
      <div class="badge-row">
        <span>godot + construct</span>
        <span>pay what you want</span>
        <span>itch.io</span>
        <span>est. 2024</span>
      </div>
    </div>
  </header>

  <main>
    <section class="intro">
      <div class="wrap intro-inner">
        <h2>hi, it's us</h2>
        <p>tiny studio. no publisher, no plan, mostly vibes and a shared to-do list that's on fire.</p>
        <p>we make slime-shaped platformers, shooters, and whatever survives being built in a weekend. if it ships, it goes on itch.</p>
      </div>
    </section>

    <section class="games" id="games">
      <div class="wrap">
        <div class="section-head">
          <h2>stuff we made</h2>
          <p>four games finished. one major update. one rebuild in progress.</p>
        </div>

        <div class="update-banner">
          <h3>SLIME KNIGHT 2.0 — COMING SOON</h3>
          <p>multiplayer · 5 new levels · free update · pc first, mobile later</p>
        </div>

        <div class="games-grid">

          <article class="game-card">
            <a href="/spin">
              <img class="shot-img" src="/spin/art.png" alt="Spin Zone screenshot" loading="lazy">
            </a>
            <div class="game-info">
              <span class="game-status status-live">out now</span>
              <h3><a href="/spin">SPIN ZONE</a></h3>
              <p>spin and dash. make it fast. dodge what's coming at you. newest from the studio.</p>
            </div>
          </article>

          <article class="game-card">
            <a href="/sk">
              <img class="shot-img" src="/sk/art.png" alt="Slime Knight cover art" loading="lazy">
            </a>
            <div class="game-info">
              <span class="game-status status-live">out now</span>
              <h3><a href="/sk">SLIME KNIGHT</a></h3>
              <p>bouncy hero, no hands, no arms, suit of armor. bunny-hopping through trap-filled handcrafted levels. 2.0 coming soon.</p>
            </div>
          </article>

          <article class="game-card">
            <a href="/skg">
              <img class="shot-img" src="/skg/art.png" alt="Slime Knight: Gunners. cover art" loading="lazy">
            </a>
            <div class="game-info">
              <span class="game-status status-live">out now</span>
              <h3><a href="/skg">SLIME KNIGHT: GUNNERS.</a></h3>
              <p>a knight finds a gun. fluid platforming, endless shooting, upgrade table for when you get cornered.</p>
            </div>
          </article>

          <article class="game-card">
            <a href="/ping">
              <img class="shot-img" src="/ping/art.png" alt="ping cover art" loading="lazy">
            </a>
            <div class="game-info">
              <span class="game-status status-live">out now — free</span>
              <h3><a href="/ping">PING</a></h3>
              <p>made in 3 hours. don't overthink it, we didn't.</p>
            </div>
          </article>

          <article class="game-card">
            <a href="/rewritten">
              <img class="shot-img" src="/rewritten/art.png" alt="Slime Knight: Gunners Rewritten gameplay screenshot" loading="lazy">
            </a>
            <div class="game-info">
              <span class="game-status status-dev">in development</span>
              <h3><a href="/rewritten">SLIME KNIGHT: GUNNERS REWRITTEN</a></h3>
              <p>full rebuild of Gunners. more gun, less jank. we're actually working on this one.</p>
            </div>
          </article>

        </div>
      </div>
    </section>

    <section class="devlog" id="devlog">
      <div class="wrap">
        <div class="section-head">
          <h2>the mess, logged</h2>
        </div>
        <div class="log-entry">
          <span class="log-date">oct 2026</span>
          <p>Slime Knight 2.0 is happening. multiplayer is a mess but in a fun way. 5 new levels done, polish incoming.</p>
        </div>
        <div class="log-entry">
          <span class="log-date">sept 2026</span>
          <p>released Spin Zone. first mobile game. mobile dev is wild. way harder than web.</p>
        </div>
        <div class="log-entry">
          <span class="log-date">earlier</span>
          <p>made ping in 3 hours because someone said we couldn't. we could.</p>
        </div>
      </div>
    </section>

    <section class="crew" id="crew">
      <div class="wrap">
        <div class="section-head">
          <h2>who's behind this</h2>
          <p>3 people, 1 shared discord, 0 plans.</p>
        </div>
        <div class="crew-grid">
          <!-- Left: Playtester -->
          <div class="crew-card">
            <h3>MR.PRINGLE</h3>
            <span class="role">exclusive playtester · artist</span>
            <p class="quote">"it only crashes on tuesdays now."</p>
          </div>
          <!-- Center: Main Dev (Featured) -->
          <div class="crew-card main-card">
            <h3><a href="https://bsky.app/profile/liversprojects.uk">LIVER B</a></h3>
            <span class="role">main dev · artist · game dev</span>
            <p class="quote">"every good mechanic started as a liability."</p>
          </div>
          <!-- Right: Secondary Artist -->
          <div class="crew-card">
            <h3>ATOMIC_BOMB</h3>
            <span class="role">secondary artist</span>
            <p class="quote">"there's a right amount of red. i find it."</p>
          </div>
        </div>
      </div>
    </section>

    <section class="newsletter" id="newsletter">
      <div class="newsletter-inner">
        <h2>stay posted</h2>
        <p>updates when we ship something. no spam, just games.</p>
        <form class="newsletter-form" action="https://buttondown.email/api/emails/embed-subscribe/idiotswithknifes" method="post">
          <input type="email" name="email" placeholder="your email" required>
          <button type="submit">subscribe</button>
        </form>
      </div>
    </section>
  </main>

  <footer class="contact" id="contact">
    <div class="wrap">
      <h2>find us places</h2>
      <p>we're bad at replying quickly but good at replying eventually.</p>
      <div class="find-us">
        <a href="https://idiots-with-knifes.itch.io">itch.io</a>
        <a href="https://bsky.app/profile/idiots-with-knifes.itch.io">bluesky</a>
        <a href="https://discord.gg/HYgQZNzgKc">discord</a>
        <a href="mailto:support@idiotswithknifes.com">email us</a>
      </div>
      <div class="foot-bottom">
        made with love, caffeine, and bad decisions. © 2026 idiots with knifes.
      </div>
    </div>
  </footer>

  <script>
    // Load banner from banner.txt
    fetch('/banner.txt')
      .then(response => response.text())
      .then(text => {
        const banner = document.getElementById('banner');
        if (text.trim()) {
          banner.innerHTML = text;
          banner.style.display = 'block';
        } else {
          banner.style.display = 'none';
        }
      })
      .catch(() => {
        document.getElementById('banner').style.display = 'none';
      });
  </script>

</body>
</html>