diff --git a/_design/atmospheric-redesign/README.md b/_design/atmospheric-redesign/README.md new file mode 100644 index 0000000..0bdf263 --- /dev/null +++ b/_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://: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. diff --git a/_design/atmospheric-redesign/assets/harbor.jpg b/_design/atmospheric-redesign/assets/harbor.jpg new file mode 100644 index 0000000..a31a418 Binary files /dev/null and b/_design/atmospheric-redesign/assets/harbor.jpg differ diff --git a/_design/atmospheric-redesign/assets/mark-navy.svg b/_design/atmospheric-redesign/assets/mark-navy.svg new file mode 100644 index 0000000..6627ecc --- /dev/null +++ b/_design/atmospheric-redesign/assets/mark-navy.svg @@ -0,0 +1,12 @@ + + + + + + + + W + W + + diff --git a/_design/atmospheric-redesign/assets/mark-photo-64.png b/_design/atmospheric-redesign/assets/mark-photo-64.png new file mode 100644 index 0000000..486c0d9 Binary files /dev/null and b/_design/atmospheric-redesign/assets/mark-photo-64.png differ diff --git a/_design/atmospheric-redesign/assets/mark-photo.png b/_design/atmospheric-redesign/assets/mark-photo.png new file mode 100644 index 0000000..103b9c4 Binary files /dev/null and b/_design/atmospheric-redesign/assets/mark-photo.png differ diff --git a/_design/atmospheric-redesign/assets/wordmark.svg b/_design/atmospheric-redesign/assets/wordmark.svg new file mode 100644 index 0000000..a666134 --- /dev/null +++ b/_design/atmospheric-redesign/assets/wordmark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + WeVisto + + + diff --git a/_design/atmospheric-redesign/favicons/A-roof-16.png b/_design/atmospheric-redesign/favicons/A-roof-16.png new file mode 100644 index 0000000..fe7383c Binary files /dev/null and b/_design/atmospheric-redesign/favicons/A-roof-16.png differ diff --git a/_design/atmospheric-redesign/favicons/A-roof-180.png b/_design/atmospheric-redesign/favicons/A-roof-180.png new file mode 100644 index 0000000..e74fc12 Binary files /dev/null and b/_design/atmospheric-redesign/favicons/A-roof-180.png differ diff --git a/_design/atmospheric-redesign/favicons/A-roof-32.png b/_design/atmospheric-redesign/favicons/A-roof-32.png new file mode 100644 index 0000000..38724b2 Binary files /dev/null and b/_design/atmospheric-redesign/favicons/A-roof-32.png differ diff --git a/_design/atmospheric-redesign/favicons/A-roof-64.png b/_design/atmospheric-redesign/favicons/A-roof-64.png new file mode 100644 index 0000000..9c806ff Binary files /dev/null and b/_design/atmospheric-redesign/favicons/A-roof-64.png differ diff --git a/_design/atmospheric-redesign/favicons/A-roof.svg b/_design/atmospheric-redesign/favicons/A-roof.svg new file mode 100644 index 0000000..103635b --- /dev/null +++ b/_design/atmospheric-redesign/favicons/A-roof.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/_design/atmospheric-redesign/favicons/B-frame-horizon-16.png b/_design/atmospheric-redesign/favicons/B-frame-horizon-16.png new file mode 100644 index 0000000..7ffe783 Binary files /dev/null and b/_design/atmospheric-redesign/favicons/B-frame-horizon-16.png differ diff --git a/_design/atmospheric-redesign/favicons/B-frame-horizon-180.png b/_design/atmospheric-redesign/favicons/B-frame-horizon-180.png new file mode 100644 index 0000000..0a5b42a Binary files /dev/null and b/_design/atmospheric-redesign/favicons/B-frame-horizon-180.png differ diff --git a/_design/atmospheric-redesign/favicons/B-frame-horizon-32.png b/_design/atmospheric-redesign/favicons/B-frame-horizon-32.png new file mode 100644 index 0000000..c7ef63b Binary files /dev/null and b/_design/atmospheric-redesign/favicons/B-frame-horizon-32.png differ diff --git a/_design/atmospheric-redesign/favicons/B-frame-horizon-64.png b/_design/atmospheric-redesign/favicons/B-frame-horizon-64.png new file mode 100644 index 0000000..b5b082e Binary files /dev/null and b/_design/atmospheric-redesign/favicons/B-frame-horizon-64.png differ diff --git a/_design/atmospheric-redesign/favicons/B-frame-horizon.svg b/_design/atmospheric-redesign/favicons/B-frame-horizon.svg new file mode 100644 index 0000000..7df2ac6 --- /dev/null +++ b/_design/atmospheric-redesign/favicons/B-frame-horizon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/_design/atmospheric-redesign/favicons/C-skyline-16.png b/_design/atmospheric-redesign/favicons/C-skyline-16.png new file mode 100644 index 0000000..679a8ea Binary files /dev/null and b/_design/atmospheric-redesign/favicons/C-skyline-16.png differ diff --git a/_design/atmospheric-redesign/favicons/C-skyline-180.png b/_design/atmospheric-redesign/favicons/C-skyline-180.png new file mode 100644 index 0000000..7857de0 Binary files /dev/null and b/_design/atmospheric-redesign/favicons/C-skyline-180.png differ diff --git a/_design/atmospheric-redesign/favicons/C-skyline-32.png b/_design/atmospheric-redesign/favicons/C-skyline-32.png new file mode 100644 index 0000000..6bfce5a Binary files /dev/null and b/_design/atmospheric-redesign/favicons/C-skyline-32.png differ diff --git a/_design/atmospheric-redesign/favicons/C-skyline-64.png b/_design/atmospheric-redesign/favicons/C-skyline-64.png new file mode 100644 index 0000000..f528f55 Binary files /dev/null and b/_design/atmospheric-redesign/favicons/C-skyline-64.png differ diff --git a/_design/atmospheric-redesign/favicons/C-skyline.svg b/_design/atmospheric-redesign/favicons/C-skyline.svg new file mode 100644 index 0000000..eff3e78 --- /dev/null +++ b/_design/atmospheric-redesign/favicons/C-skyline.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_design/atmospheric-redesign/favicons/D-seal-16.png b/_design/atmospheric-redesign/favicons/D-seal-16.png new file mode 100644 index 0000000..a3fd19e Binary files /dev/null and b/_design/atmospheric-redesign/favicons/D-seal-16.png differ diff --git a/_design/atmospheric-redesign/favicons/D-seal-180.png b/_design/atmospheric-redesign/favicons/D-seal-180.png new file mode 100644 index 0000000..327c66c Binary files /dev/null and b/_design/atmospheric-redesign/favicons/D-seal-180.png differ diff --git a/_design/atmospheric-redesign/favicons/D-seal-32.png b/_design/atmospheric-redesign/favicons/D-seal-32.png new file mode 100644 index 0000000..a224f0f Binary files /dev/null and b/_design/atmospheric-redesign/favicons/D-seal-32.png differ diff --git a/_design/atmospheric-redesign/favicons/D-seal-64.png b/_design/atmospheric-redesign/favicons/D-seal-64.png new file mode 100644 index 0000000..32e634b Binary files /dev/null and b/_design/atmospheric-redesign/favicons/D-seal-64.png differ diff --git a/_design/atmospheric-redesign/favicons/D-seal.svg b/_design/atmospheric-redesign/favicons/D-seal.svg new file mode 100644 index 0000000..920be37 --- /dev/null +++ b/_design/atmospheric-redesign/favicons/D-seal.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_design/atmospheric-redesign/index.html b/_design/atmospheric-redesign/index.html new file mode 100644 index 0000000..3ce0b3b --- /dev/null +++ b/_design/atmospheric-redesign/index.html @@ -0,0 +1,262 @@ + + + + + +WeVisto · atmospheric redesign + + + + + + + +
+
Design proposal · 2026-05-15 · settled
+
WeVisto
+
Atmospheric system
login → app, one room
+
+
— the brand is the surface, the theme is the tint, the photograph runs through.
+ +

