/* lp-home.css — Camika marketing homepage (`/`)
*
* Self-contained — never @imports desktop.css. Aligned with the rest of the lp
* pages (lp-gpt-image-2-prompts.css) so brand changes propagate naturally:
* - Same red primary (#e63946) + red gradient
* - border-radius: 0 everywhere (CLAUDE.md global Rule #11)
* - Dual theme — light default, `[data-theme="dark"]` override
* - P5 token names (--p5-*) match the rest of the codebase
*
* Namespace `.lphome-*` — collision-free with desktop UI and other lp pages.
* Placeholder tiles use `.lphome-ph[data-tint]` — swap to ![]()
when real CDN
* URLs are curated.
*/
/* ── P5 design tokens (light default, dark = override) ───── */
:root[data-page="lp"] {
--p5-red: #e63946;
--p5-red-2: #ff6b6b;
--p5-red-gradient: linear-gradient(135deg, #e63946, #ff6b6b);
/* Light theme defaults — clean, white, brand red */
--p5-bg: #ffffff;
--p5-bg-alt: #fafafa;
--p5-card: #ffffff;
--p5-text: #1a1a1a;
--p5-text-inverse: #ffffff;
--p5-text-secondary: #4a5568;
--p5-muted: #6b7280;
--p5-border: #e5e7eb;
--p5-border-strong: #d1d5db;
--p5-media-scrim: rgba(0, 0, 0, 0.56);
--p5-media-outline: rgba(255, 255, 255, 0.42);
--p5-soft-red: rgba(230, 57, 70, 0.08);
--p5-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--p5-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
--p5-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);
/* Use-case tints (very pale background fills, light theme) */
--uc-pink-bg: #fdf2f4;
--uc-pink-border: #f5d6da;
--uc-blue-bg: #f1f4fb;
--uc-blue-border: #d8e1f3;
--uc-yellow-bg: #fdf7e8;
--uc-yellow-border: #f4e6bf;
--uc-green-bg: #eef8f3;
--uc-green-border: #cfe9da;
}
:root[data-page="lp"][data-theme="dark"] {
--p5-bg: #0a0a0f;
--p5-bg-alt: #0d0d13;
--p5-card: #16161d;
--p5-text: #e8e8e8;
--p5-text-inverse: #ffffff;
--p5-text-secondary: #a8a8a8;
--p5-muted: #7a7a7a;
--p5-border: #2a2a32;
--p5-border-strong: #3a3a44;
--p5-media-scrim: rgba(0, 0, 0, 0.62);
--p5-media-outline: rgba(255, 255, 255, 0.38);
--p5-soft-red: rgba(230, 57, 70, 0.15);
--p5-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
--p5-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
--p5-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
--uc-pink-bg: rgba(244, 114, 182, 0.08);
--uc-pink-border: rgba(244, 114, 182, 0.18);
--uc-blue-bg: rgba(74, 144, 226, 0.08);
--uc-blue-border: rgba(74, 144, 226, 0.18);
--uc-yellow-bg: rgba(245, 197, 24, 0.08);
--uc-yellow-border: rgba(245, 197, 24, 0.18);
--uc-green-bg: rgba(16, 185, 129, 0.08);
--uc-green-border: rgba(16, 185, 129, 0.18);
}
/* ── reset + base ───────────────────────────────── */
[hidden] { display: none !important; }
/* Element-level resets — scoped to :root[data-page="lp"] so this stylesheet
is safe to load on non-LP pages (e.g. /desktop loads it for the Comic
showcase modal). data-page="lp" is set by an inline script in every LP
HTML's before this stylesheet parses. */
:root[data-page="lp"] *,
:root[data-page="lp"] *::before,
:root[data-page="lp"] *::after { box-sizing: border-box; }
:root[data-page="lp"] { scroll-behavior: smooth; }
:root[data-page="lp"] body {
margin: 0;
background: var(--p5-bg);
color: var(--p5-text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC',
'Microsoft YaHei', sans-serif;
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
transition: background 0.2s, color 0.2s;
}
:root[data-page="lp"] img { max-width: 100%; display: block; }
:root[data-page="lp"] a { color: inherit; text-decoration: none; }
:root[data-page="lp"] button { font-family: inherit; }
/* ── Placeholder tiles (.lphome-ph) ─────────────── *
* Still used for tiny generated avatars and media fallbacks. Primary hero and
* showcase covers now use curated CDN media. */
.lphome-ph {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
color: #fff; font-weight: 600; font-size: 13px;
letter-spacing: 0.4px;
overflow: hidden; position: relative;
text-align: center; padding: 8px;
}
.lphome-ph[data-tint="pink"] { background: linear-gradient(135deg, #fbb6ce, #ec4899); }
.lphome-ph[data-tint="warm"] { background: linear-gradient(135deg, #fbbf24, #e63946); }
.lphome-ph[data-tint="cool"] { background: linear-gradient(135deg, #93c5fd, #2563eb); }
.lphome-ph[data-tint="violet"] { background: linear-gradient(135deg, #c4b5fd, #6366f1); }
.lphome-ph[data-tint="green"] { background: linear-gradient(135deg, #86efac, #059669); }
.lphome-ph[data-tint="dark"] { background: linear-gradient(135deg, #374151, #111827); }
.lphome-ph[data-tint="mono"] { background: linear-gradient(135deg, #9ca3af, #1f2937); }
.lphome-ph-label { z-index: 1; opacity: 0.95; }
.lphome-video-mark {
position: absolute;
right: 8px;
bottom: 8px;
z-index: 2;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--p5-media-scrim);
color: var(--p5-text-inverse);
border: 1px solid var(--p5-media-outline);
}
/* ── Header ─────────────────────────────────────── */
.lphome-header {
position: sticky; top: 0; z-index: 50;
/* 3-col grid (logo / nav / right): the middle nav stays viewport-centered
independent of the left/right widths. flex space-between would let the
wider right column push the nav off-center toward the logo side. */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
padding: 14px 32px;
background: var(--p5-card);
border-bottom: 1px solid var(--p5-border);
}
.lphome-logo { display: inline-flex; align-items: center; line-height: 0; }
.lphome-logo img { height: 28px; width: auto; }
.lphome-logo:hover { opacity: 0.85; }
.lphome-nav { display: flex; align-items: center; gap: 28px; }
.lphome-nav-link {
position: relative;
color: var(--p5-text-secondary);
font-size: 14px; font-weight: 500;
padding: 6px 0;
}
.lphome-nav-link:hover { color: var(--p5-text); }
.lphome-nav-link.is-active {
color: var(--p5-red);
font-weight: 600;
}
.lphome-nav-link.is-active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -16px;
height: 2px;
background: var(--p5-red);
}
.lphome-header-right { display: flex; align-items: center; gap: 12px; justify-self: end; }
.lphome-theme-btn {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
background: transparent;
border: 0;
padding: 0;
color: var(--p5-text-secondary);
cursor: pointer;
border-radius: 0;
}
.lphome-theme-btn:hover {
color: var(--p5-text);
border-color: var(--p5-border-strong);
}
.lphome-theme-icon { flex-shrink: 0; }
.lphome-theme-icon-sun { display: none; }
.lphome-theme-icon-moon { display: block; }
:root[data-page="lp"][data-theme="dark"] .lphome-theme-icon-sun { display: block; }
:root[data-page="lp"][data-theme="dark"] .lphome-theme-icon-moon { display: none; }
.lphome-lang-wrap {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}
.lphome-lang-btn {
display: inline-flex; align-items: center; gap: 6px;
min-height: 38px;
padding: 7px 4px;
background: transparent;
border: 0;
color: var(--p5-text-secondary);
font-size: 13px; font-weight: 500;
cursor: pointer;
border-radius: 0;
}
.lphome-lang-btn:hover { color: var(--p5-text); }
/* Lang dropdown — anchored to the language button wrapper by lp-home.js. */
.lphome-lang-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 100%;
width: max-content;
max-width: min(260px, calc(100vw - 36px));
background: var(--p5-card);
border: 1px solid var(--p5-border);
box-shadow: var(--p5-shadow);
z-index: 100;
display: flex; flex-direction: column;
padding: 4px 0;
border-radius: 0;
}
.lphome-lang-opt {
display: block; width: 100%;
text-align: left;
padding: 8px 14px;
background: transparent;
border: none;
color: var(--p5-text);
font-size: 13px;
white-space: nowrap;
cursor: pointer;
border-radius: 0;
font-family: inherit;
}
.lphome-lang-opt:hover {
background: var(--p5-soft-red);
color: var(--p5-red);
}
.lphome-signin-link {
color: var(--p5-red);
font-size: 14px; font-weight: 600;
padding: 8px 14px;
}
.lphome-signin-link:hover { opacity: 0.8; }
.lphome-cta-mini {
min-height: 38px;
display: inline-flex;
align-items: center;
padding: 8px 20px;
background: var(--p5-red);
color: #fff !important;
font-weight: 700; font-size: 14px;
border: 0;
border-radius: 0;
box-shadow: none;
transition: background 0.18s ease;
}
.lphome-cta-mini:hover {
background: var(--p5-red-2);
color: #fff !important;
}
/* ── Buttons ────────────────────────────────────── */
.lphome-btn-primary, .lphome-btn-ghost, .lphome-btn-on-red {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 22px;
font-size: 15px; font-weight: 600;
border-radius: 0; cursor: pointer; border: none;
text-decoration: none;
transition: opacity 0.2s, background 0.2s, color 0.2s;
}
.lphome-btn-primary { background: var(--p5-red-gradient); color: #fff !important; }
.lphome-btn-primary:hover { opacity: 0.9; }
.lphome-btn-ghost {
background: transparent;
color: var(--p5-text);
border: 1px solid var(--p5-border-strong);
}
.lphome-btn-ghost:hover { border-color: var(--p5-red); color: var(--p5-red); }
.lphome-btn-on-red {
background: #fff; color: var(--p5-red) !important;
}
.lphome-btn-on-red:hover { background: rgba(255,255,255,0.92); }
/* ── Hero ───────────────────────────────────────── */
.lphome-hero {
background: var(--p5-bg);
padding: 56px 32px 48px;
border-bottom: 1px solid var(--p5-border);
}
.lphome-hero-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 56px;
align-items: start;
}
.lphome-hero-left { padding-top: 8px; }
.lphome-eyebrow {
display: inline-flex; align-items: center;
padding: 6px 12px;
background: var(--p5-soft-red);
color: var(--p5-red);
font-size: 12px; font-weight: 600;
letter-spacing: 0.4px;
margin-bottom: 22px;
}
.lphome-h1 {
font-size: clamp(36px, 4.6vw, 56px);
font-weight: 800;
letter-spacing: -1px;
line-height: 1.15;
margin: 0 0 20px;
color: var(--p5-text);
}
.lphome-h1-hl { color: var(--p5-red); }
.lphome-lede {
font-size: 16px;
color: var(--p5-text-secondary);
margin: 0 0 30px;
max-width: 520px;
line-height: 1.7;
}
.lphome-cta-row {
display: flex; align-items: center; gap: 14px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.lphome-hero-chips {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 32px;
max-width: 540px;
}
.lphome-chip {
display: flex; align-items: flex-start; gap: 10px;
}
.lphome-chip-icon {
flex-shrink: 0;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--p5-soft-red);
color: var(--p5-red);
}
.lphome-chip-text { display: flex; flex-direction: column; min-width: 0; }
.lphome-chip-text strong {
font-size: 13px; font-weight: 600;
color: var(--p5-text);
margin-bottom: 2px;
}
.lphome-chip-text em {
font-style: normal;
font-size: 12px;
color: var(--p5-muted);
line-height: 1.5;
}
/* Hero capability wall */
.lphome-hero-collage {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
max-width: 760px;
height: clamp(420px, 34vw, 540px);
margin: 0 auto;
padding: 0;
background: transparent;
border: none;
overflow: hidden;
}
.lphome-collage-cell {
position: relative;
overflow: hidden;
background: var(--p5-bg-alt);
border: 1px solid var(--p5-border-strong);
}
.lphome-collage-cell img,
.lphome-collage-cell video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.lphome-collage-label {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 28px;
max-width: calc(100% - 24px);
padding: 4px 12px 4px 9px;
background: var(--p5-media-scrim);
border: 1px solid var(--p5-media-outline);
color: var(--p5-text-inverse);
font-size: 13px;
font-weight: 700;
line-height: 1.25;
white-space: nowrap;
}
.lphome-collage-label::before {
content: '';
width: 3px;
height: 16px;
flex: 0 0 auto;
background: var(--p5-red);
}
.lphome-c-1 {
grid-column: 1 / span 4;
grid-row: 1;
}
.lphome-c-2 {
grid-column: 5 / span 8;
grid-row: 1;
}
.lphome-c-3 {
grid-column: 1 / span 6;
grid-row: 2;
}
.lphome-c-4 {
grid-column: 7 / span 6;
grid-row: 2;
}
/* ── Section title shared ───────────────────────── */
.lphome-section-head {
max-width: 1280px;
margin: 0 auto 24px;
display: flex; align-items: baseline; justify-content: space-between;
padding: 0 32px;
}
.lphome-section-title {
font-size: clamp(20px, 2vw, 24px);
font-weight: 700;
color: var(--p5-text);
margin: 0;
letter-spacing: -0.3px;
}
.lphome-link-arrow {
font-size: 13px; font-weight: 500;
color: var(--p5-text-secondary);
}
.lphome-link-arrow:hover { color: var(--p5-red); }
.lphome-center { text-align: center; }
.lphome-section-sub {
max-width: 720px;
margin: 8px auto 32px;
padding: 0 32px;
font-size: 14px;
color: var(--p5-muted);
line-height: 1.7;
}
/* ── Showcase ───────────────────────────────────── */
.lphome-showcase {
background: var(--p5-bg);
padding: 48px 0 56px;
}
.lphome-tabs {
max-width: 1280px;
margin: 0 auto 20px;
padding: 0 32px;
display: flex; align-items: center; gap: 18px;
flex-wrap: wrap;
}
.lphome-tab {
padding: 6px 0;
background: transparent; border: none;
color: var(--p5-text-secondary);
font-size: 14px; font-weight: 500;
cursor: pointer;
border-radius: 0;
position: relative;
}
.lphome-tab:hover { color: var(--p5-text); }
.lphome-tab.is-active {
color: var(--p5-red);
font-weight: 600;
}
.lphome-tab.is-active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 2px;
background: var(--p5-red);
}
/* Strip with arrows — used by Showcase + Testimonials */
.lphome-strip-wrap {
position: relative;
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
.lphome-strip {
display: flex; gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none; /* Firefox */
padding-bottom: 4px;
}
.lphome-strip::-webkit-scrollbar { display: none; }
.lphome-strip-arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
z-index: 5;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--p5-card);
border: 1px solid var(--p5-border);
color: var(--p5-text);
cursor: pointer;
box-shadow: var(--p5-shadow-sm);
border-radius: 0;
/* counteract :active scale that would break translate centering */
}
.lphome-strip-arrow:active { transform: translateY(-50%); }
.lphome-strip-arrow:hover { color: var(--p5-red); border-color: var(--p5-red); }
.lphome-strip-arrow-l { left: 4px; }
.lphome-strip-arrow-r { right: 4px; }
/* Showcase cards */
.lphome-show-card {
flex: 0 0 220px;
scroll-snap-align: start;
background: var(--p5-card);
border: 1px solid var(--p5-border);
display: flex; flex-direction: column;
position: relative;
transition: border-color 0.15s, box-shadow 0.15s;
}
.lphome-show-card:hover {
border-color: var(--p5-red);
box-shadow: var(--p5-shadow);
}
.lphome-show-cover {
width: 100%;
aspect-ratio: 1;
font-size: 12px;
position: relative;
overflow: hidden;
background: var(--p5-card);
}
.lphome-show-cover img,
.lphome-show-cover video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.2s ease;
}
.lphome-show-card:hover .lphome-show-cover img,
.lphome-show-card:hover .lphome-show-cover video {
transform: scale(1.035);
}
.lphome-show-meta {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
font-size: 12px;
color: var(--p5-text-secondary);
}
.lphome-show-avatar {
flex-shrink: 0;
width: 22px; height: 22px;
}
.lphome-show-author {
flex: 1; min-width: 0;
color: var(--p5-text);
font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lphome-show-stats {
display: flex; gap: 8px;
flex-shrink: 0;
color: var(--p5-muted);
font-size: 11px;
}
.lphome-show-stat {
display: inline-flex;
align-items: center;
gap: 3px;
line-height: 1;
}
.lphome-show-stat svg {
flex-shrink: 0;
}
.lphome-show-badge {
position: absolute;
top: 8px; right: 8px; z-index: 2;
padding: 3px 8px;
background: var(--p5-red);
color: #fff;
font-size: 10px; font-weight: 700;
letter-spacing: 0.6px;
}
/* ── Use-case 4 cards ───────────────────────────── */
.lphome-usecases {
background: var(--p5-bg);
padding: 64px 32px 72px;
}
.lphome-usecases > .lphome-section-title { padding: 0; }
.lphome-usecases-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.lphome-usecase-card {
display: flex; flex-direction: column;
padding: 22px 20px 20px;
border: 1px solid;
border-radius: 0;
min-height: 380px;
transition: transform 0.15s, box-shadow 0.15s;
}
.lphome-usecase-card:hover {
transform: translateY(-3px);
box-shadow: var(--p5-shadow);
}
.lphome-uc-tint-pink { background: var(--uc-pink-bg); border-color: var(--uc-pink-border); }
.lphome-uc-tint-blue { background: var(--uc-blue-bg); border-color: var(--uc-blue-border); }
.lphome-uc-tint-yellow { background: var(--uc-yellow-bg); border-color: var(--uc-yellow-border); }
.lphome-uc-tint-green { background: var(--uc-green-bg); border-color: var(--uc-green-border); }
.lphome-uc-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px;
}
.lphome-uc-icon {
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--p5-text);
}
.lphome-uc-title {
font-size: 15px; font-weight: 700;
color: var(--p5-text);
margin: 0;
}
.lphome-uc-suitable {
font-size: 11px;
color: var(--p5-muted);
margin: 0 0 8px;
line-height: 1.5;
}
.lphome-uc-desc {
font-size: 12px;
color: var(--p5-text-secondary);
margin: 0 0 12px;
line-height: 1.6;
}
.lphome-uc-flow {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
font-size: 11px;
color: var(--p5-text-secondary);
margin-bottom: 14px;
line-height: 1.4;
font-weight: 500;
}
.lphome-uc-flow em {
font-style: normal;
color: var(--p5-muted);
margin: 0 0;
}
.lphome-uc-tagline {
font-size: 12px;
color: var(--p5-text);
margin: 12px 0 0;
line-height: 1.6;
font-weight: 600;
}
.lphome-uc-cover {
flex: 1;
min-height: 130px;
margin-bottom: 14px;
overflow: hidden;
background: var(--p5-card);
}
.lphome-uc-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lphome-uc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, 1fr);
gap: 4px;
background: transparent;
padding: 0;
}
.lphome-uc-grid > .lphome-ph { width: 100%; height: 100%; }
.lphome-uc-cta {
font-size: 12px; font-weight: 600;
color: var(--p5-red);
align-self: flex-start;
}
.lphome-uc-cta:hover { opacity: 0.8; }
/* ── Testimonials ───────────────────────────────── */
.lphome-testimonials {
background: var(--p5-bg);
padding: 56px 0 60px;
}
.lphome-tcards-wrap { padding: 0 32px; }
.lphome-tcards { gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.lphome-tcard {
flex: 0 0 280px;
scroll-snap-align: start;
background: var(--p5-card);
border: 1px solid var(--p5-border);
padding: 18px 18px 14px;
display: flex; flex-direction: column;
min-height: 180px;
}
.lphome-tcard-quote {
font-size: 13px;
color: var(--p5-text);
line-height: 1.7;
margin: 0 0 16px;
flex: 1;
}
.lphome-tcard-foot {
display: flex; align-items: center; gap: 10px;
}
.lphome-tcard-avatar {
flex-shrink: 0;
width: 32px; height: 32px;
}
.lphome-tcard-author {
display: flex; flex-direction: column; min-width: 0;
flex: 1;
}
.lphome-tcard-author strong {
font-size: 13px; font-weight: 600;
color: var(--p5-text);
}
.lphome-tcard-author em {
font-style: normal;
font-size: 11px;
color: var(--p5-muted);
margin-top: 2px;
}
.lphome-tcard-likes {
font-size: 11px;
color: var(--p5-red);
font-weight: 600;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 3px;
line-height: 1;
}
.lphome-tcards-dots {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 22px;
}
.lphome-dot {
width: 6px; height: 6px;
background: var(--p5-border-strong);
border-radius: 50%;
}
.lphome-dot.is-active {
background: var(--p5-red);
width: 18px;
border-radius: 0;
}
/* ── Centered CTA (light, minimal — replaces the earlier red banner) ── */
/* Audience section — "为不同创作者而设计" 4 audience-first cards.
* Visual language aligned with .lphome-showcase: cover on top + body on
* bottom (HTML still has body first; CSS uses column-reverse to flip
* visual order while keeping body first in the accessibility tree).
* Hover = border-color: --p5-border-strong (no red border, no shadow);
* heading uses showcase's large bold style. Body keeps audience-first
* info density (icon + title + role + desc + tags). */
.lphome-audience {
background: var(--p5-bg);
padding: 54px 32px 76px;
border-top: 1px solid var(--p5-border);
}
.lphome-audience-head-block {
margin: 0 0 26px;
padding: 0;
}
.lphome-audience .lphome-section-title {
margin: 0 0 8px;
font-size: clamp(36px, 4vw, 64px);
font-weight: 900;
letter-spacing: 0;
line-height: 1.02;
text-align: left;
}
.lphome-audience .lphome-section-sub {
margin: 0;
padding: 0;
text-align: left;
font-size: 14px;
color: var(--p5-muted);
line-height: 1.6;
max-width: 720px;
}
.lphome-audience-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 1fr; /* equal-height rows so cards align even when descriptions differ in length */
gap: 18px;
}
.lphome-audience-card {
min-width: 0;
height: 100%; /* stretch to grid cell so 4 cards stay equal height when desc lengths differ */
display: flex;
flex-direction: column-reverse;
background: var(--p5-card);
border: 1px solid var(--p5-border);
border-radius: 0;
overflow: hidden;
box-shadow: none;
transition: border-color 0.15s;
}
.lphome-audience-card:hover {
border-color: var(--p5-border-strong);
}
.lphome-audience-body {
min-height: 190px;
flex: 1; /* fill remaining height under the fixed-aspect media; tags get pushed to bottom via margin-top:auto */
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 16px 14px;
}
.lphome-audience-head {
display: flex;
align-items: flex-start;
gap: 10px;
}
.lphome-audience-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--p5-red);
}
.lphome-audience-titlebox {
display: flex;
flex-direction: column;
min-width: 0;
}
.lphome-audience-title {
font-size: 18px;
font-weight: 800;
color: var(--p5-text);
line-height: 1.35;
}
.lphome-audience-role {
font-size: 12px;
color: var(--p5-muted);
margin-top: 3px;
line-height: 1.4;
}
.lphome-audience-desc {
font-size: 13px;
color: var(--p5-text-secondary);
line-height: 1.65;
margin: 0;
}
.lphome-audience-tags {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--p5-border);
color: var(--p5-muted);
font-size: 12px;
}
.lphome-audience-tags span {
font-size: 12px;
color: var(--p5-muted);
}
.lphome-audience-media {
position: relative;
width: 100%;
aspect-ratio: 1 / 0.78;
overflow: hidden;
background: var(--p5-card);
border-bottom: 1px solid var(--p5-border);
}
.lphome-audience-media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 0.2s ease;
}
.lphome-audience-card:hover .lphome-audience-media img {
transform: scale(1.035);
}
@media (max-width: 1100px) {
.lphome-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.lphome-audience-grid { grid-template-columns: 1fr; }
}
/* CTA banner — centered minimal (restored to pre-Phase-1) */
/* CTA banner — aligned with lp-showcase .lpsc-cta: 2-column (copy / button)
on white card, large h2 with red emphasis word, red primary button. */
.lphome-cta-banner {
background: var(--p5-card);
border-top: 1px solid var(--p5-border);
padding: 64px 32px 88px;
}
.lphome-cta-banner-inner {
max-width: 1440px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.lphome-cta-banner-copy {
display: flex;
flex-direction: column;
}
.lphome-cta-banner-actions {
flex-shrink: 0;
}
.lphome-cta-banner-title {
font-size: clamp(32px, 3.6vw, 52px);
font-weight: 900;
color: var(--p5-text);
margin: 0;
letter-spacing: -0.025em;
line-height: 1.05;
max-width: 680px;
}
.lphome-cta-banner-sub {
font-size: 14.5px;
color: var(--p5-muted);
margin: 10px 0 0;
line-height: 1.7;
max-width: 520px;
}
.lphome-cta-banner .lphome-btn-primary {
padding: 14px 22px;
font-size: 15px;
}
/* Solid neutral CTA — black-on-white in light, inverted in dark.
* Matches the "Suno-style" minimal-CTA pattern requested in the screenshot. */
.lphome-btn-dark {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 24px;
background: #1a1a1a;
color: #fff !important;
font-size: 14px; font-weight: 600;
border: none; border-radius: 0; cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}
.lphome-btn-dark:hover { background: #000; }
:root[data-page="lp"][data-theme="dark"] .lphome-btn-dark {
background: #fff;
color: #1a1a1a !important;
}
:root[data-page="lp"][data-theme="dark"] .lphome-btn-dark:hover { background: #f0f0f0; }
/* ── Footer ─────────────────────────────────────── */
.lphome-footer {
background: var(--p5-bg);
padding: 56px 32px 24px;
}
.lphome-footer-grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
gap: 40px;
}
.lphome-footer-brand .lphome-logo img { height: 28px; margin-bottom: 14px; }
.lphome-footer-slogan {
font-size: 12px;
color: var(--p5-muted);
margin: 0 0 18px;
line-height: 1.7;
max-width: 280px;
}
.lphome-footer-socials {
list-style: none; padding: 0; margin: 0;
display: flex; gap: 14px;
}
.lphome-footer-socials a {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border: 1px solid var(--p5-border);
color: var(--p5-text-secondary);
}
.lphome-footer-socials a:hover {
color: var(--p5-red);
border-color: var(--p5-red);
}
/* Footer controls — theme + lang 从 header 移到 footer brand 列。
lang dropdown 向上展开避免被 footer 底部裁切。 */
.lphome-footer-controls {
margin-top: 18px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.lphome-footer-controls .lphome-lang-dropdown {
top: auto;
bottom: calc(100% + 8px);
}
.lphome-footer-h {
font-size: 13px; font-weight: 700;
color: var(--p5-text);
margin: 0 0 14px;
letter-spacing: 0.2px;
}
.lphome-footer-col ul {
list-style: none; padding: 0; margin: 0;
}
.lphome-footer-col li { margin-bottom: 8px; }
.lphome-footer-col a {
font-size: 12px;
color: var(--p5-muted);
line-height: 1.6;
}
.lphome-footer-col a:hover { color: var(--p5-red); }
/* NEW marker — red dot beside fresh footer links (per YouMind reference) */
.lphome-footer-new {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--p5-red);
margin-left: 6px;
vertical-align: middle;
}
.lphome-footer-bottom {
max-width: 1280px;
margin: 36px auto 0;
padding-top: 18px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
font-size: 11px;
color: var(--p5-muted);
flex-wrap: wrap;
}
.lphome-footer-legal {
display: flex; gap: 18px;
}
.lphome-footer-legal a:hover { color: var(--p5-red); }
/* ── Responsive (1100 / 820 / 560) ──────────────── */
@media (max-width: 1100px) {
.lphome-hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.lphome-hero-collage {
max-width: 760px;
height: 480px;
}
.lphome-usecases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lphome-footer-grid { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
.lphome-header { padding: 12px 18px; gap: 12px; flex-wrap: wrap; }
.lphome-nav { gap: 18px; order: 3; width: 100%; justify-content: center; padding-top: 8px; border-top: 1px solid var(--p5-border); margin-top: 4px; }
.lphome-nav-link.is-active::after { display: none; }
.lphome-hero { padding: 40px 18px 32px; }
.lphome-hero-collage {
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
height: 520px;
}
.lphome-c-1 { grid-column: 1 / span 3; grid-row: 1; }
.lphome-c-2 { grid-column: 4 / span 3; grid-row: 1; }
.lphome-c-3 { grid-column: 1 / span 3; grid-row: 2 / span 2; }
.lphome-c-4 { grid-column: 4 / span 3; grid-row: 2 / span 2; }
.lphome-section-head, .lphome-tabs, .lphome-strip-wrap, .lphome-tcards-wrap { padding: 0 18px; }
.lphome-showcase, .lphome-testimonials { padding-left: 0; padding-right: 0; }
.lphome-usecases { padding: 48px 18px; }
.lphome-cta-banner { padding: 44px 18px 44px; }
.lphome-footer { padding: 48px 18px 24px; }
.lphome-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 560px) {
.lphome-h1 { font-size: clamp(28px, 8vw, 36px); }
.lphome-hero-chips { grid-template-columns: 1fr; gap: 14px; }
.lphome-hero-collage {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(4, 150px);
gap: 10px;
height: auto;
padding: 0;
overflow: hidden;
}
.lphome-collage-cell {
position: relative;
width: 100%;
height: 100%;
display: block;
}
.lphome-c-1,
.lphome-c-2,
.lphome-c-3,
.lphome-c-4 {
grid-column: 1;
}
.lphome-c-1 { grid-row: 1; }
.lphome-c-2 { grid-row: 2; }
.lphome-c-3 { grid-row: 3; }
.lphome-c-4 { grid-row: 4; }
.lphome-usecases-grid { grid-template-columns: 1fr; }
.lphome-show-card { flex-basis: 180px; }
.lphome-tcard { flex-basis: 240px; }
.lphome-footer-grid { grid-template-columns: 1fr; }
.lphome-footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ── Homepage editorial refresh (2026-05) ───────── */
.lphome-hero {
padding: 58px 32px 42px;
background: var(--p5-bg);
border-bottom: 1px solid var(--p5-border);
}
.lphome-hero-grid,
.lphome-workflow-grid,
.lphome-showcase-head,
.lphome-showcase .lphome-tabs,
.lphome-show-grid,
.lphome-audience-head-block,
.lphome-audience-grid {
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
.lphome-hero-grid {
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.85fr);
gap: 64px;
align-items: start;
}
.lphome-hero-left {
padding-top: 0;
}
.lphome-h1 {
max-width: 760px;
margin: 0 0 22px;
font-size: clamp(56px, 7vw, 116px);
line-height: 1.1;
font-weight: 900;
letter-spacing: 0;
}
/* Direct-child selector so nested emphasis spans (.lphome-h-em) keep their
own colour — descendant selector would cascade through and force every
nested span back to --p5-text. */
.lphome-h1 > span {
color: var(--p5-text);
}
.lphome-lede {
max-width: 680px;
margin: 0;
color: var(--p5-text-secondary);
font-size: 17px;
line-height: 1.82;
}
.lphome-hero-side {
justify-self: end;
max-width: 560px;
padding-top: 36px;
}
.lphome-hero-side-copy {
margin: 0 0 34px;
color: var(--p5-text-secondary);
font-size: 16px;
line-height: 1.9;
}
.lphome-hero-side .lphome-cta-row {
margin: 0;
gap: 22px;
}
.lphome-hero-side .lphome-btn-primary,
.lphome-hero-side .lphome-btn-ghost {
min-width: 210px;
min-height: 58px;
padding: 0 28px;
justify-content: center;
font-size: 17px;
}
.lphome-hero-side .lphome-btn-primary {
color: var(--p5-text-inverse);
background: var(--p5-red);
border-color: var(--p5-red);
}
/* Workflow row — compact 4 cards (cover top + body bottom: icon + copy + arrow).
* Restored to user's pre-Phase-1 layout. */
.lphome-workflow-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 40px;
}
.lphome-workflow-card {
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--p5-card);
border: 1px solid var(--p5-border);
color: var(--p5-text);
}
.lphome-workflow-card:hover {
border-color: var(--p5-border-strong);
}
.lphome-workflow-media {
position: relative;
height: clamp(220px, 17vw, 320px);
overflow: hidden;
background: var(--p5-bg-alt);
border-bottom: 1px solid var(--p5-border);
}
.lphome-workflow-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.28s ease;
}
.lphome-workflow-card:hover .lphome-workflow-media img {
transform: scale(1.035);
}
/* Showcase trigger pill — top-right overlay on workflow card media.
role="button" span (not