landing.html

<!--
******************************************************
* RECALL COMPILED OUTPUT
* SOURCE: (embedded below)
* RECALL VERSION: 0.1
******************************************************

* IDENTIFICATION DIVISION.
*    PROGRAM-ID.    RECALL-LANDING.
*    AUTHOR.        SEMANTICINTENT.
*    DATE-WRITTEN.  2026-04-03.
*    PAGE-TITLE.    "RECALL — The Source That Remembers".
*    DESCRIPTION.   "A declarative web interface language with COBOL-inspired syntax. The source is the artifact. Every compiled page embeds its own origin.".
*    FAVICON.       "/favicon.ico".
*
* ENVIRONMENT DIVISION.
*    COPY FROM "theme.rcl".
*
* DATA DIVISION.
*    WORKING-STORAGE SECTION.
*       01 HERO-HEADING    PIC X(60)  VALUE "STILL HERE.".
*       01 HERO-SUBHEADING PIC X(60)  VALUE "STILL RUNNING.".
*       01 HERO-BODY       PIC X(200) VALUE "RECALL is a declarative web interface language with COBOL-inspired syntax. It transpiles to self-contained, dependency-free HTML files. The source is always embedded in the output.".
*       01 CTA-PRIMARY     PIC X(30)  VALUE "READ THE SPEC".
*       01 CTA-SECONDARY   PIC X(30)  VALUE "VIEW ON GITHUB".
*       01 INSTALL-CMD     PIC X(40)  VALUE "npm install -g @semanticintent/recall".
*       01 COMPILE-CMD     PIC X(40)  VALUE "recall compile portfolio.rcl".
*       01 WHY-COBOL-HEAD  PIC X(40)  VALUE "Why COBOL.".
*       01 PRINCIPLE-HEAD  PIC X(40)  VALUE "What RECALL believes.".
*       01 EXAMPLE-HEAD    PIC X(40)  VALUE "What it looks like.".
*       01 EXAMPLE-CODE    PIC X(200) VALUE "IDENTIFICATION DIVISION.   PROGRAM-ID. MY-SITE.   PAGE-TITLE. Hello World.   DATA DIVISION.   WORKING-STORAGE SECTION.   01 HEADING PIC X(20) VALUE Hello World.   PROCEDURE DIVISION.   RENDER-HERO.   DISPLAY HEADING-1 HEADING.   STOP SECTION.   STOP RUN.".
*
*    ITEMS SECTION.
*       01 WHY-COBOL-ITEMS.
*          05 WHY-1.
*             10 PROJ-TITLE  PIC X(60)  VALUE "AI'S BEST TRAINING LANGUAGE.".
*             10 PROJ-DESC   PIC X(200) VALUE "COBOL has been encoding business intent in plain English since 1959. More semantic signal per line than any modern language. The intent is readable, not inferred. That is not a coincidence — it is the design.".
*             10 PROJ-TAG    PIC X(20)  VALUE "SINCE 1959".
*             10 PROJ-HREF   PIC X(80)  VALUE "#".
*          05 WHY-2.
*             10 PROJ-TITLE  PIC X(60)  VALUE "SEMANTIC INTENT BY CONSTRUCTION.".
*             10 PROJ-DESC   PIC X(200) VALUE "Every .rcl file is a semantic intent document. An AI can read, modify, generate, and audit RECALL source without a schema — because the intent is in the syntax, not hidden behind it.".
*             10 PROJ-TAG    PIC X(20)  VALUE "BY DESIGN".
*             10 PROJ-HREF   PIC X(80)  VALUE "#".
*          05 WHY-3.
*             10 PROJ-TITLE  PIC X(60)  VALUE "BUILT FOR THE AI COLLABORATION LOOP.".
*             10 PROJ-DESC   PIC X(200) VALUE "HTML has no grammar. An AI generating HTML can do anything — including things you did not ask for. RECALL's constrained syntax makes AI output predictable, round-trippable, and auditable. Ask for a page. Get back valid .rcl. Compile. Done.".
*             10 PROJ-TAG    PIC X(20)  VALUE "THE LOOP".
*             10 PROJ-HREF   PIC X(80)  VALUE "#".
*
*       01 PRINCIPLE-ITEMS.
*          05 PRINCIPLE-1.
*             10 PROJ-TITLE  PIC X(60)  VALUE "THE SOURCE IS THE ARTIFACT".
*             10 PROJ-DESC   PIC X(200) VALUE "Every compiled .html file embeds its .rcl source in a comment block at the top. View source on any RECALL page and you will see COBOL divisions.".
*             10 PROJ-TAG    PIC X(20)  VALUE "CORE".
*             10 PROJ-HREF   PIC X(80)  VALUE "#".
*          05 PRINCIPLE-2.
*             10 PROJ-TITLE  PIC X(60)  VALUE "ZERO DEPENDENCIES".
*             10 PROJ-DESC   PIC X(200) VALUE "Output is one HTML file. Inline CSS. Vanilla JS where needed. No CDN links. No frameworks. No build step to run the result.".
*             10 PROJ-TAG    PIC X(20)  VALUE "CONSTRAINT".
*             10 PROJ-HREF   PIC X(80)  VALUE "#".
*          05 PRINCIPLE-3.
*             10 PROJ-TITLE  PIC X(60)  VALUE "VERBOSE IS A FEATURE".
*             10 PROJ-DESC   PIC X(200) VALUE "COBOL's English-like verbosity is intentional legibility. A RECALL source file reads like a structured document. The intent is visible without a comment.".
*             10 PROJ-TAG    PIC X(20)  VALUE "PHILOSOPHY".
*             10 PROJ-HREF   PIC X(80)  VALUE "#".
*          05 PRINCIPLE-4.
*             10 PROJ-TITLE  PIC X(60)  VALUE "LEGACY FORWARD".
*             10 PROJ-DESC   PIC X(200) VALUE "This is not nostalgia. COBOL systems from the 1960s are still running payroll. RECALL asks: what would a web language look like if it was designed to last?".
*             10 PROJ-TAG    PIC X(20)  VALUE "STATEMENT".
*             10 PROJ-HREF   PIC X(80)  VALUE "#".
*
* PROCEDURE DIVISION.
*
*    RENDER-NAV.
*       COPY FROM "components/nav.rcl".
*
*    RENDER-HERO.
*       DISPLAY SECTION ID "hero"
*          WITH LAYOUT CENTERED
*          WITH PADDING LARGE.
*          DISPLAY HEADING-1 HERO-HEADING
*             WITH STYLE MONO.
*          DISPLAY HEADING-2 HERO-SUBHEADING
*             WITH STYLE MONO.
*          DISPLAY PARAGRAPH HERO-BODY.
*          DISPLAY BUTTON CTA-PRIMARY
*             ON-CLICK GOTO "https://github.com/semanticintent/recall/blob/main/docs/RECALL_SPEC.md"
*             WITH STYLE PRIMARY.
*          DISPLAY BUTTON CTA-SECONDARY
*             ON-CLICK GOTO "https://github.com/semanticintent/recall"
*             WITH STYLE GHOST.
*       STOP SECTION.
*
*    RENDER-WHY.
*       DISPLAY SECTION ID "why-cobol"
*          WITH LAYOUT STACK
*          WITH PADDING MEDIUM.
*          DISPLAY LABEL "WHY COBOL".
*          DISPLAY HEADING-2 WHY-COBOL-HEAD
*             WITH STYLE MONO.
*          DISPLAY CARD-LIST USING WHY-COBOL-ITEMS
*             WITH STYLE BORDERED
*             WITH COLUMNS 3
*             WITH HOVER-LIFT YES.
*       STOP SECTION.
*
*    RENDER-INSTALL.
*       DISPLAY SECTION ID "install"
*          WITH LAYOUT STACK
*          WITH PADDING MEDIUM.
*          DISPLAY LABEL "GET STARTED".
*          DISPLAY CODE-BLOCK INSTALL-CMD
*             WITH LANGUAGE "bash".
*          DISPLAY CODE-BLOCK COMPILE-CMD
*             WITH LANGUAGE "bash".
*       STOP SECTION.
*
*    RENDER-PRINCIPLES.
*       DISPLAY SECTION ID "principles"
*          WITH LAYOUT STACK
*          WITH PADDING MEDIUM.
*          DISPLAY LABEL "DESIGN PRINCIPLES".
*          DISPLAY HEADING-2 PRINCIPLE-HEAD
*             WITH STYLE MONO.
*          DISPLAY CARD-LIST USING PRINCIPLE-ITEMS
*             WITH STYLE BORDERED
*             WITH COLUMNS 2
*             WITH HOVER-LIFT YES.
*       STOP SECTION.
*
*    RENDER-EXAMPLE.
*       DISPLAY SECTION ID "example"
*          WITH LAYOUT STACK
*          WITH PADDING MEDIUM.
*          DISPLAY LABEL "SYNTAX".
*          DISPLAY HEADING-2 EXAMPLE-HEAD
*             WITH STYLE MONO.
*          DISPLAY CODE-BLOCK EXAMPLE-CODE
*             WITH LANGUAGE "cobol".
*       STOP SECTION.
*
*    RENDER-FOOTER.
*       COPY FROM "components/footer.rcl".
*
*    STOP RUN.
*

