bancho.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bancho Digimon: group roster</title>
<link rel="stylesheet" href="../digivolution.css" />
<style>
  /* group-roster layout (self-contained; reuses the shared tokens from digivolution.css) */
  .wrap { padding: 40px 22px 56px; max-width: 1280px; margin: 0 auto; overflow: visible; }

  .hero { text-align: center; margin: 18px auto 10px; max-width: 860px; }
  .hero .kicker {
    display: inline-block; margin-bottom: 14px; padding: 6px 16px; border-radius: 999px;
    font-size: 12.5px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
    color: #cfe6ff; background: rgba(88,166,255,.14); border: 1px solid rgba(88,166,255,.34);
  }
  .hero h1 {
    font-size: 54px; line-height: 1.03; letter-spacing: -1.5px; margin: 0 0 14px;
    background: linear-gradient(180deg, #ffffff, #a9c7ee);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .hero p { color: var(--muted); font-size: 17px; line-height: 1.5; margin: 0; }

  /* power-tier section headings */
  .tier { margin: 40px 0 18px; }
  .tier h2 { margin: 0; font-size: 28px; letter-spacing: -.5px; }
  .tier p { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 700; }

  .grid {
    display: grid; gap: 22px;
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 820px)  { .grid { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 40px; } }
  @media (max-width: 520px)  { .grid { grid-template-columns: 1fr; } }

  .card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    padding: 20px 18px 18px; border-radius: 22px;
    border: 1px solid rgba(255,255,255,.14);
    background: linear-gradient(180deg, rgba(16,43,76,.96), rgba(7,19,36,.98));
    box-shadow: 0 16px 40px rgba(0,0,0,.36);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  /* accent glow strip at the top, tinted by the angel's sphere color (--accent) */
  .card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: var(--accent); box-shadow: 0 0 18px var(--accent);
  }
  .card::after {
    content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent), transparent 65%);
    opacity: .16; pointer-events: none; transition: opacity .18s ease;
  }
  a.card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 60%, rgba(255,255,255,.2));
    box-shadow: 0 26px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  }
  a.card:hover::after { opacity: .32; }

  /* card addressed by the URL fragment (e.g. a badge link on a tree page): the browser
     scrolls to it and :target keeps it highlighted in its own accent color */
  .card { scroll-margin: 110px; }
  a.card:target {
    border-color: color-mix(in srgb, var(--accent) 80%, rgba(255,255,255,.2));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 65%, transparent), 0 26px 60px rgba(0,0,0,.5);
    animation: target-pulse 1.1s ease-out 2;
  }
  a.card:target::after { opacity: .45; }
  @keyframes target-pulse { 50% { transform: translateY(-6px); } }

  .thumb {
    position: relative; z-index: 1; height: 150px; border-radius: 16px; background: #fff;
    padding: 12px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center;
  }
  .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

  .level { position: relative; z-index: 1; font-size: 11.5px; font-weight: 900; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
  .mon { position: relative; z-index: 1; font-size: 22px; font-weight: 950; letter-spacing: -.5px; margin-bottom: 12px; }

  /* angelic-rank pill, tinted by the sphere accent */
  .rank {
    position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 900;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  }
  .rank .glyph { font-size: 14px; line-height: 1; }

  .role { position: relative; z-index: 1; margin: 10px 0 14px; color: var(--muted);
    font-size: 12px; line-height: 1.4; font-weight: 700; }

  .cta {
    /* pinned to the card bottom so the row of CTAs stays aligned when roles wrap */
    position: relative; z-index: 1; margin-top: auto; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.09);
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 900; color: #dce9fb;
  }
  .cta .arrow { transition: transform .18s ease; color: var(--accent); }
  a.card:hover .cta .arrow { transform: translateX(5px); }

  .foot { text-align: center; color: rgba(225,238,255,.6); font-size: 12.5px; line-height: 1.5; margin-top: 40px; }

  /* Lore notes: static, responsive variant of the shared .lore-panel (which is
     absolute-positioned for the tree canvas); the cards reuse .lore-card styles
     and .lore-panel-title from digivolution.css */
  .lore-section {
    margin-top: 34px; padding: 20px 22px 22px; border-radius: 24px;
    border: 1px solid rgba(148,163,184,.42);
    background: linear-gradient(180deg, rgba(44,52,64,.68), rgba(16,24,36,.94));
    box-shadow: 0 20px 56px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.05);
  }
  @media (max-width: 1100px) { .lore-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { .lore-grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<div class="wrap">

  <a class="backnav" href="../index.html"><span class="arrow">&#8592;</span> Home</a>

  <header class="hero">
    <span class="kicker">Special group</span>
    <h1>Bancho Digimon</h1>
    <p>Digimon that earned the title of Bancho, the ringleader: they wear a gakuran jacket, carry unbroken pride and conviction, and every one of them reached the Mega level regardless of its original form. The title is passed on to a worthy Digimon of the next generation.</p>
  </header>

  <section class="tier">
    <h2>Title holders</h2>
    <p>the five known bearers of the Bancho title</p>
  </section>
  <div class="grid">

    <a class="card" id="bancholeomon" href="https://digimon.fandom.com/wiki/BanchoLeomon" target="_blank" style="--accent:#ff7a1a">
      <div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/BanchoLeomon_b.jpg" alt="BanchoLeomon"></div>
      <div class="level">Mega</div>
      <div class="mon">BanchoLeomon</div>
      <span class="rank"><span class="glyph">&#9994;</span> Beast Man</span>
      <div class="role">A Leomon that answers only to its own sense of justice.</div>
      <div class="cta"><span>View on DigimonWiki</span><span class="arrow">&#8594;</span></div>
    </a>

    <a class="card" id="banchomamemon" href="https://digimon.fandom.com/wiki/BanchoMamemon" target="_blank" style="--accent:#ff7a1a">
      <div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/BanchoMamemon_b.jpg" alt="BanchoMamemon"></div>
      <div class="level">Mega</div>
      <div class="mon">BanchoMamemon</div>
      <span class="rank"><span class="glyph">&#9994;</span> Mutant</span>
      <div class="role">Deeply chivalrous; great in a scrap despite its small stature.</div>
      <div class="cta"><span>View on DigimonWiki</span><span class="arrow">&#8594;</span></div>
    </a>

    <a class="card" id="bancholillymon" href="https://digimon.fandom.com/wiki/BanchoLillymon" target="_blank" style="--accent:#ff7a1a">
      <div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/BanchoLillymon_b.jpg" alt="BanchoLillymon"></div>
      <div class="level">Mega</div>
      <div class="mon">BanchoLillymon</div>
      <span class="rank"><span class="glyph">&#9994;</span> Pixie</span>
      <div class="role">Draped in a crimson tokko-fuku; shed the sweet impression of Lillymon.</div>
      <div class="cta"><span>View on DigimonWiki</span><span class="arrow">&#8594;</span></div>
    </a>

    <a class="card" id="banchostingmon" href="https://digimon.fandom.com/wiki/BanchoStingmon" target="_blank" style="--accent:#ff7a1a">
      <div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/BanchoStingmon_b.jpg" alt="BanchoStingmon"></div>
      <div class="level">Mega</div>
      <div class="mon">BanchoStingmon</div>
      <span class="rank"><span class="glyph">&#9994;</span> Insectoid</span>
      <div class="role">Said to be the most arrogant of all Digimon; pride above everything.</div>
      <div class="cta"><span>View on DigimonWiki</span><span class="arrow">&#8594;</span></div>
    </a>

    <a class="card" id="banchogolemon" href="https://digimon.fandom.com/wiki/BanchoGolemon" target="_blank" style="--accent:#ff7a1a">
      <div class="thumb"><img referrerpolicy="no-referrer" src="https://digimon.fandom.com/wiki/Special:Redirect/file/BanchoGolemon_b.jpg" alt="BanchoGolemon"></div>
      <div class="level">Mega</div>
      <div class="mon">BanchoGolemon</div>
      <span class="rank"><span class="glyph">&#9994;</span> Mineral</span>
      <div class="role">Stolid and unflappable; equally harsh with everyone.</div>
      <div class="cta"><span>View on DigimonWiki</span><span class="arrow">&#8594;</span></div>
    </a>

  </div>

  <section class="lore-section">
    <div class="lore-panel-title">
      <h2>Lore notes</h2>
      <span>the stories behind the title</span>
    </div>
    <div class="lore-grid">
      <div class="lore-card">
        <div class="lore-card-title">A Title Taken from Old Movies</div>
        <div class="lore-card-text">The first Bancho were Digimon that watched old movies and came to admire the ringleaders they saw in them. Beyond the five members shown here, other Digimon are said to bear the title.</div>
      </div>
      <div class="lore-card">
        <div class="lore-card-title">Born on the Accel</div>
        <div class="lore-card-text">The group debuted in the Digimon Accel virtual pets (2006), whose storyline follows the mysterious BAN-TYO and their fight for justice against the Digimon pulling the Digital World's strings from behind the scenes.</div>
      </div>
      <div class="lore-card">
        <div class="lore-card-title">Codename: BAN-TYO</div>
        <div class="lore-card-text">Darkdramon's official profile tells the enemy's side: the D-Brigade lost a Tankdramon in an operation to eliminate a target codenamed BAN-TYO, rebuilt it with dark matter into Darkdramon, and the berserk result fled; rumor says it still hunts Codename BAN-TYO.</div>
      </div>
      <div class="lore-card">
        <div class="lore-card-title">Spencer's Partner</div>
        <div class="lore-card-text">The group as such never appeared in an anime, but BanchoLeomon had a central role in Data Squad as the Partner Digimon of Spencer Damon, the protagonist's father.</div>
      </div>
    </div>
  </section>

  <div class="support">
    <span class="support-label">Support this project</span>
    <a class="support-btn kofi" href="https://ko-fi.com/drigos" target="_blank" rel="noopener"><span class="support-icon" aria-hidden="true">&#9749;</span><span class="support-text">Ko-fi</span><span class="support-url">ko-fi.com/drigos</span></a>
    <a class="support-btn sponsors" href="https://github.com/sponsors/drigos" target="_blank" rel="noopener"><span class="support-icon" aria-hidden="true">&#9829;</span><span class="support-text">GitHub Sponsors</span><span class="support-url">github.com/sponsors/drigos</span></a>
  </div>

  <p class="foot">Images and names link to DigimonWiki/Fandom (CC BY-SA unless noted otherwise).</p>

</div>
</body>
</html>