design: atmospheric redesign mockups (login + SPA, six dusks)

Self-contained HTML/CSS mockups proposing the brand-as-surface direction:
- Camogli harbor photo as the permanent backdrop on every authenticated view
- Six user themes rebuilt as atmospheric "dusks" (tinted overlays + accents)
  instead of cream variants
- Frosted-glass cards on top of the photo
- Same type system (Marcellus / Cormorant Garamond italic / Nunito body)
  shared between login and in-app

Includes:
- login-cinematic.html: canonical pre-auth example with Ken-Burns + grain
- spa/home.html, library.html, settings.html: in-app views with the new chrome
- spa/_tokens.css + _chrome.css: dusk system and frosted-glass primitives
- favicons/A-D: in-progress icon directions
- README.md with serving instructions and the porting checklist

Saved as a durable design artifact so the iteration survives /tmp wipes
and can be referred back to when porting to Vue.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

_design/atmospheric-redesign/README.md

@@ -0,0 +1,67 @@
+# 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
+
+```bash
+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.scss` from six cream themes to six
+    dusks (replace `--color-*` cream tokens with the `--bg-tint / --glass /
+    --accent` tokens shown in `spa/_tokens.css`).
+  - Apply the harbor backdrop via `body::before` in global.scss.
+  - Add the top app bar component (mark + wordmark + sub + actions).
+  - Rebuild HomeView / LibraryView / SettingsView to use `.glass` surfaces.
+  - Update the Twig login / register / setup templates to share the same
+    backdrop + frosted-glass card pattern.