○The principle, after several mis-tries

+

The earlier proposals kept the app on cream while only the login was atmospheric. That made login feel like a different product. The right answer was to rebuild the theme system itself.

+ +
+
+

● Brand is the surface

+

The Camogli harbor photograph is the permanent fixed backdrop on every authenticated view — same as the login. Cards become frosted glass floating on it. Light text on dark, Marcellus / Cormorant italic / Nunito body, the same recipe as the login. The wordmark and split-W mark live in the persistent top app bar.

+
+
+

● Theme is the dusk

+

The six user themes get reborn as atmospheric dusks: a tinted overlay multiplied over the same harbor photo, plus a theme-coloured accent for primary CTAs. Same room, different time of day. The yellow V is the one brand colour that survives across every dusk — wordmark, hairlines, plate numbers.

+
+
+ +

I.The dusks (replaces the six cream themes)

+

Each chip below is the harbor photo with the dusk's tint multiplied over it — the actual recipe used in the body backdrop. Same photo, six moods.

+
+
Ocean
— the harbor
+
Amber
— the workshop
+
Sage
— the garden
+
Rose
— the parlor
+
Mauve
— the study
+
Honey
— the alcove
+
+ +

II.The front door — login

+

The canonical example of the visual language. Same harbor backdrop, deep navy filter, frosted-glass card, staggered wordmark reveal. Now also: the home page lives in the same room.

