Rebuild the web landing page to the blueprint spec

Ten dark cinematic sections: fixed glass nav with a hamburger sheet, hero
with the badge/dual CTA/stats bar, a pausable 35mm film-strip marquee, the
live preset tester (5 stocks, HUD, spec bars), the three-knob custom recipe
simulator, the 6-card feature grid, the QR sharing showcase, free-vs-Pro
pricing, reviews + FAQ accordion and the final CTA/footer.

The page owns its palette and its .lp-* styles, so it renders the same in
either workspace theme, and it pulls no CDN: Syne is bundled and the six
sample negatives are vendored (see docker/README.md). Store buttons raise a
toast instead of the old alert(). The now-dead landing CSS and the unused
land.* dictionary keys are gone.
This commit is contained in:
2026-09-17 18:26:18 +07:00
parent dace19aec4
commit 340f0374fc
14 changed files with 837 additions and 121 deletions
-23
View File
@@ -164,29 +164,6 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
.stage .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.err { color: var(--danger); font-size: 12px; max-width: 520px; text-align: center; }
/* --- landing ------------------------------------------------------------ */
.landing { max-width: 960px; margin: 0 auto; padding: 56px 20px 72px; }
.landing h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.1; margin: 0 0 14px; }
.landing .lede { font-size: 17px; color: var(--text-dim); max-width: 620px; line-height: 1.6; }
.landing .cta { display: flex; gap: 10px; margin: 24px 0 44px; flex-wrap: wrap; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg-elev); }
.card h3 { margin: 0 0 6px; font-size: 14px; }
.card p { margin: 0; color: var(--text-dim); line-height: 1.55; }
.badges { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.badge {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 9px 14px;
text-decoration: none;
color: var(--text);
display: flex;
flex-direction: column;
line-height: 1.3;
background: var(--bg-elev);
}
.badge small { color: var(--text-dim); font-size: 10px; letter-spacing: 0.08em; }
/* --- auth dialog -------------------------------------------------------- */
.modal-backdrop {
position: fixed;