/* ============================================================ * Longlight - 长光雨滴小站 | 公共背景层 — 全息长光背景 * components/holo.css * 职责：GUI 页面（home 与各子页面）共用的全息背景层——网格 + 边缘粒子噪点 + 扫描光带， * 不承载任何内容；此前为接入页私有，现下沉为公共背景，全站 GUI 页面同一视觉语言 * 用法：GUI 页面在首个子节点放置 * * 视觉：空气投影（纯光投影）——半透明自发光线框 + 边缘弱粒子噪点 + 背景穿透， * 无实体厚度、无实体阴影、无浮雕与立体感 * 分层：固定层置于 z-index:-1（在页面底色之上、全部内容之下），故页面无需为内容额外提高层级 * 依赖：tokens.css（颜色一律引用令牌，--grid-line / --grid-opacity 见 tokens） * ============================================================ */ .holo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .holo-grid { position: absolute; inset: -10%; background-image: linear-gradient(var(--grid-line, var(--line)) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line, var(--line)) 1px, transparent 1px); background-size: 46px 46px, 46px 46px; opacity: var(--grid-opacity, 0.15); /* 网格自中心向外淡出，避免铺满整屏（全息投影的有限视野） */ mask-image: radial-gradient(110% 80% at 50% 42%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(110% 80% at 50% 42%, #000 30%, transparent 78%); } /* 边缘弱粒子噪点：低透明度，仅作质感，不参与信息表达 */ .holo-noise { position: absolute; inset: 0; opacity: .05; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } [data-theme="light"] .holo-noise { opacity: .03; } /* 扫描光带：自上而下匀速巡游（减少动态偏好由 base.css 统一收敛） */ .holo-scan { position: absolute; left: 0; right: 0; height: 30vh; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--green-900) 4%, transparent), transparent); animation: holoSweep 11s linear infinite; } @keyframes holoSweep { from { top: -32vh; } to { top: 108vh; } }