******************************************************
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RECALL — The Source That Remembers</title>
  <meta name="description" content="A declarative web interface language with COBOL-inspired syntax. The source is the artifact. Every compiled page embeds its own origin.">
  <meta name="author" content="SEMANTICINTENT">
  <link rel="icon" href="/favicon.ico">
  <style>
@import url('https://fonts.googleapis.com/css2?family=IBM%20Plex%20Mono:wght@400;500;600&family=IBM%20Plex%20Sans:wght@300;400;500;600&display=swap');
:root {
  --bg: #080808;
  --text: #E0E0E0;
  --muted: #888888;
  --accent: #00FF41;
  --border: #1A1A1A;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-sans: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-mono); background: var(--bg); color: var(--text); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; }
.container { max-width: 900px; margin: 0 auto; padding: 0 24px; }
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: 0.8; }
nav { padding: 16px 0; border-bottom: 1px solid var(--border); }
nav.sticky { position: sticky; top: 0; z-index: 100; background: var(--bg); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 900px; margin: 0 auto; padding: 0 24px; }
.nav-logo { font-weight: 600; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); }
.nav-links { display: flex; gap: 32px; }
.nav-links a { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
section { padding: 80px 0; }
section.padding-small  { padding: 40px 0; }
section.padding-medium { padding: 60px 0; }
section.padding-large  { padding: 100px 0; }
.layout-centered { display: flex; flex-direction: column; align-items: center; text-align: center; }
.layout-grid { display: grid; gap: 24px; }
.layout-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.layout-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.layout-flex { display: flex; gap: 24px; flex-wrap: wrap; }
.layout-stack { display: flex; flex-direction: column; gap: 20px; }
h1 { font-size: clamp(28px, 5vw, 52px); font-weight: 600; line-height: 1.1; margin-bottom: 20px; }
h2 { font-size: clamp(22px, 3vw, 36px); font-weight: 600; line-height: 1.2; margin-bottom: 16px; }
h3 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
h1.style-mono, h2.style-mono, h3.style-mono { font-family: var(--font-mono); }
h1.style-sans, h2.style-sans, h3.style-sans { font-family: var(--font-sans); }
p { font-family: var(--font-sans); color: var(--muted); max-width: 680px; margin-bottom: 16px; line-height: 1.8; }
p.color-text  { color: var(--text); }
p.color-accent { color: var(--accent); }
.recall-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-family: var(--font-mono); margin-bottom: 8px; }
.recall-btn { display: inline-block; padding: 12px 28px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; border: none; transition: opacity 0.2s; }
.recall-btn.primary  { background: var(--accent); color: var(--bg); }
.recall-btn.ghost    { background: transparent; border: 1px solid var(--border); color: var(--text); }
.recall-btn.outline  { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.recall-btn:hover { opacity: 0.85; }
pre.code-block { font-family: var(--font-mono); font-size: 13px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 24px; overflow-x: auto; line-height: 1.6; color: var(--accent); margin: 16px 0; }
.card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 28px 24px; }
.card.hover-lift { transition: transform 0.2s, border-color 0.2s; }
.card.hover-lift:hover { transform: translateY(-3px); border-color: var(--accent); }
.card h3 { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.card p { font-size: 14px; margin-bottom: 12px; color: rgba(224,224,224,0.75); }
.card-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.card a { display: block; color: inherit; text-decoration: none; height: 100%; }
.recall-divider { border: none; border-top: 1px solid var(--border); margin: 40px 0; }
.recall-divider.dashed { border-top-style: dashed; }
.recall-divider.spacing-small  { margin: 20px 0; }
.recall-divider.spacing-large  { margin: 80px 0; }
.recall-input-group { margin-bottom: 20px; }
.recall-input-group label { display: block; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; font-family: var(--font-mono); }
.recall-input-group input, .recall-input-group textarea { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 14px; padding: 10px 14px; outline: none; resize: vertical; }
.recall-input-group input:focus, .recall-input-group textarea:focus { border-color: var(--accent); }
.recall-banner { padding: 12px 24px; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px; text-align: center; }
footer { padding: 40px 0; border-top: 1px solid var(--border); }
footer p { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); max-width: 100%; }
footer.align-center { text-align: center; }
footer.align-right  { text-align: right; }
@media (max-width: 768px) {
  .layout-grid.cols-2, .layout-grid.cols-3 { grid-template-columns: 1fr; }
  .nav-links { gap: 16px; }
}

  </style>
