/* ==========================================================================
fp-pi - PROFILE IMAGE unit (site-wide package).
--------------------------------------------------------------------------
One unit class, .fp-pi, applied by assets/js/fp-pi.js to every profile
picture of the site: hero, profile page, roster cards, fight lists, board
tables. Position and size do not matter: the unit works on an ![]()
and on
a frame that contains it, and every measurement is a percentage of the box,
so the look is the same at 48px and at 640px.
Inside the package live the two building blocks (names preserved):
1. fp-profile-image ............... bottom-right corner cut (the notch)
2. fp-profile-image-hover-effect .. the hover lift of the theme button
(assets/css/fp-combat.css: .fp-btn--primary): a light sheen that sweeps
across the box plus a red glow, no displacement.
The rail of the hero rotation (fp-profile-image-slider-effect) is NOT part
of this package: it stays in assets/css/fp-profile-image.css.
Tunables:
--fp-pi-cut notch size (default min(12%, 48px))
Opt-out: data-fp-pi="off" on the picture or on any ancestor.
Disabled by prefers-reduced-motion: reduce.
No !important, no theme selector redefined. The picture is never given a
layout property: position, display and overflow are set ONLY on the wrapper
the driver marks as the shell ([data-fp-pi-shell="1"]), so the hover sheen
has a single box to sweep across; the photo itself only receives the notch,
a brightness lift and a glow.
========================================================================== */
/* ==========================================================================
1. fp-profile-image - bottom-right corner cut.
The clip-path is on the unit itself: on a frame it cuts photo and overlays
together, on a bare ![]()
it cuts the photo. Percentages resolve against the
element box, so the notch scales by itself; the px cap keeps it sane on very
large pictures. The legacy variable name is kept as an alias.
========================================================================== */
.fp-pi,
.fp-profile-image {
--fp-pi-cut: min(12%, 48px);
--fp-profile-image-cut: var(--fp-pi-cut);
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fp-pi-cut)), calc(100% - var(--fp-pi-cut)) 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fp-pi-cut)), calc(100% - var(--fp-pi-cut)) 100%, 0 100%);
}
/* ==========================================================================
2. fp-profile-image-hover-effect - the hover lift of the theme button.
Same ingredients and timings as the primary button of the site
(assets/css/fp-combat.css: .fp-btn--primary):
- the light sheen that sweeps across the box (.fp-btn::before), painted
by the shell in 2c when the unit is a bare picture;
- the red glow: box-shadow 0 10px 34px -14px var(--c-red-glow);
- a fast brightness lift; no movement.
The old pointer displacement (`translate` on hover) is gone: the photo no
longer shifts under the cursor.
clip-path is listed too: for a photo inside the unit this rule outranks the
theme rule img[data-fp-media] (assets/css/fp-combat.css), which wipes the
media in with its own clip-path, so listing clip-path keeps that reveal
animating on the same element and only the timings change.
========================================================================== */
.fp-pi > img:not(.fp-pi),
.fp-profile-image .fp-hero__photo,
.fp-profile-image-hover-effect .fp-hero__photo,
img.fp-pi {
translate: 0 0;
scale: 1;
transition-property: translate, scale, transform, filter, box-shadow, clip-path;
transition-duration: var(--t-ui, 200ms), var(--t-ui, 200ms), var(--t-card, 420ms), var(--t-ui, 200ms), var(--t-ui, 200ms), var(--t-section, 760ms);
transition-timing-function: var(--ease-spring, cubic-bezier(.2, .9, .25, 1.12)), var(--ease-spring, cubic-bezier(.2, .9, .25, 1.12)), var(--ease-spring, cubic-bezier(.2, .9, .25, 1.12)), var(--ease-out, cubic-bezier(.33, 1, .68, 1)), var(--ease-out, cubic-bezier(.33, 1, .68, 1)), var(--ease-out, cubic-bezier(.33, 1, .68, 1));
}
@media (hover: hover) and (pointer: fine) {
/* ------------------------------------------------------------------------
2d. Magnetic displacement - the photo travels against the pointer, with
the same feel and amplitude as the theme magnetic button
(assets/js/fp-combat.js, section 8: 6px offset), scaled down to 2% of the
box on small pictures so they never run out of their frame. The offset is
written by assets/js/fp-pi.js on the unit (--fp-pi-mx / --fp-pi-my) and
inherited by the photo; the 5% scale of the hover rule below keeps the
frame covered while the picture shifts.
------------------------------------------------------------------------ */
.fp-pi > img:not(.fp-pi),
.fp-profile-image .fp-hero__photo,
.fp-profile-image-hover-effect .fp-hero__photo,
img.fp-pi {
translate: var(--fp-pi-mx, 0px) var(--fp-pi-my, 0px);
}
/* While the pointer is inside, the offset is followed without the return
spring (130ms smoothing only), exactly like the theme button. */
.fp-pi--magnet > img:not(.fp-pi),
img.fp-pi.fp-pi--magnet {
transition-duration: 130ms, 260ms, var(--t-card, 420ms), var(--t-ui, 200ms), var(--t-ui, 200ms), var(--t-section, 760ms);
transition-timing-function: var(--ease-out, cubic-bezier(.33, 1, .68, 1)), var(--ease-out, cubic-bezier(.33, 1, .68, 1)), var(--ease-spring, cubic-bezier(.2, .9, .25, 1.12)), var(--ease-out, cubic-bezier(.33, 1, .68, 1)), var(--ease-out, cubic-bezier(.33, 1, .68, 1)), var(--ease-out, cubic-bezier(.33, 1, .68, 1));
}
.fp-pi:hover > img:not(.fp-pi),
.fp-pi:focus-within > img:not(.fp-pi),
.fp-profile-image-hover-effect:hover .fp-hero__photo,
.fp-profile-image-hover-effect:focus-within .fp-hero__photo,
img.fp-pi:hover,
img.fp-pi:focus-visible {
scale: 1.05;
box-shadow: 0 10px 34px -14px var(--c-red-glow, rgba(190, 29, 44, .35));
filter: brightness(1.06) saturate(1.03);
}
}
/* --------------------------------------------------------------------------
2b. Profile photos the theme reveals with its own clip-path wipe
(assets/css/fp-combat.css: img[data-fp-media] { clip-path: inset(0 0 100% 0) }
and img[data-fp-media].is-in { clip-path: inset(0 0 0 0) }). That selector is
more specific than .fp-pi, so the notch would be thrown away. The wipe is
repeated here with two polygons: a polygon interpolates into a polygon, so
the reveal animation is preserved and it now ends on the cut corner instead
of a plain rectangle. The attribute [data-fp-pi-unit] (written by
assets/js/fp-pi.js) keeps the selector above the theme one, without
!important.
-------------------------------------------------------------------------- */
img.fp-pi[data-fp-media][data-fp-pi-unit] {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
img.fp-pi[data-fp-media][data-fp-pi-unit].is-in {
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fp-pi-cut)), calc(100% - var(--fp-pi-cut)) 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fp-pi-cut)), calc(100% - var(--fp-pi-cut)) 100%, 0 100%);
}
/* --------------------------------------------------------------------------
2c. Shell - the wrapper of a bare profile picture.
A replaced element has no pseudo box, so on a bare ![]()
the sheen that
gives the theme button its hover has nowhere to be painted: it is painted
here, on the wrapper that assets/js/fp-pi.js marks with
[data-fp-pi-shell="1"] (same geometry, gradient and timing as
.fp-btn::before). The wrapper is promoted to a single block box and takes
the same notch as the picture, so the sweep is clipped exactly like the
photo. The driver never marks a wrapper the theme already paints its own
::after on, and drops the mark if the promotion moves the photo.
-------------------------------------------------------------------------- */
[data-fp-pi-shell="1"] {
position: relative;
display: block;
overflow: hidden;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - min(12%, 48px)), calc(100% - min(12%, 48px)) 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - min(12%, 48px)), calc(100% - min(12%, 48px)) 100%, 0 100%);
}
[data-fp-pi-shell="1"]::after {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
z-index: 2;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
transform: skewX(-18deg);
pointer-events: none;
transition: left var(--t-card, 420ms) var(--ease-out, cubic-bezier(.33, 1, .68, 1));
}
[data-fp-pi-shell="1"]:hover::after,
[data-fp-pi-shell="1"]:focus-within::after { left: 130%; }
/* --------------------------------------------------------------------------
Reduced motion: the photo stays still, the notch stays (it is a shape, not
a movement).
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.fp-pi > img:not(.fp-pi),
.fp-profile-image .fp-hero__photo,
.fp-profile-image-hover-effect .fp-hero__photo,
img.fp-pi,
.fp-pi:hover > img:not(.fp-pi),
.fp-pi:focus-within > img:not(.fp-pi),
.fp-profile-image-hover-effect:hover .fp-hero__photo,
.fp-profile-image-hover-effect:focus-within .fp-hero__photo,
img.fp-pi:hover {
translate: 0 0;
scale: 1;
}
[data-fp-pi-shell="1"]::after { transition-property: none; }
[data-fp-pi-shell="1"]:hover::after,
[data-fp-pi-shell="1"]:focus-within::after { left: -120%; }
}