howone 0.1.28 → 0.1.30

package/templates/vite/.howone/skills/hallmark/site/_tests/06-anya-portfolio/style.css

@@ -1,288 +0,0 @@
-/* Hallmark · macrostructure: Index-First · F4 sidebar-toc knobs: width=12rem, sticky=true, numbered=00-04
- * theme: Plain · accent: deep-ink-blue ~2% (used as section-num + one rule)
- * enrichment: none (typography only — restraint is the credibility signal)
- * studied: no · context: skipped, inferred (personal / portfolio domain) · v0.6.0
- */
-
-:root {
-  --color-paper: oklch(100% 0 0);
-  --color-paper-2: oklch(98% 0.005 240);
-  --color-rule: oklch(88% 0.006 240);
-  --color-ink: oklch(18% 0.012 245);
-  --color-ink-soft: oklch(48% 0.014 245);
-  --color-ink-muted: oklch(70% 0.014 245);
-  --color-accent: oklch(36% 0.18 248);
-
-  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --font-body: "Inter Tight", "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;
-
-  --measure-prose: 60ch;
-
-  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
-  --dur-micro: 120ms;
-}
-
-* { 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: 1rem;
-  line-height: 1.55;
-  -webkit-font-smoothing: antialiased;
-}
-
-.page {
-  display: grid;
-  grid-template-columns: 14rem 1fr;
-  gap: var(--space-3xl);
-  max-width: 76rem;
-  margin: 0 auto;
-  padding: var(--space-2xl) var(--space-lg) var(--space-3xl);
-}
-
-/* Sidebar TOC */
-.toc {
-  position: sticky;
-  top: var(--space-2xl);
-  align-self: start;
-  height: fit-content;
-}
-
-.toc__brand {
-  font-family: var(--font-display);
-  font-size: 0.875rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--color-ink);
-  margin: 0 0 var(--space-3xs);
-}
-
-.toc__role {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  letter-spacing: 0.04em;
-  color: var(--color-ink-soft);
-  margin: 0 0 var(--space-xl);
-  display: block;
-}
-
-.toc__list {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 var(--space-xl);
-  display: grid;
-  gap: var(--space-2xs);
-  border-block-start: 1px solid var(--color-rule);
-  padding-block-start: var(--space-md);
-}
-
-.toc__list a {
-  display: grid;
-  grid-template-columns: 3.25ch 1fr;
-  gap: var(--space-sm);
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  letter-spacing: 0.02em;
-  color: var(--color-ink-soft);
-  text-decoration: none;
-  padding: var(--space-3xs) 0;
-  transition: color var(--dur-micro) var(--ease-out);
-}
-
-.toc__list a:hover, .toc__list a:focus-visible { color: var(--color-accent); }
-.toc__list a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
-
-.toc__list .num { color: var(--color-accent); }
-
-.toc__meta {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  letter-spacing: 0.04em;
-  color: var(--color-ink-muted);
-  border-block-start: 1px solid var(--color-rule);
-  padding-block-start: var(--space-sm);
-  display: grid;
-  gap: var(--space-3xs);
-}
-
-/* Main content column */
-.main { min-width: 0; max-width: 56rem; }
-
-.section {
-  margin-block-end: var(--space-3xl);
-  scroll-margin-top: var(--space-2xl);
-}
-
-.section:first-of-type { margin-block-start: 0; }
-
-.section__num {
-  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);
-}
-
-.section__head {
-  font-family: var(--font-display);
-  font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 600;
-  line-height: 1.05;
-  letter-spacing: -0.025em;
-  margin: 0 0 var(--space-lg);
-  color: var(--color-ink);
-}
-
-.section__head--lede { font-size: clamp(2.5rem, 5vw, 4rem); }
-
-.section__body {
-  font-size: 1.0625rem;
-  line-height: 1.6;
-  color: var(--color-ink);
-  max-width: var(--measure-prose);
-}
-
-.section__body p { margin: 0 0 var(--space-md); }
-.section__body p:last-child { margin-block-end: 0; }
-.section__body strong { color: var(--color-accent); font-weight: 500; }
-
-/* Tabular work history */
-.years {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9375rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.years thead th {
-  text-align: start;
-  padding: var(--space-2xs) var(--space-md) var(--space-2xs) 0;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--color-ink-soft);
-  font-weight: 400;
-  border-block-end: 1px solid var(--color-rule);
-}
-
-.years tbody td {
-  padding: var(--space-md) var(--space-md) var(--space-md) 0;
-  border-block-end: 1px solid var(--color-rule);
-  vertical-align: baseline;
-  color: var(--color-ink);
-}
-
-.years td:first-child {
-  font-family: var(--font-mono);
-  color: var(--color-ink-soft);
-  width: 12ch;
-}
-
-.years td:nth-child(2) {
-  font-weight: 500;
-  width: 18ch;
-}
-
-.years td:last-child { color: var(--color-ink-soft); }
-
-/* Writing list */
-.writing {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: grid;
-  gap: var(--space-md);
-}
-
-.writing li {
-  display: grid;
-  grid-template-columns: 8ch 1fr;
-  gap: var(--space-md);
-  align-items: baseline;
-  border-block-end: 1px solid var(--color-rule);
-  padding-block-end: var(--space-md);
-}
-
-.writing li:last-child { border-block-end: none; padding-block-end: 0; }
-
-.writing__date {
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  color: var(--color-ink-soft);
-  font-variant-numeric: tabular-nums;
-}
-
-.writing a {
-  color: var(--color-ink);
-  text-decoration: none;
-  border-block-end: 1px solid var(--color-rule);
-  padding-block-end: 1px;
-  transition: color var(--dur-micro) var(--ease-out),
-              border-color var(--dur-micro) var(--ease-out);
-}
-
-.writing a:hover, .writing a:focus-visible {
-  color: var(--color-accent);
-  border-color: var(--color-accent);
-}
-
-.writing a:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 4px;
-}
-
-.writing__sub {
-  display: block;
-  font-size: 0.875rem;
-  color: var(--color-ink-soft);
-  margin-block-start: var(--space-3xs);
-}
-
-/* Contact */
-.contact {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--space-md);
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-}
-
-.contact__row {
-  border: 1px solid var(--color-rule);
-  padding: var(--space-md);
-  display: grid;
-  gap: var(--space-2xs);
-}
-
-.contact__label { color: var(--color-ink-soft); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
-.contact__value a { color: var(--color-ink); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
-.contact__value a:hover, .contact__value a:focus-visible { color: var(--color-accent); }
-.contact__value a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
-
-@media (max-width: 64rem) {
-  .page { grid-template-columns: 1fr; gap: var(--space-2xl); }
-  .toc { position: static; border-block-end: 1px solid var(--color-rule); padding-block-end: var(--space-lg); }
-}
-
-@media (max-width: 40rem) {
-  .page { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
-  .years td:first-child { width: 10ch; }
-  .writing li { grid-template-columns: 1fr; }
-}

package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/brief.md

@@ -1,64 +0,0 @@
-# Test 07 v2 — Foundry (SOC2 / ISO27001 compliance)
-
-## The prompt (verbatim, same as v1)
-
-> "Build a landing page for Foundry — SOC2 and ISO 27001 compliance automation for B2B SaaS. Show: how many companies got compliant, what it costs, who uses it. Audience: founders + CTOs. Tone: technical but trustworthy."
-
-## 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 Stat-Led + Plain + none. Picking from {Bento Grid, Workbench, Marquee Hero} for the macro this time — Bento Grid wins because the brief says 'show how many · what it costs · who uses it' (three different signals; Bento is the macro built to carry multiple parallel proofs)."*
->
-> *"Theme rotation: Plain (light · display-heavy · cool-deep-ink-blue) → Newsprint (light · roman-serif · warm-deep-red). Differs on display style and accent hue. Passes."*
-
-## Step 3 · Visual ruleset loaded
-
-`macrostructures.md` (Bento Grid), `component-cookbook.md` (F1 bento knobs, big-stat tile, logo-grid tile, pricing-card tile, testimonial-card tile, FAQ teaser), `typography.md` (Newsprint pairing — Source Serif Pro display + Geist body), `color.md` (Newsprint palette — warm cream paper, warm-deep-red accent), `microinteractions.md` (default-on for SaaS — counter on stat tile, focus-visible on CTAs, hover-rule on tier card), `anti-patterns.md`.
-
-## Step 4 · Hero enrichment
-
-> *"Enrichment: Tier-A pure-CSS logo wall (8 monochrome wordmarks set as `<svg>` text marks). No real customer logos (placeholder), no Lottie, no Midjourney. The Bento accommodates a logo grid as one tile rather than a separate section."*
-
-## Step 5 · Preview
-
-```markdown
-**Hallmark · v0.6.0**
-
-- **Macrostructure** · Bento Grid
-- **Theme** · Newsprint (warm-cream paper · Source Serif Pro display · warm-deep-red accent ~3%)
-- **Enrichment** · Tier-A pure-CSS logo grid (8 wordmark placeholders, mono)
-- **Sections** · Masthead · Hero (left-bias) · 6-tile Bento (stat · logos · pricing · testimonial · features · FAQ teaser) · CTA strip · Colophon
-- **Motion** · counter on hero stat · pulse-once on featured tier (2 primitives)
-- **Slop test** · 38 / 38 ✓
-- **Diversification** · differs from v1 (Stat-Led/Plain) on macrostructure + display style + accent hue
-```
-
-## Step 6 · Macrostructure stamp
-
-```
-/* 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
- */
-```
-
-## What changed vs v1
-
-- **Macro:** Stat-Led → Bento Grid. v1 led with "847" sized at 22 rem and structured the rest as a 9-section linear SaaS page; v2 places the 847 inside a bento tile alongside five other parallel proofs (logos, pricing, testimonial, features, FAQ). Same data, different choreography.
-- **Theme:** Plain → Newsprint. v1's pure-white #fff with deep ink-blue becomes warm-cream with warm-deep-red. The page reads less Klim-Type-Foundry and more *NYT Cooking* — still trustworthy, less austere.
-- **Enrichment:** v1 had no enrichment (typography-only Stat-Led); v2 adds a Tier-A logo grid as one bento tile. Compliance pages need social proof, and a logo wall does that without a separate section.
-- **Section count:** v1 had 9 linear sections (logos · stats · features · testimonials · pricing · FAQ · CTA · footer); v2 collapses into 6 bento tiles + a CTA strip + a colophon.
-
-## What stayed the same
-
-- Brand: Foundry, SOC2/ISO27001 automation.
-- The "847 companies" anchor stat.
-- Three-tier pricing.
-- Slop test: 38 / 38 ✓.

package/templates/vite/.howone/skills/hallmark/site/_tests/07-foundry-compliance/index.html

@@ -1,146 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Foundry — SOC 2 &amp; ISO 27001 compliance for B2B SaaS</title>
-  <meta name="description" content="847 companies passed audit using Foundry. Average time to compliant: thirty-one days." />
-  <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=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />
-  <link rel="stylesheet" href="style.css" />
-</head>
-<body>
-  <main class="page">
-    <header class="masthead">
-      <span>est. 2024 · Lisbon &amp; New York</span>
-      <span class="masthead__brand">Foundry<span class="dot">.</span></span>
-      <nav class="masthead__nav">
-        <a href="#bento">Proof</a>
-        <a href="#bento">Pricing</a>
-        <a href="#">Docs</a>
-        <a href="#">Sign in</a>
-      </nav>
-    </header>
-
-    <section class="hero">
-      <div class="hero__copy">
-        <p class="hero__eyebrow">SOC 2 · ISO 27001 · automated</p>
-        <h1 class="hero__head">Compliance, ground out in <em>days</em>, not in months.</h1>
-        <p class="hero__sub">
-          Foundry runs the controls, the evidence collection, and the audit timeline for B2B SaaS
-          teams that don't have a security org yet. Founders open accounts on Tuesdays and pass audit
-          by month-end. The proof is below.
-        </p>
-        <div class="hero__cta">
-          <a class="btn btn--primary" href="#">14-day trial <span aria-hidden="true">→</span></a>
-          <a class="btn" href="#">Talk to sales</a>
-        </div>
-      </div>
-      <aside class="hero__pull">
-        <p class="hero__pull-quote">
-          "We passed Type II in seven weeks with one engineer halftime. The auditor accepted ninety
-          per cent of the evidence Foundry assembled with no edits."
-        </p>
-        <p class="hero__pull-attr">— Matt H., CTO at Tracejam · 18-person team</p>
-      </aside>
-    </section>
-
-    <section class="bento" id="bento">
-      <article class="tile tile--stat" aria-labelledby="stat-h">
-        <span class="tile__corner" aria-hidden="true"></span>
-        <p class="tile__label" id="stat-h">Companies audited</p>
-        <p class="tile__stat">847<span class="tile__stat-dot">.</span></p>
-        <p class="tile__stat-cap">
-          companies passed audit using Foundry. Average time to compliant: thirty-one days, against
-          an industry average of nine months.
-        </p>
-      </article>
-
-      <article class="tile tile--logos" aria-labelledby="logos-h">
-        <p class="tile__label" id="logos-h">In production at</p>
-        <p class="tile__body">Eight wordmarks. Logos shown with consent. Full customer list in the trust report.</p>
-        <ul class="logos" role="list">
-          <li class="logos__item">Tracejam<span class="dot">.</span></li>
-          <li class="logos__item">Maple <span class="dot">·</span></li>
-          <li class="logos__item">Knot</li>
-          <li class="logos__item">Tide<span class="dot">/</span></li>
-          <li class="logos__item">Streampipe</li>
-          <li class="logos__item">Cohort</li>
-          <li class="logos__item">Meridian</li>
-          <li class="logos__item">Anya<span class="dot">.</span>dev</li>
-        </ul>
-      </article>
-
-      <article class="tile tile--pricing" aria-labelledby="price-h">
-        <p class="tile__label" id="price-h">Three plans, one price each</p>
-        <div class="tiers">
-          <div class="tier-card">
-            <p class="tier-card__name">Starter</p>
-            <p class="tier-card__price">$299 <span class="tier-card__per">/ mo</span></p>
-          </div>
-          <div class="tier-card tier-card--feature">
-            <p class="tier-card__name">Team</p>
-            <p class="tier-card__price">$899 <span class="tier-card__per">/ mo</span></p>
-          </div>
-          <div class="tier-card">
-            <p class="tier-card__name">Scale</p>
-            <p class="tier-card__price">Custom</p>
-          </div>
-        </div>
-        <p class="tile__body" style="margin-top: var(--space-sm);">
-          Audit fee included. No per-seat. No annual lock. Cancel any month.
-        </p>
-      </article>
-
-      <article class="tile tile--testimonial">
-        <p class="tile__label">From a customer</p>
-        <p class="tile__quote">
-          "We told the auditor 'use Foundry, the evidence is in there.' She did. The audit closed
-          on schedule. That has never happened to me before."
-        </p>
-        <p class="tile__attr">— <strong>Sara V.</strong>, founder, 9-person fintech</p>
-      </article>
-
-      <article class="tile tile--features">
-        <p class="tile__label">What's automated</p>
-        <h3 class="tile__head">Eighty-six controls, evidenced on a schedule.</h3>
-        <ul class="feat-list">
-          <li><span class="num">01.</span><span>Access reviews quarterly. Slack-prompted. One-click sign-off.</span></li>
-          <li><span class="num">02.</span><span>Vulnerability scans on every deploy. Severity-routed.</span></li>
-          <li><span class="num">03.</span><span>Vendor security review with one-page risk memo per vendor.</span></li>
-          <li><span class="num">04.</span><span>Incident response playbook with on-call rotation prefilled.</span></li>
-          <li><span class="num">05.</span><span>Code review evidence pulled from GitHub, GitLab, Bitbucket.</span></li>
-          <li><span class="num">06.</span><span>Backups verified weekly. Restore tested monthly.</span></li>
-        </ul>
-      </article>
-
-      <article class="tile tile--faq">
-        <p class="tile__label">FAQ</p>
-        <h3 class="tile__head">The eight questions everyone asks first.</h3>
-        <ul class="faq-list">
-          <li><a href="#">Do we need to switch auditor?</a></li>
-          <li><a href="#">How long does Type I take?</a></li>
-          <li><a href="#">Can we add ISO 27001 later?</a></li>
-          <li><a href="#">Does Foundry produce the policies?</a></li>
-          <li><a href="#">What about HIPAA, GDPR?</a></li>
-          <li><a href="#">Do you offer a trust portal?</a></li>
-        </ul>
-      </article>
-    </section>
-
-    <section class="cta-strip">
-      <h2 class="cta-strip__head">Start the trial. <em>Cancel before the first invoice if it's not ready.</em></h2>
-      <div class="cta-strip__cta">
-        <a class="btn btn--primary" href="#">Open an account</a>
-        <a class="btn" href="#">Book a demo</a>
-      </div>
-    </section>
-
-    <footer class="colophon">
-      <span>Foundry · SOC 2 Type II · ISO 27001 · GDPR (DPA available on request)</span>
-      <span><a href="#">trust report</a> · <a href="#">docs</a> · <a href="#">status</a> · <a href="#">contact</a></span>
-    </footer>
-  </main>
-</body>
-</html>