3dtours
428e7fa682
The ten PHOTO STYLE sims now carry nothing but their stock's own grade, and each is named for the stock it stands for: PROVIA, VELVIA, CLASSIC CHROME, CLASSIC VIVID (Velvia spliced with Classic Chrome at the blue row), CLASSIC NEGATIVE, ASTIA, ETERNA, ACROS, LC STREETLIFE CLASSIC, LC STREETLIFE VIVID. Grain, clarity, saturation and light moves were dropped from their `adjustments`, so a sim is a clean starting point and the general knobs read their defaults while the look still lands on the pixels. LC STREETLIFE VIVID keeps the one brightness step its stock needs, but as SIM_EXPOSURE_BIAS in colorUtils rather than as an adjustment: it is folded in where the Exposure slider applies, so the picture gets the lift and the parameter stays at 0. Also in this checkpoint: the watermark/GPS boxes and their colour pickers, the WATERMARK chip column, the real admin stats, and the fix that stopped presets from doubling and a frame from refusing to come off when a photo was reopened (/file is the finished render, /base the editable pixels).
516 lines
23 KiB
CSS
516 lines
23 KiB
CSS
/* Landing page — dark cinematic theme per the landing blueprint. Self-contained:
|
|
its own palette, its own class prefix (.lp-*), no dependency on the workspace
|
|
theme, so the marketing page looks the same in light or dark mode. The two
|
|
faces it does borrow — heading + mono — come from the Themes font group
|
|
(styles/tokens.css), so the nav picker retypes the whole page. */
|
|
|
|
.lp {
|
|
--lp-bg: #090a0f;
|
|
--lp-bg2: #0d0e12;
|
|
--lp-card: #161820;
|
|
/* The colour group in the Theme menu retints the page: the workspace already
|
|
resolves the accent hue, so the blueprint's amber/orange pair just borrows
|
|
it. --lp-red stays the film red, the one fixed point of the palette. */
|
|
--lp-amber: var(--accent);
|
|
--lp-orange: var(--accent-hover);
|
|
--lp-red: #ff5e36;
|
|
--lp-cyan: #38bdf8;
|
|
--lp-indigo: #818cf8;
|
|
--lp-text: #f3f4f6;
|
|
--lp-muted: #9ca3af;
|
|
--lp-line: rgba(255, 255, 255, 0.08);
|
|
/* Translucent bar tint — must follow the theme, not just --lp-bg, because the
|
|
fixed nav keeps this tint while the page scrolls under it. */
|
|
--lp-nav: rgba(9, 10, 15, 0.72);
|
|
/* Amber for text sitting on the page background — darker in light mode,
|
|
where plain #fbbf24 would fail contrast on white. */
|
|
--lp-ink-amber: var(--lp-amber);
|
|
--lp-mono: var(--mono);
|
|
--lp-display: var(--font-heading);
|
|
|
|
background: var(--lp-bg);
|
|
color: var(--lp-text);
|
|
min-height: 100%;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
/* The blueprint is a dark page, but the landing follows the app's theme switch
|
|
like every other screen. Same funnel, paper palette — only the surfaces and
|
|
the text flip; the amber/red accents carry over. */
|
|
[data-theme="light"] .lp {
|
|
--lp-bg: #f7f7f8;
|
|
--lp-bg2: #ffffff;
|
|
--lp-card: #ffffff;
|
|
--lp-text: #14161c;
|
|
--lp-muted: #5b6472;
|
|
--lp-line: rgba(20, 22, 28, 0.12);
|
|
--lp-nav: rgba(247, 247, 248, 0.72);
|
|
--lp-ink-amber: hsl(var(--accent-h) var(--accent-s) 32%);
|
|
}
|
|
[data-theme="light"] .lp-hero h1 { background: linear-gradient(100deg, #14161c 8%, var(--lp-amber) 62%, var(--lp-red) 98%); -webkit-background-clip: text; background-clip: text; }
|
|
[data-theme="light"] .lp-glow { opacity: 0.5; }
|
|
[data-theme="light"] .lp-btn,
|
|
[data-theme="light"] .lp-tool,
|
|
[data-theme="light"] .lp-tab { background: rgba(20, 22, 28, 0.04); }
|
|
[data-theme="light"] .lp-stat { background: linear-gradient(180deg, rgba(20, 22, 28, 0.04), transparent); }
|
|
[data-theme="light"] .lp-bar i { background: rgba(20, 22, 28, 0.12); }
|
|
[data-theme="light"] .lp-frame { background: #ffffff; }
|
|
[data-theme="light"] .lp-perf i { background: rgba(20, 22, 28, 0.55); box-shadow: none; }
|
|
[data-theme="light"] .lp-recipe-card { background: linear-gradient(160deg, #ffffff, #eef0f4); box-shadow: 0 24px 60px rgba(20, 22, 28, 0.18); }
|
|
[data-theme="light"] .lp-plan.vip { background: linear-gradient(180deg, var(--accent-soft), rgba(255, 255, 255, 0.92)); }
|
|
[data-theme="light"] .lp-toast { background: rgba(255, 255, 255, 0.98); box-shadow: 0 20px 50px rgba(20, 22, 28, 0.22); }
|
|
|
|
html { scroll-behavior: smooth; scroll-padding-top: 116px; }
|
|
.lp ::selection { background: var(--lp-amber); color: #10121a; }
|
|
.lp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
|
|
.lp h1, .lp h2, .lp h3 { font-family: var(--lp-display); font-weight: 800; line-height: 1.1; margin: 0; }
|
|
.lp p { margin: 0; }
|
|
.lp a { color: inherit; text-decoration: none; }
|
|
.lp-mono { font-family: var(--lp-mono); font-size: 11px; letter-spacing: 0.08em; }
|
|
.lp-eyebrow {
|
|
font-family: var(--lp-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.22em;
|
|
color: var(--lp-ink-amber);
|
|
text-transform: uppercase;
|
|
}
|
|
.lp-muted { color: var(--lp-muted); }
|
|
.lp-sec { padding: 92px 0; border-top: 1px solid var(--lp-line); }
|
|
.lp-sec-head { max-width: 720px; margin-bottom: 40px; }
|
|
.lp-sec-head h2 { font-size: clamp(26px, 4vw, 40px); }
|
|
.lp-sec-head p { color: var(--lp-muted); margin-top: 12px; }
|
|
|
|
/* --- buttons ------------------------------------------------------------ */
|
|
.lp-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 9px;
|
|
padding: 12px 20px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--lp-line);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--lp-text);
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
.lp-btn:hover { border-color: var(--accent-line); }
|
|
.lp-btn.lp-primary {
|
|
background: linear-gradient(120deg, var(--lp-amber), var(--lp-orange));
|
|
border-color: transparent;
|
|
color: #14100a;
|
|
box-shadow: 0 10px 30px var(--accent-soft);
|
|
}
|
|
.lp-btn.lp-primary:hover { filter: brightness(1.07); }
|
|
.lp-btn.lp-sm { padding: 9px 15px; font-size: 13px; }
|
|
|
|
/* --- 1. nav ------------------------------------------------------------- */
|
|
.lp-nav {
|
|
position: fixed;
|
|
inset: 0 0 auto 0;
|
|
z-index: 50;
|
|
background: var(--lp-nav);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid var(--lp-line);
|
|
}
|
|
.lp-nav .lp-wrap { display: flex; align-items: center; gap: 18px; height: 62px; }
|
|
.lp-logo { display: flex; align-items: center; gap: 8px; font-family: var(--lp-display); font-weight: 800; font-size: 24px; }
|
|
.lp-logo em { font-style: normal; color: var(--lp-ink-amber); }
|
|
.lp-logo-word { white-space: nowrap; }
|
|
.lp-logo-mark { border-radius: 8px; display: block; width: 30px; height: 30px; }
|
|
/* A short shelf of section jumps under the bar. Each one is a bordered pill,
|
|
so it reads as a button; the text keeps the page's normal size while the
|
|
shelf itself stays thin. */
|
|
.lp-subnav { border-top: 1px solid var(--lp-line); }
|
|
.lp-subnav .lp-wrap { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; height: auto; padding-top: 7px; padding-bottom: 7px; }
|
|
.lp-subnav-link {
|
|
padding: 4px 11px;
|
|
border: 1px solid var(--lp-line);
|
|
border-radius: 999px;
|
|
color: var(--lp-muted);
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
white-space: nowrap;
|
|
}
|
|
.lp-subnav-link:hover { color: var(--lp-text); border-color: var(--accent-line); }
|
|
.lp-nav .lp-spacer { flex: 1 1 auto; }
|
|
.lp-tools { display: flex; gap: 6px; }
|
|
.lp-tool {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--lp-line);
|
|
background: rgba(255, 255, 255, 0.04);
|
|
color: var(--lp-muted);
|
|
font-family: var(--lp-mono);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.lp-tool:hover { color: var(--lp-text); border-color: var(--accent-line); }
|
|
/* The theme popover borrows the workspace's .popover/.chip shell, re-skinned for
|
|
the landing palette. */
|
|
.lp-theme-pop { background: var(--lp-card); border-color: var(--lp-line); }
|
|
.lp-theme-pop .chip { background-color: transparent; border-color: var(--lp-line); color: var(--lp-muted); }
|
|
.lp-theme-pop .chip:hover { color: var(--lp-text); }
|
|
.lp-theme-pop .chip.on { color: var(--lp-ink-amber); border-color: var(--lp-ink-amber); background-color: var(--accent-soft); }
|
|
/* The account chip: a face + a name, opening the two things that account can
|
|
do — its page (Admin / Profile) and log out. */
|
|
.lp-account { display: inline-flex; align-items: center; gap: 7px; }
|
|
.lp-account .avatar { border-color: var(--lp-line); background: rgba(255, 255, 255, 0.06); color: var(--lp-muted); }
|
|
.lp-acc-pop .hint { color: var(--lp-muted); }
|
|
.lp-acc-pop .btn {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 6px;
|
|
text-align: left;
|
|
background: transparent;
|
|
border-color: var(--lp-line);
|
|
color: var(--lp-muted);
|
|
text-decoration: none;
|
|
}
|
|
.lp-acc-pop .btn:hover { color: var(--lp-text); border-color: var(--accent-line); }
|
|
.lp-burger { display: none; }
|
|
|
|
@media (max-width: 1160px) {
|
|
.lp-subnav, .lp-nav .lp-wrap > .lp-btn, .lp-nav .lp-account { display: none; }
|
|
.lp-burger {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
background: none;
|
|
border: 0;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.lp-burger i { display: block; width: 20px; height: 2px; background: var(--lp-text); }
|
|
.lp-sheet {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding: 10px 22px 18px;
|
|
border-top: 1px solid var(--lp-line);
|
|
}
|
|
.lp-sheet a { padding: 11px 0; color: var(--lp-muted); border-bottom: 1px solid var(--lp-line); }
|
|
.lp-sheet a:hover { color: var(--lp-text); }
|
|
.lp-sheet .lp-btn { margin-top: 12px; }
|
|
}
|
|
@media (min-width: 1161px) { .lp-sheet { display: none; } }
|
|
|
|
/* --- 2. hero ------------------------------------------------------------ */
|
|
.lp-hero { position: relative; padding: 184px 0 74px; overflow: hidden; }
|
|
.lp-glow {
|
|
position: absolute;
|
|
inset: -30% -10% auto -10%;
|
|
height: 560px;
|
|
background:
|
|
radial-gradient(420px 280px at 20% 30%, var(--accent-soft), transparent 70%),
|
|
radial-gradient(380px 260px at 78% 22%, rgba(255, 94, 54, 0.16), transparent 70%),
|
|
radial-gradient(420px 300px at 55% 80%, rgba(129, 140, 248, 0.14), transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
.lp-hero .lp-wrap { position: relative; }
|
|
.lp-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 13px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--accent-line);
|
|
background: var(--accent-soft);
|
|
color: var(--lp-ink-amber);
|
|
font-family: var(--lp-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
.lp-hero h1 {
|
|
font-size: clamp(34px, 6.4vw, 68px);
|
|
margin: 20px 0 18px;
|
|
max-width: 15ch;
|
|
background: linear-gradient(100deg, #f8fafc 12%, var(--lp-amber) 58%, var(--lp-red) 96%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
.lp-hero .lp-lede { color: var(--lp-muted); font-size: 17px; max-width: 60ch; }
|
|
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 44px; }
|
|
.lp-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
max-width: 640px;
|
|
}
|
|
.lp-stat {
|
|
border: 1px solid var(--lp-line);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
|
|
border-radius: 14px;
|
|
padding: 16px 18px;
|
|
}
|
|
.lp-stat b { display: block; font-family: var(--lp-display); font-size: 26px; }
|
|
.lp-stat span { color: var(--lp-muted); font-family: var(--lp-mono); font-size: 10.5px; letter-spacing: 0.14em; }
|
|
|
|
/* --- 3. film strip marquee ---------------------------------------------- */
|
|
.lp-marquee { overflow: hidden; border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); background: var(--lp-bg2); padding: 26px 0; }
|
|
.lp-track { display: flex; width: max-content; animation: lp-marquee 48s linear infinite; }
|
|
.lp-marquee:hover .lp-track { animation-play-state: paused; }
|
|
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
|
|
@media (prefers-reduced-motion: reduce) { .lp-track { animation: none; } }
|
|
/* Contribute control above the reel. The strip itself stays centred on the
|
|
viewport, so this head is the only wrapped part of the marquee section. */
|
|
.lp-film-head {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 22px;
|
|
}
|
|
.lp-film-head > div { max-width: 620px; }
|
|
.lp-film-head h2 { font-size: clamp(20px, 3vw, 30px); margin-top: 8px; }
|
|
.lp-film-head p { color: var(--lp-muted); margin-top: 8px; font-size: 13.5px; }
|
|
.lp-frame {
|
|
width: 236px;
|
|
margin-right: 18px;
|
|
background: #0b0c11;
|
|
border: 1px solid var(--lp-line);
|
|
border-radius: 10px;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.lp-perf { display: flex; justify-content: space-between; }
|
|
.lp-perf i {
|
|
width: 13px;
|
|
height: 7px;
|
|
border-radius: 2px;
|
|
background: #000;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
|
|
}
|
|
.lp-shot { position: relative; aspect-ratio: 4 / 5; border-radius: 5px; overflow: hidden; background: #000; }
|
|
.lp-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
/* Contributed photos, whatever the section: the page draws them but does not
|
|
invite a save — no drag image, no long-press callout, no text selection. */
|
|
.lp-photo { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
|
|
.lp-grain {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.3;
|
|
mix-blend-mode: overlay;
|
|
pointer-events: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
.lp-tagline { position: absolute; top: 7px; left: 7px; font-family: var(--lp-mono); font-size: 9.5px; color: var(--lp-amber); text-shadow: 0 1px 6px #000; }
|
|
.lp-frame-meta { display: flex; flex-direction: column; gap: 3px; }
|
|
.lp-frame-meta b { font-size: 13px; font-weight: 600; }
|
|
.lp-frame-meta span { font-family: var(--lp-mono); font-size: 9.5px; color: var(--lp-muted); letter-spacing: 0.06em; }
|
|
/* The score line: the tally reads first, the five clickable stars after it, the
|
|
number of votes last. One vote per visitor — a second click replaces it. */
|
|
.lp-rate { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
|
|
.lp-rate-index { font-family: var(--lp-mono); font-size: 12px; font-weight: 600; color: var(--lp-amber); }
|
|
.lp-stars { display: inline-flex; gap: 1px; }
|
|
.lp-star {
|
|
border: 0;
|
|
background: none;
|
|
padding: 0;
|
|
line-height: 1;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
color: var(--lp-line);
|
|
transition: color 0.12s ease, transform 0.12s ease;
|
|
}
|
|
.lp-star:hover { color: var(--lp-amber); transform: scale(1.18); }
|
|
.lp-star.on { color: var(--lp-amber); }
|
|
.lp-rate-count { font-family: var(--lp-mono); font-size: 9.5px; color: var(--lp-muted); }
|
|
|
|
/* --- 4. preset tester --------------------------------------------------- */
|
|
.lp-tester { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
|
|
.lp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
|
.lp-tab {
|
|
border: 1px solid var(--lp-line);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
color: var(--lp-muted);
|
|
border-radius: 999px;
|
|
padding: 7px 14px;
|
|
font-size: 12.5px;
|
|
font-family: var(--lp-mono);
|
|
cursor: pointer;
|
|
}
|
|
.lp-tab[aria-pressed="true"] { border-color: var(--lp-amber); color: var(--lp-ink-amber); background: var(--accent-soft); }
|
|
.lp-view { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--lp-line); background: #000; }
|
|
.lp-view img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: filter 380ms ease; }
|
|
.lp-arrow {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 2;
|
|
width: 38px;
|
|
height: 38px;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--lp-line);
|
|
background: rgba(0, 0, 0, 0.55);
|
|
color: var(--lp-text);
|
|
font: inherit;
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
|
|
}
|
|
.lp-arrow:hover, .lp-arrow:focus-visible { background: rgba(0, 0, 0, 0.85); border-color: var(--lp-amber); color: var(--lp-amber); }
|
|
.lp-arrow-prev { left: 10px; }
|
|
.lp-arrow-next { right: 10px; }
|
|
.lp-hud {
|
|
position: absolute;
|
|
inset: auto 0 0 0;
|
|
display: flex;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
padding: 10px 14px;
|
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent);
|
|
font-family: var(--lp-mono);
|
|
font-size: 10.5px;
|
|
color: rgba(243, 244, 246, 0.85);
|
|
}
|
|
.lp-hud b { color: var(--lp-amber); font-weight: 700; }
|
|
.lp-specs { border: 1px solid var(--lp-line); background: var(--lp-card); border-radius: 16px; padding: 20px; }
|
|
.lp-specs h3 { font-size: 18px; }
|
|
.lp-specs p { color: var(--lp-muted); font-size: 13.5px; margin-top: 8px; }
|
|
.lp-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
|
|
.lp-bar span { display: flex; justify-content: space-between; font-family: var(--lp-mono); font-size: 10.5px; color: var(--lp-muted); letter-spacing: 0.1em; }
|
|
.lp-bar i { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); margin-top: 6px; overflow: hidden; }
|
|
.lp-bar i::after { content: ''; display: block; height: 100%; width: var(--v); border-radius: 999px; background: linear-gradient(90deg, var(--lp-amber), var(--lp-red)); transition: width 380ms ease; }
|
|
|
|
/* --- 5. creator --------------------------------------------------------- */
|
|
.lp-lab { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
|
|
.lp-knobs { border: 1px solid var(--lp-line); background: var(--lp-bg2); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 20px; }
|
|
.lp-knob label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--lp-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--lp-muted); }
|
|
.lp-knob b { color: var(--lp-ink-amber); font-size: 13px; }
|
|
.lp input[type=range] { width: 100%; margin-top: 10px; accent-color: var(--lp-amber); }
|
|
.lp-code { border-top: 1px solid var(--lp-line); padding-top: 16px; font-family: var(--lp-mono); font-size: 11px; color: var(--lp-muted); line-height: 1.9; }
|
|
.lp-code b { color: var(--lp-cyan); }
|
|
|
|
/* --- 6. features -------------------------------------------------------- */
|
|
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
|
|
.lp-feat { border: 1px solid var(--lp-line); background: var(--lp-card); border-radius: 16px; padding: 22px; }
|
|
.lp-feat svg { color: var(--lp-ink-amber); }
|
|
.lp-feat h3 { font-size: 17px; margin: 14px 0 8px; }
|
|
.lp-feat p { color: var(--lp-muted); font-size: 13.5px; }
|
|
|
|
/* --- 7. QR -------------------------------------------------------------- */
|
|
.lp-qr { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 34px; align-items: center; }
|
|
.lp-recipe-card {
|
|
border: 1px solid var(--accent-line);
|
|
border-radius: 18px;
|
|
background: linear-gradient(160deg, #1b1d27, #0e0f14);
|
|
padding: 16px;
|
|
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
|
|
transform: rotate(-2deg);
|
|
}
|
|
.lp-recipe-card .lp-shot { border-radius: 12px; }
|
|
.lp-rc-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
|
|
.lp-rc-qr { width: 84px; height: 84px; border-radius: 10px; background: #fff; padding: 5px; flex: 0 0 auto; }
|
|
.lp-rc-qr img { width: 100%; height: 100%; display: block; }
|
|
.lp-rc-meta { min-width: 0; }
|
|
.lp-rc-meta b { display: block; font-family: var(--lp-display); font-size: 15px; }
|
|
.lp-rc-meta span { font-family: var(--lp-mono); font-size: 10px; color: var(--lp-muted); }
|
|
.lp-steps { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
|
|
.lp-step { display: flex; gap: 14px; }
|
|
.lp-step span {
|
|
flex: 0 0 auto;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 999px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--accent-soft);
|
|
border: 1px solid var(--accent-line);
|
|
color: var(--lp-ink-amber);
|
|
font-family: var(--lp-mono);
|
|
font-size: 12px;
|
|
}
|
|
.lp-step p { color: var(--lp-muted); font-size: 13.5px; }
|
|
.lp-step b { color: var(--lp-text); }
|
|
|
|
/* --- 8. pricing --------------------------------------------------------- */
|
|
.lp-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 860px; }
|
|
.lp-plan { border: 1px solid var(--lp-line); background: var(--lp-card); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; }
|
|
.lp-plan.vip { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), rgba(22, 24, 32, 0.9)); }
|
|
.lp-plan .lp-amount { font-family: var(--lp-display); font-size: 38px; margin: 12px 0 4px; }
|
|
.lp-plan .lp-amount small { font-family: var(--lp-mono); font-size: 11px; color: var(--lp-muted); }
|
|
.lp-plan ul { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--lp-muted); }
|
|
.lp-plan li::before { content: '▸ '; color: var(--lp-ink-amber); }
|
|
/* Card actions pinned to the bottom: the studio link plus the store buttons. */
|
|
.lp-plan-cta { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
|
|
|
|
/* --- 9. testimonials + faq --------------------------------------------- */
|
|
.lp-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 44px; }
|
|
.lp-quote { border: 1px solid var(--lp-line); background: var(--lp-card); border-radius: 16px; padding: 22px; }
|
|
.lp-quote p { font-size: 14px; }
|
|
.lp-quote footer { margin-top: 16px; font-family: var(--lp-mono); font-size: 10.5px; color: var(--lp-muted); }
|
|
.lp-quote footer b { display: block; color: var(--lp-text); font-family: var(--lp-display); font-size: 13.5px; }
|
|
.lp-faq { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
|
|
.lp-faq details { border: 1px solid var(--lp-line); border-radius: 12px; background: var(--lp-bg2); padding: 14px 18px; }
|
|
.lp-faq summary { cursor: pointer; font-weight: 600; }
|
|
.lp-faq summary::marker { color: var(--lp-ink-amber); }
|
|
.lp-faq p { color: var(--lp-muted); font-size: 13.5px; margin-top: 10px; }
|
|
|
|
/* --- 10. final CTA + footer -------------------------------------------- */
|
|
.lp-final { position: relative; overflow: hidden; text-align: center; padding: 88px 0; }
|
|
.lp-final .lp-glow { inset: -60% 0 auto 0; }
|
|
.lp-final h2 { font-size: clamp(28px, 4.6vw, 46px); max-width: 20ch; margin: 0 auto 16px; }
|
|
.lp-final p { color: var(--lp-muted); max-width: 52ch; margin: 0 auto 28px; }
|
|
.lp-stores { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
|
.lp-store { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
|
|
.lp-store small { font-family: var(--lp-mono); font-size: 9.5px; color: var(--lp-muted); }
|
|
.lp-store b { font-size: 15px; }
|
|
/* Share row under the store badges: the label reads as a mono caption. */
|
|
.lp-share { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
|
|
.lp-share-label { font-family: var(--lp-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--lp-muted); margin-right: 4px; }
|
|
.lp-footer { border-top: 1px solid var(--lp-line); padding: 30px 0 40px; }
|
|
.lp-footer .lp-wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; font-size: 12.5px; color: var(--lp-muted); }
|
|
.lp-footer a:hover { color: var(--lp-text); }
|
|
.lp-social { display: flex; gap: 16px; margin-left: auto; font-family: var(--lp-mono); font-size: 11px; }
|
|
|
|
/* --- toast -------------------------------------------------------------- */
|
|
.lp-toast {
|
|
position: fixed;
|
|
right: 18px;
|
|
bottom: 18px;
|
|
z-index: 60;
|
|
max-width: min(340px, calc(100vw - 36px));
|
|
border: 1px solid var(--accent-line);
|
|
background: rgba(22, 24, 32, 0.96);
|
|
border-radius: 12px;
|
|
padding: 12px 16px;
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
|
|
font-size: 13px;
|
|
}
|
|
.lp-toast b { color: var(--lp-ink-amber); }
|
|
|
|
/* --- responsive --------------------------------------------------------- */
|
|
@media (max-width: 980px) {
|
|
.lp-tester, .lp-lab, .lp-qr { grid-template-columns: minmax(0, 1fr); }
|
|
.lp-grid, .lp-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.lp-recipe-card { transform: none; }
|
|
}
|
|
@media (max-width: 680px) {
|
|
/* logo + theme + language + burger have to fit a 360px phone */
|
|
.lp-nav .lp-wrap { gap: 10px; }
|
|
.lp-logo { font-size: 19px; }
|
|
.lp-logo-mark { width: 24px; height: 24px; }
|
|
.lp-tool { width: 30px; height: 30px; font-size: 11px; }
|
|
.lp-burger { padding: 6px; }
|
|
.lp-sec { padding: 64px 0; }
|
|
.lp-hero { padding: 112px 0 52px; }
|
|
.lp-grid, .lp-quotes, .lp-price, .lp-stats { grid-template-columns: minmax(0, 1fr); }
|
|
.lp-stat { display: flex; align-items: baseline; gap: 10px; }
|
|
.lp-social { margin-left: 0; }
|
|
}
|