howone 0.1.28 → 0.1.30

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

@@ -1,484 +0,0 @@
-/* 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

@@ -1,64 +0,0 @@
-# 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

@@ -1,116 +0,0 @@
-<!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>