@bongos/core 1.19.726 → 1.19.728

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 (227) hide show
  1. package/.bongos-core.json +177 -492
  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/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_package.mjs +40 -1
  122. package/tests/cli_token_reissue.mjs +7 -7
  123. package/tests/cloud_bongos_pack.mjs +1 -1
  124. package/tests/currency_label.mjs +8 -8
  125. package/tests/dev_lib.mjs +4 -4
  126. package/tests/devbox_dmg_backdrop.mjs +1 -1
  127. package/tests/devbox_downloads.mjs +2 -2
  128. package/tests/devbox_icons.mjs +1 -1
  129. package/tests/discord_approvals.mjs +1 -1
  130. package/tests/discord_oauth.mjs +2 -2
  131. package/tests/executed_closure.mjs +6 -1
  132. package/tests/first_admin_bootstrap.mjs +1 -1
  133. package/tests/gate_approvals.mjs +5 -5
  134. package/tests/grade_aggregates_unavailable.mjs +1 -1
  135. package/tests/hook_user_agents.mjs +2 -2
  136. package/tests/init.mjs +6 -6
  137. package/tests/instance_config.mjs +1 -1
  138. package/tests/instance_manifest.mjs +5 -5
  139. package/tests/instance_mismatch_guard.mjs +13 -13
  140. package/tests/leak_scan_allowlist.mjs +94 -0
  141. package/tests/migrate_root_resolution.mjs +4 -4
  142. package/tests/mirror_redact.mjs +28 -4
  143. package/tests/module_catalog.mjs +5 -5
  144. package/tests/module_submissions.mjs +3 -3
  145. package/tests/package_core.mjs +1 -1
  146. package/tests/parallel-load.mjs +6 -6
  147. package/tests/projects_hub.mjs +2 -2
  148. package/tests/provision.mjs +50 -50
  149. package/tests/provisioning_github_app_routes.mjs +1 -1
  150. package/tests/provisioning_onboard_mode.mjs +2 -2
  151. package/tests/publish_reconciler.mjs +4 -4
  152. package/tests/sandbox_stage.mjs +1 -1
  153. package/tests/scrubber_corpus.mjs +3 -3
  154. package/tests/search_isolation.mjs +1 -1
  155. package/tests/session_records.mjs +1 -1
  156. package/tests/ship_card.mjs +6 -6
  157. package/tests/ship_ci_deploy.mjs +1 -1
  158. package/tests/single_host_hall.mjs +9 -9
  159. package/tests/smoke_preflight.mjs +1 -1
  160. package/tests/smoke_target.mjs +1 -1
  161. package/tests/status-probe.mjs +1 -1
  162. package/tests/status_mirror_sync.mjs +1 -1
  163. package/docs/adr/0004-amazonprimea-name-and-trademark-acceptance.md +0 -45
  164. package/docs/design/mocks/_schemes.css +0 -604
  165. package/docs/design/mocks/component-sheet.html +0 -428
  166. package/docs/design/mocks/hall/_tokens.css +0 -370
  167. package/docs/design/mocks/hall/board/v1.html +0 -846
  168. package/docs/design/mocks/hall/board/v2.html +0 -858
  169. package/docs/design/mocks/hall/board/v3.html +0 -884
  170. package/docs/design/mocks/hall/goals/v1.html +0 -1212
  171. package/docs/design/mocks/hall/goals/v2.html +0 -1192
  172. package/docs/design/mocks/hall/goals/v3.html +0 -1205
  173. package/docs/design/mocks/hall/hall-sheet.html +0 -244
  174. package/docs/design/mocks/hall/reading/v1.html +0 -1125
  175. package/docs/design/mocks/hall/reading/v2.html +0 -1177
  176. package/docs/design/mocks/hall/reading/v3.html +0 -1150
  177. package/docs/design/mocks/hall/settings/v1.html +0 -1238
  178. package/docs/design/mocks/hall/settings/v2.html +0 -1235
  179. package/docs/design/mocks/hall/settings/v3.html +0 -1299
  180. package/docs/design/mocks/hall/task/v1.html +0 -633
  181. package/docs/design/mocks/hall/task/v2.html +0 -646
  182. package/docs/design/mocks/hall/task/v3.html +0 -647
  183. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg +0 -0
  184. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg.json +0 -13
  185. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg +0 -0
  186. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg.json +0 -13
  187. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg +0 -0
  188. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg.json +0 -13
  189. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg +0 -0
  190. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg.json +0 -13
  191. package/docs/design/mocks/hub/hub-sheet.html +0 -192
  192. package/docs/design/mocks/hub/mine.html +0 -465
  193. package/docs/design/mocks/hub/picker.html +0 -421
  194. package/docs/design/mocks/hub/planets.html +0 -356
  195. package/docs/design/mocks/hub/v1.html +0 -1209
  196. package/docs/design/mocks/hub/v2.html +0 -1257
  197. package/docs/design/mocks/hub/v3.html +0 -1496
  198. package/docs/design/mocks/hub/wizard.html +0 -421
  199. package/docs/design/mocks/landing/landing-sheet.html +0 -131
  200. package/docs/design/mocks/landing/v1.html +0 -956
  201. package/docs/design/mocks/landing/v2.html +0 -708
  202. package/docs/design/mocks/landing/v3.html +0 -911
  203. package/docs/design/mocks/landing-page-mock.html +0 -687
  204. package/docs/design/mocks/landing-palettes.html +0 -103
  205. package/docs/design/mocks/projects-hub-mock.html +0 -991
  206. package/docs/design/mocks/projects-hub-variants.html +0 -146
  207. package/docs/design/mocks/projects-page-mock.html +0 -167
  208. package/docs/design/mocks/world/blue-hud/_tokens.css +0 -246
  209. package/docs/design/mocks/world/blue-hud/hall.html +0 -595
  210. package/docs/design/mocks/world/blue-hud/landing.html +0 -424
  211. package/docs/design/mocks/world/blue-hud/status.html +0 -410
  212. package/docs/design/mocks/world/chrome-blobs/_tokens.css +0 -479
  213. package/docs/design/mocks/world/chrome-blobs/hall.html +0 -553
  214. package/docs/design/mocks/world/chrome-blobs/landing-b.html +0 -581
  215. package/docs/design/mocks/world/chrome-blobs/landing.html +0 -328
  216. package/docs/design/mocks/world/chrome-blobs/status.html +0 -416
  217. package/docs/design/mocks/world/natgeo-editorial/_tokens.css +0 -377
  218. package/docs/design/mocks/world/natgeo-editorial/hall.html +0 -649
  219. package/docs/design/mocks/world/natgeo-editorial/landing-b.html +0 -743
  220. package/docs/design/mocks/world/natgeo-editorial/landing.html +0 -475
  221. package/docs/design/mocks/world/natgeo-editorial/status.html +0 -437
  222. package/docs/design/mocks/world/organic-cards/_tokens.css +0 -462
  223. package/docs/design/mocks/world/organic-cards/hall.html +0 -625
  224. package/docs/design/mocks/world/organic-cards/landing-b.html +0 -736
  225. package/docs/design/mocks/world/organic-cards/landing.html +0 -420
  226. package/docs/design/mocks/world/organic-cards/status.html +0 -458
  227. package/docs/design/mocks/world/world-sheet.html +0 -156
