builtbykev/vyndr
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Design completion train — import authoritative mockup + M1a mobile foundation

Browse Source 
SETUP (required first step): overwrote specs/design-reference/ with the CURRENT
authoritative mockup ("Vyndr System.dc.html" from claude.ai/design, the version
with the combat card / pitcher identity / live grade-shift / correlation builder
/ FREE|PRO pricing / TRANSMISSION QUIET). 12 surfaces. Confirmed it has NO media
queries — desktop-only, so the 390px expression is a deliberate design decision,
not a shrink.

M1a — mobile foundation (built to spec, VISUALLY UNVERIFIED at 390px; WSL2↔Chrome
unreachable, the Chrome audit is the eyes):
- Header-zone collapse (the concrete audit finding: ticker + SIGNAL LIVE + STALE
  stacking in ~110px). The decorative EKG is dropped <768px so the heartbeat
  reads as ONE clean status line; signal pulse + ticker are the single animated
  element (DESIGN-SPEC §4). LiveLayer gains .heartbeat-bar / .hb-ekg hooks.
- Primary CTA (.vbtn) meets the 44px touch target on mobile; dense `small`
  buttons opt out (density is a feature).
- .m-hero mono-hero clamp for the one-figure-per-card grammar at 390px.
- M4 test-lock: vyndrParityQA asserts the header collapse, tap target, overflow
  containment, and the honest "UNVERIFIED at 390px" label are all in source.

Per-surface stacking (M1b), billboards (M2), desktop parity (M3) continue.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kev
2026-07-16 05:09:14 -04:00
parent 520548d3f7
commit a10227ee5a
5 changed files with 228 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/globals.css
+45
View File
@@ -1361,6 +1361,51 @@ html[data-font="readable"] .wm::after { opacity: 0.45 !important; }
.gl-full.gl-expanded { margin-top: 10px; }
}
/* ============================================================
DESIGN COMPLETION TRAIN — M1 MOBILE FOUNDATION (2026-07-16)
The mockup (specs/design-reference/vyndr-system.html) is DESKTOP-ONLY.
These rules are the deliberate 390px expression of its grammar — not a
shrink: ONE animated element in the header (DESIGN-SPEC §4), one bold
mono hero per card with muted context (§3/§5), ≥44px primary tap targets,
zero horizontal overflow. BUILT TO SPEC, VISUALLY UNVERIFIED at 390px
(WSL2↔Chrome unreachable here — a true-390px Chrome audit is the eyes).
============================================================ */
/* Header-zone collapse (audit: ticker + SIGNAL LIVE + STALE all stacking in
~110px on narrow). The EKG is decorative proof-of-life — dropped on phones
so the heartbeat reads as ONE clean status line, and the ticker + live-dot
become the single animated element in the header. */
@media (max-width: 767px) {
.hb-ekg { display: none !important; }
.heartbeat-bar {
height: 28px !important;
gap: 10px !important;
padding: 0 12px !important;
}
/* The status line is one line by contract — never let it wrap into the
"stacked" state the audit flagged. */
.heartbeat-bar > span { white-space: nowrap; }
}
/* Tap targets — the PRIMARY button component meets the 44px touch minimum.
Scoped to .vbtn only (not dense in-row data chips — density is a feature;
per-surface tap-target review rides with each M1b surface). */
@media (max-width: 767px) {
.vbtn {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* Mono hero grammar (§3 "one bold hero figure among muted context"). Card
hero numbers opt in via .m-hero; they scale up on phones so the ONE figure
that matters dominates the stacked card. Context stays demoted. */
@media (max-width: 640px) {
.m-hero { font-size: clamp(28px, 12vw, 56px) !important; line-height: 1; }
}
/* ============================================================
Session 60 (night2/E) — §7 reveal choreography.
Stamp slam + 90ms staggered context panels. Entrance keyframes floor at