@cyber-dash-tech/revela 0.18.15 → 0.18.16

package/designs/monet/DESIGN.md

@@ -35,6 +35,27 @@ Inspired by Claude Monet's *Le Bassin aux Nymphéas* — mist, water, and soft l
     --shadow-soft: rgba(0, 55, 102, 0.18);
     --font-display: 'EB Garamond', 'Georgia', ui-serif, serif;
     --font-body: 'EB Garamond', 'Georgia', ui-serif, serif;
+    --grid-page-inset: 40px;
+    --grid-content-width: 1480px;
+    --grid-text-col: 480px;
+    --grid-image-col: 880px;
+    --grid-gutter: 40px;
+    --grid-safe-x: 80px;
+    --grid-safe-y: 72px;
+    --space-1: 8px;
+    --space-2: 16px;
+    --space-3: 24px;
+    --space-4: 32px;
+    --space-5: 48px;
+    --space-6: 72px;
+    --font-size-meta: 13px;
+    --font-size-body: 17px;
+    --font-size-body-strong: 20px;
+    --font-size-h3: 24px;
+    --font-size-h2: 36px;
+    --font-size-hero: 116px;
+    --surface-radius: 0px;
+    --surface-shadow: 0 24px 80px var(--shadow-soft);
 }
 ```
 
@@ -85,6 +106,14 @@ All sizes are fixed `px` for the 1920x1080 canvas. JS `transform: scale()` handl
 - Headings align to the text column, not to the full canvas.
 - Let images carry visual weight; text should remain narrow, calm, and readable.
 
+Design contract:
+- Grid: use `--grid-page-inset`, `--grid-content-width`, and editorial split ratios as the source of layout alignment; do not scatter content with unrelated absolute offsets.
+- Safe area: image captions, source notes, page numbers, and brand marks stay inside `--grid-safe-x` / `--grid-safe-y` unless the `hero` component owns the full canvas.
+- Spacing: use the `--space-*` rhythm for editorial gaps, plaques, captions, and component padding. Dense pages may tighten within the scale, but should not invent one-off spacing systems.
+- Type scale: use fixed 1920x1080 type tokens and the Monet serif stack. Do not introduce viewport-relative text sizing or sans-serif fallbacks for deck body copy.
+- Surfaces: panels remain paper-like and flat. Use tonal blocks, whitespace, and `--surface-shadow`; avoid default container outlines, glass, neon, blob, or dashboard-card treatments.
+- Chart tokens: charts use Monet accents, quiet gridlines, transparent backgrounds, explicit axis text colors, and stable `echart-panel` containers.
+
 ### Image Treatment
 
 - Use impressionist-inspired photography: water surfaces, gardens, soft natural light, reflections, and botanical subjects.
@@ -884,7 +913,7 @@ Card/group primitive for one idea, case, evidence item, metric, objection, risk,
 ```
 
 ```css
-.box { height: 100%; min-height: 0; padding: 28px; border: 1px solid var(--line); background: rgba(255,255,255,0.46); display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
+.box { height: 100%; min-height: 0; padding: 28px; background: rgba(255,255,255,0.46); display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
 .box--quiet { background: transparent; }
 .box--mist { background: rgba(240,244,247,0.72); }
 .box--dark { background: #0d1a24; --text-primary:#f0f4f7; --text-secondary:rgba(240,244,247,0.72); --text-muted:rgba(240,244,247,0.55); --line:rgba(240,244,247,0.16); }
@@ -2630,6 +2659,7 @@ A horizontal milestone timeline with a central axis line. Nodes sit on the axis;
 
 Rules:
 - Position nodes with `left: X%` inline style. For N nodes, space them at `(100/(N+1)) * k %` or manually distribute to reflect time proportions.
+- Treat `left: X%` as the milestone centreline. The label, tip dot, stem, and axis dot must remain centered on that same x-position; do not left-align the label block away from the marker.
 - Each node requires `--tjh-item-color` set inline (use any summit accent colour).
 - **`--up` DOM order**: label → tip-dot → stem → axis-dot (label at top, axis-dot at bottom touching axis).
 - **`--down` DOM order**: axis-dot → stem → tip-dot → label (axis-dot at top touching axis, label at bottom).
@@ -2718,19 +2748,20 @@ Can be placed inside any layout slot that provides a defined height (`narrative`
   position: absolute;
   display: flex;
   align-items: center;
+  min-width: 260px;
   height: 80px;           /* vertical size of the clickable/hover zone */
   transform: translateY(-50%); /* center the row on the top: Y% point */
 }
 
 /* LEFT: row-reverse flips DOM order so axis-dot appears on the right (on the axis) */
 .tjv-item--left {
-  right: 50%;
+  right: calc(50% - var(--tjv-node) / 2);
   flex-direction: row-reverse;
 }
 
 /* RIGHT: standard row; axis-dot appears on the left (on the axis) */
 .tjv-item--right {
-  left: 50%;
+  left: calc(50% - var(--tjv-node) / 2);
   flex-direction: row;
 }
 
@@ -2746,13 +2777,9 @@ Can be placed inside any layout slot that provides a defined height (`narrative`
 }
 
 /* LEFT: axis-dot is visually rightmost (row-reverse); push right to straddle axis */
-.tjv-item--left .tjv-axis-dot {
-  margin-right: calc(-1 * var(--tjv-node) / 2);
-}
-
-/* RIGHT: axis-dot is visually leftmost; push left to straddle axis */
+.tjv-item--left .tjv-axis-dot,
 .tjv-item--right .tjv-axis-dot {
-  margin-left: calc(-1 * var(--tjv-node) / 2);
+  margin: 0;
 }
 
 /* Tip dot — small square at the stem end near the label */
@@ -2831,6 +2858,9 @@ Can be placed inside any layout slot that provides a defined height (`narrative`
 Rules:
 - **DOM order is identical for left and right nodes**: `axis-dot → stem → tip-dot → label`. The visual direction is controlled by CSS (`row-reverse` for left, `row` for right) — never by changing the DOM order.
 - Position each node with `top: Y%` inline style. For N nodes, distribute evenly: `(100 / (N + 1)) * k %` or manually to reflect actual time proportions.
+- Treat `top: Y%` as the milestone row centre. The axis dot, stem, tip dot, and label row must stay vertically centered on that same y-position.
+- Anchor left/right rows at `calc(50% - var(--tjv-node) / 2)` rather than using negative margins on `.tjv-axis-dot`; this keeps the marker centered on the axis without creating export/QA overflow.
+- Give `.tjv-item` an explicit `min-width` large enough to include label + tip + stem + axis-dot, rather than relying on intrinsic content width.
 - Every node must set `--tjv-item-color` inline (use any Monet accent: `--accent-earth`, `--accent-gold`, `--accent-olive`, `--accent-sage`).
 - Alternate `--left` and `--right` across nodes for visual rhythm. Do not place consecutive same-side nodes unless intentional.
 - The parent container must have a defined height. Use `height: 100%` when inside a layout slot, or set an explicit `px` height when used standalone.