football2801
645291c724
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>
WeVisto · atmospheric redesign
Iterative design proposal landed on 2026-05-15. Captures the brand-as-surface direction: the Camogli harbor photograph is the actual background of every authenticated view, frosted-glass cards float on it, and the six user themes get rebuilt as atmospheric dusks (tinted filters over the same photo) instead of cream variants.
What's here
atmospheric-redesign/
├── index.html — entry point, links to every mockup
├── login-cinematic.html — pre-auth canonical example
├── spa/
│ ├── home.html — HomeView with new chrome + frame card + up-next strip
│ ├── library.html — LibraryView empty state (mark in halo)
│ ├── settings.html — SettingsView with the dusk picker
│ ├── _tokens.css — type + dusks (replaces cream theme system)
│ └── _chrome.css — frosted-glass app bar / bottom nav / signature
├── favicons/ — A/B/C/D icon directions (still iterating)
└── assets/
├── harbor.jpg — the brand photograph (extracted from logo.svg)
├── wordmark.svg — full WeVisto wordmark + harbor
├── mark-photo.png — split-W on harbor (512px)
├── mark-photo-64.png — same, 64px for small uses
└── mark-navy.svg — split-W on solid navy (lightweight vector mark)
To view
cd webApp/_design/atmospheric-redesign
python3 -m http.server 8766 --bind 0.0.0.0
# → open http://<host>:8766/
Every SPA mockup defaults to Ocean Dusk and has a floating dusk-switcher in the bottom-right — click any chip to flip the room to that dusk.
The principle
Brand layer (fixed): the harbor photograph, the wordmark, the yellow V, the split-W mark. Permanent fixed backdrop. Never changes with theme.
Theme layer (yours): six dusks — Ocean, Amber, Sage, Rose, Mauve, Honey.
Each is an rgba multiplied over the photo plus a theme-coloured accent for
primary CTAs. Same room, different time of day.
Open work
- Favicon mark — A/B/C/D directions saved; Matt's feedback was that the small mark needs more WeVisto presence "in the image itself", not just initials. Next iteration to integrate the wordmark into the mark.
- Logo usage across app — currently the full wordmark logo only appears in emails. To propagate to login splash / library hero / welcome moments / upload success states.
- Implementation — these are HTML/CSS mockups, not Vue components. The
real port needs:
- Migrate
frontend/src/styles/global.scssfrom six cream themes to six dusks (replace--color-*cream tokens with the--bg-tint / --glass / --accenttokens shown inspa/_tokens.css). - Apply the harbor backdrop via
body::beforein global.scss. - Add the top app bar component (mark + wordmark + sub + actions).
- Rebuild HomeView / LibraryView / SettingsView to use
.glasssurfaces. - Update the Twig login / register / setup templates to share the same backdrop + frosted-glass card pattern.
- Migrate