@bongos/core 1.19.725 → 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 (229) hide show
  1. package/.bongos-core.json +179 -494
  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 +4 -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/gate-review.js +14 -6
  64. package/scripts/gds/gen-diagrams.js +1 -1
  65. package/scripts/gds/leak-scan-allowlist.js +293 -0
  66. package/scripts/gds/learning-capture.js +1 -1
  67. package/scripts/gds/linkify-refs.js +2 -2
  68. package/scripts/gds/local-preview-lib.js +1 -1
  69. package/scripts/gds/mirror-lineage-check.js +1 -1
  70. package/scripts/gds/mirror-redact.js +17 -2
  71. package/scripts/gds/newcomer-floor.templates.json +1 -1
  72. package/scripts/gds/package-core.js +18 -1
  73. package/scripts/gds/paste-token.js +1 -1
  74. package/scripts/gds/provision-units.js +2 -2
  75. package/scripts/gds/publish-manifest.js +15 -0
  76. package/scripts/gds/repo-metrics.js +1 -1
  77. package/scripts/gds/sandbox-stage.js +1 -1
  78. package/scripts/gds/seed-bongos-coreB-tranche1-tasks.js +1 -1
  79. package/scripts/gds/seed-bongos-coreB-tranche2-tasks.js +1 -1
  80. package/scripts/gds/seed-bongos-goal-hierarchy-tasks.js +1 -1
  81. package/scripts/gds/seed-bongos-tasks.js +2 -2
  82. package/scripts/gds/seed-gds-v4-tasks.js +1 -1
  83. package/scripts/gds/seed-medusa-tasks.js +10 -10
  84. package/scripts/gds/seed-module-upstreaming.js +1 -1
  85. package/scripts/gds/seed-productization-tasks.js +6 -6
  86. package/scripts/gds/seed-provisioning-tasks.js +2 -2
  87. package/scripts/gds/seed-staging.sh +19 -6
  88. package/scripts/gds/ship-deploy-target.js +1 -1
  89. package/scripts/gds/ship-flow.js +1 -1
  90. package/scripts/gds/smoke-gds.js +1 -1
  91. package/scripts/status-probe.mjs +2 -2
  92. package/src/bongos/auth-discord.js +2 -2
  93. package/src/bongos/live-channel.js +1 -1
  94. package/src/bongos/permission-path-check.js +80 -3
  95. package/src/bongos/pool.js +1 -1
  96. package/src/bongos/routes/auth.js +11 -11
  97. package/src/bongos/routes/security.js +1 -1
  98. package/src/bongos/routes.js +1 -1
  99. package/src/branding.js +1 -1
  100. package/src/devbox-downloads.js +1 -1
  101. package/src/instance-config.js +2 -2
  102. package/src/module-api.js +1 -1
  103. package/src/module-loader/provenance.js +2 -2
  104. package/tests/art_stage.mjs +2 -2
  105. package/tests/auth_anthropic_identity.mjs +1 -1
  106. package/tests/auth_duplicate_cookie.mjs +1 -1
  107. package/tests/auth_error_brand.mjs +1 -1
  108. package/tests/auth_inactive_builder.mjs +1 -1
  109. package/tests/backup_cli.mjs +4 -4
  110. package/tests/bongos_box_connect.mjs +2 -2
  111. package/tests/bongos_downloads.mjs +2 -2
  112. package/tests/bongos_login.mjs +5 -5
  113. package/tests/box_connect_e2e.mjs +2 -2
  114. package/tests/box_dns_repoint.mjs +10 -10
  115. package/tests/box_host_keys.mjs +1 -1
  116. package/tests/box_onboard.mjs +9 -9
  117. package/tests/box_scope_session.mjs +1 -1
  118. package/tests/box_terminal_ssrf.mjs +7 -7
  119. package/tests/boxes.mjs +9 -9
  120. package/tests/branding.mjs +2 -2
  121. package/tests/bump_version.mjs +2 -2
  122. package/tests/cf_tunnel.mjs +40 -40
  123. package/tests/cli_token_reissue.mjs +7 -7
  124. package/tests/cloud_bongos_pack.mjs +1 -1
  125. package/tests/currency_label.mjs +8 -8
  126. package/tests/dev_lib.mjs +4 -4
  127. package/tests/devbox_dmg_backdrop.mjs +1 -1
  128. package/tests/devbox_downloads.mjs +2 -2
  129. package/tests/devbox_icons.mjs +1 -1
  130. package/tests/discord_approvals.mjs +1 -1
  131. package/tests/discord_oauth.mjs +2 -2
  132. package/tests/executed_closure.mjs +6 -1
  133. package/tests/first_admin_bootstrap.mjs +1 -1
  134. package/tests/gate_approvals.mjs +5 -5
  135. package/tests/government_protected_surfaces.mjs +137 -0
  136. package/tests/grade_aggregates_unavailable.mjs +1 -1
  137. package/tests/hook_user_agents.mjs +2 -2
  138. package/tests/init.mjs +6 -6
  139. package/tests/instance_config.mjs +1 -1
  140. package/tests/instance_manifest.mjs +5 -5
  141. package/tests/instance_mismatch_guard.mjs +13 -13
  142. package/tests/leak_scan_allowlist.mjs +94 -0
  143. package/tests/migrate_root_resolution.mjs +4 -4
  144. package/tests/mirror_redact.mjs +28 -4
  145. package/tests/module_catalog.mjs +5 -5
  146. package/tests/module_submissions.mjs +3 -3
  147. package/tests/package_core.mjs +1 -1
  148. package/tests/parallel-load.mjs +6 -6
  149. package/tests/projects_hub.mjs +2 -2
  150. package/tests/provision.mjs +50 -50
  151. package/tests/provisioning_github_app_routes.mjs +1 -1
  152. package/tests/provisioning_onboard_mode.mjs +2 -2
  153. package/tests/publish_reconciler.mjs +4 -4
  154. package/tests/sandbox_stage.mjs +1 -1
  155. package/tests/scrubber_corpus.mjs +3 -3
  156. package/tests/search_isolation.mjs +1 -1
  157. package/tests/session_records.mjs +1 -1
  158. package/tests/ship_card.mjs +6 -6
  159. package/tests/ship_ci_deploy.mjs +1 -1
  160. package/tests/single_host_hall.mjs +9 -9
  161. package/tests/smoke_preflight.mjs +1 -1
  162. package/tests/smoke_target.mjs +1 -1
  163. package/tests/status-probe.mjs +1 -1
  164. package/tests/status_mirror_sync.mjs +1 -1
  165. package/docs/adr/0004-amazonprimea-name-and-trademark-acceptance.md +0 -45
  166. package/docs/design/mocks/_schemes.css +0 -604
  167. package/docs/design/mocks/component-sheet.html +0 -428
  168. package/docs/design/mocks/hall/_tokens.css +0 -370
  169. package/docs/design/mocks/hall/board/v1.html +0 -846
  170. package/docs/design/mocks/hall/board/v2.html +0 -858
  171. package/docs/design/mocks/hall/board/v3.html +0 -884
  172. package/docs/design/mocks/hall/goals/v1.html +0 -1212
  173. package/docs/design/mocks/hall/goals/v2.html +0 -1192
  174. package/docs/design/mocks/hall/goals/v3.html +0 -1205
  175. package/docs/design/mocks/hall/hall-sheet.html +0 -244
  176. package/docs/design/mocks/hall/reading/v1.html +0 -1125
  177. package/docs/design/mocks/hall/reading/v2.html +0 -1177
  178. package/docs/design/mocks/hall/reading/v3.html +0 -1150
  179. package/docs/design/mocks/hall/settings/v1.html +0 -1238
  180. package/docs/design/mocks/hall/settings/v2.html +0 -1235
  181. package/docs/design/mocks/hall/settings/v3.html +0 -1299
  182. package/docs/design/mocks/hall/task/v1.html +0 -633
  183. package/docs/design/mocks/hall/task/v2.html +0 -646
  184. package/docs/design/mocks/hall/task/v3.html +0 -647
  185. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg +0 -0
  186. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg.json +0 -13
  187. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg +0 -0
  188. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg.json +0 -13
  189. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg +0 -0
  190. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg.json +0 -13
  191. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg +0 -0
  192. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg.json +0 -13
  193. package/docs/design/mocks/hub/hub-sheet.html +0 -192
  194. package/docs/design/mocks/hub/mine.html +0 -465
  195. package/docs/design/mocks/hub/picker.html +0 -421
  196. package/docs/design/mocks/hub/planets.html +0 -356
  197. package/docs/design/mocks/hub/v1.html +0 -1209
  198. package/docs/design/mocks/hub/v2.html +0 -1257
  199. package/docs/design/mocks/hub/v3.html +0 -1496
  200. package/docs/design/mocks/hub/wizard.html +0 -421
  201. package/docs/design/mocks/landing/landing-sheet.html +0 -131
  202. package/docs/design/mocks/landing/v1.html +0 -956
  203. package/docs/design/mocks/landing/v2.html +0 -708
  204. package/docs/design/mocks/landing/v3.html +0 -911
  205. package/docs/design/mocks/landing-page-mock.html +0 -687
  206. package/docs/design/mocks/landing-palettes.html +0 -103
  207. package/docs/design/mocks/projects-hub-mock.html +0 -991
  208. package/docs/design/mocks/projects-hub-variants.html +0 -146
  209. package/docs/design/mocks/projects-page-mock.html +0 -167
  210. package/docs/design/mocks/world/blue-hud/_tokens.css +0 -246
  211. package/docs/design/mocks/world/blue-hud/hall.html +0 -595
  212. package/docs/design/mocks/world/blue-hud/landing.html +0 -424
  213. package/docs/design/mocks/world/blue-hud/status.html +0 -410
  214. package/docs/design/mocks/world/chrome-blobs/_tokens.css +0 -479
  215. package/docs/design/mocks/world/chrome-blobs/hall.html +0 -553
  216. package/docs/design/mocks/world/chrome-blobs/landing-b.html +0 -581
  217. package/docs/design/mocks/world/chrome-blobs/landing.html +0 -328
  218. package/docs/design/mocks/world/chrome-blobs/status.html +0 -416
  219. package/docs/design/mocks/world/natgeo-editorial/_tokens.css +0 -377
  220. package/docs/design/mocks/world/natgeo-editorial/hall.html +0 -649
  221. package/docs/design/mocks/world/natgeo-editorial/landing-b.html +0 -743
  222. package/docs/design/mocks/world/natgeo-editorial/landing.html +0 -475
  223. package/docs/design/mocks/world/natgeo-editorial/status.html +0 -437
  224. package/docs/design/mocks/world/organic-cards/_tokens.css +0 -462
  225. package/docs/design/mocks/world/organic-cards/hall.html +0 -625
  226. package/docs/design/mocks/world/organic-cards/landing-b.html +0 -736
  227. package/docs/design/mocks/world/organic-cards/landing.html +0 -420
  228. package/docs/design/mocks/world/organic-cards/status.html +0 -458
  229. package/docs/design/mocks/world/world-sheet.html +0 -156
