/* ---- BorderGlow: edge-following mesh-gradient glow card (brand-tuned) ---- Adapted from React Bits. The look is driven by CSS custom properties set inline by the BorderGlow component (design system) and border-glow.js (the live frontend); this block is the shared class contract and is kept byte-identical with sighaty-frontend/assets/border-glow.css. Ink & Brass retint (founder revival, July 2026): the class contract, the masks and the calc()s are unchanged, only the colour and the depth of the light. Every fallback now resolves through the token file (--panel, --line, --gold, --brass-deep) instead of the retired teal-and-gold palette, the corners come from --r-lg so the card stays stationery-square, the card itself is flat chrome (no elevation stack, no coloured shadow at rest), and the edge-light shadow ladder is tightened from a 50px halo to a brass hairline sheen that fades out inside ~18px. */ .border-glow-card{ --edge-proximity:0; --cursor-angle:45deg; --edge-sensitivity:30; --color-sensitivity:calc(var(--edge-sensitivity) + 20); --border-radius:var(--r-lg,3px); --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 var(--line,rgba(241,235,220,.13)); background:var(--card-bg,var(--panel,#132419)); overflow:visible; /* static chrome stays flat: the rule carries the card, not an elevation stack */ box-shadow:none; } .border-glow-card::before, .border-glow-card::after, .border-glow-card > .edge-light{ content:""; position:absolute; inset:0; border-radius:inherit; transition:opacity .25s ease-out; z-index:-1; } .border-glow-card:not(:hover):not(.sweep-active):not(.bg-rotating)::before, .border-glow-card:not(:hover):not(.sweep-active):not(.bg-rotating)::after, .border-glow-card:not(:hover):not(.sweep-active):not(.bg-rotating) > .edge-light{ opacity:0; transition:opacity .75s ease-in-out; } /* brass mesh-gradient border */ .border-glow-card::before{ border:1px solid transparent; background: linear-gradient(var(--card-bg,var(--panel,#132419)) 0 100%) padding-box, linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box, var(--gradient-one, radial-gradient(at 80% 55%, var(--panel,#132419) 0px, transparent 50%)) border-box, var(--gradient-two, radial-gradient(at 69% 34%, var(--gold,#B3924D) 0px, transparent 50%)) border-box, var(--gradient-three, radial-gradient(at 8% 6%, var(--brass-deep,#8A6D33) 0px, transparent 50%)) border-box, var(--gradient-four, radial-gradient(at 41% 38%, var(--panel,#132419) 0px, transparent 50%)) border-box, var(--gradient-five, radial-gradient(at 86% 85%, var(--gold,#B3924D) 0px, transparent 50%)) border-box, var(--gradient-six, radial-gradient(at 82% 18%, var(--brass-deep,#8A6D33) 0px, transparent 50%)) border-box, var(--gradient-seven, radial-gradient(at 51% 4%, var(--gold,#B3924D) 0px, transparent 50%)) border-box, var(--gradient-base, linear-gradient(var(--panel,#132419) 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%) ); } /* brass mesh-gradient background fill near edges */ .border-glow-card::after{ border:1px solid transparent; background: var(--gradient-one, radial-gradient(at 80% 55%, var(--panel,#132419) 0px, transparent 50%)) padding-box, var(--gradient-two, radial-gradient(at 69% 34%, var(--gold,#B3924D) 0px, transparent 50%)) padding-box, var(--gradient-three, radial-gradient(at 8% 6%, var(--brass-deep,#8A6D33) 0px, transparent 50%)) padding-box, var(--gradient-four, radial-gradient(at 41% 38%, var(--panel,#132419) 0px, transparent 50%)) padding-box, var(--gradient-five, radial-gradient(at 86% 85%, var(--gold,#B3924D) 0px, transparent 50%)) padding-box, var(--gradient-six, radial-gradient(at 82% 18%, var(--brass-deep,#8A6D33) 0px, transparent 50%)) padding-box, var(--gradient-seven, radial-gradient(at 51% 4%, var(--gold,#B3924D) 0px, transparent 50%)) padding-box, var(--gradient-base, linear-gradient(var(--panel,#132419) 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 sheen 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; } /* The ladder below is the whole difference between a hairline and a halo: the 1px inset core is the lit brass rule, and every blur above it is short and spreadless so the light dies within ~18px instead of the old 50px bloom. */ .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(42deg 51% 67% / 100%)), inset 0 0 1px 0 var(--glow-color-60, hsl(42deg 51% 67% / 60%)), inset 0 0 3px 0 var(--glow-color-50, hsl(42deg 51% 67% / 50%)), inset 0 0 5px 0 var(--glow-color-40, hsl(42deg 51% 67% / 40%)), inset 0 0 9px 0 var(--glow-color-30, hsl(42deg 51% 67% / 30%)), inset 0 0 14px 0 var(--glow-color-20, hsl(42deg 51% 67% / 20%)), inset 0 0 22px 0 var(--glow-color-10, hsl(42deg 51% 67% / 10%)), 0 0 1px 0 var(--glow-color-60, hsl(42deg 51% 67% / 60%)), 0 0 2px 0 var(--glow-color-50, hsl(42deg 51% 67% / 50%)), 0 0 4px 0 var(--glow-color-40, hsl(42deg 51% 67% / 40%)), 0 0 7px 0 var(--glow-color-30, hsl(42deg 51% 67% / 30%)), 0 0 11px 0 var(--glow-color-20, hsl(42deg 51% 67% / 20%)), 0 0 18px 0 var(--glow-color-10, hsl(42deg 51% 67% / 10%)); } .border-glow-inner{ display:flex; flex-direction:column; position:relative; overflow:auto; z-index:1; } /* Mobile mount guard. The outer sheen sits at inset:-30px (--glow-padding), which the .wrap gutter absorbs on desktop but not on a phone: at 390px the document measured scrollWidth 405 against clientWidth 390, and because the pages are dir=rtl the page came to rest at scrollLeft -15 after any horizontal flick. Below 760px the halo collapses onto the card edge instead. The sheen itself is untouched: the ladder above is box-shadow, and box-shadow never contributes to scrollable overflow, so only the 30px of outward reach is given up where there is no gutter to hold it. */ @media(max-width:760px){ .border-glow-card > .edge-light{inset:0} .border-glow-card > .edge-light::before{inset:0} }