/* ========================================================================== HERO · 浑天仪一镜到底 — armillary hero(071526 融合,替换原静态 hero) 来源: armillary-hero-prototype/prototype/armillary-scroll.html 内联样式的 适配版。与原型的差异(改这里前先读 armillary-hero-prototype/README.md): · :root token 不重复定义 — landing styles.css 同名同值(原型节点 20 勘核过), 只补 landing 缺的 --dur-base/--dur-slow; · 字体不再 @font-face — landing 已声明 Frutiger / Goldman Sans; · CTA dock 改用 landing 的 .btn 体系(进入平台=主 + 了解研究路径=辅); · .closing 区块样式不搬 — 收尾让位钩子挂在 faculty section 的类名上,仅供 JS; · 不隐藏系统滚动条(那是原型演示态); · 新增 #scroll>section 定位规则: fixed 画布 z0,后续 section 必须浮其上。 ========================================================================== */ :root { --dur-base: 200ms; --dur-slow: 320ms; } /* = --qy-dur-*,landing 尚未定义 */ /* fixed 画布坐在 z0: 驱动段之后的每个 section 与页脚都要浮到画布之上 (071526 审查修复: footer 在 main 之外,漏了会被画布整层盖住不可见不可点; 顺带让各 section 的 .wm 水印以自己的 section 为定位参照,与设计意图一致)。 */ #scroll > section, .foot { position: relative; } #webgl-stage { pointer-events: none; } /* 画布层无交互内容,永不截胡点击 */ /* nav 隐身(雇主 071626): 浑天仪在场时 nav 让位——hero 是一镜到底的沉浸段; 滚过驱动段(浑天仪退场)nav 才随后续内容出现。类名由浑天仪 JS 按 driver 视口位置逐帧驱动;降级态(no-webgl/无 JS)类名不会挂上,nav 常驻兜底。 transition 需整条重写(styles.css 的 .nav 已有三段过渡,追加会整体覆盖)。 */ .nav { transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), opacity .35s var(--ease), transform .35s var(--ease); } html.qy-hero-active .nav { opacity: 0; pointer-events: none; transform: translateY(-14px); } /* ---------- 固定纸面画布(留白光池 + 网格 + 文案跟随洞) ---------- */ #webgl-stage { position: fixed; inset: 0; z-index: 0; --grid-op: 1; --tint-op: .5; --hx: -999px; --hy: -999px; --hrx: 1px; --hry: 1px; --hop: 0; background: radial-gradient(72% 64% at 50% 45%, var(--surface) 0%, rgba(251,252,254,0) 64%), radial-gradient(130% 120% at 50% 45%, var(--canvas) 52%, #E2E8F2 100%); } #webgl-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 50% at 50% 44%, rgba(0,122,168,.09), transparent 70%); opacity: var(--tint-op); } #webgl-stage::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(11,24,39,.045) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(11,24,39,.045) 0 1px, transparent 1px 56px); opacity: var(--grid-op); -webkit-mask-image: radial-gradient(ellipse var(--hrx) var(--hry) at var(--hx) var(--hy), rgba(0,0,0,calc(1 - var(--hop))) 0%, rgba(0,0,0,calc(1 - .55 * var(--hop))) 58%, #000 100%), radial-gradient(70% 62% at 50% 45%, rgba(0,0,0,.4) 0%, rgba(0,0,0,.8) 55%, #000 100%); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse var(--hrx) var(--hry) at var(--hx) var(--hy), rgba(0,0,0,calc(1 - var(--hop))) 0%, rgba(0,0,0,calc(1 - .55 * var(--hop))) 58%, #000 100%), radial-gradient(70% 62% at 50% 45%, rgba(0,0,0,.4) 0%, rgba(0,0,0,.8) 55%, #000 100%); mask-composite: intersect; } #gl { position: relative; z-index: 1; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--dur-slow) var(--ease); } #gl.ready { opacity: 1; } /* 无 WebGL 降级: 渲染器建不起来时 JS 给 挂 no-webgl 后中止。 兜底 = 静态海报态: H1 与 CTA 强制可见(nav 常驻,转化不断)。 无 JS 同理: landing 的 lx-js 类只在 JS 运行时打上(见 index.html 内联脚本), 缺席即视为降级——与宿主"无 JS 全可见"哲学一致。 */ .no-webgl .copy-hero, html:not(.lx-js) .copy-hero { opacity: 1 !important; visibility: visible !important; } .no-webgl .cta-dock, html:not(.lx-js) .cta-dock { opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) !important; } /* 降级态跑道收成一屏(071526 审查修复): 动画死了,760vh 只剩 7 屏一模一样的 钉住海报,读作页面卡死——海报态直接紧接 faculty。 */ .no-webgl .driver, html:not(.lx-js) .driver { height: 100vh; height: 100svh; } /* 海报兜底成品图(仅 WebGL 真起不来的老机器/无 JS): 纸面上仍有仪器可看。 aspect-ratio 不支持的老浏览器优雅缺席, H1+CTA 不受影响。 */ .no-webgl .stage-pin::after, html:not(.lx-js) .stage-pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(74vw, 520px); height: min(74vw, 520px); transform: translate(-50%, -46%); /* 审查修复: 老 Chromium 无 aspect-ratio, 恰是海报态主力机 */ background: center/contain no-repeat url("assets/brand/armillary-poster.png"); } /* 底部纸幕: 终局渐入的纸面光,给 CTA 落区、软化大环底缘、接住下一节 */ #bottom-veil { position: absolute; left: 0; right: 0; bottom: 0; height: 24vh; z-index: 2; background: linear-gradient(to top, #FBFCFE 0%, rgba(251,252,254,.8) 42%, rgba(251,252,254,0) 100%); opacity: 0; pointer-events: none; } /* #flat 调试(验证工具): 跑道压扁+等高释放, 整页截屏走查 section 用 */ html.qy-flat .driver { height: 140px; } html.qy-flat .driver .stage-pin { display: none; } html.qy-flat .hero-tail { height: 40px; } html.qy-flat #webgl-stage, html.qy-flat #tags { display: none; } html.qy-flat .scene { min-height: auto; } /* hero 尾缓冲带: 终局定格后的呼吸位, 再滚一下才进 faculty */ .hero-tail { height: 58vh; position: relative; z-index: 1; } /* ---------- 滚动跑道 ---------- */ .driver { position: relative; height: 1150vh; z-index: 1; } /* 071626 雇主: scroll 太快→跑道加长, 一滚≈一拍 */ .stage-pin { position: sticky; top: 0; height: 100vh; pointer-events: none; } /* ---------- 逐幕文案 ---------- */ .act-copy { position: absolute; max-width: 400px; opacity: 0; pointer-events: none; transition: none; /* opacity 由滚动逐帧驱动 */ } .act-copy h1, .act-copy h2, .act-copy p { text-shadow: 0 0 2px rgba(251,252,254,.95), 0 0 10px rgba(251,252,254,.9), 0 0 26px rgba(251,252,254,.75); } /* (.kicker 规则已随首屏 kicker 移除清理 — 071626 审查) */ .act-copy h1, .act-copy h2 { font-family: var(--font-display); font-weight: 700; margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.2; letter-spacing: -.01em; } .act-copy p { font-size: var(--t-body); line-height: 1.7; color: var(--ink2); margin: 0; } .copy-hero { top: 16vh; left: 7vw; max-width: 480px; } /* 8 字一行不折(52px×8≈416) */ .copy-hero h1, .copy-hero h2 { font-size: clamp(32px, 4.2vw, 52px); } .copy-act1 { top: 16vh; right: 7vw; text-align: right; } .copy-act2 { bottom: 12vh; left: 7vw; } .copy-act3 { top: 18vh; left: 7vw; } .copy-act4 { top: 16vh; left: 7vw; } .copy-act5 { top: 12vh; left: 50%; transform: translateX(-50%); text-align: center; } .copy-act5 .slogan { font-family: var(--font-display); font-weight: 700; color: var(--ink1); font-size: clamp(16px, 1.6vw, 22px); letter-spacing: .3em; margin-top: 4px; text-indent: .3em; } /* ---------- 右侧「启研」书法水印 + 终幕 logo(071726 雇主) ---------- */ /* 拆 启/研 两字竖排贴右, 透明墨版(luma→alpha 抠底, 锁墨色)压仪器(#gl z:1)之下当 耳语; 仅首屏, 浑天仪开始拆环(~0.105)前由 JS(updateCopy 的 .hero-wm)淡净。 */ .hero-wm { position: absolute; opacity: 0; /* JS 每帧驱动: 顶部满(0.10), 拆环前淡出 */ filter: grayscale(1) brightness(1.02); pointer-events: none; user-select: none; } .hero-wm.wm-qi { top: 7vh; right: 6vw; width: min(30vw, 360px); } /* 启: 上 */ .hero-wm.wm-yan { top: 45vh; right: -7vw; width: min(38vw, 460px); } /* 研: 下, 更大, 贴右出血 */ @media (max-width: 900px) { .hero-wm { display: none; } } /* 窄屏挤仪器背后, 隐藏 */ /* 终幕「启研」书法 logo(替代

