/* ═════════════════════════════════════ 欢迎页 landing.css — Risk Zoo 落地页 纯前端、零接口、零游客额度。 设计系统继承 app.css 的「墨色 × 香槟金」变量。 显隐由 控制（见 landing-ui.js 同步写入）： · 无属性 / 属性缺失 → 完整 landing（游客/首访默认态） · data-lp="return" → 紧凑欢迎条 #lpWelcome，隐藏 #landing · data-lp="expanded" → 欢迎条 + 展开的 #landing ═══════════════════════════════════ */ /* ── 默认：完整 landing 可见，紧凑条隐藏 ── */ #lpWelcome { display: none; } /* ── 回访 / 登录态：紧凑欢迎条可见，landing 收起 ── */ html[data-lp="return"] #lpWelcome, html[data-lp="expanded"] #lpWelcome { display: flex; } html[data-lp="return"] #landing { display: none; } /* ── Hero ── */ .lp-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 3vw, 48px); padding: 56px 0 36px; border-bottom: 1px solid var(--hairline); margin-bottom: 32px; } .lp-hero-copy { min-width: 0; } .lp-hero h1 { font-family: var(--font-serif); font-size: clamp(30px, 5vw, 46px); font-weight: 600; line-height: 1.18; letter-spacing: 0.01em; margin: 14px 0 18px; max-width: 18em; } .lp-hero h1 em { color: var(--gold); font-style: normal; } .lp-lede { max-width: 60ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; margin-bottom: 24px; } .lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } /* ── Hero 右侧组合优化视觉图 ── */ .lp-hero-visual { min-width: 0; width: 100%; } .lp-opt-card { position: relative; width: 100%; max-width: 720px; margin-left: auto; background: transparent; border: none; box-shadow: none; padding: 0; } .lp-opt-plot { width: 100%; } .lp-opt-svg { display: block; width: 100%; height: auto; overflow: visible; } /* 坐标标题已移除（坐标系全透明） */ /* 外围资产标签（低对比暖白） */ .lp-opt-outer-label { fill: rgba(241,239,233,0.55); font-size: 9px; font-family: var(--font-sans, Inter, sans-serif); } /* 入场动画（一次性、克制；reduced-motion 直接显示最终态） */ .lp-opt-svg .lp-anim-scatter { opacity: 0; transform: translateY(4px); transition: opacity .5s ease, transform .5s ease; } .lp-opt-svg.lp-opt-ready .lp-anim-scatter { opacity: 1; transform: none; } .lp-opt-svg .lp-anim-marker { opacity: 0; transition: opacity .35s ease; } .lp-opt-svg.lp-opt-markers .lp-anim-marker { opacity: 1; } .lp-opt-svg .lp-anim-outer { opacity: 0; transition: opacity .35s ease; } .lp-opt-svg.lp-opt-outer .lp-anim-outer { opacity: 1; } /* ── 按钮（金仅作强调色，其余为墨色描边/填充） ── */ .lp-btn { font-family: inherit; font-size: 14px; font-weight: 500; border-radius: 10px; padding: 11px 20px; cursor: pointer; border: 1px solid transparent; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; } .lp-btn:active { transform: translateY(1px); } .lp-btn-gold { background: linear-gradient(135deg, var(--gold-hi), var(--gold)); color: #1a1408; border-color: transparent; box-shadow: 0 6px 18px rgba(200,162,94,0.22); } .lp-btn-gold:hover { background: linear-gradient(135deg, #e6c98f, var(--gold-hi)); } .lp-btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--hairline-strong); } .lp-btn-quiet:hover { color: var(--ink); border-color: var(--gold); } .lp-btn-lg { padding: 14px 26px; font-size: 15px; } /* ── 紧凑欢迎条 ── */ .lp-welcome { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 18px; margin: 22px 0 8px; } .lp-welcome-text { color: var(--ink-2); font-size: 14px; margin: 0; } .lp-welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ── Bento 能力区 ── */ .lp-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 8px 0 40px; } .lp-tile { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; } .lp-tile h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .lp-tile p { color: var(--ink-2); font-size: 13.5px; line-height: 1.65; margin: 0; } .lp-tile-wide { grid-column: span 3; background: radial-gradient(900px 320px at 85% -20%, rgba(200,162,94,0.08), transparent 60%), var(--panel); } .lp-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .lp-tile-head h2 { font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--ink); } .lp-tile-sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.65; margin: 0 0 14px; } .lp-badge { flex: none; font-size: 11px; letter-spacing: 0.04em; color: var(--gold-hi); background: var(--gold-dim); border: 1px solid rgba(200,162,94,0.28); padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .lp-note { color: var(--ink-3); font-size: 12.5px; line-height: 1.6; margin: 14px 0 0; } /* ── 有效前沿缩略图（静态 SVG，由 landing-ui.js 渲染） ── */ .lp-frontier { width: 100%; aspect-ratio: 2 / 1; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; } .lp-frontier svg { display: block; width: 100%; height: 100%; } /* ── 指标 dl ── */ .lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 4px; } .lp-stats div { background: var(--panel-2); border-radius: 8px; padding: 10px 12px; } .lp-stats dt { font-size: 11px; color: var(--ink-3); letter-spacing: 0.03em; margin-bottom: 4px; } .lp-stats dd { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.1; } .lp-stats dd small { font-size: 12px; color: var(--ink-2); font-family: var(--font-sans); font-weight: 400; } /* ── 信任位 ── */ .lp-trust { padding: 30px 0; border-top: 1px solid var(--hairline); } .lp-trust h2 { font-family: var(--font-serif); font-size: clamp(22px, 3.4vw, 28px); font-weight: 600; color: var(--ink); margin-bottom: 14px; max-width: 22em; } .lp-trust p { color: var(--ink-2); font-size: 15px; line-height: 1.75; max-width: 68ch; margin: 0 0 10px; } /* ── 三步 ── */ .lp-steps { padding: 8px 0 44px; } .lp-steps h2 { font-family: var(--font-serif); font-size: clamp(22px, 3.4vw, 28px); font-weight: 600; color: var(--ink); margin-bottom: 18px; } .lp-step-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .lp-step-list li { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; } .lp-step-n { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--gold); letter-spacing: 0.04em; } .lp-step-list b { color: var(--ink); font-size: 16px; font-weight: 600; } .lp-step-list li span:last-child { color: var(--ink-2); font-size: 13.5px; line-height: 1.65; } /* ── 轻量入场动画（尊重 prefers-reduced-motion） ── */ .lp-hero, .lp-bento, .lp-trust, .lp-steps { animation: lpFade .5s ease both; } @keyframes lpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ═════════════════════════════════════ 响应式：768px / 移动端 ═══════════════════════════════════ */ @media (max-width: 860px) { .lp-hero { grid-template-columns: 1fr; gap: 28px; } .lp-hero-visual { width: min(100%, 720px); margin: 0 auto; } .lp-opt-card { max-width: none; margin: 0; } } @media (max-width: 768px) { .lp-bento { grid-template-columns: repeat(2, 1fr); } .lp-tile-wide { grid-column: span 2; } .lp-step-list { grid-template-columns: 1fr; } .lp-stats { grid-template-columns: repeat(2, 1fr); } .lp-hero { padding: 40px 0 28px; } .lp-hero-visual { max-width: 600px; } .lp-welcome { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { .lp-bento { grid-template-columns: 1fr; } .lp-tile-wide { grid-column: span 1; } .lp-stats { grid-template-columns: repeat(2, 1fr); } .lp-lede { font-size: 14.5px; } .lp-cta .lp-btn { flex: 1 1 auto; text-align: center; } .lp-opt-card { padding: 0; } .lp-opt-outer-label-tlt { display: none; } } /* 尊重「减少动态效果」系统偏好：关闭所有入场动画与过渡 */ @media (prefers-reduced-motion: reduce) { .lp-hero, .lp-bento, .lp-trust, .lp-steps { animation: none; } .lp-btn, .lp-tile, .lp-step-list li { transition: none; } .lp-opt-svg .lp-anim-scatter, .lp-opt-svg .lp-anim-marker, .lp-opt-svg .lp-anim-outer { opacity: 1; transform: none; transition: none; } } /* ═════════════════════════════════════ Web Threads 背景层（原生 WebGL2，js/web-threads-bg.js 注入） 仅覆盖 Hero（.lp-hero），不覆盖 #landing 其余区域与 #inputSection。 canvas / veil 由脚本运行时注入 .lp-hero，静态 HTML 不含这些节点。 ═══════════════════════════════════ */ /* 背景 canvas：置于 Hero 底层、不可交互 */ .wt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; } /* 遮罩：横向渐变，仅保护 Hero 左侧文字可读性； 左侧文字区域遮罩较强（线程更暗、更细），向右逐渐透明， 使右侧线程清晰展开。不再以从上到下的主遮罩作为主要保护方式。 */ .wt-veil { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(13,15,20,0.85) 0%, rgba(13,15,20,0.55) 18%, rgba(13,15,20,0.20) 42%, rgba(13,15,20,0.0) 64%); } /* Hero 正文位于背景与遮罩之上，确保文字/按钮可点、可读 */ .lp-hero > *:not(.wt-canvas):not(.wt-veil) { position: relative; z-index: 2; }