@bongos/core 1.19.726 → 1.19.727

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.
Files changed (226) hide show
  1. package/.bongos-core.json +176 -491
  2. package/.devcontainer/Dockerfile +1 -1
  3. package/.devcontainer/devcontainer.json +2 -2
  4. package/.devcontainer/healthcheck.sh +1 -1
  5. package/.devcontainer/init-firewall.sh +1 -1
  6. package/.devcontainer/post-create.sh +2 -2
  7. package/.env.local.example +1 -1
  8. package/Dockerfile +1 -1
  9. package/docs/copy-inventory.md +1 -1
  10. package/docs/copy-registry.json +9 -9
  11. package/docs/module-api-changelog.md +2 -0
  12. package/docs/recipes/devbox-app-release.md +4 -4
  13. package/modules/dev-box/app/scripts/dmgbuild-settings.py +5 -5
  14. package/modules/dev-box/app/scripts/gen-brand.js +1 -1
  15. package/modules/dev-box/app/src/brand.js +1 -1
  16. package/modules/dev-box/app/test/unit.mjs +16 -16
  17. package/modules/dev-box/box-access.js +1 -1
  18. package/modules/dev-box/routes/box.js +1 -1
  19. package/modules/discord/discord-approvals.js +1 -1
  20. package/modules/grading/grader-model.js +1 -1
  21. package/modules/grading/grader-prompt.js +1 -1
  22. package/modules/grading/grader-workers/quality.js +1 -1
  23. package/modules/hall-ui/module.json +1 -1
  24. package/modules/hall-ui/public/brand-apply.js +1 -1
  25. package/modules/hall-ui/public/shell.js +1 -1
  26. package/modules/hall-ui/public/work.js +1 -1
  27. package/modules/lifecycle/conflict-resolve.js +1 -1
  28. package/modules/lifecycle/db-analytics.js +1 -1
  29. package/modules/lifecycle/routes/analytics.js +1 -1
  30. package/modules/onboarding/approval-broadcast.js +1 -1
  31. package/modules/onboarding/onboarding.js +1 -1
  32. package/modules/provisioning/tests/liveness.mjs +1 -1
  33. package/modules/public-landing/public/index.html +1 -1
  34. package/modules/public-landing/public/projects-floor.states.json +2 -2
  35. package/modules/public-landing/public/projects.probes.json +4 -4
  36. package/modules/public-landing/public/projects.states.json +2 -2
  37. package/modules/status-ui/module.json +1 -1
  38. package/modules/status-ui/public/status.js +4 -4
  39. package/modules/status-ui/public/style.css +1 -1
  40. package/modules/ui-design/kit/fixtures/cost-summary.json +1 -1
  41. package/modules/ui-design/kit/fixtures/featured-hub.json +1 -1
  42. package/modules/ui-design/kit/fixtures/featured.json +1 -1
  43. package/modules/ui-design/kit/fixtures/leaderboard.json +1 -1
  44. package/modules/ui-design/kit/fixtures/my-projects.json +1 -1
  45. package/modules/ui-design/kit/fixtures/progress.json +1 -1
  46. package/modules/ui-design/kit/fixtures/recent-shipped.json +1 -1
  47. package/package-lock.json +2 -2
  48. package/package.json +1 -1
  49. package/scripts/cron/style_guide_audit.sh +1 -1
  50. package/scripts/discord/lib.js +1 -1
  51. package/scripts/discord/post.js +1 -1
  52. package/scripts/gds/audit-authorship.sh +1 -1
  53. package/scripts/gds/audit-replay.sh +29 -2
  54. package/scripts/gds/audit-ships.js +1 -1
  55. package/scripts/gds/backfill-sessions.js +2 -2
  56. package/scripts/gds/cf-tunnel.js +4 -4
  57. package/scripts/gds/claude-materialize.js +2 -2
  58. package/scripts/gds/cli-lib.js +6 -6
  59. package/scripts/gds/cutover-codemod.js +1 -1
  60. package/scripts/gds/dev-lib.js +2 -2
  61. package/scripts/gds/diagnose-achievements.js +2 -2
  62. package/scripts/gds/fitness-checks-identity.js +6 -4
  63. package/scripts/gds/gen-diagrams.js +1 -1
  64. package/scripts/gds/leak-scan-allowlist.js +293 -0
  65. package/scripts/gds/learning-capture.js +1 -1
  66. package/scripts/gds/linkify-refs.js +2 -2
  67. package/scripts/gds/local-preview-lib.js +1 -1
  68. package/scripts/gds/mirror-lineage-check.js +1 -1
  69. package/scripts/gds/mirror-redact.js +17 -2
  70. package/scripts/gds/newcomer-floor.templates.json +1 -1
  71. package/scripts/gds/package-core.js +18 -1
  72. package/scripts/gds/paste-token.js +1 -1
  73. package/scripts/gds/provision-units.js +2 -2
  74. package/scripts/gds/publish-manifest.js +15 -0
  75. package/scripts/gds/repo-metrics.js +1 -1
  76. package/scripts/gds/sandbox-stage.js +1 -1
  77. package/scripts/gds/seed-bongos-coreB-tranche1-tasks.js +1 -1
  78. package/scripts/gds/seed-bongos-coreB-tranche2-tasks.js +1 -1
  79. package/scripts/gds/seed-bongos-goal-hierarchy-tasks.js +1 -1
  80. package/scripts/gds/seed-bongos-tasks.js +2 -2
  81. package/scripts/gds/seed-gds-v4-tasks.js +1 -1
  82. package/scripts/gds/seed-medusa-tasks.js +10 -10
  83. package/scripts/gds/seed-module-upstreaming.js +1 -1
  84. package/scripts/gds/seed-productization-tasks.js +6 -6
  85. package/scripts/gds/seed-provisioning-tasks.js +2 -2
  86. package/scripts/gds/seed-staging.sh +19 -6
  87. package/scripts/gds/ship-deploy-target.js +1 -1
  88. package/scripts/gds/ship-flow.js +1 -1
  89. package/scripts/gds/smoke-gds.js +1 -1
  90. package/scripts/status-probe.mjs +2 -2
  91. package/src/bongos/auth-discord.js +2 -2
  92. package/src/bongos/live-channel.js +1 -1
  93. package/src/bongos/pool.js +1 -1
  94. package/src/bongos/routes/auth.js +11 -11
  95. package/src/bongos/routes/security.js +1 -1
  96. package/src/bongos/routes.js +1 -1
  97. package/src/branding.js +1 -1
  98. package/src/devbox-downloads.js +1 -1
  99. package/src/instance-config.js +2 -2
  100. package/src/module-api.js +1 -1
  101. package/src/module-loader/provenance.js +2 -2
  102. package/tests/art_stage.mjs +2 -2
  103. package/tests/auth_anthropic_identity.mjs +1 -1
  104. package/tests/auth_duplicate_cookie.mjs +1 -1
  105. package/tests/auth_error_brand.mjs +1 -1
  106. package/tests/auth_inactive_builder.mjs +1 -1
  107. package/tests/backup_cli.mjs +4 -4
  108. package/tests/bongos_box_connect.mjs +2 -2
  109. package/tests/bongos_downloads.mjs +2 -2
  110. package/tests/bongos_login.mjs +5 -5
  111. package/tests/box_connect_e2e.mjs +2 -2
  112. package/tests/box_dns_repoint.mjs +10 -10
  113. package/tests/box_host_keys.mjs +1 -1
  114. package/tests/box_onboard.mjs +9 -9
  115. package/tests/box_scope_session.mjs +1 -1
  116. package/tests/box_terminal_ssrf.mjs +7 -7
  117. package/tests/boxes.mjs +9 -9
  118. package/tests/branding.mjs +2 -2
  119. package/tests/bump_version.mjs +2 -2
  120. package/tests/cf_tunnel.mjs +40 -40
  121. package/tests/cli_token_reissue.mjs +7 -7
  122. package/tests/cloud_bongos_pack.mjs +1 -1
  123. package/tests/currency_label.mjs +8 -8
  124. package/tests/dev_lib.mjs +4 -4
  125. package/tests/devbox_dmg_backdrop.mjs +1 -1
  126. package/tests/devbox_downloads.mjs +2 -2
  127. package/tests/devbox_icons.mjs +1 -1
  128. package/tests/discord_approvals.mjs +1 -1
  129. package/tests/discord_oauth.mjs +2 -2
  130. package/tests/executed_closure.mjs +6 -1
  131. package/tests/first_admin_bootstrap.mjs +1 -1
  132. package/tests/gate_approvals.mjs +5 -5
  133. package/tests/grade_aggregates_unavailable.mjs +1 -1
  134. package/tests/hook_user_agents.mjs +2 -2
  135. package/tests/init.mjs +6 -6
  136. package/tests/instance_config.mjs +1 -1
  137. package/tests/instance_manifest.mjs +5 -5
  138. package/tests/instance_mismatch_guard.mjs +13 -13
  139. package/tests/leak_scan_allowlist.mjs +94 -0
  140. package/tests/migrate_root_resolution.mjs +4 -4
  141. package/tests/mirror_redact.mjs +28 -4
  142. package/tests/module_catalog.mjs +5 -5
  143. package/tests/module_submissions.mjs +3 -3
  144. package/tests/package_core.mjs +1 -1
  145. package/tests/parallel-load.mjs +6 -6
  146. package/tests/projects_hub.mjs +2 -2
  147. package/tests/provision.mjs +50 -50
  148. package/tests/provisioning_github_app_routes.mjs +1 -1
  149. package/tests/provisioning_onboard_mode.mjs +2 -2
  150. package/tests/publish_reconciler.mjs +4 -4
  151. package/tests/sandbox_stage.mjs +1 -1
  152. package/tests/scrubber_corpus.mjs +3 -3
  153. package/tests/search_isolation.mjs +1 -1
  154. package/tests/session_records.mjs +1 -1
  155. package/tests/ship_card.mjs +6 -6
  156. package/tests/ship_ci_deploy.mjs +1 -1
  157. package/tests/single_host_hall.mjs +9 -9
  158. package/tests/smoke_preflight.mjs +1 -1
  159. package/tests/smoke_target.mjs +1 -1
  160. package/tests/status-probe.mjs +1 -1
  161. package/tests/status_mirror_sync.mjs +1 -1
  162. package/docs/adr/0004-amazonprimea-name-and-trademark-acceptance.md +0 -45
  163. package/docs/design/mocks/_schemes.css +0 -604
  164. package/docs/design/mocks/component-sheet.html +0 -428
  165. package/docs/design/mocks/hall/_tokens.css +0 -370
  166. package/docs/design/mocks/hall/board/v1.html +0 -846
  167. package/docs/design/mocks/hall/board/v2.html +0 -858
  168. package/docs/design/mocks/hall/board/v3.html +0 -884
  169. package/docs/design/mocks/hall/goals/v1.html +0 -1212
  170. package/docs/design/mocks/hall/goals/v2.html +0 -1192
  171. package/docs/design/mocks/hall/goals/v3.html +0 -1205
  172. package/docs/design/mocks/hall/hall-sheet.html +0 -244
  173. package/docs/design/mocks/hall/reading/v1.html +0 -1125
  174. package/docs/design/mocks/hall/reading/v2.html +0 -1177
  175. package/docs/design/mocks/hall/reading/v3.html +0 -1150
  176. package/docs/design/mocks/hall/settings/v1.html +0 -1238
  177. package/docs/design/mocks/hall/settings/v2.html +0 -1235
  178. package/docs/design/mocks/hall/settings/v3.html +0 -1299
  179. package/docs/design/mocks/hall/task/v1.html +0 -633
  180. package/docs/design/mocks/hall/task/v2.html +0 -646
  181. package/docs/design/mocks/hall/task/v3.html +0 -647
  182. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg +0 -0
  183. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg.json +0 -13
  184. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg +0 -0
  185. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg.json +0 -13
  186. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg +0 -0
  187. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg.json +0 -13
  188. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg +0 -0
  189. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg.json +0 -13
  190. package/docs/design/mocks/hub/hub-sheet.html +0 -192
  191. package/docs/design/mocks/hub/mine.html +0 -465
  192. package/docs/design/mocks/hub/picker.html +0 -421
  193. package/docs/design/mocks/hub/planets.html +0 -356
  194. package/docs/design/mocks/hub/v1.html +0 -1209
  195. package/docs/design/mocks/hub/v2.html +0 -1257
  196. package/docs/design/mocks/hub/v3.html +0 -1496
  197. package/docs/design/mocks/hub/wizard.html +0 -421
  198. package/docs/design/mocks/landing/landing-sheet.html +0 -131
  199. package/docs/design/mocks/landing/v1.html +0 -956
  200. package/docs/design/mocks/landing/v2.html +0 -708
  201. package/docs/design/mocks/landing/v3.html +0 -911
  202. package/docs/design/mocks/landing-page-mock.html +0 -687
  203. package/docs/design/mocks/landing-palettes.html +0 -103
  204. package/docs/design/mocks/projects-hub-mock.html +0 -991
  205. package/docs/design/mocks/projects-hub-variants.html +0 -146
  206. package/docs/design/mocks/projects-page-mock.html +0 -167
  207. package/docs/design/mocks/world/blue-hud/_tokens.css +0 -246
  208. package/docs/design/mocks/world/blue-hud/hall.html +0 -595
  209. package/docs/design/mocks/world/blue-hud/landing.html +0 -424
  210. package/docs/design/mocks/world/blue-hud/status.html +0 -410
  211. package/docs/design/mocks/world/chrome-blobs/_tokens.css +0 -479
  212. package/docs/design/mocks/world/chrome-blobs/hall.html +0 -553
  213. package/docs/design/mocks/world/chrome-blobs/landing-b.html +0 -581
  214. package/docs/design/mocks/world/chrome-blobs/landing.html +0 -328
  215. package/docs/design/mocks/world/chrome-blobs/status.html +0 -416
  216. package/docs/design/mocks/world/natgeo-editorial/_tokens.css +0 -377
  217. package/docs/design/mocks/world/natgeo-editorial/hall.html +0 -649
  218. package/docs/design/mocks/world/natgeo-editorial/landing-b.html +0 -743
  219. package/docs/design/mocks/world/natgeo-editorial/landing.html +0 -475
  220. package/docs/design/mocks/world/natgeo-editorial/status.html +0 -437
  221. package/docs/design/mocks/world/organic-cards/_tokens.css +0 -462
  222. package/docs/design/mocks/world/organic-cards/hall.html +0 -625
  223. package/docs/design/mocks/world/organic-cards/landing-b.html +0 -736
  224. package/docs/design/mocks/world/organic-cards/landing.html +0 -420
  225. package/docs/design/mocks/world/organic-cards/status.html +0 -458
  226. package/docs/design/mocks/world/world-sheet.html +0 -156
