about.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>About | CatalystCore Studios</title>
  <meta
    name="description"
    content="CatalystCore Studios is an independent software studio building practical Android applications."
  />

  <meta property="og:title" content="About | CatalystCore Studios" />
  <meta
    property="og:description"
    content="CatalystCore Studios is an independent software studio building practical Android applications."
  />
  <meta property="og:type" content="website" />
  <meta
    property="og:url"
    content="https://example.github.io/catalystcore-studios/about.html"
  />

  <link
    rel="canonical"
    href="https://example.github.io/catalystcore-studios/about.html"
  />

  <link rel="icon" type="image/png" href="/assets/hero-logo.png" />
  <link rel="stylesheet" href="/css/style.css" />

  <style>
    .contact-card {
      position: relative;
      overflow: hidden;
      margin-top: 24px;
      padding: 28px;
      border: 1px solid rgba(212, 169, 77, 0.28);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(
          circle at 100% 0%,
          rgba(212, 169, 77, 0.1),
          transparent 42%
        ),
        var(--surface);
      box-shadow: var(--shadow-sm);
    }

    .contact-card::after {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      right: -90px;
      bottom: -100px;
      border: 1px solid rgba(212, 169, 77, 0.12);
      border-radius: 50%;
      pointer-events: none;
    }

    .contact-card__label {
      display: block;
      margin-bottom: 8px;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .contact-card__title {
      margin-bottom: 8px;
      font-size: 1.35rem;
    }

    .contact-card__text {
      max-width: 55ch;
      margin-bottom: 20px;
      line-height: 1.75;
    }

    .contact-email {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--accent-strong);
      font-weight: 650;
      text-decoration: underline;
      text-decoration-color: rgba(236, 201, 120, 0.35);
      text-decoration-thickness: 1px;
      text-underline-offset: 4px;
      transition:
        color 0.15s ease,
        text-decoration-color 0.15s ease,
        transform 0.15s ease;
    }

    .contact-email::before {
      content: "✉";
      font-size: 0.9rem;
      text-decoration: none;
    }

    .contact-email:hover {
      color: #f5d991;
      text-decoration-color: var(--accent-strong);
      transform: translateX(2px);
    }

    @media (max-width: 560px) {
      .contact-card {
        padding: 20px;
      }
    }
  </style>
</head>

<body>
  <a class="skip-link" href="#main">Skip to content</a>

  <header class="navbar">
    <div class="container navbar__inner">
      <a class="brand" href="/">
        <span class="brand__mark" aria-hidden="true">
          <img src="/assets/hero-logo.png" alt="" />
        </span>
        CatalystCore Studios
      </a>

      <button
        class="nav-toggle"
        aria-label="Toggle navigation"
        aria-expanded="false"
      >
        Menu
      </button>

      <nav class="nav-links" aria-label="Primary">
        <a href="/">Home</a>
        <a href="/apps/">Apps</a>
        <a href="/about.html" aria-current="page">About</a>
      </nav>
    </div>
  </header>

  <main id="main">
    <section class="section">
      <div class="container prose">
        <span class="eyebrow">The Studio</span>

        <h1 class="display mt-0">
          About <span class="box-accent">CatalystCore</span>
        </h1>

        <p>
          CatalystCore Studios is an independent software studio focused on
          building practical Android applications. The goal is simple:
          create software that is useful, focused, and genuinely gets used —
          without unnecessary complexity or bloat.
        </p>

        <h2>What We Build</h2>

        <p>
          Every CatalystCore Studios app is built around a single, clear
          purpose — whether that's turning everyday goals into a game with
          <a href="/apps/grind-quest/">Grind Quest</a>, or handling
          everyday document tasks with the
          <a href="/apps/pdf-image-toolkit/">
            PDF &amp; Image Toolkit
          </a>.
        </p>

        <h2>Approach</h2>

        <p>
          Apps are developed with attention to detail, kept lightweight, and
          maintained over time rather than abandoned after launch.
        </p>

        <h2 id="contact">Contact</h2>

        <p>
          For support, feedback, bug reports, or questions about any
          CatalystCore Studios app, reach out to us directly.
        </p>

        <div class="contact-card">
          <span class="contact-card__label">CatalystCore Support</span>

          <h3 class="contact-card__title">
            We'd like to hear from you.
          </h3>

          <p class="contact-card__text">
            Whether you've found an issue, have feedback about one of our
            applications, or simply want to get in touch, you can contact the
            CatalystCore Studios support team by email.
          </p>

          <a
            class="contact-email"
            href="mailto:catalystcore.dev@gmail.com"
          >
            catalystcore.dev@gmail.com
          </a>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="container footer__inner">
      <p class="footer__copy">© 2026 CatalystCore Studios</p>

      <nav class="footer__links" aria-label="Footer">
        <a href="/apps/">Apps</a>
        <a href="/apps/privacy.html">Privacy Policy</a>
        <a href="/apps/">Terms</a>
        <a href="/about.html#contact">Contact</a>
      </nav>
    </div>
  </footer>

  <script src="/js/main.js"></script>
</body>
</html>