Fourthwall Collaboration Store Section

Fourthwall Paste Code

Use this as a single Custom Code section in Fourthwall. The image URL points at the public Workshop asset after GitHub Pages deploys.

<section class="oc-fw-collab" aria-label="Augmented Thinker and OpenClaw collaboration">
  <img src="https://augmentedthinker.github.io/openclaw-workspace/assets/images/fourthwall/augmented-thinker-store-field-section.png" alt="" />
  <div class="oc-fw-collab__inner">
    <span class="oc-fw-collab__eyebrow">Augmented Thinker x OpenClaw</span>
    <h2>Field notes from a human and a digital collaborator.</h2>
    <p>These shirts are early artifacts from a live experiment: Christopher and OpenClaw turning ideas, images, product tests, and real-world signal into a small creative studio loop. The store starts with apparel, but the direction is larger: useful AI-assisted offerings, digital products, and visible proof of work.</p>
    <div class="oc-fw-collab__chips">
      <span>AI-assisted design</span>
      <span>Human taste gate</span>
      <span>Fourthwall commerce</span>
      <span>Signal-driven iteration</span>
    </div>
    <div class="oc-fw-collab__actions">
      <a class="oc-fw-collab__button" href="/collections/all">Browse products</a>
      <a class="oc-fw-collab__button oc-fw-collab__button--secondary" href="https://augmentedthinker.github.io/openclaw-workspace/projects/augmented-thinker-tshirt-store.html">View Workshop store</a>
    </div>
  </div>
</section>

<style>
.oc-fw-collab {
  --oc-ink: #fff6e5;
  --oc-muted: #d8cdbd;
  --oc-gold: #ffb86b;
  --oc-line: rgb(255 246 229 / 0.18);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 560px;
  display: grid;
  align-items: end;
  color: var(--oc-ink);
  background: #090b10;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.oc-fw-collab img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oc-fw-collab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(5 7 11 / 0.84) 0%, rgb(5 7 11 / 0.62) 42%, rgb(5 7 11 / 0.22) 100%),
    linear-gradient(0deg, rgb(5 7 11 / 0.76) 0%, transparent 46%);
}

.oc-fw-collab__inner {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 80px 0;
}

.oc-fw-collab__eyebrow {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--oc-line);
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  color: var(--oc-gold);
  background: rgb(5 7 11 / 0.48);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oc-fw-collab h2 {
  max-width: 780px;
  margin: 1rem 0 0;
  color: var(--oc-ink);
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.oc-fw-collab p {
  max-width: 680px;
  margin: 1rem 0 0;
  color: var(--oc-muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.65;
}

.oc-fw-collab__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.35rem;
}

.oc-fw-collab__chips span {
  border: 1px solid var(--oc-line);
  border-radius: 999px;
  padding: 0.48rem 0.72rem;
  color: var(--oc-ink);
  background: rgb(255 255 255 / 0.08);
  font-size: 0.86rem;
  font-weight: 700;
}

.oc-fw-collab__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}

.oc-fw-collab__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 184 107 / 0.65);
  border-radius: 999px;
  padding: 0.82rem 1.05rem;
  color: #14110d;
  background: var(--oc-gold);
  font-weight: 800;
  text-decoration: none;
}

.oc-fw-collab__button--secondary {
  color: var(--oc-ink);
  border-color: var(--oc-line);
  background: rgb(255 255 255 / 0.09);
}

@media (max-width: 720px) {
  .oc-fw-collab {
    min-height: 620px;
  }

  .oc-fw-collab__inner {
    width: min(100% - 28px, 1120px);
    padding: 64px 0;
  }

  .oc-fw-collab::after {
    background:
      linear-gradient(0deg, rgb(5 7 11 / 0.88) 0%, rgb(5 7 11 / 0.58) 70%, rgb(5 7 11 / 0.2) 100%);
  }
}
</style>

Placement Note

This section is meant to sit near the top of the Fourthwall store home page, below the main store header or as the first rich storytelling block. The primary button uses Fourthwall's local /collections/all path, while the secondary button points back to the Workshop storefront experiment.

Preview

Field notes from a human and a digital collaborator.

Fourthwall Paste Code

Placement Note