/* ============================================================================ fc-2026 GLOW PILL Matched frame-by-frame against three photographs of the EA FC 2026 focused menu button ("A Edit Player Injuries"). Everything below is derived from those frames; see README.md for the measurement notes. Structure, bottom to top: 1. element background = the fill (a STATIC vertical ramp: cyan-blue at the top, indigo-violet at the bottom) 2. inset box-shadow = the ring: a static bright-cyan hairline 3. .fcbtn__glow = an SVG whose rect IS the rim; the ONLY extra markup 4. its strokes = the travelling light, drawn ON that rim 5. content z-index 3 = badge + label The light is a dashed STROKE on the rim path. That is the whole trick: a stroke bends with the path, so the light can never leave the border, and with pathLength="100" the dash is measured in percent of the perimeter, so it also travels at a constant speed. Earlier versions moved a rigid capsule along `offset-path`; a straight box cannot follow a curve, and on the caps its tangent peeled away from the rim and flew off as a separate streak. See "the border" below. Everything scales from one number: --fc-size (the label font-size). All internal measurements are in em, so setting --fc-size resizes the whole pill. ========================================================================== */ .fcbtn{ /* ---- the one dial ---- */ --fc-size: 16px; /* ---- geometry (multiples of --fc-size, measured off the frames) ---- */ --fc-h: 3.7em; /* frame 2: cap-height is 0.217 of the pill height, badge 0.373, left pad 0.47, gap 0.19 */ --fc-pad-l: 1.74em; --fc-pad-r: 2.14em; --fc-gap: 0.72em; --fc-badge: 1.4em; --fc-ring-w: 0.075em; /* 1.2px at 16px. Measured: the bright line spans ~1.8% of the pill height, which is 0.067em. */ /* ---- the border ---- */ /* Re-measured off the three photographs, ring core and outward bloom, on every edge and both caps. Four things came back, and three of them contradict what this file used to do. 1. NO PINK. A magenta sweep of the whole ring in all three frames returns 0.00%, 0.25% and 0.06% of sampled pixels, and the brightest of those sits at hue 272deg, which is violet. The old #e9aee2 pink and #b4ea67 yellow-green were both invented. 2. Travel is UNIFORM ALONG THE PERIMETER, not conic. A conic gradient spends few degrees on a cap and many on a long edge, so a comet of fixed angular width covers about twice as much perimeter on a cap as on a straight edge. The frames show the opposite: 13% of the perimeter on the right cap, 18% on the bottom straight, i.e. equal within the noise of the sampling. Hence a dashed stroke with pathLength="100", whose dash units ARE arc length. 3. The base ring does NOT glow outward. Outside a plain cyan stretch the luminance falls to about 0.7x the background within 1.3% of the pill height before recovering, so there is a faint DARK band out there, not a cyan wash. Only the comet blooms, and it carries a long way: still twice the background 4.7% of the height out. 4. The comet has two lobes with a duller waist between them. Read in the direction of travel: a bright blue-white head running to violet, then the waist, then a dimmer mint tail. Measured spans, in units of the pill height: head 0.61, waist 0.38, tail 0.48, so 1.47 end to end, which is 15.4% of the perimeter at this aspect ratio. Not determinable from three stills: which way it goes round. The colour order is fixed to the pattern, so it cannot settle the direction on its own. Clockwise is kept from the previous build. Flip --fc-dir to reverse. */ --fc-ring-c: #76f5f9; /* hue 182deg. The photo clips it to near-white at L 0.80 S 0.98, so this is a floor, not a ceiling. */ --fc-edge-dark: rgba(4,10,26,.5); /* The beam is a seven-step colour ramp laid along the rim, sampled from the measured RING-CORE sweep of the photographs. A single stroke cannot carry a gradient along a path, so the ramp is seven dashes on the same rect, staggered by --fc-beam-step. What the light does to the border is a HUE change, not a brightness spike. The trailing end is actually DARKER than the unlit ring (L .70 against .72), which is what makes it read as a tail rather than a lamp. Two things destroyed that in earlier builds, both caught only by measuring the line itself rather than looking at the picture: - mix-blend-mode:screen. Screen can only brighten toward white, never shift hue away from the backdrop, so the cyan ring stayed cyan and merely went pale. Hue moved 181.8 -> 182.3 across the whole beam, against 181 -> 157 -> 230 in the frames. - three dashes overlapping by 67%. The last one painted covered nearly all of the beam, so only its colour ever reached the line. Hue got to 193 and stopped. Seven segments at 38% overlap: enough to read as one continuous beam, not so much that a segment buries its neighbour. Listed trailing to leading, which is also paint order, so the head lands on top of the tail. */ /* The ramp, trailing (s1) to leading (s20), resampled from the measured sweep. Twenty steps, not seven: at seven the hue jumped ~20deg between adjacent dashes and the beam read as blocks patched together. Blur cannot fix that, because blur is isotropic - smoothing a 24px seam would need an 8px radius, which would balloon a 4px stroke into a haze. Resolution is the only lever, and at 20 the largest step is 10.5deg, most are under 5. --fc-oN is the taper: a raised cosine over the outer 26% at each end, so the beam fades in and out instead of stopping dead. Where a segment is partly transparent the ring's own cyan shows through it, so the light fades back INTO the border. */ --fc-s1: #86dfbd; --fc-o1: 0.06; --fc-s2: #8fe0c4; --fc-o2: 0.152; --fc-s3: #94e0ca; --fc-o3: 0.392; --fc-s4: #94e0d2; --fc-o4: 0.685; --fc-s5: #97e2df; --fc-o5: 0.918; --fc-s6: #9cdee6; --fc-o6: 1.0; --fc-s7: #a4d7eb; --fc-o7: 1.0; --fc-s8: #acd2ef; --fc-o8: 1.0; --fc-s9: #b5cff3; --fc-o9: 1.0; --fc-s10: #b9c9f8; --fc-o10: 1.0; --fc-s11: #bbc7fa; --fc-o11: 1.0; --fc-s12: #bac8f7; --fc-o12: 1.0; --fc-s13: #c2d3fb; --fc-o13: 1.0; --fc-s14: #c7d9fe; --fc-o14: 1.0; --fc-s15: #c0d5fd; --fc-o15: 1.0; --fc-s16: #c0dafe; --fc-o16: 0.918; --fc-s17: #bfe1fe; --fc-o17: 0.685; --fc-s18: #b1e3fd; --fc-o18: 0.392; --fc-s19: #a3e9fc; --fc-o19: 0.152; --fc-s20: #94f1f9; --fc-o20: 0.06; --fc-beam-len: 1.1; /* each dash, in percent of the perimeter */ --fc-beam-step: 0.75; /* and how far apart they sit; 1.1 + 19x0.75 = 15.35% total, against 15.4% measured off the frames. The dash is 1.5x the step so neighbours always overlap and can never leave a hairline gap. */ /* ---- the tube ---- */ /* The light is the BORDER, not something riding above it, so the stroke is laid exactly over the ring hairline: same radius, barely wider, barely blurred. As the light passes, the rim itself changes colour. The spread then lives in a drop-shadow on the hot segment: light escaping through the tube wall. Measured as excess luminance (comet stretch minus a plain stretch, at the same distance from a rim line fitted through the plain stretches only, so the ring's own brightness cancels), it is an OUTSIDE glow and a small one: distance from rim IMG_9324 IMG_9325 (+ is outward, in pill heights) +0.010 +134 +113 <- the peak, just outside +0.035 +57 +63 +0.070 +19 +41 -0.035 +42 +12 -0.070 +9 +0 */ --fc-beam-out: calc(-0.5 * var(--fc-ring-w)); /* centred ON the ring */ --fc-beam-w: 0.125em; /* the ring is 0.075em. It has to be clearly wider, not a hair: several of the beam's colours are DARKER than the ring, so at 0.095em the ring's cyan bled back through the stroke's antialiased edges and pulled the line's hue sweep from 73deg down to 46. At 2x it stops being the border and becomes a bar laid over it, so 1.7x. */ --fc-beam-blur: 0.022em; /* smooths the colour steps into one ramp. Applied to the whole beam at once, so it can never vary the beam's width. Swept 0.022 / 0.030 / 0.038 / 0.045: bigger values smear the ramp and cost hue span (72 / 68 / 63 / 53 degrees against the reference's 73) without buying any smoothness, since the joins already have none to fix. */ --fc-bloom: 0.11em; /* the light escaping through the tube wall */ --fc-bloom-c: rgba(205,228,255,.55); --fc-glow-pad: 0.70em; /* room around the pill for the bloom to spread */ --fc-spin: 5s; /* one lap of the perimeter. The ONLY motion. */ /* ---- the fill ---- */ /* Sampled off the three photographs, in a text-free column between the end of "Injuries" and the start of the right cap, 16 bands top to bottom. What the pixels say, and it is the same in all three frames: pos hue L S the hue rotates 202deg -> 244deg, 3% 203.3 54.7 55.8 top to bottom, almost perfectly 28% 214.0 53.9 54.9 linear. Lightness and saturation are 53% 226.1 59.8 46.3 effectively flat. 78% 240.0 58.6 56.4 90% 243.0 58.4 56.6 Two consequences, both of which the earlier versions of this file got wrong: 1. The split is VERTICAL and it does not move. Cyan-blue lives in the upper half, indigo-violet in the lower half, and neither crosses. 2. There is no horizontal variation at all (207-211deg across the whole upper strip, 232-241deg across the whole lower strip) and no frame-to -frame variation. So the fill does not animate. The travelling comet in the ring is the only motion on this button. Hue below is exactly as measured. Saturation is scaled x1.35 and lightness x0.97, because the reference is a phone photograph of a screen and a camera lifts the floor and flattens saturation. The L bump and S dip around the 40-53% rows are glow off the label, not a band in the fill, so L and S are smoothed straight through them. One deliberate departure, below the 50% line only. Hue alone does not decide whether a colour reads blue or violet: at the same measured ~236deg, the photo's lower half sits at S 0.56 and reads violet, while the x1.35 boost put it at S 0.76, which reads electric blue. So the boost tapers from x1.35 at the midline to x1.05 at the bottom rim, and the hue is allowed to run +5deg past the last clean reading by the bottom. That extrapolation is inside the measured trend: the profile is still climbing at ~0.4deg per 1% when the ring's bloom takes over the sampling at 86%. Against the photo's lower half this scores an RMS of 21.8 in RGB, down from 28.4. */ --fc-fill: linear-gradient(180deg, #2ea0e2 0%, /* 202deg cyan-blue, top rim */ #308ee2 15%, #327ee3 28%, #336fe3 40%, #365de2 53%, /* below here the saturation boost eases off and the */ #3d4bde 65%, /* hue leans a few degrees further round, which is */ #4a43da 78%, /* what turns the lower half from electric blue into */ #5a49d6 90%, /* violet. Nothing above 50% is touched. */ #634fd2 100%); /* 250deg violet, bottom rim */ --fc-label:#f5f2ea; --fc-badge-face:#f3f1e6; --fc-badge-ink:#16203a; --fc-font: 'Montserrat', 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; position:relative; isolation:isolate; display:inline-flex; align-items:center; gap:var(--fc-gap); box-sizing:border-box; height:var(--fc-h); padding:0 var(--fc-pad-r) 0 var(--fc-pad-l); border:0; border-radius:999px; cursor:pointer; font-family:var(--fc-font); font-size:var(--fc-size); font-weight:800; letter-spacing:0; line-height:1; color:var(--fc-label); text-shadow:0 0 .5em rgba(214,240,255,.35); /* One layer. The measured lightness actually RISES slightly toward the bottom (54.7 -> 58.4), so the usual gloss-on-top / shade-at-the-bottom treatment is wrong here and is deliberately absent. */ background:var(--fc-fill); /* The ring itself is the first inset shadow: a static bright-cyan hairline on the rim. Outside it goes the faint DARK band the frames show (the old uniform cyan wash out here was measurably wrong: on a plain stretch the luminance dips BELOW the background before recovering). Then the drop shadow, then the hairline highlight just inside the rim. */ box-shadow: inset 0 0 0 var(--fc-ring-w) var(--fc-ring-c), 0 0 .18em var(--fc-edge-dark), 0 .12em .5em rgba(6,14,48,.45), inset 0 .06em 0 rgba(255,255,255,.2); transition:filter .18s cubic-bezier(.22,1,.36,1), transform .12s cubic-bezier(.22,1,.36,1); -webkit-tap-highlight-color:transparent; } .fcbtn > *:not(.fcbtn__glow){ position:relative; z-index:3 } /* ------------------------------------------------------------- the comet */ /* The SVG is the pill's box grown by --fc-glow-pad so the blur has somewhere to go; the rect inside is put back exactly on the rim, then pushed out by --fc-beam-out. Its rx makes it a stadium, so it coincides with the pill's own border-radius:999px at every point, caps included. pathLength="100" (an attribute, it cannot be set from CSS) relabels the perimeter as 0-100 whatever the button's width, so the dash lengths below are percentages of the perimeter and the animation walks exactly one lap. */ .fcbtn__glow{ position:absolute; z-index:1; left:calc(-1 * var(--fc-glow-pad)); top:calc(-1 * var(--fc-glow-pad)); width:calc(100% + 2 * var(--fc-glow-pad)); height:calc(100% + 2 * var(--fc-glow-pad)); overflow:visible; /* SVG clips to its viewport by default */ pointer-events:none; /* The blur and the bloom go HERE, on the whole SVG, not on each dash. Per dash they made seven separately-glowing objects: every join grew a bulge, every segment carried its own halo, and one carried an extra one, so the beam read as a lumpy train of varying width. Filtering the group composites the seven dashes into ONE shape first, then lights that shape once. */ filter:blur(var(--fc-beam-blur)) drop-shadow(0 0 var(--fc-bloom) var(--fc-bloom-c)); } .fcbtn__glow rect{ x:calc(var(--fc-glow-pad) - var(--fc-beam-out)); y:calc(var(--fc-glow-pad) - var(--fc-beam-out)); width: calc(100% - 2 * var(--fc-glow-pad) + 2 * var(--fc-beam-out)); height:calc(100% - 2 * var(--fc-glow-pad) + 2 * var(--fc-beam-out)); rx:calc(var(--fc-h) / 2 + var(--fc-beam-out)); fill:none; stroke-width:var(--fc-beam-w); stroke-linecap:butt; /* round caps put a bulge at every overlap */ stroke-dasharray:var(--fc-beam-len) calc(100 - var(--fc-beam-len)); animation:fc-run var(--fc-spin) linear infinite; animation-direction:var(--fc-run-dir, normal); } /* A negative delay of k laps advances a dash by k of the perimeter, which is how the seven colours are spaced into one beam. */ .fcbtn__glow rect:nth-of-type(1){ stroke:var(--fc-s1); stroke-opacity:var(--fc-o1); } .fcbtn__glow rect:nth-of-type(2){ stroke:var(--fc-s2); stroke-opacity:var(--fc-o2); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 1 / -100); } .fcbtn__glow rect:nth-of-type(3){ stroke:var(--fc-s3); stroke-opacity:var(--fc-o3); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 2 / -100); } .fcbtn__glow rect:nth-of-type(4){ stroke:var(--fc-s4); stroke-opacity:var(--fc-o4); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 3 / -100); } .fcbtn__glow rect:nth-of-type(5){ stroke:var(--fc-s5); stroke-opacity:var(--fc-o5); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 4 / -100); } .fcbtn__glow rect:nth-of-type(6){ stroke:var(--fc-s6); stroke-opacity:var(--fc-o6); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 5 / -100); } .fcbtn__glow rect:nth-of-type(7){ stroke:var(--fc-s7); stroke-opacity:var(--fc-o7); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 6 / -100); } .fcbtn__glow rect:nth-of-type(8){ stroke:var(--fc-s8); stroke-opacity:var(--fc-o8); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 7 / -100); } .fcbtn__glow rect:nth-of-type(9){ stroke:var(--fc-s9); stroke-opacity:var(--fc-o9); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 8 / -100); } .fcbtn__glow rect:nth-of-type(10){ stroke:var(--fc-s10); stroke-opacity:var(--fc-o10); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 9 / -100); } .fcbtn__glow rect:nth-of-type(11){ stroke:var(--fc-s11); stroke-opacity:var(--fc-o11); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 10 / -100); } .fcbtn__glow rect:nth-of-type(12){ stroke:var(--fc-s12); stroke-opacity:var(--fc-o12); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 11 / -100); } .fcbtn__glow rect:nth-of-type(13){ stroke:var(--fc-s13); stroke-opacity:var(--fc-o13); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 12 / -100); } .fcbtn__glow rect:nth-of-type(14){ stroke:var(--fc-s14); stroke-opacity:var(--fc-o14); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 13 / -100); } .fcbtn__glow rect:nth-of-type(15){ stroke:var(--fc-s15); stroke-opacity:var(--fc-o15); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 14 / -100); } .fcbtn__glow rect:nth-of-type(16){ stroke:var(--fc-s16); stroke-opacity:var(--fc-o16); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 15 / -100); } .fcbtn__glow rect:nth-of-type(17){ stroke:var(--fc-s17); stroke-opacity:var(--fc-o17); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 16 / -100); } .fcbtn__glow rect:nth-of-type(18){ stroke:var(--fc-s18); stroke-opacity:var(--fc-o18); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 17 / -100); } .fcbtn__glow rect:nth-of-type(19){ stroke:var(--fc-s19); stroke-opacity:var(--fc-o19); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 18 / -100); } .fcbtn__glow rect:nth-of-type(20){ stroke:var(--fc-s20); stroke-opacity:var(--fc-o20); animation-delay:calc(var(--fc-spin) * var(--fc-beam-step) * 19 / -100); } /* anticlockwise: run the same keyframes backwards */ .fcbtn[data-fc-dir="-1"]{ --fc-run-dir:reverse } /* --------------------------------------------------------------- the badge */ .fcbtn__badge{ display:inline-flex; align-items:center; justify-content:center; width:var(--fc-badge); height:var(--fc-badge); border-radius:50%; flex:none; background:var(--fc-badge-face); color:var(--fc-badge-ink); font-family:var(--fc-font); font-weight:800; font-size:.9em; line-height:1; letter-spacing:0; box-shadow: 0 0 .34em rgba(255,255,255,.3), inset 0 0 0 .055em rgba(22,32,58,.2); } .fcbtn__label{ white-space:nowrap } /* --------------------------------------------------------------- behaviour */ .fcbtn:hover{ filter:brightness(1.07) saturate(1.04) } .fcbtn:active{ transform:scale(.985); filter:brightness(.97) } .fcbtn:focus-visible{ outline:none; filter:brightness(1.07) saturate(1.04); } /* ------------------------------------------------------------------ motion */ @keyframes fc-run { to { stroke-dashoffset:-100 } } @media (prefers-reduced-motion:reduce){ .fcbtn__glow rect{ animation:none; stroke-dashoffset:-44 } /* right cap, roughly frame IMG_9323 */ } @media print{ .fcbtn__glow{ display:none } } /* ------------------------------------------------------------------- sizes */ .fcbtn--sm{ --fc-size:13px } .fcbtn--lg{ --fc-size:22px } .fcbtn--xl{ --fc-size:34px }