+
+
+
+ + Open ⟶ +
+
+
II.
+

Login · cinematic arrival

+
templates/security/login.html.twig · register.html.twig
+

Animated wordmark reveal, frosted-glass card, yellow CTA. Respects prefers-reduced-motion.

+
+
+
+ +

III.The room — in-app views

+

All three default to Ocean Dusk. Use the floating chip cluster in the bottom-right of any mockup to switch dusks live — the photo re-tints, glass cards re-tint, accent button changes, the wordmark and yellow V stay constant.

+ +
+
+ +
+
+ + Open ⟶ +
+
+
III·a
+

Home

+
/ · HomeView.vue
+

Top app bar; editorial hero ("Good morning, Alice."); frame card as glass with the user's frame photo inside; up-next strip of queued thumbnails.

+
+
+ +
+
+ + Open ⟶ +
+
+
III·b
+

Library · empty state

+
/library · LibraryView.vue
+

A 112px mark in a yellow halo, "A library, waiting." in display serif, three-step glass card explaining how it works, signature.

+
+
+ +
+
+ + Open ⟶ +
+
+
III·c
+

Settings

+
/settings · SettingsView.vue
+

Glass list rows. Dusk picker grid showing each dusk as a tinted harbor preview — click to switch the page live.

+
+
+ +
+
+ +

IV.The small mark — favicon directions (work in progress)

+

Four icon directions explored so far. Matt's still iterating here — wants WeVisto to be more present inside the image itself, not just initials beside the brand.

+ +
In progress — next iteration to integrate the wordmark into the mark and propagate the wordmark logo throughout more app surfaces.
+ +
+
+
A.Warmth / home
+

Roof V

+
House silhouette where the rooftop is the V. Yellow door at centre.
+
+
16
+
32
+
64
+
180
+
+
+
+
B.Literal / poetic
+

Frame + horizon

+
A tiny photo frame with a sun over the sea. Most legible at 16.
+
+
16
+
32
+
64
+
180
+
+
+
+
C.Origin-specific
+

Camogli skyline

+
Camogli's coloured row-houses as silhouette. Risk: generic city at 16.
+
+
16
+
32
+
64
+
180
+
+
+
+
D.Gift / stationery
+

Wax seal V

+
Pressed-wax seal with V. Strong at 64+, softens at 16.
+
+
16
+
32
+
64
+
180
+
+
+
+ + + + + diff --git a/_design/atmospheric-redesign/login-cinematic.html b/_design/atmospheric-redesign/login-cinematic.html new file mode 100644 index 0000000..0f3dad8 --- /dev/null +++ b/_design/atmospheric-redesign/login-cinematic.html @@ -0,0 +1,349 @@ + + + + + +Sign in — WeVisto + + + + + + + +
+
+
+ +
WeVisto · Plate I
+
Sign in
+ +
+
+ W + e + V + i + s + t + o +
+
+
Photographs, gifted. Quietly. Forever.
+ +
+

Welcome back.

+