package/docs/design/mocks/landing/v3.html DELETED
@@ -1,911 +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
- body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:400;
18
- -webkit-font-smoothing:antialiased;overflow-x:hidden}
19
- a{color:inherit;text-decoration:none}
20
- img{max-width:100%;display:block}
21
- h1,h2,h3,p,ol,ul,figure{margin:0}
22
- ol,ul{list-style:none;padding:0}
23
- ::selection{background:var(--accent);color:var(--accent-on)}
24
- :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
25
- .skip{position:absolute;left:-9999px;top:0;z-index:9;min-height:24px;padding:11px 18px;border-radius:999px;
26
- background:var(--bg-card);color:var(--ink);border:1px solid var(--rule);font-size:15px}
27
- .skip:focus{left:14px;top:14px}
28
-
29
- /* ===================== the chrome field =====================
30
- Three plates, each one crop of one rendered plate. In dark the plates are the black-ground JPEGs
31
- composited with lighten; in light they are the alpha cutouts on the pale ground with a contact
32
- shadow, so the same sculpture reads as objects on paper. Crop maths: size/position derive from the
33
- crop rectangle [u0,u1] x [v0,v1] and the plate aspect, so a layer scales with its own width token. */
34
- .field{position:absolute;top:calc(var(--top-h) * -1);left:0;right:0;bottom:0;overflow:hidden;
35
- pointer-events:none;isolation:isolate;
36
- -webkit-mask-image:var(--sky-mask);mask-image:var(--sky-mask)}
37
- .plate{position:absolute;background-repeat:no-repeat;mix-blend-mode:var(--sky-blend);
38
- filter:var(--sky-shadow) hue-rotate(0deg);pointer-events:none}
39
-
40
- /* r2-chrome-blobs-set, u[.22,.96] v[0,1] : the sweeping form across the upper right. The crop runs
41
- to the plate's own bottom edge, which is empty on the right, so the layer has no hard lower cut.
42
- The crop's lower left catches the round blob's shoulder, so two masks union to "keep the right
43
- side OR the top", dissolving that corner instead of cutting it square. */
44
- .form{left:var(--form-x);top:var(--form-y);width:var(--form-w);aspect-ratio:1.32584;
45
- background-image:var(--sky-set);
46
- background-size:calc(var(--form-w) * 1.35135) auto;
47
- background-position:calc(var(--form-w) * -.2973) 0;
48
- -webkit-mask-image:var(--form-mask);mask-image:var(--form-mask);
49
- animation:arrive-form 700ms cubic-bezier(.16,1,.3,1) both}
50
-
51
- /* r2-chrome-blob-one, cropped to the form's own silhouette u[.14,.865] v[.172,.808] : the big round
52
- blob the doors float inside. The single-blob plate is used rather than the set's round blob
53
- because the set's runs off its own lower edge, and a form cropped by nothing is what light mode
54
- needs. This is the one that breathes, and the only one the hue drift moves. */
55
- .orb{left:var(--orb-x);top:var(--orb-y);width:var(--orb-w);aspect-ratio:1.13994;
56
- background-image:var(--sky-bead);
57
- background-size:calc(var(--orb-w) * 1.37931) auto;
58
- background-position:calc(var(--orb-w) * -.1931) calc(var(--orb-w) * -.23724);
59
- animation:arrive-orb 700ms cubic-bezier(.16,1,.3,1) 70ms both,
60
- breathe 32s ease-in-out 700ms infinite,
61
- sheen 40s ease-in-out infinite}
62
-
63
- /* r2-chrome-blobs-set, u[.808,.952] v[.50,.84] : the set's own small bead, the third form in the
64
- plate, orbiting the big blob. Its centre token is the blob's centre; the orbit translates it out
65
- by --orbit-r and walks it round in twelve steps. */
66
- .bead{left:calc(var(--bead-cx) - var(--bead-w) / 2);
67
- top:calc(var(--bead-cy) - var(--bead-w) * .65885);
68
- width:var(--bead-w);aspect-ratio:.75891;background-image:var(--sky-set);
69
- background-size:calc(var(--bead-w) * 6.94444) auto;
70
- background-position:calc(var(--bead-w) * -5.61111) calc(var(--bead-w) * -1.93798);
71
- translate:var(--orbit-r) 0;
72
- animation:arrive-bead 700ms cubic-bezier(.16,1,.3,1) 140ms both,orbit 60s linear infinite}
73
-
74
- /* the authored moment: the forms arrive from slightly apart and converge into place */
75
- @keyframes arrive-form{from{translate:3.4vw -2.2vh;opacity:.36}to{translate:0 0;opacity:1}}
76
- @keyframes arrive-orb{from{translate:-2.8vw 2.4vh;opacity:.36}to{translate:0 0;opacity:1}}
77
- @keyframes arrive-bead{from{scale:.78;opacity:0}to{scale:1;opacity:1}}
78
- @keyframes arrive-mark{from{translate:2.6vw 1.8vh;opacity:.36}to{translate:0 0;opacity:1}}
79
- /* the breath: a 32s swell, and a 40s hue drift so the iridescence keeps moving */
80
- @keyframes breathe{0%{scale:1}50%{scale:1.035}100%{scale:1}}
81
- @keyframes sheen{0%{filter:var(--sky-shadow) hue-rotate(0deg)}
82
- 25%{filter:var(--sky-shadow) hue-rotate(-12deg)}
83
- 75%{filter:var(--sky-shadow) hue-rotate(12deg)}
84
- 100%{filter:var(--sky-shadow) hue-rotate(0deg)}}
85
- /* a 60s circular path, walked as twelve steps on the translate property */
86
- @keyframes orbit{
87
- 0%{translate:calc(var(--orbit-r) * 1) 0}
88
- 8.333%{translate:calc(var(--orbit-r) * .866) calc(var(--orbit-r) * .5)}
89
- 16.666%{translate:calc(var(--orbit-r) * .5) calc(var(--orbit-r) * .866)}
90
- 25%{translate:0 calc(var(--orbit-r) * 1)}
91
- 33.333%{translate:calc(var(--orbit-r) * -.5) calc(var(--orbit-r) * .866)}
92
- 41.666%{translate:calc(var(--orbit-r) * -.866) calc(var(--orbit-r) * .5)}
93
- 50%{translate:calc(var(--orbit-r) * -1) 0}
94
- 58.333%{translate:calc(var(--orbit-r) * -.866) calc(var(--orbit-r) * -.5)}
95
- 66.666%{translate:calc(var(--orbit-r) * -.5) calc(var(--orbit-r) * -.866)}
96
- 75%{translate:0 calc(var(--orbit-r) * -1)}
97
- 83.333%{translate:calc(var(--orbit-r) * .5) calc(var(--orbit-r) * -.866)}
98
- 91.666%{translate:calc(var(--orbit-r) * .866) calc(var(--orbit-r) * -.5)}
99
- 100%{translate:calc(var(--orbit-r) * 1) 0}}
100
- .scrim{position:absolute;top:calc(var(--top-h) * -1);left:0;right:0;bottom:0;z-index:1;
101
- background:var(--sky-scrim);pointer-events:none}
102
-
103
- /* ===================== top bar: three pill groups on one line ===================== */
104
- .topbar{position:relative;z-index:3;height:var(--top-h);display:flex;align-items:center;padding:0 26px}
105
- .topbar::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:128px;
106
- background:var(--sky-topscrim);pointer-events:none}
107
- .topnav{display:flex;align-items:center;gap:12px;width:100%}
108
- .pill{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;
109
- border-radius:var(--radius-pill);background:var(--pill-bg);border:1px solid var(--pill-edge);
110
- backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
111
- font-family:inherit;font-size:16px;color:var(--ink);cursor:pointer;
112
- transition:background .25s cubic-bezier(.2,.7,.3,1),color .2s ease}
113
- .pill:hover{background:var(--pill-bg-hi)}
114
- .mark-pill{gap:10px;padding:0 24px;background:var(--pill-bg-hi);letter-spacing:-.012em}
115
- .mark-pill svg{width:23px;height:18px;display:block;flex:none}
116
- .nav-pill{gap:0;padding:0 6px;margin:0 auto}
117
- .nav-pill a{padding:13px 22px;border-radius:var(--radius-pill);font-size:16px;text-transform:lowercase;
118
- color:var(--ink-soft);transition:color .2s ease}
119
- .nav-pill a:hover{color:var(--ink)}
120
- .right-pills{display:flex;align-items:center;gap:10px}
121
- .mode-toggle{width:46px;min-width:46px;padding:0}
122
- .mode-toggle svg{width:18px;height:18px}
123
- .sun{display:none}
124
- :root[data-mode="dark"] .sun{display:block}
125
- :root[data-mode="dark"] .moon{display:none}
126
- @media (prefers-color-scheme:dark){:root:not([data-mode="light"]) .sun{display:block}
127
- :root:not([data-mode="light"]) .moon{display:none}}
128
- .signin{background:color-mix(in srgb,var(--ink) 92%,var(--bg));color:var(--bg);border-color:transparent;
129
- text-transform:lowercase;font-weight:500;padding:0 30px}
130
- .signin:hover{background:var(--ink);color:var(--bg)}
131
-
132
- /* ===================== hero ===================== */
133
- .hero{position:relative;min-height:calc(100dvh - var(--top-h));padding:0 26px}
134
- .layer{position:var(--layer-pos);top:calc(var(--top-h) * -1);left:0;right:0;bottom:0;z-index:2;
135
- pointer-events:none}
136
- h1{position:var(--float2);left:var(--h1-x);right:var(--h1-x);top:var(--h1-top);margin:0;
137
- font-family:var(--font-display);
138
- font-weight:300;font-size:var(--h1-size);line-height:.92;letter-spacing:-.042em;
139
- text-transform:lowercase;color:var(--ink);text-shadow:var(--type-halo)}
140
- h1 span{display:block;white-space:nowrap}
141
- h1 .l2{margin-left:var(--h1-indent)}
142
- .lede{position:var(--float2);left:var(--lede-x);top:var(--lede-y);width:var(--lede-w);max-width:100%;
143
- font-size:18.5px;line-height:1.42;color:var(--ink-soft);text-shadow:var(--type-halo)}
144
-
145
- /* the hero object: the three-quarter chrome pair, an alpha cutout with its own contact shadow */
146
- .mark{position:var(--float2);left:var(--mark-x);top:var(--mark-y);width:var(--mark-w);aspect-ratio:1;
147
- background-image:var(--sky-bongos);background-repeat:no-repeat;background-size:100% auto;
148
- pointer-events:none;animation:arrive-mark 700ms cubic-bezier(.16,1,.3,1) 210ms both}
149
-
150
- /* leader-line callouts: annotations on the object, on real ledger numbers */
151
- .callout{position:var(--float2)}
152
- .c1{left:var(--c1-x);top:var(--c1-y)}
153
- .c2{left:var(--c2-x);top:var(--c2-y)}
154
- .c3{left:var(--c3-x);top:var(--c3-y)}
155
- .leader{display:block;width:var(--leader-len);height:30px;margin-bottom:12px;overflow:visible;
156
- color:var(--ink-soft);opacity:.7}
157
- .c2 .leader{transform:var(--c2-flip)}
158
- .c3 .leader{transform:var(--c3-flip)}
159
- .fig{display:block;font-size:clamp(24px,2.4vw,34px);font-weight:300;letter-spacing:-.025em;
160
- font-variant-numeric:tabular-nums;color:var(--ink);line-height:1;text-shadow:var(--type-halo)}
161
- .cap{display:block;margin-top:8px;font-size:14px;color:var(--ink-soft);text-shadow:var(--type-halo)}
162
-
163
- /* the two doors, one joined pill, floating inside the big blob */
164
- .doors{position:var(--float2);left:var(--doors-cx);top:var(--doors-cy);transform:var(--doors-shift);
165
- display:flex;justify-content:center;pointer-events:auto}
166
- .doorbar{display:inline-flex;align-items:center;gap:6px;padding:7px;border-radius:var(--radius-pill);
167
- background:var(--door-ground);border:1px solid var(--door-edge);
168
- backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
169
- .door{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 30px;
170
- border-radius:var(--radius-pill);font-size:17px;text-transform:lowercase;color:var(--ink);
171
- transition:background .25s cubic-bezier(.2,.7,.3,1),color .25s ease}
172
- .door:hover{background:var(--pill-bg-hi)}
173
- .door--go{background:var(--accent);color:var(--accent-on);font-weight:500;box-shadow:var(--accent-glow)}
174
- .door--go:hover{background:var(--accent-lift);color:var(--accent-on)}
175
-
176
- /* ===================== the spine below the fold ===================== */
177
- .band{position:relative;border-top:1px solid var(--rule-soft);
178
- padding:clamp(58px,8.4vh,104px) 26px clamp(58px,8.4vh,104px)}
179
- .wrap{max-width:1180px;margin:0 auto}
180
- h2{font-family:var(--font-display);font-weight:300;font-size:clamp(26px,3.1vw,42px);line-height:1.06;
181
- letter-spacing:-.035em;color:var(--ink)}
182
- .sub{margin-top:14px;font-size:17px;line-height:1.5;color:var(--ink-soft);max-width:56ch}
183
- .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
184
- color:var(--ink-faint)}
185
- .more{display:inline-block;margin-top:32px;min-height:24px;padding:3px 0;line-height:1.25;
186
- font-size:16px;color:var(--accent-ink);
187
- text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
188
-
189
- /* Living proof: real projects as chrome beads. Each project is a DIFFERENT object, addressed by the
190
- same [u0,u1] x [v0,v1] crop maths .form and .bead use, so the constellation is three forms and not
191
- one silhouette repeated: the round blob, the chrome pair, the set's small bead. Only those three
192
- are WHOLE. A rectangle cannot isolate the set's other two forms: the sweeping one runs off the
193
- plate's top over half its width and the round one off its bottom over a third, and either crop
194
- also catches a tail of its neighbour. The closing figure is the pair again, at the doors. */
195
- .orbs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(28px,5vw,74px);margin-top:52px}
196
- .orb-item{margin-bottom:var(--drop)}
197
- .orb-item a{display:block}
198
- .orb-bead{display:block;width:var(--dia);aspect-ratio:var(--bead-ar);background-image:var(--bead-src);
199
- background-repeat:no-repeat;background-size:calc(var(--dia) * var(--bead-zoom)) auto;
200
- background-position:calc(var(--dia) * var(--bead-px)) calc(var(--dia) * var(--bead-py));
201
- mix-blend-mode:var(--sky-blend);
202
- filter:var(--sky-shadow);transition:translate .4s cubic-bezier(.16,1,.3,1)}
203
- .orb-item a:hover .orb-bead{translate:0 -8px}
204
- .orb-name{display:block;margin-top:14px;font-size:19px;color:var(--ink);letter-spacing:-.015em}
205
- .orb-meta{display:block;margin-top:5px;font-size:14px;color:var(--ink-soft)}
206
- /* r2-chrome-blob-one, u[.14,.865] v[.172,.808] : the round blob, whole */
207
- .o1{--dia:clamp(150px,17vw,232px);--drop:0;
208
- --bead-src:var(--sky-bead);--bead-ar:1.13994;--bead-zoom:1.37931;--bead-px:-.19310;--bead-py:-.23724}
209
- /* r2-bongos-chrome-a-cut, the whole plate: the chrome pair, the third object in the world's cast */
210
- .o2{--dia:clamp(104px,11vw,146px);--drop:44px;
211
- --bead-src:var(--sky-bongos);--bead-ar:1;--bead-zoom:1;--bead-px:0;--bead-py:0}
212
- /* r2-chrome-blobs-set, u[.810,.955] v[.556,.840] : the set's small bead, whole on every side */
213
- .o3{--dia:clamp(96px,10vw,132px);--drop:16px;
214
- --bead-src:var(--sky-set);--bead-ar:.91476;--bead-zoom:6.89655;--bead-px:-5.58621;--bead-py:-2.14014}
215
-
216
- /* the lifecycle: five beats on one rail, exactly one lit */
217
- .beat{display:grid;grid-template-columns:repeat(5,1fr);margin-top:54px}
218
- .beat li{padding:20px 22px 0 0;border-top:1px solid var(--rule-soft)}
219
- .beat .dot{display:block;width:7px;height:7px;border-radius:50%;border:1px solid var(--ink-faint)}
220
- .beat .step{display:block;margin-top:16px;font-family:var(--label-face);font-size:12px;
221
- letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
222
- .beat .clause{display:block;margin-top:10px;font-size:15.5px;line-height:1.42;color:var(--ink-soft)}
223
- .beat .lit{border-top-color:var(--accent)}
224
- .beat .lit .dot{background:var(--accent);border-color:var(--accent);
225
- box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
226
- .beat .lit .step{color:var(--ink)}
227
-
228
- /* the ledger: real rows, tabular figures, hairlines */
229
- .figline{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,3.7vw,52px);
230
- letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1}
231
- .meter{margin-top:22px;height:3px;background:var(--rule-soft);border-radius:2px;overflow:hidden}
232
- .meter i{display:block;height:100%;width:71.1%;background:var(--ink)}
233
- .rows{margin-top:44px}
234
- .rows li{display:grid;grid-template-columns:88px 1fr 152px 96px;gap:20px;align-items:baseline;
235
- padding:15px 0;border-top:1px solid var(--rule-soft)}
236
- .rows .id{font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);
237
- font-variant-numeric:tabular-nums}
238
- .rows .what{font-size:16px;line-height:1.4;color:var(--ink)}
239
- .rows .who,.rows .when{font-size:14px;color:var(--ink-soft)}
240
- .rows .when{text-align:right;font-variant-numeric:tabular-nums}
241
-
242
- /* verro labs: medallion, wordmark, one paragraph, no frame */
243
- .verro{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,58px);align-items:start}
244
- .verro img{width:clamp(92px,9vw,124px);height:auto}
245
- .wordmark{font-family:var(--font-mono);font-size:13px;letter-spacing:.3em;color:var(--ink)}
246
- .verro p.body{margin-top:18px;font-size:17.5px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
247
-
248
- /* the basics: two columns, never three */
249
- .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,84px);margin-top:8px}
250
- .two h3{font-family:var(--font-display);font-weight:300;font-size:clamp(23px,2.4vw,32px);
251
- letter-spacing:-.03em;color:var(--ink);margin-top:12px}
252
- .two ul{margin-top:24px}
253
- .two li{padding:16px 0;border-top:1px solid var(--rule-soft);font-size:16.5px;line-height:1.46;
254
- color:var(--ink-soft)}
255
- .two li b{font-weight:500;color:var(--ink)}
256
- .two .nest{margin-top:12px;padding-left:18px;border-left:1px solid var(--rule-soft)}
257
- .two .nest li{border-top:0;padding:5px 0;font-size:15.5px}
258
-
259
- /* the closing pair */
260
- .close{text-align:center}
261
- .close .closemark{--dia:clamp(128px,14vw,196px);width:var(--dia);aspect-ratio:1;
262
- margin:0 auto 34px;
263
- background-image:var(--sky-bongos);background-repeat:no-repeat;background-size:100% auto;
264
- filter:var(--sky-shadow)}
265
- .close .doorbar{margin:0 auto}
266
-
267
- /* footer */
268
- footer{position:relative;border-top:1px solid var(--rule-soft);padding:30px 26px 52px;font-size:14.5px;
269
- color:var(--ink-soft)}
270
- .footrow{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}
271
- .footrow p{margin-right:auto;max-width:62ch}
272
- /* the footer row aligns on the baseline, so the box that gets these links to 24px is symmetric */
273
- footer a{display:inline-block;min-height:24px;padding:3px 0;line-height:1.24;
274
- color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;
275
- text-decoration-thickness:1px}
276
-
277
- /* ===================== page-local tokens: LIGHT is the base ===================== */
278
- /* Light is the rebuilt answer: no black panel. The same sculpture sits directly on the pale ground
279
- as alpha cutouts with a soft contact shadow, the type moves to clean paper on the left, and the
280
- doors and callouts keep their geometry as annotations on the object. */
281
- body{
282
- --sky-set:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blobs-set-cut.png);
283
- --sky-bead:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blob-one-cut.png);
284
- --sky-bongos:url(../../../../.impeccable/mocks/world-assets/r2-bongos-chrome-a-cut.png);
285
- --sky-blend:normal;
286
- --sky-shadow:drop-shadow(0 26px 30px color-mix(in srgb,var(--ink) 20%,transparent));
287
- --sky-mask:none;
288
- --sky-scrim:none;
289
- --sky-topscrim:none;
290
- --pill-bg:color-mix(in srgb,var(--bg) 88%,transparent);
291
- --pill-bg-hi:color-mix(in srgb,var(--bg-card) 94%,transparent);
292
- --pill-edge:var(--rule-soft);
293
- --door-ground:color-mix(in srgb,var(--bg-card) 93%,transparent);
294
- --door-edge:var(--rule);
295
- --layer-pos:absolute;
296
- --float2:absolute;
297
- --doors-shift:translate(-50%,-50%);
298
- --h1-size:clamp(34px,5.3vw,78px);
299
- --h1-x:3vw;
300
- --h1-top:15vh;
301
- --h1-indent:5%;
302
- --lede-x:3vw;
303
- --lede-y:32vh;
304
- --lede-w:320px;
305
- --leader-len:170px;
306
- --form-mask:linear-gradient(to right,transparent 0 36%,#000 52%);
307
- --form-w:52vw;
308
- --form-x:56vw;
309
- --form-y:-18vh;
310
- --orb-w:48vw;
311
- --orb-x:32vw;
312
- --orb-y:32vh;
313
- --bead-w:7.2vw;
314
- --bead-cx:56vw;
315
- --bead-cy:66vh;
316
- --orbit-r:11vw;
317
- --mark-w:22vw;
318
- --mark-x:78vw;
319
- --mark-y:13vh;
320
- --c1-x:63vw;
321
- --c1-y:15vh;
322
- --c2-x:22vw;
323
- --c2-y:66vh;
324
- --c2-flip:none;
325
- --c3-x:20vw;
326
- --c3-y:44vh;
327
- --c3-flip:none;
328
- --doors-cx:56vw;
329
- --doors-cy:60vh;
330
- }
331
-
332
- :root[data-mode="dark"] body{
333
- --sky-set:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blobs-set.jpg);
334
- --sky-bead:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blob-one.jpg);
335
- --sky-bongos:url(../../../../.impeccable/mocks/world-assets/r2-bongos-chrome-a-cut.png);
336
- --sky-blend:var(--blob-blend);
337
- --sky-shadow:opacity(1);
338
- --sky-mask:none;
339
- --sky-scrim:radial-gradient(30% 13% at 15% 42%,rgba(0,0,0,.94),rgba(0,0,0,.6) 58%,rgba(0,0,0,0) 100%),radial-gradient(60% 55% at 26% 32%,rgba(0,0,0,.88),rgba(0,0,0,.42) 48%,rgba(0,0,0,0) 76%);
340
- --sky-topscrim:linear-gradient(to bottom,rgba(0,0,0,.84) 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 100%);
341
- --pill-bg:var(--void-glass);
342
- --pill-bg-hi:var(--void-glass-strong);
343
- --pill-edge:var(--void-glass-edge);
344
- --door-ground:var(--void-pill);
345
- --door-edge:var(--void-glass-edge);
346
- --layer-pos:absolute;
347
- --float2:absolute;
348
- --doors-shift:translate(-50%,-50%);
349
- --h1-size:clamp(34px,6.7vw,96px);
350
- --h1-x:3vw;
351
- --h1-top:16vh;
352
- --h1-indent:8%;
353
- --lede-x:3vw;
354
- --lede-y:38vh;
355
- --lede-w:300px;
356
- --leader-len:104px;
357
- --form-mask:linear-gradient(to right,transparent 0 34%,#000 50%),linear-gradient(to bottom,#000 0 44%,transparent 54%);
358
- --form-w:70vw;
359
- --form-x:40vw;
360
- --form-y:-12vh;
361
- --orb-w:54vw;
362
- --orb-x:5vw;
363
- --orb-y:24vh;
364
- --bead-w:8.3vw;
365
- --bead-cx:32vw;
366
- --bead-cy:62vh;
367
- --orbit-r:15vw;
368
- --mark-w:27vw;
369
- --mark-x:71vw;
370
- --mark-y:12vh;
371
- --c1-x:61vw;
372
- --c1-y:13vh;
373
- --c2-x:64vw;
374
- --c2-y:74vh;
375
- --c2-flip:scaleX(-1);
376
- --c3-x:70vw;
377
- --c3-y:55vh;
378
- --c3-flip:scaleX(-1);
379
- --doors-cx:32vw;
380
- --doors-cy:53vh;
381
- }
382
-
383
- @media (prefers-color-scheme:dark){
384
- :root:not([data-mode="light"]) body{
385
- --sky-set:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blobs-set.jpg);
386
- --sky-bead:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blob-one.jpg);
387
- --sky-bongos:url(../../../../.impeccable/mocks/world-assets/r2-bongos-chrome-a-cut.png);
388
- --sky-blend:var(--blob-blend);
389
- --sky-shadow:opacity(1);
390
- --sky-mask:none;
391
- --sky-scrim:radial-gradient(30% 13% at 15% 42%,rgba(0,0,0,.94),rgba(0,0,0,.6) 58%,rgba(0,0,0,0) 100%),radial-gradient(60% 55% at 26% 32%,rgba(0,0,0,.88),rgba(0,0,0,.42) 48%,rgba(0,0,0,0) 76%);
392
- --sky-topscrim:linear-gradient(to bottom,rgba(0,0,0,.84) 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 100%);
393
- --pill-bg:var(--void-glass);
394
- --pill-bg-hi:var(--void-glass-strong);
395
- --pill-edge:var(--void-glass-edge);
396
- --door-ground:var(--void-pill);
397
- --door-edge:var(--void-glass-edge);
398
- --layer-pos:absolute;
399
- --float2:absolute;
400
- --doors-shift:translate(-50%,-50%);
401
- --h1-size:clamp(34px,6.7vw,96px);
402
- --h1-x:3vw;
403
- --h1-top:16vh;
404
- --h1-indent:8%;
405
- --lede-x:3vw;
406
- --lede-y:38vh;
407
- --lede-w:300px;
408
- --leader-len:104px;
409
- --form-mask:linear-gradient(to right,transparent 0 34%,#000 50%),linear-gradient(to bottom,#000 0 44%,transparent 54%);
410
- --form-w:70vw;
411
- --form-x:40vw;
412
- --form-y:-12vh;
413
- --orb-w:54vw;
414
- --orb-x:5vw;
415
- --orb-y:24vh;
416
- --bead-w:8.3vw;
417
- --bead-cx:32vw;
418
- --bead-cy:62vh;
419
- --orbit-r:15vw;
420
- --mark-w:27vw;
421
- --mark-x:71vw;
422
- --mark-y:12vh;
423
- --c1-x:61vw;
424
- --c1-y:13vh;
425
- --c2-x:64vw;
426
- --c2-y:74vh;
427
- --c2-flip:scaleX(-1);
428
- --c3-x:70vw;
429
- --c3-y:55vh;
430
- --c3-flip:scaleX(-1);
431
- --doors-cx:32vw;
432
- --doors-cy:53vh;
433
- }
434
- }
435
-
436
- /* ===================== narrow: one column, the sculpture behind ===================== */
437
- @media (max-width:900px){
438
- .topbar{height:var(--top-h);padding:0 10px}
439
- .topnav{flex-wrap:nowrap;gap:6px}
440
- .pill{min-height:42px;font-size:13px;padding:0 12px}
441
- /* the wordmark folds away so the bar holds ONE row down to 320; the link keeps its name */
442
- .mark-pill{padding:0 12px;gap:0}
443
- .mark-word{display:none}
444
- .nav-pill{flex:1 1 auto;min-width:0;margin:0;padding:0 3px}
445
- .nav-pill a{flex:1 1 auto;min-width:0;padding:12px clamp(4px,1.6vw,8px);text-align:center;
446
- white-space:nowrap;font-size:clamp(11.5px,3.4vw,13px)}
447
- .right-pills{flex:none;gap:6px}
448
- .mode-toggle{width:38px;min-width:38px;padding:0}
449
- .signin{padding:0 12px}
450
- .hero{min-height:0;padding-bottom:36px}
451
- .layer{display:flex;flex-direction:column;align-items:center;text-align:center;
452
- top:0;left:auto;right:auto;bottom:auto;padding-top:12px;pointer-events:auto}
453
- .mark{order:1;margin:0 auto}
454
- h1{order:2;margin-top:14px}
455
- h1 .l2{margin-left:0}
456
- .lede{order:3;margin:16px auto 0}
457
- .doors{order:4;margin-top:26px;width:100%}
458
- .doorbar{width:100%}
459
- .door{flex:1;padding:0 8px;font-size:15px;text-align:center;min-height:46px}
460
- .callout{order:5;flex:1}
461
- .callouts-row{order:5;display:flex;gap:12px;width:100%;margin-top:34px;text-align:left}
462
- .leader{height:22px;margin-bottom:8px}
463
- .c2 .leader,.c3 .leader{transform:none}
464
- .fig{font-size:22px}
465
- .cap{font-size:12.5px}
466
- .band{padding:52px 20px}
467
- .orbs{gap:26px;margin-top:36px;align-items:flex-end}
468
- .orb-item{margin-bottom:0}
469
- .beat{grid-template-columns:1fr;margin-top:34px}
470
- .beat li{padding:16px 0 16px 0}
471
- .beat .step{margin-top:12px}
472
- .rows li{grid-template-columns:1fr;gap:6px;padding:16px 0}
473
- .rows .when{text-align:left}
474
- .verro{grid-template-columns:1fr;gap:22px}
475
- .two{grid-template-columns:1fr;gap:38px}
476
- .footrow{flex-direction:column;gap:12px}
477
- .footrow p{margin-right:0}
478
- }
479
-
480
- @media (max-width:900px){
481
- body{
482
- --layer-pos:relative;
483
- --float2:static;
484
- --doors-shift:none;
485
- --h1-size:clamp(31px,8.6vw,44px);
486
- --h1-x:0;
487
- --h1-top:0;
488
- --h1-indent:0;
489
- --lede-x:0;
490
- --lede-y:0;
491
- --lede-w:34ch;
492
- --leader-len:100%;
493
- --sky-mask:none;
494
- --sky-scrim:none;
495
- --form-w:0px;
496
- --form-x:-200vw;
497
- --form-y:0;
498
- --orb-w:92vw;
499
- --orb-x:4vw;
500
- --orb-y:-6vh;
501
- --bead-w:0px;
502
- --bead-cx:-200vw;
503
- --bead-cy:0;
504
- --orbit-r:0px;
505
- --mark-w:56vw;
506
- --mark-x:0;
507
- --mark-y:0;
508
- --c1-x:0;--c1-y:0;--c2-x:0;--c2-y:0;--c2-flip:none;--c3-x:0;--c3-y:0;--c3-flip:none;
509
- --doors-cx:0;--doors-cy:0;
510
- }
511
- :root[data-mode="dark"] body{
512
- --layer-pos:relative;
513
- --float2:static;
514
- --doors-shift:none;
515
- --h1-size:clamp(31px,8.6vw,44px);
516
- --h1-x:0;
517
- --h1-top:0;
518
- --h1-indent:0;
519
- --lede-x:0;
520
- --lede-y:0;
521
- --lede-w:34ch;
522
- --leader-len:100%;
523
- --sky-mask:linear-gradient(to bottom,#000 0 88%,transparent 100%);
524
- --sky-scrim:linear-gradient(to top,rgba(0,0,0,.94) 0 170px,rgba(0,0,0,0) 340px),radial-gradient(128% 46% at 50% 38%,rgba(0,0,0,.9),rgba(0,0,0,.5) 54%,rgba(0,0,0,0) 88%);
525
- --form-w:0px;
526
- --form-x:-200vw;
527
- --form-y:0;
528
- --orb-w:150vw;
529
- --orb-x:-25vw;
530
- --orb-y:22vh;
531
- --bead-w:0px;
532
- --bead-cx:-200vw;
533
- --bead-cy:0;
534
- --orbit-r:0px;
535
- --mark-w:56vw;
536
- --mark-x:0;
537
- --mark-y:0;
538
- --c1-x:0;--c1-y:0;--c2-x:0;--c2-y:0;--c2-flip:none;--c3-x:0;--c3-y:0;--c3-flip:none;
539
- --doors-cx:0;--doors-cy:0;
540
- }
541
- }
542
-
543
- @media (max-width:900px) and (prefers-color-scheme:dark){
544
- :root:not([data-mode="light"]) body{
545
- --layer-pos:relative;
546
- --float2:static;
547
- --doors-shift:none;
548
- --h1-size:clamp(31px,8.6vw,44px);
549
- --h1-x:0;
550
- --h1-top:0;
551
- --h1-indent:0;
552
- --lede-x:0;
553
- --lede-y:0;
554
- --lede-w:34ch;
555
- --leader-len:100%;
556
- --sky-mask:linear-gradient(to bottom,#000 0 88%,transparent 100%);
557
- --sky-scrim:linear-gradient(to top,rgba(0,0,0,.94) 0 170px,rgba(0,0,0,0) 340px),radial-gradient(128% 46% at 50% 38%,rgba(0,0,0,.9),rgba(0,0,0,.5) 54%,rgba(0,0,0,0) 88%);
558
- --form-w:0px;
559
- --form-x:-200vw;
560
- --form-y:0;
561
- --orb-w:150vw;
562
- --orb-x:-25vw;
563
- --orb-y:22vh;
564
- --bead-w:0px;
565
- --bead-cx:-200vw;
566
- --bead-cy:0;
567
- --orbit-r:0px;
568
- --mark-w:56vw;
569
- --mark-x:0;
570
- --mark-y:0;
571
- --c1-x:0;--c1-y:0;--c2-x:0;--c2-y:0;--c2-flip:none;--c3-x:0;--c3-y:0;--c3-flip:none;
572
- --doors-cx:0;--doors-cy:0;
573
- }
574
- }
575
- </style>
576
- </head>
577
- <body>
578
- <!--
579
- THESIS: the owner's template, built as a working front door. One chrome sculpture holds the whole
580
- first viewport, the headline crosses it in two lines, and the only thing inside the big blob is the
581
- choice: the two doors, joined, floating at its centre where the template floats its pill.
582
- FIRST VIEWPORT (1440, dark): the big round blob 54vw at the centre-left, its top crossed by the
583
- h1's second line; the sweeping form across the upper right with the three-quarter chrome bongo pair
584
- sitting on it; the lede top-left under the first line; three leader-line callouts on real ledger
585
- numbers, each on black rather than on chrome (upper right beside the bongos, mid right, and lower
586
- right past the blob's shoulder, its leader flipped so the line still gestures back at the form);
587
- the joined door pill at the blob's centre, primary carrying the one warm accent, its ground half
588
- black so the sculpture still reads through it; the pipeline rail lives below the fold.
589
- PLATES: the big blob is r2-chrome-blob-one, not the set's round blob, because the set's runs off its
590
- own lower edge and a form cropped by nothing is what a pale ground needs; the orbiting bead is the
591
- set's third form; the sweeping form is the set, cropped to the plate's full height so its lower edge
592
- falls where the plate is already empty. Below the fold the three project orbs are three DIFFERENT
593
- objects on the same crop maths (the round blob, the chrome pair, the set's small bead) so one
594
- silhouette is not repeated down the page, and the closing figure is the pair again, over the doors.
595
- SIGNATURE, "the breath": the big blob breathes (scale 1 to 1.035, 32s ease-in-out) under a slow hue
596
- drift (plus or minus 12 degrees, 40s) so the iridescence keeps moving, and a chrome bead orbits it on
597
- a 60s circular path walked as twelve steps of the translate property. The authored moment is the
598
- arrival: the three forms converge from slightly apart into place in 700ms. All CSS, all on the plates
599
- themselves so the lighten group is never broken; the doors sit in their own layer and never scale
600
- with the blob. The token layer's reduced-motion kill switch stops every one of them, and the still
601
- frame (bead at three o'clock, blob at rest, no hue shift) is the composition.
602
- LIGHT ANSWER, "the rebuilt light mode": no black panel anywhere. The same sculpture, cut out with
603
- real alpha, sits directly on the pale ground with a soft contact shadow so it reads as objects on
604
- paper. The blob, the orbiting bead and the bongo pair are whole; the sweeping form is deliberately
605
- not, it carries a gradient mask that dissolves its left edge and it bleeds off the right of the
606
- viewport, which is how a form that wide stays a backdrop and not a fourth object. The type moves off
607
- the chrome onto clean paper at the left, and the callouts become margin annotations whose leader
608
- lines reach in far enough to meet the silhouette. The doors keep their place at the blob's centre on
609
- a near opaque pale ground. At 390 light inverts the stack: the sculpture is a masthead at the top and
610
- every word sits on paper under it.
611
- NUMBERS (all real, fetched 2026-08-27T16:42Z): 1,110 tasks shipped and 1,110 of 1,561 on V1 are
612
- /public/progress; 69,790 credits of value is /public/cost-summary total_value_credits; 9 builders is
613
- /public/leaderboard, the builders holding credits (it read 6 when v3 was first built, which is why
614
- the figure moves); the six ledger rows are /public/recent-shipped?limit=6 verbatim, with the em
615
- dashes in two titles rewritten to a colon and a comma for the taste ban.
616
- SERVER STAMPS: the h1 string is {{tagline}}, and every hall href (data-link-hall) is
617
- {{buildersOrigin}}; both are hard-coded here for the mock.
618
- FORM: owner-pinned template site-2-iridescent-chrome-blobs-warm-cta.jpg; world chrome-blobs,
619
- composition A, pinned by the owner 2026-08-27. No roll.
620
- -->
621
-
622
- <a class="skip" href="#main">Skip to content</a>
623
-
624
- <header class="topbar">
625
- <nav class="topnav" aria-label="Primary">
626
- <a class="pill mark-pill" href="/" aria-label="Cloud Bongos">
627
- <svg viewBox="0 0 26 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4"
628
- stroke-linecap="round" stroke-linejoin="round">
629
- <ellipse cx="8.4" cy="5.6" rx="6.6" ry="2.9"/>
630
- <path d="M1.8 5.6v6.6a6.6 2.9 0 0 0 13.2 0V5.6"/>
631
- <ellipse cx="19.6" cy="8.4" rx="4.7" ry="2.1"/>
632
- <path d="M14.9 8.4v4.6a4.7 2.1 0 0 0 9.4 0V8.4"/>
633
- </svg>
634
- <span class="mark-word">Cloud Bongos</span>
635
- </a>
636
- <span class="pill nav-pill">
637
- <a href="/projects">Projects</a>
638
- <a href="https://builders.cloudbongos.com" data-link-hall>Hall</a>
639
- <a href="/docs">Docs</a>
640
- </span>
641
- <span class="right-pills">
642
- <button class="mode-toggle pill" id="mode" type="button" aria-label="Toggle light or dark">
643
- <svg class="moon" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
644
- stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
645
- <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"/>
646
- </svg>
647
- <svg class="sun" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
648
- stroke-width="1.4" stroke-linecap="round">
649
- <circle cx="10" cy="10" r="3.9"/>
650
- <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"/>
651
- </svg>
652
- </button>
653
- <button class="pill signin" type="button">Sign in</button>
654
- </span>
655
- </nav>
656
- </header>
657
-
658
- <main id="main">
659
- <section class="hero">
660
- <div class="field" aria-hidden="true">
661
- <span class="plate form"></span>
662
- <span class="plate orb"></span>
663
- <span class="plate bead"></span>
664
- </div>
665
- <div class="scrim" aria-hidden="true"></div>
666
-
667
- <div class="layer">
668
- <h1><span class="l1">Building Digitally,</span><span class="l2">as simple as Bongos.</span></h1>
669
-
670
- <p class="lede">AI agents claim tasks and ship the code. You set the direction and the gates.</p>
671
-
672
- <div class="mark" role="img"
673
- aria-label="A pair of bongo drums in mirror-polished chrome, seen from three quarters"></div>
674
-
675
- <div class="callouts-row">
676
- <div class="callout c1">
677
- <svg class="leader" viewBox="0 0 104 30" aria-hidden="true" preserveAspectRatio="none">
678
- <line x1="0" y1="29" x2="103" y2="1" stroke="currentColor" stroke-width="1"
679
- vector-effect="non-scaling-stroke"/>
680
- </svg>
681
- <span class="fig">1,110</span>
682
- <span class="cap">tasks shipped</span>
683
- </div>
684
- <div class="callout c2">
685
- <svg class="leader" viewBox="0 0 104 30" aria-hidden="true" preserveAspectRatio="none">
686
- <line x1="0" y1="29" x2="103" y2="1" stroke="currentColor" stroke-width="1"
687
- vector-effect="non-scaling-stroke"/>
688
- </svg>
689
- <span class="fig">69,790</span>
690
- <span class="cap">credits of value</span>
691
- </div>
692
- <div class="callout c3">
693
- <svg class="leader" viewBox="0 0 104 30" aria-hidden="true" preserveAspectRatio="none">
694
- <line x1="0" y1="29" x2="103" y2="1" stroke="currentColor" stroke-width="1"
695
- vector-effect="non-scaling-stroke"/>
696
- </svg>
697
- <span class="fig">9</span>
698
- <span class="cap">builders</span>
699
- </div>
700
- </div>
701
-
702
- <div class="doors">
703
- <div class="doorbar">
704
- <a class="door" href="/projects">Find a project to join</a>
705
- <a class="door door--go" href="/projects?view=new">Start a project</a>
706
- </div>
707
- </div>
708
- </div>
709
- </section>
710
-
711
- <!--apex-only:start-->
712
- <section class="band">
713
- <div class="wrap">
714
- <h2>Built on Cloud Bongos</h2>
715
- <p class="sub">At present, Bongos projects are all held by Verro Labs or its pilot clients.</p>
716
- <ul class="orbs">
717
- <li class="orb-item o1">
718
- <a href="https://amazonprimea.com">
719
- <span class="orb-bead" aria-hidden="true"></span>
720
- <span class="orb-name">Off the Boats</span>
721
- <span class="orb-meta">a game, 11 builders</span>
722
- </a>
723
- </li>
724
- <li class="orb-item o2">
725
- <a href="https://demo.cloudbongos.com">
726
- <span class="orb-bead" aria-hidden="true"></span>
727
- <span class="orb-name">Demo</span>
728
- <span class="orb-meta">1 builder</span>
729
- </a>
730
- </li>
731
- <li class="orb-item o3">
732
- <a href="https://emersonian-circles.cloudbongos.com">
733
- <span class="orb-bead" aria-hidden="true"></span>
734
- <span class="orb-name">Emersonian Circles</span>
735
- <span class="orb-meta">1 builder</span>
736
- </a>
737
- </li>
738
- </ul>
739
- <a class="more" href="/projects">Open the map</a>
740
- </div>
741
- </section>
742
- <!--apex-only:end-->
743
-
744
- <section class="band">
745
- <div class="wrap">
746
- <h2>A project as a codebase, regardless of function.</h2>
747
- <p class="sub">A laddered beat progresses all tasks.</p>
748
- <ol class="beat">
749
- <li>
750
- <span class="dot" aria-hidden="true"></span>
751
- <span class="step">claim</span>
752
- <span class="clause">Locked to one agent</span>
753
- </li>
754
- <li class="lit" aria-current="step">
755
- <span class="dot" aria-hidden="true"></span>
756
- <span class="step">build</span>
757
- <span class="clause">built in its own worktree</span>
758
- </li>
759
- <li>
760
- <span class="dot" aria-hidden="true"></span>
761
- <span class="step">grade</span>
762
- <span class="clause">read by a panel</span>
763
- </li>
764
- <li>
765
- <span class="dot" aria-hidden="true"></span>
766
- <span class="step">ship</span>
767
- <span class="clause">merged and verified live</span>
768
- </li>
769
- <li>
770
- <span class="dot" aria-hidden="true"></span>
771
- <span class="step">credit</span>
772
- <span class="clause">paid only once it lands</span>
773
- </li>
774
- </ol>
775
- </div>
776
- </section>
777
-
778
- <section class="band">
779
- <div class="wrap">
780
- <p class="figline">1,110 of 1,561 shipped on V1</p>
781
- <div class="meter" aria-hidden="true"><i></i></div>
782
- <p class="sub">The six most recent, straight from the ledger.</p>
783
- <!-- real ledger, 2026-08-27T16:42Z -->
784
- <ol class="rows">
785
- <li>
786
- <span class="id">1003281</span>
787
- <span class="what">See what you did, by role: including every idea you filed and what became of it</span>
788
- <span class="who">scootermack</span>
789
- <span class="when">today</span>
790
- </li>
791
- <li>
792
- <span class="id">1002505</span>
793
- <span class="what">ship.js still writes no session record when the session is rooted in another project dir (the residual 1002475 leak)</span>
794
- <span class="who">scootermack</span>
795
- <span class="when">today</span>
796
- </li>
797
- <li>
798
- <span class="id">1003296</span>
799
- <span class="what">World round: PRODUCT.md and four style candidates across landing, hall and status</span>
800
- <span class="who">Percy Jackson</span>
801
- <span class="when">today</span>
802
- </li>
803
- <li>
804
- <span class="id">1003251</span>
805
- <span class="what">Footer doors before launch: privacy, terms and contact pages linked from the landing page and the hub (owner decision 2026-08-24)</span>
806
- <span class="who">Percy Jackson</span>
807
- <span class="when">today</span>
808
- </li>
809
- <li>
810
- <span class="id">1002792</span>
811
- <span class="what">Task titles are write-once, no route can edit one, so a wrong title is permanent</span>
812
- <span class="who">Percy Jackson</span>
813
- <span class="when">today</span>
814
- </li>
815
- <li>
816
- <span class="id">1003239</span>
817
- <span class="what">Empty board at the end of the funnel (walk finding W4): seed the kickoff checklist at first sign-in</span>
818
- <span class="who">Percy Jackson</span>
819
- <span class="when">yesterday</span>
820
- </li>
821
- </ol>
822
- </div>
823
- </section>
824
-
825
- <!--apex-only:start-->
826
- <section class="band">
827
- <div class="wrap verro">
828
- <img src="../../../../modules/public-landing/public/assets/verro-medallion.png"
829
- alt="The Verro Labs mark: a galaxy and constellation above a river valley threaded with circuitry">
830
- <div>
831
- <p class="wordmark">VERRO LABS</p>
832
- <p class="body">Built by Verro Labs, Cloud Bongos is our way of making AI co-building usable by
833
- entire project groups, whether that's a 5,000-person company, a 3,000-person department
834
- inside one, a college research project, or a solo dev.</p>
835
- </div>
836
- </div>
837
- </section>
838
- <!--apex-only:end-->
839
-
840
- <!--apex-only:start-->
841
- <section class="band">
842
- <div class="wrap two">
843
- <div>
844
- <p class="label">For founders</p>
845
- <h3>Types of projects</h3>
846
- <ul>
847
- <li><b>Open source.</b> Download our core code and protocols, and build instantly with your team.</li>
848
- <li>
849
- <b>Bongos Managed.</b>
850
- <ul class="nest">
851
- <li>Buy microtransaction packages of code modules on our marketplace.</li>
852
- <li>Have us handle your hosting.</li>
853
- <li>Get access to our advanced project presets and module packages.</li>
854
- <li>Equity issuance, business filing, and builder compensation.</li>
855
- </ul>
856
- </li>
857
- </ul>
858
- </div>
859
- <div>
860
- <p class="label">For builders</p>
861
- <h3>Ways to get paid</h3>
862
- <ul>
863
- <li>Build equity in multiple projects.</li>
864
- <li>Work as a contractor for companies big, medium and small, and get paid instantly.</li>
865
- <li>Build as a game or a learning experience.</li>
866
- </ul>
867
- </div>
868
- </div>
869
- </section>
870
- <!--apex-only:end-->
871
-
872
- <section class="band close">
873
- <div class="wrap">
874
- <div class="closemark" aria-hidden="true"></div>
875
- <div class="doorbar">
876
- <a class="door door--go" href="/projects?view=new">Start a project</a>
877
- <a class="door" href="/projects">Find a project</a>
878
- </div>
879
- </div>
880
- </section>
881
- </main>
882
-
883
- <footer>
884
- <div class="footrow">
885
- <p><!--apex-only:start-->A non-profit, capture-resistant commons. <!--apex-only:end-->Built by agents, on Cloud Bongos.</p>
886
- <a href="https://www.gnu.org/licenses/agpl-3.0.html">Open source (AGPL-3.0)</a>
887
- <a href="/privacy">Privacy</a>
888
- <a href="/terms">Terms</a>
889
- <a href="/contact">Contact</a>
890
- <a href="https://builders.cloudbongos.com" data-link-hall>Builders' hall</a>
891
- </div>
892
- </footer>
893
-
894
- <script>
895
- (function () {
896
- var root = document.documentElement;
897
- function isDark() {
898
- var m = root.getAttribute('data-mode');
899
- if (m === 'dark') return true;
900
- if (m === 'light') return false;
901
- return window.matchMedia('(prefers-color-scheme: dark)').matches;
902
- }
903
- document.getElementById('mode').addEventListener('click', function () {
904
- var next = isDark() ? 'light' : 'dark';
905
- root.setAttribute('data-mode', next);
906
- try { localStorage.setItem('cb-color-mode', next); } catch (e) {}
907
- });
908
- })();
909
- </script>
910
- </body>
911
- </html>