</head>
<body id="recall-landing">
<nav class=" sticky">
  <div class="nav-inner">
    <span class="nav-logo">RECALL</span>
    <div class="nav-links">
      <a href="https://github.com/semanticintent/recall/blob/main/docs/RECALL_SPEC.md">SPEC</a>
        <a href="https://github.com/semanticintent/recall">GITHUB</a>
        <a href="https://npmjs.com/package/@semanticintent/recall">NPM</a>
    </div>
  </div>
</nav>
<section id="hero" class="padding-large">
  <div class="container layout-centered">
  <h1 class="style-mono">STILL HERE.</h1>
  <h2 class="style-mono">STILL RUNNING.</h2>
  <p>RECALL is a declarative web interface language with COBOL-inspired syntax. It transpiles to self-contained, dependency-free HTML files. The source is always embedded in the output.</p>
  <a href="https://github.com/semanticintent/recall/blob/main/docs/RECALL_SPEC.md" class="recall-btn primary">READ THE SPEC</a>
  <a href="https://github.com/semanticintent/recall" class="recall-btn ghost">VIEW ON GITHUB</a>
  </div>
</section>
<section id="why-cobol" class="padding-medium">
  <div class="container layout-stack">
  <div class="recall-label">WHY COBOL</div>
  <h2 class="style-mono">Why COBOL.</h2>
  <div class="layout-grid cols-3 style-bordered">
    <div class="card hover-lift">
      <a href="#">
        <h3>AI'S BEST TRAINING LANGUAGE.</h3>
        <p>COBOL has been encoding business intent in plain English since 1959. More semantic signal per line than any modern language. The intent is readable, not inferred. That is not a coincidence — it is the design.</p>
        <span class="card-tag">SINCE 1959</span>
      </a>
    </div>
    <div class="card hover-lift">
      <a href="#">
        <h3>SEMANTIC INTENT BY CONSTRUCTION.</h3>
        <p>Every .rcl file is a semantic intent document. An AI can read, modify, generate, and audit RECALL source without a schema — because the intent is in the syntax, not hidden behind it.</p>
        <span class="card-tag">BY DESIGN</span>
      </a>
    </div>
    <div class="card hover-lift">
      <a href="#">
        <h3>BUILT FOR THE AI COLLABORATION LOOP.</h3>
        <p>HTML has no grammar. An AI generating HTML can do anything — including things you did not ask for. RECALL's constrained syntax makes AI output predictable, round-trippable, and auditable. Ask for a page. Get back valid .rcl. Compile. Done.</p>
        <span class="card-tag">THE LOOP</span>
      </a>
    </div>
  </div>
  </div>
