/* ========================================================================== 柠檬派 · 闭环 Banner 模块 component.css 所有类名统一前缀 lp-loop-，不会污染全站样式。 不引用任何外部 CDN / 字体 / 图片，全部图形由 canvas 绘制。 ========================================================================== */ .lp-loop { /* ------------------------------------------------------------------ 配色全部取自柠檬派站上的 theme-system 变量，没有自己发挥。 默认 = 深色主题；加 data-lp-theme="light" 切浅色。 对应关系写在每行后面，方便和主站对账。 ------------------------------------------------------------------ */ --lp-loop-radius: 24px; /* —— 深色（对应主站 dark） —— */ --lp-loop-bg-1: #050A18; /* --hero-bg1 */ --lp-loop-bg-2: #0A1428; /* --hero-bg2 */ --lp-loop-bg-3: #0A1226; /* 压暗高光区，保持主站深蓝层次 */ --lp-loop-border: rgba(112, 161, 255, .20); /* --opc-stage-line */ --lp-loop-shadow: 0 34px 100px rgba(0, 0, 0, .52); /* --opc-shadow */ --lp-loop-grid: rgba(96, 165, 250, .08); /* --opc-grid */ --lp-loop-horizon: rgba(36, 95, 218, .12); /* 降低中部灰雾 */ --lp-loop-vignette: rgba(3, 7, 18, .55); --lp-loop-fg: #EEF4FF; /* --theme-text */ --lp-loop-fg-dim: #92A4C3; /* --theme-muted */ --lp-loop-card-bg-1: rgba(13, 23, 42, .82); /* --theme-panel-2 */ --lp-loop-card-bg-2: rgba(10, 19, 37, .78); /* --theme-panel */ --lp-loop-card-border: rgba(96, 165, 250, .18); /* --card-border */ /* 三个阶段色 = 主站 --opc-gold / --opc-cyan / --opc-violet */ --lp-loop-title-1: #CFE4FF; /* 标题高亮渐变起点 */ --lp-loop-title-2: #6FA6FF; /* 终点，取自 --theme-blue 一族 */ --lp-loop-c1: #FCD34D; --lp-loop-c2: #38D9F4; --lp-loop-c3: #A78BFA; --lp-loop-accent: var(--lp-loop-c1); /* 当前阶段色，由 JS 写入 */ position: relative; width: 100%; /* 宽度 100%，随父容器响应式变化 */ border-radius: var(--lp-loop-radius); overflow: hidden; isolation: isolate; border: 1px solid var(--lp-loop-border); box-shadow: var(--lp-loop-shadow); background: /* 底部地平线辉光 —— 让画面有"上方是空、下方是地"的方向感 */ radial-gradient(130% 68% at 50% 116%, var(--lp-loop-horizon), transparent 64%), radial-gradient(95% 72% at 50% -8%, var(--lp-loop-bg-3), transparent 62%), linear-gradient(172deg, var(--lp-loop-bg-2) 0%, var(--lp-loop-bg-1) 100%); color: var(--lp-loop-fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* —— 浅色（对应主站 light） —— */ .lp-loop[data-lp-theme="light"] { --lp-loop-bg-1: #EDF5FF; /* --hero-bg3 */ --lp-loop-bg-2: #F4F8FF; /* --hero-bg2 */ --lp-loop-bg-3: #FBFDFF; /* --hero-bg1 */ --lp-loop-border: rgba(39, 91, 217, .13); /* --opc-stage-line */ --lp-loop-shadow: 0 30px 80px rgba(44, 64, 114, .18); /* --opc-shadow */ --lp-loop-grid: rgba(31, 73, 125, .07); /* --opc-grid */ --lp-loop-horizon: rgba(36, 95, 218, .13); /* --glow-1 */ --lp-loop-vignette: rgba(33, 61, 104, .10); --lp-loop-fg: #17243A; /* --theme-text */ --lp-loop-fg-dim: #66758C; /* --theme-muted */ --lp-loop-card-bg-1: rgba(255, 255, 255, .94); /* --theme-panel */ --lp-loop-card-bg-2: rgba(248, 251, 255, .90); /* --theme-panel-2 */ --lp-loop-card-border: #DBE3EE; /* --card-border */ --lp-loop-title-1: #2F6BE0; --lp-loop-title-2: #1E4FBF; --lp-loop-c1: #F6B91F; /* --opc-gold */ --lp-loop-c2: #06B6D4; /* --opc-cyan */ --lp-loop-c3: #7C3AED; /* --opc-violet */ } /* 底纹网格：给环一点空间感 */ .lp-loop::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--lp-loop-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lp-loop-grid) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(76% 68% at 50% 50%, #000, transparent 76%); -webkit-mask-image: radial-gradient(76% 68% at 50% 50%, #000, transparent 76%); } /* 胶片颗粒：静态噪点平铺 + overlay 混合。 GPU 合成，不占绘制预算；同时打散大面积渐变的 8bit 色带。 */ .lp-loop-grain { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: var(--lp-loop-grain, .055); mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,\ \ \ \ "); background-size: 140px 140px; } /* 四角压暗（暗角）：把视线收进中间，也让平面感变成空间感 */ .lp-loop::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(118% 96% at 50% 46%, transparent 52%, var(--lp-loop-vignette) 100%); } /* ---------- 画布舞台 ---------- */ .lp-loop-stage { position: relative; width: 100%; aspect-ratio: var(--lp-loop-ratio, 16 / 9); /* 默认 16:9 横向；想更扁覆写 --lp-loop-ratio */ touch-action: pan-y; /* 允许页面纵向滚动，双指留给缩放 */ } .lp-loop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* 边缘柔化：环在靠近面板边框处自然淡出，而不是被硬切一刀 */ mask-image: radial-gradient(86% 92% at 50% 50%, #000 74%, transparent 100%); -webkit-mask-image: radial-gradient(86% 92% at 50% 50%, #000 74%, transparent 100%); } /* 两层画布：环的后半在中心卡片之下，前半压在其上 —— 环才是「绕着」卡片转 */ .lp-loop-canvas--back { z-index: 1; } .lp-loop-canvas--front { z-index: 5; pointer-events: none; } /* ---------- 标题（默认形态：一行大字 + 曲线，和主站首屏一致） ---------- */ .lp-loop-caption { position: absolute; z-index: 3; left: 50%; top: 8.5%; transform: translateX(-50%); width: min(90%, 940px); margin: 0; text-align: center; font-size: clamp(20px, 2.7vw, 42px); font-weight: 700; letter-spacing: -.012em; line-height: 1.26; color: var(--lp-loop-fg); text-shadow: 0 2px 26px rgba(0, 0, 0, .45); pointer-events: none; /* 不挡住曲线的悬停和点击 */ text-wrap: balance; } .lp-loop[data-lp-theme="light"] .lp-loop-caption { text-shadow: 0 2px 18px rgba(255, 255, 255, .65); } /* 高亮词：白到蓝的渐变，和主站首屏那行字一致 */ .lp-loop-caption em { font-style: normal; background: linear-gradient(96deg, var(--lp-loop-title-1), var(--lp-loop-title-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-loop[data-lp-caption="center"] .lp-loop-caption { top: 50%; transform: translate(-50%, -50%); } .lp-loop[data-lp-caption="bottom"] .lp-loop-caption { top: auto; bottom: 9%; } .lp-loop[data-lp-caption="none"] .lp-loop-caption { display: none; } @media (max-width: 700px) { .lp-loop-caption { top: 6%; font-size: clamp(17px, 4.8vw, 26px); } } /* ---------- 中心卡片（可选，默认不用） ---------- */ .lp-loop-card { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(64%, 300px); padding: 18px 20px 16px; border-radius: 18px; background: linear-gradient(165deg, var(--lp-loop-card-bg-1), var(--lp-loop-card-bg-2)); border: 1px solid var(--lp-loop-card-border); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .10); /* 顶部一道高光，玻璃感 */ /* 注意：这里刻意不用 backdrop-filter —— 卡片压在每帧重绘的 canvas 上， 毛玻璃会让浏览器每帧重新模糊一次背景，实测能把帧率打掉一半。 */ text-align: left; } .lp-loop[data-lp-theme="light"] .lp-loop-card { box-shadow: 0 20px 50px rgba(24, 48, 96, .14); } /* 卡片在左、曲线在右：宽 banner 下更好的排版，右侧不会空出一大片 */ .lp-loop[data-lp-card="left"] .lp-loop-card { left: 5%; top: 50%; transform: translateY(-50%); width: min(34%, 340px); } .lp-loop[data-lp-card="none"] .lp-loop-card { display: none; } .lp-loop-kicker { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-loop-accent); } .lp-loop-title { font-size: 18px; font-weight: 700; margin: 8px 0 0; letter-spacing: -.01em; } .lp-loop-desc { margin: 7px 0 0; font-size: 12.8px; line-height: 1.6; color: var(--lp-loop-fg-dim); } .lp-loop-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } .lp-loop-tags span { font-size: 11.5px; padding: 4px 9px; border-radius: 7px; background: color-mix(in srgb, var(--lp-loop-accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--lp-loop-accent) 32%, transparent); } .lp-loop-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--lp-loop-accent); text-decoration: none; } .lp-loop-more::after { content: "→"; transition: transform .22s; } .lp-loop-more:hover::after { transform: translateX(3px); } .lp-loop-swap { animation: lp-loop-swap .42s cubic-bezier(.2, .8, .3, 1); } @keyframes lp-loop-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- 三个文字节点 ---------- */ /* 不做成"贴上去的胶囊"：去掉描边和实底，改成带辉光的文字 + 一团柔和的光晕， 让它像长在画面里而不是浮在上面。 位置只在容器尺寸变化时算一次并钉死，只有引线跟着曲线走， 否则文字会随动画一直漂移，点不准。 */ .lp-loop-node { position: absolute; z-index: 4; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 9px 16px; border: 0; border-radius: 14px; background: transparent; color: var(--lp-loop-fg); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .01em; cursor: pointer; text-shadow: 0 0 16px color-mix(in srgb, var(--lp-loop-node-color) 55%, transparent), 0 1px 6px rgba(0, 0, 0, .55); transition: color .3s, text-shadow .3s, transform .3s cubic-bezier(.2, .8, .3, 1); isolation: isolate; } /* 光晕：柔和的椭圆渐变，没有边界，所以不会有"贴纸"的硬边 */ .lp-loop-node::before { content: ""; position: absolute; inset: -34% -14%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--lp-loop-node-color) 26%, transparent) 0%, color-mix(in srgb, var(--lp-loop-node-color) 9%, transparent) 45%, transparent 100%); opacity: .5; transition: opacity .3s, transform .3s; } /* 文字下面一道由实到虚的细线，和画面里的引线接上 */ .lp-loop-node::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--lp-loop-node-color) 70%, transparent), transparent); opacity: .35; transform: scaleX(.6); transform-origin: left; transition: opacity .3s, transform .3s; } .lp-loop-node > i { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-loop-node-color); box-shadow: 0 0 12px var(--lp-loop-node-color), 0 0 24px color-mix(in srgb, var(--lp-loop-node-color) 60%, transparent); flex: none; transition: transform .3s, box-shadow .3s; } .lp-loop[data-lp-theme="light"] .lp-loop-node { color: #131F38; text-shadow: 0 0 14px color-mix(in srgb, var(--lp-loop-node-color) 45%, transparent), 0 1px 2px rgba(255, 255, 255, .85); } .lp-loop-node:hover { transform: translate(-50%, -50%) scale(1.04); } .lp-loop-node:hover::before { opacity: .8; } .lp-loop-node:hover::after { opacity: .6; transform: scaleX(.85); } .lp-loop-node:hover > i { transform: scale(1.25); } .lp-loop-node[aria-pressed="true"] { text-shadow: 0 0 22px var(--lp-loop-node-color), 0 0 44px color-mix(in srgb, var(--lp-loop-node-color) 45%, transparent), 0 1px 6px rgba(0, 0, 0, .55); } .lp-loop-node[aria-pressed="true"]::before { opacity: 1; } .lp-loop-node[aria-pressed="true"]::after { opacity: .85; transform: scaleX(1); } .lp-loop-node[aria-pressed="true"] > i { transform: scale(1.35); box-shadow: 0 0 16px var(--lp-loop-node-color), 0 0 34px var(--lp-loop-node-color); } .lp-loop-node:focus-visible { outline: 2px solid var(--lp-loop-node-color); outline-offset: 2px; } /* ---------- 窄屏 ---------- */ /* 卡片从环心里移到环下面，否则会把整个环盖住 */ @media (max-width: 700px) { .lp-loop-stage { aspect-ratio: var(--lp-loop-ratio-sm, 4 / 3); } /* 窄屏也保持横向，不做成正方形 */ .lp-loop-card, .lp-loop[data-lp-card="left"] .lp-loop-card { position: static; transform: none; left: auto; top: auto; width: auto; margin: 2px 12px 14px; border-radius: 16px; } .lp-loop-node { font-size: 12px; padding: 6px 11px 6px 9px; } } /* ---------- 无障碍：尊重减少动效 ---------- */ @media (prefers-reduced-motion: reduce) { .lp-loop-swap { animation: none; } .lp-loop-more::after { transition: none; } }