/* ========================================================================== GRIDIRON — assets/css/standings.css Component internals for the STANDINGS family: gridiron/standings .sfgi-standings compact rail table gridiron/standings-full .sfgi-sfull the /standings/ page block gridiron/power-ranking .sfgi-power ranked cards + rationale plus the shared table-column contract (.sfgi-col-*) and the generic .sfgi-bar-fill used by the team and player cards. -------------------------------------------------------------------------- Markup ground truth: includes/standings.php (frozen), read together with the live DOM of /gridiron/standings/, /gridiron/, /gridiron/teams/ and /gridiron/team// on 2026-08-16. RULES THIS FILE OBEYS --------------------- 1. Colour, radius, shadow, easing and type come ONLY from the `--sfgi-*` tokens declared in assets/gridiron.css. There is not one literal hex in this file, so the visitor light/dark toggle keeps working. 2. Depth is the identity: `--sfgi-d0`..`--sfgi-d4` plus an inset `--sfgi-ring` hairline. No 1px borders anywhere. 3. Team livery arrives per row / per card as the inline `--sfgi-team` custom property. It is always consumed through `color-mix()` so a pure black or pure white team colour still resolves to something visible; the local `--sfgi-team-edge` token lifts it toward `ink` for that reason. 4. Mobile first. The base rules are safe at 390px; layout widens at `min-width: 640px`, `min-width: 769px` and `min-width: 1025px`. Wide tables scroll inside `.sfgi-scroll`; the page never scrolls sideways. 5. Motion is scoped to `body.sfgi-fx` / `body.sfgi-fx-reveal` / `body.sfgi-fx-pointer`, exactly as assets/fx.js documents, and is switched off again under `prefers-reduced-motion: reduce`. 6. This sheet loads AFTER gridiron.css and may override it, but only where gridiron.css targets markup this family does not emit. Those overrides are individually commented — every one of them is a real bug fix. OVERRIDES OF gridiron.css, and why ---------------------------------- a) `.sfgi-grid [data-grid] { display: grid }` was written for the card grids. `.sfgi-sfull-conf` carries `.sfgi-grid` and its `` was being turned into a two-column CSS grid — that is what stacked the standings cells on top of each other. Reset to `table-row-group`. b) `.sfgi-bar` is declared in gridiron.css as the FILL of a `.sfgi-track > .sfgi-bar` pair. standings.php and blocks-team.php emit it as the TRACK, with an `` / `.sfgi-bar-fill` child. Only the track-shaped instances are re-declared here; `.sfgi-track > .sfgi-bar` is left completely alone. c) `.sfgi-card` is on ``. A rounded, shadowed, panel-filled table ROW is not a thing browsers agree on, so the slab is neutralised on the row and re-expressed on its cells. @package stepfox-gridiron-stats ========================================================================== */ /* ========================================================================== 1. LOCAL TOKENS Derived from the global ones — nothing new is invented, and nothing here paints on its own. ========================================================================== */ .sfgi-standings, .sfgi-sfull, .sfgi-power { /* Column geometry, so the three tables agree without repeating numbers. */ --sfgi-c-rk: 56px; --sfgi-c-num: 54px; --sfgi-c-pct: 74px; --sfgi-c-strk: 78px; --sfgi-cell-x: 8px; --sfgi-cell-y: 9px; /* Row state washes. Low alpha so the light scheme survives them. */ --sfgi-wash-playoff: color-mix(in srgb, var(--sfgi-turf) 7%, transparent); --sfgi-wash-bye: color-mix(in srgb, var(--sfgi-gold) 9%, transparent); --sfgi-wash-leader: color-mix(in srgb, var(--sfgi-accent) 8%, transparent); } .sfgi-streak .sfgi-i { width: 12px; height: 12px; } .sfgi-streak.is-hot .sfgi-i { color: var(--sfgi-on-bright); } .sfgi-standings-foot .sfgi-i { color: var(--sfgi-accent-ink); } .sfgi-standings .sfgi-scroll > .sfgi-standings-table { min-width: 500px; } /* gridiron.css pushes `.sfgi-filter-count` right with `margin-left: auto`; in this row it is the leading item. */ .sfgi-sfull-count .sfgi-filter-count { margin-left: 0; margin-right: auto; color: var(--sfgi-ink); } /* The holographic foil on rank 1. It rides the SAME pseudo element as the team wash — the card cannot use `overflow: hidden` without flattening its 3D layers, so a rounded pseudo does the containing. fx.js drives --holo (0-200%) on pointer move; plain opacity rather than a blend mode, because `screen` would wash the foil out in the light scheme. */ .sfgi-power-card.sfgi-holo::before { background-image: var(--sfgi-g-holo), linear-gradient( 100deg, color-mix(in srgb, var(--sfgi-team, var(--sfgi-accent)) 26%, transparent) 0%, transparent 46% ); background-size: 240% 100%, auto; background-position: var(--holo, 50%) 50%, 0 0; background-repeat: no-repeat; opacity: 0.24; transition: background-position var(--sfgi-t) var(--sfgi-ease), opacity var(--sfgi-t) var(--sfgi-ease); } .sfgi-power-card.sfgi-holo.is-foiled::before { opacity: 0.4; } .sfgi-power-delta .sfgi-i { width: 14px; height: 14px; } .sfgi-power-foot .sfgi-i { flex: 0 0 auto; color: var(--sfgi-accent-ink); } /* ========================================================================== 13. THE TEAM GRID ROOT — .sfgi-grid--teams blocks-team.php emits `.sfgi-grid.sfgi-grid--teams` with a `[data-grid]` card wrapper. gridiron.css hard-codes two columns for every grid; 32 team cards want to reflow with the container instead. ========================================================================== */ .sfgi-grid--teams [data-grid] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 224px), 1fr)); } /* ========================================================================== 14. THE FX LAYER — cooperation with assets/fx.js Every rule is gated on a body class fx.js only adds when the effect can actually run (`sfgi-fx-reveal` requires IntersectionObserver AND motion allowed; `sfgi-fx-pointer` additionally requires a fine pointer). A visitor with JavaScript off gets the finished flat page and none of this. Note: the reveal offset is `--sfgi-rise`, NOT `--ry` — fx.js owns --rx/--ry. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* ---- scroll reveal. Applied to the ITEMS, never to a block root, so a failed observer can never blank a whole table. ---- */ body.sfgi-fx-reveal .sfgi-sfull-head.sfgi-reveal, body.sfgi-fx-reveal .sfgi-split.sfgi-reveal, body.sfgi-fx-reveal .sfgi-power-card.sfgi-reveal { transition: opacity .55s var(--sfgi-ease) var(--fxd, 0ms), transform .55s var(--sfgi-ease) var(--fxd, 0ms), box-shadow var(--sfgi-t) var(--sfgi-ease); } body.sfgi-fx-reveal .sfgi-sfull-head.sfgi-reveal:not(.is-in), body.sfgi-fx-reveal .sfgi-split.sfgi-reveal:not(.is-in), body.sfgi-fx-reveal .sfgi-power-card.sfgi-reveal:not(.is-in) { opacity: 0; --sfgi-rise: 16px; } body.sfgi-fx-reveal .sfgi-split.sfgi-reveal { transform: translate3d(0, var(--sfgi-rise, 0px), 0); } body.sfgi-fx .sfgi-sfull-head.sfgi-tilt, body.sfgi-fx .sfgi-power-card.sfgi-tilt { transform: translate3d(0, calc(var(--sfgi-rise, 0px) + var(--lift, 0px)), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; } /* ---- parallax layers. fx.js writes --z on load and --px / --py per frame; a layer without data-depth is left alone on purpose. `will-change` is fx.js's job — it takes and releases the compositor layer per card, so declaring it here would hand the browser hundreds. */ body.sfgi-fx .sfgi-sfull-head.sfgi-tilt .sfgi-layer[data-depth], body.sfgi-fx .sfgi-power-card.sfgi-tilt .sfgi-layer[data-depth] { transform: translate3d(var(--px, 0px), var(--py, 0px), var(--z, 0px)); transition: transform var(--sfgi-t) var(--sfgi-ease); } } /* Whatever the body classes say, reduced motion means still. */ @media (prefers-reduced-motion: reduce) { .sfgi-sfull-head, .sfgi-sfull-head.sfgi-tilt, .sfgi-split, .sfgi-power-card, .sfgi-power-card.sfgi-tilt, .sfgi-sfull-head .sfgi-layer, .sfgi-power-card .sfgi-layer, .sfgi-bar-fill, .sfgi-pctcell > .sfgi-bar > i, .sfgi-col-bar > .sfgi-bar > i, .sfgi-seed, .sfgi-streak, .sfgi-th-caret, .sfgi-th-label, .sfgi-power-name, .sfgi-power-card.sfgi-holo > .sfgi-power-rank::after, .sfgi-sfull-head::after { opacity: 1; transform: none !important; transition: none !important; animation: none !important; will-change: auto; } } /* The horizontal scrollers are keyboard-reachable (`tabindex="0"` in the PHP), so the focused one has to announce itself. */ .sfgi-sfull-conf > .sfgi-scroll:focus-visible, .sfgi-standings > .sfgi-scroll:focus-visible { outline: 2px solid var(--sfgi-neon); outline-offset: -2px; border-radius: var(--sfgi-r-sm); } /* ========================================================================== 17. PRINT The tables are the content; the glass and the depth are not. ========================================================================== */ @media print { .sfgi-scroll { overflow: visible; } }