/* ========================================================================= CARD / SCAN — 样式 ========================================================================= */ .cs-stage{ --bg: #02040a; --ink: #cfe9f5; --muted: #5b7d92; --cyan: #5fe6ff; --radius: 15px; /* 卡片小圆角 */ --beam: 34%; /* 扫描线位置，由 JS 同步 */ --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --sans: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif; } /* ---------------------------------------------------------------- 舞台 */ .cs-stage{ /* 原件是 position:fixed;inset:0 的全屏舞台。这里改成局部块， 位置与尺寸由主站的 #cardScan 规则给；背景透明， 好让底下的数字人画面透出来 —— 卡片是浮在画面上的，不是盖住它。 */ position:absolute; inset:0; overflow:hidden; cursor:grab; background:none; touch-action:none; } .cs-stage.cs-is-grabbing{ cursor:grabbing; } .cs-bg-grid{ position:absolute; inset:-2px; background-image: linear-gradient(rgba(95,230,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(95,230,255,.055) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(110% 72% at var(--beam) 50%, #000 6%, transparent 76%); mask-image:radial-gradient(110% 72% at var(--beam) 50%, #000 6%, transparent 76%); pointer-events:none; } .cs-bg-vignette{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(105% 75% at 50% 50%, transparent 38%, rgba(0,0,0,.78) 100%); } /* ---------------------------------------------------------------- 轨道 */ .cs-track{ position:absolute; inset:0; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } /* ------------------------------------------------------------ 卡片本体 */ /* 一个 wrapper 内是两个「完全重叠的绝对定位图层」： .cs-card-layer--photo 只画扫描线右侧的原图 .cs-card-layer--code 只画扫描线左侧的代码文字 */ .cs-card-wrapper{ position:absolute; top:0; left:0; border-radius:var(--radius); overflow:hidden; background:#03060c; will-change:transform; transform:translate3d(0,0,0); -webkit-backface-visibility:hidden; backface-visibility:hidden; box-shadow: 0 34px 70px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(120,200,230,.10), 0 0 60px -30px rgba(95,230,255,.35); } .cs-card-layer{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; } .cs-card-layer--photo{ z-index:1; } .cs-card-layer--code { z-index:2; } /* 内描边 */ .cs-card-wrapper::after{ content:""; position:absolute; inset:0; z-index:3; border-radius:var(--radius); border:1px solid rgba(160,225,245,.15); pointer-events:none; } /* 卡片编号 */ .cs-card-wrapper::before{ content:attr(data-tag); position:absolute; left:11px; bottom:10px; z-index:4; font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:rgba(200,244,255,.6); text-shadow:0 0 10px rgba(0,0,0,.95); pointer-events:none; } /* ------------------------------------------------------------ 扫描光束 */ .cs-beam{ position:absolute; top:0; bottom:0; left:var(--beam); width:0; z-index:20; pointer-events:none; } .cs-beam-halo{ position:absolute; top:0; bottom:0; left:-80px; width:160px; background:linear-gradient(90deg, rgba(95,230,255,0) 0%, rgba(95,230,255,.045) 34%, rgba(150,246,255,.22) 50%, rgba(95,230,255,.045) 66%, rgba(95,230,255,0) 100%); filter:blur(7px); } .cs-beam-core{ position:absolute; top:0; bottom:0; left:-1px; width:2px; background:linear-gradient(180deg, rgba(120,240,255,0) 0%, rgba(200,253,255,.95) 11%, #eafcff 50%, rgba(200,253,255,.95) 89%, rgba(120,240,255,0) 100%); box-shadow:0 0 12px rgba(120,235,255,.95), 0 0 44px rgba(80,210,255,.6); } .cs-beam-pulse{ position:absolute; left:-4px; width:8px; height:24%; background:linear-gradient(180deg, transparent, rgba(235,255,255,.95), transparent); filter:blur(4px); animation:csBeamRun 3.6s cubic-bezier(.6,0,.4,1) infinite; } @keyframes csBeamRun{ 0%{ top:-28%; } 100%{ top:104%; } } .cs-beam-cap{ position:absolute; left:0; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:rgba(170,240,255,.8); white-space:nowrap; } .cs-beam-cap--top { top:74px; } .cs-beam-cap--bottom{ bottom:82px; } .cs-cap-tick{ width:1px; height:20px; background:linear-gradient(180deg, rgba(120,240,255,.85), rgba(120,240,255,0)); } .cs-beam-cap--bottom .cs-cap-tick{ background:linear-gradient(180deg, rgba(120,240,255,0), rgba(120,240,255,.85)); } .cs-cap-label{ padding:4px 9px; margin:4px 0; border:1px solid rgba(120,230,255,.26); border-radius:3px; background:rgba(4,14,22,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); min-width:94px; text-align:center; } /* ------------------------------------------------------------------ HUD */ .cs-hud{ position:absolute; left:0; right:0; z-index:30; padding:22px 30px; pointer-events:none; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; } .cs-hud--top{ top:0; align-items:flex-start; } .cs-hud--bottom{ bottom:0; } .cs-hud-title{ font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.34em; color:#e6faff; text-shadow:0 0 22px rgba(95,230,255,.5); } .cs-hud-title span{ color:var(--cyan); margin:0 2px; } .cs-hud-sub{ font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; color:var(--muted); padding-top:5px; } .cs-hud-stats{ display:flex; gap:26px; } .cs-hud-stat{ display:flex; flex-direction:column; gap:3px; } .cs-hud-stat b{ font-family:var(--mono); font-size:16px; font-weight:500; color:#dff6ff; letter-spacing:.04em; font-variant-numeric:tabular-nums; } .cs-hud-stat i{ font-family:var(--mono); font-style:normal; font-size:8.5px; letter-spacing:.24em; color:var(--muted); } .cs-hud-hint{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:rgba(91,125,146,.85); text-align:right; } /* --------------------------------------------------------------- 载入层 */ .cs-loader{ position:absolute; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:rgba(2,4,10,.92); transition:opacity .5s ease, visibility .5s ease; } .cs-loader.cs-is-done{ opacity:0; visibility:hidden; } .cs-loader-bar{ width:min(260px, 46vw); height:2px; background:rgba(95,230,255,.14); overflow:hidden; border-radius:2px; } .cs-loader-bar i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, rgba(95,230,255,.4), #d8fbff); box-shadow:0 0 14px rgba(95,230,255,.8); transition:width .25s ease; } .cs-loader-text{ font-family:var(--mono); font-size:10px; letter-spacing:.28em; color:var(--muted); } /* ------------------------------------------------------------- 拖放提示 */ .cs-drop-hint{ position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:#d8fbff; background:rgba(3,12,20,.72); box-shadow:inset 0 0 0 1px rgba(95,230,255,.5); opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease; pointer-events:none; } .cs-stage.cs-is-dropping .cs-drop-hint{ opacity:1; visibility:visible; } /* ------------------------------------------------------------------ 响应 */ @media (max-width:860px){ .cs-hud{ padding:16px 18px; } .cs-hud-sub{ display:none; } .cs-hud-hint{ display:none; } .cs-hud-stats{ gap:18px; } .cs-cap-label{ min-width:80px; font-size:9px; } .cs-beam-cap--top { top:60px; } .cs-beam-cap--bottom{ bottom:66px; } } @media (prefers-reduced-motion:reduce){ .cs-beam-pulse{ animation:none; opacity:.35; } } /* ========================================================================== 嵌入主站后的覆盖：原件是一个独占全屏的 demo， 这里只保留「卡片轨道 + 扫描光束」这套视觉，去掉它的 demo 外壳。 ========================================================================== */ /* 暗角会把底下的人物画面一起压黑，去掉 */ .cs-bg-vignette{ display:none; } /* HUD 那几个读数（FPS / NODE / GLYPHS / PX/S）和操作提示是调试用的， 官网上不该出现。元素保留是因为 script 会往里写值，只是不显示。 */ .cs-hud{ display:none; } /* 网格底纹留着垫科技感，但原件的 mask 在 76% 处硬截断， 叠在深色画面上会切出一条很明显的弧形明暗分界（就是那条"渐变边缘"）。 改成从中心一路衰减到 100%，中途不设断点，边界就化开了； 网格线本身也压淡一档。 */ .cs-bg-grid{ opacity:.3; -webkit-mask-image:radial-gradient(126% 92% at var(--beam) 50%, #000 0%, rgba(0,0,0,.5) 44%, rgba(0,0,0,.16) 72%, transparent 100%); mask-image:radial-gradient(126% 92% at var(--beam) 50%, #000 0%, rgba(0,0,0,.5) 44%, rgba(0,0,0,.16) 72%, transparent 100%); } /* 轨道左右的羽化：原件按全屏宽度调的 7%， 放进这个只有半屏宽的容器里就太短，卡片边缘几乎是硬切出来的 */ .cs-track{ -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); } /* 载入层：换成主站的冷调，别用原件那身深蓝 */ .cs-loader{ background:rgba(7,9,12,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } .cs-loader-bar{ width:min(160px,32%); background:rgba(198,214,232,.16); } .cs-loader-bar i{ background:linear-gradient(90deg,rgba(94,200,232,.5),#dff6ff); } .cs-loader-text{ font-size:9px; letter-spacing:.24em; color:rgba(238,244,250,.5); } /* 光束两端的标签：原件按全屏高度定位，局部块里要收回来 */ .cs-beam-cap--top{ top:14px; } .cs-beam-cap--bottom{ bottom:14px; } .cs-cap-label{ font-size:9px; min-width:82px; padding:3px 7px; } /* 卡片阴影收一点：浮在人物画面上，原件那套是为纯黑底调的 */ .cs-card-wrapper{ box-shadow: 0 26px 54px -22px rgba(0,0,0,.85), 0 0 0 1px rgba(120,200,230,.12), 0 0 48px -26px rgba(95,230,255,.3); } @media (max-width:860px){ .cs-beam-cap--top{ top:8px; } .cs-beam-cap--bottom{ bottom:8px; } .cs-cap-label{ min-width:70px; font-size:8px; } }