/* ========================================================= Border Glow — port of reactbits.dev BorderGlow (JS+CSS) to plain CSS + jQuery, tuned for the LIVE+ LIGHT theme. Applied to: .project-card Props baked in: edgeSensitivity = 30 glowColor = 135 100 22 (Tropicana logo green, from #004712) glowIntensity = ~0.4 (softened twice — minimal interior wash) glowRadius = 26px coneSpread = 25 fillOpacity = 0.08 (very low — keeps the card face clean) colors = #004712, #40754e, #83a68c (logo gradient greens) ========================================================= */ .project-card{ --edge-proximity: 0; --cursor-angle: 45deg; --edge-sensitivity: 30; --color-sensitivity: calc(var(--edge-sensitivity) + 20); --glow-padding: 26px; --cone-spread: 25; --fill-opacity: .08; --card-bg: #ffffff; --glow-color: hsl(135deg 100% 22% / 70%); --glow-color-60: hsl(135deg 100% 22% / 33%); --glow-color-50: hsl(135deg 100% 22% / 27%); --glow-color-40: hsl(135deg 100% 22% / 22%); --glow-color-30: hsl(135deg 100% 22% / 16%); --glow-color-20: hsl(135deg 100% 22% / 11%); --glow-color-10: hsl(135deg 100% 22% / 5%); --gradient-one: radial-gradient(at 80% 55%, #004712 0px, transparent 50%); --gradient-two: radial-gradient(at 69% 34%, #40754e 0px, transparent 50%); --gradient-three: radial-gradient(at 8% 6%, #83a68c 0px, transparent 50%); --gradient-four: radial-gradient(at 41% 38%, #004712 0px, transparent 50%); --gradient-five: radial-gradient(at 86% 85%, #40754e 0px, transparent 50%); --gradient-six: radial-gradient(at 82% 18%, #83a68c 0px, transparent 50%); --gradient-seven: radial-gradient(at 51% 4%, #40754e 0px, transparent 50%); --gradient-base: linear-gradient(#004712 0 100%); position:relative; isolation:isolate; transform:translate3d(0,0,0.01px); /* outer glow must escape the card box */ overflow:visible; } /* card used overflow:hidden to round the photo — restore that on the image */ .project-img{border-radius:6px 6px 0 0} /* keep the existing lift, in 3d so it doesn't fight the glow layer */ .project-card:hover{transform:translate3d(0,-7px,0.01px)} /* content above the glow layers */ .project-card > .project-img, .project-card > .project-body{position:relative; z-index:1} /* ---- shared layer setup ---- */ .project-card::before, .project-card::after, .project-card > .edge-light{ content:""; position:absolute; inset:0; border-radius:inherit; transition:opacity .25s ease-out; z-index:-1; } .project-card:not(:hover)::before, .project-card:not(:hover)::after, .project-card:not(:hover) > .edge-light{ opacity:0; transition:opacity .75s ease-in-out; } /* ---- layer 1: mesh-gradient border, coned toward the cursor ---- */ .project-card::before{ border:1px solid transparent; background: linear-gradient(var(--card-bg) 0 100%) padding-box, linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box, var(--gradient-one) border-box, var(--gradient-two) border-box, var(--gradient-three) border-box, var(--gradient-four) border-box, var(--gradient-five) border-box, var(--gradient-six) border-box, var(--gradient-seven) border-box, var(--gradient-base) border-box; opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); -webkit-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%)); 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%)); } /* ---- layer 2: mesh fill bleeding in from the lit edge ---- */ .project-card::after{ border:1px solid transparent; background: var(--gradient-one) padding-box, var(--gradient-two) padding-box, var(--gradient-three) padding-box, var(--gradient-four) padding-box, var(--gradient-five) padding-box, var(--gradient-six) padding-box, var(--gradient-seven) padding-box, var(--gradient-base) padding-box; -webkit-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-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) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))); /* LIGHT surface: the component switches these blends off on light cards */ mix-blend-mode: normal; } /* ---- layer 3: outer bloom, masked to the cursor arc ---- */ .project-card > .edge-light{ inset: calc(var(--glow-padding) * -1); pointer-events:none; z-index:1; -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%); 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: normal; } .project-card > .edge-light::before{ content:""; position:absolute; inset: var(--glow-padding); border-radius:6px; /* softened: crisp 1px green edge, then a short gentle falloff. The wide 25px / 50px rings were what made it look heavy. */ box-shadow: /* INSET rings glow INWARD (the wash across the card face). Kept to a crisp edge + 3px only. Add more inset lines to bring the interior wash back. */ inset 0 0 0 1px var(--glow-color), inset 0 0 3px 0 var(--glow-color-40), /* OUTER rings glow outward, away from the card. */ 0 0 2px 0 var(--glow-color-60), 0 0 6px 0 var(--glow-color-40), 0 0 14px 0 var(--glow-color-20); } @media (hover:none){ .project-card::before, .project-card::after, .project-card > .edge-light{display:none} }