@bongos/core 1.19.386 → 1.19.388

package/public-landing/assets/world.css

@@ -0,0 +1,241 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   THE CHROME WORLD — token layer for the apex landing (`/`).
+   Ported from docs/design/mocks/world/chrome-blobs/_tokens.css at the build of
+   the approved landing composition (task 1003298, goal 1000080). The mock's
+   composition switches (hero geometry, field rectangles, shell and crest
+   surfaces) did NOT come with it: those belong to the page that arranges the
+   sculpture, not to the world. What lives here is what any surface in this
+   world needs to be the same world.
+
+   THE WORLD. Pure black space in dark, pale paper in light, with iridescent
+   liquid-chrome sculpture as the only thing in it. One warm salmon lights only
+   what is pressable or live. Type is a light geometric grotesque (Manrope 300),
+   lowercase at display sizes, tabular in figures; JetBrains Mono carries labels
+   and ids. Nothing else is decorated: the chrome is the decoration.
+
+   PALETTE STRATEGY — restrained. A neutral ground-to-ink scale and exactly one
+   hue. Dark is a true #000 ground (sampled from the owner's reference) so the
+   plates, which are rendered ON black, composite into it with `lighten` and
+   have no seam. Light is the same sculpture cut out with real alpha, standing
+   on paper under a contact shadow — no black panel anywhere.
+
+   MATERIALS. Six rendered plates, in pairs: each black-ground JPEG for dark and
+   its alpha cutout for light (`--plate-set` / `--plate-set-cut`, `--plate-bead`
+   / `--plate-bead-cut`, `--plate-bongos` / `--plate-bongos-cut`). Every path is
+   ROOT-ABSOLUTE: Chromium resolves a url() inside a custom property against the
+   DOCUMENT, not the stylesheet that declared it, so a relative path here would
+   404 from every route but this file's own folder. Beyond the plates: dark
+   glass (translucent white over black with a backdrop blur and a 1px light
+   edge), a black pill ground for controls that must stay readable over bright
+   chrome, and 1px leader lines.
+
+   THE RULE. The fifteen contract tokens at the top of `:root` are the ONLY
+   colour source, and a host branding pack overrides exactly those (the server
+   splices them into `:root` at the end of <head>, at (0,1,0)). Everything below
+   them — every glass, tint, hatch, state colour, ramp and halo — is a var() or
+   a color-mix() of the fifteen, so a re-themed instance still gets a coherent
+   world. The two dark blocks are byte-identical twins at (0,2,0), so they win
+   over the pack; neither pins --accent, --sea or --terracotta to a literal,
+   because a re-themed instance has to be able to reach dark.
+
+   The sheet opens on `html { color-scheme: light }` rather than carrying the
+   hint in the token block: the browser's own surfaces (form controls, the
+   caret, the default scrollbar) are part of the world too, so light is the
+   sheet's opening state and each dark block below flips it with the palette.
+   ═══════════════════════════════════════════════════════════════════════════ */
+html { color-scheme: light; }
+
+:root {
+  /* ---- contract tier: the fifteen a host branding pack overrides ---- */
+  --bg: #edecee;
+  --bg-card: #fbfafc;
+  --bg-deep: #e2e1e4;
+  --bg-frame: #f6f5f7;
+  --ink: #17181a;
+  --ink-soft: #55565a;
+  --ink-faint: #65656a;
+  --rule: #c6c6c8;
+  --rule-soft: #dcdbdd;
+  --accent: #fb9569;
+  --accent-deep: #a3481a;
+  --sea: #5b6fd0;
+  --terracotta: #c9512c;
+  --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
+  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
+
+  /* ---- derived: the second face ---- */
+  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
+
+  /* ---- derived: the plates, in pairs (black-ground plate / alpha cutout) ---- */
+  --plate-set: url(/assets/world/r2-chrome-blobs-set.jpg);
+  --plate-set-cut: url(/assets/world/r2-chrome-blobs-set-cut.webp);
+  --plate-bead: url(/assets/world/r2-chrome-blob-one.jpg);
+  --plate-bead-cut: url(/assets/world/r2-chrome-blob-one-cut.webp);
+  --plate-bongos: url(/assets/world/r2-bongos-chrome-b.jpg);
+  --plate-bongos-cut: url(/assets/world/r2-bongos-chrome-a-cut.webp);
+  --blob-blend: lighten;
+
+  /* ---- derived: the void (the black the chrome composites on) ---- */
+  --void: #050508;
+  --void-ink: #ffffff;
+  --void-ink-soft: rgba(255, 255, 255, .70);
+  --void-edge: rgba(255, 255, 255, .14);
+  --void-pill: rgba(0, 0, 0, .5);
+  --void-glass: rgba(23, 24, 26, .05);
+  --void-glass-strong: rgba(23, 24, 26, .09);
+  --void-glass-edge: rgba(23, 24, 26, .12);
+  --door-bg: var(--void-glass);
+
+  /* ---- derived: glass ---- */
+  --glass: rgba(23, 24, 26, .05);
+  --glass-strong: rgba(23, 24, 26, .08);
+  --glass-edge: rgba(23, 24, 26, .12);
+  --glass-blur: 0px;
+
+  /* ---- derived: accent behaviours (the accent lights only what is live or pressable) ---- */
+  --accent-ink: color-mix(in srgb, var(--accent) 45%, #240e00);
+  --accent-lift: color-mix(in srgb, var(--accent) 58%, #ffffff);
+  --accent-tint: color-mix(in srgb, var(--accent) 30%, #fffdf9);
+  --accent-on: #2a1305;
+  /* light gives the primary door no lift, but this token is COMPOSED into shadow lists
+     (.door--go:focus-visible stacks the focus halo behind it), and the `none` keyword makes
+     any such list invalid. A zero-spread transparent shadow paints nothing and composes. */
+  --accent-glow: 0 0 0 0 transparent;
+
+  /* ---- derived: state ---- */
+  --ok: var(--accent-deep);
+  --warn: var(--terracotta);
+  --err: var(--terracotta);
+  --focus: color-mix(in srgb, var(--accent-deep) 82%, #3a1400);
+
+  /* ---- derived: geometry ---- */
+  --line: 1px;
+  --radius: 16px;
+  --radius-sm: 10px;
+  --radius-pill: 999px;
+  --top-h: 72px;
+
+  /* ---- derived: the bongo pair as line and fill, chrome ramp rather than ceramic ---- */
+  --chrome-hi: #ffffff;
+  --chrome-mid: #a9b2bd;
+  --chrome-cool: #949eaa;
+  --chrome-lo: #2e343c;
+  --skin-hi: #ffffff;
+  --skin-mid: #8e97a3;
+  --skin-lo: #333941;
+  --drum-shadow: #17181a;
+  --type-halo: none;
+
+  /* ---- derived: drawn chrome that cannot take a var() inline ---- */
+  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2365656a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%232a1305' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgba(23, 24, 26, .12) 5px 6px);
+
+  /* ---- derived: the label face ---- */
+  --label-face: var(--font-mono);
+  --label-size: 11px;
+  --label-space: .12em;
+}
+
+:root[data-mode="dark"] {
+  color-scheme: dark;
+  --bg: #000000;
+  --bg-card: #101012;
+  --bg-deep: #000000;
+  --bg-frame: #08080a;
+  --ink: #ffffff;
+  --ink-soft: #c0c0c0;
+  --ink-faint: #a8a8a8;
+  --rule: rgba(255, 255, 255, .16);
+  --rule-soft: rgba(255, 255, 255, .08);
+  --accent-deep: color-mix(in srgb, var(--accent) 70%, #ffffff);
+  --void: #000000;
+  --void-ink: var(--ink);
+  --void-ink-soft: var(--ink-soft);
+  --void-edge: rgba(255, 255, 255, .16);
+  --void-pill: rgba(0, 0, 0, .5);
+  --void-glass: rgba(255, 255, 255, .075);
+  --void-glass-strong: rgba(255, 255, 255, .14);
+  --void-glass-edge: rgba(255, 255, 255, .11);
+  --door-bg: var(--void-pill);
+  --glass: rgba(255, 255, 255, .11);
+  --glass-strong: rgba(255, 255, 255, .17);
+  --glass-edge: rgba(255, 255, 255, .13);
+  --glass-blur: 18px;
+  --accent-ink: var(--accent);
+  --accent-lift: color-mix(in srgb, var(--accent) 58%, #ffffff);
+  --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
+  --accent-on: #2a1305;
+  --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
+  --ok: var(--accent);
+  --warn: var(--accent);
+  --err: var(--terracotta);
+  --focus: var(--accent);
+  --drum-shadow: #000000;
+  --type-halo: 0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
+  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a8a8a8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%232a1305' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255, 255, 255, .14) 5px 6px);
+  --label-face: var(--font-body);
+  --label-size: 11.5px;
+  --label-space: .1em;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mode="light"]) {
+  color-scheme: dark;
+  --bg: #000000;
+  --bg-card: #101012;
+  --bg-deep: #000000;
+  --bg-frame: #08080a;
+  --ink: #ffffff;
+  --ink-soft: #c0c0c0;
+  --ink-faint: #a8a8a8;
+  --rule: rgba(255, 255, 255, .16);
+  --rule-soft: rgba(255, 255, 255, .08);
+  --accent-deep: color-mix(in srgb, var(--accent) 70%, #ffffff);
+  --void: #000000;
+  --void-ink: var(--ink);
+  --void-ink-soft: var(--ink-soft);
+  --void-edge: rgba(255, 255, 255, .16);
+  --void-pill: rgba(0, 0, 0, .5);
+  --void-glass: rgba(255, 255, 255, .075);
+  --void-glass-strong: rgba(255, 255, 255, .14);
+  --void-glass-edge: rgba(255, 255, 255, .11);
+  --door-bg: var(--void-pill);
+  --glass: rgba(255, 255, 255, .11);
+  --glass-strong: rgba(255, 255, 255, .17);
+  --glass-edge: rgba(255, 255, 255, .13);
+  --glass-blur: 18px;
+  --accent-ink: var(--accent);
+  --accent-lift: color-mix(in srgb, var(--accent) 58%, #ffffff);
+  --accent-tint: color-mix(in srgb, var(--accent) 22%, #0b0a09);
+  --accent-on: #2a1305;
+  --accent-glow: 0 8px 28px color-mix(in srgb, var(--accent) 38%, transparent);
+  --ok: var(--accent);
+  --warn: var(--accent);
+  --err: var(--terracotta);
+  --focus: var(--accent);
+  --drum-shadow: #000000;
+  --type-halo: 0 2px 18px rgba(0, 0, 0, .94), 0 0 54px rgba(0, 0, 0, .72);
+  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23a8a8a8' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%232a1305' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --hatch: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255, 255, 255, .14) 5px 6px);
+  --label-face: var(--font-body);
+  --label-size: 11.5px;
+  --label-space: .1em;
+  }
+}
+
+/* ---- narrow: the bar tightens; the world is otherwise mode- and width-invariant ---- */
+@media (max-width: 900px) {
+  :root {
+    --top-h: 60px;
+  }
+}
+
+/* The kill switch. Every animation in this world is authored on a plate or a
+   control, and every one of them stops here. Nothing may escape it. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}

package/public-landing/contact.html

@@ -15,7 +15,7 @@
 <link rel="canonical" href="{{publicOrigin}}/contact">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Quicksand:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&family=Manrope:wght@300;400;500;600&display=swap">
 <link rel="stylesheet" href="/assets/cosmos.css">
 <script>
 /* Mode, resolved before first paint — the same contract as every landing page. */