@bongos/core 1.19.382 → 1.19.383

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/.bongos-core.json CHANGED
@@ -2,22 +2,22 @@
2
2
  "artifact": "bongos-core",
3
3
  "manifest_schema": 1,
4
4
  "generator": "scripts/gds/package-core.js",
5
- "core_version": "1.19.382",
6
- "core_contract": "1.19.382",
7
- "source_commit": "e25777564172174924d9ee444d920a7c1b6dee44",
5
+ "core_version": "1.19.383",
6
+ "core_contract": "1.19.383",
7
+ "source_commit": "f168cbd261a7c290f0bbdb8877d111f12cfa6918",
8
8
  "source_ref": "HEAD",
9
- "built_at": "2026-08-27T16:42:17.638Z",
9
+ "built_at": "2026-08-27T18:02:01.508Z",
10
10
  "redaction": {
11
11
  "model": "docs-redacted+functional-verbatim",
12
- "docs_redacted": 336,
12
+ "docs_redacted": 337,
13
13
  "agent_docs_stubbed": 22,
14
- "functional_verbatim": 1598,
14
+ "functional_verbatim": 1602,
15
15
  "rules": 3,
16
16
  "gate_literals": 3,
17
17
  "gate": "passed"
18
18
  },
19
- "file_count": 1956,
20
- "tree_sha256": "0f3a95aa9c80905da7b7ec21e7cf6edfa3208ae622fe0674fcdb36cbc9319dd5",
19
+ "file_count": 1961,
20
+ "tree_sha256": "0ab207ced344bae7190af953ae3da3574356220f56737ae7bde90ca0ad27a00c",
21
21
  "files": [
22
22
  {
23
23
  "path": ".claude/skills/blocker-review/SKILL.md",
@@ -1539,6 +1539,11 @@
1539
1539
  "mode": "0000644",
1540
1540
  "sha256": "90bed9a9f3859f7cfc6dd8a0e23e70adeda5854be0b10f8208d60a96c83403b3"
1541
1541
  },
1542
+ {
1543
+ "path": "docs/design/landing-page-direction-v2.md",
1544
+ "mode": "0000644",
1545
+ "sha256": "d3d921b7cbdbf929248f7c8e143241bf762d8a17c535ab0300eb1fd7ec432b0a"
1546
+ },
1542
1547
  {
1543
1548
  "path": "docs/design/landing-page-direction.md",
1544
1549
  "mode": "0000644",
@@ -1564,6 +1569,26 @@
1564
1569
  "mode": "0000644",
1565
1570
  "sha256": "c277f432a0d3e23e481bae01355f5f11648ee9a6593f665a809d8f406ebbe033"
1566
1571
  },
1572
+ {
1573
+ "path": "docs/design/mocks/landing/landing-sheet.html",
1574
+ "mode": "0000644",
1575
+ "sha256": "052d9a62f37d52bcab8f20d01bb67b6f83cdce00d64cca9aa794f212166c2f92"
1576
+ },
1577
+ {
1578
+ "path": "docs/design/mocks/landing/v1.html",
1579
+ "mode": "0000644",
1580
+ "sha256": "f016ed6900a72d05df49331b1a8436aba3b1ac53a65f52e7ad1c1895fb2f3a60"
1581
+ },
1582
+ {
1583
+ "path": "docs/design/mocks/landing/v2.html",
1584
+ "mode": "0000644",
1585
+ "sha256": "4de2026c96f95739213857c2c02bb53d41f8c15854a9f59240781288e21257b6"
1586
+ },
1587
+ {
1588
+ "path": "docs/design/mocks/landing/v3.html",
1589
+ "mode": "0000644",
1590
+ "sha256": "ad7a2cac824d592002a13cad7054bc5babfb4a3f80d5a43c325ff7a10db51b64"
1591
+ },
1567
1592
  {
1568
1593
  "path": "docs/design/mocks/projects-hub-mock.html",
1569
1594
  "mode": "0000644",
@@ -5087,12 +5112,12 @@
5087
5112
  {
5088
5113
  "path": "package-lock.json",
5089
5114
  "mode": "0000644",
5090
- "sha256": "b29fad739b5ae1c818f7974aaffa1a2c9cdcd468a96fdd5cf557e669539a26ea"
5115
+ "sha256": "5ec288b35333dfb113e92535712c2d9ba8a10c6a50ca18f967ab66d2c00c0e9c"
5091
5116
  },
5092
5117
  {
5093
5118
  "path": "package.json",
5094
5119
  "mode": "0000644",
5095
- "sha256": "d0986bb5a781bc56402c86519e1c293f7672c0b52938574913356eceba838dfb"
5120
+ "sha256": "196e6dcab90b3a4761fba39ebaa94c05bdba3cb3c963dd684d9fada3730ffff1"
5096
5121
  },
5097
5122
  {
5098
5123
  "path": "public-docs/index.html",
@@ -6997,7 +7022,7 @@
6997
7022
  {
6998
7023
  "path": "src/module-api.js",
6999
7024
  "mode": "0000644",
7000
- "sha256": "9a9f751f0b8da59f2e74a6ee3ea8f57c3ddbd0be971b97d5c654d7ef02d6b322"
7025
+ "sha256": "b388ffe0abec635f957a2d9eb05863590873e963bc445879a27fbd723ca417db"
7001
7026
  },
7002
7027
  {
7003
7028
  "path": "src/module-loader/catalog.js",
@@ -0,0 +1,90 @@
1
+ # The landing page, direction v2: three compositions of the chrome world (task 1003297)
2
+
3
+ **Date:** 2026-08-27 · **Goal:** 1000080 (Apex UI pass 2) · **Criterion:** `apex-landing-built-design-recorded` (this round is the composition half; A3, task 1003298, builds the page and writes `DESIGN.md`) · **World:** chrome-blobs, composition A, picked by the owner on 2026-08-27 (`apex-pass-2-direction.md` §5 to §7).
4
+
5
+ This document records the landing composition round: what it had to do, how it was run, the three versions put in front of the owner, the light-mode decision the round asks for, the owner's pick, the shot list of real imagery still owed, and the copy strings the copy desk will need. It supersedes `landing-page-direction.md` (the 2026-08-13 marigold page) for the look of `/`; the structural decisions of `front-door-and-hub-direction.md` (two equal doors, the hub's top bar, the apex-only split) carry as givens. No build file was touched.
6
+
7
+ ## 1. What this round had to do
8
+
9
+ Three MATERIALLY different full-page compositions of `cloudbongos.com/` inside the approved world, as real HTML mocks under `docs/design/mocks/landing/v{1,2,3}.html` with a contact sheet `landing-sheet.html`, both modes, desktop and a 390 frame. Every version carries: two equal doors that read as one claim; the bongo pair as the mark; the platform's proof (real GDS surfaces, real project orbs, nothing invented); the hall link in the footer; the apex-only regions marked so the shared `index.html` still serves a child instance's plain landing. The taste pre-flight applies (hero at most four text elements, headline at most two lines, lede at most twenty words, nav on one line at most 80px, one eyebrow per three sections at most, no three-equal-card row, no div-built fake screenshots, no em dash or emoji in visible copy, real imagery or a labeled placeholder, motion motivated and reduced-motion safe).
10
+
11
+ The owner's steer from the world round, applied here: (1) the **animated chrome background** is the named signature interaction, code-led, one authored moment, dead under reduced motion, with at least one version whose forms are bongo-shaped; (2) the **light-mode decision** is put to the owner explicitly with the three compositions (rebuild light to the dark standard, or ship the landing dark-only while the hall and the hub keep both modes).
12
+
13
+ ## 2. Method, as run
14
+
15
+ 1. Code-led (`.impeccable/config.json`: `buildPath: code`), no new comps, no direction roll: the world is pinned by the owner's pick, and the template (`docs/design/references/2026-08-26/<redacted>.jpg`) beats the mock where they differ.
16
+ 2. One shared brief (mechanics, the fifteen-token colour rule, every dark rule written twice, no page-local `:root`, the apex-only sentinels, the taste bans, the full content spine with real strings and real numbers) and one version paragraph per builder: a distinct hero geometry, a distinct motion thesis, a distinct light answer. Three builders ran in parallel under `/impeccable` (setup on the surface brief `.impeccable/surfaces/public-landing-index-html.md`, the craft floor, the animate playbook).
17
+ 3. Hero material: the round-2 plates only (`r2-chrome-blobs-set.jpg`, `r2-chrome-blob-one.jpg`, `r2-bongos-chrome-b.jpg`, `r2-bongos-chrome-a-cut.png`). Two alpha cutouts of the blob plates (`r2-chrome-blobs-set-cut.png`, `r2-chrome-blob-one-cut.png`, background remover, 2 credits, $0.05 logged as art) were added so a light mode with the chrome on the pale ground could be built at all; the Higgsfield rule holds (hero plates only, no UI).
18
+ 4. Real numbers from the public ledger on 2026-08-27 (refreshed after the review pass, when the figures had already moved by a few hours of shipping): 1,110 tasks shipped of 1,561 on V1 (`/public/progress`), 69,790 credits of value and $48,251 spent (`/public/cost-summary`), 9 builders holding credits (`/public/leaderboard`); the six latest shipped tasks from `/public/recent-shipped` at 16:42Z to 16:48Z; the three featured projects from `/projects/featured` (Example at example.com, Demo at demo.cloudbongos.com, Emersonian Circles). The mocks bake these in; the build renders them live.
19
+ 5. Verification, every version: clean render (no console errors or warnings, no failed requests, no horizontal overflow, the right `data-mode`) at 1440x900 and 390x844 in both modes through `playwright-core` on the system browser; the reduced-motion pass leaves no running animation and no live frame loop; a mechanical rule check (taste bans, token discipline, dark twins, sentinels, structure, asset paths); then a reviewer pass against the template and the brief with the fixes applied in one batch.
20
+
21
+ ## 3. The three versions
22
+
23
+ | # | File | Composition (the first viewport) | Signature interaction | Light answer | Honest risk |
24
+ |---|---|---|---|---|---|
25
+ | v1 | `mocks/landing/v1.html` | **The room.** Composition A carried to a full page: the staggered lowercase headline over the chrome field, the callouts on the rendered bongo pair lower right, the joined pill doors centred on the round blob | **The drift.** The three chrome layers float on slow independent loops and answer the pointer with a gentle parallax; the bongos stay still | The black specimen panel, refined | Closest to what was approved, so the least new information; the panel is still a panel |
26
+ | v2 | `mocks/landing/v2.html` | **The bongo field.** A centred two-line headline over a field whose forms are the bongo pair itself: chrome flowing inside drum-shaped silhouettes at three depths; no separate hero object | **The flow.** The chrome slides inside the bongo shapes while the shapes drift across the void; on load they settle from a soft blur | Dark hero, light page: the first viewport stays black in both modes | Bongo silhouettes can tip into clip-art; the field must read as liquid chrome first and as bongos second |
27
+ | v3 | `mocks/landing/v3.html` | **The template's page.** The owner's reference followed closely: the big round blob dominates, the two-line headline crosses it, the callouts sit at the template's three positions, the doors float inside the blob, the three-quarter bongo cutout at the right edge | **The breath.** The big blob breathes and its iridescence drifts while the small bead orbits it | Light rebuilt to the dark standard: the chrome as cutouts on the pale ground, no black anywhere | The closest to the reference, so the most exposed to "it looks like the template"; the light cutouts are the only version that answers light without black |
28
+
29
+ Below the fold every version carries the same spine in its own order: the lifecycle (the rail with one lit step and the five clauses), the ledger proof (real shipped work), living proof (the real project orbs; apex-only), Verro Labs (apex-only), the basics (two columns; apex-only), the closing pair, the footer (the commons line apex-only; the hall link).
30
+
31
+ ### 3.1 What the review found, and what was fixed before the owner saw the sheet
32
+
33
+ Each version was reviewed by two independent lenses (a design director over the renders and the template; a verifier measuring glyph-pixel contrast at several animation phases, control sizes, overflow at 1440/390/320, animations with and without reduced motion, keyboard order and focus, assets, sentinels), and every must-fix was handed to a skeptic to refute. What survived, and what was done:
34
+
35
+ - **v1.** Dark first viewport confirmed as composition A verbatim (every plate position, the h1 clamp and the callout positions diffed against the approved mock). One must: a 23 px link. Shoulds taken: the light hero was underset (a 158 px void between the stat row and the doors, a 122 px void under them, a black stripe through the panel) and it abandoned the version's own device (in light the callouts had become a three-up stat strip); fixed by aligning the doors to the panel's edge, closing the gaps, and keeping the callouts on the object inside the panel. The third featured project was added, the ledger re-fetched.
36
+ - **v2.** The first fix round turned the field's forms from blurred pillows into drum profiles with lit hoops; the review then found they read as open-topped copper tubs and that half the viewport was empty black (the fidelity reviewer's must, downgraded by the skeptic because the version's thesis is the field itself, was taken anyway as a should). Second round: two forms instead of four (the near one at hero scale behind the h1), the head as a tensioned skin under a specular hoop, crops re-aimed at the plate's iridescent bands, the flow's rest frame set to its brightest phase, the light seam lifted above the fold so the toggle changes the first screen, structural hairlines at 3:1, the Demo bead lit, the third project added, the ledger's top six restored verbatim, six short links fixed. Below the fold the reviewer called v2 the strongest of the round (the beat rail down the margin of a live ledger).
37
+ - **v3.** Five confirmed musts: the breathe ran at 14 s (under the 20 s floor, so it pulsed) and was slowed to about 30 s; the `credits of value` callout and the lede crossed the blob's bright shoulder (1.0 to 3.5:1) and were moved onto black; at 390 the callouts sat on chrome under 4.5:1 and were put on a black ground; six short links fixed. Shoulds taken: the door pill was an opaque slab over the blob's centre (now 50 percent black, the approved mock's value); the three project beads were one crop used three times (now three crops); the light hero's left half was unresolved (leaders now meet the silhouette, the orb lowered); the truncated ledger title restored. Two findings were refuted by the skeptics and left alone (the `69,751` figure passes once its halo is credited; the light bongo pair is whole, only the sweeping form bleeds by design).
38
+ - **All three.** Every page passes the mechanical rule check and renders clean in both modes at 1440 and 390 with reduced motion leaving nothing running. The ship's grade round then caught two pre-flight misses and both were fixed: v1's headline had kept composition A's three-line stagger (the pre-flight caps it at two lines; v1 now breaks `building digitally,` / `as simple as bongos.` like v3), and the top bar wrapped to two rows at 390 in every version (composition A's own behaviour; every version now collapses the bar to one row under 900 px: the glyph alone, the three links, the toggle, sign in, under 80 px down to 320). Findings recorded but not fixed here, for the build: the `builders` callout is the count of builders holding credits on the public leaderboard (`/public/leaderboard`, nine on 2026-08-27; the world round's `6` was the ninety-day active count from `/public/analytics/ecosystem`), so the build must pick one definition and caption it honestly; the thinnest light-mode pairs clear 4.5:1 by 9 percent and are contract-token pairs (`--ink-faint` on `--bg`), so any lift is a token-layer decision for the whole world; hero figures and ledger rows are baked into the mocks and drift within hours, so the build should render them from `/public/progress`, `/public/cost-summary` and `/public/recent-shipped` at request time.
39
+
40
+ ## 4. Review
41
+
42
+ Open `docs/design/mocks/landing/landing-sheet.html` in a browser. Dark is the default; flip to light to see each version's light answer; `template` swaps the first tile for the owner's reference; the middle tile is the full page, the right tile the page at 390; `open full` walks any version at full size. The head comment of each version states its thesis, first-viewport geometry, signature and light answer.
43
+
44
+ ## 5. The light-mode decision
45
+
46
+ The world round's light landing rehoused the chrome in a black specimen panel and the owner called it weak. The settled constraint (dark-first with a real, tested light mode) stands until the owner decides. The versions show the range:
47
+
48
+ 1. **Keep light, panel refined (v1).** Least work in the build; the panel stays the one black object on a pale page.
49
+ 2. **Dark hero, light page (v2).** The chrome keeps its black; everything under the fold goes light. The seam is a designed edge.
50
+ 3. **Light rebuilt to the dark standard (v3).** The chrome forms as cutouts on the pale ground; the only answer with no black at all. Costs the cutout plates (done) and one more pass of contrast work in the build.
51
+ 4. **Dark-only landing.** The landing ships dark while the hall and the hub keep both modes; the toggle leaves the landing. Simplest build, and the one the owner floated.
52
+
53
+ ## 6. The owner's pick
54
+
55
+ **2026-08-27: v3, the template's page, with light mode rebuilt to the dark standard (option 3 in §5).** Both decisions taken in session with the three versions open (published as self-contained artifacts after the local sheet's `file://` tiles did not show for the owner). No merge, no raises: A3 builds v3 as it stands, the breath as its signature (blob 32 s, sheen 40 s, bead orbit 60 s, the converge on load, dead under reduced motion), and the light landing as the chrome cutouts on the pale ground with a contact shadow, the toggle staying on the landing.
56
+
57
+ What the pick settles: the settled constraint (dark-first with a real, tested light mode) stands for the landing; the light cutouts (`r2-chrome-blobs-set-cut.png`, `r2-chrome-blob-one-cut.png`, `r2-bongos-chrome-a-cut.png`) are production material for the light mode, so the build's asset set is the three black plates plus the three cutouts. v1 and v2 stay on disk as built and verified; what they leave behind for the build: v1's pointer parallax as an optional second layer of the drift, v2's beat rail down the margin of the live ledger (the reviewer's strongest below-the-fold block of the round) as the ledger proof's alternative form, and v2's mode-invariant black stage as the pattern for any surface that must keep black in light.
58
+
59
+ ## 7. Shot list: real imagery still owed
60
+
61
+ No version left a placeholder slot: every image on the three pages is a real plate (the round-2 chrome set, the single blob, the two bongo pairs, the two new blob cutouts) or the real Verro Labs medallion, and the proof is the ledger rendered as page content, so no hall or hub capture is used. What the build will still owe:
62
+
63
+ - **Per-project marks for the living-proof orbs.** `art_url` is `null` for all three featured projects (Example, Demo, Emersonian Circles), so every version falls back to the chrome bead (v1 rotates the second bead so the pair reads as two objects; v3 scales three beads unequally). If the owner wants each project to carry its own mark, that is one text-free render per project (square, on black, about 424 px, the hero-plate rule applies) or the project's own art through `art_url`.
64
+ - **The Verro Labs medallion** is the same upscaled 217 px source the live page uses; a higher-resolution original or a vector is still owed (already noted in the live page's own comment).
65
+
66
+ ## 8. Copy strings for the copy desk
67
+
68
+ Strings that differ from the live `public-landing/index.html` or are new. Everything else is verbatim (the live page's em dash in the Verro Labs copy became a comma in the brief, per the taste ban).
69
+
70
+ | Where | String | Note |
71
+ |---|---|---|
72
+ | Ledger (all) | `1,108 of 1,561 shipped on V1` | real, 2026-08-27 |
73
+ | Ledger sub-line | v1 `The six most recent, as the ledger recorded them.` · v3 `The six most recent, straight from the ledger.` · v2 column head `latest shipped` | new; one wording to pick |
74
+ | Ledger titles | live task titles containing an em dash (1002792, 1002889) were rewritten (`write-once: no route can edit one`, `URL.pathname: %20 breaks require()`) by v1 and v3; v2 skipped those rows instead | **build decision:** a landing that renders live titles will meet em dashes; either normalise punctuation at render time or accept them in quoted data |
75
+ | Ledger title 1003251 | trailing `(owner decision 2026-08-24)` dropped by v3 | truncation rule for long titles |
76
+ | Ledger column heads | v1 `Task` `What shipped` `Builder` `When` | new |
77
+ | Living proof captions | `a game, 11 builders` · `a live demo instance, 1 builder` · `1 builder` (Emersonian Circles, v3 only) · orb link text `example.com` / `demo.cloudbongos.com` (v2) | from the feed's `type`, `builders`, tagline |
78
+ | Living proof heading | v2 renders it lowercase (`built on cloud bongos`), v1 and v3 keep `Built on Cloud Bongos` | casing decision for the display voice |
79
+ | The basics heading | v2 adds an h2 `the basics`; v3 uses eyebrows `For founders` / `For builders` over `Types of projects` / `Ways to get paid` | one structure to pick |
80
+ | Closing pair heading | v1 `Pick your door.` · v2 `Two doors, one ledger.` · v3 none (a bead over the pill) | new; optional |
81
+ | Closing doors | `Start a project` / `Find a project` (v2 and v3 put the primary first; v1 keeps the hero's order, secondary left) | order decision |
82
+ | Skip link | `Skip to content` | new, all versions |
83
+ | Hall link | `Builders' hall` (footer, all versions) | new; server-stamped `{{buildersOrigin}}` in the build |
84
+
85
+ ## 9. What carries forward
86
+
87
+ - **A3 (task 1003298)** builds the picked version (or the merge the owner names) into `public-landing/index.html` on the branding-pack token contract, writes `DESIGN.md` from the build, and closes the light-mode decision in code (the toggle stays or leaves the landing per §6). The signature interaction is built as designed here: CSS or canvas, one authored moment, reduced motion kills it, the plates stay text-free hero material.
88
+ - **A4 (task 1003299)** carries the owner's request to see the projects page in this world.
89
+ - The hero-scale bongo object is a rendered plate in the mocks; whether production uses the plate or an SVG rebuilt in the chrome material is A3's call (the small mark stays the inline SVG).
90
+ - **Plate paths in the token layer.** Chromium resolves a `url()` inside a CSS custom property against the document, not the stylesheet that declared it (verified in this round with a probe page: the token layer's five-level relative path looked for the plate under `.claude/worktrees/` from the `landing/` folder). All three mocks re-declare the plate tokens on `body` with document-relative paths. In the build, reference plates with root-absolute paths (`/assets/...`) in the token layer, or declare them in the page.
@@ -0,0 +1,131 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Landing composition round: three versions of the chrome world (task 1003297)</title>
7
+ <style>
8
+ :root{--ink:#14151a;--soft:#585c6b;--faint:#8a8fa0;--line:#d9dce5;--bg:#f3f4f8;--card:#ffffff;--kick:#0b5fff;}
9
+ :root[data-mode="dark"]{--ink:#f1f2f7;--soft:#a9aec0;--faint:#737890;--line:#2a2e3b;--bg:#0c0e14;--card:#151822;--kick:#7aa2ff;}
10
+ @media (prefers-color-scheme:dark){:root:not([data-mode="light"]){--ink:#f1f2f7;--soft:#a9aec0;--faint:#737890;--line:#2a2e3b;--bg:#0c0e14;--card:#151822;--kick:#7aa2ff;}}
11
+ *{box-sizing:border-box;margin:0;padding:0}
12
+ body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;padding:clamp(18px,3vw,40px);-webkit-font-smoothing:antialiased;line-height:1.5}
13
+ h1{font-size:clamp(22px,3vw,32px);letter-spacing:-.4px;margin-bottom:6px}
14
+ .sub{color:var(--soft);max-width:96ch;font-size:14.5px;margin-bottom:8px}
15
+ .sub b{color:var(--ink)}
16
+ .read{border-left:3px solid var(--kick);padding:10px 14px;margin:14px 0 18px;font-size:14px;max-width:104ch;background:color-mix(in srgb,var(--kick) 7%,transparent);border-radius:0 8px 8px 0}
17
+ .read code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
18
+ .read ol{margin:6px 0 0 18px}
19
+ .bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 22px;position:sticky;top:0;background:var(--bg);padding:10px 0;z-index:5;border-bottom:1px solid var(--line)}
20
+ .bar span{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin-left:10px}
21
+ .bar span:first-child{margin-left:0}
22
+ .bar button{cursor:pointer;font:inherit;font-weight:600;font-size:13px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
23
+ .bar button[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
24
+ .cand{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:16px 18px 18px;margin-bottom:22px}
25
+ .kick{font-size:11px;letter-spacing:.9px;text-transform:uppercase;color:var(--kick);font-weight:700}
26
+ .cand h2{font-size:20px;margin:2px 0 4px;letter-spacing:-.2px}
27
+ .meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 22px;font-size:13.5px;color:var(--soft);margin:6px 0 12px}
28
+ .meta b{color:var(--ink);font-weight:600}
29
+ .tiles{display:grid;grid-template-columns:3fr 3fr 1fr;gap:12px;align-items:start}
30
+ @media (max-width:1100px){.tiles{grid-template-columns:1fr 1fr}}
31
+ @media (max-width:640px){.tiles{grid-template-columns:1fr}}
32
+ .tile{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
33
+ .tileHead{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:12px;color:var(--soft);border-bottom:1px solid var(--line)}
34
+ .tileHead a{color:var(--kick);font-weight:600;text-decoration:none}
35
+ .frame{position:relative;width:100%;aspect-ratio:1440/900;overflow:hidden}
36
+ .frame iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform-origin:0 0}
37
+ .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
38
+ .tall .frame{aspect-ratio:1440/2600}
39
+ .tall .frame iframe{height:2600px}
40
+ .phone .frame{aspect-ratio:390/844}
41
+ .phone .frame iframe{width:390px;height:844px}
42
+ .tmpl{display:flex;gap:10px;align-items:center;margin:0 0 10px;font-size:12.5px;color:var(--soft)}
43
+ .tmpl img{height:56px;border-radius:6px;border:1px solid var(--line)}
44
+ .decide{border:1.5px solid var(--kick);border-radius:16px;padding:16px 18px;margin-bottom:22px;font-size:14px;max-width:110ch}
45
+ .decide h2{font-size:18px;margin-bottom:6px}
46
+ .decide ol{margin:6px 0 0 20px}
47
+ .decide li{margin:4px 0}
48
+ footer{color:var(--faint);font-size:12.5px;margin-top:28px}
49
+ </style>
50
+ <script>
51
+ (function(){try{var q=new URLSearchParams(location.search).get('mode');var m=(q==='light'||q==='dark')?q:'dark';document.documentElement.setAttribute('data-mode',m);}catch(e){}})();
52
+ </script>
53
+ </head>
54
+ <body>
55
+
56
+ <h1>The landing in the chrome world: three full-page compositions, one to approve</h1>
57
+ <p class="sub">Round 2 of the apex pass (task 1003297, goal 1000080), after the world round picked <b>chrome-blobs, composition A</b>. Each version is the whole page (hero, the lifecycle, the ledger proof, living proof, Verro Labs, the basics, the closing pair, the footer with the hall link), built code-led on the chosen mock and the owner's template, with the round-2 hero plates and no new comps. Each carries the owner's named signature interaction, <b>the animated chrome background</b>, done a different way, and a <b>different answer to light mode</b>. Mocks are judged <b>dark first</b>; flip to light to see each version's light answer. The left tile is the first viewport at 1440, the middle tile the full page scrolled, the right tile the page at 390. <b>Template</b> swaps the first tile for the owner's reference. <b>Owner's pick (2026-08-27): v3, the template's page, with light mode rebuilt to the dark standard.</b> Open this sheet from the checkout that holds <code>docs/design/mocks/landing/</code>; the tiles are local iframes.</p>
58
+
59
+ <div class="read">
60
+ <b>How to read the three.</b> Same content, same token layer (<code>../world/chrome-blobs/_tokens.css</code>), same mechanics, same template; the composition, the motion and the light answer differ. <b>v1</b> keeps the approved first viewport and lets the chrome drift. <b>v2</b> makes the chrome forms bongo-shaped (the owner's ask) and keeps the first viewport black in both modes. <b>v3</b> follows the owner's reference more closely than the mock did (the headline crossing the big blob, the doors inside it) and rebuilds light mode with the chrome on the pale ground. The pick can be a version, or a steer that merges two.
61
+ </div>
62
+
63
+ <div class="decide" id="light">
64
+ <h2>The decision this round asks of the owner: light mode</h2>
65
+ The world round's light landing put the chrome in a black panel and the owner called it weak. The settled constraint (dark-first with a real, tested light mode) stands until decided. The three versions show the range:
66
+ <ol>
67
+ <li><b>v1</b>: the black specimen panel, refined (the chrome stays on black inside one panel on the pale page).</li>
68
+ <li><b>v2</b>: dark hero, light page (the first viewport is black in both modes because the chrome needs black; the rest of the page goes light).</li>
69
+ <li><b>v3</b>: light rebuilt to the dark standard (the chrome forms cut out and set on the pale ground, no black anywhere).</li>
70
+ <li>Or: the landing ships <b>dark-only</b> while the hall and the hub keep both modes.</li>
71
+ </ol>
72
+ </div>
73
+
74
+ <div class="bar">
75
+ <span>mode</span>
76
+ <button data-md="dark" aria-pressed="true" type="button">dark</button>
77
+ <button data-md="light" aria-pressed="false" type="button">light</button>
78
+ <span>show</span>
79
+ <button data-v="mock" aria-pressed="true" type="button">mock</button>
80
+ <button data-v="template" aria-pressed="false" type="button">template</button>
81
+ </div>
82
+
83
+ <div id="cands"></div>
84
+
85
+ <footer>Mocks: <code>docs/design/mocks/landing/v{1,2,3}.html</code> on the chosen world's token layer <code>docs/design/mocks/world/chrome-blobs/_tokens.css</code>. Template: <code>docs/design/references/2026-08-26/site-2-iridescent-chrome-blobs-warm-cta.jpg</code>. Plates: <code>.impeccable/mocks/world-assets/r2-*</code> (kept out of the published core). Decision record: <code>docs/design/landing-page-direction-v2.md</code>; the world pick: <code>docs/design/apex-pass-2-direction.md</code>.</footer>
86
+
87
+ <script>
88
+ var REF='../../references/2026-08-26/site-2-iridescent-chrome-blobs-warm-cta.jpg';
89
+ var CANDS=[
90
+ {slug:'v1',name:'v1, the room',
91
+ thesis:'Composition A carried to a full page: the staggered lowercase headline over the chrome field, the callouts on the bongo pair, the joined pill doors centred on the round blob.',
92
+ signature:'The drift: the three chrome layers float on slow independent loops and answer the pointer with a gentle parallax; the bongos stay still.',
93
+ light:'The black specimen panel, refined.'},
94
+ {slug:'v2',name:'v2, the bongo field',
95
+ thesis:'Centred headline on two lines over a field whose forms are the bongo pair itself: four drum-profile silhouettes at four depths, masked over the chrome plate, with lit hoops, tension rods and matte heads; no separate hero object.',
96
+ signature:'The chrome slides inside the drum shapes while the pairs drift across the void on long loops; on load they settle from a soft blur within two thirds of a second.',
97
+ light:'Dark hero, light page: the first viewport stays black in both modes.'},
98
+ {slug:'v3',name:'v3, the template\'s page',
99
+ thesis:'The owner\'s reference followed closely: one big blob (the single-blob plate, whole and uncropped) dominates centre-left, the two-line headline crosses it, the callouts sit at the template\'s three positions, the doors float inside the blob, the three-quarter bongo cutout rides the sweeping form at the right.',
100
+ signature:'The breath: the big blob breathes (14 s) and its iridescence drifts (40 s) while the small bead orbits it (60 s); on load the three forms converge into place.',
101
+ light:'Light rebuilt to the dark standard: the same sculpture as alpha cutouts on the pale ground with a contact shadow, type on clean paper, no black panel anywhere.'}
102
+ ];
103
+ var mode='dark', view='mock';
104
+ function tile(c,label,cls){
105
+ var src=c.slug+'.html?mode='+mode;
106
+ var body = (view==='template' && !cls) ? '<img src="'+REF+'" alt="the owner\'s template">' : '<iframe loading="lazy" src="'+src+'" title="'+c.name+': '+label+'"></iframe>';
107
+ return '<div class="tile '+(cls||'')+'"><div class="tileHead"><span>'+label+'</span><a href="'+src+'" target="_blank">open full</a></div><div class="frame">'+body+'</div></div>';
108
+ }
109
+ function render(){
110
+ document.getElementById('cands').innerHTML=CANDS.map(function(c,i){
111
+ return '<section class="cand" id="'+c.slug+'">'+
112
+ '<div class="kick">Version '+(i+1)+' of 3</div><h2>'+c.name+'</h2>'+
113
+ '<div class="meta"><div><b>Composition.</b> '+c.thesis+'</div><div><b>Signature.</b> '+c.signature+'</div><div><b>Light answer.</b> '+c.light+'</div></div>'+
114
+ '<div class="tiles">'+tile(c,'first viewport at 1440')+tile(c,'the full page','tall')+tile(c,'at 390','phone')+'</div>'+
115
+ '</section>';
116
+ }).join('');
117
+ fit();
118
+ }
119
+ function fit(){
120
+ document.querySelectorAll('.frame').forEach(function(f){
121
+ var fr=f.querySelector('iframe'); if(!fr) return;
122
+ var w=f.closest('.phone')?390:1440; fr.style.transform='scale('+(f.clientWidth/w)+')';
123
+ });
124
+ }
125
+ document.querySelectorAll('[data-md]').forEach(function(b){b.onclick=function(){mode=b.dataset.md;document.documentElement.setAttribute('data-mode',mode);document.querySelectorAll('[data-md]').forEach(function(x){x.setAttribute('aria-pressed',String(x===b));});render();};});
126
+ document.querySelectorAll('[data-v]').forEach(function(b){b.onclick=function(){view=b.dataset.v;document.querySelectorAll('[data-v]').forEach(function(x){x.setAttribute('aria-pressed',String(x===b));});render();};});
127
+ window.addEventListener('resize',fit);
128
+ render();
129
+ </script>
130
+ </body>
131
+ </html>