leefer
a7a425375b
通过playwright-core+系统Edge截图自查发现并修复: 1. glowTexture缺省size致createRadialGradient(NaN)全场景崩溃 2. 主光源在月背=月面纯剪影 → 改前左上(参考图光向) 3. 碎石死黑 → 冷补光fillCold 4. 裂缝像荧光管 → 减细减暗内嵌化 5. 月晕雾洗白纹理 → opacity 0.35→0.16 6. 撕裂太浅 → 深度2.8→3.4+撕裂缘更参差 7. 碎石贴月 → 拖带拉宽±48/向外3-18 8. 银河不可见 → skybox转向1.35/0.3 9. CTA文字被亮月面淹没 → 相机24→26.5+文字暗底 工具: 新增node静态服务器(替代僵死的python)+shoot.js截图工作流
412 lines
13 KiB
CSS
412 lines
13 KiB
CSS
/* ============================================================
|
|
晟算科技 · 太空主题层
|
|
深空沉浸 + 玻璃面板 + 腐化标题特效
|
|
在 style.css 之后加载,覆盖太空世界观样式
|
|
============================================================ */
|
|
|
|
/* === 太空配色覆盖 === */
|
|
:root {
|
|
--bg-deep: #02030a;
|
|
--bg-dark: #05060f;
|
|
--bg-card: rgba(13, 17, 30, 0.62);
|
|
--bg-card-hover: rgba(18, 24, 40, 0.7);
|
|
--border-subtle: rgba(160, 180, 255, 0.09);
|
|
--border-glow: rgba(77, 255, 166, 0.3);
|
|
--text-primary: #eef1fa;
|
|
--text-secondary: #96a0bc;
|
|
--text-muted: #5b6480;
|
|
--code-green: #4dffa6;
|
|
--code-dim: #1fbf7a;
|
|
--sun-warm: #fff3d6;
|
|
--nebula-indigo: rgba(88, 70, 220, 0.1);
|
|
--nebula-blue: rgba(40, 90, 220, 0.1);
|
|
|
|
--blue: #4dffa6;
|
|
--blue-glow: #8affc9;
|
|
--cyan: #7dd8ff;
|
|
--cyan-dark: #3a9bc9;
|
|
--purple: #a78bff;
|
|
--purple-glow: #c9b3ff;
|
|
--green: #4dffa6;
|
|
--red: #ff4455;
|
|
--orange: #ffb020;
|
|
|
|
--shadow-glow: 0 0 40px rgba(77, 255, 166, 0.12);
|
|
--shadow-glow-strong: 0 0 80px rgba(77, 255, 166, 0.18);
|
|
}
|
|
|
|
html, body {
|
|
background: var(--bg-deep);
|
|
}
|
|
|
|
/* === 太空画布层 === */
|
|
#spaceCanvas {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
#spaceCanvas canvas { display: block; }
|
|
|
|
/* WebGL兜底: CSS星空 */
|
|
.space-fallback #spaceCanvas {
|
|
background:
|
|
radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.9), transparent),
|
|
radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.7), transparent),
|
|
radial-gradient(2px 2px at 60% 20%, rgba(200,220,255,0.8), transparent),
|
|
radial-gradient(1px 1px at 80% 50%, rgba(255,255,255,0.6), transparent),
|
|
radial-gradient(1.5px 1.5px at 90% 80%, rgba(255,240,200,0.7), transparent),
|
|
radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,0.5), transparent),
|
|
radial-gradient(2.5px 2.5px at 70% 85%, rgba(255,255,255,0.6), transparent),
|
|
radial-gradient(1px 1px at 30% 90%, rgba(200,220,255,0.5), transparent);
|
|
background-color: var(--bg-deep);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
/* === 星云环境光 === */
|
|
.nebula {
|
|
position: fixed;
|
|
border-radius: 50%;
|
|
filter: blur(140px);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.nebula-1 { width: 700px; height: 700px; background: var(--nebula-indigo); top: -15%; left: -10%; }
|
|
.nebula-2 { width: 600px; height: 600px; background: var(--nebula-blue); bottom: -20%; right: -8%; }
|
|
|
|
/* === BOOT 加载屏 === */
|
|
#spaceBoot {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: #02030a;
|
|
z-index: 100000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
transition: opacity 0.9s ease, visibility 0.9s;
|
|
}
|
|
#spaceBoot.hide { opacity: 0; visibility: hidden; pointer-events: none; }
|
|
#spaceBoot .boot-scope {
|
|
width: 120px; height: 120px;
|
|
border: 1px solid rgba(77, 255, 166, 0.35);
|
|
border-radius: 50%;
|
|
margin-bottom: 40px;
|
|
position: relative;
|
|
animation: scopeSpin 3s linear infinite;
|
|
}
|
|
#spaceBoot .boot-scope::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 18px;
|
|
border: 1px dashed rgba(77, 255, 166, 0.25);
|
|
border-radius: 50%;
|
|
}
|
|
#spaceBoot .boot-scope::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
width: 6px; height: 6px;
|
|
background: var(--code-green);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: 0 0 14px var(--code-green);
|
|
}
|
|
#spaceBoot .boot-cross {
|
|
position: absolute;
|
|
top: 50%; left: -30%;
|
|
width: 160%; height: 1px;
|
|
background: rgba(77, 255, 166, 0.2);
|
|
}
|
|
#spaceBoot .boot-cross.v { transform: rotate(90deg); }
|
|
@keyframes scopeSpin { to { transform: rotate(360deg); } }
|
|
|
|
#spaceBoot .boot-terminal {
|
|
width: 480px;
|
|
max-width: 88vw;
|
|
font-family: var(--font-mono);
|
|
font-size: 14px;
|
|
line-height: 2.1;
|
|
color: var(--text-muted);
|
|
min-height: 190px;
|
|
}
|
|
#spaceBoot .terminal-prompt { color: var(--text-secondary); }
|
|
#spaceBoot .terminal-text.ok { color: var(--code-green); }
|
|
#spaceBoot .terminal-text.log-error { color: var(--red); }
|
|
#spaceBoot .terminal-line { animation: fadeIn 0.25s ease; }
|
|
|
|
#spaceBoot .boot-progress {
|
|
width: 480px;
|
|
max-width: 88vw;
|
|
height: 2px;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
margin-top: 28px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
#spaceBootBar {
|
|
height: 100%;
|
|
width: 0%;
|
|
background: linear-gradient(90deg, var(--code-dim), var(--code-green));
|
|
box-shadow: 0 0 12px rgba(77, 255, 166, 0.6);
|
|
transition: width 0.3s ease;
|
|
}
|
|
#spaceBoot .boot-tag {
|
|
margin-top: 20px;
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 3px;
|
|
color: var(--text-muted);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* === 玻璃面板(内容浮在太空上) === */
|
|
.card, .teaser-card, .feature-card, .belief-card, .philosophy-item,
|
|
.structure-block, .contact-card-dark, .contact-form-dark,
|
|
.chaos-card, .teaser-main, .teaser-side-item, .about-visual-block {
|
|
background: var(--bg-card);
|
|
backdrop-filter: blur(18px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(18px) saturate(140%);
|
|
border: 1px solid var(--border-subtle);
|
|
}
|
|
.card:hover, .teaser-card:hover, .feature-card:hover,
|
|
.belief-card:hover, .philosophy-item:hover, .chaos-card:hover {
|
|
border-color: rgba(77, 255, 166, 0.22);
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), var(--shadow-glow);
|
|
}
|
|
|
|
/* === 区块在太空中的层级 === */
|
|
.section, .page-hero, .cta-section, .footer { position: relative; z-index: 2; }
|
|
.footer { background: rgba(3, 4, 10, 0.85); backdrop-filter: blur(20px); }
|
|
|
|
/* === Hero(太空版) === */
|
|
.space-hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
.space-hero .container, .space-hero a, .space-hero button { pointer-events: auto; }
|
|
.space-hero-content {
|
|
max-width: 640px;
|
|
padding: 120px 24px 0;
|
|
}
|
|
|
|
/* === FATAL ERROR 徽章 === */
|
|
.fatal-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 20px;
|
|
background: rgba(255, 68, 85, 0.1);
|
|
border: 1px solid rgba(255, 68, 85, 0.35);
|
|
border-radius: 4px;
|
|
color: var(--red);
|
|
font-family: var(--font-mono);
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 28px;
|
|
animation: fatalBlink 1.6s steps(2) infinite;
|
|
}
|
|
.fatal-badge .fatal-dot {
|
|
width: 8px; height: 8px;
|
|
background: var(--red);
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 12px var(--red);
|
|
}
|
|
@keyframes fatalBlink {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(255, 68, 85, 0); }
|
|
50% { opacity: 0.75; box-shadow: 0 0 30px rgba(255, 68, 85, 0.25); }
|
|
}
|
|
|
|
/* ============================================================
|
|
腐化标题特效 —— 标题本身就是一个正在发生的bug
|
|
============================================================ */
|
|
.corrupt-wrap {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
.corrupt-title {
|
|
font-size: clamp(44px, 8vw, 84px);
|
|
font-weight: 900;
|
|
color: var(--text-primary);
|
|
line-height: 1.15;
|
|
letter-spacing: -1px;
|
|
position: relative;
|
|
font-family: var(--font-sans);
|
|
}
|
|
/* 色差重影层 */
|
|
.corrupt-title::before,
|
|
.corrupt-title::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.corrupt-title::before {
|
|
color: #ff2255;
|
|
animation: chromaA 3.7s steps(1) infinite;
|
|
}
|
|
.corrupt-title::after {
|
|
color: #22ddff;
|
|
animation: chromaB 3.7s steps(1) infinite;
|
|
}
|
|
@keyframes chromaA {
|
|
0%, 91%, 100% { opacity: 0; transform: translate(0, 0); }
|
|
92% { opacity: 0.75; transform: translate(-5px, 2px); }
|
|
94% { opacity: 0.5; transform: translate(4px, -2px); clip-path: inset(20% 0 40% 0); }
|
|
96% { opacity: 0.8; transform: translate(-3px, 0); clip-path: inset(60% 0 10% 0); }
|
|
98% { opacity: 0.4; transform: translate(5px, 1px); }
|
|
}
|
|
@keyframes chromaB {
|
|
0%, 91%, 100% { opacity: 0; transform: translate(0, 0); }
|
|
92% { opacity: 0.75; transform: translate(5px, -2px); }
|
|
94% { opacity: 0.5; transform: translate(-4px, 2px); clip-path: inset(30% 0 30% 0); }
|
|
96% { opacity: 0.8; transform: translate(3px, 0); clip-path: inset(10% 0 60% 0); }
|
|
98% { opacity: 0.4; transform: translate(-5px, -1px); }
|
|
}
|
|
/* 屏幕震颤(偶发) */
|
|
.corrupt-wrap.shake {
|
|
animation: screenShake 0.22s linear;
|
|
}
|
|
@keyframes screenShake {
|
|
0% { transform: translate(0, 0); }
|
|
20% { transform: translate(-4px, 2px) skewX(-1deg); }
|
|
40% { transform: translate(4px, -2px) skewX(1deg); }
|
|
60% { transform: translate(-3px, -1px); }
|
|
80% { transform: translate(3px, 1px); }
|
|
100% { transform: translate(0, 0); }
|
|
}
|
|
/* 腐化字符样式 */
|
|
.corrupt-char {
|
|
display: inline-block;
|
|
position: relative;
|
|
transition: color 0.05s;
|
|
}
|
|
.corrupt-char.glitching {
|
|
color: var(--red);
|
|
text-shadow: 0 0 20px rgba(255, 68, 85, 0.7);
|
|
}
|
|
|
|
/* === 错误代码副标题 === */
|
|
.error-code-line {
|
|
font-family: var(--font-mono);
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
letter-spacing: 1px;
|
|
margin-top: 26px;
|
|
line-height: 2;
|
|
}
|
|
.error-code-line .ec-key { color: var(--text-secondary); }
|
|
.error-code-line .ec-val { color: var(--code-green); }
|
|
.error-code-line .ec-err { color: var(--red); }
|
|
|
|
/* === CTA文字暗底(亮月面背景下的可读性) === */
|
|
.cta-content h2, .cta-content p {
|
|
text-shadow: 0 2px 18px rgba(2, 4, 8, 0.9), 0 0 40px rgba(2, 4, 8, 0.6);
|
|
}
|
|
.cta-content {
|
|
position: relative;
|
|
}
|
|
.cta-content::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -60px -40px;
|
|
background: radial-gradient(ellipse at center, rgba(2, 4, 8, 0.55), transparent 70%);
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* === Hero 右侧留白给月亮 === */
|
|
@media (min-width: 900px) {
|
|
.space-hero-content { margin-left: 6vw; }
|
|
}
|
|
|
|
/* === 滚动场景在太空中的适配 === */
|
|
.scroll-scene .scene-sticky {
|
|
background: transparent;
|
|
}
|
|
.scene-line .line-big { text-shadow: 0 4px 40px rgba(0, 0, 0, 0.8); }
|
|
|
|
/* === 诊断报告面板 === */
|
|
.chaos-card { border-color: rgba(255, 68, 85, 0.14); }
|
|
.chaos-card::before { background: linear-gradient(90deg, transparent, var(--red), transparent); }
|
|
|
|
/* === 碎片修复舱卡片 === */
|
|
.frag-card .sys-status.debug { color: var(--code-green); }
|
|
.frag-card .sys-status.debug::before { background: var(--code-green); box-shadow: 0 0 10px var(--code-green); }
|
|
|
|
/* === 按钮太空化 === */
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #1fbf7a, #0d8f5a);
|
|
box-shadow: 0 0 30px rgba(77, 255, 166, 0.25);
|
|
}
|
|
.btn-primary:hover { box-shadow: 0 0 50px rgba(77, 255, 166, 0.45); }
|
|
.btn-outline {
|
|
border-color: rgba(160, 180, 255, 0.2);
|
|
color: var(--text-primary);
|
|
}
|
|
.btn-outline:hover {
|
|
border-color: var(--code-green);
|
|
background: rgba(77, 255, 166, 0.06);
|
|
box-shadow: 0 0 30px rgba(77, 255, 166, 0.15);
|
|
}
|
|
|
|
/* === 标签/徽章色 === */
|
|
.section-label { color: var(--code-green); }
|
|
.status-vision { background: rgba(125, 216, 255, 0.1); color: var(--cyan); border-color: rgba(125, 216, 255, 0.2); }
|
|
.status-coming { background: rgba(167, 139, 255, 0.1); color: var(--purple); border-color: rgba(167, 139, 255, 0.2); }
|
|
.indicator-purple { background: var(--purple); box-shadow: 0 0 12px var(--purple); }
|
|
.indicator-cyan { background: var(--code-green); box-shadow: 0 0 12px var(--code-green); }
|
|
|
|
/* === 进度条(修复能量) === */
|
|
.build-progress-fill {
|
|
background: linear-gradient(90deg, var(--code-dim), var(--code-green));
|
|
box-shadow: 0 0 15px rgba(77, 255, 166, 0.5);
|
|
}
|
|
|
|
/* === 加密块 === */
|
|
.encrypted-block { border-color: rgba(77, 255, 166, 0.2); }
|
|
.encrypted-line { color: var(--code-green); }
|
|
.encrypted-block::after { color: var(--orange); }
|
|
|
|
/* === 导航栏太空化 === */
|
|
.header { background: rgba(2, 3, 10, 0.72); }
|
|
.nav-link.active { color: var(--code-green); background: rgba(77, 255, 166, 0.08); }
|
|
.nav-cta { background: linear-gradient(135deg, #1fbf7a, #0d8f5a); box-shadow: 0 0 20px rgba(77, 255, 166, 0.2); }
|
|
.logo-icon { background: linear-gradient(135deg, #1fbf7a, #0a6e46); box-shadow: 0 0 20px rgba(77, 255, 166, 0.25); }
|
|
|
|
/* === 滚动进度条 === */
|
|
.scroll-progress { background: linear-gradient(90deg, var(--code-dim), var(--code-green), var(--cyan)); }
|
|
|
|
/* === 滚动场景角标配色 === */
|
|
.chapter-marker .chapter-num { -webkit-text-stroke-color: rgba(77, 255, 166, 0.3); }
|
|
.chapter-marker .chapter-line { background: linear-gradient(90deg, rgba(77, 255, 166, 0.3), transparent); }
|
|
.scene-frame::before, .scene-frame::after,
|
|
.scene-frame .frame-corner-b, .scene-frame .frame-corner-c { border-color: rgba(77, 255, 166, 0.22); }
|
|
.scene-corner .big-pct { color: rgba(77, 255, 166, 0.5); }
|
|
.bg-giant-text { -webkit-text-stroke-color: rgba(160, 180, 255, 0.05); }
|
|
|
|
/* === 宣言高亮色 === */
|
|
.manifesto .highlight { color: var(--code-green); text-shadow: 0 0 30px rgba(77, 255, 166, 0.4); }
|
|
.scene-line .line-big .accent { color: var(--code-green); text-shadow: 0 0 40px rgba(77, 255, 166, 0.4); }
|
|
|
|
/* === CTA区 === */
|
|
.cta-section::before { background: transparent; }
|
|
|
|
/* === 自定义光标太空色 === */
|
|
.cursor-dot { background: var(--code-green); }
|
|
.cursor-ring { border-color: rgba(77, 255, 166, 0.4); }
|
|
.cursor-ring.hovering { border-color: rgba(77, 255, 166, 0.8); background: rgba(77, 255, 166, 0.05); }
|
|
|
|
/* === 入场初始状态(配合boot) === */
|
|
body:not(.space-ready) .space-hero-content,
|
|
body:not(.space-ready) .scroll-hint {
|
|
opacity: 0;
|
|
}
|
|
.space-hero-content { transition: opacity 1s ease 0.2s; }
|