</section>
<section id="install" class="padding-medium">
  <div class="container layout-stack">
  <div class="recall-label">GET STARTED</div>
  <pre class="code-block" data-language="bash">npm install -g @semanticintent/recall</pre>
  <pre class="code-block" data-language="bash">recall compile portfolio.rcl</pre>
  </div>
</section>
<section id="principles" class="padding-medium">
  <div class="container layout-stack">
  <div class="recall-label">DESIGN PRINCIPLES</div>
  <h2 class="style-mono">What RECALL believes.</h2>
  <div class="layout-grid cols-2 style-bordered">
    <div class="card hover-lift">
      <a href="#">
        <h3>THE SOURCE IS THE ARTIFACT</h3>
        <p>Every compiled .html file embeds its .rcl source in a comment block at the top. View source on any RECALL page and you will see COBOL divisions.</p>
        <span class="card-tag">CORE</span>
      </a>
    </div>
    <div class="card hover-lift">
      <a href="#">
        <h3>ZERO DEPENDENCIES</h3>
        <p>Output is one HTML file. Inline CSS. Vanilla JS where needed. No CDN links. No frameworks. No build step to run the result.</p>
        <span class="card-tag">CONSTRAINT</span>
      </a>
    </div>
    <div class="card hover-lift">
      <a href="#">
        <h3>VERBOSE IS A FEATURE</h3>
        <p>COBOL's English-like verbosity is intentional legibility. A RECALL source file reads like a structured document. The intent is visible without a comment.</p>
        <span class="card-tag">PHILOSOPHY</span>
      </a>
    </div>
    <div class="card hover-lift">
      <a href="#">
        <h3>LEGACY FORWARD</h3>
        <p>This is not nostalgia. COBOL systems from the 1960s are still running payroll. RECALL asks: what would a web language look like if it was designed to last?</p>
        <span class="card-tag">STATEMENT</span>
      </a>
    </div>
  </div>
  </div>
</section>
<section id="example" class="padding-medium">
  <div class="container layout-stack">
  <div class="recall-label">SYNTAX</div>
  <h2 class="style-mono">What it looks like.</h2>
  <pre class="code-block" data-language="cobol">IDENTIFICATION DIVISION. PROGRAM-ID. MY-SITE. PAGE-TITLE. Hello World. DATA DIVISION. WORKING-STORAGE SECTION. 01 HEADING PIC X(20) VALUE Hello World. PROCEDURE DIVISION. RENDER-HERO. DISPLAY HEADING-1 HEADING. STOP SECTION. STOP RUN.</pre>
  </div>
</section>
<footer class="align-center">
  <div class="container">
    <p>COMPILED WITH RECALL 0.1. THE SOURCE IS EMBEDDED ABOVE.</p>
  </div>
</footer>
</body>
</html>