howone 0.1.20 → 0.1.23

package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/style.css

@@ -0,0 +1,484 @@
+/* Hallmark · macrostructure: Bento Grid · F1 bento knobs: tiles=6, spans=irregular, accent=corner-only
+ * theme: Newsprint · accent: warm-deep-red ~3% · enrichment: tier-A CSS logo grid (8 mono wordmarks)
+ * studied: no · context: explicit · v0.6.0
+ */
+
+:root {
+  --color-paper: oklch(95% 0.014 80);
+  --color-paper-2: oklch(92% 0.016 80);
+  --color-rule: oklch(78% 0.018 70);
+  --color-ink: oklch(20% 0.014 50);
+  --color-ink-soft: oklch(40% 0.014 50);
+  --color-ink-muted: oklch(58% 0.014 50);
+  --color-accent: oklch(48% 0.16 28);
+  --color-accent-dim: oklch(60% 0.12 28);
+
+  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
+  --font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
+
+  --space-3xs: 0.25rem;
+  --space-2xs: 0.5rem;
+  --space-xs: 0.75rem;
+  --space-sm: 1rem;
+  --space-md: 1.5rem;
+  --space-lg: 2rem;
+  --space-xl: 3rem;
+  --space-2xl: 4.5rem;
+  --space-3xl: 6.5rem;
+
+  --radius-tile: 4px;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --dur-micro: 120ms;
+  --dur-short: 240ms;
+}
+
+* { box-sizing: border-box; }
+html, body { overflow-x: clip; }
+
+body {
+  margin: 0;
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+.page { max-width: 80rem; margin: 0 auto; padding: 0 var(--space-lg); }
+
+/* Masthead — newspaper banner */
+.masthead {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: var(--space-md) 0;
+  border-block-end: 3px double var(--color-ink);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+}
+
+.masthead__brand {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--color-ink);
+  text-transform: none;
+}
+.masthead__brand .dot { color: var(--color-accent); }
+
+.masthead__nav {
+  display: flex;
+  gap: var(--space-md);
+  justify-content: end;
+}
+
+.masthead__nav a {
+  color: var(--color-ink-soft);
+  text-decoration: none;
+  transition: color var(--dur-micro) var(--ease-out);
+}
+
+.masthead__nav a:hover, .masthead__nav a:focus-visible { color: var(--color-accent); }
+.masthead__nav a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+
+/* Hero */
+.hero {
+  display: grid;
+  grid-template-columns: 1.4fr 1fr;
+  gap: var(--space-2xl);
+  align-items: end;
+  padding: var(--space-3xl) 0 var(--space-2xl);
+  border-block-end: 1px solid var(--color-rule);
+}
+
+.hero__copy { max-width: 36rem; }
+
+.hero__eyebrow {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  margin: 0 0 var(--space-md);
+}
+
+.hero__head {
+  font-family: var(--font-display);
+  font-size: clamp(2.5rem, 6vw, 4.5rem);
+  font-weight: 600;
+  line-height: 1.02;
+  letter-spacing: -0.02em;
+  margin: 0 0 var(--space-md);
+  color: var(--color-ink);
+}
+
+.hero__head em { font-style: italic; color: var(--color-accent); }
+
+.hero__sub {
+  font-family: var(--font-body);
+  font-size: 1.0625rem;
+  line-height: 1.6;
+  color: var(--color-ink-soft);
+  margin: 0 0 var(--space-lg);
+  max-width: 56ch;
+}
+
+.hero__cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5ch;
+  padding: var(--space-sm) var(--space-md);
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  text-decoration: none;
+  border: 1px solid var(--color-rule);
+  background: transparent;
+  color: var(--color-ink);
+  cursor: pointer;
+  line-height: 1;
+  border-radius: 2px;
+  transition: background var(--dur-micro) var(--ease-out),
+              border-color var(--dur-micro) var(--ease-out),
+              color var(--dur-micro) var(--ease-out);
+}
+
+.btn--primary { background: var(--color-accent); color: var(--color-paper); border-color: var(--color-accent); }
+.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-ink); border-color: var(--color-ink); }
+.btn:hover, .btn:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
+.btn--primary:hover, .btn--primary:focus-visible { color: var(--color-paper); }
+.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+
+/* Hero pull-quote panel */
+.hero__pull {
+  background: var(--color-paper-2);
+  border-inline-start: 3px solid var(--color-accent);
+  padding: var(--space-md);
+  font-family: var(--font-display);
+}
+
+.hero__pull-quote {
+  font-style: italic;
+  font-size: 1.125rem;
+  line-height: 1.45;
+  color: var(--color-ink);
+  margin: 0 0 var(--space-sm);
+}
+
+.hero__pull-attr {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  color: var(--color-ink-soft);
+  font-style: normal;
+}
+
+/* Bento grid */
+.bento {
+  padding: var(--space-2xl) 0;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: var(--space-md);
+  border-block-end: 1px solid var(--color-rule);
+}
+
+.tile {
+  background: var(--color-paper-2);
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-tile);
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  position: relative;
+}
+
+.tile__corner {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--color-accent);
+  clip-path: polygon(100% 0, 0 0, 100% 100%);
+}
+
+.tile__label {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+}
+
+.tile__head {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: -0.015em;
+  color: var(--color-ink);
+  margin: 0;
+}
+
+.tile__body {
+  font-size: 0.9375rem;
+  line-height: 1.55;
+  color: var(--color-ink-soft);
+}
+
+.tile--stat { grid-column: span 3; grid-row: span 2; display: grid; grid-template-rows: auto 1fr auto; }
+.tile--logos { grid-column: span 3; }
+.tile--pricing { grid-column: span 3; }
+.tile--testimonial { grid-column: span 3; }
+.tile--features { grid-column: span 3; }
+.tile--faq { grid-column: span 3; }
+
+/* Big stat tile */
+.tile__stat {
+  font-family: var(--font-display);
+  font-size: clamp(5rem, 14vw, 11rem);
+  font-weight: 600;
+  line-height: 0.9;
+  letter-spacing: -0.03em;
+  color: var(--color-ink);
+  margin: var(--space-lg) 0;
+}
+
+.tile__stat-dot { color: var(--color-accent); }
+
+.tile__stat-cap {
+  font-family: var(--font-display);
+  font-size: 1.125rem;
+  font-style: italic;
+  color: var(--color-ink-soft);
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* Logo grid */
+.logos {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-sm);
+  margin-block-start: var(--space-sm);
+}
+
+.logos__item {
+  border: 1px solid var(--color-rule);
+  border-radius: 2px;
+  padding: var(--space-md) var(--space-sm);
+  text-align: center;
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--color-ink);
+  background: var(--color-paper);
+}
+
+.logos__item .dot { color: var(--color-accent); }
+
+/* Pricing tile */
+.tiers {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-sm);
+  margin-block-start: var(--space-sm);
+}
+
+.tier-card {
+  border: 1px solid var(--color-rule);
+  border-radius: 2px;
+  padding: var(--space-sm);
+  background: var(--color-paper);
+}
+
+.tier-card--feature {
+  border-color: var(--color-accent);
+  border-width: 2px;
+  position: relative;
+}
+
+.tier-card--feature::before {
+  content: "popular";
+  position: absolute;
+  inset-inline-end: -1px;
+  inset-block-start: -10px;
+  background: var(--color-accent);
+  color: var(--color-paper);
+  font-family: var(--font-mono);
+  font-size: 0.625rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 2px 6px;
+  border-radius: 2px;
+}
+
+.tier-card__name {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+  margin: 0 0 var(--space-3xs);
+}
+
+.tier-card__price {
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-ink);
+  margin: 0;
+}
+
+.tier-card__per {
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  color: var(--color-ink-soft);
+  font-weight: 400;
+}
+
+/* Testimonial tile */
+.tile__quote {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 1.125rem;
+  line-height: 1.4;
+  margin: 0;
+  color: var(--color-ink);
+}
+
+.tile__attr {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.04em;
+  color: var(--color-ink-soft);
+  margin: var(--space-sm) 0 0;
+}
+
+.tile__attr strong { color: var(--color-ink); font-weight: 500; }
+
+/* Features tile (compact list) */
+.feat-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-2xs);
+}
+
+.feat-list li {
+  display: grid;
+  grid-template-columns: 4ch 1fr;
+  gap: var(--space-2xs);
+  font-size: 0.875rem;
+  color: var(--color-ink);
+}
+
+.feat-list .num {
+  font-family: var(--font-mono);
+  color: var(--color-accent);
+  font-size: 0.8125rem;
+}
+
+/* FAQ tile */
+.faq-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-2xs);
+}
+
+.faq-list li {
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-ink);
+  border-block-end: 1px solid var(--color-rule);
+  padding-block-end: var(--space-2xs);
+}
+
+.faq-list li:last-child { border-block-end: none; }
+
+.faq-list a {
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-sm);
+  transition: color var(--dur-micro) var(--ease-out);
+}
+
+.faq-list a::after { content: "↗"; color: var(--color-accent); font-family: var(--font-body); }
+
+.faq-list a:hover, .faq-list a:focus-visible { color: var(--color-accent); }
+.faq-list a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+
+/* Final CTA strip */
+.cta-strip {
+  padding: var(--space-2xl) 0;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--space-lg);
+  align-items: center;
+  border-block-end: 1px solid var(--color-rule);
+}
+
+.cta-strip__head {
+  font-family: var(--font-display);
+  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
+  font-weight: 600;
+  letter-spacing: -0.015em;
+  line-height: 1.1;
+  margin: 0;
+  color: var(--color-ink);
+}
+
+.cta-strip__head em { font-style: italic; color: var(--color-accent); }
+
+.cta-strip__cta { display: flex; gap: var(--space-sm); }
+
+/* Colophon */
+.colophon {
+  padding: var(--space-md) 0;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--color-ink-soft);
+}
+
+.colophon a { color: var(--color-ink-soft); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
+.colophon a:hover, .colophon a:focus-visible { color: var(--color-accent); }
+.colophon a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+
+@media (max-width: 64rem) {
+  .bento { grid-template-columns: 1fr 1fr; }
+  .tile--stat, .tile--logos, .tile--pricing, .tile--testimonial, .tile--features, .tile--faq { grid-column: span 2; grid-row: auto; }
+}
+
+@media (max-width: 48rem) {
+  .hero { grid-template-columns: 1fr; }
+  .bento { grid-template-columns: 1fr; }
+  .tile--stat, .tile--logos, .tile--pricing, .tile--testimonial, .tile--features, .tile--faq { grid-column: span 1; }
+  .logos { grid-template-columns: repeat(2, 1fr); }
+  .tiers { grid-template-columns: 1fr; }
+  .cta-strip { grid-template-columns: 1fr; }
+  .masthead { grid-template-columns: 1fr; gap: var(--space-2xs); text-align: center; }
+  .masthead__nav { justify-content: center; }
+}

package/templates/vite/.howone/skills/hallmark/site/_tests/08-cohort-courses/brief.md

@@ -0,0 +1,64 @@
+# Test 08 v2 — Cohort (cohort-based courses platform)
+
+## The prompt (verbatim, same as v1)
+
+> "Build a landing page for Cohort — the platform for cohort-based courses. Run live courses with 30 to 500 students. Built for educators, not LMS sales teams. Audience: course operators + indie creators. Tone: warm, salon-room, editorial."
+
+## Step 0 · Pre-flight
+
+> *"No pre-flight signals — proceeding with full Hallmark stack."*
+
+## Step 1 · Design-context gate — fully answered
+
+Audience, use, tone all explicit.
+
+## Step 2.5 · Project memory rotation
+
+> *"Previous run on this brief picked Marquee Hero + Salon + Tier-A continuous marquee. Picking from {Stat-Led, Long Document, Workbench} for the macro this time — Stat-Led wins because the brief itself leads with a number range ('30 to 500 students'); a stat hero answers the brief literally."*
+>
+> *"Theme rotation: Salon (light · mono-display · warm-amber) → Linen (light · geometric-sans · warm-amber). Differs on display style. Accent stays warm-amber. One axis differs — passes (the rule requires at least one)."*
+
+## Step 3 · Visual ruleset loaded
+
+`macrostructures.md` (Stat-Led), `component-cookbook.md` (H8 huge-stat hero, three-stat supporting row, testimonial-card), `typography.md` (Linen pairing — Inter Tight display + Inter Tight body), `color.md` (Linen palette — warm beige, warm-amber accent), `microinteractions.md` (default-on for marketing — counter on hero stat, no marquee), `anti-patterns.md`.
+
+## Step 4 · Hero enrichment
+
+> *"Enrichment: none (typography only). The brief's range '30–500' is itself the visual — set it at 22 rem and the page can carry the rest typographically. No marquee (v1 had it; the rotation rule pushes us off it). No mockup (the page isn't selling a screen)."*
+
+## Step 5 · Preview
+
+```markdown
+**Hallmark · v0.6.0**
+
+- **Macrostructure** · Stat-Led
+- **Theme** · Linen (warm beige paper · Inter Tight geometric-sans · warm-amber accent ~3%)
+- **Enrichment** · none (typography only — the range "30–500" is the visual)
+- **Sections** · Masthead · Hero stat · Three supporting stats · Two operator testimonials · Two-tier pricing · CTA · Colophon
+- **Motion** · counter on hero stat (1 primitive)
+- **Slop test** · 38 / 38 ✓
+- **Diversification** · differs from v1 (Marquee Hero/Salon) on macrostructure + display style
+```
+
+## Step 6 · Macrostructure stamp
+
+```
+/* Hallmark · macrostructure: Stat-Led · H8 hero knobs: stat=range, size=22rem, weight=display-light
+ * theme: Linen · accent: warm-amber ~3% · enrichment: none (typography only — the range is the visual)
+ * studied: no · context: explicit · v0.6.0
+ */
+```
+
+## What changed vs v1
+
+- **Macro:** Marquee Hero → Stat-Led. v1 led with a continuous-scroll marquee of course titles + instructor names; v2 leads with the brief's own range "30–500" sized at 22 rem. The rest of the page carries supporting stats and operator testimonials.
+- **Theme:** Salon → Linen. Both warm, both light. Salon was IBM Plex Mono display + Cormorant body (mono-display); Linen is Inter Tight throughout (geometric-sans). Display style differs.
+- **Enrichment:** v1's continuous marquee → v2's typography-only hero. Stat-Led can carry the page without a moving element.
+- **Voice:** v1 opened with "Cohort runs live courses the way your favourite teacher would — with a date, a roster, and a room"; v2 opens with the range first, voice in the supporting copy.
+
+## What stayed the same
+
+- Brand: Cohort, course platform, educator audience.
+- Two-tier pricing (Run your first cohort / Scale).
+- Slop test: 38 / 38 ✓.
+- Warm paper band.

package/templates/vite/.howone/skills/hallmark/site/_tests/08-cohort-courses/index.html

@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Cohort — live courses for educators</title>
+  <meta name="description" content="The platform for cohort-based courses. Run live courses with 30 to 500 students. Built for educators, not LMS sales teams." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap" />
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <main class="page">
+    <header class="masthead">
+      <span class="masthead__brand">Cohort<span class="dot">.</span></span>
+      <nav class="masthead__nav">
+        <a href="#proof">Proof</a>
+        <a href="#pricing">Pricing</a>
+        <a href="#">Docs</a>
+        <a href="#">Sign in</a>
+      </nav>
+    </header>
+
+    <section class="hero">
+      <p class="hero__eyebrow">Built for educators · not LMS sales teams</p>
+      <p class="hero__stat">30 <span class="hero__stat-em">—</span> 500</p>
+      <h1 class="hero__head">Live courses, sized for the <em>class</em> you actually have.</h1>
+      <p class="hero__sub">
+        Cohort runs courses with thirty to five hundred students at once — the size of a real
+        classroom, the size of a real lecture, and a few sizes between. With a date, a roster, and
+        a room.
+      </p>
+      <div class="hero__cta">
+        <a class="btn btn--primary" href="#">Run your first cohort →</a>
+        <a class="btn" href="#">90-second tour</a>
+      </div>
+    </section>
+
+    <section class="support-stats" id="proof">
+      <div class="s-stat">
+        <p class="s-stat__num">186<em>.</em></p>
+        <p class="s-stat__cap">cohorts run in 2025</p>
+        <p class="s-stat__sub">across writing, design, engineering, healthcare and the humanities</p>
+      </div>
+      <div class="s-stat">
+        <p class="s-stat__num">93<em>%</em></p>
+        <p class="s-stat__cap">finish-rate, median</p>
+        <p class="s-stat__sub">vs. 4–8 % on async-only platforms (industry studies, 2024)</p>
+      </div>
+      <div class="s-stat">
+        <p class="s-stat__num">4.7<em>/5</em></p>
+        <p class="s-stat__cap">operator NPS</p>
+        <p class="s-stat__sub">among educators running their second-or-later cohort with us</p>
+      </div>
+    </section>
+
+    <section class="tm">
+      <article class="tm__card">
+        <p class="tm__quote">
+          "I was running courses on Notion + Zoom + a clipboard. Cohort folded the three of them
+          into a single Tuesday-morning view. My ops time dropped sixty per cent the first month."
+        </p>
+        <p class="tm__attr">— <strong>D. Perell</strong>, writing instructor · 320 students this term</p>
+      </article>
+      <article class="tm__card">
+        <p class="tm__quote">
+          "We needed a roster, an attendance log, and a place to grade weekly assignments. Cohort
+          gave us all three without a single Zapier. The students didn't even notice it existed."
+        </p>
+        <p class="tm__attr">— <strong>M. Poulin</strong>, course operator · two cohorts in parallel</p>
+      </article>
+    </section>
+
+    <section class="pricing" id="pricing">
+      <h2 class="pricing__head">Two plans, <em>both honest.</em></h2>
+      <article class="tier">
+        <p class="tier__name">First cohort</p>
+        <p class="tier__price">$0 <span class="per">first run</span></p>
+        <ul class="tier__list">
+          <li>Up to 50 students</li>
+          <li>One cohort, one term</li>
+          <li>Live + recording, attendance, gradebook</li>
+          <li>Stripe payouts (3 % platform fee)</li>
+        </ul>
+        <a class="btn" href="#">Start free</a>
+      </article>
+      <article class="tier tier--feature">
+        <p class="tier__name">Operator</p>
+        <p class="tier__price">$199 <span class="per">/ month</span></p>
+        <ul class="tier__list">
+          <li>Up to 500 students per cohort</li>
+          <li>Unlimited cohorts</li>
+          <li>Multi-instructor, TA roles, office hours</li>
+          <li>Stripe payouts (1 % platform fee)</li>
+          <li>Course library + alumni rooms</li>
+        </ul>
+        <a class="btn btn--primary" href="#">14-day trial</a>
+      </article>
+    </section>
+
+    <section class="cta-strip">
+      <h2 class="cta-strip__head">Pick a date. Open the roster. <em>Teach Tuesday.</em></h2>
+      <div class="cta-strip__cta">
+        <a class="btn btn--primary" href="#">Run your first cohort →</a>
+        <a class="btn" href="#">Talk to us</a>
+      </div>
+    </section>
+
+    <footer class="colophon">
+      <span>Cohort · Lisbon &amp; Brooklyn · est. 2024</span>
+      <span><a href="#">docs</a> · <a href="#">changelog</a> · <a href="#">support</a> · <a href="#">community</a></span>
+    </footer>
+  </main>
+</body>
+</html>