@bongos/core 1.25.15 → 1.25.17

package/modules/public-landing/public/assets/guide-scene.css

@@ -0,0 +1,245 @@
+/* assets/guide-scene.css — the start-a-project guide as a scene in the game (task 1005275).
+
+   The scene wears the game's look, Helm (DESIGN.md "Helm: the hall's look"): a night panel
+   closed left and right by the strong ice hairline, names in the name voice (condensed
+   wide capitals), what you press cut at two corners, progress as skewed segments, and the
+   one accent bar on the thing to do next. It stands on the landing, so it spends the
+   landing's tokens, never the hall's literals: the night and the ice are mixes of the
+   pack's --sea into its --bg and --ink (the Fifteen Rule), and they flip with the world's
+   own mode tier, so this sheet writes no dark rule and no :root. Every value is a var()
+   or a color-mix() of the fifteen; black with alpha is the scrim. Motion is two short
+   transitions and the waiting dots, all stopped by world.css's reduced-motion switch.
+   Layout: the plan beside the talk. Every layout value that changes on a phone is a
+   --gd-* name read with its desktop value as the fallback, and the landing's ONE
+   breakpoint (900px, DESIGN.md "Responsive"; the @media (max-width:900px) body block in
+   index.html) restates those names: one column, the frame the whole screen, the plan
+   opening over the talk from the Plan button. So this sheet adds no breakpoint, and its
+   inset edges are named once here (--gd-edge*) rather than typed into each rule. */
+.gd {
+  --gd-night: color-mix(in srgb, var(--sea) 9%, var(--bg));
+  --gd-panel: color-mix(in srgb, var(--sea) 13%, var(--bg-card));
+  --gd-ice: color-mix(in srgb, var(--sea) 12%, var(--ink));
+  --gd-rule: color-mix(in srgb, var(--gd-ice) 40%, transparent);
+  --gd-rule-soft: color-mix(in srgb, var(--gd-ice) 20%, transparent);
+  --gd-glass: color-mix(in srgb, var(--gd-ice) 9%, transparent);
+  --gd-strong: 1.5px;
+  --gd-name: "Barlow Condensed", var(--font-display);
+  --gd-body: "Barlow", var(--font-body);
+  --gd-cut: 12px;
+  --gd-cut-sm: 8px;
+  --gd-cut-path: polygon(var(--gd-cut) 0, 100% 0, 100% calc(100% - var(--gd-cut)), calc(100% - var(--gd-cut)) 100%, 0 100%, 0 var(--gd-cut));
+  --gd-cut-path-sm: polygon(var(--gd-cut-sm) 0, 100% 0, 100% calc(100% - var(--gd-cut-sm)), calc(100% - var(--gd-cut-sm)) 100%, 0 100%, 0 var(--gd-cut-sm));
+  --gd-focus: inset 0 0 0 2px var(--focus), inset 0 0 0 4px var(--gd-night);
+  /* the hairline drawn inside a cut shape (a border would be clipped by the cut) */
+  --gd-edge: inset 0 0 0 1px var(--gd-rule);
+  --gd-edge-soft: inset 0 0 0 1px var(--gd-rule-soft);
+  --gd-seg-edge: inset 0 0 0 var(--gd-strong) var(--gd-rule);
+
+  position: fixed; inset: 0; z-index: var(--ds-z-modal, 160);
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--gd-pad, var(--ds-space-md));
+  background: rgba(0, 0, 0, .62);
+  -webkit-backdrop-filter: blur(6px) saturate(.7); backdrop-filter: blur(6px) saturate(.7);
+  color: var(--gd-ice); font-family: var(--gd-body); font-size: var(--ds-text-xl); line-height: 1.5;
+}
+.gd[hidden] { display: none; }
+.gd .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+html.gd-open, html.gd-open body { overflow: hidden; }
+
+.gd__frame {
+  position: relative; box-sizing: border-box;
+  width: min(100%, var(--gd-frame-w, 1080px)); height: min(100%, var(--gd-frame-h, 760px));
+  display: grid; grid-template-columns: var(--gd-cols, minmax(0, 1fr) 340px);
+  background: var(--gd-night);
+  border: 0 solid var(--gd-rule); border-left-width: var(--gd-side, var(--gd-strong)); border-right-width: var(--gd-side, var(--gd-strong));
+  box-shadow: var(--ds-shadow-pop);
+}
+
+/* ── the talk ── */
+.gd__talk { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
+.gd__head {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm);
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md));
+  border-bottom: var(--gd-strong) solid var(--gd-rule);
+}
+.gd__title, .gd__planh {
+  margin: 0; font-family: var(--gd-name); font-weight: 500; font-size: var(--ds-text-3xl);
+  letter-spacing: .24em; text-transform: uppercase; line-height: 1.2; color: var(--ink);
+}
+.gd__x {
+  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
+  background: transparent; color: var(--gd-ice); border: 0; cursor: pointer;
+  clip-path: var(--gd-cut-path-sm);
+  transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.gd__x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; fill: none; }
+.gd__x:hover { background: var(--gd-glass); }
+
+/* the guide: the sprite in a cut frame, its name, the count as words and segments */
+.gd__who-row {
+  display: flex; align-items: center; gap: var(--ds-space-sm);
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md));
+  border-bottom: var(--ds-line, 1px) solid var(--gd-rule-soft);
+}
+.gd__face {
+  position: relative; flex: none; width: var(--gd-face, 72px); height: var(--gd-face, 72px); display: grid; place-items: center;
+  background: var(--gd-panel); clip-path: var(--gd-cut-path-sm);
+  box-shadow: var(--gd-edge);
+}
+.gd__face img { width: var(--gd-face-img, 64px); height: var(--gd-face-img, 64px); image-rendering: pixelated; }
+.gd__face img[hidden] { display: none; }
+.gd__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.gd__name {
+  margin: 0; font-family: var(--gd-name); font-weight: 600; font-size: var(--ds-text-xl);
+  letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
+}
+.gd__left { margin: 0; font-size: var(--ds-text-md); color: var(--gd-ice); font-variant-numeric: tabular-nums; }
+.gd__left[hidden], .gd__segs[hidden] { display: none; }
+.gd__segs { display: flex; flex-wrap: wrap; gap: var(--ds-space-hair); padding-left: 4px; }
+/* a message still to send is an outline; a sent one is filled ice (the Helm segment) */
+.gd__seg {
+  width: 22px; height: 8px; transform: skewX(-28deg);
+  box-shadow: var(--gd-seg-edge);
+}
+.gd__seg--used { background: var(--gd-ice); box-shadow: none; }
+
+/* the conversation */
+.gd__log {
+  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
+  margin: 0; padding: var(--ds-space-md) var(--gd-gutter, var(--ds-space-md)); list-style: none;
+  display: flex; flex-direction: column; gap: var(--ds-space-sm);
+}
+.gd__msg { display: flex; flex-direction: column; gap: 2px; max-width: 46rem; }
+.gd__who {
+  font-family: var(--gd-name); font-size: var(--ds-text-xs); font-weight: 500;
+  letter-spacing: .2em; text-transform: uppercase; color: var(--gd-ice);
+}
+.gd__words { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; color: var(--ink); }
+.gd__msg--visitor { align-self: flex-end; align-items: flex-end; }
+.gd__msg--visitor .gd__words {
+  padding: var(--ds-space-hair) var(--ds-space-sm);
+  background: var(--gd-panel); clip-path: var(--gd-cut-path-sm);
+  box-shadow: var(--gd-edge-soft);
+}
+.gd__msg--note .gd__words {
+  padding-top: var(--ds-space-hair); border-top: var(--ds-line, 1px) solid var(--gd-rule-soft);
+  color: var(--gd-ice); font-size: var(--ds-text-md);
+}
+/* waiting: three dots that rise in turn; at rest (reduced motion) they simply sit */
+.gd__dot {
+  display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: var(--ds-radius-pill);
+  background: var(--gd-ice); opacity: .5;
+  animation: gd-wait 1.2s var(--ds-ease) infinite;
+}
+.gd__dot:nth-child(3) { animation-delay: .15s; }
+.gd__dot:nth-child(4) { animation-delay: .3s; }
+@keyframes gd-wait { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
+
+.gd__err {
+  margin: 0 var(--ds-space-md) var(--ds-space-hair); padding: var(--ds-space-hair) var(--ds-space-sm);
+  border-left: var(--gd-strong) solid var(--err); background: var(--gd-glass);
+  color: var(--ink); font-size: var(--ds-text-md);
+}
+.gd__err[hidden] { display: none; }
+
+/* the composer */
+.gd__say {
+  display: flex; align-items: flex-end; gap: var(--ds-space-hair); flex-wrap: wrap;
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md)) var(--ds-space-md);
+  border-top: var(--gd-strong) solid var(--gd-rule);
+}
+.gd__say[hidden] { display: none; }
+.gd__text {
+  flex: 1 1 16rem; min-width: 0; min-height: 48px; max-height: 9.5rem; resize: vertical; box-sizing: border-box;
+  padding: 11px var(--ds-space-sm);
+  background: var(--gd-panel); color: var(--ink); caret-color: var(--accent);
+  border: var(--ds-line, 1px) solid var(--gd-rule); border-radius: 0;
+  font: inherit; font-size: var(--ds-text-xl);
+}
+.gd__text::placeholder { color: var(--gd-ice); opacity: .8; }
+.gd__text:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; box-shadow: none; border-color: transparent; }
+.gd__text:disabled { opacity: .7; }
+.gd__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
+/* under the box: end the chat early for the plan, or leave for sign-up */
+.gd__sayfoot { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); flex-wrap: wrap; }
+.gd__skip {
+  display: inline-flex; align-items: center; padding: 2px 0; min-height: 24px;
+  color: var(--gd-ice); font-size: var(--ds-text-md); text-decoration: underline; text-underline-offset: 3px;
+}
+.gd__skip:hover { color: var(--ink); }
+
+/* what you press: cut, in the name voice. The primary is the one accent bar. */
+.gd__send, .gd__go, .gd__planbtn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-hair);
+  min-height: 48px; padding: 0 var(--ds-space-md); box-sizing: border-box; border: 0; cursor: pointer;
+  font-family: var(--gd-name); font-size: var(--ds-text-xl); font-weight: 600;
+  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
+  clip-path: var(--gd-cut-path);
+  transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.gd__send, .gd__go { background: var(--accent); color: var(--accent-on); }
+.gd__send:hover, .gd__go:hover { background: var(--accent-lift); color: var(--accent-on); }
+.gd__send:disabled { background: var(--gd-panel); color: var(--gd-ice); cursor: default; }
+/* the Plan button is the one-column layout's only (the plan stands beside the talk above it) */
+.gd__planbtn { display: var(--gd-planbtn, none); flex: none; background: var(--gd-panel); color: var(--ink); box-shadow: var(--gd-edge); min-height: 40px; padding: 0 var(--ds-space-sm); font-size: var(--ds-text-md); }
+.gd__planbtn:hover { background: var(--gd-glass); }
+/* a cut control's focus is the inset two-tone ring, since a clip-path clips an outline */
+.gd__x:focus-visible, .gd__send:focus-visible, .gd__go:focus-visible, .gd__planbtn:focus-visible {
+  outline: 0; box-shadow: var(--gd-focus);
+}
+.gd__skip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
+
+/* the end: one line and the way on */
+.gd__end {
+  display: flex; align-items: center; justify-content: flex-end; gap: var(--ds-space-sm); flex-wrap: wrap;
+  padding: var(--ds-space-sm) var(--gd-gutter, var(--ds-space-md)) var(--ds-space-md);
+  border-top: var(--gd-strong) solid var(--gd-rule);
+}
+.gd__end[hidden] { display: none; }
+.gd__go { flex: 0 1 auto; width: var(--gd-go-w, auto); box-shadow: var(--accent-glow); }
+.gd__go[hidden] { display: none; }
+/* the quiet press: a cut ghost in the name voice (Make my plan) */
+.gd__more {
+  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--ds-space-sm);
+  background: transparent; color: var(--ink); border: 0; cursor: pointer;
+  box-shadow: var(--gd-edge); clip-path: var(--gd-cut-path-sm);
+  font-family: var(--gd-name); font-size: var(--ds-text-md); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
+  transition: background-color var(--ds-dur-fast) var(--ds-ease);
+}
+.gd__more:hover { background: var(--gd-glass); }
+.gd__more:focus-visible { outline: 0; box-shadow: var(--gd-focus); }
+.gd__more[hidden] { display: none; }
+
+/* ── the plan ── */
+.gd__plan {
+  display: var(--gd-plan-show, flex); flex-direction: column; min-height: 0;
+  position: var(--gd-plan-pos, static); inset: 0; z-index: 1;
+  background: var(--gd-panel);
+  border-left: var(--gd-plan-edge, var(--ds-line, 1px)) solid var(--gd-rule-soft);
+}
+/* one column: the Plan button lays the plan over the talk */
+.gd--plan .gd__plan { display: flex; }
+.gd--plan .gd__talk { visibility: var(--gd-talk-under-plan, visible); }
+.gd__planhead {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm);
+  padding: var(--ds-space-sm) var(--ds-space-md);
+  border-bottom: var(--gd-strong) solid var(--gd-rule);
+  min-height: 72px; box-sizing: border-box;
+}
+.gd__planhead .gd__x { display: var(--gd-planx, none); }
+.gd__planbody { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ds-space-md); display: flex; flex-direction: column; gap: var(--ds-space-hair); }
+.gd__planwait { margin: 0; color: var(--gd-ice); font-size: var(--ds-text-lg); }
+.gd__plansum { margin: 0; color: var(--ink); font-size: var(--ds-text-lg); text-wrap: pretty; }
+.gd__planh4 {
+  margin: var(--ds-space-sm) 0 0; font-family: var(--gd-name); font-size: var(--ds-text-xs); font-weight: 500;
+  letter-spacing: .2em; text-transform: uppercase; color: var(--gd-ice);
+}
+.gd__planlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
+.gd__plannote, .gd__saved { margin: 0; color: var(--gd-ice); font-size: var(--ds-text-md); }
+.gd__plannote { margin-top: var(--ds-space-sm); padding-top: var(--ds-space-hair); border-top: var(--ds-line, 1px) solid var(--gd-rule-soft); }
+.gd__saved { padding: var(--ds-space-sm) var(--ds-space-md); border-top: var(--ds-line, 1px) solid var(--gd-rule-soft); }
+.gd__saved[hidden] { display: none; }
+.gd__planlist li {
+  padding: var(--ds-space-hair) 0; border-top: var(--ds-line, 1px) solid var(--gd-rule-soft);
+  color: var(--ink); font-size: var(--ds-text-lg);
+}