/* ========================================================= Border Glow — faithful port of reactbits.dev BorderGlow (BorderGlow-JS-CSS) to plain CSS + jQuery. No React. Applied to: .card (project cards), .cat-card (category cards) Props baked in as values below: edgeSensitivity = 30 glowColor = 40 70 75 (champagne gold, hsl) glowIntensity = 1 glowRadius = 40px coneSpread = 25 fillOpacity = 0.5 colors = #C9A45C, #E8D5A8, #1B5A4D ========================================================= */ .card, .cat-card{ --edge-proximity: 0; --cursor-angle: 45deg; --edge-sensitivity: 30; --color-sensitivity: calc(var(--edge-sensitivity) + 20); --glow-padding: 40px; --cone-spread: 25; --fill-opacity: .5; /* card surface colour, used by the mesh border's padding-box fill */ --card-bg: #12332C; /* glow ramp (glowColor 40 70 75 at intensity 1) */ --glow-color: hsl(40deg 70% 75% / 100%); --glow-color-60: hsl(40deg 70% 75% / 60%); --glow-color-50: hsl(40deg 70% 75% / 50%); --glow-color-40: hsl(40deg 70% 75% / 40%); --glow-color-30: hsl(40deg 70% 75% / 30%); --glow-color-20: hsl(40deg 70% 75% / 20%); --glow-color-10: hsl(40deg 70% 75% / 10%); /* mesh gradient stops (gold / pale gold / deep emerald) */ --gradient-one: radial-gradient(at 80% 55%, #C9A45C 0px, transparent 50%); --gradient-two: radial-gradient(at 69% 34%, #E8D5A8 0px, transparent 50%); --gradient-three: radial-gradient(at 8% 6%, #1B5A4D 0px, transparent 50%); --gradient-four: radial-gradient(at 41% 38%, #C9A45C 0px, transparent 50%); --gradient-five: radial-gradient(at 86% 85%, #E8D5A8 0px, transparent 50%); --gradient-six: radial-gradient(at 82% 18%, #1B5A4D 0px, transparent 50%); --gradient-seven: radial-gradient(at 51% 4%, #E8D5A8 0px, transparent 50%); --gradient-base: linear-gradient(#C9A45C 0 100%); position: relative; isolation: isolate; transform: translate3d(0, 0, 0.01px); /* outer glow must not be clipped — inner .card-img keeps its own clip */ overflow: visible; } /* keep the lift-on-hover from the base design */ .card:hover{transform:translate3d(0,-5px,0.01px)} /* card content sits above the glow layers */ .card > .card-img, .card > .card-body, .cat-card > *:not(.edge-light){position:relative; z-index:1} /* ---- shared layer setup ---- */ .card::before, .card::after, .card > .edge-light, .cat-card::before, .cat-card::after, .cat-card > .edge-light{ content:""; position:absolute; inset:0; border-radius:inherit; transition:opacity .25s ease-out; z-index:-1; } /* fully off unless hovered */ .card:not(:hover)::before, .card:not(:hover)::after, .card:not(:hover) > .edge-light, .cat-card:not(:hover)::before, .cat-card:not(:hover)::after, .cat-card:not(:hover) > .edge-light{ opacity:0; transition:opacity .75s ease-in-out; } /* ---- layer 1: mesh-gradient border, masked to a cone facing the cursor ---- */ .card::before, .cat-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: soft-light mesh fill bleeding in from the lit edge ---- */ .card::after, .cat-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))); mix-blend-mode: soft-light; } /* ---- layer 3: outer bloom, box-shadow rings masked to the cursor arc ---- */ .card > .edge-light, .cat-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: plus-lighter; } .card > .edge-light::before, .cat-card > .edge-light::before{ content:""; position:absolute; inset: var(--glow-padding); border-radius:inherit; box-shadow: inset 0 0 0 1px var(--glow-color), inset 0 0 1px 0 var(--glow-color-60), inset 0 0 3px 0 var(--glow-color-50), inset 0 0 6px 0 var(--glow-color-40), inset 0 0 15px 0 var(--glow-color-30), inset 0 0 25px 2px var(--glow-color-20), inset 0 0 50px 2px var(--glow-color-10), 0 0 1px 0 var(--glow-color-60), 0 0 3px 0 var(--glow-color-50), 0 0 6px 0 var(--glow-color-40), 0 0 15px 0 var(--glow-color-30), 0 0 25px 2px var(--glow-color-20), 0 0 50px 2px var(--glow-color-10); } /* touch devices: no cursor to follow */ @media (hover:none){ .card::before, .card::after, .card > .edge-light, .cat-card::before, .cat-card::after, .cat-card > .edge-light{display:none} }