package/docs/design/mocks/landing/v1.html DELETED
@@ -1,956 +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:var(--rule) transparent}
18
- body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:400;
19
- -webkit-font-smoothing:antialiased;overflow-x:hidden;
20
-
21
- /* ---- page-local derived tokens (mode-invariant) ---- */
22
- /* Chromium resolves url() inside a custom property against the DOCUMENT, not the stylesheet
23
- that declared it, so _tokens.css's plate references (written for its own folder) miss from
24
- here. Re-point the three plates this page uses, relative to docs/design/mocks/landing/. */
25
- --plate-set:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blobs-set.jpg);
26
- --plate-bead:url(../../../../.impeccable/mocks/world-assets/r2-chrome-blob-one.jpg);
27
- --plate-bongos:url(../../../../.impeccable/mocks/world-assets/r2-bongos-chrome-b.jpg);
28
- --maxw:1180px;
29
- --band-pad:clamp(66px,8.4vh,104px);
30
- --drift-form:74s;
31
- --drift-orb:58s;
32
- --drift-bead:47s;
33
- --drift-ease:cubic-bezier(.45,.05,.55,.95);
34
-
35
- /* ---- page-local layout switches: LIGHT (the refined specimen panel) ----
36
- The chrome is rehoused in ONE black panel that owns the right half of the hero, full height,
37
- 30px radius. Light shows only objects that are whole in their own plate (the bongo pair, the
38
- single blob, the same blob small and turned); the sweeping form, which the source frame cuts,
39
- sits the mode out. The three objects descend the panel's right; the three callouts hold a
40
- column at its left margin and reach each object with a leader, so the hero device survives the
41
- mode. The type column outside the panel is bracketed by the panel's own two edges: the h1 box
42
- top meets the top edge, the lede and the door pill sit on the lower one. */
43
- --field-top:8px;
44
- --field-right:22px;
45
- --field-bottom:22px;
46
- --field-left:48%;
47
- --field-h:auto;
48
- --field-radius:30px;
49
- --form-d:none; --form-w:34vw; --form-x:2.8vw; --form-y:3.5vh;
50
- --orb-d:block; --orb-w:22.2vw; --orb-x:22.1vw; --orb-y:24.4vh;
51
- --orb-img:var(--plate-bead); --orb-ratio:1;
52
- --orb-bg-size:100% auto;
53
- --orb-bg-pos:0 0;
54
- --orb-mask:none;
55
- --bead-d:block; --bead-w:9.7vw; --bead-x:37.4vw; --bead-y:56.7vh;
56
- --bead-bg-size:118% auto; --bead-bg-pos:50% 50%; --bead-rot:-128deg;
57
- --mark-w:22.9vw; --mark-x:69.4vw; --mark-y:4.2vh;
58
- --hero-col:44%;
59
- --h1-size:clamp(34px,4.6vw,68px);
60
- --copy-mt:8px; /* the h1 box top lands on the panel's top edge */
61
- --lede-pos:static;
62
- --lede-mt:35vh; /* lands the lede on the middle callout's figure line */
63
- --lede-w:430px;
64
- --hero-pad-bottom:22px; /* = --field-bottom, so the doors sit on the panel's lower edge */
65
- --doors-mt:auto;
66
- --doors-pt:26px;
67
- --callouts-pos:absolute; /* the callouts stay ON the object: inside the black panel */
68
- --callout-ink:var(--void-ink);
69
- --callout-ink-soft:var(--void-ink-soft);
70
- --callout-halo:0 2px 18px rgba(0,0,0,.94), 0 0 54px rgba(0,0,0,.72);
71
- /* one annotation column at the panel's left margin (x 743); each leader's far end is solved
72
- to land on its object's silhouette: the bongos' left flank, the blob's left flank, the bead's
73
- left flank. Widths differ because the objects do; the three share one left edge. */
74
- --co1-x:51.6%; --co1-y:12.9%; --l1w:265px; --l1h:38px; --f1:1;
75
- --co2-x:51.6%; --co2-y:44.4%; --l2w:318px; --l2h:48px;
76
- --co3-x:51.6%; --co3-y:69.2%; --l3w:512px; --l3h:78px;
77
- --leader-h:38px;
78
- --leader-len:265px;
79
- }
80
- :root[data-mode="dark"] body{
81
- /* ---- DARK: composition A, unchanged (the approved first viewport) ---- */
82
- --field-top:calc(var(--top-h) * -1);
83
- --field-right:0px;
84
- --field-bottom:0px;
85
- --field-left:0px;
86
- --field-h:auto;
87
- --field-radius:0px;
88
- --form-d:block; --form-w:74vw; --form-x:29.3vw; --form-y:-3.1vh;
89
- --orb-d:block; --orb-w:52vw; --orb-x:12.9vw; --orb-y:63.4vh;
90
- --orb-img:var(--plate-set); --orb-ratio:1.386;
91
- --orb-bg-size:calc(var(--orb-w) * 2.43902) auto;
92
- --orb-bg-pos:calc(var(--orb-w) * -.21951) calc(var(--orb-w) * -.63988);
93
- --orb-mask:linear-gradient(to bottom, transparent 0, #000 10%);
94
- --bead-d:block; --bead-w:18vw; --bead-x:87.6vw; --bead-y:87.6vh;
95
- --bead-bg-size:100% auto; --bead-bg-pos:0 0; --bead-rot:0deg;
96
- --mark-w:26vw; --mark-x:64.6vw; --mark-y:48.3vh;
97
- --hero-col:100%;
98
- --h1-size:clamp(38px,7vw,96px);
99
- --h1-b:8%;
100
- --leader-h:32px;
101
- --leader-len:104px;
102
- --copy-mt:8vh;
103
- --lede-pos:absolute;
104
- --lede-mt:20px;
105
- --lede-w:312px;
106
- --hero-pad-bottom:15vh;
107
- --doors-mt:auto;
108
- --doors-pt:44px;
109
- --callouts-pos:absolute;
110
- --callout-ink:var(--ink);
111
- --callout-ink-soft:var(--ink-soft);
112
- --callout-halo:var(--type-halo);
113
- --co1-x:3.5%; --co1-y:70%; --l1w:var(--leader-len); --l1h:var(--leader-h); --f1:-1;
114
- --co2-x:76%; --co2-y:12%; --l2w:var(--leader-len); --l2h:var(--leader-h);
115
- --co3-x:79%; --co3-y:84%; --l3w:var(--leader-len); --l3h:var(--leader-h);
116
- }
117
- @media (prefers-color-scheme: dark){
118
- :root:not([data-mode="light"]) body{
119
- --field-top:calc(var(--top-h) * -1);
120
- --field-right:0px;
121
- --field-bottom:0px;
122
- --field-left:0px;
123
- --field-h:auto;
124
- --field-radius:0px;
125
- --form-d:block; --form-w:74vw; --form-x:29.3vw; --form-y:-3.1vh;
126
- --orb-d:block; --orb-w:52vw; --orb-x:12.9vw; --orb-y:63.4vh;
127
- --orb-img:var(--plate-set); --orb-ratio:1.386;
128
- --orb-bg-size:calc(var(--orb-w) * 2.43902) auto;
129
- --orb-bg-pos:calc(var(--orb-w) * -.21951) calc(var(--orb-w) * -.63988);
130
- --orb-mask:linear-gradient(to bottom, transparent 0, #000 10%);
131
- --bead-d:block; --bead-w:18vw; --bead-x:87.6vw; --bead-y:87.6vh;
132
- --bead-bg-size:100% auto; --bead-bg-pos:0 0; --bead-rot:0deg;
133
- --mark-w:26vw; --mark-x:64.6vw; --mark-y:48.3vh;
134
- --hero-col:100%;
135
- --h1-size:clamp(38px,7vw,96px);
136
- --h1-b:8%;
137
- --leader-h:32px;
138
- --leader-len:104px;
139
- --copy-mt:8vh;
140
- --lede-pos:absolute;
141
- --lede-mt:20px;
142
- --lede-w:312px;
143
- --hero-pad-bottom:15vh;
144
- --doors-mt:auto;
145
- --doors-pt:44px;
146
- --callouts-pos:absolute;
147
- --callout-ink:var(--ink);
148
- --callout-ink-soft:var(--ink-soft);
149
- --callout-halo:var(--type-halo);
150
- --co1-x:3.5%; --co1-y:70%; --l1w:var(--leader-len); --l1h:var(--leader-h); --f1:-1;
151
- --co2-x:76%; --co2-y:12%; --l2w:var(--leader-len); --l2h:var(--leader-h);
152
- --co3-x:79%; --co3-y:84%; --l3w:var(--leader-len); --l3h:var(--leader-h);
153
- }
154
- }
155
-
156
- a{color:inherit;text-decoration:none}
157
- ::selection{background:var(--accent);color:var(--accent-on)}
158
- :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
159
- .skip{position:absolute;left:-9999px;top:0;z-index:20;padding:12px 20px;
160
- border-radius:0 0 var(--radius-sm) 0;background:var(--ink);color:var(--bg);font-size:15px}
161
- .skip:focus{left:0}
162
-
163
- /* ---------- the chrome field: rendered plates composited on black ---------- */
164
- /* Each layer shows one crop of one plate. size/position are derived from the crop rectangle
165
- [u0,u1] x [v0,v1] and the plate's aspect R, so the layer scales with its own width token. */
166
- .field{position:absolute;top:var(--field-top);right:var(--field-right);bottom:var(--field-bottom);
167
- left:var(--field-left);height:var(--field-h);background:var(--field-bg);
168
- border-radius:var(--field-radius);overflow:hidden;pointer-events:none;
169
- -webkit-mask-image:var(--field-mask);mask-image:var(--field-mask)}
170
- .plate{position:absolute;background-repeat:no-repeat;mix-blend-mode:var(--blob-blend);
171
- pointer-events:none}
172
-
173
- /* r2-chrome-blobs-set.jpg, u[.22,.96] v[0,.83] : the sweeping form.
174
- The crop's lower left also catches the round blob's shoulder, so the two masks below union to
175
- "keep the right side OR the top", dissolving that corner instead of cutting it square. */
176
- .form{display:var(--form-d);left:var(--form-x);top:var(--form-y);width:var(--form-w);
177
- aspect-ratio:1.5974;background-image:var(--plate-set);
178
- background-size:calc(var(--form-w) * 1.35135) auto;
179
- background-position:calc(var(--form-w) * -.2973) 0;
180
- -webkit-mask-image:linear-gradient(to right, transparent 0 36%, #000 52%),
181
- linear-gradient(to bottom, #000 0 50%, transparent 63%);
182
- mask-image:linear-gradient(to right, transparent 0 36%, #000 52%),
183
- linear-gradient(to bottom, #000 0 50%, transparent 63%);
184
- animation:settle .52s cubic-bezier(.16,1,.3,1) both,
185
- driftForm var(--drift-form) var(--drift-ease) .58s infinite}
186
- /* r2-chrome-blobs-set.jpg, u[.09,.50] v[.47,1] : the round blob the doors sit on.
187
- The crop's top edge lands mid-render, so a 10% mask dissolves it into the void. */
188
- .orb{display:var(--orb-d);left:var(--orb-x);top:var(--orb-y);width:var(--orb-w);
189
- aspect-ratio:var(--orb-ratio);background-image:var(--orb-img);
190
- background-size:var(--orb-bg-size);background-position:var(--orb-bg-pos);
191
- -webkit-mask-image:var(--orb-mask);mask-image:var(--orb-mask);
192
- animation:settle .52s cubic-bezier(.16,1,.3,1) 60ms both,
193
- driftOrb var(--drift-orb) var(--drift-ease) .64s infinite}
194
- /* r2-chrome-blob-one.jpg : the small object at the right edge. In the light panel it is the
195
- same blob turned and tightened, so the panel reads as two distinct objects, not two copies. */
196
- .bead{display:var(--bead-d);left:var(--bead-x);top:var(--bead-y);width:var(--bead-w);
197
- aspect-ratio:1;background-image:var(--plate-bead);
198
- background-size:var(--bead-bg-size);background-position:var(--bead-bg-pos);
199
- rotate:var(--bead-rot);
200
- animation:settle .52s cubic-bezier(.16,1,.3,1) 100ms both,
201
- driftBead var(--drift-bead) var(--drift-ease) .70s infinite}
202
- @keyframes settle{from{opacity:.5;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
203
-
204
- /* THE DRIFT: three independent slow loops, long periods and unequal phases, so the chrome
205
- reads as floating in the void rather than looping. Translation stays inside 3% of each
206
- layer's own box and rotation inside 2deg; the reduced-motion switch in _tokens.css kills
207
- all three and the still frame IS the composition. */
208
- @keyframes driftForm{
209
- 0%{transform:translate(0,0) rotate(0)}
210
- 27%{transform:translate(2.4%,-1.6%) rotate(1.1deg)}
211
- 58%{transform:translate(-1.2%,2.2%) rotate(-.8deg)}
212
- 81%{transform:translate(1.4%,1.1%) rotate(.5deg)}
213
- 100%{transform:translate(0,0) rotate(0)}
214
- }
215
- @keyframes driftOrb{
216
- 0%{transform:translate(0,0) rotate(0)}
217
- 31%{transform:translate(-2.1%,1.7%) rotate(-1.3deg)}
218
- 64%{transform:translate(1.8%,-1.2%) rotate(.9deg)}
219
- 100%{transform:translate(0,0) rotate(0)}
220
- }
221
- @keyframes driftBead{
222
- 0%{transform:translate(0,0) rotate(0)}
223
- 22%{transform:translate(2.8%,2.1%) rotate(1.8deg)}
224
- 55%{transform:translate(-2.4%,-1.9%) rotate(-1.5deg)}
225
- 78%{transform:translate(1.1%,-2.6%) rotate(.7deg)}
226
- 100%{transform:translate(0,0) rotate(0)}
227
- }
228
- .field.still .plate{animation-play-state:paused}
229
- .scrim{position:absolute;inset:0;z-index:1;background:var(--scrim);pointer-events:none}
230
-
231
- /* ---------- top bar: three pill groups on one line ---------- */
232
- .topbar{position:relative;z-index:3;height:var(--top-h);display:flex;align-items:center;padding:0 26px}
233
- .topbar::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:210px;
234
- background:var(--top-scrim);pointer-events:none}
235
- .topnav{display:flex;align-items:center;gap:12px;width:100%}
236
- .pill{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;
237
- border-radius:var(--radius-pill);background:var(--void-glass);border:1px solid var(--void-glass-edge);
238
- backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
239
- font-family:inherit;font-size:16px;color:var(--ink);cursor:pointer;
240
- transition:background .25s cubic-bezier(.2,.7,.3,1)}
241
- .pill:hover{background:var(--void-glass-strong)}
242
- .mark-pill{gap:10px;padding:0 24px;background:var(--void-glass-strong);letter-spacing:-.012em}
243
- .mark-pill svg{width:23px;height:18px;display:block;flex:none}
244
- .nav-pill{gap:0;padding:0 6px;margin:0 auto}
245
- .nav-pill a{padding:13px 24px;border-radius:var(--radius-pill);font-size:16px;text-transform:lowercase;
246
- color:var(--ink-soft);transition:color .2s ease}
247
- .nav-pill a:hover{color:var(--ink)}
248
- .right-pills{display:flex;align-items:center;gap:10px}
249
- .mode-toggle{width:46px;min-width:46px;padding:0}
250
- .mode-toggle svg{width:18px;height:18px}
251
- .sun{display:none}
252
- :root[data-mode="dark"] .sun{display:block}
253
- :root[data-mode="dark"] .moon{display:none}
254
- @media (prefers-color-scheme:dark){:root:not([data-mode="light"]) .sun{display:block}
255
- :root:not([data-mode="light"]) .moon{display:none}}
256
- .signin{background:color-mix(in srgb,var(--ink) 92%,var(--bg));color:var(--bg);border-color:transparent;
257
- text-transform:lowercase;font-weight:500;padding:0 30px}
258
- .signin:hover{background:var(--ink)}
259
-
260
- /* ---------- hero ---------- */
261
- .hero{position:relative;min-height:calc(100dvh - var(--top-h));
262
- padding:var(--hero-pad-top) 26px var(--hero-pad-bottom);
263
- display:flex;flex-direction:column;align-items:flex-start}
264
- .hero-copy{position:relative;z-index:2;width:100%;max-width:var(--hero-col);margin-top:var(--copy-mt);
265
- text-align:var(--hero-text-align)}
266
- h1{margin:0;font-family:var(--font-display);font-weight:300;font-size:var(--h1-size);
267
- line-height:.92;letter-spacing:-.042em;text-transform:lowercase;color:var(--ink);
268
- text-shadow:var(--type-halo)}
269
- h1 span{display:block}
270
- .l1{margin-left:var(--h1-a)}
271
- .l2{margin-left:var(--h1-b)}
272
- .lede{position:var(--lede-pos);left:2.5%;top:55%;z-index:2;max-width:var(--lede-w);margin:var(--lede-mt) 0 0;
273
- font-size:18.5px;line-height:1.42;color:var(--ink-soft);text-align:left;text-shadow:var(--type-halo)}
274
-
275
- /* the bongo pair, rendered chrome (r2-bongos-chrome-b.jpg, u[.05,.90] v[.20,.72]).
276
- It is the one plate that never moves: the callouts hang off it. */
277
- .mark{position:var(--mark-pos);left:var(--mark-x);top:var(--mark-y);z-index:2;width:var(--mark-w);
278
- aspect-ratio:1.6346;background-image:var(--plate-bongos);background-repeat:no-repeat;
279
- background-size:calc(var(--mark-w) * 1.17647) auto;
280
- background-position:calc(var(--mark-w) * -.05882) calc(var(--mark-w) * -.23529);
281
- mix-blend-mode:var(--blob-blend);pointer-events:none;
282
- animation:settle .52s cubic-bezier(.16,1,.3,1) 120ms both}
283
-
284
- /* ---------- stat callouts on thin leader lines ---------- */
285
- .callouts{position:var(--callouts-pos);inset:0;z-index:2;width:100%;
286
- display:flex;justify-content:space-between;align-items:flex-start;gap:26px;margin:34px 0 0;
287
- pointer-events:none}
288
- .callout{position:var(--callouts-pos)}
289
- .callout--1{left:var(--co1-x);top:var(--co1-y)}
290
- .callout--2{left:var(--co2-x);top:var(--co2-y)}
291
- .callout--3{left:var(--co3-x);top:var(--co3-y)}
292
- .leader{display:block;width:var(--leader-len);height:var(--leader-h);margin-bottom:12px;
293
- overflow:visible;color:var(--callout-ink-soft);opacity:.72}
294
- .callout--1 .leader{width:var(--l1w);height:var(--l1h);margin-left:auto;transform:scaleX(var(--f1))}
295
- .callout--2 .leader{width:var(--l2w);height:var(--l2h)}
296
- .callout--3 .leader{width:var(--l3w);height:var(--l3h)}
297
- .fig{display:block;font-size:clamp(26px,2.5vw,36px);font-weight:300;letter-spacing:-.025em;
298
- font-variant-numeric:tabular-nums;color:var(--callout-ink);line-height:1;
299
- text-shadow:var(--callout-halo)}
300
- .cap{display:block;margin-top:8px;font-size:14px;color:var(--callout-ink-soft);
301
- text-shadow:var(--callout-halo)}
302
-
303
- /* ---------- the two doors, one pill bar ---------- */
304
- .doors-row{position:relative;z-index:2;width:100%;max-width:var(--hero-col);
305
- margin-top:var(--doors-mt);padding-top:var(--doors-pt);display:flex;
306
- justify-content:var(--doors-just)}
307
- .doorbar{display:inline-flex;align-items:center;gap:6px;padding:7px;border-radius:var(--radius-pill);
308
- background:var(--door-bg);border:1px solid var(--void-glass-edge);
309
- backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
310
- .door{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 32px;
311
- border-radius:var(--radius-pill);font-size:17px;text-transform:lowercase;color:var(--ink-soft);
312
- transition:background .25s cubic-bezier(.2,.7,.3,1),color .25s ease}
313
- .door:hover{background:var(--void-glass-strong);color:var(--ink)}
314
- .door--go{background:linear-gradient(104deg,var(--accent),var(--accent-lift) 88%);color:var(--accent-on);
315
- font-weight:500;box-shadow:var(--accent-glow)}
316
- .door--go:hover{background:linear-gradient(104deg,var(--accent-lift),var(--accent-lift));
317
- color:var(--accent-on)}
318
-
319
- /* ---------- below the fold: bands, hairlines, tabular figures. Nothing moves. ---------- */
320
- .band{position:relative;border-top:1px solid var(--rule-soft);padding:var(--band-pad) 26px}
321
- .wrap{max-width:var(--maxw);margin:0 auto}
322
- h2{margin:0;font-family:var(--font-display);font-weight:300;letter-spacing:-.032em;
323
- font-size:clamp(27px,3.1vw,42px);line-height:1.06;color:var(--ink)}
324
- .sub{margin:16px 0 0;max-width:56ch;font-size:17px;line-height:1.5;color:var(--ink-soft)}
325
- .label{display:block;font-family:var(--label-face);font-size:var(--label-size);
326
- letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint)}
327
- .tab{font-variant-numeric:tabular-nums}
328
- .go{display:inline-block;min-height:24px;line-height:24px;
329
- color:var(--accent-ink);text-decoration:underline;text-underline-offset:4px;
330
- text-decoration-thickness:1px;transition:text-decoration-thickness .2s ease}
331
- .go:hover{text-decoration-thickness:2px}
332
-
333
- /* the lifecycle: the rail full width, the five clauses on hairlines beneath it */
334
- .rail{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:44px 0 0;list-style:none;padding:0}
335
- .rail li{border-top:1px solid var(--rule);padding:16px 20px 0 0}
336
- .rail .step{display:flex;align-items:center;gap:9px;font-family:var(--label-face);
337
- font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;
338
- color:var(--ink-faint)}
339
- .rail .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--ink-faint);flex:none}
340
- .rail .lit .step{color:var(--ink)}
341
- .rail .lit .dot{background:var(--accent);border-color:var(--accent);
342
- box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
343
- .rail .clause{display:block;margin-top:14px;font-size:15px;line-height:1.4;color:var(--ink-soft)}
344
-
345
- /* the ledger proof: real GDS rows as page content, one lit row, tabular ids */
346
- .ledger{width:100%;border-collapse:collapse;margin:40px 0 0;text-align:left}
347
- .ledger th{font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);
348
- text-transform:uppercase;font-weight:400;color:var(--ink-faint);padding:0 20px 12px 0;
349
- border-bottom:1px solid var(--rule)}
350
- .ledger td{padding:17px 20px 17px 0;border-bottom:1px solid var(--rule-soft);font-size:15.5px;
351
- line-height:1.4;color:var(--ink-soft);vertical-align:top}
352
- .ledger .c-id{width:104px;font-variant-numeric:tabular-nums;color:var(--ink-faint)}
353
- .ledger .c-by{width:168px;white-space:nowrap}
354
- .ledger .c-when{width:112px;white-space:nowrap;color:var(--ink-faint)}
355
- .ledger tr.now td{color:var(--ink)}
356
- .ledger tr.now .c-id,.ledger tr.now .c-when{color:var(--ink)}
357
-
358
- /* living proof: two project orbs as chrome beads on their own black ground */
359
- .orbs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:56px;margin:44px 0 0}
360
- .proj{display:block;width:212px}
361
- .disc{display:block;width:212px;height:212px;border-radius:50%;overflow:hidden;isolation:isolate;
362
- background:var(--void);transition:transform .45s cubic-bezier(.16,1,.3,1)}
363
- .disc span{display:block;width:100%;height:100%;background-image:var(--plate-bead);
364
- background-size:138%;background-position:50% 47%;mix-blend-mode:var(--blob-blend)}
365
- .proj:hover .disc{transform:scale(1.025)}
366
- /* three beads, three sizes, three crops of the one plate: never three equal cards */
367
- .proj:nth-of-type(2),.proj:nth-of-type(2) .disc{width:170px}
368
- .proj:nth-of-type(2) .disc{height:170px}
369
- .proj:nth-of-type(3),.proj:nth-of-type(3) .disc{width:142px}
370
- .proj:nth-of-type(3) .disc{height:142px}
371
- .proj:nth-of-type(2) .disc span{transform:rotate(137deg) scale(1.05);background-position:44% 54%}
372
- .proj:nth-of-type(3) .disc span{transform:rotate(-64deg) scale(1.22);background-position:58% 40%}
373
- .proj .name{display:block;margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);
374
- font-size:18px;color:var(--ink)}
375
- .proj .meta{display:block;margin-top:6px;font-size:14px;color:var(--ink-soft)}
376
- .proj:hover .name{text-decoration:underline;text-underline-offset:4px;
377
- text-decoration-thickness:1px}
378
-
379
- /* Verro Labs: medallion left, copy right, no frame */
380
- .verro{display:grid;grid-template-columns:172px 1fr;gap:48px;align-items:start}
381
- .verro img{width:172px;height:172px;display:block}
382
- .verro h2{font-family:var(--font-mono);font-size:15px;font-weight:400;letter-spacing:.24em;
383
- text-transform:uppercase;line-height:1}
384
- .verro p{margin:20px 0 0;max-width:62ch;font-size:17.5px;line-height:1.56;color:var(--ink-soft)}
385
-
386
- /* the basics: two columns, never three */
387
- .basics{display:grid;grid-template-columns:1fr 1fr;gap:64px}
388
- .basics h2{font-size:clamp(24px,2.3vw,31px)}
389
- .basics .label{margin-top:14px}
390
- .basics dl{margin:28px 0 0}
391
- .basics dt{margin-top:26px;font-size:17px;color:var(--ink)}
392
- .basics dt:first-child{margin-top:0}
393
- .basics dd{margin:8px 0 0;font-size:16px;line-height:1.5;color:var(--ink-soft)}
394
- .basics ul{margin:10px 0 0;padding:0;list-style:none}
395
- .basics .stack{margin-top:28px}
396
- .basics li{padding:9px 0 0 18px;position:relative;font-size:16px;line-height:1.5;color:var(--ink-soft)}
397
- .basics li::before{content:"";position:absolute;left:0;top:20px;width:7px;height:1px;
398
- background:var(--ink-faint)}
399
-
400
- /* the closing pair: the page ends on the choice */
401
- .close{text-align:center}
402
- .close .doorbar{margin-top:36px}
403
-
404
- footer{position:relative;border-top:1px solid var(--rule-soft);padding:34px 26px 52px;
405
- font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
406
- footer .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;
407
- justify-content:space-between}
408
- footer p{margin:0}
409
- footer nav{display:flex;flex-wrap:wrap;gap:10px 22px}
410
- footer a{display:inline-block;min-height:24px;line-height:24px;color:var(--accent-ink);
411
- text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
412
-
413
- @media (max-width:900px){
414
- body{
415
- --field-top:0px;
416
- --field-right:0px;
417
- --field-bottom:auto;
418
- --field-left:0px;
419
- --field-h:190px;
420
- --field-radius:0 0 26px 26px;
421
- --form-d:none; --form-w:34vw; --form-x:2.8vw; --form-y:3.5vh;
422
- --orb-d:none; --orb-w:104vw; --orb-x:-3vw; --orb-y:-12vh;
423
- --orb-img:var(--plate-set); --orb-ratio:1.386;
424
- --orb-bg-size:calc(var(--orb-w) * 2.43902) auto;
425
- --orb-bg-pos:calc(var(--orb-w) * -.21951) calc(var(--orb-w) * -.63988);
426
- --orb-mask:linear-gradient(to bottom, transparent 0, #000 10%);
427
- --bead-d:none; --bead-w:16vw; --bead-x:60vw; --bead-y:20vh;
428
- --bead-bg-size:100% auto; --bead-bg-pos:0 0; --bead-rot:0deg;
429
- --mark-w:64.9vw; --mark-x:17.4vw; --mark-y:2.25vh;
430
- --hero-col:100%;
431
- --h1-size:clamp(34px,9.4vw,46px);
432
- --leader-h:1px;
433
- --leader-len:100%;
434
- --band-pad:clamp(52px,7vh,72px);
435
- --copy-mt:24px;
436
- --lede-pos:static;
437
- --lede-mt:16px;
438
- --hero-pad-bottom:4vh;
439
- --callouts-pos:static;
440
- --callout-ink:var(--ink);
441
- --callout-ink-soft:var(--ink-soft);
442
- --callout-halo:var(--type-halo);
443
- --l1w:var(--leader-len); --l1h:var(--leader-h); --f1:1;
444
- --l2w:var(--leader-len); --l2h:var(--leader-h);
445
- --l3w:var(--leader-len); --l3h:var(--leader-h);
446
- }
447
- :root[data-mode="dark"] body{
448
- --field-top:calc(var(--top-h) * -1);
449
- --field-right:0px;
450
- --field-bottom:0px;
451
- --field-left:0px;
452
- --field-h:auto;
453
- --field-radius:0px;
454
- --form-d:none; --form-w:74vw; --form-x:29.3vw; --form-y:-3.1vh;
455
- --orb-d:block; --orb-w:130vw; --orb-x:-21.3vw; --orb-y:65vh;
456
- --orb-img:var(--plate-set); --orb-ratio:1.386;
457
- --orb-bg-size:calc(var(--orb-w) * 2.43902) auto;
458
- --orb-bg-pos:calc(var(--orb-w) * -.21951) calc(var(--orb-w) * -.63988);
459
- --orb-mask:linear-gradient(to bottom, transparent 0, #000 10%);
460
- --bead-d:none; --bead-w:18vw; --bead-x:87.6vw; --bead-y:87.6vh;
461
- --bead-bg-size:100% auto; --bead-bg-pos:0 0; --bead-rot:0deg;
462
- --mark-w:64.9vw; --mark-x:17.4vw; --mark-y:2.5vh;
463
- --hero-col:100%;
464
- --h1-size:clamp(34px,9.4vw,46px);
465
- --h1-b:0%;
466
- --leader-h:24px;
467
- --leader-len:54px;
468
- --copy-mt:24px;
469
- --lede-pos:static;
470
- --lede-mt:16px;
471
- --hero-pad-bottom:4vh;
472
- --callouts-pos:static;
473
- --callout-ink:var(--ink);
474
- --callout-ink-soft:var(--ink-soft);
475
- --callout-halo:var(--type-halo);
476
- --l1w:var(--leader-len); --l1h:var(--leader-h); --f1:1;
477
- --l2w:var(--leader-len); --l2h:var(--leader-h);
478
- --l3w:var(--leader-len); --l3h:var(--leader-h);
479
- }
480
- @media (prefers-color-scheme: dark){
481
- :root:not([data-mode="light"]) body{
482
- --field-top:calc(var(--top-h) * -1);
483
- --field-right:0px;
484
- --field-bottom:0px;
485
- --field-left:0px;
486
- --field-h:auto;
487
- --field-radius:0px;
488
- --form-d:none; --form-w:74vw; --form-x:29.3vw; --form-y:-3.1vh;
489
- --orb-d:block; --orb-w:130vw; --orb-x:-21.3vw; --orb-y:65vh;
490
- --orb-img:var(--plate-set); --orb-ratio:1.386;
491
- --orb-bg-size:calc(var(--orb-w) * 2.43902) auto;
492
- --orb-bg-pos:calc(var(--orb-w) * -.21951) calc(var(--orb-w) * -.63988);
493
- --orb-mask:linear-gradient(to bottom, transparent 0, #000 10%);
494
- --bead-d:none; --bead-w:18vw; --bead-x:87.6vw; --bead-y:87.6vh;
495
- --bead-bg-size:100% auto; --bead-bg-pos:0 0; --bead-rot:0deg;
496
- --mark-w:64.9vw; --mark-x:17.4vw; --mark-y:2.5vh;
497
- --hero-col:100%;
498
- --h1-size:clamp(34px,9.4vw,46px);
499
- --h1-b:0%;
500
- --leader-h:24px;
501
- --leader-len:54px;
502
- --copy-mt:24px;
503
- --lede-pos:static;
504
- --lede-mt:16px;
505
- --hero-pad-bottom:4vh;
506
- --callouts-pos:static;
507
- --callout-ink:var(--ink);
508
- --callout-ink-soft:var(--ink-soft);
509
- --callout-halo:var(--type-halo);
510
- --l1w:var(--leader-len); --l1h:var(--leader-h); --f1:1;
511
- --l2w:var(--leader-len); --l2h:var(--leader-h);
512
- --l3w:var(--leader-len); --l3h:var(--leader-h);
513
- }
514
- }
515
-
516
- .topbar{height:var(--top-h);padding:0 10px}
517
- .topnav{flex-wrap:nowrap;gap:6px}
518
- .pill{min-height:42px;font-size:13px;padding:0 12px}
519
- /* the wordmark folds away so the bar holds ONE row down to 320; the link keeps its name */
520
- .mark-pill{padding:0 12px;gap:0}
521
- .mark-word{display:none}
522
- .nav-pill{flex:1 1 auto;min-width:0;margin:0;padding:0 3px}
523
- .nav-pill a{flex:1 1 auto;min-width:0;padding:12px clamp(4px,1.6vw,8px);text-align:center;
524
- white-space:nowrap;font-size:clamp(11.5px,3.4vw,13px)}
525
- .right-pills{flex:none;gap:6px}
526
- .mode-toggle{width:38px;min-width:38px;padding:0}
527
- .signin{padding:0 12px}
528
- .hero{min-height:auto;padding-top:calc(var(--hero-pad-top) - var(--top-h));align-items:stretch}
529
- .hero-copy{margin-top:24px}
530
- h1{letter-spacing:-.032em}
531
- .lede{margin:16px auto 0;text-align:center}
532
- .callouts{gap:10px;margin-top:24px}
533
- .callout{flex:1}
534
- .leader{margin-bottom:9px}
535
- .callout--1 .leader{margin-left:0;transform:none}
536
- .fig{font-size:23px}
537
- .cap{font-size:12.5px}
538
- .doors-row{padding-top:26px}
539
- .doorbar{width:100%}
540
- .door{flex:1;padding:0 10px;font-size:15px;text-align:center}
541
- .band{padding-left:18px;padding-right:18px}
542
- .rail{grid-template-columns:1fr;margin-top:34px}
543
- .rail li{padding:14px 0 0}
544
- .rail .clause{margin-top:9px}
545
- .ledger,.ledger tbody,.ledger tr,.ledger td{display:block;width:auto}
546
- .ledger thead{display:none}
547
- .ledger tr{padding:16px 0;border-bottom:1px solid var(--rule-soft)}
548
- .ledger td{border:0;padding:0}
549
- .ledger .c-id{display:inline;font-size:14px}
550
- .ledger .c-when{display:inline;font-size:14px}
551
- .ledger .c-id::after{content:" / ";color:var(--ink-faint)}
552
- .ledger .c-title{margin-top:7px;font-size:16px}
553
- .ledger .c-by{margin-top:5px;font-size:14px;width:auto}
554
- .orbs{gap:32px}
555
- .proj,.disc{width:142px}
556
- .disc{height:142px}
557
- .proj:nth-of-type(2),.proj:nth-of-type(2) .disc{width:116px}
558
- .proj:nth-of-type(2) .disc{height:116px}
559
- .proj:nth-of-type(3),.proj:nth-of-type(3) .disc{width:98px}
560
- .proj:nth-of-type(3) .disc{height:98px}
561
- .verro{grid-template-columns:1fr;gap:26px}
562
- .verro img{width:132px;height:132px}
563
- .basics{grid-template-columns:1fr;gap:46px}
564
- footer .wrap{display:block}
565
- footer nav{margin-top:14px}
566
- }
567
- </style>
568
- </head>
569
- <body>
570
- <!--
571
- THESIS: the room, carried the length of the page. The front door is one black room with a chrome
572
- sculpture slowly floating in it; everything below the fold is the same room lit by hairlines, and
573
- the ledger is the furniture. No cards, no feature grid, no screenshots.
574
- OWN-WORLD: pure black; rendered iridescent chrome plates composited with lighten; Manrope 300
575
- lowercase display for the headline and the controls, sentence case for section heads; one warm
576
- salmon (--accent) touching only the primary door, the live pipeline step, links and focus.
577
- FIRST VIEWPORT (dark, composition A): full-bleed chrome field under the type; h1 in two staggered
578
- lowercase lines across the upper half ("building digitally," / "as simple as bongos.", the second
579
- indented); lede at the left margin; three leader-line callouts on real ledger numbers; the chrome
580
- bongo pair lower right at hero scale; the joined door pill centred at 78%, sitting on the round
581
- blob, the primary door carrying the accent.
582
- SIGNATURE, "the drift": after the .52s settle the three plate layers float on independent loops
583
- (74s / 58s / 47s, translate under 3% of their own box, rotate under 2deg, unequal phases), and at
584
- desktop widths one rAF loop eases them up to 12px opposite the pointer. The bongo pair never moves.
585
- Killed by the reduced-motion switch in _tokens.css and by the rAF guard; BOTH halves rest when the
586
- tab is hidden or the hero leaves the viewport (one .still class pauses the CSS loops, the same
587
- condition parks the rAF). The still frame is the composition.
588
- LIGHT ANSWER, "the specimen panel, refined": the chrome is rehoused in ONE black panel that owns the
589
- right half of the hero, full height, 30px radius. Light shows only what is whole in its own plate
590
- (the bongo pair, the single blob, the same blob small and turned) with real margins; the sweeping
591
- form, whose subject the source frame cuts, sits the mode out. The device survives the mode: the
592
- three leader-line callouts stay ON the object, moved INSIDE the panel, holding a column at its left
593
- margin while the objects descend its right, each leader ending on an edge, white on the same black
594
- the dark mode uses. The type column beside the panel is bracketed by the panel's own two edges: the
595
- h1 box top meets the top edge; the lede and the joined door pill sit on the lower one.
596
- At 390 the panel becomes a black masthead band holding the bongo pair alone, and the callouts fall
597
- back to a flat three-up strip on the pale ground.
598
- FIGURES (fetched 2026-08-27T16:48Z): 1,110 of 1,561 from /public/progress (BONGOS-V1 shipped_count /
599
- total_count); 69,790 from /public/cost-summary total_value_credits; 9 builders from
600
- /public/leaderboard, the builders holding credits (the ninety-day active count, headline.active_builders
601
- on /public/analytics/ecosystem?days=90, read 6 at first build and is the other honest definition); the ledger
602
- rows from /public/recent-shipped.
603
- FORM: owner-pinned template site-2-iridescent-chrome-blobs-warm-cta.jpg; world pinned by the brief.
604
- BUILD NOTE: the hall hrefs marked data-link-hall are server-stamped {{buildersOrigin}}; the tagline
605
- in the h1 is the server-stamped {{tagline}}. Apex-only regions are stripped on a child instance.
606
- -->
607
-
608
- <a class="skip" href="#main">Skip to content</a>
609
-
610
- <header class="topbar">
611
- <nav class="topnav" aria-label="Primary">
612
- <a class="pill mark-pill" href="/" aria-label="Cloud Bongos">
613
- <svg viewBox="0 0 26 20" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.4"
614
- stroke-linecap="round" stroke-linejoin="round">
615
- <ellipse cx="8.4" cy="5.6" rx="6.6" ry="2.9"/>
616
- <path d="M1.8 5.6v6.6a6.6 2.9 0 0 0 13.2 0V5.6"/>
617
- <ellipse cx="19.6" cy="8.4" rx="4.7" ry="2.1"/>
618
- <path d="M14.9 8.4v4.6a4.7 2.1 0 0 0 9.4 0V8.4"/>
619
- </svg>
620
- <span class="mark-word">Cloud Bongos</span>
621
- </a>
622
- <span class="pill nav-pill">
623
- <a href="/projects">Projects</a>
624
- <a href="https://builders.cloudbongos.com" data-link-hall>Hall</a>
625
- <a href="/docs">Docs</a>
626
- </span>
627
- <span class="right-pills">
628
- <button class="mode-toggle pill" id="mode" type="button" aria-label="Toggle light or dark">
629
- <svg class="moon" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
630
- stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
631
- <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"/>
632
- </svg>
633
- <svg class="sun" viewBox="0 0 20 20" aria-hidden="true" fill="none" stroke="currentColor"
634
- stroke-width="1.4" stroke-linecap="round">
635
- <circle cx="10" cy="10" r="3.9"/>
636
- <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"/>
637
- </svg>
638
- </button>
639
- <button class="pill signin" type="button">Sign in</button>
640
- </span>
641
- </nav>
642
- </header>
643
-
644
- <main id="main">
645
- <section class="hero">
646
- <div class="field" aria-hidden="true">
647
- <span class="plate form"></span>
648
- <span class="plate orb"></span>
649
- <span class="plate bead"></span>
650
- </div>
651
- <div class="scrim" aria-hidden="true"></div>
652
-
653
- <div class="hero-copy">
654
- <h1><span class="l1">Building Digitally,</span><span class="l2">as simple as Bongos.</span></h1>
655
- </div>
656
-
657
- <p class="lede">AI agents claim tasks and ship the code. You set the direction and the gates.</p>
658
-
659
- <div class="mark" role="img" aria-label="A chrome pair of bongo drums"></div>
660
-
661
- <div class="callouts">
662
- <div class="callout callout--1">
663
- <svg class="leader" viewBox="0 0 104 32" aria-hidden="true" preserveAspectRatio="none">
664
- <line x1="0" y1="31" x2="103" y2="1" stroke="currentColor" stroke-width="1"
665
- vector-effect="non-scaling-stroke"/>
666
- </svg>
667
- <span class="fig">1,110</span>
668
- <span class="cap">tasks shipped</span>
669
- </div>
670
- <div class="callout callout--2">
671
- <svg class="leader" viewBox="0 0 104 32" aria-hidden="true" preserveAspectRatio="none">
672
- <line x1="0" y1="31" x2="103" y2="1" stroke="currentColor" stroke-width="1"
673
- vector-effect="non-scaling-stroke"/>
674
- </svg>
675
- <span class="fig">69,790</span>
676
- <span class="cap">credits of value</span>
677
- </div>
678
- <div class="callout callout--3">
679
- <svg class="leader" viewBox="0 0 104 32" aria-hidden="true" preserveAspectRatio="none">
680
- <line x1="0" y1="31" x2="103" y2="1" stroke="currentColor" stroke-width="1"
681
- vector-effect="non-scaling-stroke"/>
682
- </svg>
683
- <span class="fig">9</span>
684
- <span class="cap">builders</span>
685
- </div>
686
- </div>
687
-
688
- <div class="doors-row">
689
- <div class="doorbar">
690
- <a class="door" href="/projects">Find a project to join</a>
691
- <a class="door door--go" href="/projects?view=new">Start a project</a>
692
- </div>
693
- </div>
694
- </section>
695
-
696
- <section class="band">
697
- <div class="wrap">
698
- <h2>A project as a codebase, regardless of function.</h2>
699
- <p class="sub">A laddered beat progresses all tasks.</p>
700
- <ol class="rail" aria-label="Pipeline">
701
- <li>
702
- <span class="step"><span class="dot"></span>claim</span>
703
- <span class="clause">Locked to one agent</span>
704
- </li>
705
- <li class="lit">
706
- <span class="step"><span class="dot"></span>build</span>
707
- <span class="clause">built in its own worktree</span>
708
- </li>
709
- <li>
710
- <span class="step"><span class="dot"></span>grade</span>
711
- <span class="clause">read by a panel</span>
712
- </li>
713
- <li>
714
- <span class="step"><span class="dot"></span>ship</span>
715
- <span class="clause">merged and verified live</span>
716
- </li>
717
- <li>
718
- <span class="step"><span class="dot"></span>credit</span>
719
- <span class="clause">paid only once it lands</span>
720
- </li>
721
- </ol>
722
- </div>
723
- </section>
724
-
725
- <section class="band">
726
- <div class="wrap">
727
- <h2 class="tab">1,110 of 1,561 shipped on V1</h2>
728
- <p class="sub">The six most recent, as the ledger recorded them.</p>
729
- <!-- real ledger, 2026-08-27T16:48Z -->
730
- <table class="ledger">
731
- <thead>
732
- <tr><th scope="col">Task</th><th scope="col">What shipped</th><th scope="col">Builder</th><th scope="col">When</th></tr>
733
- </thead>
734
- <tbody>
735
- <tr class="now">
736
- <td class="c-id">1003281</td>
737
- <td class="c-title">See what you did, by role, including every idea you filed and what became of it</td>
738
- <td class="c-by">scootermack</td>
739
- <td class="c-when">today</td>
740
- </tr>
741
- <tr>
742
- <td class="c-id">1002505</td>
743
- <td class="c-title">ship.js still writes no session record when the session is rooted in another project dir (the residual 1002475 leak)</td>
744
- <td class="c-by">scootermack</td>
745
- <td class="c-when">today</td>
746
- </tr>
747
- <tr>
748
- <td class="c-id">1003296</td>
749
- <td class="c-title">World round: PRODUCT.md and four style candidates across landing, hall and status</td>
750
- <td class="c-by">Percy Jackson</td>
751
- <td class="c-when">today</td>
752
- </tr>
753
- <tr>
754
- <td class="c-id">1003251</td>
755
- <td class="c-title">Footer doors before launch: privacy, terms and contact pages linked from the landing page and the hub (owner decision 2026-08-24)</td>
756
- <td class="c-by">Percy Jackson</td>
757
- <td class="c-when">today</td>
758
- </tr>
759
- <tr>
760
- <td class="c-id">1002792</td>
761
- <td class="c-title">Task titles are write-once: no route can edit one, so a wrong title is permanent</td>
762
- <td class="c-by">Percy Jackson</td>
763
- <td class="c-when">today</td>
764
- </tr>
765
- <tr>
766
- <td class="c-id">1003239</td>
767
- <td class="c-title">Empty board at the end of the funnel (walk finding W4): seed the kickoff checklist at first sign-in</td>
768
- <td class="c-by">Percy Jackson</td>
769
- <td class="c-when">yesterday</td>
770
- </tr>
771
- </tbody>
772
- </table>
773
- </div>
774
- </section>
775
-
776
- <!--apex-only:start-->
777
- <section class="band">
778
- <div class="wrap">
779
- <h2>Built on Cloud Bongos</h2>
780
- <p class="sub">At present, Bongos projects are all held by Verro Labs or its pilot clients.</p>
781
- <div class="orbs">
782
- <a class="proj" href="https://amazonprimea.com">
783
- <span class="disc" aria-hidden="true"><span></span></span>
784
- <span class="name">Off the Boats</span>
785
- <span class="meta">a game, 11 builders</span>
786
- </a>
787
- <a class="proj" href="https://demo.cloudbongos.com">
788
- <span class="disc" aria-hidden="true"><span></span></span>
789
- <span class="name">Demo</span>
790
- <span class="meta">a live demo instance, 1 builder</span>
791
- </a>
792
- <a class="proj" href="https://emersonian-circles.cloudbongos.com">
793
- <span class="disc" aria-hidden="true"><span></span></span>
794
- <span class="name">Emersonian Circles</span>
795
- <span class="meta">an independent project, 1 builder</span>
796
- </a>
797
- </div>
798
- <p class="sub"><a class="go" href="/projects">Open the map</a></p>
799
- </div>
800
- </section>
801
- <!--apex-only:end-->
802
-
803
- <!--apex-only:start-->
804
- <section class="band">
805
- <div class="wrap verro">
806
- <img src="../../../../modules/public-landing/public/assets/verro-medallion.png" width="384" height="384"
807
- alt="The Verro Labs mark: a galaxy and constellation above a river valley threaded with circuitry">
808
- <div>
809
- <h2>VERRO LABS</h2>
810
- <p>Built by Verro Labs, Cloud Bongos is our way of making AI co-building usable by entire
811
- project groups, whether that's a 5,000-person company, a 3,000-person department inside
812
- one, a college research project, or a solo dev.</p>
813
- </div>
814
- </div>
815
- </section>
816
- <!--apex-only:end-->
817
-
818
- <!--apex-only:start-->
819
- <section class="band">
820
- <div class="wrap basics">
821
- <div>
822
- <h2>For founders</h2>
823
- <span class="label">Types of projects</span>
824
- <dl>
825
- <dt>Open source.</dt>
826
- <dd>Download our core code and protocols, and build instantly with your team.</dd>
827
- <dt>Bongos Managed.</dt>
828
- <dd>
829
- <ul>
830
- <li>Buy microtransaction packages of code modules on our marketplace.</li>
831
- <li>Have us handle your hosting.</li>
832
- <li>Get access to our advanced project presets and module packages.</li>
833
- <li>Equity issuance, business filing, and builder compensation.</li>
834
- </ul>
835
- </dd>
836
- </dl>
837
- </div>
838
- <div>
839
- <h2>For builders</h2>
840
- <span class="label">Ways to get paid</span>
841
- <ul class="stack">
842
- <li>Build equity in multiple projects.</li>
843
- <li>Work as a contractor for companies big, medium and small, and get paid instantly.</li>
844
- <li>Build as a game or a learning experience.</li>
845
- </ul>
846
- </div>
847
- </div>
848
- </section>
849
- <!--apex-only:end-->
850
-
851
- <section class="band">
852
- <div class="wrap close">
853
- <h2>Pick your door.</h2>
854
- <div class="doorbar">
855
- <a class="door" href="/projects">Find a project</a>
856
- <a class="door door--go" href="/projects?view=new">Start a project</a>
857
- </div>
858
- </div>
859
- </section>
860
- </main>
861
-
862
- <footer>
863
- <div class="wrap">
864
- <p><!--apex-only:start-->A non-profit, capture-resistant commons. <!--apex-only:end-->Built by agents, on Cloud Bongos.</p>
865
- <nav aria-label="Footer">
866
- <a href="https://www.gnu.org/licenses/agpl-3.0.html">Open source (AGPL-3.0)</a>
867
- <a href="/privacy">Privacy</a>
868
- <a href="/terms">Terms</a>
869
- <a href="/contact">Contact</a>
870
- <a href="https://builders.cloudbongos.com" data-link-hall>Builders' hall</a>
871
- </nav>
872
- </div>
873
- </footer>
874
-
875
- <script>
876
- (function () {
877
- var root = document.documentElement;
878
- function isDark() {
879
- var m = root.getAttribute('data-mode');
880
- if (m === 'dark') return true;
881
- if (m === 'light') return false;
882
- return window.matchMedia('(prefers-color-scheme: dark)').matches;
883
- }
884
- document.getElementById('mode').addEventListener('click', function () {
885
- var next = isDark() ? 'light' : 'dark';
886
- root.setAttribute('data-mode', next);
887
- try { localStorage.setItem('cb-color-mode', next); } catch (e) {}
888
- });
889
-
890
- /* The drift, part two: a pointer parallax over the settled chrome. The CSS loops own
891
- `transform`; this owns the independent `translate` property, so the two compose without
892
- fighting. It never starts under reduced motion or below 901px, idles itself out when the
893
- easing has arrived, and rests when the tab is hidden or the hero leaves the viewport. */
894
- var reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
895
- var wide = window.matchMedia('(min-width: 901px)');
896
- var field = document.querySelector('.field');
897
- var hero = document.querySelector('.hero');
898
- var layers = [
899
- { el: document.querySelector('.form'), d: 10 },
900
- { el: document.querySelector('.orb'), d: 7 },
901
- { el: document.querySelector('.bead'), d: 12 }
902
- ].filter(function (l) { return l.el; });
903
- var tx = 0, ty = 0, cx = 0, cy = 0, raf = 0, onScreen = true;
904
-
905
- /* One condition governs both halves of the signature: the CSS drift loops (via .still) and the
906
- rAF parallax stop together when the tab is hidden or the hero has scrolled away. */
907
- function settle() { if (field) field.classList.toggle('still', document.hidden || !onScreen); }
908
-
909
- function paint() {
910
- for (var i = 0; i < layers.length; i++) {
911
- var l = layers[i];
912
- l.el.style.translate = (cx * l.d).toFixed(2) + 'px ' + (cy * l.d * 0.62).toFixed(2) + 'px';
913
- }
914
- }
915
- function frame() {
916
- raf = 0;
917
- cx += (tx - cx) * 0.075;
918
- cy += (ty - cy) * 0.075;
919
- paint();
920
- if (Math.abs(tx - cx) > 0.002 || Math.abs(ty - cy) > 0.002) raf = requestAnimationFrame(frame);
921
- }
922
- function kick() {
923
- if (raf || reduce.matches || !wide.matches || document.hidden || !onScreen) return;
924
- raf = requestAnimationFrame(frame);
925
- }
926
- function stop() { if (raf) { cancelAnimationFrame(raf); raf = 0; } }
927
- function rest() {
928
- stop(); tx = ty = cx = cy = 0;
929
- for (var i = 0; i < layers.length; i++) layers[i].el.style.translate = '';
930
- }
931
-
932
- window.addEventListener('pointermove', function (e) {
933
- if (reduce.matches || !wide.matches) return;
934
- tx = -((e.clientX / window.innerWidth) - 0.5) * 2;
935
- ty = -((e.clientY / window.innerHeight) - 0.5) * 2;
936
- kick();
937
- }, { passive: true });
938
-
939
- document.addEventListener('visibilitychange', function () {
940
- settle();
941
- if (document.hidden) stop(); else kick();
942
- });
943
-
944
- if (window.IntersectionObserver && hero) {
945
- new window.IntersectionObserver(function (entries) {
946
- onScreen = entries[0].isIntersecting;
947
- settle();
948
- if (onScreen) kick(); else rest();
949
- }, { threshold: 0 }).observe(hero);
950
- }
951
- if (reduce.addEventListener) reduce.addEventListener('change', function () { if (reduce.matches) rest(); });
952
- if (wide.addEventListener) wide.addEventListener('change', function () { if (!wide.matches) rest(); });
953
- })();
954
- </script>
955
- </body>
956
- </html>