fix(design-v2): match approved mockups — solid navy, side rail, editorial type
CI / test (push) Has been cancelled

v2 was 'harbor backdrop everywhere + glass cards', but the approved
mockups at _design/atmospheric-redesign/ use solid navy with subtle
gradient, harbor selectively (theme swatches, frame heroes), left
side rail at desktop, and editorial Marcellus/Cormorant typography.

This rewrite:
- Drops the full-page harbor backdrop; body is now solid navy with
  a single radial gradient highlight
- Loads Marcellus, Cormorant Garamond, DM Mono via Google Fonts
- Editorial type recipes: h1/h2/h3 + frame card name + settings title
  use Marcellus. settings__hint becomes italic Cormorant. Section
  labels become DM Mono caps with 0.28em letterspacing
- TopNav restyled at desktop (≥960px) into a left-fixed side rail:
  240px wide, vertical stack of nav items, active item shows inset
  yellow rule + surface bg. Body gets 240px padding-left to shift
  content right.
- Theme swatches reuse the harbor.jpg inside their preview area,
  tinted to each dusk's color — matches the mockup exactly
- Per-dusk surface colors made opaque (was rgba 0.55) so cards are
  fully readable

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-15 14:55:19 -04:00
parent 4f78ed8897
commit 645291c724
13 changed files with 204 additions and 167 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -16,9 +16,9 @@
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="WeVisto" />
<script type="module" crossorigin src="/build/assets/index-_0NYKlwk.js"></script>
<script type="module" crossorigin src="/build/assets/index-Dd9roAkB.js"></script>
<link rel="modulepreload" crossorigin href="/build/assets/_plugin-vue_export-helper-BNDVmFr7.js">
<link rel="stylesheet" crossorigin href="/build/assets/index-COmCgx7p.css">
<link rel="stylesheet" crossorigin href="/build/assets/index-v9hz6BhD.css">
</head>
<body>
<div id="app"></div>