/* ══ the printed fighter card ═════════════════════════════════════════════ A direct port of apps/web/public/lab/fighter-card.html, which is where this design was argued out over many rounds. Every dimension is kept EXACTLY as drawn there — 1080x1440, and every size in absolute pixels — because the card is a composition, not a responsive layout: it is scaled as a whole rather than reflowed, so it looks the same at any size and can be exported at full resolution later. Class names carry an fx- prefix. The lab was a standalone page and could afford .name, .row and .lab; inside the site those collide with real rules. To size one: set --fx-scale on the card, and give its wrapper the resulting height, since a transform does not affect layout. ───────────────────────────────────────────────────────────────────────── */ .event-tel .fx-wrap { /* A transformed element still occupies its untransformed box, so the wrapper reserves the scaled size and clips the rest. Without this every card would claim 1440px of page whatever it was scaled to. */ position: relative; overflow: hidden; width: calc(1080px * var(--fx-scale, .5)); height: calc(1440px * var(--fx-scale, .5)); flex: none; } .event-tel .fx-card { --ink: #f4f7fa; --dim: #8b9aa8; --bg: #070a0e; font-family: var(--body, "IBM Plex Sans", system-ui, sans-serif); color: var(--ink); } .event-tel .fx-card { width:1080px;height:1440px; transform:scale(var(--fx-scale, .5));transform-origin:top left; position:relative;overflow:hidden;background:var(--bg); display:flex;flex-direction:column; --accent:#38bdf8; --accent-dim:#38bdf833; } /* the ground: a wash of the accent from below, so the colour reads even where the card is mostly black */ .event-tel .fx-card::before {content:"";position:absolute;inset:0; background: radial-gradient(120% 68% at 50% 104%, var(--accent-dim) 0%, transparent 62%), linear-gradient(180deg,#0b1219 0%, #070a0e 46%, #05080b 100%);} /* cage mesh, very faint, so the black is not flat. On ::before's sibling rather than ::after, which the frame now owns. */ .event-tel .fx-card > .fx-mesh {position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055; background-image:repeating-linear-gradient(58deg,#fff 0 1px,transparent 1px 26px), repeating-linear-gradient(-58deg,#fff 0 1px,transparent 1px 26px)} .event-tel .fx-card > * {position:relative;z-index:2} /* ── tier frames ───────────────────────────────────────────────────────── The accent says what KIND of fighter; the frame says how far he got. Two systems on two different visual channels, so a grid of these can be read twice — the way a collectable set separates faction from rarity. Tier is the record, not a rating: won a title fight, fought for one, headlined, won three, on the roster. 9% of the deck are champions, which is about the right scarcity for the top treatment to mean something. */ .event-tel .fx-card.fx-t1 {--frame:transparent;--frame2:transparent;--flag:#3a4653;--flagink:#cbd5e1} .event-tel .fx-card.fx-t2 {--frame:#2a3642;--frame2:#2a3642; --flag:#55677c;--flagink:#0b1016} .event-tel .fx-card.fx-t3 {--frame:#5a6b7d;--frame2:#42505f; --flag:#93a7bb;--flagink:#0b1016} .event-tel .fx-card.fx-t4 {--frame:#c8d4e0;--frame2:#7d8b99; --flag:#c8d4e0;--flagink:#0b1016} /* silver */ .event-tel .fx-card.fx-t5 {--frame:#f2c14e;--frame2:#9a6f1e; --flag:#f2c14e;--flagink:#0b1016} /* gold */ /* The corner flag. The frame alone was too quiet to separate five tiers — a silver border and a grey one are the same thing at thumbnail size — so the tier also gets said out loud, in the corner, in its own colour. --flag is kept separate from --frame because tier 1 has no border at all and still has to be able to state what it is. */ .event-tel .fx-card > .fx-tierflag {position:absolute;top:0;right:0;width:120px;height:120px;z-index:11; overflow:hidden;pointer-events:none} .event-tel .fx-tierflag i {position:absolute;inset:0;background:var(--flag); clip-path:polygon(100% 0,0 0,100% 100%)} /* Stacked, not inline: the word is a label and the number is the value, and at grid size the number is the only part that has to survive. */ /* Narrower than the triangle it sits in. A block as wide as the corner overruns the hypotenuse once it is rotated, and the ends get clipped — the label has to fit the width available at the depth it sits at. */ .event-tel .fx-tierflag b {position:absolute;top:25px;right:8px;width:70px; transform:rotate(45deg);text-align:center;color:var(--flagink);line-height:1} .event-tel .fx-tierflag .fx-tw {display:block;font-size:10px;font-weight:800;letter-spacing:.2em; opacity:.75} .event-tel .fx-tierflag .fx-tn {display:block;font-size:27px;font-weight:800;letter-spacing:-.01em; margin-top:1px} .event-tel .fx-card::after {content:"";position:absolute;inset:0;z-index:9;pointer-events:none; border:7px solid transparent; background:linear-gradient(150deg,var(--frame),var(--frame2) 42%,var(--frame) 78%) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude} .event-tel .fx-card.fx-t5::after {box-shadow:inset 0 0 42px -14px #f2c14e88} .event-tel .fx-topbar {display:flex;gap:18px;align-items:center; padding:34px 46px 0;font-size:20px;letter-spacing:.22em;text-transform:uppercase; color:var(--dim);font-weight:600} .event-tel .fx-namebar {padding:14px 46px 0;display:flex;align-items:flex-start;gap:20px;z-index:5} .event-tel .fx-namebar .fx-who {flex:1;min-width:0} .event-tel .fx-nick {font-size:26px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent); font-weight:600;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .event-tel .fx-name {font-size:94px;line-height:.92;font-weight:800;letter-spacing:-.022em; text-transform:uppercase;margin:0;text-wrap:balance} /* Sized by measurement, not by character count — see fitName(). Counting characters had CONOR MCGREGOR wrapping onto two lines while the longer KHABIB NURMAGOMEDOV sat on one, because the count picked the tier and the tier picked a size that happened to fit the longer string better. */ /* inline-block so the box hugs the TEXT. As a block it filled the column whatever the text did, so scrollWidth reported the column width and fitName could not tell a name that fits from one that does not — it only ever worked because `room` happened to equal that same width. */ .event-tel .fx-name {white-space:nowrap;display:inline-block;max-width:100%} .event-tel .fx-flag {display:block;width:88px;height:62px;object-fit:cover;border-radius:5px; box-shadow:0 0 0 1px #ffffff22, 0 8px 18px #0009;margin-top:12px} /* Pulled up so the box reaches the underside of the NAME, not the underside of the whole name block. The graph fills this box, so every pixel the box gains is graph — and the nickname and flag sit above it on z-index 5, so they read over the top of it rather than being pushed out of the way. overflow:hidden stays: without it the 112% portrait runs down through the stat rows and a torso competes with the numbers. */ .event-tel .fx-figure {flex:1;position:relative;margin-top:-118px;overflow:hidden} /* Bigger than the figure and drawn OVER it, so the vertices carry past the silhouette instead of hiding behind it. At .5 opacity behind the fighter the shape was invisible, which cost the card its whole signature. */ /* Filled to the figure on BOTH axes rather than held square. It was a fixed 1010px, which could not fit a box roughly 500 tall, so the top vertex was cut off by the overflow that keeps the portrait in. Holding it square instead fixed the clipping but left it tiny, because a square that fits the height of a 1080-wide box only covers half its width. The shape is a backdrop, not a chart to be measured off, so it stretches. */ .event-tel .fx-hex {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:68%;height:100%;opacity:.95;z-index:3;pointer-events:none; mix-blend-mode:screen} .event-tel .fx-hex svg {width:100%;height:100%;display:block} /* Axis labels as HTML, not inside the SVG. The graph is stretched — 68% of the card width against 100% of a much shorter figure, with preserveAspectRatio="none" — so anything drawn in the SVG is squashed horizontally with it. Type cannot take that. Positioned here from the same geometry, it stays the shape it was designed as. */ /* A hint, not a label. Thin, small and faint enough to disappear into the graph until you look for it — it has to survive crossing the fighter, and at any real weight it read as text laid over his face. */ /* The axis labels sit ON the photograph, so their contrast is whatever that part of the fighter happens to give them — nothing at all against a pale shoulder. Sean Woodson's card measured 3.43:1 on "Experience" where Umar Nurmagomedov's passed, purely because the two men are lit differently. That is the trap this project already wrote down for the films: put text on its own backing rather than tuning a colour to one image. The halo is that backing. It costs nothing against the dark parts of a cutout and holds the label up against the light ones. */ .event-tel .fx-hexlab {position:absolute;transform:translate(-50%,-50%);white-space:nowrap; font-size:13px;font-weight:300;letter-spacing:.22em;text-transform:uppercase; color:#fff;opacity:.26;pointer-events:none; text-shadow:0 1px 3px #000c, 0 0 7px #000a, 0 0 14px #0008} /* The fighter is the card. At 104% the art sat in the middle of a lot of empty ground and the composition read as a diagram with a person on it; letting it run past the frame on both axes makes it a portrait again. */ /* Anchored to the TOP, not the bottom. UFC art is framed head to toe, so scaling it up from the bottom pushed heads off the card — Khabib lost his at 130%. Anchored high, the feet run into the fade at the bottom instead, which nobody misses and every card survives. */ /* Head up to the name. The fighter is the card, so he takes the room: the top sits just under the name and the height carries him past the bottom of the box, where the fade and the overflow take his legs. He is centred, so this does not touch the nickname or the flag on the left — those end well before he begins. */ .event-tel .fx-portrait {position:absolute;left:50%;top:20px;transform:translateX(-50%); height:132%;width:auto;object-fit:contain;object-position:top; filter:drop-shadow(0 30px 54px #000d)} /* the art fades into the stat block rather than being guillotined by it */ .event-tel .fx-figure::after {content:"";position:absolute;inset:0;pointer-events:none;z-index:4; background:linear-gradient(180deg,transparent 54%, #06090d 92%)} /* Edge to edge and square. As an inset rounded pill it read as a button sitting on the card; run full width it reads as a band the card is built from, and it gives the accent enough area to carry across a grid. */ .event-tel .fx-arch {margin:0;padding:16px 46px;border-radius:0; background:var(--accent);color:#05080b; font-size:31px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; text-align:center} /* ── finish badges ─────────────────────────────────────────────────────── Octagons, in the cage with the fighter. They were a strip of chips below the archetype; moving them up gives the portrait back the height they were taking and puts the two numbers people actually brag about where the eye already is. Still a separate system from the bars: a count, not a percentile, and a fixed colour on every card rather than the fighter's accent — a knockout is a knockout on anybody's card. */ .event-tel .fx-badges {position:absolute;inset:0;z-index:6;pointer-events:none} /* THE RUN. Top right of the figure, in the corner the KO and SUB marks leave free — they sit at the foot, this sits at the head. Not an octagon like those two, deliberately. They are a pair and they count finishes; this counts something else entirely, and giving it their shape would file it as a third of the same thing. A flame reads at a glance and needs no label. Its orange is its own. Every other colour on this card is spoken for — the family accent, the tier gold, --ko and --sub — and a run belongs to none of them. Measured against the two it could be confused with: 26 dE from the tier gold and 34 from the striker red, so it reads as neither. */ .event-tel .fx-streak {position:absolute;top:34px;right:52px;z-index:7; width:158px;height:180px;pointer-events:none; filter:drop-shadow(0 10px 22px #000c) drop-shadow(0 0 26px #ff7a0055)} .event-tel .fx-streak svg {position:absolute;inset:0;width:100%;height:100%} /* Three lines in one stack: what kind of run, how long, and the word for it. Placed against the shape's MASS, not its box. Both marks are triangles, so the stack sits at whichever end is wide — low in the up triangle, high in the down one. */ /* Lifted clear of the base twice over: the burn filter displaces the bottom edge into licks, and the ember band under it is too dark to read on. */ .event-tel .fx-streak .fx-sk {position:absolute;left:0;right:0;bottom:44px; display:flex;flex-direction:column;align-items:center;line-height:1} .event-tel .fx-streak .fx-sk i {font-style:normal;font-family:var(--body); font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:#3a1400;opacity:.86} /* The apex is a point, so the top line has the least room of the three. */ .event-tel .fx-streak .fx-sk i:first-child {font-size:11px;letter-spacing:.1em} .event-tel .fx-streak .fx-sk b {font-family:var(--disp);font-weight:900; font-size:46px;line-height:.92;color:#3a1400;margin:1px 0} /* The slide. Same slot, same corner, so the two read as one thing that says either climbing or falling. The triangle keeps its width at the TOP and narrows to a point, so the stack sits high in it — the reverse of the flame. Ice blue measured 34 dE from the wrestler accent and 41 from the all-rounder, so it cannot be taken for a family colour. */ .event-tel .fx-streak.fx-cold {filter:drop-shadow(0 10px 22px #000c) drop-shadow(0 0 26px #7fc4e855)} /* Mirrored: the up triangle is wide at the foot so the stack sits low in it, the down triangle is wide at the head so it sits high. Both clear the displaced edge by the same margin. */ .event-tel .fx-streak.fx-cold .fx-sk {bottom:auto;top:44px} .event-tel .fx-streak.fx-cold .fx-sk i, .event-tel .fx-streak.fx-cold .fx-sk b {color:#0d2634} .event-tel .fx-streak.fx-cold .fx-sk b {font-size:40px} .event-tel .fx-streak.fx-cold .fx-sk i:last-child {font-size:11px;letter-spacing:.1em} /* The divisional rank, leading the weight class. Same size and tracking as the division it sits against, in the family accent so it reads as a fact about this man rather than another label. */ .event-tel .fx-rank {color:var(--accent);font-weight:800;letter-spacing:.06em} /* The belt, said in words on the division line. Gold rather than the family accent, so it answers the gold tier flag in the opposite corner — the two are saying the same thing and should look like it. */ .event-tel .fx-champ {color:#f2c14e;font-weight:800} /* The ring is a real nested octagon, not a ::before behind the badge. clip-path creates a stacking context, so a ::before at z-index:-1 paints above the element's own background instead of behind it — the first attempt filled both badges solid and hid the numbers completely. */ .event-tel .fx-badge {position:absolute;width:138px;height:138px;background:var(--bc); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); filter:drop-shadow(0 12px 26px #000b)} .event-tel .fx-badge .fx-in {position:absolute;inset:4px;display:flex; flex-direction:column;align-items:center;justify-content:center; background:#080c11f2; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)} /* The thin line painted on the canvas inside the cage wall, which is what an octagon actually looks like from above. Drawn as two stacked shapes — a filled one and a slightly smaller hole punched over it — because a clip-path cannot carry a border that follows the clip. */ .event-tel .fx-badge .fx-ring {position:absolute;inset:13px;background:var(--ink-dim,#8b96a8);opacity:.45; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)} .event-tel .fx-badge .fx-hole {position:absolute;inset:15px;background:#171c25; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)} .event-tel .fx-badge .fx-bn, .event-tel .fx-badge .fx-bl {position:relative;z-index:2} .event-tel .fx-badge .fx-bn {font-size:48px;font-weight:800;line-height:.86;color:var(--bc); font-variant-numeric:tabular-nums} .event-tel .fx-badge .fx-bl {font-size:19px;font-weight:800;letter-spacing:.16em;color:var(--bc); margin-top:4px} /* Inset from the card edge and lifted clear of the ribbon: at 40px/14px they were crowding both, and a badge touching the trim reads as an overlay rather than as something inside the cage with him. */ /* The SAME colours the result flashes use, taken from the tokens rather than copied — a badge saying KO in one colour while the card beside it flashes KO in another is the site disagreeing with itself. The literals are fallbacks for /cards/ and the films, which inline this stylesheet without event-page.css and so have no tokens to read. */ .event-tel .fx-badge.fx-ko {--bc:var(--ko,#ff2d55);left:92px;bottom:76px} .event-tel .fx-badge.fx-sub {--bc:var(--sub,#a6db3d);right:92px;bottom:76px} .event-tel .fx-badge.fx-none {--bc:#3b4a5c} .event-tel .fx-badge.fx-none .fx-bn, .event-tel .fx-badge.fx-none .fx-bl {color:#7b8b9d} .event-tel .fx-stats {padding:14px 46px 0;display:flex;flex-direction:column;gap:6px} /* 172px clipped "attempts / 15min" to "attempts / 15mi", which is the kind of detail that makes a card look fake. Sized to the longest unit string. */ /* The label track went 246 -> 300 when defence split in two. "GRAPPLING DEFENCE" wants 289px on one line and wrapped inside 246, which made those two rows 69px against everyone else's 63 — nine bars stop reading as one ruler the moment two of them sit at a different pitch. The 54px comes off the rail, which has ten blocks and does not miss it. */ .event-tel .fx-row {display:grid;grid-template-columns:300px 1fr 196px;align-items:center;gap:18px; white-space:nowrap} .event-tel .fx-row .fx-lab {font-size:23px;font-weight:700;letter-spacing:.13em;text-transform:uppercase} /* Ten segments rather than one continuous fill. A bar is read as a length and lengths need a ruler; ten blocks ARE the ruler, so "seven of ten" is countable at a glance without going to the number on the right. It also quantises the difference between, say, 62 and 66 down to nothing, which is honest — a percentile that close is not a real gap. */ .event-tel .fx-row .fx-rail {display:grid;grid-template-columns:repeat(10,1fr);gap:7px;height:22px} .event-tel .fx-row .fx-seg {border-radius:5px;background:#18222d;box-shadow:inset 0 0 0 1px #ffffff0f} .event-tel .fx-row .fx-seg.fx-on {box-shadow:none} /* only the top tier lifts off the card, and only its last two blocks */ .event-tel .fx-row.fx-top .fx-seg.fx-on:nth-child(9) {box-shadow:0 0 12px -3px var(--tip)} .event-tel .fx-row.fx-top .fx-seg.fx-on:nth-child(10) {box-shadow:0 0 20px -1px var(--tip)} .event-tel .fx-row .fx-seg.fx-on {background:var(--lv);box-shadow:none} .event-tel .fx-row.hi .fx-seg.fx-on {box-shadow:0 0 13px -2px var(--lv)} /* ── one tier colour per bar, brightening along it ────────────────────── The whole bar takes the colour of the tier the fighter REACHED, and the blocks brighten left to right within that colour. The previous attempt gave each block its own tier colour, so every row climbed slate-ember-amber-green and came out a small rainbow. It was accurate and useless: the tier a fighter actually reached was the LAST block, which is the least prominent thing in the row. Colouring the whole bar puts that back where it hits first. Brightness is keyed to a block's position out of ten, not to how many are lit, so a three-block bar and a five-block bar in the same tier are not the same — the five-block one carries on into brighter shades rather than re-running the same gradient over more blocks. 1-2 blocks slate 3-5 blocks ember 6-8 blocks amber 9-10 blocks green, and the only tier that glows */ .event-tel .fx-row .fx-rail {display:grid;grid-template-columns:repeat(10,1fr);gap:7px;height:22px} .event-tel .fx-row .fx-seg {border-radius:5px;background:#18222d;box-shadow:inset 0 0 0 1px #ffffff0f} .event-tel .fx-row .fx-seg.fx-on {box-shadow:none} /* only the top tier lifts off the card, and only its last two blocks */ .event-tel .fx-row.fx-top .fx-seg.fx-on:nth-child(9) {box-shadow:0 0 12px -3px var(--tip)} .event-tel .fx-row.fx-top .fx-seg.fx-on:nth-child(10) {box-shadow:0 0 20px -1px var(--tip)} .event-tel .fx-row .fx-seg.fx-on {background:var(--lv);box-shadow:none} .event-tel .fx-row.hi .fx-seg.fx-on {box-shadow:0 0 13px -2px var(--lv)} /* ── four bands, each brightening across its own blocks ───────────────── The four colours are back, but they are no longer four flat fills. Each tier runs dark to bright across the blocks it owns, so a bar carries both readings at once: blocks 1-2 slate, dark -> light blocks 3-5 ember, dark -> bright blocks 6-8 amber, dark -> bright blocks 9-10 green, dark -> bright, and the only two that glow The hue says which tier, which is what the flat version was good at. The brightening says how far into that tier, which is what the single-hue staircase was good at. A four-block ember bar and a five-block one used to be identical in colour and differ only in length; now the fifth block is visibly hotter than the fourth as well. Colour still keyed to BLOCK COUNT, never the raw percentile — see the note on level() for why. */ .event-tel .fx-row .fx-rail {display:grid;grid-template-columns:repeat(10,1fr);gap:7px;height:22px} .event-tel .fx-row .fx-seg {border-radius:5px;background:#18222d;box-shadow:inset 0 0 0 1px #ffffff0f} .event-tel .fx-row .fx-seg.fx-on {box-shadow:none} /* only the top tier lifts off the card, and only its last two blocks */ .event-tel .fx-row.fx-top .fx-seg.fx-on:nth-child(9) {box-shadow:0 0 12px -3px var(--tip)} .event-tel .fx-row.fx-top .fx-seg.fx-on:nth-child(10) {box-shadow:0 0 20px -1px var(--tip)} .event-tel .fx-row .fx-seg.fx-on {background:var(--lv);box-shadow:none} .event-tel .fx-row.hi .fx-seg.fx-on {box-shadow:0 0 13px -2px var(--lv)} /* ── one hue, brightening along the bar ───────────────────────────────── The four-colour version is kept below; this replaces the idea of colouring a bar by which BAND it falls in with colouring each BLOCK by how far along it sits. One green, muted at the left and vivid at the right, so a long bar is hotter than a short one because it reaches the bright end — not because it was assigned a different colour. Not an even gradient though — a staircase. The shades barely move inside a tier and jump hard between them, so the four bands are still legible as bands without needing four different colours to say so: blocks 1-2 the murk blocks 3-5 a clear step up blocks 6-8 another blocks 9-10 the brightest, and the only two that glow An even ramp lost the thing the colours were good at: you could see WHICH tier a fighter was in at a glance. A pure gradient made every bar a slightly different shade of the same idea, which is accurate and tells you nothing quickly. The jumps put the tiers back and the single hue keeps the card calm. PREVIOUS, and the one Lee preferred so far — restore this block and drop the nth-child rules to go back: .event-tel .fx-row.lv0 {--lv:#3e4a59} 1-2 blocks, slate .event-tel .fx-row.lv1 {--lv:#e8583f} 3-5 blocks, ember .event-tel .fx-row.lv2 {--lv:#d2a03c} 6-8 blocks, amber .event-tel .fx-row.lv3 {--lv:#588d80} 9-10 blocks, grey-green, glowing */ .event-tel .fx-row .fx-rail {display:grid;grid-template-columns:repeat(10,1fr);gap:7px;height:22px} .event-tel .fx-row .fx-seg {border-radius:5px;background:#18222d;box-shadow:inset 0 0 0 1px #ffffff0f} .event-tel .fx-row .fx-seg.fx-on {box-shadow:none} /* only the top tier lifts off the card, and only its last two blocks */ .event-tel .fx-row.fx-top .fx-seg.fx-on:nth-child(9) {box-shadow:0 0 12px -3px var(--tip)} .event-tel .fx-row.fx-top .fx-seg.fx-on:nth-child(10) {box-shadow:0 0 20px -1px var(--tip)} /* the figure takes the colour of the last block the fighter reached */ .event-tel .fx-row .fx-pct {color:var(--lv)} .event-tel .fx-row .fx-num {text-align:right;font-variant-numeric:tabular-nums} .event-tel .fx-row .fx-pct {font-size:31px;font-weight:800;line-height:1} /* 16px here was unreadable once the card was scaled to a phone, to the point that 0.11 read as 6.11 and the card lied at a glance. The unit is shortened rather than the number, because the number is the part being checked. */ .event-tel .fx-row .fx-raw {font-size:19px;color:var(--dim);letter-spacing:.01em;white-space:nowrap; margin-top:3px;font-weight:600} .event-tel .fx-foot {margin-top:auto;padding:20px 46px 32px;display:flex;justify-content:space-between; align-items:flex-end;border-top:1px solid #ffffff14;font-size:29px;color:var(--dim)} .event-tel .fx-foot b {color:var(--ink);font-weight:700} /* Set text, in white. The drawn mark was legible at full size but became a smudge in a grid, and it is the one thing on the card that is not about this fighter — so it takes neither his accent nor the brand green, it just sits there quietly. */ /* Pinned, not inherited. The record grew and the wordmark should not grow with it — it is a credit line, and the numbers beside it are the content. */ .event-tel .fx-foot .fx-brand {font-size:24px;letter-spacing:.2em;text-transform:uppercase; font-weight:700;color:#fff} .event-tel .fx-foot .fx-tally {display:flex;gap:30px;font-variant-numeric:tabular-nums} /* ══ two cards, on a predictions page ═════════════════════════════════════ Side by side with VS between them, which is the whole point of the format: the two shapes are comparable at a glance because they are drawn on the same axes at the same scale. */ .event-tel .fx-vs { /* * Side by side, both at ONE scale — the shapes are only comparable when they * are drawn the same size, so the scale is set on the pair and inherited, * never per card. * * Stepped rather than fluid because CSS cannot divide a length down to the * unitless number scale() needs. Each step is the largest that still fits two * cards and the VS in the column, measured rather than guessed: the column * runs 367px at a 420px viewport up to a 1208px cap. */ --fx-scale: 0.30; display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin: 1rem 0 0.2rem; padding-top: 1rem; border-top: 1px solid #ffffff10; } .event-tel .fx-vs .fx-wrap { --fx-scale: inherit; } .event-tel .fx-vs-mid { font-family: var(--disp, inherit); font-weight: 800; letter-spacing: 0.04em; color: #55677c; flex: none; font-size: 1.4rem; width: 100%; text-align: center; } /* Above this the pair fits on one line. Below it they stack and keep a size worth reading — two cards across a phone would be 151px each, at which the stat rows are texture rather than numbers. */ @media (min-width: 760px) { .event-tel .fx-vs { flex-wrap: nowrap; --fx-scale: 0.28; } .event-tel .fx-vs-mid { width: auto; font-size: 1.7rem; } } @media (min-width: 900px) { .event-tel .fx-vs { --fx-scale: 0.34; } } @media (min-width: 1100px) { .event-tel .fx-vs { --fx-scale: 0.42; } .event-tel .fx-vs-mid { font-size: 2.1rem; } } .event-tel .fx-vs-none { margin: 1rem 0 0.2rem; padding-top: 0.9rem; border-top: 1px solid #ffffff10; text-align: center; font-size: 0.7rem; color: #5d6878; } /* ══ the card on its own ══════════════════════════════════════════════════ /cards/. Nothing but the card, on the card's own ground, so a frame grab at 1080x1440 is the card and only the card. */ .event-tel.fx-solo { min-height: 100vh; margin: 0; padding: 0; display: flex; align-items: flex-start; justify-content: flex-start; background: #070a0e; } .event-tel.fx-solo .fx-wrap { margin: 0; }