/* ============================================ BorderGlow 卡片样式 来源：React Bits (https://reactbits.dev) 翻译：React → vanilla JS（CSS 直接复用） ============================================ */ .border-glow-card { --edge-proximity: 0; --cursor-angle: 45deg; --edge-sensitivity: 30; --color-sensitivity: calc(var(--edge-sensitivity) + 20); --border-radius: 20px; --glow-padding: 30px; --cone-spread: 25; position: relative; border-radius: var(--border-radius); isolation: isolate; transform: translate3d(0, 0, 0.01px); display: grid; border: 1px solid rgb(255 255 255 / 12%); background: var(--card-bg, rgba(255, 255, 255, 0.04)); overflow: visible; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px, rgba(0, 0, 0, 0.1) 0px 2px 4px, rgba(0, 0, 0, 0.2) 0px 4px 8px, rgba(0, 0, 0, 0.15) 0px 8px 16px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .border-glow-card:hover { transform: translateY(-3px); } .border-glow-card::before, .border-glow-card::after, .border-glow-card > .edge-light { content: ""; position: absolute; inset: 0; border-radius: inherit; transition: opacity 0.25s ease-out; z-index: -1; } .border-glow-card:not(:hover):not(.sweep-active)::before, .border-glow-card:not(:hover):not(.sweep-active)::after, .border-glow-card:not(:hover):not(.sweep-active) > .edge-light { opacity: 0; transition: opacity 0.75s ease-in-out; } /* colored mesh-gradient border */ .border-glow-card::before { border: 1px solid transparent; background: linear-gradient(var(--card-bg, rgba(255, 255, 255, 0.04)) 0 100%) padding-box, linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box, var(--gradient-one, radial-gradient(at 80% 55%, hsla(210, 100%, 76%, 1) 0px, transparent 50%)) border-box, var(--gradient-two, radial-gradient(at 69% 34%, hsla(199, 100%, 64%, 1) 0px, transparent 50%)) border-box, var(--gradient-three, radial-gradient(at 8% 6%, hsla(210, 100%, 80%, 1) 0px, transparent 50%)) border-box, var(--gradient-four, radial-gradient(at 41% 38%, hsla(199, 100%, 70%, 1) 0px, transparent 50%)) border-box, var(--gradient-five, radial-gradient(at 86% 85%, hsla(210, 100%, 76%, 1) 0px, transparent 50%)) border-box, var(--gradient-six, radial-gradient(at 82% 18%, hsla(199, 100%, 64%, 1) 0px, transparent 50%)) border-box, var(--gradient-seven, radial-gradient(at 51% 4%, hsla(210, 100%, 80%, 1) 0px, transparent 50%)) border-box, var(--gradient-base, linear-gradient(#7BB8FF 0 100%)) border-box; opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mask-image: conic-gradient( from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%) ); } /* colored mesh-gradient background fill near edges */ .border-glow-card::after { border: 1px solid transparent; background: var(--gradient-one, radial-gradient(at 80% 55%, hsla(210, 100%, 76%, 1) 0px, transparent 50%)) padding-box, var(--gradient-two, radial-gradient(at 69% 34%, hsla(199, 100%, 64%, 1) 0px, transparent 50%)) padding-box, var(--gradient-three, radial-gradient(at 8% 6%, hsla(210, 100%, 80%, 1) 0px, transparent 50%)) padding-box, var(--gradient-four, radial-gradient(at 41% 38%, hsla(199, 100%, 70%, 1) 0px, transparent 50%)) padding-box, var(--gradient-five, radial-gradient(at 86% 85%, hsla(210, 100%, 76%, 1) 0px, transparent 50%)) padding-box, var(--gradient-six, radial-gradient(at 82% 18%, hsla(199, 100%, 64%, 1) 0px, transparent 50%)) padding-box, var(--gradient-seven, radial-gradient(at 51% 4%, hsla(210, 100%, 80%, 1) 0px, transparent 50%)) padding-box, var(--gradient-base, linear-gradient(#7BB8FF 0 100%)) padding-box; mask-image: linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%); mask-composite: subtract, add, add, add, add, add; opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); mix-blend-mode: soft-light; } /* outer glow layer */ .border-glow-card > .edge-light { inset: calc(var(--glow-padding) * -1); pointer-events: none; z-index: 1; mask-image: conic-gradient( from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5% ); opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity))); mix-blend-mode: plus-lighter; } .border-glow-card > .edge-light::before { content: ""; position: absolute; inset: var(--glow-padding); border-radius: inherit; box-shadow: inset 0 0 0 1px var(--glow-color, hsl(200deg 80% 60% / 100%)), inset 0 0 1px 0 var(--glow-color-60, hsl(200deg 80% 60% / 60%)), inset 0 0 3px 0 var(--glow-color-50, hsl(200deg 80% 60% / 50%)), inset 0 0 6px 0 var(--glow-color-40, hsl(200deg 80% 60% / 40%)), inset 0 0 15px 0 var(--glow-color-30, hsl(200deg 80% 60% / 30%)), inset 0 0 25px 2px var(--glow-color-20, hsl(200deg 80% 60% / 20%)), inset 0 0 50px 2px var(--glow-color-10, hsl(200deg 80% 60% / 10%)), 0 0 1px 0 var(--glow-color-60, hsl(200deg 80% 60% / 60%)), 0 0 3px 0 var(--glow-color-50, hsl(200deg 80% 60% / 50%)), 0 0 6px 0 var(--glow-color-40, hsl(200deg 80% 60% / 40%)), 0 0 15px 0 var(--glow-color-30, hsl(200deg 80% 60% / 30%)), 0 0 25px 2px var(--glow-color-20, hsl(200deg 80% 60% / 20%)), 0 0 50px 2px var(--glow-color-10, hsl(200deg 80% 60% / 10%)); } .border-glow-inner { display: flex; flex-direction: column; position: relative; overflow: auto; z-index: 1; padding: 1.25rem; min-height: 160px; } .border-glow-inner h3 { font-size: 0.95rem; font-weight: 700; color: var(--primary, #7BB8FF); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; } .border-glow-inner p { color: var(--text-light, #cbd5e1); font-size: 0.85rem; line-height: 1.55; flex: 1; } .border-glow-inner .chip-mini { display: inline-block; padding: 0.25rem 0.6rem; margin: 0.15rem 0.15rem 0.15rem 0; background: rgba(123, 184, 255, 0.12); color: #7BB8FF; border-radius: 100px; font-size: 0.72rem; font-weight: 500; border: 1px solid rgba(123, 184, 255, 0.2); }