文字): 透明墨版, 压在明亮仪器上也无纸底白框 */ .copy-act5 .act5-wm { display: block; margin: 0 auto 8px; width: min(52vw, 300px); height: auto; } /* ---------- 终局 CTA dock(landing .btn 体系;接触影同绘图桌语言) ---------- */ .cta-dock { bottom: 9vh; left: 50%; text-align: center; max-width: none; display: flex; gap: 14px; justify-content: center; align-items: center; padding-bottom: 20px; } .cta-dock .btn { pointer-events: auto; } .cta-dock::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 74%; height: 16px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(11,24,39,.15), rgba(11,24,39,0) 72%); transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); pointer-events: none; } .cta-dock:hover::after { transform: translateX(-50%) scaleX(1.07); opacity: .78; } /* ---------- 环身投影标签 ---------- */ #tags { position: fixed; inset: 0; z-index: 3; pointer-events: none; } .ring-tag { position: absolute; top: 0; left: 0; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; white-space: nowrap; } .ring-tag .stem { width: 1px; height: 22px; background: var(--ink3); } .ring-tag .pill { display: flex; align-items: baseline; gap: 7px; background: rgba(255,255,255,.88); backdrop-filter: blur(4px); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; box-shadow: var(--sh-2, 0 6px 16px rgba(11,24,39,.06), 0 2px 5px rgba(11,24,39,.05)); } /* 投影标签是"仪器尺度",13/10.5 有意不入版面标尺(cinematic 例外条款) */ .ring-tag .cn { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink1); } .ring-tag .en { font-size: 10.5px; letter-spacing: .05em; color: var(--ink3); text-transform: uppercase; } .ring-tag i { width: 7px; height: 7px; border-radius: 50%; align-self: center; } /* ---------- 移动端(071626 雇主拍板: 手机也是动态满帧浑天仪, 非静态) ---------- 同一套 WebGL/叙事/零件; 这里只做排版与滚动人体工学: 跑道缩短(拇指划 11.5 屏太长)、文案不越屏、CTA 可换行、svh 抗地址栏收合。 */ @media (max-width: 760px) { .driver { height: 820vh; } .stage-pin { height: 100svh; } .act-copy { max-width: min(86vw, 400px); } .copy-hero { top: 12svh; left: 6vw; max-width: min(88vw, 480px); } .copy-hero h1, .copy-hero h2 { font-size: clamp(30px, 8.4vw, 40px); } .copy-act1 { top: 12svh; right: 6vw; } .copy-act2 { bottom: 14svh; left: 6vw; } .copy-act3 { top: 14svh; left: 6vw; } .copy-act4 { top: 12svh; left: 6vw; } .copy-act5 { width: 92vw; max-width: none; } /* 审查修复: 不被 .act-copy 的 max-width 夹住 */ .cta-dock { bottom: max(6svh, 22px); width: 100%; padding: 0 16px 18px; flex-wrap: wrap; gap: 10px; } /* 审查修复: 换行态单条接触影只垫第二行——移动端改每按钮自带投影 */ .cta-dock::after { display: none; } .cta-dock .btn { box-shadow: 0 6px 16px rgba(11,24,39,.10); } .ring-tag .en { display: none; } /* 手机文案增辉(071726 雇主截图: 深潜幕文字压瓷球上对比度不足) */ .act-copy h1, .act-copy h2, .act-copy p { text-shadow: 0 0 3px rgba(251,252,254,1), 0 0 14px rgba(251,252,254,.95), 0 0 34px rgba(251,252,254,.9), 0 0 64px rgba(251,252,254,.75); } .hero-tail { height: 34vh; } .no-webgl .stage-pin::after, html:not(.lx-js) .stage-pin::after { width: min(80vw, 420px); height: min(80vw, 420px); } }