openvibers/openvibe.trade Commits

Trade: the front page's sections share one left edge and one heading style (#57)

OP OpenVibers committed 29 days ago · 90405f3408 · 1 file, +5 −0

The front page's sections now share one left edge and one heading style. A site-wide alignment scan of every home page at 1440 and 390 px found two problems here:

- **24 px offset:** the showcase hero and "What is here" sat 24 px to the right of "Instruments" and "Recent documents" (x 240 against 216 at 1440, 40 against 16 at 390).
- **Mismatched headings:** those two headings were smaller (20.8 px against 30) and in a different face.

The fix:
- **Alignment:** the shared showcase pads its sections 24 px on each side for full-width pages. Inside `.page`, which has its own padding, that padding is dropped (`.page > .sc-hero, .sc-sec, .sc-cta`).
- **Headings:** the front page's "Instruments" and "Recent documents" use the showcase heading's face and size (`clamp(22px, 2.6vw, 30px)`), with 44 px above each.

The fix was checked by injecting the CSS into production and measuring: every h1/h2 starts at x=216 at 1440 px and at x=16 at 390 px. CSS only; the asset-cache test passes.

Changes

ddiff --git a/public/css/trade.css b/public/css/trade.css
iindex 70069df..cd23b8a 100644
---- a/public/css/trade.css
++++ b/public/css/trade.css
@@@ -10,6 +10,11 @@ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visib
  .disclaimer { max-width: 1040px; margin: 8px auto 0; padding: 8px 16px; border: 1px solid var(--warning, #f59e0b); border-radius: 8px; font-size: .95rem; background: var(--bg-card, #131c2e); }
  .disclaimer-foot { margin: 24px auto; }
  .page { max-width: 1040px; margin: 0 auto; padding: 16px 16px 48px; min-height: 60vh; }
++/* The showcase (openvibe-shared showcase.css) pads its sections 24px each side for full-width pages; inside .page,
++   which has its own padding, that put the hero and "How it works" 24px right of everything after them. */
++.page > .sc-hero, .page > .sc-sec, .page > .sc-cta { padding-left: 0; padding-right: 0; }
++/* The front page's own sections read as the showcase's do: same heading face and size as "What is here". */
++.sc-sec ~ h2, .sc-sec ~ section > h2 { font-family: var(--ov-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif); font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; line-height: 1.2; margin-top: 44px; }
  h1 { font-size: 1.9rem; line-height: 1.2; margin: 1rem 0 .5rem; }
  h1 .name { font-weight: 400; color: var(--text-secondary, #96a7c2); font-size: 1.3rem; }
  h2 { font-size: 1.3rem; margin: 1.8rem 0 .5rem; }