package/docs/design/mocks/landing/v2.html DELETED
@@ -1,708 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <script>
6
- (function(){try{var q=new URLSearchParams(location.search).get('mode');var m=(q==='light'||q==='dark')?q:localStorage.getItem('cb-color-mode');if(m==='light'||m==='dark')document.documentElement.setAttribute('data-mode',m);}catch(e){}})();
7
- </script>
8
- <meta name="viewport" content="width=device-width,initial-scale=1">
9
- <title>Cloud Bongos</title>
10
- <link rel="preconnect" href="https://fonts.googleapis.com">
11
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&family=Manrope:wght@300;400;500;600&display=swap">
13
- <link rel="stylesheet" href="../world/chrome-blobs/_tokens.css">
14
- <style>
15
- *{box-sizing:border-box}
16
- html,body{margin:0;padding:0}
17
- html{scrollbar-color:color-mix(in srgb,var(--ink) 26%,transparent) transparent}
18
- body{position:relative;background:var(--bg);color:var(--ink);font-family:var(--font-body);
19
- font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
20
-
21
- /* ---- page-local derived tokens ----
22
- The stage (hero + top bar) is a BLACK ROOM IN BOTH MODES, so everything inside it is
23
- mode-invariant: colour comes from the void tokens, plus the pure-black / pure-white alpha
24
- overlays the contract allows for scrims, glass and haloes (needed because --void-glass* and
25
- --type-halo carry their DARK-INK / none values in light mode). --stage-glow, --stage-focus
26
- and the skip link are stage-local re-aims of tokens that DO branch on mode, so nothing inside
27
- the black room changes when the toggle flips. */
28
- --stage-glass:rgba(255,255,255,.075);
29
- --stage-glass-strong:rgba(255,255,255,.15);
30
- --stage-glass-edge:rgba(255,255,255,.12);
31
- --stage-door-bg:rgba(0,0,0,.62);
32
- --stage-halo:0 2px 18px rgba(0,0,0,.94),0 0 54px rgba(0,0,0,.72);
33
- --stage-scrim:radial-gradient(64% 46% at 50% 26%,rgba(0,0,0,.94),rgba(0,0,0,.55) 52%,rgba(0,0,0,0) 84%);
34
- --stage-top-scrim:linear-gradient(to bottom,rgba(0,0,0,.86) 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 100%);
35
- --stage-fade:linear-gradient(to bottom,#000 0 88%,transparent 100%);
36
- --stage-blur:16px;
37
- --stage-glow:0 8px 28px color-mix(in srgb,var(--accent) 38%,transparent);
38
- --stage-focus:var(--accent);
39
-
40
- /* The stage is the full screen in dark; in light it stops short so a band of the pale page and
41
- the seam are on the first screen, which is what the mode toggle actually changes here. */
42
- --stage-h:82vh;
43
-
44
- /* Structural hairlines (ledger rows, the rail spine, the ledger head rule) need to be seen as
45
- structure, not felt: --rule / --rule-soft land near 1.2:1 on both grounds. */
46
- --rule-hard:color-mix(in srgb,var(--ink) 32%,transparent);
47
-
48
- /* The bongo-pair silhouette, drawn from r2-bongos-chrome-b.jpg: each drum is a cylinder seen from
49
- slightly above, so its rim is an ellipse a touch wider than the shell, the sides taper inward and
50
- the bottom closes on a second ellipse. Four masks over the SAME 240x152 geometry: BODY (the filled
51
- pair, fed the flowing chrome), HEAD (a disc inset inside each rim, fed the same chrome knocked
52
- back to a matte skin under a lit-to-shaded sheen), HOOP (the two rim ellipses stroked wide and fed
53
- a white specular ramp, so the rim reads as a lit metal ring holding a tensioned skin rather than
54
- an open mouth) and EDGE (the outlines, the base bands and the tension rods, hairline). Corners are
55
- curved and the body carries a 0.7-unit feather, about 1.5 to 2.5px at the sizes used, so the pair
56
- still reads as a liquid form without going soft. */
57
- --bongo-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 152'><filter id='b'><feGaussianBlur stdDeviation='.7'/></filter><g filter='url(%23b)' fill='%23ffffff'><path d='M12 28A62 12 0 0 1 136 28C135.6 33.5 134.6 37 131 40L128.5 124A54.5 10.5 0 0 1 19.5 124L17 40C13.4 37 12.4 33.5 12 28Z'/><path d='M134 52A48 9.5 0 0 1 230 52C229.7 56.5 229 59 226 61L224 128A42 8 0 0 1 140 128L138 61C135 59 134.3 56.5 134 52Z'/><rect x='126' y='66' width='18' height='30' rx='8'/></g></svg>");
58
- --bongo-head:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 152'><filter id='t'><feGaussianBlur stdDeviation='.9'/></filter><g filter='url(%23t)' fill='%23ffffff'><ellipse cx='74' cy='28.3' rx='58' ry='11.2'/><ellipse cx='182' cy='52.3' rx='45' ry='8.9'/></g></svg>");
59
- --bongo-hoop:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 152'><filter id='h'><feGaussianBlur stdDeviation='.75'/></filter><g filter='url(%23h)' fill='none' stroke='%23ffffff' stroke-width='4.2'><ellipse cx='74' cy='28' rx='62' ry='12'/><ellipse cx='182' cy='52' rx='48' ry='9.5'/></g></svg>");
60
- --bongo-edge:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 152'><filter id='e'><feGaussianBlur stdDeviation='.3'/></filter><g filter='url(%23e)' fill='none' stroke='%23ffffff' stroke-linejoin='round' stroke-linecap='round'><g stroke-width='.8'><path d='M12 28A62 12 0 0 1 136 28C135.6 33.5 134.6 37 131 40L128.5 124A54.5 10.5 0 0 1 19.5 124L17 40C13.4 37 12.4 33.5 12 28Z'/><path d='M134 52A48 9.5 0 0 1 230 52C229.7 56.5 229 59 226 61L224 128A42 8 0 0 1 140 128L138 61C135 59 134.3 56.5 134 52Z'/></g><g stroke-width='1.2' stroke-opacity='.78'><path d='M19.6 116A54.7 10 0 0 0 128.4 116'/><path d='M140 121A42.2 8 0 0 0 224 121'/></g><g stroke-width='.9' stroke-opacity='.72'><path d='M38.7 42L40.2 121'/><path d='M79.7 42L79.5 121'/><path d='M115 42L113.2 121'/><path d='M160 63L161 125'/><path d='M197.4 63L196.7 125'/><path d='M217.2 63L215.6 125'/></g></g></svg>");
61
-
62
- /* The two plates re-declared here: a url() inside a custom property resolves against the DOCUMENT,
63
- not the stylesheet that declared it, so _tokens.css's --plate-set / --plate-bead only resolve for
64
- a page sitting in its folder. Same two files, same crops, no new asset. */
65
- --plate-set:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blobs-set.jpg);
66
- --plate-bead:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blob-one.jpg);
67
-
68
- --gut:clamp(20px,4vw,56px);
69
- --col:1180px;
70
- --seam-r:40px;
71
- --top-h:72px;
72
- --fy:15%; /* the near pair's top edge; the three leaders are anchored off it */
73
- }
74
- :root[data-mode="dark"] body{--stage-h:100dvh}
75
- :root[data-mode="dark"] .sun{display:block}
76
- :root[data-mode="dark"] .moon{display:none}
77
- @media (prefers-color-scheme:dark){
78
- :root:not([data-mode="light"]) body{--stage-h:100dvh}
79
- :root:not([data-mode="light"]) .sun{display:block}
80
- :root:not([data-mode="light"]) .moon{display:none}}
81
- a{color:inherit;text-decoration:none}
82
- h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
83
- ol,ul{list-style:none}
84
- ::selection{background:var(--accent);color:var(--accent-on)}
85
- :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
86
- .skip{position:absolute;left:16px;top:-60px;z-index:20;padding:11px 18px;border-radius:var(--radius-pill);
87
- background:var(--void-ink);color:var(--void);font-size:14px;transition:top .2s cubic-bezier(.2,.7,.3,1)}
88
- .skip:focus-visible{top:14px;outline-color:var(--stage-focus)}
89
- .fig{font-variant-numeric:tabular-nums}
90
-
91
- /* =========================================================================
92
- THE STAGE: one black room, both modes. Everything inside is built on
93
- --void / --void-ink / --void-edge and the alpha overlays above.
94
- ========================================================================= */
95
- .stage{position:relative;min-height:var(--stage-h);padding:var(--top-h) var(--gut) clamp(40px,6vh,72px);
96
- background:var(--void);overflow:hidden;
97
- border-radius:0 0 var(--seam-r) var(--seam-r);
98
- box-shadow:inset 0 -1px 0 var(--void-edge)}
99
- .stage :focus-visible,.topbar :focus-visible{outline-color:var(--stage-focus)}
100
-
101
- /* ---- the bongo field: chrome poured through drum-shaped windows ---- */
102
- .bfield{position:absolute;inset:0;pointer-events:none;
103
- -webkit-mask-image:var(--stage-fade);mask-image:var(--stage-fade)}
104
- .bf{position:absolute;left:var(--bf-x);top:var(--bf-y);width:var(--bf-w);aspect-ratio:1.579;
105
- opacity:var(--bf-o);will-change:transform,translate;transform:scaleX(var(--bf-m,1));
106
- animation:drift var(--bf-drift) ease-in-out calc(var(--bf-drift) / -2) infinite alternate,
107
- rise .5s cubic-bezier(.16,1,.3,1) var(--bf-sd) both}
108
- /* the body: the whole pair, holding the chrome that flows through it */
109
- .bf-i{position:absolute;inset:0;mix-blend-mode:var(--blob-blend);
110
- -webkit-mask-image:var(--bongo-mask);mask-image:var(--bongo-mask);
111
- -webkit-mask-size:100% 100%;mask-size:100% 100%;
112
- -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
113
- /* the drum heads: the same chrome knocked back to a matte skin, then lit across so the skin reads
114
- tensioned under the hoop instead of reading as an opening */
115
- .bf-t{position:absolute;inset:0;
116
- -webkit-mask-image:var(--bongo-head);mask-image:var(--bongo-head);
117
- -webkit-mask-size:100% 100%;mask-size:100% 100%;
118
- -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
119
- /* one soft specular per head, aimed at that head's own upper-left, over a shade ramp that keeps the
120
- whole skin BELOW the shell in key: a lid brighter than its drum reads as an opening, a skin darker
121
- than the hoop that holds it reads as tension */
122
- .bf-t::after{content:"";position:absolute;inset:0;
123
- background:radial-gradient(21% 9.5% at 21% 14.5%,rgba(255,255,255,.36),rgba(255,255,255,.09) 54%,rgba(255,255,255,0) 100%),
124
- radial-gradient(16% 7.5% at 69.5% 31%,rgba(255,255,255,.32),rgba(255,255,255,.08) 54%,rgba(255,255,255,0) 100%),
125
- linear-gradient(106deg,rgba(0,0,0,.2) 0,rgba(0,0,0,.44) 48%,rgba(0,0,0,.74) 100%)}
126
- .bf-i > .bf-p{filter:contrast(1.18) saturate(1.24) brightness(1.05)}
127
- .bf-t .bf-p{filter:saturate(.46) brightness(.42) contrast(.9)}
128
- /* the hoop: a wide specular ring on the rim plane, screened over the chrome */
129
- .bf-r{position:absolute;inset:0;mix-blend-mode:screen;
130
- background:linear-gradient(152deg,rgba(255,255,255,.98),rgba(255,255,255,.56) 34%,
131
- rgba(255,255,255,.2) 62%,rgba(255,255,255,.46));
132
- -webkit-mask-image:var(--bongo-hoop);mask-image:var(--bongo-hoop);
133
- -webkit-mask-size:100% 100%;mask-size:100% 100%;
134
- -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
135
- /* the silhouette: a hairline along the shell, the base bands and the tension rods */
136
- .bf-e{position:absolute;inset:0;mix-blend-mode:screen;
137
- background:linear-gradient(158deg,rgba(255,255,255,.82),rgba(255,255,255,.34) 48%,rgba(255,255,255,.15));
138
- -webkit-mask-image:var(--bongo-edge);mask-image:var(--bongo-edge);
139
- -webkit-mask-size:100% 100%;mask-size:100% 100%;
140
- -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
141
- .bf-p{position:absolute;left:0;top:0;width:var(--bf-zoom);aspect-ratio:1;
142
- background:var(--bf-plate) 0 0/100% 100% no-repeat;
143
- transform:translate(calc((var(--pa) + var(--pc))/2),calc((var(--pb) + var(--pd))/2));
144
- animation:flow var(--bf-flow) ease-in-out calc(var(--bf-flow) / -2) infinite alternate}
145
-
146
- /* Each --pa/--pb to --pc/--pd pair is the crop window's travel across the plate, expressed as the
147
- plate's own top-left corner offset: -x% is the u the window starts at, -y% the v. Both windows are
148
- aimed at r2-chrome-blob-one's LIT body, the blue-violet-bronze bands under its upper rim highlight,
149
- and both straddle their brightest crop, so the midpoint the negative half-period delay lands on at
150
- t=0 is also the still frame and the frame reduced motion leaves behind. */
151
- .bf1{--bf-w:55%;--bf-x:-7%;--bf-y:var(--fy);--bf-o:1;--bf-zoom:300%;--bf-plate:var(--plate-bead);
152
- --pa:-20%;--pb:-22%;--pc:-28%;--pd:-30%;--bf-drift:78s;--bf-flow:54s;--bf-sd:0ms}
153
- .bf2{--bf-w:20%;--bf-x:80%;--bf-y:9%;--bf-o:.52;--bf-zoom:320%;--bf-plate:var(--plate-bead);--bf-m:-1;
154
- --pa:-40%;--pb:-29%;--pc:-48%;--pd:-37%;--bf-drift:62s;--bf-flow:42s;--bf-sd:90ms}
155
-
156
- /* Drift rides the independent translate / rotate / scale properties, so the entrance can keep
157
- `transform` to itself; a negative delay of half the period puts every form at the midpoint of its
158
- first pass at t=0, which makes the authored composition BOTH the first frame and the frame the
159
- reduced-motion kill switch leaves behind. The leaders are aimed at that frame. */
160
- @keyframes drift{
161
- from{translate:-1.5% 1.1%;rotate:-1.7deg;scale:.99}
162
- to{translate:1.5% -1.1%;rotate:1.7deg;scale:1.01}}
163
- @keyframes flow{
164
- from{transform:translate(var(--pa),var(--pb))}
165
- to{transform:translate(var(--pc),var(--pd))}}
166
- @keyframes rise{
167
- from{opacity:0;filter:blur(15px);transform:scaleX(var(--bf-m,1)) scale(1.05)}
168
- 58%{filter:blur(2px)}
169
- to{opacity:var(--bf-o);filter:none;transform:scaleX(var(--bf-m,1)) scale(1)}}
170
- .hushed .bf,.hushed .bf-p{animation-play-state:paused}
171
-
172
- .stage-scrim{position:absolute;inset:0;z-index:1;background:var(--stage-scrim);pointer-events:none}
173
-
174
- /* ---- top bar: three pill groups on one line, floating over the void ---- */
175
- .topbar{position:absolute;z-index:5;top:0;left:0;right:0;height:var(--top-h);
176
- display:flex;align-items:center;padding:0 var(--gut)}
177
- .topbar::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:200px;
178
- background:var(--stage-top-scrim);pointer-events:none}
179
- .topnav{display:flex;align-items:center;gap:12px;width:100%}
180
- .pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;
181
- border-radius:var(--radius-pill);background:var(--stage-glass);border:1px solid var(--stage-glass-edge);
182
- backdrop-filter:blur(var(--stage-blur));-webkit-backdrop-filter:blur(var(--stage-blur));
183
- font-family:inherit;font-size:15.5px;color:var(--void-ink);cursor:pointer;
184
- transition:background .25s cubic-bezier(.2,.7,.3,1),opacity .2s ease}
185
- .pill:hover{background:var(--stage-glass-strong)}
186
- .mark-pill{gap:10px;padding:0 24px;background:var(--stage-glass-strong);letter-spacing:-.012em}
187
- .mark-pill svg{width:23px;height:18px;display:block;flex:none}
188
- .nav-pill{gap:0;padding:0 6px;margin:0 auto}
189
- .nav-pill a{padding:12px 22px;border-radius:var(--radius-pill);font-size:15.5px;text-transform:lowercase;
190
- color:var(--void-ink-soft);transition:color .2s ease}
191
- .nav-pill a:hover{color:var(--void-ink)}
192
- .right-pills{display:flex;align-items:center;gap:10px}
193
- .mode-toggle{width:44px;min-width:44px;padding:0}
194
- .mode-toggle svg{width:18px;height:18px}
195
- .sun{display:none}
196
- .signin{background:var(--void-ink);color:var(--void);border-color:transparent;
197
- text-transform:lowercase;font-weight:500;padding:0 28px}
198
- .signin:hover{background:var(--void-ink);opacity:.86}
199
-
200
- /* ---- hero copy: centred column, upper third ---- */
201
- .hero{position:relative;z-index:2;max-width:1060px;margin:0 auto;padding-top:clamp(26px,7vh,74px);
202
- text-align:center}
203
- h1{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,8.2vw,96px);
204
- line-height:.95;letter-spacing:-.042em;text-transform:lowercase;color:var(--void-ink);
205
- text-shadow:var(--stage-halo)}
206
- h1 span{display:block}
207
- .lede{margin:clamp(20px,3.2vh,34px) auto 0;max-width:44ch;font-size:clamp(15.5px,1.35vw,19.5px);
208
- line-height:1.5;color:var(--void-ink-soft);text-shadow:var(--stage-halo)}
209
- .doors-row{display:flex;justify-content:center;margin-top:clamp(24px,3.6vh,40px)}
210
- .doorbar{display:inline-flex;align-items:center;gap:6px;padding:7px;border-radius:var(--radius-pill);
211
- background:var(--stage-door-bg);border:1px solid var(--stage-glass-edge);
212
- backdrop-filter:blur(var(--stage-blur));-webkit-backdrop-filter:blur(var(--stage-blur))}
213
- .door{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 30px;
214
- border-radius:var(--radius-pill);font-size:17px;font-weight:500;text-transform:lowercase;
215
- color:var(--void-ink);transition:background .25s cubic-bezier(.2,.7,.3,1),opacity .2s ease}
216
- .door:hover{background:var(--stage-glass-strong)}
217
- .door--go{background:linear-gradient(104deg,var(--accent),var(--accent-lift) 88%);color:var(--accent-on)}
218
- .door--go:hover{background:linear-gradient(104deg,var(--accent-lift),var(--accent-lift));
219
- color:var(--accent-on)}
220
- .stage .door--go{box-shadow:var(--stage-glow)}
221
-
222
- /* ---- leader-line callouts, each aimed at one edge of the near pair ----
223
- The leader box is stretched between the number's top-left corner and the point on the silhouette it
224
- annotates, and the line runs corner to corner inside it; .callout--l flips it for a form that sits
225
- up and to the RIGHT of its number. Each callout's top is --fy plus a fixed pixel drop, exactly how
226
- the pair's own edges are placed, so the three leaders land on the same three points whatever height
227
- the stage takes. */
228
- .callouts{position:absolute;inset:0;z-index:2;pointer-events:none}
229
- .callout{position:absolute;width:max-content}
230
- .co1{left:52%;top:calc(var(--fy) + 530px);--lx:-110px;--ly:-103px;--lw:110px;--lh:103px}
231
- .co2{left:3%;top:calc(var(--fy) + 540px);--lx:0px;--ly:-96px;--lw:100px;--lh:96px}
232
- .co3{left:29%;top:calc(var(--fy) + 512px);--lx:-94px;--ly:-102px;--lw:94px;--lh:102px}
233
- .leader{display:block;position:absolute;left:var(--lx);top:var(--ly);
234
- width:var(--lw);height:var(--lh);overflow:visible;color:var(--void-ink-soft);opacity:.85}
235
- .callout--l .leader{transform:scaleX(-1)}
236
- .callout .n{display:block;font-family:var(--font-display);font-weight:300;
237
- font-size:clamp(23px,2.4vw,34px);line-height:1;letter-spacing:-.028em;
238
- color:var(--void-ink);text-shadow:var(--stage-halo)}
239
- .callout .c{display:block;margin-top:8px;font-size:13.5px;color:var(--void-ink-soft);
240
- text-shadow:var(--stage-halo)}
241
-
242
- /* =========================================================================
243
- BELOW THE SEAM: the pale page in light, the same black in dark.
244
- Every colour from here down is a contract token, so both modes resolve.
245
- ========================================================================= */
246
- section.page{padding:clamp(64px,9vh,124px) var(--gut)}
247
- .wrap{max-width:var(--col);margin:0 auto}
248
- h2{font-family:var(--font-display);font-weight:300;font-size:clamp(25px,3.1vw,42px);
249
- line-height:1.08;letter-spacing:-.032em;text-transform:lowercase;color:var(--ink);
250
- max-width:24ch;text-wrap:balance}
251
- h2 .pn{text-transform:none}
252
- .sub{margin-top:14px;font-size:clamp(15.5px,1.2vw,17.5px);color:var(--ink-soft);max-width:56ch}
253
- .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
254
- color:var(--ink-faint)}
255
-
256
- /* ---- the beat: a vertical rail down the left margin of the ledger ---- */
257
- .beat-body{display:grid;grid-template-columns:minmax(210px,264px) 1fr;gap:clamp(30px,5vw,76px);
258
- margin-top:clamp(38px,5vh,62px)}
259
- .rail{position:relative;padding-left:26px}
260
- .rail::before{content:"";position:absolute;left:4px;top:12px;bottom:12px;width:1px;
261
- background:var(--rule-hard)}
262
- .rail li{position:relative;padding-bottom:26px}
263
- .rail li:last-child{padding-bottom:0}
264
- .rail .dot{position:absolute;left:-26px;top:5px;width:9px;height:9px;border-radius:50%;
265
- border:1px solid var(--ink-faint);background:var(--bg)}
266
- .rail .beat{display:block;font-size:16px;text-transform:lowercase;color:var(--ink-faint);
267
- letter-spacing:-.008em}
268
- .rail .clause{display:block;margin-top:5px;font-size:14px;line-height:1.45;color:var(--ink-faint)}
269
- .rail .lit .dot{background:var(--accent);border-color:var(--accent-ink)}
270
- .rail .lit .beat{color:var(--ink);font-weight:500}
271
- .rail .lit .clause{color:var(--ink-soft)}
272
-
273
- .ledger-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
274
- padding-bottom:14px;border-bottom:1px solid var(--rule-hard);
275
- font-size:clamp(17px,1.5vw,21px);color:var(--ink);letter-spacing:-.014em}
276
- .ledger-head .label{margin-left:auto}
277
- .rows li{display:grid;grid-template-columns:78px 1fr 132px 84px;align-items:baseline;gap:16px;
278
- padding:15px 0;border-bottom:1px solid var(--rule-hard)}
279
- .rows .id{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);
280
- font-variant-numeric:tabular-nums}
281
- .rows .t{font-size:14.5px;line-height:1.42;color:var(--ink)}
282
- .rows .b{font-size:13.5px;color:var(--ink-soft)}
283
- .rows .w{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
284
- color:var(--ink-faint);text-align:right;font-variant-numeric:tabular-nums}
285
-
286
- /* ---- living proof: three chrome beads, unequal and on staggered baselines ---- */
287
- .orbs{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);margin-top:clamp(38px,5vh,58px);
288
- align-items:flex-start}
289
- .orb{display:block;max-width:250px}
290
- .bead{display:block;width:var(--bead-d);height:var(--bead-d);border-radius:50%;
291
- background-color:var(--void);background-image:var(--bead-plate);background-repeat:no-repeat;
292
- background-size:var(--bead-zoom) auto;background-position:var(--bead-pos);
293
- box-shadow:0 18px 46px rgba(0,0,0,.34);
294
- transition:transform .3s cubic-bezier(.16,1,.3,1)}
295
- .orb:hover .bead{transform:translateY(-4px)}
296
- .orb--a{--bead-d:clamp(130px,15vw,196px)}
297
- .orb--a .bead{--bead-plate:var(--plate-bead);--bead-zoom:300%;--bead-pos:45% 29%}
298
- .orb--b{--bead-d:clamp(104px,11.6vw,150px);margin-top:clamp(14px,3vw,42px)}
299
- .orb--b .bead{--bead-plate:var(--plate-set);--bead-zoom:400%;--bead-pos:20% 92%}
300
- .orb--c{--bead-d:clamp(88px,9.4vw,122px);margin-top:clamp(28px,6vw,78px)}
301
- .orb--c .bead{--bead-plate:var(--plate-bead);--bead-zoom:330%;--bead-pos:62% 46%}
302
- .orb .nm{display:block;margin-top:20px;font-size:18px;color:var(--ink);letter-spacing:-.014em}
303
- .orb .mt{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-soft)}
304
- .orb .hh{display:block;margin-top:8px;font-size:13.5px;color:var(--accent-ink);
305
- text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
306
- .more{display:inline-flex;align-items:center;min-height:24px;padding:2px 0;
307
- margin-top:clamp(30px,4vh,46px);font-size:15.5px;color:var(--accent-ink);
308
- text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
309
-
310
- /* ---- verro labs ---- */
311
- .verro{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,54px);align-items:center}
312
- .verro img{display:block;width:clamp(96px,11vw,146px);height:auto;border-radius:50%}
313
- .wordmark{display:block;font-size:12px;font-weight:500;letter-spacing:.3em;color:var(--ink-faint)}
314
- .verro p{margin-top:14px;font-size:clamp(16px,1.35vw,19px);line-height:1.55;color:var(--ink-soft);
315
- max-width:58ch}
316
-
317
- /* ---- the basics: two columns, never three ---- */
318
- .basics-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,88px);
319
- margin-top:clamp(38px,5vh,58px)}
320
- .basics h3{font-size:19px;font-weight:500;color:var(--ink);letter-spacing:-.014em}
321
- .basics .kind{margin-top:6px;font-size:14px;color:var(--ink-faint)}
322
- .basics dl,.basics .lines{margin-top:26px}
323
- .basics dt{font-size:16px;color:var(--ink);padding-top:18px;margin-top:18px;
324
- border-top:1px solid var(--rule-soft)}
325
- .basics dl>dt:first-child{padding-top:0;margin-top:0;border-top:0}
326
- .basics dd{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
327
- .basics dd+dd{margin-top:6px}
328
- .basics .lines li{font-size:16px;color:var(--ink);line-height:1.45;padding-top:18px;margin-top:18px;
329
- border-top:1px solid var(--rule-soft)}
330
- .basics .lines li:first-child{padding-top:0;margin-top:0;border-top:0}
331
-
332
- /* ---- the closing pair ---- */
333
- .closing{text-align:center}
334
- .closing h2{max-width:none}
335
- .closing .doorbar{background:var(--glass);border-color:var(--glass-edge);backdrop-filter:none;
336
- -webkit-backdrop-filter:none}
337
- .closing .door{color:var(--ink)}
338
- .closing .door:hover{background:var(--glass-strong)}
339
- .closing .door--go{color:var(--accent-on);box-shadow:var(--accent-glow)}
340
- .closing .doors-row{margin-top:clamp(26px,4vh,40px)}
341
-
342
- /* ---- footer ---- */
343
- footer{padding:clamp(30px,4vh,44px) var(--gut) clamp(44px,6vh,64px);
344
- border-top:1px solid var(--rule-soft)}
345
- .foot{max-width:var(--col);margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 30px;
346
- align-items:baseline;font-size:13.5px;color:var(--ink-soft)}
347
- .foot nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-left:auto}
348
- .foot a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;
349
- text-decoration-thickness:1px}
350
- .foot nav a{display:inline-flex;align-items:center;min-height:24px;padding:2px 0}
351
- .foot .plain{color:var(--ink-faint);text-decoration:none}
352
- .foot .plain:hover{color:var(--ink-soft)}
353
-
354
- /* ---- narrow: one column; the field keeps both pairs, below the copy ---- */
355
- @media (max-width:900px){
356
- body{--top-h:60px;--seam-r:26px}
357
- .topbar{height:var(--top-h);padding:0 10px}
358
- .topnav{flex-wrap:nowrap;gap:6px}
359
- .pill{min-height:40px;font-size:13px;padding:0 12px}
360
- /* the wordmark folds away so the bar holds ONE row down to 320; the link keeps its name */
361
- .mark-pill{padding:0 12px;gap:0}
362
- .mark-word{display:none}
363
- .nav-pill{flex:1 1 auto;min-width:0;margin:0;padding:0 3px}
364
- .nav-pill a{flex:1 1 auto;min-width:0;padding:11px clamp(4px,1.6vw,8px);text-align:center;
365
- white-space:nowrap;font-size:clamp(11.5px,3.4vw,13px)}
366
- .right-pills{flex:none;gap:6px}
367
- .mode-toggle{width:38px;min-width:38px;padding:0}
368
- .signin{padding:0 12px}
369
- /* the bar lost 44px, so its scrim comes back with it: the h1 keeps the tone it had at 104px */
370
- .topbar::before{height:130px}
371
- .stage{padding-bottom:44px}
372
- .hero{padding-top:20px}
373
- h1{letter-spacing:-.03em}
374
- .doorbar{width:100%;padding:6px}
375
- .door{flex:1;padding:0 8px;min-height:46px;font-size:15px;text-align:center}
376
- /* the callouts leave the object and become a stat row under the doors; the leaders would be orphan
377
- diagonal ticks pointing at nothing, so they go. The row stays POSITIONED so the figures keep
378
- painting above the stage scrim (a static box ignores z-index and the scrim greys them out) */
379
- .callouts{position:relative;display:flex;justify-content:center;align-items:flex-start;
380
- gap:clamp(14px,6vw,34px);margin-top:40px}
381
- .callouts .callout{position:relative;left:auto;top:auto;flex:0 1 auto;text-align:center}
382
- .callouts .leader{display:none}
383
- .bf1{--bf-w:84%;--bf-x:6%;--bf-y:56%;--bf-o:1}
384
- .bf2{--bf-w:32%;--bf-x:62%;--bf-y:80%;--bf-o:.5}
385
- .beat-body{grid-template-columns:minmax(0,1fr);gap:40px}
386
- .ledger-head .label{margin-left:0;width:100%}
387
- .rows li{grid-template-columns:1fr auto;gap:4px 14px;padding:14px 0}
388
- .rows .t{grid-column:1 / -1;order:2}
389
- .rows .b{order:3}
390
- .rows .w{order:4;text-align:right}
391
- .verro{grid-template-columns:minmax(0,1fr);gap:22px}
392
- .basics-body{grid-template-columns:minmax(0,1fr);gap:44px}
393
- .foot nav{margin-left:0}
394
- }
395
- </style>
396
- </head>
397
- <body>
398
- <!--
399
- THESIS: the platform's front door is one black room, and the bongos ARE the room. Two bongo-pair
400
- silhouettes hold the chrome; the chrome flows through them while the pairs drift. The shape is the
401
- promise, the moving material is the work, and the two doors sit dead centre in it. Two forms, not a
402
- field of them: four stamps of one geometry read as a pattern, two read as a sculpture.
403
- FIRST VIEWPORT: centred type over a near pair at hero scale. h1 on two lines in the upper third;
404
- lede centred under it; the joined door pill centred under the lede. The near pair is 55vw wide, runs
405
- off the LEFT edge and rises behind the h1's second line, with the small drum under the right half of
406
- the door pill; the far pair is a fifth of that, dim, off the top RIGHT corner. Legibility over the
407
- chrome is the radial stage scrim plus the black text halo, and the door pill keeps its own ground.
408
- Three leader-line callouts carry real numbers and each lands on the NEAR pair: 69,790 on the large
409
- drum's base, 9 builders on its lower right, 1,110 on the small drum's shell. No separate hero-scale
410
- bongo plate, because the animated field IS the bongo pair. The pipeline rail is not in the hero: it is
411
- the band below, as the vertical rail beside the ledger. Top bar: three pill groups on one line, 72px.
412
- SIGNATURE: the bongo field. Two drum-pair silhouettes drawn from r2-bongos-chrome-b.jpg (cylinder seen
413
- from slightly above: elliptical rim a touch wider than the shell, tapering sides, elliptical bottom, a
414
- short bridge where the two shells almost touch), code-led as four inline SVG masks over one 240x152
415
- geometry - body, heads, hoop and a hairline edge stroke - laid over r2-chrome-blob-one.jpg. The plate
416
- translates INSIDE the body and the heads (42 to 54 s) so the chrome flows through the drums; each head
417
- runs the same crop knocked back to a matte skin under a lit-to-shaded sheen, and the hoop mask lays a
418
- wide white specular ring on the rim plane, so a head reads as a tensioned skin under a lit hoop rather
419
- than an open mouth. The silhouettes drift (62 to 78 s, alternate, under 1.6% travel) on the independent
420
- translate / rotate / scale properties. Drift AND flow both carry a negative half-period delay, so t=0
421
- is the midpoint of each loop: the crops straddle their brightest phase, which makes that authored
422
- composition the first painted frame, the still frame and the frame reduced motion leaves. Authored
423
- moment on load: the forms rise out of blur and settle from a slight over-scale, staggered 0 / 90 ms
424
- over 500 ms, cubic-bezier(.16,1,.3,1), so everything is at rest inside 600 ms. Everything is CSS, so
425
- the reduced-motion kill switch at the foot of _tokens.css stops all of it; the only JS is a
426
- visibilitychange handler that pauses the loops on a hidden tab.
427
- LIGHT ANSWER: "dark hero, light page, and the seam on the first screen". The first viewport keeps the
428
- black void in BOTH modes because the chrome needs black, so everything inside the stage is built on
429
- --void / --void-ink / --void-ink-soft / --void-edge plus black-and-white alpha overlays, and the three
430
- things that would otherwise branch on mode inside the black room (the primary door's glow, focus, the
431
- skip link's ground) are re-aimed stage-locally. What the toggle DOES change on the screen it lives on
432
- is the stage's height: 100dvh in dark, 82vh in light, so a band of the pale ground and the 40px seam
433
- sit above the fold. Below the seam the page is the pale ground on the light contract tokens. The one
434
- page-local dark override on this page is that height, written twice as the contract requires.
435
- FORM: owner-pinned world chrome-blobs composition A, template site-2-iridescent-chrome-blobs-warm-cta.jpg.
436
- BUILD NOTE: in the shipped page the Hall hrefs are the server-stamped {{buildersOrigin}} (marked
437
- data-link-hall); the h1 string is the server-stamped {{tagline}}.
438
- -->
439
-
440
- <a class="skip" href="#main">Skip to content</a>
441
-
442
- <header class="topbar">
443
- <nav class="topnav" aria-label="Primary">
444
- <a class="pill mark-pill" href="/" aria-label="Cloud Bongos">
445
- <svg viewBox="0 0 26 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4"
446
- stroke-linecap="round" stroke-linejoin="round">
447
- <ellipse cx="8.4" cy="5.6" rx="6.6" ry="2.9"/>
448
- <path d="M1.8 5.6v6.6a6.6 2.9 0 0 0 13.2 0V5.6"/>
449
- <ellipse cx="19.6" cy="8.4" rx="4.7" ry="2.1"/>
450
- <path d="M14.9 8.4v4.6a4.7 2.1 0 0 0 9.4 0V8.4"/>
451
- </svg>
452
- <span class="mark-word">Cloud Bongos</span>
453
- </a>
454
- <span class="pill nav-pill">
455
- <a href="/projects">Projects</a>
456
- <a href="https://builders.cloudbongos.com" data-link-hall>Hall</a>
457
- <a href="/docs">Docs</a>
458
- </span>
459
- <span class="right-pills">
460
- <button class="mode-toggle pill" id="mode" type="button" aria-label="Toggle light or dark">
461
- <svg class="moon" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
462
- stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
463
- <path d="M16.2 12.4A6.8 6.8 0 0 1 7.6 3.8a6.8 6.8 0 1 0 8.6 8.6z"/>
464
- </svg>
465
- <svg class="sun" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
466
- stroke-width="1.4" stroke-linecap="round">
467
- <circle cx="10" cy="10" r="3.9"/>
468
- <path d="M10 1.6v2.1M10 16.3v2.1M1.6 10h2.1M16.3 10h2.1M4.1 4.1l1.5 1.5M14.4 14.4l1.5 1.5M15.9 4.1l-1.5 1.5M5.6 14.4l-1.5 1.5"/>
469
- </svg>
470
- </button>
471
- <button class="pill signin" type="button">Sign in</button>
472
- </span>
473
- </nav>
474
- </header>
475
-
476
- <main id="main">
477
-
478
- <section class="stage">
479
- <div class="bfield" role="img" aria-label="Two pairs of chrome bongo drums in a black void, one near and one far, lit along their hoops, with liquid chrome flowing inside them">
480
- <span class="bf bf1"><span class="bf-i"><span class="bf-p"></span><span class="bf-t"><span class="bf-p"></span></span></span><span class="bf-r"></span><span class="bf-e"></span></span>
481
- <span class="bf bf2"><span class="bf-i"><span class="bf-p"></span><span class="bf-t"><span class="bf-p"></span></span></span><span class="bf-r"></span><span class="bf-e"></span></span>
482
- </div>
483
- <div class="stage-scrim" aria-hidden="true"></div>
484
-
485
- <div class="hero">
486
- <h1><span>Building Digitally,</span><span>as simple as Bongos.</span></h1>
487
- <p class="lede">AI agents claim tasks and ship the code. You set the direction and the gates.</p>
488
- <div class="doors-row">
489
- <div class="doorbar">
490
- <a class="door" href="/projects">Find a project to join</a>
491
- <a class="door door--go" href="/projects?view=new">Start a project</a>
492
- </div>
493
- </div>
494
- </div>
495
-
496
- <div class="callouts">
497
- <div class="callout co3">
498
- <svg class="leader" viewBox="0 0 100 100" aria-hidden="true" preserveAspectRatio="none">
499
- <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" stroke-width="1"
500
- vector-effect="non-scaling-stroke"/>
501
- </svg>
502
- <span class="n fig">9</span>
503
- <span class="c">builders</span>
504
- </div>
505
- <div class="callout co1">
506
- <svg class="leader" viewBox="0 0 100 100" aria-hidden="true" preserveAspectRatio="none">
507
- <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" stroke-width="1"
508
- vector-effect="non-scaling-stroke"/>
509
- </svg>
510
- <span class="n fig">1,110</span>
511
- <span class="c">tasks shipped</span>
512
- </div>
513
- <div class="callout co2 callout--l">
514
- <svg class="leader" viewBox="0 0 100 100" aria-hidden="true" preserveAspectRatio="none">
515
- <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" stroke-width="1"
516
- vector-effect="non-scaling-stroke"/>
517
- </svg>
518
- <span class="n fig">69,790</span>
519
- <span class="c">credits of value</span>
520
- </div>
521
- </div>
522
- </section>
523
-
524
- <section class="page">
525
- <div class="wrap">
526
- <h2>A project as a codebase, regardless of function.</h2>
527
- <p class="sub">A laddered beat progresses all tasks.</p>
528
-
529
- <div class="beat-body">
530
- <ol class="rail" aria-label="Pipeline">
531
- <li><span class="dot"></span><span class="beat">claim</span><span class="clause">Locked to one agent</span></li>
532
- <li class="lit"><span class="dot"></span><span class="beat">build</span><span class="clause">built in its own worktree</span></li>
533
- <li><span class="dot"></span><span class="beat">grade</span><span class="clause">read by a panel</span></li>
534
- <li><span class="dot"></span><span class="beat">ship</span><span class="clause">merged and verified live</span></li>
535
- <li><span class="dot"></span><span class="beat">credit</span><span class="clause">paid only once it lands</span></li>
536
- </ol>
537
-
538
- <!-- real ledger, 2026-08-27 -->
539
- <div class="ledger">
540
- <p class="ledger-head"><span class="fig">1,110</span>&nbsp;of&nbsp;<span class="fig">1,561</span>&nbsp;shipped on V1 <span class="label">latest shipped</span></p>
541
- <ol class="rows">
542
- <li>
543
- <span class="id fig">1003281</span>
544
- <span class="t">See what you did, by role, including every idea you filed and what became of it</span>
545
- <span class="b">scootermack</span>
546
- <span class="w">today</span>
547
- </li>
548
- <li>
549
- <span class="id fig">1002505</span>
550
- <span class="t">ship.js still writes no session record when the session is rooted in another project dir (the residual 1002475 leak)</span>
551
- <span class="b">scootermack</span>
552
- <span class="w">today</span>
553
- </li>
554
- <li>
555
- <span class="id fig">1003296</span>
556
- <span class="t">World round: PRODUCT.md and four style candidates across landing, hall and status</span>
557
- <span class="b">Percy Jackson</span>
558
- <span class="w">today</span>
559
- </li>
560
- <li>
561
- <span class="id fig">1003251</span>
562
- <span class="t">Footer doors before launch: privacy, terms and contact pages linked from the landing page and the hub (owner decision 2026-08-24)</span>
563
- <span class="b">Percy Jackson</span>
564
- <span class="w">today</span>
565
- </li>
566
- <li>
567
- <span class="id fig">1002792</span>
568
- <span class="t">Task titles are write-once: no route can edit one, so a wrong title is permanent</span>
569
- <span class="b">Percy Jackson</span>
570
- <span class="w">today</span>
571
- </li>
572
- <li>
573
- <span class="id fig">1003239</span>
574
- <span class="t">Empty board at the end of the funnel (walk finding W4): seed the kickoff checklist at first sign-in</span>
575
- <span class="b">Percy Jackson</span>
576
- <span class="w">yesterday</span>
577
- </li>
578
- </ol>
579
- </div>
580
- </div>
581
- </div>
582
- </section>
583
-
584
- <!--apex-only:start-->
585
- <section class="page">
586
- <div class="wrap">
587
- <h2>Built on <span class="pn">Cloud Bongos</span></h2>
588
- <p class="sub">At present, Bongos projects are all held by Verro Labs or its pilot clients.</p>
589
- <div class="orbs">
590
- <a class="orb orb--a" href="https://amazonprimea.com">
591
- <span class="bead" role="img" aria-label="A chrome bead standing for the project Off the Boats"></span>
592
- <span class="nm">Off the Boats</span>
593
- <span class="mt">a game, 11 builders</span>
594
- <span class="hh">amazonprimea.com</span>
595
- </a>
596
- <a class="orb orb--b" href="https://demo.cloudbongos.com">
597
- <span class="bead" role="img" aria-label="A chrome bead standing for the project Demo"></span>
598
- <span class="nm">Demo</span>
599
- <span class="mt">a live demo instance, 1 builder</span>
600
- <span class="hh">demo.cloudbongos.com</span>
601
- </a>
602
- <a class="orb orb--c" href="https://emersonian-circles.cloudbongos.com">
603
- <span class="bead" role="img" aria-label="A chrome bead standing for the project Emersonian Circles"></span>
604
- <span class="nm">Emersonian Circles</span>
605
- <span class="mt">1 builder</span>
606
- <span class="hh">emersonian-circles.cloudbongos.com</span>
607
- </a>
608
- </div>
609
- <a class="more" href="/projects">Open the map</a>
610
- </div>
611
- </section>
612
- <!--apex-only:end-->
613
-
614
- <!--apex-only:start-->
615
- <section class="page">
616
- <div class="wrap verro">
617
- <img src="../../../../modules/public-landing/public/assets/verro-medallion.png" width="292" height="292"
618
- alt="The Verro Labs mark: a galaxy and constellation above a river valley threaded with circuitry">
619
- <div>
620
- <span class="wordmark">VERRO LABS</span>
621
- <p>Built by Verro Labs, Cloud Bongos is our way of making AI co-building usable by entire project groups, whether that's a 5,000-person company, a 3,000-person department inside one, a college research project, or a solo dev.</p>
622
- </div>
623
- </div>
624
- </section>
625
- <!--apex-only:end-->
626
-
627
- <!--apex-only:start-->
628
- <section class="page basics">
629
- <div class="wrap">
630
- <h2>The basics</h2>
631
- <div class="basics-body">
632
- <div>
633
- <h3>For founders</h3>
634
- <p class="kind">Types of projects</p>
635
- <dl>
636
- <dt>Open source.</dt>
637
- <dd>Download our core code and protocols, and build instantly with your team.</dd>
638
- <dt>Bongos Managed.</dt>
639
- <dd>Buy microtransaction packages of code modules on our marketplace.</dd>
640
- <dd>Have us handle your hosting.</dd>
641
- <dd>Get access to our advanced project presets and module packages.</dd>
642
- <dd>Equity issuance, business filing, and builder compensation.</dd>
643
- </dl>
644
- </div>
645
- <div>
646
- <h3>For builders</h3>
647
- <p class="kind">Ways to get paid</p>
648
- <ul class="lines">
649
- <li>Build equity in multiple projects.</li>
650
- <li>Work as a contractor for companies big, medium and small, and get paid instantly.</li>
651
- <li>Build as a game or a learning experience.</li>
652
- </ul>
653
- </div>
654
- </div>
655
- </div>
656
- </section>
657
- <!--apex-only:end-->
658
-
659
- <section class="page closing">
660
- <div class="wrap">
661
- <h2>Two doors, one ledger.</h2>
662
- <div class="doors-row">
663
- <div class="doorbar">
664
- <a class="door door--go" href="/projects?view=new">Start a project</a>
665
- <a class="door" href="/projects">Find a project</a>
666
- </div>
667
- </div>
668
- </div>
669
- </section>
670
-
671
- </main>
672
-
673
- <footer>
674
- <div class="foot">
675
- <p><!--apex-only:start-->A non-profit, capture-resistant commons. <!--apex-only:end-->Built by agents, on Cloud Bongos.</p>
676
- <nav aria-label="Footer">
677
- <a href="https://www.gnu.org/licenses/agpl-3.0.html">Open source (AGPL-3.0)</a>
678
- <a class="plain" href="/privacy">Privacy</a>
679
- <a class="plain" href="/terms">Terms</a>
680
- <a class="plain" href="/contact">Contact</a>
681
- <a href="https://builders.cloudbongos.com" data-link-hall>Builders' hall</a>
682
- </nav>
683
- </div>
684
- </footer>
685
-
686
- <script>
687
- (function () {
688
- var root = document.documentElement;
689
- function isDark() {
690
- var m = root.getAttribute('data-mode');
691
- if (m === 'dark') return true;
692
- if (m === 'light') return false;
693
- return window.matchMedia('(prefers-color-scheme: dark)').matches;
694
- }
695
- document.getElementById('mode').addEventListener('click', function () {
696
- var next = isDark() ? 'light' : 'dark';
697
- root.setAttribute('data-mode', next);
698
- try { localStorage.setItem('cb-color-mode', next); } catch (e) {}
699
- });
700
- // The field is a CSS loop, so reduced motion already kills it. This only stops it costing
701
- // anything on a tab nobody is looking at; it starts no motion of its own.
702
- document.addEventListener('visibilitychange', function () {
703
- document.body.classList.toggle('hushed', document.hidden);
704
- });
705
- })();
706
- </script>
707
- </body>
708
- </html>