— sign in to your account

+ +
+ + +
+ +
+ + +
+ + + +

Don't have an account? Create one

+
+
+ +
Edizione I · MMXXVI · A frame, by hand
+ + + diff --git a/_design/atmospheric-redesign/spa/_chrome.css b/_design/atmospheric-redesign/spa/_chrome.css new file mode 100644 index 0000000..d434878 --- /dev/null +++ b/_design/atmospheric-redesign/spa/_chrome.css @@ -0,0 +1,183 @@ +/* Frosted-glass chrome — same vocabulary as the login. + Every surface that holds content is a glass card over the harbor backdrop. */ + +/* ─── Top app bar — translucent dark band ────────────────────────────── */ +.app-bar { + position: sticky; + top: 0; + z-index: 40; + background: var(--glass-2); + backdrop-filter: saturate(180%) blur(18px); + -webkit-backdrop-filter: saturate(180%) blur(18px); + border-bottom: 1px solid var(--glass-bord); + padding: 12px 18px; + padding-top: calc(12px + env(safe-area-inset-top)); + display: flex; + align-items: center; + gap: 12px; +} +.app-bar__mark { + width: 34px; + height: 34px; + border-radius: 9px; + overflow: hidden; + box-shadow: 0 2px 6px rgba(0,0,0,0.4); + flex-shrink: 0; +} +.app-bar__mark img { width: 100%; height: 100%; display: block; } +.app-bar__title-group { display: flex; flex-direction: column; } +.app-bar__wordmark { + font: 400 var(--text-lg)/1 var(--font-display); + letter-spacing: 0.005em; + color: var(--text); +} +.app-bar__wordmark .v { color: var(--brand-yellow); } +.app-bar__sub { + font: italic 400 13px/1 var(--font-accent); + color: var(--text-muted); + letter-spacing: 0.02em; + margin-top: 4px; +} +.app-bar__spacer { flex: 1; } +.app-bar__icon { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-muted); + background: transparent; + border: 0; + border-radius: var(--radius-full); + cursor: pointer; + transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); +} +.app-bar__icon:hover { background: var(--glass); color: var(--text); } +.app-bar__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } + +/* ─── Glass surface mixin ──────────────────────────────────────────────── */ +.glass { + background: var(--glass); + backdrop-filter: saturate(160%) blur(20px); + -webkit-backdrop-filter: saturate(160%) blur(20px); + border: 1px solid var(--glass-bord); + box-shadow: + 0 1px 0 rgba(255,255,255,0.06) inset, + 0 20px 40px -16px rgba(0,0,0,0.5); +} + +/* ─── Bottom nav — translucent dark band ─────────────────────────────── */ +.bottom-nav { + position: fixed; + bottom: 0; left: 0; right: 0; + background: var(--glass-2); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: saturate(180%) blur(20px); + border-top: 1px solid var(--glass-bord); + display: flex; + z-index: 50; + padding-bottom: env(safe-area-inset-bottom); +} +.bottom-nav__tab { + flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; + gap: 2px; height: 64px; color: var(--text-muted); + text-decoration: none; min-height: 44px; + transition: color var(--duration-fast); +} +.bottom-nav__tab.active { + color: var(--brand-yellow); +} +.bottom-nav__tab.active .label { color: var(--text); } +.bottom-nav__tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; } +.bottom-nav__tab .label { + font-family: var(--font-display); + font-size: var(--text-xs); + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.main-scroll { + padding-bottom: calc(64px + env(safe-area-inset-bottom) + 32px); + min-height: 100dvh; +} + +/* ─── Brand signature ─────────────────────────────────────────────────── */ +.signature { + margin-top: 32px; + padding: 32px 0 16px; + border-top: 1px solid var(--glass-bord); + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} +.signature__mark { + width: 44px; + height: 44px; + border-radius: 10px; + overflow: hidden; + opacity: 0.9; +} +.signature__mark img { width: 100%; height: 100%; display: block; } +.signature__text { + font: 400 14px/1.2 var(--font-display); + letter-spacing: 0.32em; + text-transform: uppercase; + color: var(--text-muted); + display: flex; + align-items: center; + gap: 10px; +} +.signature__text .v-mark { color: var(--brand-yellow); } +.signature__version { + font: 400 italic 14px/1.3 var(--font-accent); + letter-spacing: 0.02em; + color: var(--text-muted); + opacity: 0.7; +} + +/* ─── Theme switcher (mockup only) ─────────────────────────────────────── */ +.theme-switcher { + position: fixed; + bottom: 84px; + right: 16px; + z-index: 60; + background: var(--glass-2); + backdrop-filter: saturate(180%) blur(20px); + border: 1px solid var(--glass-bord); + border-radius: var(--radius-md); + box-shadow: 0 12px 24px -8px rgba(0,0,0,0.5); + padding: 10px; + display: flex; + flex-direction: column; + gap: 8px; + max-width: 220px; +} +.theme-switcher__label { + font: var(--type-label); + letter-spacing: 0.24em; + text-transform: uppercase; + color: var(--text-muted); +} +.theme-switcher__chips { + display: flex; + flex-wrap: wrap; + gap: 4px; +} +.theme-switcher__chip { + width: 26px; height: 26px; + border: 2px solid var(--glass-bord); + border-radius: var(--radius-full); + cursor: pointer; + position: relative; + transition: transform var(--duration-fast); +} +.theme-switcher__chip:hover { transform: scale(1.1); } +.theme-switcher__chip.active { box-shadow: 0 0 0 2px var(--brand-yellow); } +/* each chip shows that theme's accent over its bg-base */ +.theme-switcher__chip[data-theme="ocean-dusk"] { background: linear-gradient(135deg, #06121f 50%, #4e9fc8 50%); } +.theme-switcher__chip[data-theme="amber-dusk"] { background: linear-gradient(135deg, #1a0d05 50%, #e89048 50%); } +.theme-switcher__chip[data-theme="sage-dusk"] { background: linear-gradient(135deg, #081208 50%, #88c068 50%); } +.theme-switcher__chip[data-theme="rose-dusk"] { background: linear-gradient(135deg, #1a060f 50%, #d878a0 50%); } +.theme-switcher__chip[data-theme="mauve-dusk"] { background: linear-gradient(135deg, #100618 50%, #b890d8 50%); } +.theme-switcher__chip[data-theme="honey-dusk"] { background: linear-gradient(135deg, #18120a 50%, #e8c050 50%); } diff --git a/_design/atmospheric-redesign/spa/_switcher.html b/_design/atmospheric-redesign/spa/_switcher.html new file mode 100644 index 0000000..d5f9e18 --- /dev/null +++ b/_design/atmospheric-redesign/spa/_switcher.html @@ -0,0 +1,19 @@ +
+ User-pref theme +
+ + + + + + +
+
+ diff --git a/_design/atmospheric-redesign/spa/_tokens.css b/_design/atmospheric-redesign/spa/_tokens.css new file mode 100644 index 0000000..49fe521 --- /dev/null +++ b/_design/atmospheric-redesign/spa/_tokens.css @@ -0,0 +1,164 @@ +/* Atmospheric design tokens — themes as dusks layered over the harbor photo. + The whole app shares the login's surface vocabulary. */ + +:root { + /* Type — same recipe as login */ + --font-family: 'Nunito', system-ui, sans-serif; + --font-display: 'Marcellus', Georgia, serif; + --font-accent: 'Cormorant Garamond', Georgia, serif; + --font-mono: 'DM Mono', ui-monospace, monospace; + + --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; + --text-lg: 20px; --text-xl: 24px; --text-2xl: 28px; --text-3xl: 36px; + --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; + --space-5: 20px; --space-6: 24px; --space-8: 32px; + --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; + --duration-fast: 150ms; --duration-base: 250ms; + --ease-out: cubic-bezier(0, 0, 0.2, 1); + + /* Brand layer — fixed regardless of theme. */ + --brand-yellow: #f0d000; + --brand-yellow-soft: #c4a700; + + /* Editorial recipes */ + --type-display-xl: 400 var(--text-3xl)/1.05 var(--font-display); + --type-display-lg: 400 var(--text-2xl)/1.1 var(--font-display); + --type-display-md: 400 var(--text-xl)/1.15 var(--font-display); + --type-accent-md: 400 italic var(--text-md)/1.4 var(--font-accent); + --type-label: 700 var(--text-xs)/1 var(--font-mono); +} + +/* ─── DUSKS ────────────────────────────────────────────────────────────── + Each dusk is: + --bg-base : the deep base color behind everything + --bg-tint : an rgba multiplied over the harbor photo (the "filter") + --glass : rgba background of cards (frosted, sits on photo) + --glass-2 : a more opaque variant for nav strips + --glass-bord : hairline border on glass surfaces + --accent : theme accent (was --color-primary) — CTAs that aren't brand + --accent-fg : text on accent + --text : main text on glass (always light) + --text-muted : muted text on glass + + The yellow V brand constant survives across all dusks. +*/ + +/* OCEAN DUSK — default, closest to login */ +[data-theme="ocean-dusk"], :root { + --bg-base: #06121f; + --bg-tint: rgba(8, 22, 38, 0.45); + --glass: rgba(10, 28, 48, 0.55); + --glass-2: rgba(8, 22, 38, 0.72); + --glass-bord: rgba(180, 210, 235, 0.18); + --accent: #4e9fc8; + --accent-fg: #06121f; + --text: #f4eed8; + --text-muted: #b8c8d8; +} + +/* AMBER DUSK — successor to warm-craft */ +[data-theme="amber-dusk"] { + --bg-base: #1a0d05; + --bg-tint: rgba(60, 25, 8, 0.45); + --glass: rgba(50, 22, 8, 0.55); + --glass-2: rgba(35, 14, 5, 0.72); + --glass-bord: rgba(230, 180, 130, 0.2); + --accent: #e89048; + --accent-fg: #1a0d05; + --text: #faecd0; + --text-muted: #d8b890; +} + +/* SAGE DUSK — successor to sage-cream */ +[data-theme="sage-dusk"] { + --bg-base: #081208; + --bg-tint: rgba(20, 40, 22, 0.45); + --glass: rgba(18, 38, 22, 0.55); + --glass-2: rgba(12, 26, 14, 0.72); + --glass-bord: rgba(180, 220, 180, 0.18); + --accent: #88c068; + --accent-fg: #081208; + --text: #ecf3e0; + --text-muted: #a8c0a0; +} + +/* ROSE DUSK — warmer, classier replacement for playful-pop */ +[data-theme="rose-dusk"] { + --bg-base: #1a060f; + --bg-tint: rgba(56, 16, 38, 0.45); + --glass: rgba(48, 14, 36, 0.55); + --glass-2: rgba(32, 8, 22, 0.72); + --glass-bord: rgba(230, 180, 200, 0.2); + --accent: #d878a0; + --accent-fg: #1a060f; + --text: #f8e8ec; + --text-muted: #c898ac; +} + +/* MAUVE DUSK — replaces dusty-mauve */ +[data-theme="mauve-dusk"] { + --bg-base: #100618; + --bg-tint: rgba(40, 18, 56, 0.45); + --glass: rgba(36, 14, 50, 0.55); + --glass-2: rgba(24, 10, 34, 0.72); + --glass-bord: rgba(210, 190, 230, 0.18); + --accent: #b890d8; + --accent-fg: #100618; + --text: #f0e8f8; + --text-muted: #b8a8c8; +} + +/* HONEY DUSK — replaces honey-slate */ +[data-theme="honey-dusk"] { + --bg-base: #18120a; + --bg-tint: rgba(48, 36, 14, 0.45); + --glass: rgba(42, 32, 12, 0.55); + --glass-2: rgba(28, 22, 8, 0.72); + --glass-bord: rgba(232, 200, 130, 0.22); + --accent: #e8c050; + --accent-fg: #18120a; + --text: #faf0d8; + --text-muted: #c8b888; +} + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +html, body { background: var(--bg-base); color: var(--text); } +body { + font-family: var(--font-family); + font-size: var(--text-base); + line-height: 1.5; + min-height: 100dvh; + position: relative; + -webkit-font-smoothing: antialiased; +} + +/* ─── PERMANENT ATMOSPHERIC BACKDROP ──────────────────────────────────── */ +/* harbor photo fixed under everything */ +body::before { + content: ''; + position: fixed; + inset: 0; + background: url('../assets/harbor.jpg') center/cover no-repeat; + filter: brightness(0.6) saturate(0.85); + z-index: -3; +} +/* theme tint multiplied over photo */ +body::after { + content: ''; + position: fixed; + inset: 0; + background: var(--bg-tint); + mix-blend-mode: multiply; + z-index: -2; + pointer-events: none; +} +/* global vignette + film grain via one extra layer */ +.atmosphere { + position: fixed; + inset: 0; + pointer-events: none; + z-index: -1; + background: + radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.65) 100%), + url("data:image/svg+xml;utf8,"); +} diff --git a/_design/atmospheric-redesign/spa/home.html b/_design/atmospheric-redesign/spa/home.html new file mode 100644 index 0000000..2fd3e68 --- /dev/null +++ b/_design/atmospheric-redesign/spa/home.html @@ -0,0 +1,310 @@ + + + + + +Home — WeVisto + + + + + + + + + +
+ +
+
+
+
WeVisto
+
— Margaret's frame
+
+
+ +
+ +
+ +
+
I.Plate · today
+

Good morning, Alice.

+

Margaret's frame is in sync. The next photograph will arrive at 7:00 AM, quietly, on its own.

+
+
+ +
+
+
+ Synced 12 min ago +
+
Plate XII
+
+
+

Margaret's frame

+

7.3″ landscape · Camden, Maine · est. May 2026

+ +
+ +
+ Next photograph at 7:00 AM + then again at 12:00 PM and 6:00 PM +
+
+ +
+ + +
+
+
+ +
+
+

Up next

+ — in the library queue +
+
+
7am
+
noon
+
6pm
+
tmrw
+
+5
+
+
+ +
+ + + +
+ Dusk +
+ + + + + + +
+
+ + + + diff --git a/_design/atmospheric-redesign/spa/library.html b/_design/atmospheric-redesign/spa/library.html new file mode 100644 index 0000000..3f7072a --- /dev/null +++ b/_design/atmospheric-redesign/spa/library.html @@ -0,0 +1,249 @@ + + + + + +Library — WeVisto + + + + + + + + + +
+ +
+
+
+
WeVisto
+
— the library
+
+
+ +
+ +
+ +
+
○Accession no. 001
+
+
+
+

A library, waiting.

+

Photographs you upload will rotate through Margaret's frame, one at a time. We'll hold them here until the frame is ready.

+
+ + + Upload the first photograph + +
— or invite someone else to send one
+
+ +
+
+
How Visto works, briefly
+
— three steps, then forever
+
+
I.
You uploadfamily photos
+
II.
We holdthem in the library
+
III.
Frame picksone each interval
+
+
+ +
+
+
WeVisto · a frame, gifted
+
Edizione I · MMXXVI
+
+ +
+ + + +
+ Dusk +
+ + + + + + +
+
+ + + + diff --git a/_design/atmospheric-redesign/spa/settings.html b/_design/atmospheric-redesign/spa/settings.html new file mode 100644 index 0000000..78da761 --- /dev/null +++ b/_design/atmospheric-redesign/spa/settings.html @@ -0,0 +1,349 @@ + + + + + +Settings — WeVisto + + + + + + + + + +
+ +
+
+
+
WeVisto
+
— settings
+
+
+
+ +
+ +
+
Settings · Plate i
+

A few quiet choices.

+
+
+ +
+
I.Account
+
+ + + Alice Wexler + alice@example.com + › + + + + Notification email + daily digest + › + +
+
+ +
+
II.Appearance
+
+
+
Dusk
+
— pick a tint for the room
+
+
+ + + + + + +
+
+
+ +
+
III.Frames
+
+ + + Margaret's frame + 7.3″ landscape + › + + + + Add another frame + › + +
+
+ +
+
IV.Help
+
+ + + How WeVisto works + › + + + + Contact us + › + +
+
+ +
Sign out
+ +
+
+
WeVisto · a frame, gifted
+
Edizione I · MMXXVI · Camogli
+
+ +
+ + + +
+ Dusk +
+ + + + + + +
+
+ + + +