.jsud-medallero-box { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; max-width: 900px; margin: 0 auto; box-sizing: border-box; /* Breakpoints below respond to this box's own rendered width, not the browser viewport — same reasoning as jsud2026-agenda's widget: this can end up in a much narrower WordPress column than the viewport. */ container-type: inline-size; container-name: jsud-medallero-widget; /* The header's own red continues down as a very translucent wash behind the podium/grid, and the whole thing closes into one rounded card — overflow:hidden is what actually makes the bottom corners "close", since the grid table itself has no border-radius of its own. */ background: rgba(200, 7, 8, 0.12); border-radius: 16px; overflow: hidden; } .jsud-medallero-box * { box-sizing: border-box; } .jsud-medallero-loading { text-align: center; color: #5C7089; padding: 32px; } /* Same branding box as the jsud2026-agenda plugin's header — solid RedBoing red with the Juegos Suramericanos purple/pink wedge accent — reproduced here rather than shared, since this is a deliberately separate, independent plugin. Only the top corners are rounded now — it's the top of the unified card, not a standalone box (see .jsud-medallero-box above for the bottom-closing radius). */ .jsud-medallero-header { position: relative; overflow: hidden; padding: 24px; border-radius: 16px 16px 0 0; color: #fff; /* Fades across the header's ENTIRE height (not just the last stretch), revealing the translucent red .jsud-medallero-box background behind it — without this the header's solid red just stops dead at a hard line where the body's much lighter wash begins. */ background: linear-gradient(to bottom, #C80708 0%, rgba(200,7,8,0) 100%); } /* Everything below the header, inset from the translucent card's edges. */ .jsud-medallero-body { padding: 24px 16px; } .jsud-medallero-header-title h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; } .jsud-medallero-header-title p { margin: 0; font-size: 13px; color: rgba(255,255,255,.75); } @container jsud-medallero-widget (min-width: 601px) { /* The wedge: full height at the left edge, then the boundary shoots up steeply in the first ~15% of the width and flattens out for the rest — approximated with enough polygon points to read as a smooth curve instead of a circular radial-gradient (which can't produce this log(x)-like shape). */ .jsud-medallero-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, #4C34DD 0%, #FF1A54 22%, #C80708 70%, #C80708 100%); clip-path: polygon( 0% 0%, 0% 100%, 10% 100%, 12.5% 96.4%, 15% 87%, 17.5% 74.8%, 20% 62.5%, 22.5% 51.6%, 25% 42.6%, 27.5% 35.2%, 30% 29.4%, 32.5% 24.8%, 35% 21.1%, 37.5% 18.1%, 40% 15.6%, 42.5% 13.6%, 45% 12%, 47.5% 10.6%, 50% 9.4%, 52.5% 8.4%, 55% 7.6%, 57.5% 6.9%, 60% 6.2%, 62.5% 5.7%, 65% 5.2%, 67.5% 4.8%, 70% 4.4%, 72.5% 4.1%, 75% 3.8%, 77.5% 3.5%, 80% 3.3%, 82.5% 3.1%, 85% 2.9%, 87.5% 2.7%, 90% 2.5%, 92.5% 2.4%, 95% 2.3%, 97.5% 2.1%, 100% 2%, 100% 0% ); pointer-events: none; } .jsud-medallero-header > * { position: relative; z-index: 1; } } @container jsud-medallero-widget (max-width: 600px) { .jsud-medallero-header { background: linear-gradient(120deg, #4C34DD 0%, #FF1A54 25%, #C80708 60%, #C80708 100%); } } /* Podium (left) and grid panel (right) sit side by side so the podium's own dead space (it never needs the box's full width) gets used by the grid instead of leaving it empty above a full-width grid below. align-items: stretch (not flex-start) so the grid panel always matches the podium's own height exactly — otherwise the panel's height tracks its own content (fewer rows than fit = shorter box) and the two columns end at different heights, showing as an uneven step below them. */ .jsud-medallero-columns { display: flex; gap: 16px; align-items: stretch; } .jsud-medallero-podium { display: flex; align-items: flex-end; justify-content: center; gap: 16px; flex: 1 1 auto; min-width: 0; /* Tall enough that even the shortest (bronze, 52%) bar has room for name+flag at the top AND the medal rows anchored at the bottom without the two blocks overlapping — see the comment on .jsud-medallero-bar-medals for how those two blocks are laid out. */ height: 380px; overflow: hidden; } .jsud-medallero-bar { position: relative; flex: 1 1 0; max-width: 220px; border-radius: 12px 12px 0 0; color: #fff; display: flex; flex-direction: column; align-items: center; padding: 16px 12px; transition: transform 0.9s ease; transform: translateY(0); } /* Starting state for the entrance animation — medallero-render.js adds this class to every bar up front and removes it (staggered) after mount, so the transition above animates from here back to translateY(0). */ .jsud-medallero-bar--entering { transform: translateY(100%); } .jsud-medallero-bar-country { font-weight: 800; text-transform: uppercase; font-size: 15px; margin-bottom: 8px; text-align: center; } .jsud-medallero-flag { width: 40px; height: auto; border-radius: 4px; margin-bottom: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.5); } /* align-items: flex-start (not center) — centering each row by its own width would shift the icon left/right depending on the medal count's digit count (e.g. "14" vs "8"), so the icons never lined up. Starting them flush-left keeps every medal icon on the same vertical line WITHIN one bar — and centering the whole block as a unit (left: 50% + translateX, rather than a fixed left offset) puts that shared line on the same vertical axis as the flag above it, since the flag is also horizontally centered in the bar. position: absolute, anchored to the bar's own bottom edge (matching the bar's own padding) — name+flag stay in normal flow at the TOP of the bar, medals sit at the BOTTOM; since all three bars share the same bottom edge (podium's align-items: flex-end) and the same padding, this puts the gold/silver/bronze rows of all three bars on the exact same horizontal line regardless of how tall each bar is. */ .jsud-medallero-bar-medals { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .jsud-medallero-bar-medals span { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; } .jsud-medallero-bar-medals img { width: 20px; height: 20px; } /* The grid lives in its own panel, deliberately much narrower than the podium — it starts at width 0 (podium reads as centered across the whole row) and animates open once the bars finish entering (see medallero-render.js), which is also what visually pushes/narrows the podium's bars to the left as a side effect of the flex layout above. */ .jsud-medallero-grid-panel { width: 0; flex: 0 0 auto; overflow: hidden; transition: width 0.6s ease; /* Matches .jsud-medallero-podium's own height exactly (see there) — the two need the SAME explicit number, not just align-items:stretch, because the panel's natural content (all countries) is taller than that on its own; without an explicit cap here it just grows past the podium and the bottoms of the two columns end up uneven. Column layout so grid-scroll below can flex:1 and fill exactly what's left after the header, so the two boxes come out flush. */ display: flex; flex-direction: column; height: 380px; } .jsud-medallero-grid-panel--open { width: 260px; } /* Header row lives in its own non-scrolling box (see the render.js comment for why); its scrollLeft is kept in sync with the body below by JS, so it visually tracks the horizontal scroll without actually being part of the scrolling container itself — which also means it never scrolls vertically, so it reads as a frozen header without needing position:sticky for that axis. */ .jsud-medallero-grid-headwrap { flex: 0 0 auto; overflow: hidden; } /* Both scroll axes: horizontal only kicks in because the table (330px) is wider than the panel (260px); vertical only kicks in if there are more rows than fit — flex:1 fills exactly the space left in the panel after the header, which is what keeps this flush with the podium's own bottom edge instead of stopping short or overflowing past it. */ .jsud-medallero-grid-scroll { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* table-layout: fixed + explicit widths on every column — required for the header table and body table (two separate elements) to line up, and for the sticky-column math below to use real pixel values instead of guessing at rendered widths. */ .jsud-medallero-grid { min-width: 330px; width: 100%; border-collapse: collapse; font-size: 13px; border-radius: 12px; table-layout: fixed; } .jsud-medallero-grid th, .jsud-medallero-grid td { padding: 6px; text-align: center; border-bottom: 1px solid #eef1f5; width: 44px; } .jsud-medallero-grid th { background: rgba(255,255,255,.5); font-weight: 700; text-transform: uppercase; font-size: 11px; color: #5C7089; } .jsud-medallero-grid-country { display: flex; align-items: center; gap: 6px; text-align: left; } .jsud-medallero-grid-flag { width: 16px; height: auto; border-radius: 2px; } /* Only "#" and "País" stay put; O/P/B/Total scroll sideways. Sticky cells need their own opaque-ish background (an approximation of the translucent red-on-white the rest of the card shows) so scrolled-past content doesn't show through underneath them. */ /* The transition here (not on the gold/silver/bronze rules below) is what lets these two cells fade to their highlighted color in step with the rest of the row instead of snapping instantly — see the JS comment in highlightTopRows for why they need their own inline flash too. */ .jsud-medallero-grid th:nth-child(1), .jsud-medallero-grid td:nth-child(1) { width: 26px; position: sticky; left: 0; z-index: 1; background: #FAEAEA; transition: background-color 1.4s ease; } .jsud-medallero-grid th:nth-child(2), .jsud-medallero-grid td:nth-child(2) { width: 100px; text-align: left; position: sticky; left: 26px; z-index: 1; background: #FAEAEA; transition: background-color 1.4s ease; } .jsud-medallero-grid th:nth-child(6), .jsud-medallero-grid td:nth-child(6) { width: 56px; } .jsud-medallero-grid th:nth-child(1), .jsud-medallero-grid th:nth-child(2) { background: #FCF3F2; } /* Top-3 rows are solid gold/silver/bronze (see the highlight rules below) — their sticky cells need to match that exact color instead of the generic pinkish tint, or the seam between "sticky" and "scrolling" parts of the same row would show two different colors. */ .jsud-medallero-grid-row--gold td:nth-child(1), .jsud-medallero-grid-row--gold td:nth-child(2) { background: #FFD400; } .jsud-medallero-grid-row--silver td:nth-child(1), .jsud-medallero-grid-row--silver td:nth-child(2) { background: #C7CDD6; } .jsud-medallero-grid-row--bronze td:nth-child(1), .jsud-medallero-grid-row--bronze td:nth-child(2) { background: #E08A3C; } /* Grid unfolds row by row (medallero-render.js removes --entering on a stagger, starting right as the podium finishes), then the top 3 rows flash gold/silver/bronze and settle down to a subtler tint — the long background-color transition is what makes that settle visible; the JS sets a bright inline color first, then clears it a couple of frames later so it animates down to the value below. */ .jsud-medallero-grid-row { transition: opacity 0.35s ease, transform 0.35s ease, background-color 1.4s ease; opacity: 1; transform: translateY(0); } /* Opacity alone doesn't hide a collapsed table border between two rows — the browser can still paint the shared border line even when both rows it sits between are at opacity:0, showing a "grid of empty rows" before the reveal starts. Forcing the entering row's own cell borders transparent hides that seam until the row actually appears. */ .jsud-medallero-grid-row--entering { opacity: 0; transform: translateY(-8px); } .jsud-medallero-grid-row--entering td { border-color: transparent; } .jsud-medallero-grid-row--gold { background-color: #FFD400; } .jsud-medallero-grid-row--silver { background-color: #C7CDD6; } .jsud-medallero-grid-row--bronze { background-color: #E08A3C; } /* Hidden on desktop — the whole grid is always visible there. Made visible only inside the mobile container query below, where it collapses/expands the entire grid panel instead of leaving a long full-width table stacked under the podium by default. */ .jsud-medallero-grid-mobile-toggle { display: none; } @container jsud-medallero-widget (max-width: 600px) { .jsud-medallero-grid-mobile-toggle { display: block; width: 100%; margin-bottom: 8px; padding: 10px; border: none; outline: none; /* Android/iOS both draw their own tap feedback on a