/* Race Club — css/league.css (added 2026-09-18) WHAT THIS FILE IS FOR league.html is a deliberately different visual world from the rest of the site: black background, light gray/steel accents, hard diagonal edges -- an ESPN-style league hub, not another white rc-panel page. Site convention (see the race-club-ui-consistency skill) is "never hardcode a color or font, always pull from a token" -- but every --rc-* token in style.css is tuned for the site's white/offwhite pages, so there's nothing there to reuse for a black page. This file defines its OWN small token set below, scoped under body.rc-league-page, and every rule in this file pulls from those tokens, same discipline as the rest of the site just with a second palette. Two things ARE still pulled straight from the shared tokens on purpose: --rc-red/--rc-red-dark (the site's one brand accent stays the same color everywhere) and --rc-font-heading/--rc-font-body (typography stays one family sitewide; this page leans on size/weight/letter-spacing for its more aggressive feel, not a different typeface). Loaded ONLY by league.html, alongside (after) the shared style.css -- the fixed header (js/header.js) and its light theme are untouched here; only the page content below it goes dark. See league.html for the load order and js/league.js for what renders into these classes. */ body.rc-league-page { --rcl-bg: #0a0a0b; --rcl-bg-raised: #141416; --rcl-bg-raised-2: #1b1c1f; --rcl-line: #2c2d31; --rcl-line-bright: #45474d; --rcl-ink: #f2f2f0; /* Both nudged a little lighter (2026-09-19, Matt's ask: "make the dark gray font just a little lighter") -- these two tokens carry most of the page's secondary/tertiary text (meta lines, labels, chip text), so a small bump here improves legibility across every section that already reads off them, with no per-rule changes needed. */ --rcl-ink-dim: #b4b7bd; --rcl-ink-faint: #7d8088; /* Race Report clause colors (2026-09-24, Matt's ask: color-code the report so it's easier to scan) -- damage/collision aren't in the shared --rc-red brand accent, so they get their own two tokens here rather than borrowing a color that means something else on this page. */ --rcl-report-damage: #f5923b; --rcl-report-collision: #e8c547; --rcl-report-gain: #4fbf72; --rcl-report-fastest: #b07ce8; /* fastest lap of the race: bold purple (2026-09-24, Matt's ask) */ background: var(--rcl-bg); color: var(--rcl-ink); padding-top: 70px; /* clears the shared fixed header, same convention as .rc-shell/.rc-auth-page */ } /* Full-page loading overlay (2026-09-19, Matt's ask: "a loading animation in the center of the page... with the page behind very very dim until it loads") -- fixed, covers the whole viewport including the header, near-opaque rather than fully solid so the page reads as "very dim" underneath instead of hidden outright. Faded out (opacity + pointer- events) and then removed by js/league.js once the initial getLeagueHub fetch resolves, success or failure either way. Markup lives in league.html; body scroll is locked while this is up via the same .rc-modal-scroll-locked class every popup on the site already uses (see _rclLockBodyScroll/_rclUnlockBodyScroll in js/league.js). */ .rcl-page-loader { position: fixed; /* Starts BELOW the shared fixed header (2026-09-19 follow-up, Matt: "don't dim the header part, only the league hub page below should be dimmed") -- 70px matches .rc-fixed-header's own height (style.css) and body.rc-league-page's own padding-top for it, so this lines up exactly with where the header's bottom edge sits, leaving it fully visible and undimmed above. */ top: 70px; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(10, 10, 11, 0.94); transition: opacity 0.4s ease; } .rcl-page-loader-hidden { opacity: 0; pointer-events: none; } /* .rc-loading-text (style.css) is tuned for the site's light theme (var(--rc-steel)) -- this overlay is dark, so it needs its own color here rather than inheriting an unreadable dark-gray-on-black. */ .rcl-page-loader .rc-loading-text { color: var(--rcl-ink-dim); } /* .rc-startlights (style.css) is a light off-white pill by default, built for the site's white pages -- mid-gray here instead (2026-09-19 follow- up, Matt's ask), sitting between the near-black overlay behind it and the white/red lights themselves, so the light bar still reads as a physical frame instead of a bright cutout against the dark page. */ .rcl-page-loader .rc-startlights { background: var(--rcl-line-bright); border-color: var(--rcl-line); } @media (prefers-reduced-motion: reduce) { /* Freeze on a single lit state instead of animating through the full "lights out" sequence -- still reads as "loading," no motion. */ .rcl-page-loader .rc-startlight { animation: none; background: var(--rc-red); border-color: var(--rc-red); box-shadow: 0 0 7.5px 1.5px var(--rc-red); } } /* -------------------------------------------------------------------- */ /* Ticker -- scrolling strip, right under the fixed header */ /* -------------------------------------------------------------------- */ .rcl-ticker-wrap { position: relative; overflow: hidden; background: var(--rcl-bg-raised); border-bottom: 2px solid var(--rc-red); height: 40px; display: flex; align-items: center; } .rcl-ticker-label { flex: none; height: 100%; display: flex; align-items: center; padding: 0 16px; background: var(--rc-red); color: var(--rc-white); font-family: var(--rc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; /* Hard diagonal cut on the trailing edge -- the one recurring "angle" motif this page uses everywhere a colored block meets a dark one. */ clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-right: 28px; z-index: 2; } .rcl-ticker-viewport { flex: 1 1 auto; overflow: hidden; height: 100%; position: relative; } .rcl-ticker-track { display: flex; align-items: center; height: 100%; width: max-content; /* This starting duration is only ever seen for a split second before js/league.js overrides it inline with a per-load, content-aware value (2026-09-23, Matt's catch: a fixed duration made the ticker visibly race by on a content-heavy day -- see the long comment on mainDurationSec in _rclRenderTicker, js/league.js, for why speed is now derived from the track's actual measured width instead of a flat number here). Kept as a reasonable fallback only for the rare case JS hasn't run yet (or prefers-reduced-motion, which disables motion entirely below anyway). */ animation: rcl-ticker-scroll 19s linear infinite; } .rcl-ticker-wrap:hover .rcl-ticker-track { animation-play-state: paused; } /* Back to the original plain 0%/-50% loop (2026-09-19 follow-up -- the version of this rule that instead read from --rcl-ticker-start/-end custom properties made the "roll in from off-screen" behavior repeat on every single loop, not just the first time, which is what caused "only shows 2 entries and starts over" -- see the long comment in js/league.js's _rclRenderTicker). -50% (one full run's width, since both duplicate runs are equal) is what makes the loop land seamlessly back on the identical second run -- this rule alone is exactly what ran before ANY "roll in" work started, and is only ever used after the one-time intro below has already finished. */ /* Back to 2 concatenated copies of the item list (2026-09-19 follow-up, Matt: with season dates + next race now in the ticker, "I think the ticker will only ever need to display two at a time... not 3") -- the loop only needs to travel one run's width, i.e. -50%, to stay seamless. Keep this in sync with RUN_COUNT in js/league.js. */ @keyframes rcl-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* One-time intro (2026-09-19 follow-up) -- js/league.js runs this once per page load, immediately followed (via animation-delay, not overlapping) by the loop above starting fresh from translateX(0), exactly where this leaves off. --rcl-ticker-start is a real pixel value (the ticker viewport's own width) set by JS right before this runs, so the track starts fully hidden past the right edge and rolls in -- a plain keyframe can't express "one viewport-width further right than a plain reset" without that measured value. The 0 fallback only matters for the split second before JS sets the real one. */ @keyframes rcl-ticker-intro { from { transform: translateX(var(--rcl-ticker-start, 0)); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .rcl-ticker-track { animation: none; } .rcl-ticker-viewport { overflow-x: auto; } } .rcl-ticker-item { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 24px; font-family: var(--rc-font-body); font-size: 13.5px; font-weight: 600; color: var(--rcl-ink); white-space: nowrap; /* Vertical divider between items removed (2026-09-23, Matt's ask) -- the loop-seam dot (.rcl-ticker-loop-dot, below) plus each item's own gold tag/colon already read as clear item boundaries without a literal rule line down the ticker. */ } /* Same font/weight as the item's own body copy (2026-09-19 follow-up, Matt: "make the red category labels just a regular font... I want the text to look the same as it scrolls") -- the trailing colon (added in the tag text itself, js/league.js) is what marks where the label ends. Color switched to gold (2026-09-19, Matt's ask) -- the same accent .rcl-cal-status-unofficial/.rcl-cal-row-special already use elsewhere on this page, so the ticker picks up a second color instead of a brand new one. */ .rcl-ticker-item-tag { font-family: var(--rc-font-body); font-size: 13.5px; font-weight: 600; color: #e0b64c; } /* Driver-list ticker entries (2026-09-23, Matt's ask: a driver-heavy line "feels like a wall of text" -- add a manufacturer logo in front of each name, take some weight off the name, keep the number weight the same as it is). Built by buildDriverEntry (js/league.js), used for both the pre-results "N DRIVERS" items and the in-season "N TOP 5" items. .rcl-ticker-driver-list is the one flex child that holds every driver entry + the ", " separators for one ticker item, so the item's own 8px gap (see .rcl-ticker-item) only ever applies between the tag/ prefix text and this whole group, not between every individual name. */ .rcl-ticker-driver-list { display: inline-flex; align-items: center; flex-wrap: nowrap; } .rcl-ticker-driver-entry { display: inline-flex; align-items: center; /* 8px (was 4px), 2026-09-23 Matt's ask: "one more space between the driver name and manufacturer logo" -- this is the gap between EVERY child (logo/name/number), which is what actually separates the logo from the name that follows it. */ gap: 8px; } .rcl-ticker-driver-logo { flex: none; display: block; /* Bumped a little (was 14px/22px), 2026-09-23 Matt's ask: "increase the max height and width of the logos... so they can be seen easier". +5px more (was 27px), 2026-09-24 Matt's ask: "add 5 more pixels max width for manufacturer logos in TICKER scroll". +5px more again (was 32px), 2026-09-26, same ask repeated. */ height: 17px; width: auto; max-width: 37px; object-fit: contain; } /* Lighter than the item's own base 600 weight (.rcl-ticker-item) -- the name is now the quieter part of each entry. */ .rcl-ticker-driver-name { font-weight: 500; } /* Nationality flag, between the name and the car number (2026-09-30, Matt's ask: "add flags to all driver names in ticker- between name and number") -- same .rcl-standings-flag look (16x12, rounded corners, thin border) the Leaderboard/Recent Results/View All Results identity block already uses (_rclBuildDriverIdentity_ above), reused as-is here rather than a new ticker-specific size, since the ticker entry's own 8px gap (.rcl-ticker-driver-entry) already gives it the same breathing room as the logo and name around it. */ /* Weight is the same the whole line used to render at before this split (Matt's explicit "keep the number weight the same as it is") -- stays the heaviest part of each driver entry. White like the name (2026-09-30, Matt's ask: "make the number white like the name") -- was a dedicated light-gray tone (--rcl-ink-dim, added 2026-09-23); var(--rcl-ink) matches what .rcl-ticker-driver-name itself renders at (inherited from .rcl-ticker-item, which never overrides color), so name and number now read as the same white. */ .rcl-ticker-driver-num { font-weight: 600; color: var(--rcl-ink); } /* Class pill riding right behind the car number (2026-09-26, Matt's ask: "behind every number on every driver will be the class pill they belong to... make sure the pill is no larger than the manufacturer logo... not larger than the driver name... it should be recognizeable that's all"). Built by _rclTickerClassPill_ (js/league.js), which reuses the same .rc-badge-chip-abbrev pill shape and RCL_CLASS_PILL_COLOR_ red HY/blue LMP2/purple LMP3/green LMGT3/orange LMGTE colors as the Race Report's own class pills (_rclClassPill_) -- this override just shrinks it down small enough for an inline ticker entry: the manufacturer logo above sits at 17px tall, so this pill's total height (font-size + line-height + padding) stays comfortably under that, and its 9px font reads clearly smaller than the 13.5px driver name next to it while the label itself (HY/LMP2/LMP3/LMGT3/LMGTE) stays fully legible -- recognizable at a glance, nothing more. */ .rcl-ticker-class-pill { font-size: 9px; padding: 1px 5px; line-height: 1.3; letter-spacing: 0.02em; } /* Per-class "TOP TEN RESULTS:" tag wrapper (2026-09-26 follow-up, Matt's ask: "make the space between this label and the drivers the same as every other category") -- same 8px gap as .rcl-ticker-item's own outer tag-to-content spacing, so each class group's own tag reads identically to SEASON/NEXT RACE/ROUND n's tag spacing instead of a manual nbsp gap. */ .rcl-ticker-class-section { display: inline-flex; align-items: center; gap: 8px; } /* TOP 5 prefix split (2026-09-23, Matt's ask: "Round n EventName: track", round/event bold, track normal weight) -- bold is heavier than the item's own base 600 (.rcl-ticker-item), dim is lighter. */ .rcl-ticker-prefix-bold { font-weight: 800; color: var(--rcl-ink); } .rcl-ticker-prefix-dim { font-weight: 400; color: var(--rcl-ink); } /* Ordinal rank prefix on TOP 5 rows (2026-09-23, Matt's ask: "1st, 2nd, 3rd, 4th and 5th before the names in bold white"). */ .rcl-ticker-driver-rank { font-weight: 800; color: var(--rc-white); } /* Season dates, lighter than the SEASON item's own base 600 weight (2026-09-23, Matt's ask: "make the season dates a reduced weight compared to the season name") -- same 500 weight as .rcl-ticker-driver-name, keeping the dates as the quieter half of the line the way the driver number/name pairing already reads. */ .rcl-ticker-season-dates { font-weight: 500; color: var(--rcl-ink-dim); } .rcl-ticker-empty { padding: 0 24px; font-size: 13.5px; color: var(--rcl-ink-faint); } /* Loop-seam dot (2026-09-19, Matt's ask: "a dot in between the repeated line") -- closes out each run before it repeats, so the ticker reads as a continuous "...item • item..." at the point it loops back to the start, the same way a real news ticker marks its repeat. No border-right of its own (unlike .rcl-ticker-item) -- the dot itself is the separator here, a second vertical line right next to it would be redundant. */ .rcl-ticker-loop-dot { flex: none; display: flex; align-items: center; padding: 0 24px; font-size: 18px; font-weight: 800; color: var(--rc-red); } /* -------------------------------------------------------------------- */ /* Hero band -- season name, hard angled bottom edge */ /* -------------------------------------------------------------------- */ .rcl-hero { position: relative; padding: 46px 32px 58px; background: linear-gradient(135deg, var(--rcl-bg-raised) 0%, var(--rcl-bg) 70%); border-bottom: 1px solid var(--rcl-line); overflow: hidden; } /* Banner image layer (added 2026-09-19, Matt's ask) -- sits behind the red angled accent (::after, below) and behind the text (.rcl-hero-inner, z-index:1), but above the hero's own gradient background. inset:0 sizes the layer to the hero's own box (.rcl-hero is already a full-bleed section, so this reaches the window's edges without the 100vw/translateX viewport-anchoring trick this used to need). background-size:cover (2026-09-19 fix -- was 100% auto, which force- stretched the image's WIDTH to match the viewport regardless of the image's own resolution, upscaling it well past its native size on a wide window and reading as "super stretched and blown up"; cover scales the image just enough to fill the box on both axes with its aspect ratio intact, so it only ever crops, never distorts or upscales past what actually fills the space) + background-position:center (crops symmetrically top/bottom, so the header always shows the image's middle section, not whatever the top-anchored crop happened to land on). overflow:hidden on .rcl-hero crops whatever spills past the hero's own height so the container never grows to match the banner's natural size. A soft opacity keeps it a backdrop rather than competing with the title/stat text sitting on top of it. */ .rcl-hero::before { content: ''; position: absolute; inset: 0; /* Relative to THIS file (css/league.css), not the page -- assets/images/ is a sibling of css/, not a child of it, same gotcha style.css's own banner rules already have a comment for. */ background-image: url('../assets/images/league_banner.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.5; z-index: 0; pointer-events: none; } .rcl-hero::after { /* Diagonal red bar bleeding off the right edge -- the page's one loud brand mark, echoing the ticker label's angled cut. */ content: ''; position: absolute; top: -40%; right: -6%; width: 220px; height: 220%; background: var(--rc-red); opacity: 0.9; transform: rotate(18deg); z-index: 0; } .rcl-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; } .rcl-hero-eyebrow { font-family: var(--rc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rc-red); margin-bottom: 10px; } .rcl-hero-title { /* Helvetica (2026-09-27, Matt's ask: "Use Helvetica for font") -- scoped to just this title, not the sitewide --rc-font-heading var, since this is a one-off typographic treatment (mixed weights below) rather than a site-wide font change. Arial is the near-universal Helvetica substitute on systems that don't ship Helvetica itself (mainly Windows), so the title never silently falls back to the generic sans-serif system font. */ font-family: Helvetica, Arial, sans-serif; /* Slightly larger (2026-09-27 follow-up, Matt's ask) -- was clamp(32px, 5.4vw, 56px). */ font-size: clamp(36px, 6vw, 64px); font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.02; color: var(--rcl-ink); margin: 0; /* Same subtle drop shadow as .rcl-panel-title (2026-09-20) -- this title sits directly on top of the hero banner image too, so it benefits the same way. */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } /* "LEAGUE" lighter, "HUB" heavier (2026-09-27, Matt's ask) -- both spans inherit font-family/font-size/line-height straight from .rcl-hero-title above and change ONLY font-weight, which is what keeps them "the same height" as each other instead of one span's weight pulling in a different font file with different metrics. */ .rcl-hero-title-league { font-weight: 400; } /* Heavier + red (2026-09-27 follow-up, Matt's ask: "the HUB needs to be slightly heavier weight and red color"; then "HUB needs to be even heavier weight" -- font-weight: 900 is already the top of the CSS scale, so there's no heavier standard weight to ask the browser for. Plain Helvetica/Arial also don't ship a 900 ("black") weight face on most systems -- the browser just renders its regular bold at 900, which is why it wasn't reading any heavier than before. Two real fixes layered together: (1) Arial Black is an actual black-weight typeface (shipped with Windows and Office fonts, so it's ahead of Helvetica/Arial in the stack here for this one span only), and (2) -webkit-text-stroke adds a thin same-color outline that thickens the strokes further wherever Arial Black itself isn't installed (Helvetica/Arial fall back to that; support for the property itself is effectively universal in current browsers despite the -webkit- prefix). Together these read noticeably heavier than a plain font-weight bump ever could on this font stack. Still inherits the same font-size/line-height as .rcl-hero-title-league, so only weight/stroke and color set it apart, not size. */ .rcl-hero-title-hub { font-family: 'Arial Black', Helvetica, Arial, sans-serif; font-weight: 900; color: var(--rc-red); -webkit-text-stroke: 0.6px var(--rc-red); } /* Season number line (added 2026-09-19) -- sits between the big title and the season-context details, its own size step between the small eyebrow above and the body-text sub-line below. */ .rcl-hero-season { margin-top: 10px; font-family: var(--rc-font-heading); /* Bumped up substantially (2026-09-19, Matt's explicit ask: "Make the SEASON N / SEASON NAME under the LEAGUE HUB title larger in size") -- its own dedicated size step above the general "one level" bump the rest of the League Hub text got, between the sub-line and the hero title itself. */ font-size: 24px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rcl-ink-dim); } /* "Season N / Name" (2026-09-19, Matt's ask: color the separator and the name distinctly) -- the "/" reads in the brand accent and the season name reads bright white against it. Built as spans in js/league.js's _rclRenderHero rather than one plain text string. "Season N" itself switched from the line's base ink-dim color to gold (2026-09-19 follow-up, Matt's ask) -- same accent .rcl-cal-status- unofficial/.rcl-ticker-item-tag already use elsewhere on this page. */ .rcl-hero-season-num { color: #e0b64c; } .rcl-hero-season-sep { color: var(--rc-red); } .rcl-hero-season-name { color: var(--rcl-ink); } .rcl-hero-sub { margin-top: 12px; font-size: 15px; color: var(--rcl-ink-dim); max-width: 560px; line-height: 1.55; } /* Season snapshot / League Format stat strips (added 2026-09-19, replacing the old single pipe-separated sentence -- "Date: ... | Calendar: ... | Drop Races: ... | Rounds Completed: ..." read as boring plain text; this reads as a real stat strip instead, same family as the Recent Results headline stats (.rcl-race-headline-stat) just themed for the hero's dark gradient background). Two groups (This Season / League Format) rather than one long row so the two different kinds of information -- what's happening this season vs. how the league always runs -- stay visually separate. */ .rcl-hero-stats-group { margin-top: 26px; } .rcl-hero-stats-group + .rcl-hero-stats-group { margin-top: 26px; } /* Standalone gray "pill" label -- same look as a Points Tables tier's own pill half (.rcl-points-tier-pill-label further below), just with a full border/radius on every side since nothing is fused against it here. Added 2026-09-24, Matt's ask: keep the Season Details group headers (This Season/League Format) and the Points Tables' own Bonus Points label (see .rcl-points-bonus-label below) all reading as one consistent gray-pill treatment sitewide, rather than each having its own one-off look -- was plain red uppercase text here, and plain white uppercase text (.rcl-points-tier-name) for Bonus Points. */ .rcl-pill-label { display: inline-flex; align-items: center; background: #d9dadd; color: #1c1d20; border: 1px solid #b6b8bd; border-radius: 5px; padding: 3px 10px; font-family: var(--rc-font-heading); font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .rcl-hero-stats-label { display: inline-flex; align-items: center; /* Graphite fill (2026-09-24, Matt's ask), matching Account.html's own .rc-seasonfmt-group-label -- deliberately its own rule, not folded into .rcl-pill-label (Bonus Points keeps the plain light-gray pill; see the comment above .rcl-pill-label). */ background: var(--rc-graphite); color: var(--rc-white); border: 1px solid var(--rc-graphite); border-radius: 5px; padding: 3px 10px; font-family: var(--rc-font-heading); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; /* 6px, was 10px (2026-10-01, Matt's ask: "move the pills closer to the section they're labeling") -- paired with .rcl-seasonfmt-list's own margin-top dropping to 0 the same day, so the only gap between a pill and its own rows is this one, instead of the two stacking to 20px. */ margin-bottom: 6px; } /* Season Details popup -- traditional vertical list (2026-10-01, replacing the old "bubble" tile grid above, Matt's ask: "remove the bubble data blocks in favor of this more traditional list format"), revised twice more the same day. Season Format / Championship Points / Season Rules are now each their own pill-headed .rcl-hero-stats-group (Matt's ask: "Make CHAMPIONSHIP POINTS into a pill... add a SEASON RULES pill in the same style as SEASON FORMAT"), so this list only ever holds ONE pill section's own blocks at a time -- see _rclOpenSeasonDetailsModal (js/league.js) for how the sections themselves stack. */ /* 0, was 10px (2026-10-01, "move the pills closer to the section they're labeling") -- see .rcl-hero-stats-label's own margin-bottom comment above, which now supplies the whole gap by itself. */ .rcl-seasonfmt-list { margin-top: 0; } .rcl-seasonfmt-block + .rcl-seasonfmt-block { margin-top: 18px; } /* Plain "Category: Value" line, left-aligned, NOT a two-column label/value layout (2026-10-01, Matt's catch: "I don't want the values to be on one side and the catagory on the other... category then a colon, then a space and then the value") -- a single text run per row, read top to bottom the way Matt's own spec was typed. */ .rcl-seasonfmt-row { padding: 4px 0; font-size: 13.5px; color: var(--rcl-ink); } .rcl-seasonfmt-row-label { color: var(--rcl-ink-dim); font-weight: 600; } .rcl-seasonfmt-row-value { color: var(--rcl-ink); font-weight: 700; font-variant-numeric: tabular-nums; } /* Championship Points' own tier rows (Sprint/Medium/Long) briefly had a tree sub-row here (2026-10-01) matching the Data Management Cars/Tracks lists' .rc-dm-subrow/.rc-dm-tree shape -- removed the same day (Matt's ask: "get rid of the tree indentation and just make it like the rest -- Sprint: P1 n, P2 n, etc") in favor of the plain .rcl-seasonfmt-row every other row here already uses. Those rows don't use .rcl-seasonfmt-row- value at all (2026-10-01 follow-up, Matt's ask: "make the points... normal weight and keep the positions in front, bold") -- only the "Pn" position marker in front of each point value is bold; the point value itself inherits the row's own normal weight. */ .rcl-seasonfmt-pos { font-weight: 700; color: var(--rcl-ink); } /* -------------------------------------------------------------------- */ /* Layout */ /* -------------------------------------------------------------------- */ .rcl-main { max-width: 1180px; margin: 0 auto; padding: 36px 32px 80px; } /* League News 1/3, Recent Results 2/3 (2026-09-20, Matt's call -- was News 2fr / Results 1fr, the opposite ratio, until this swap). */ /* align-items changed from start to stretch (2026-09-23, Matt's ask: "make both containers the same height. So if RECENT RESULTS has more data... have LEAGUE NEWS container stretch all the way to make it the same height") -- grid's default row behavior already stretches items to the row's tallest cell; align-items:start was what opted News/ Results OUT of that, sizing each to its own content instead. This grid only ever holds these two panels (Leaderboard/Calendar below are .rcl-row-full, a separate full-width block, not part of this grid), so the change is scoped to exactly the pair Matt meant. */ .rcl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; align-items: stretch; } @media (max-width: 900px) { .rcl-grid { grid-template-columns: 1fr; } } /* height: 100% + the .rcl-panel/.rcl-panel-body flex rules below turn the grid's own equal-height row (from align-items:stretch above) into an actual stretched panel background, not just an empty gap under the shorter column's content. */ .rcl-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; height: 100%; } .rcl-col > .rcl-panel { flex: 1 1 auto; display: flex; flex-direction: column; } .rcl-col > .rcl-panel > .rcl-panel-body { flex: 1 1 auto; } /* Full-width rows below the two-column grid (Leaderboard/Calendar, added 2026-09-19) -- same vertical rhythm as .rcl-grid's own row gap. */ .rcl-row-full { margin-top: 28px; } /* .rcl-grid-even (Leaderboard/Points Tables 50/50 row) removed 2026-09-19 -- Points Tables is no longer its own panel; Leaderboard is full width again with its own multi-column layout below (.rcl-standings-columns). */ /* -------------------------------------------------------------------- */ /* Section / card shell -- angled corner tab on every section header, */ /* the dark-page equivalent of .rc-dash-card's red-underline title. */ /* Rounded corners (2026-09-19, Matt's call) match the Dashboard cards' */ /* own radius (.rc-panel in style.css) -- overflow:hidden so the header */ /* strip's square top corners get clipped to match instead of poking */ /* out past the rounded card edge. */ /* -------------------------------------------------------------------- */ .rcl-panel { background: var(--rcl-bg-raised); border: 1px solid var(--rcl-line); border-radius: 8px; overflow: hidden; position: relative; /* Tiniest bit of glow (2026-09-19, Matt's ask: "a little dimension... nothing crazy obvious, just something subtle") -- a soft, wide, very-low-opacity light halo plus a barely-there drop shadow for a touch of lift, instead of any of this page's brand-red accent. Kept deliberately faint so it reads as ambient depth, not a highlight. */ box-shadow: 0 0 22px rgba(255, 255, 255, 0.035), 0 6px 16px rgba(0, 0, 0, 0.35); } .rcl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 2px solid var(--rc-red); background: var(--rcl-bg-raised-2); } /* League News panel header banner (added 2026-09-19, Matt's ask) -- same layering technique as .rcl-hero::before above (banner image on its own ::before, behind the title text): position:relative + overflow:hidden on the header itself so the banner is clipped to this one header bar rather than spilling into the panel body below or past the panel's own rounded corners; the image sits on ::before at z-index:0, and .rcl-panel-title gets its own explicit stacking (position:relative, z-index:1) so it stays readable on top of it. Scoped to .rcl-panel-head-news specifically (see league.html) so Recent Results' identical-looking header, right next to this one, is unaffected. 50% opacity (2026-09-19, dimmed down from the original 90% ask -- Matt's follow-up call: "dim the league news background to 50%"; the main hero's own banner opacity was raised to 0.5 in separate later passes, so the two now happen to match, but each is tuned independently for its own space) -- present enough that a faint image wouldn't just disappear in this smaller, busier area, but not competing with the "League News" title text sitting on top of it. */ .rcl-panel-head-news { position: relative; overflow: hidden; } .rcl-panel-head-news::before { content: ''; position: absolute; inset: 0; /* Relative to THIS file (css/league.css), not the page -- see the league_banner comment on .rcl-hero::before above for why this needs the ../ prefix. Same bug was hiding this image too. */ background-image: url('../assets/images/news_banner.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.5; z-index: 0; pointer-events: none; } .rcl-panel-head-news .rcl-panel-title { position: relative; z-index: 1; } .rcl-panel-title { /* Bumped to match .rc-dash-card-title's own size (2026-09-19, Matt's ask: "Increase the container header sizes in the LEAGUE HUB up one level -- make them the same size font as the dashboard card headers") -- style.css's .rc-dash-card-title is 20px/800. */ font-family: var(--rc-font-heading); font-size: 20px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rcl-ink); display: flex; align-items: center; gap: 10px; /* Subtle dark drop shadow (2026-09-20, Matt's ask: "cast a subtle dark drop shadow around the text to help pronounce it more as a header") -- small offset, soft blur, low opacity so it reads as a bit of depth lifting the header text off the panel background rather than a heavy outline. Every panel header on the page shares this one class, including the ones sitting directly on top of a banner image (League News, the hero) where it also helps the text stay legible against whatever's behind it. Popup titles (.rcl-modal-title) are a separate rule and intentionally NOT touched here -- this is about the page's own container headers, not every popup on top of it. */ text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } /* Angled clip-path hash mark replaced with a literal red forward slash (2026-09-19, Matt's call: "instead of a style hash, just add 3 red backslashes in front of the container headers", corrected same day: "I meant FORWARD slashes... 3 FORWARD slashes not backwards", cut down same day to one: "gives off 'DODGE' vibes... make it one forward slash... to simplify", briefly doubled ("double up the slash... to double the weight"), then back down to one again same day, with the weight itself doing what the doubling was standing in for: "make the red forward slash 1000 weight and make it only one forward slash (not two)". Plain text instead of a shaped block, so it reads as a typographic mark rather than a separate graphic element. Forward slash needs no escaping in a CSS content string (unlike backslash, which needed \\ per character in an earlier version of this rule). */ .rcl-panel-title::before { content: "/"; color: var(--rc-red); font-weight: 1000; /* Slightly larger than the 20px title text (2026-09-19 follow-up, Matt's ask). flexbox's align-items:center only centers each item's LAYOUT BOX, not where the "/" glyph actually sits inside its own font metrics -- most fonts draw a slash biased toward the bottom of its em box, so at a bigger size than the title text next to it, it visually reads as sitting low even though the boxes line up (Matt's catch, same day). A small relative nudge up corrects for that. */ font-size: 24px; line-height: 1; position: relative; top: -2px; } .rcl-panel-meta { font-size: 12px; color: var(--rcl-ink-faint); font-family: var(--rc-font-body); } .rcl-panel-body { padding: 18px; } /* -------------------------------------------------------------------- */ /* Standings */ /* -------------------------------------------------------------------- */ /* One column per class (2026-09-19, Matt's call: "make the LEADERBOARD container contain a column for every class there is in the season") -- auto-fit rather than a hardcoded column count, since the number of classes varies season to season; each column gets at least 240px before the grid drops to fewer columns, so it still reads fine with just one or two classes and degrades to a single column on narrow screens without a separate media query. */ /* Standings status note -- moved to the BOTTOM of the panel, above its links row, and reworded to include a posting date (2026-09-26, Matt's ask: "erase the notifications that pop up at the top of CURRENT STANDINGS" / "*PRELIMINARY RESULTS (date of posting)"/"*OFFICIAL RESULTS (date of posting)") -- was at the top, "Preliminary Results Pending League Review"/"Official Results" with two different colors (gold for preliminary, dim ink for official); now BOTH read gold ("Both should be the same gold color as the current preliminary standings message"), so .rcl-standings-status-official (the old dim-ink variant) is removed -- nothing references it any more, see _rclBuildResultsStatusNotice_, js/league.js, which also builds the identical notice for Recent Results and the All Results popup. */ .rcl-standings-status-note { font-family: var(--rc-font-heading); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; /* Space above (2026-09-26 follow-up, Matt's ask: "add a space between the bottom of the leaderboard and the results notifications") -- this note sits directly after the standings columns/class tables with no gap of its own otherwise. */ margin-top: 18px; margin-bottom: 16px; } .rcl-standings-status-preliminary { color: #e0b64c; } /* Mobile-only "view on PC" nudge, appended after this notice in the All Results popup (2026-09-27, _rclBuildAllResultsBody_) -- hidden above the mobile breakpoint (see that media query below), since desktop/tablet already see every column of the standings grid. */ .rcl-standings-status-mobile-note { display: none; } .rcl-standings-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; align-items: start; } /* Gap above already spaces columns/rows in the grid -- the old stacked- layout margin would only unevenly pad whichever class happens to start a new row. */ .rcl-standings-columns .rcl-standings-class + .rcl-standings-class { margin-top: 0; } .rcl-standings-class + .rcl-standings-class { margin-top: 22px; } /* .rcl-standings-class-name / .rcl-standings-class-pill rules removed 2026-09-23 -- both replaced by the one shared .rcl-standings-class- header graphite bar below (Matt's ask, see js/league.js's _rclBuildStandingsColumns_ comment). Kept out entirely rather than left unused, since neither is referenced from js/league.js anymore. */ /* Graphite header bar (2026-09-23, Matt's ask) -- full-width, centered, solid graphite background above each class column, reading " LEADERBOARD" on the ranked Standings panel or " DRIVERS" on the Drivers roster popup (see js/league.js). Same graphite gradient .rcl-standings-pos already uses for non-podium position badges elsewhere on this page, so "graphite" reads as one consistent surface sitewide rather than a new color introduced just for this bar. */ /* Brushed nickel + accent rule (2026-09-27, Matt's ask, replacing the flat graphite gradient above) -- three layers: a fine repeating diagonal gradient for the brushed-metal texture, a light-to-dark diagonal sweep for the satin sheen, and an inset highlight/shadow pair plus a drop shadow to sell it as a raised metal bar rather than a flat tint. Text flips to dark ink with a light text-shadow since the bar itself is now light, not dark. Bottom rule recolored steel silver (2026-09-29, Matt's ask, after reviewing a 9-color mockup comparison: "make all of the instances a steel silver border on the bottom. That looks clean") -- was Race Club red (#F21B0C); #C9CBCE reads as a cool metal accent that matches the brushed-nickel bar itself instead of standing out from it. Applies everywhere this shared class is used (Recent Results, Current Standings, the All Results Race/Qualifying popups, and the Drivers roster) since it's the one rule all of them share. */ .rcl-standings-class-header { position: relative; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.09) 0px, rgba(255, 255, 255, 0.09) 1px, rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 3px), linear-gradient(135deg, #d9dade 0%, #b7b9be 45%, #eceef0 55%, #9a9ca1 100%); color: #24262b; font-family: var(--rc-font-heading); /* Bumped 12.5px -> 14px (2026-09-27, Matt's ask: "increase the brushed nickel header font a little bit larger") -- across every use of this class sitewide (Recent Results, Current Standings, the All Results Race/Qualifying popups, and the Drivers roster all share it). */ font-size: 14px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; text-align: center; padding: 8px 10px 7px; border-radius: 6px; margin-bottom: 12px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.4); border-bottom: 2px solid #c9cbce; } .rcl-standings-row { display: grid; /* Wider position column (2026-09-19) -- the position number now gets the same big/bold style treatment as the Calendar's round numbers (task below), so it needs more room than the old plain 30px slot. */ grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; /* Minimal top/bottom padding (2026-09-19 follow-up, Matt's call: "reduce the height of the leaderboard drivers individual entries... minimal padding above and below or else the leaderboard list is going to be super long") -- name/team/car-number collapsed onto one line in the same pass (see .rcl-standings-name-row below) is most of what makes this height cut work without feeling cramped; this was 10px before. */ padding: 4px 6px; /* Gray border-bottom removed (2026-09-20, Matt's call: "remove the gray border in between containers and keep the gap there so it shows a black space in between") -- margin-bottom in its place keeps the same visual gap, now just the panel's own near-black background (--rcl-bg-raised) showing through instead of a line. Zebra striping below (nth-child(even)) is the new way to tell rows apart row to row instead of the border. Horizontal padding added (was 0) so the striped background has a little breathing room on both edges instead of butting flush against the panel's own 18px padding. */ margin-bottom: 3px; border-radius: 4px; } .rcl-standings-row:last-child { margin-bottom: 0; } /* Alternating row background (2026-09-20, Matt's ask: "alternate rows with black and a very subtle lighter background to help read which driver has which points") -- odd rows stay transparent (the panel's own near-black background shows through); even rows get a faint lighter fill, one shade up the dark palette (--rcl-bg-raised-2). */ .rcl-standings-row:nth-child(even) { background: var(--rcl-bg-raised-2); } /* No rank NUMBER and no points column before any race has been run (2026-09-19 follow-up, Matt's call, then clarified: "still show the same number containers, just without the numbers and keeping the same width but using the graphite colored backgrounds") -- the grid stays the normal 40px/1fr/auto three columns; js/league.js just leaves the .rcl-standings-pos container's text empty and skips the p1/p2/p3 metal class, so it falls back to the plain graphite gradient below. Nothing CSS-side to add for that -- see .rcl-standings-pos's own comment. */ /* Position numbers now sit inside a solid-color container, same idea as the Calendar container's own round-number bar (2026-09-19, Matt's call: "the container behind each ranked number to be solid in color and slightly rounded on the top left corner -- the list should look similar to the CALENDAR container on that page, only with different colors") -- .rcl-standings-pos bleeds to fill the row's own top/bottom padding via negative margin (same trick the Calendar round-number bar used) so it reads as a filled block down the row's left edge, rounded only at the top-left corner like .rcl-cal-round. Metal color is a per-row modifier class (.rcl-standings-row-p1/p2/p3) added in js/league.js by finish position -- gold/silver/bronze backgrounds for the podium, graphite (was a lighter "titanium" silver, 2026-09-19 follow-up, Matt's call) for everyone else (P4 and below, and every row before results exist), pulled from this page's own dark palette tokens (--rcl-line-bright/ --rcl-line) rather than a new color, with light text now that the background itself is dark instead of light. */ .rcl-standings-pos { align-self: stretch; /* Matches .rcl-standings-row's own padding above -- bleeds up/down/left to the row's true edges (only left, not right, since this is the first grid column) so the colored badge still reads as a filled bar down the row's left edge now that the row has horizontal padding (2026-09-20, added for the new zebra-stripe background's breathing room -- see .rcl-standings-row). */ margin: -4px 0 -4px -6px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--rcl-line-bright) 0%, var(--rcl-line) 100%); font-family: var(--rc-font-heading); font-size: 18px; font-weight: 900; line-height: 1; color: var(--rcl-ink); font-variant-numeric: tabular-nums; user-select: none; border-top-left-radius: 8px; } /* Driver list rows (2026-09-23, Matt's ask: "add a simple left line to each row instead of the larger 'number container'") -- Drivers popup only (hasResults false, see js/league.js), replacing the big colored .rcl-standings-pos badge with a thin plain accent line down the row's left edge instead. Single grid column now that there's no pos/points box to reserve room for -- just the identity block, indented past the line. */ /* Left accent line removed (2026-09-23, Matt's ask: "in the driver list, remove the left border from each row") -- the .rcl-standings-class- header graphite bar above each column now already marks the section, so the per-row line was redundant. Single grid column and left padding both stay (no pos/points box to reserve room for), just without the border. */ .rcl-standings-row-simple { grid-template-columns: 1fr; padding-left: 12px; border-radius: 0; } .rcl-standings-row-p1 .rcl-standings-pos { background: linear-gradient(135deg, #f4dc8e 0%, #cf9f2c 100%); } .rcl-standings-row-p2 .rcl-standings-pos { background: linear-gradient(135deg, #eceef1 0%, #a7abb2 100%); } .rcl-standings-row-p3 .rcl-standings-pos { background: linear-gradient(135deg, #dba876 0%, #a3653a 100%); } /* flex: 0 1 auto + min-width (2026-09-23) -- the name can shrink and ellipsize as a last resort, but only after .rcl-standings-team (below) has already shrunk as far as it can, since flex-shrink gives priority to whichever sibling has more room to give (flex:1) first. */ .rcl-standings-name { font-size: 14.5px; font-weight: 700; color: var(--rcl-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 24px; } /* DNF name/car number, light gray (2026-09-26, Matt's ask: "any DNF drivers in the list should have a light gray name and number style, to make them less of a highlight but not invisible") -- weight/size stay exactly the same as every other row (2026-09-24, Matt's ask against bolding a DNF name -- see _rclBuildDriverIdentity_, js/league.js), only the color dims. Applied via .rcl-standings-identity-dnf on the identity block wrapping both spans. */ .rcl-standings-identity-dnf .rcl-standings-name, .rcl-standings-identity-dnf .rcl-standings-carnum { color: var(--rcl-ink-faint); } /* Same font-size as the driver name now (2026-09-19 follow-up, Matt's call: "place the team after it... all of this in the same size font as the driver name") -- was its own smaller line below the name; a lighter weight/color is still what tells it apart from the bold name next to it on the same line. flex: 1 1 30px (2026-09-23) -- the team name is the first thing to shrink and ellipsize when a row is tight, so a long team name can never push the row (or the driver name) onto a second line (Matt's ask). */ .rcl-standings-team { font-size: 14.5px; font-weight: 500; color: var(--rcl-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 30px; min-width: 0; } .rcl-standings-pts { text-align: right; } .rcl-standings-pts-num { font-family: var(--rc-font-heading); font-size: 16px; font-weight: 800; color: var(--rcl-ink); font-variant-numeric: tabular-nums; } /* .rcl-standings-pts-gap rule kept but unused as of 2026-09-23 -- the "-N PTS" gap-to-leader line under each row's point total was removed (see _rclBuildStandingsColumns_ in league.js) so every row is the same height as P1's. */ .rcl-standings-pts-gap { font-size: 11.5px; color: var(--rcl-ink-faint); font-variant-numeric: tabular-nums; } /* Driver identity block -- manufacturer logo, then everything else (name, flag, car number, team) on one single line (2026-09-19 follow- up, Matt's call: "reduce the size of the manufacturer logo, place it next to the name, then show the nationality flag... team number... team after it -- all of this on one line"). Logo box is a smaller fixed slot (was 70x40) now that the row itself is much shorter -- the image is capped to match and centered in the slot, so a wide-but-short logo and a narrow-but-tall one both still look like they belong to the same compact row height. */ .rcl-standings-identity { display: flex; align-items: center; gap: 8px; min-width: 0; } /* align-self: center added explicitly on both children (2026-09-20, Matt's ask: "make sure the manufacturer logos are vertically centered with the text next to it") -- belt-and-suspenders alongside identity's own align-items:center above, so the logo slot's fixed 40x24 box stays centered against .rcl-standings-name-row's own height even if that row wraps to two lines (a long team name on a narrow column) rather than sitting flush to the top of whichever sibling happens to be tallest. */ .rcl-standings-mfr-logo-slot { flex: none; /* +10px (2026-09-24, Matt's ask: "add 10 more pixels to max width for manufacturer logos" on Recent Results/View All Results/Current Standings/the Drivers roster popup -- all four share this one identity block via _rclBuildDriverIdentity_, so one change here covers all of them). Slot width kept matched to the logo's own max-width right below so a wide logo has room to actually reach it without overflowing into the name text next to it. */ width: 50px; height: 24px; display: flex; align-items: center; justify-content: center; align-self: center; } .rcl-standings-mfr-logo { max-width: 50px; max-height: 24px; width: auto; height: auto; object-fit: contain; display: block; } /* Name/flag/car-number/team, all in this one row now (2026-09-19 follow- up). Changed from flex-wrap to a hard single line (2026-09-23, Matt's ask: "I don't want driver names or team names being sent to the next row") -- team name is the one allowed to truncate with an ellipsis when the row is tight (.rcl-standings-team below), since it's the least critical piece of identity; name/flag/car-number stay fully visible and fixed-size. */ .rcl-standings-name-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px 8px; min-width: 0; align-self: center; overflow: hidden; } .rcl-standings-flag { flex: none; width: 16px; height: 12px; object-fit: cover; border-radius: 2px; border: 1px solid var(--rcl-line-bright); } /* Car number -- same size as the name (Matt's call). Bold white (was brand-red, 2026-09-19 follow-up, Matt: "the number on the leaderboard should be bold white not red") -- same tone as the driver name right next to it, with the 800 weight (already bold) now what sets it apart on the line instead of a color change. */ .rcl-standings-carnum { font-size: 14.5px; font-weight: 800; color: var(--rcl-ink); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; } /* "View Points Tables" link at the bottom of the Leaderboard panel (2026-09-19, Matt's call) -- opens the points tables in a popup instead of them living in their own panel on the page. Same shape as the "Load More News" divider treatment (top border + centered), same red uppercase link type as .rcl-news-continue, just its own rule since it sits directly in the panel body rather than the news modal. Flex + gap (2026-09-21 fix, Matt's catch: "add a space between the view drivers list and the view points table") -- the two link buttons were appended back to back with no separator between them, and plain text-align:center doesn't add any space of its own between adjacent inline-block buttons, so they sat flush against each other. */ .rcl-standings-points-row { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rcl-line); display: flex; justify-content: center; align-items: center; gap: 28px; } .rcl-standings-points-link { background: none; border: none; padding: 0; font-family: var(--rc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rc-red); cursor: pointer; } .rcl-standings-points-link:hover { text-decoration: underline; } /* -------------------------------------------------------------------- */ /* Last race results */ /* -------------------------------------------------------------------- */ /* Event on its own line, Winner/Pole/Fastest Lap together on the row underneath (2026-09-23, Matt's ask) -- .rcl-race-headline is now a column of .rcl-race-headline-row strips, each one the flex-wrap row the whole headline used to be. Winner/Pole/Fastest Lap spread evenly across the row, 33% each (2026-09-23 follow-up, Matt's ask: "Spread the Winner, Pole and Fastest laps evenly across the header, 33% each") -- flex:1 on each stat with wrap turned off does this; the Event row above still uses the same two classes and just ends up as one full- width "column", which is harmless. */ .rcl-race-headline { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--rcl-line); } /* Recent Results panel + All Results popup (2026-09-27, Matt's ask: "remove the header that says the winner/pole/fastest lap. Leave a large enough gap until the graphite header so it doesn't look crowded") -- with the flat stat row gone (see _rclBuildRaceHeadline_'s opts.hideStatRow, js/league.js) this headline is just the one event-title line, so the original 26px/16px gap (sized to sit under a whole extra stat row) reads cramped against whatever comes right after it -- the graphite class header on Recent Results, or the new per-class category breakdown on the All Results popup (_rclBuildResultsCategoryBreakdown_, which also passes hideStatRow now). Bumped up on its own modifier class rather than changing the base rule, since nothing on this page uses the un-modified .rcl-race-headline WITH its full stat row any more, but keeping this as an opt-in modifier (rather than editing the base rule) still protects any future caller that brings the stat row back. */ .rcl-race-headline-notabs { margin-bottom: 34px; padding-bottom: 22px; } /* Started Recent Results only (2026-09-27, Matt's ask: "move the topmost class results header bar to where the gray line is below the event title... and deleted the gray line"), then extended to the All Results popup the same day ("remove the line above the header in between the bonus points winners and the event name") -- drops .rcl-race-headline's border-bottom entirely and collapses its padding, so whatever comes right after (Recent Results' first .rcl-standings-class-header graphite bar, or All Results' category breakdown, _rclBuildResultsCategoryBreakdown_) sits right where that line used to be, with a single modest margin standing in for both the old line and the old post-line gap. Left off .rcl-race- headline-notabs itself (used above) so a future caller can still opt into the old bigger gap/line combo -- see _rclBuildRaceHeadline_'s opts.closeGapNoLine, js/league.js. */ .rcl-race-headline-closegap { padding-bottom: 0; border-bottom: none; margin-bottom: 16px; } /* "Round at : " header line (2026-09-26 rework, Matt's ask) -- same three-piece weight/color split as the Calendar's own event line (.rcl-cal-event/-event-name/-event-track/ -event-layout, further down this file): event name bold, track name normal weight, layout normal weight and gray, all built by the shared _rclBuildEventTitleLine_ (js/league.js) so Recent Results and the View All Results popup/Qualifying tab (all three call it) read with the exact same heading treatment the Calendar already uses for a round. */ /* "EVENT" label above the event/track title, ALL RESULTS only (2026-09-30, Matt's ask: "add 'EVENT'... above the event/track title in ALL RESULTS"). Removed again 2026-10-01 (Matt's ask: "eliminate EVENT label above it and move the event title up" -- see js/league.js's own comment on _rclBuildEventTitleLine_'s roundSep for the fuller history) -- its .rcl-race-event-label rule and _rclBuildEventLabel_ (js/league.js) are both gone with it. */ .rcl-race-headline-eventname { font-size: 18px; color: var(--rcl-ink); } .rcl-race-headline-event-name { font-weight: 800; } .rcl-race-headline-event-track { font-weight: 500; } .rcl-race-headline-event-layout { font-weight: 500; color: var(--rcl-ink-dim); } .rcl-race-headline-row { display: flex; gap: 22px; } .rcl-race-headline-stat { flex: 1 1 0; min-width: 0; } .rcl-race-headline-label { font-family: var(--rc-font-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rcl-ink-faint); } .rcl-race-headline-value { font-size: 15px; font-weight: 700; color: var(--rcl-ink); margin-top: 3px; } /* Gold, not red (2026-09-23, Matt's ask: "make the winner a gold color font" -- same gold used for the Standings panel's "preliminary" status note, .rcl-standings-status-preliminary, so this page has one gold consistently rather than two different golds). */ .rcl-race-headline-value-accent { color: #e0b64c; } /* Fastest Lap's name in the HEADER only (2026-09-26, Matt's correction -- moved here from a per-row highlight in the standings list below, which Matt asked to remove: "I don't want the fastest lap driver in the standings list to be purple, only the driver that is mentioned in the header should be purple"). Same light purple as before, just scoped to this one headline stat value now instead of a whole row's name. */ .rcl-race-headline-value-fastestlap { color: #b388ff; } /* Per-class category breakdown -- All Results popup (2026-09-27, Matt's ask: replaces the old flat overall-only Winner/Pole/Fastest Lap stat row with one row PER CLASS under each category, "the higher class is on top", plus a new Most Laps Led category between Winner and Pole). Four category blocks in a row, wrapping on narrow widths since a 5-class round would otherwise squeeze every column too tight. Originally ONE combined block at the top of the popup, covering every class; reworked 2026-10-01 (Matt's ask: "move the bonus point sections to underneath their respective class section") to render once PER CLASS instead, called from inside that class's own .rcl-race-class block (_rclBuildClassCategoryBreakdown_, js/league.js) -- see .rcl-race-categories-inclass right below for how its border/spacing suits sitting right under a class's own header and above its standings table, same position within a class section this used to occupy at the very top of the whole popup (2026-10-01, briefly moved to sit underneath the standings table instead the same day -- Matt's follow-up: "I want it to live under the header and above the table in each class" -- this supersedes that). */ .rcl-race-categories { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--rcl-line); } /* 24px gap above (was 16px, then 10px, then 0 before that -- Matt's ask, three times now: "add a tiny bit more space between the class header and the bonus catagories", "add a little more space between the bonus catagories and the header again", "still needs a little more space added between the header and bonus catagory"), and no line/padding below any more (Matt's ask: "remove the gray line below the catagory so there's just a gap before the table header starts") -- the 18px margin-bottom alone now supplies that gap before .rcl-race-col-head, with nothing to visually divide the two. */ .rcl-race-categories-inclass { margin-top: 24px; margin-bottom: 18px; padding-top: 0; padding-bottom: 0; border-bottom: none; border-top: none; } .rcl-race-category { flex: 1 1 200px; min-width: 180px; } .rcl-race-category-title { display: flex; align-items: center; gap: 6px; font-family: var(--rc-font-heading); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; /* Gray, matching the event line's own track/layout tone (2026-09-30, Matt's ask: "make the Winner, Most Laps Led, Pole -> Pole Sitter and Fastest Lap with their respective icons, the same gray color as the track name in the event on the ALL RESULTS page") -- was red (2026-09-27 pass, reverted here); var(--rcl-ink-dim) is the same gray .rcl-race-headline-event-layout already uses on the event title line right above this breakdown, so both read as the same "dim label" gray instead of two different tones. */ color: var(--rcl-ink-dim); margin-bottom: 8px; } /* Icon has its own explicit color (rather than truly inheriting the title's) since it needs to stay this gray even on Winner/Fastest Lap rows, where .rcl-race-category-row-winner/-fastestLap recolor the NAME and NUMBER gold/purple but never touch this title row above them (2026-09-30, same gray as the title text next to it, see comment above). */ .rcl-race-category-icon { display: inline-flex; color: var(--rcl-ink-dim); } .rcl-race-category-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; margin-bottom: 6px; } .rcl-race-category-row:last-child { margin-bottom: 0; } .rcl-race-category-name { font-weight: 700; color: var(--rcl-ink); } /* Same size, weight, AND color as the name next to it (2026-09-27, Matt's ask, revised same day -- "in pole and laps led in ALL RESULTS, the numbers behind the drivers need to be the same style color and weight as the driver name": the first pass only matched weight and left color on its own dimmer tone, which still read as mismatched on Pole/Most Laps Led rows). font-size was already inherited from .rcl-race- category-row (14px, matching the name). Winner/fastest-lap rows still override this to their own gold/purple accent below, same color as THEIR name, so every category now reads as one consistent name+number unit. */ .rcl-race-category-number { font-weight: 700; color: var(--rcl-ink); font-variant-numeric: tabular-nums; } /* Winner's gold accent color (2026-09-27, Matt's ask: "make the winner name gold... in ALL RESULTS") -- same gold token the headline's own Winner stat value uses (.rcl-race-headline-value-accent), reused here for the per-class category breakdown row. The car number picks up the same color as its name so the two read as one accented unit; Most Laps Led and Pole rows are untouched. Fastest Lap's matching purple rule (.rcl-race-category-row-fastestLap) is gone (2026-10-01, Matt's ask: "remove the purple style to the fastest lap winners and make it bold white like the others") -- that row now falls through to the same plain bold-ink .rcl-race-category-name/-number styling every other category already uses. */ .rcl-race-category-row-winner .rcl-race-category-name, .rcl-race-category-row-winner .rcl-race-category-number { color: #e0b64c; } /* Country flag (2026-10-01, Matt's ask: "eliminate the class pill behind the driver name but let's add their country flag" -- the class pill that used to end this row, sized via a now-removed .rcl-race-category-row .rc-badge-chip-abbrev rule, is gone now that each breakdown already sits inside its own class's section). Reuses .rcl-standings-flag's exact look (16x12, rounded corners, thin border) every other driver row on this page already shows a flag with; this modifier just tightens the row gap slightly for the smaller flag. */ .rcl-race-category-flag { margin-left: -2px; } .rcl-race-category-extra { color: var(--rcl-ink-dim); font-size: 12.5px; } /* Widened 18px -> 32px (2026-09-27, Matt's ask: "add a little more gap from the bottom of the top class leaderboard to the graphite header of the next class") -- shared by Recent Results and the All Results popup, both of which build their per-class blocks as sibling .rcl-race-class divs. */ .rcl-race-class + .rcl-race-class { margin-top: 32px; } /* Red (2026-09-27, Matt's ask: "race report and penalties assessed red too") -- was the dim gray label tone; this class is only ever used for those two section titles ("Race Report"/"Penalties Assessed", league.js). */ .rcl-race-class-name { font-family: var(--rc-font-heading); font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rc-red); margin-bottom: 6px; } /* Recent Results / View All Results rows (rewritten 2026-09-23, Matt's ask: "Make the weight and color of all the drivers in RECENT RESULTS the same as color and weight as the CURRENT STANDINGS list" / "Make the driver styling and format in the [View All Results] list look identical to the CURRENT STANDINGS list") -- both now reuse the exact .rcl-standings-pos position badge and .rcl-standings-identity driver block Current Standings uses (built by the shared _rclBuildPosBadge_/_rclBuildDriverIdentity_ helpers, js/league.js), just inside a wider grid for View All Results' extra data columns. This also gets the "make the standings numbers much larger" ask for free -- .rcl-standings-pos is already the big 18px/900-weight badge. */ /* Driver column is the widest column everywhere, and every other column is a modest fixed width so it never competes with it (2026-09-23, Matt's ask: "make the width of the driver column the largest and make all other columns respect that width"). Pos stays 40px in every grid (matches .rcl-standings-pos's own badge width) so the badge lines up identically across Current Standings/Recent Results/View All Results. */ .rcl-race-grid-3 { grid-template-columns: 40px 1fr auto; } /* ON column removed entirely (2026-09-23 follow-up, Matt's ask) -- 8 columns then, driver bumped from 1.5fr to 2fr with that freed space. A PEN column (same 64px slot right after Total Time) briefly lived here 2026-09-26 through 2026-10-01, then was removed and INTERVAL (to the car directly ahead) put back in its place (Matt's ask: "Remove the penalty column and put Interval stats back in there instead. We already have a Penalties Assessed section" -- that section, further down the popup, is the one place penalties show now). INTERVAL/PTS' column widths are otherwise unchanged from the PEN-era layout -- still 9 columns, PTS keeps its compact 52px at the end, same idea as GAP/Best Lap's own fixed widths. */ .rcl-race-grid-allresults { grid-template-columns: 40px 2fr 50px 118px 64px 78px 84px 92px 52px; } /* Qualifying tab (2026-09-26, Matt's ask) -- Pos/Driver/Best Lap/Sector 1-3/Avg (KM/H), 7 columns. No Laps/Total Time/Pen/Gap -- a Qualify session has none of those concepts. */ .rcl-race-grid-qualifying { grid-template-columns: 40px 2fr 92px 80px 80px 80px 84px; } .rcl-race-row { display: grid; gap: 12px; align-items: center; padding: 4px 6px; margin-bottom: 3px; border-radius: 4px; font-size: 14px; } .rcl-race-row:nth-child(even) { background: var(--rcl-bg-raised-2); } .rcl-race-row-points { color: var(--rcl-ink); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; text-align: right; } .rcl-race-row-num { color: var(--rcl-ink); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; } /* .rcl-race-row-totaltime/.rcl-race-row-penalty-badge (the "+Ns" badge next to Total Time) tried and reverted 2026-09-25, same day -- Matt wants penalties staying ONLY in the "Penalties Assessed" list at the bottom of this popup for now, until there's a better on-leaderboard treatment. */ .rcl-race-row-num, .rcl-race-row-gap, .rcl-race-row-avg, .rcl-race-row-bestlap { color: var(--rcl-ink-dim); font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; } /* .rcl-race-row-pen/-pen-active (the PEN column's own styling, 2026-09-26) removed 2026-10-01 along with the column itself -- see this file's own comment on .rcl-race-grid-allresults above. The INTERVAL cell that took its slot reuses .rcl-race-row-gap (just above) rather than a dedicated class of its own, since it's styled identically to GAP. PTS column (2026-09-26, Matt's ask -- replaces the removed INTERVAL column, at the end of the row: "add a PTS column to show how many they got from this race... make sure it includes any bonus points" -- the row's own points field already folds bonus points into the total server-side, see _rclBuildAllResultsBody_'s comment, js/league.js). Bold ink, same treatment Recent Results' own Pts column (.rcl-race-row-points) uses, just this table's smaller 13px column size. */ .rcl-race-row-pts { color: var(--rcl-ink); font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; } /* Category labels, divider line BELOW them (2026-09-23 follow-up, Matt's ask: "move the line BELOW the catagory labels" -- was above), no background fill. Shared by Current Standings, Recent Results and View All Results (_rclBuildStandingsColumns_/_rclRenderResults/ _rclBuildAllResultsBody_, js/league.js) -- same grid columns as the data rows below each one so every label lines up with its column. Line starts at the Driver column, not above Pos (2026-09-26, Matt's ask: "begin the line under the column labels... at the driver name and have it go to the end -- no line above the position containers") -- a plain border-bottom on this grid container drew under every column including Pos, so the border moved to a ::after pseudo-element positioned to start right after the Pos column instead of a real border. 52px = Pos's own fixed 40px width (every .rcl-race-grid-* variant keeps Pos at 40px, see those rules further down) plus this grid's 12px column gap -- the same offset works for all three grids since Pos is always the first, always-40px column. */ .rcl-race-col-head { display: grid; gap: 12px; align-items: end; padding: 6px 6px 8px; margin-top: 4px; position: relative; font-family: var(--rc-font-heading); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rcl-ink-faint); } .rcl-race-col-head::after { content: ''; position: absolute; left: 52px; right: 0; bottom: 0; height: 1px; background: var(--rcl-line-bright); } .rcl-race-col-head > div:not(:first-child):not(:nth-child(2)) { text-align: right; } /* -------------------------------------------------------------------- */ /* All Results popup (added 2026-09-23) -- round selector + full, */ /* uncapped per-class results + Penalties Assessed. Reuses the exact */ /* .rcl-race-headline/.rcl-race-class/.rcl-race-row classes above so the */ /* full results table matches the abbreviated Recent Results panel's own */ /* look exactly -- only the round-select row and the penalties list below */ /* are new. This is the ONLY place on the League Hub a round's penalties */ /* render (Matt's placement call: the popup, not inline in Recent */ /* Results) -- see _rclOpenAllResultsModal/_rclBuildAllResultsBody_, */ /* js/league.js. */ /* -------------------------------------------------------------------- */ /* 3/4 width (2026-09-26 follow-up, Matt's ask: "make the round dropdown box 3/4 width and let the race/qualifying dropdown box take up the remaining on that row" -- was a fixed 75%/25% width pair, which overflowed the row by exactly the 10px gap since percentage widths don't account for a flex gap; flex-grow ratios (3:1 of the space left after the gap is subtracted) give the same 3/4-to-1/4 split with no overflow). */ .rcl-allresults-select-row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .rcl-allresults-select { flex: 3 1 0; min-width: 220px; background: var(--rcl-bg); border: 1px solid var(--rcl-line-bright); border-radius: 5px; color: var(--rcl-ink); font-family: var(--rc-font-body); font-size: 14px; padding: 8px 10px; } .rcl-allresults-select:focus { border-color: var(--rc-red); } /* Qualifying/Race toggle -- takes up the remaining quarter of the row (2026-09-26 follow-up, Matt's ask, same pass as the round select's 3/4 above). */ .rcl-allresults-session-select { flex: 1 1 0; min-width: 140px; background: var(--rcl-bg); border: 1px solid var(--rcl-line-bright); border-radius: 5px; color: var(--rcl-ink); font-family: var(--rc-font-body); font-size: 14px; padding: 8px 10px; } .rcl-allresults-session-select:focus { border-color: var(--rc-red); } /* .rcl-qualifying-title-divider removed entirely (2026-10-01) along with the event title line it used to sit under on the Qualifying tab -- see js/league.js's comment on _rclBuildQualifyingBody_ (Matt's ask: "having the title of the event above the leaderboards is redundant since it lives in the drop down box"). .rcl-allresults-select-row's own margin-bottom now supplies the breathing room before standings start, on both tabs. */ /* Sector times normal weight, Best Lap bold (2026-09-26, Matt's ask: "in the qualifying standings, make the best lap bold and leave the sector times a normal weight") -- scoped to rows inside the Qualifying grid only (.rcl-race-grid-qualifying) so this doesn't touch .rcl-race-row-num /.rcl-race-row-bestlap's shared base rules, which the Race view's All Results table (a different grid, .rcl-race-grid-allresults) also uses for Laps/Total Time/Best Lap with its own, unrelated weight needs. */ .rcl-race-grid-qualifying .rcl-race-row-num { font-weight: 500; color: var(--rcl-ink-dim); } .rcl-race-grid-qualifying .rcl-race-row-bestlap { font-weight: 800; color: var(--rcl-ink); } /* Race Report -- lap-by-lap highlights (2026-09-24, Matt's ask). Lap number as a small fixed-width label on the left (matches the visual weight of a lap counter, not a ranking, so it deliberately does NOT reuse .rcl-standings-pos), narrative sentences to its right -- one

per driver highlight that landed on that lap, since more than one driver's story can share a lap. */ .rcl-report-section { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rcl-line); } .rcl-report-lap { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--rcl-line); } .rcl-report-lap:last-child { border-bottom: none; } .rcl-report-lap-num { flex: none; width: 62px; font-family: var(--rc-font-heading); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rcl-ink); /* white (2026-09-24, Matt's ask) -- was --rcl-ink-faint */ padding-top: 2px; } .rcl-report-lap-text { flex: 1 1 auto; min-width: 0; } .rcl-report-line { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--rcl-ink-dim); } .rcl-report-line:last-child { margin-bottom: 0; } /* Driver name (2026-09-24, Matt's ask -- an earlier version left a wall-hit line's name gray to read as deemphasized, but Matt's follow-up was explicit: "make all names white, even when in the middle of a contact report with another driver"). Always applied now, every line. Bumped to bold white (2026-09-24, follow-up ask: "make all names BOLD white") -- was var(--rcl-ink), a near-white #f2f2f0 at normal weight; now literal #fff + font-weight 700 so the name reads as the clear anchor of each line regardless of theme-token tweaks elsewhere. */ .rcl-report-name { color: #fff; font-weight: 700; } /* Class pill + timestamp prefix (2026-09-24, Matt's ask: "put class pill information... in front of the records" plus "timestamp information for the event"). .rc-badge-chip/.rc-badge-chip-abbrev and the per- class color classes (.rc-badge-lmgt3 etc.) come from style.css, loaded on this page too (see the file header comment). Timestamp is plain muted text, tabular-nums so a column of them lines up digit-for-digit. Reworked 2026-09-26, twice the same day: 1) The pill itself used to be stretched to a fixed 46px box with its TEXT right-justified inside that box (.rcl-report-pill, width:46px + justify-content:flex-end directly on the badge span) so every pill lined up on the right -- but that gave a short label like "HY" uneven padding (a big gap on the left inside its own box, only .rc-badge-chip-abbrev's normal 6px on the right). Fixed by moving the fixed width/right-alignment onto a separate wrapper (.rcl-report-pill-col, built by _rclClassPill_, js/league.js), leaving the actual .rc-badge-chip-abbrev pill inside it unmodified so it hugs its own text with even padding regardless of label length. 2) That wrapper used display:inline-block + text-align:right at 46px wide, which turned out too narrow for "LMGT3"/"LMGTE" (5 characters) -- an inline-block narrower than its own content doesn't reliably right-align the overflow the way flexbox does, and Matt's report confirmed it: the pills read centered, and LMGT3's pill overlapped the timestamp after it. Switched to inline-flex + justify-content: flex-end (well-defined overflow direction -- content wider than the box bleeds toward the START of the row, i.e. left, never touching what follows on the right) and widened to 58px with real headroom over "LMGT3"/"LMGTE" at this pill's 12px font. flex-shrink:0 on the badge itself (below) stops it from ever being squeezed narrower than its own text, so a label is never clipped even if this column's width guess is ever too tight for a future label. */ .rcl-report-pill-col { display: inline-flex; justify-content: flex-end; width: 58px; flex-shrink: 0; margin-right: 6px; vertical-align: 1px; } .rcl-report-pill-col > .rc-badge-chip { flex-shrink: 0; } /* Slightly smaller/shorter, same fashion as the All Results category-row pill fix above (2026-09-27, Matt's ask: "reduce the height/size of the class pills that show up next to the timestamps in the race report slightly") -- .rc-badge-chip-abbrev's normal line-height (1.6, inherited from .rc-badge-chip) and 12px font read a bit large next to this report line's own 13.5px text and 12px timestamp. Scoped to just the report's pill column (both the Race Report and Penalties Assessed sections use _rclClassPill_/.rcl-report-pill-col) so every other .rc-badge-chip-abbrev pill on the site is untouched. The 58px column width above still has plenty of headroom for "LMGT3"/"LMGTE" at this slightly smaller size. Top/bottom padding nudged up from 1px to 3px (2026-09-27, Matt's follow-up ask: "increase the pill heights... slightly so there is the same padding at the top and bottom as there is on the sides") -- same reasoning as the All Results category-row pill just above: matching the 5px side padding exactly overshot visually once line-height:1's own leading is accounted for, so 3px balances the two without re-growing the pill back toward its original size. */ .rcl-report-pill-col .rc-badge-chip-abbrev { line-height: 1; padding: 3px 5px; font-size: 11px; } /* Slightly less rounded than the site's usual 5px pill radius (2026-10-01, Matt's ask: "make the radius on the class pills in RACE REPORT slightly less so it looks more rectangular with soft edges") -- scoped to just this report pill column (both Race Report and Penalties Assessed, same as the line above) so every other .rc-badge-chip pill on the site keeps its normal 5px corners. */ .rcl-report-pill-col .rc-badge-chip { border-radius: 3px; } .rcl-report-timestamp { margin-right: 6px; color: var(--rcl-ink-faint); font-variant-numeric: tabular-nums; font-size: 12px; } /* Clause color-coding within a report line (2026-09-24, Matt's ask, extended same day to cover pit/position too). "penalty" clauses stay the line's default dim-gray -- everything else Matt called out gets its own color so the highlights pop against the rest of the line instead of it turning into a rainbow. */ .rcl-report-clause-wall { color: var(--rcl-ink-dim); } /* explicit gray, same token as the line default -- Matt: "keep contact with immovable gray" */ .rcl-report-clause-car { color: var(--rcl-report-collision); font-weight: 700; } /* car-to-car collision: yellow */ .rcl-report-clause-damage { color: var(--rcl-report-damage); font-weight: 700; } /* damage reported: bold orange */ .rcl-report-clause-pit { color: var(--rcl-report-damage); font-weight: 700; } /* pits: bold orange, same as damage reports (2026-09-24, Matt's ask) -- was bold red */ .rcl-report-clause-gain { color: var(--rcl-report-gain); font-weight: 700; } /* position gained: bold green */ .rcl-report-clause-loss { color: var(--rc-red); } /* position lost: red, NOT bold (2026-09-24, Matt's ask -- gains stay bold, losses don't) */ .rcl-report-clause-retirement { color: var(--rcl-ink); font-weight: 700; } /* retires from the race: bold white (2026-09-24, Matt's ask) */ .rcl-report-clause-fastest { color: var(--rcl-report-fastest); font-weight: 700; } /* fastest lap of the race: bold purple (2026-09-24, Matt's ask) */ .rcl-penalties-section { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rcl-line); } /* Penalties Assessed rows redesigned 2026-09-26 (item 20, Matt's ask) to reuse the Race Report's own row layout (.rcl-report-lap/-lap-num/-lap- text/-line/-name above) instead of the old plain .rcl-penalty-row/ -name/-detail treatment, which is removed -- name goes bold white via the shared .rcl-report-name, the infraction reads in the shared .rcl-report-line's plain dim style, and only the penalty effect itself (.rcl-penalty-effect) gets its own bold red treatment. */ .rcl-penalty-effect { color: var(--rc-red); font-weight: 700; } /* -------------------------------------------------------------------- */ /* Calendar -- full season schedule (added 2026-09-19). Replaces the old */ /* standalone "Next Race" mini-card -- the UP NEXT pill on the schedule */ /* itself does that job now, no separate widget needed. */ /* -------------------------------------------------------------------- */ /* Redesigned 2026-09-19 (Matt's call): the round label (R1/R2/SP/BYE) moves off the small centered text it used to be and into a full-height bar down the row's left edge -- same "own the left side of the container" move Account.html's driver-facing Calendar already makes with .rc-cal-round-number, just in solid brand red with white text here to match this page's one loud accent (the ticker label, the hero's diagonal bar) rather than the light page's neutral gray. Track/event name also swap emphasis here (Matt: "make the Track bolder... and the event name less bold") -- Track is now the primary bold line, event name the lighter secondary one underneath it. .rcl-cal-row is now a flex row (bar + body), not a grid -- the body itself stacks three lines: top (track + status), event name, then a meta row of chips (date/time, length tier, in-game times). */ .rcl-cal-row { display: flex; align-items: stretch; gap: 14px; padding: 0; border-bottom: 1px solid var(--rcl-line); overflow: hidden; } /* Last row KEEPS its bottom border now (2026-09-19, Matt's call: "remove the line above VIEW SEASON DETAILS... the line at the bottom edge of the last race will suffice") -- that border now doubles as the separator above the details link below, instead of the link growing its own extra border-top/line underneath a removed one. */ /* Next-race highlight -- softened from a red wash to a barely-there light gray (2026-09-19, Matt's call: "the highlighting slightly lighter gray instead of a red highlight") -- UP NEXT still reads red via .rcl-cal-status-up, so the row is still identifiable at a glance, just without the whole row glowing red. */ .rcl-cal-row-next { background: rgba(255, 255, 255, 0.05); } /* Round-number bar -- silver metallic instead of solid brand red (2026-09-19, Matt's call: "make the Round backgrounds silver") -- same diagonal metallic-gradient treatment .rcl-cal-round-special already uses for gold, just in a neutral silver tone, so a normal points round reads as a deliberately different metal from a special event's gold rather than the page's one loud red accent. Upgraded to the full brushed-nickel treatment (2026-09-30, Matt's ask: "make the calendar round container background the same metalic look as the table headers with the silver bottom border") -- same three-layer background as .rcl-standings-class-header above (fine repeating diagonal gradient for the brushed-metal texture, plus the light-to-dark satin sweep), the same inset highlight/shadow + drop-shadow pair to read as raised metal, and the same steel-silver bottom rule (#c9cbce, matching that header's own 2026-09-29 recolor) in place of the old flat two-stop gradient. Only .rcl-cal-round's own layout properties (size/flex/font/corner radius) are unchanged, so this still sizes and positions exactly as before -- and since neither the mobile override below nor the "finished round" opacity dim (.rcl-cal-row- finished .rcl-cal-round further down) touch `background`, both mobile/ tablet and the dimmed-when-finished state pick this up automatically. */ .rcl-cal-round { flex: none; width: 56px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.09) 0px, rgba(255, 255, 255, 0.09) 1px, rgba(0, 0, 0, 0.05) 2px, rgba(0, 0, 0, 0.05) 3px), linear-gradient(135deg, #d9dade 0%, #b7b9be 45%, #eceef0 55%, #9a9ca1 100%); font-family: var(--rc-font-heading); font-size: 22px; font-weight: 900; line-height: 1; color: #24262b; text-align: center; user-select: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.4); border-bottom: 2px solid #c9cbce; /* Slight curve on just the top-left corner (2026-09-19, Matt's ask) -- the row's other three corners stay square, matching the bar's flush fit against the row's left/top/bottom edges; only the one corner that isn't already pinned against .rcl-panel's own rounded shell gets softened. */ border-top-left-radius: 8px; } /* Special-event rounds (SP) get a gold accent instead of the standard brand red (2026-09-19, Matt's ask, refined same day from an earlier platinum treatment to "gold accents including the event and track names") -- a deliberately different metal-toned accent, now carried through onto the row's own event/track text too, so a special round reads as distinct from a normal points round at a glance, not just on its round-number bar. Dark text on the bar since gold is light. */ .rcl-cal-round-special { background: linear-gradient(135deg, #f0d879 0%, #c9a227 100%); color: #241b04; } /* Short ("R1")/long ("ROUND 1") round-label pair (2026-09-27) -- long form stays hidden except at the mobile breakpoint (see that media query below), where the round bar itself moves to the top of the row and has room to spell the word out. */ .rcl-cal-round-long { display: none; } /* One combined " at : " line (2026-09-24, Matt's ask), three independently-styled pieces inside .rcl-cal-event -- .rcl-cal-event-name bold and white/ink, .rcl-cal-event-track normal weight but still white/ink, .rcl-cal-event-layout normal weight but gray/dim. On a special event the whole line reads one uniform gold (#e0b64c) instead -- the plain " at "/": " connector text inherits it from .rcl-cal-event's own color below, and each span gets its own explicit override since an explicit color always wins over an inherited one. Was three separate two-tone gold rules (bright event, dimmer track, dimmer-still layout) before this pass -- Matt's ask now is one flat gold across all three, matching the round bar's own single gold gradient rather than a graduated scheme. Round-number bar (.rcl-cal-round-special above) already reads gold. */ .rcl-cal-row-special .rcl-cal-event, .rcl-cal-row-special .rcl-cal-event-name, .rcl-cal-row-special .rcl-cal-event-track, .rcl-cal-row-special .rcl-cal-event-layout { color: #e0b64c; } .rcl-cal-row-body { flex: 1 1 auto; min-width: 0; padding: 10px 14px 10px 0; } /* Day/date/time the race starts -- plain text above the event title (2026-09-24, Matt's ask), not a pill. Sits above .rcl-cal-row-top. */ .rcl-cal-datetime { font-size: 12px; font-weight: 600; color: var(--rcl-ink-dim); margin-bottom: 3px; } .rcl-cal-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* Bumped from 16.5px (2026-09-24, Matt's ask: "increase the size of the event/track/layout name by a little to make it more pronounced"). */ .rcl-cal-event { font-size: 18px; } .rcl-cal-event-name { font-weight: 800; color: var(--rcl-ink); } .rcl-cal-event-track { font-weight: 500; color: var(--rcl-ink); } .rcl-cal-event-layout { font-weight: 500; color: var(--rcl-ink-dim); } /* .rcl-cal-track still backs the Bye row's plain "Bye Week" line below (_rclRenderCalendar, js/league.js) -- unrelated to the race-row event line above, which no longer uses this class at all (2026-09-24, see the .rcl-cal-event-* rules above). */ .rcl-cal-track { font-size: 13.5px; font-weight: 500; color: var(--rcl-ink-dim); margin-top: 1px; } /* Vertically centers every meta chip against its siblings (2026-09-19, Matt's ask: "vertically align the pill text with the rest of the race details next to it") -- without this, the padded pill chips (taller, own box) and the site's default stretch alignment left them looking offset from each other on the same row. */ .rcl-cal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; } .rcl-cal-meta-item { font-size: 12.5px; color: var(--rcl-ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .rcl-cal-meta-item-label { color: var(--rcl-ink-faint); font-weight: 600; } /* Shared light chip -- date/time+length, in-game time, and weather all use this one shape now (2026-09-19, Matt's asks across two turns: "put the time next to the length tier in a light gray pill with a slightly darker border", then "make the pills more rectangular" and "use icons when possible for maximum aesthetics") -- a literal light-gray pill (not this dark page's usual translucent-white chip treatment) so each fact reads as a deliberate little tag against the dark row, with dark text/icons for contrast on the light fill. Small 5px radius rather than the fully round 999px this used to be -- "more rectangular" per Matt's ask, while still being a pill and not a hard square. Reused as-is for the Points Tables tier duration chip below (see .rcl-points-tier-head). */ .rcl-chip-light { display: inline-flex; align-items: center; gap: 6px; background: #d9dadd; border: 1px solid #b6b8bd; border-radius: 5px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; color: #1c1d20; font-variant-numeric: tabular-nums; white-space: nowrap; } .rcl-chip-icon { display: flex; flex: none; line-height: 1; } .rcl-chip-icon svg { display: block; width: 14px; height: 14px; } /* Outline variant -- gray outline, no fill (2026-09-19, Matt's call: "for in-game race times and weather, make them gray outline pills instead of solid pills") -- same shape/sizing as .rcl-chip-light, just transparent with a border instead of the solid light-gray fill, so In-Game/Weather read as a lighter-weight secondary fact next to the solid date/length pill. Text/icon pick up the page's own dim ink color since there's no light fill to contrast against anymore. */ .rcl-chip-outline { background: transparent; border-color: var(--rcl-line-bright); color: var(--rcl-ink-dim); } .rcl-cal-status { font-family: var(--rc-font-heading); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: var(--rcl-ink-faint); } .rcl-cal-status-up { color: var(--rc-red); } /* Plain gray COMPLETE (2026-09-26, Matt's ask: "in the Season calendar... just say COMPLETED in gray once a race is over. No need to duplicate the type of results posted here since it's on every results table") -- the separate gold PRELIMINARY/gray OFFICIAL "...RESULTS POSTED" variants this used to have (2026-09-19/2026-09-21) are removed; that distinction now lives only on the Recent Results/Current Standings/All Results notices (_rclBuildResultsStatusNotice_, js/league.js). */ .rcl-cal-status-complete { color: var(--rcl-ink-dim); } /* "VIEW RESULTS" (2026-10-02, Matt's ask) -- a completed round with results now gets a real link here instead of plain "COMPLETED" text, opening the Race Details popup on that exact round (_rclBuildCalStatusNode_, js/league.js). Button reset so it reads as plain text like every other status, just clickable -- red like the site's other "opens a popup" text links (.rcl-cal-details-link above) rather than gray, so it actually reads as actionable at this small size. */ .rcl-cal-status-link { background: none; border: none; padding: 0; margin: 0; font: inherit; cursor: pointer; color: var(--rc-red); } .rcl-cal-status-link:hover { text-decoration: underline; } /* Mobile-only copy of the status node, living inside the round bar itself (.rcl-cal-round) instead of up in the event line -- hidden on desktop, where .rcl-cal-status (the original copy, appended to .rcl-cal-row-top) already covers this. Shown instead of that copy under the 640px breakpoint below, where .rcl-cal-status is hidden entirely. */ .rcl-cal-round-status { display: none; } /* Faded row once a round's start time has passed (2026-09-21, Matt's ask: "have the race faded out with a COMPLETED notification") -- dims the round bar/event/track/meta chips, but deliberately NOT .rcl-cal-status (the notification itself, appended alongside .rcl-cal- event inside .rcl-cal-row-top), so the COMPLETED/results phrase stays fully legible against the faded-out row around it. */ .rcl-cal-row-finished .rcl-cal-round, .rcl-cal-row-finished .rcl-cal-datetime, .rcl-cal-row-finished .rcl-cal-event, .rcl-cal-row-finished .rcl-cal-track, .rcl-cal-row-finished .rcl-cal-meta { opacity: 0.5; } /* Bye week -- dashed "nothing scheduled" slot (2026-09-27, Matt's ask: match the dashed/centered treatment Account's own .rc-cal-bye card uses, sized and colored to fit league.html's dark theme and type scale instead of copying Account's light-page values literally). No round-number bar -- a bye isn't a round, so it gets its own flat centered box rather than the round + body split every real race row uses. */ .rcl-cal-row-bye { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 22px 14px; border: 1px dashed var(--rcl-line-bright); border-radius: 10px; background: rgba(255, 255, 255, 0.02); } .rcl-cal-bye-label { font-family: var(--rc-font-heading); font-size: 16px; font-weight: 800; color: var(--rcl-ink); text-align: center; } .rcl-cal-bye-date { font-size: 12px; font-weight: 600; color: var(--rcl-ink-dim); text-align: center; } /* "View Season Details" link at the bottom of the Calendar panel (2026-09-19, Matt's call: season details move out of the hero band into a popup opened from here) -- same shape as the Leaderboard's own "View Points Tables" link below its content. */ /* No own border-top any more (2026-09-19) -- the last race row's own bottom border (now kept, see .rcl-cal-row above) is the one line between the schedule and this link; margin-top just gives the link breathing room below that existing line instead of drawing a second one of its own. */ .rcl-cal-details-row { margin-top: 16px; text-align: center; } /* Recent Results' own "View All Results" link gets a line above it now (2026-09-26, Matt's ask: "add a line above VIEW ALL RESULTS in a similar way that there is a line above the links at the bottom of CURRENT STANDINGS") -- an extra modifier alongside .rcl-cal-details-row above (not a change to that shared class itself), since the Calendar's own "View Season Details" link deliberately has NO line of its own (see the comment right above .rcl-cal-details-row -- the schedule's last row already ends in a border). Same border-top/spacing .rcl-standings-points-row already uses below Current Standings, so the two bottom-of-panel treatments read identically. */ .rcl-results-bottom-row { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rcl-line); } .rcl-cal-details-link { background: none; border: none; padding: 0; font-family: var(--rc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rc-red); cursor: pointer; } .rcl-cal-details-link:hover { text-decoration: underline; } /* Points -- race-length-tier tables + bonus points (added 2026-09-19, moved into their own "Points Tables" popup off the Leaderboard panel same day). Removed 2026-10-01 (Matt's ask) -- Championship Points now has its own pill section inside the Season Details popup, with its tiers and Bonus Points both plain flat rows (.rcl-seasonfmt-row, further up this file). */ /* Drivers section removed 2026-09-19 (Matt's call: drivers are already visible via the Leaderboard) -- .rcl-drivers-class/.rcl-drivers-grid/ .rcl-driver-card/.rcl-driver-name/.rcl-driver-meta rules removed. */ /* -------------------------------------------------------------------- */ /* News feed -- redesigned 2026-09-19. Only the most recent story shows */ /* in full (clamped + "Continue reading..."); every older one is just a */ /* clickable title. Both open the same read-story popup below. */ /* -------------------------------------------------------------------- */ .rcl-news-item + .rcl-news-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rcl-line); } .rcl-news-hero { display: block; width: 100%; max-height: 220px; object-fit: cover; margin-bottom: 12px; border: 1px solid var(--rcl-line); } .rcl-news-title { font-family: var(--rc-font-heading); font-size: 16px; font-weight: 800; letter-spacing: 0.01em; color: var(--rcl-ink); line-height: 1.25; } .rcl-news-meta { margin-top: 4px; font-size: 12px; color: var(--rcl-ink-faint); text-transform: uppercase; letter-spacing: 0.04em; } .rcl-news-body { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--rcl-ink-dim); } .rcl-news-body p { margin: 0 0 0.8em; } .rcl-news-body p:last-child { margin-bottom: 0; } .rcl-news-body strong { color: var(--rcl-ink); } /* Email link (2026-09-19, from the news editor's new "@" toolbar button) -- brand red, underlined, so it reads as a deliberate link against the page's dim body-text color rather than blending into the surrounding sentence. */ .rcl-news-link { color: var(--rc-red); text-decoration: underline; } .rcl-news-link:hover { color: var(--rc-red-dark); } .rcl-news-quote { margin: 0 0 0.8em; padding-left: 14px; border-left: 2px solid var(--rc-red); color: var(--rcl-ink-dim); font-style: italic; } .rcl-news-editnote { margin-top: 10px; font-size: 12.5px; font-style: italic; color: var(--rcl-ink-faint); } /* Clamped preview (raised from 6 to 14 lines, 2026-09-23, Matt's ask: "make more available on preview on the main league page before CONTINUE READING shows up") -- the "Continue reading..." link right below still sits directly under whatever the clamp cuts off. */ .rcl-news-current-body { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--rcl-ink-dim); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 14; overflow: hidden; } .rcl-news-current-body strong { color: var(--rcl-ink); } .rcl-news-continue { display: inline-block; margin-top: 8px; font-family: var(--rc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rc-red); text-decoration: none; cursor: pointer; } .rcl-news-continue:hover { text-decoration: underline; } .rcl-news-previous { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rcl-line); display: flex; flex-direction: column; gap: 8px; } .rcl-news-previous-head { font-family: var(--rc-font-heading); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rcl-ink-faint); margin-bottom: 2px; } .rcl-news-previous-title { text-align: left; background: none; border: none; padding: 0; font-family: var(--rc-font-body); font-size: 14px; font-weight: 600; color: var(--rcl-ink-dim); cursor: pointer; } .rcl-news-previous-title:hover { color: var(--rcl-ink); text-decoration: underline; } /* -------------------------------------------------------------------- */ /* Read-story popup -- centered card over a dimmed backdrop, opened from */ /* "Continue reading..." or any previous-story title. */ /* -------------------------------------------------------------------- */ .rcl-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); display: flex; /* flex-start, not center (2026-09-19, Matt's call) -- with align-items: center, growing the dialog's content (e.g. pressing LOAD MORE NEWS) pushes its TOP edge upward past the viewport as the box re-centers around its new, taller height, and that edge is then unreachable since the overlay only gains scroll room at the bottom. Anchoring to the top instead means the dialog's top always sits a fixed 40px below the viewport top, however tall it grows -- the dialog's own max-height + overflow-y below is what keeps it from ever running past the bottom of the page. */ align-items: flex-start; justify-content: center; /* Top padding cleared to sit below the fixed navbar (2026-09-23 fix, Matt's catch: the Drivers popup -- the tallest dialog on this page -- was opening with its top edge under the overlay's old flat 40px padding, which is LESS than .rc-fixed-header's own 70px height (style.css). The overlay itself is z-index:500, well under the navbar's z-index:1000, so any dialog reaching that high renders partly behind/under the navbar and reads as "cut off." 86px = 70px navbar + a 16px gap, so even a dialog tall enough to hit its own max-height ceiling (below) never starts above the navbar. Bottom stays 24px -- kept in sync with .rcl-modal-dialog's max-height calc right below. */ padding: 86px 20px 24px; overflow-y: auto; z-index: 500; } /* Dims the navbar along with the rest of the page (2026-09-21, Matt's ask: "only when EDIT PROFILE and FEEDBACK popups are visible on the league page, dim the navbar with the main league page... keep the other popups how they are") -- .rc-fixed-header (css/style.css) is z-index:1000, above this overlay's own default 500, so every other league.html popup (News, Points Table, Drivers, Season Details, Legal Disclaimer) already leaves the navbar sitting bright on top, undimmed. Edit Profile (js/edit-profile.js) and Feedback (_rcOpenFeedbackModal, js/header.js) add this modifier instead, so their overlay -- and the popup card itself, which stacks inside it -- render above the navbar and dim it too. */ .rcl-modal-overlay-over-nav { z-index: 1001; } /* Dialog now matches a .rcl-panel's own shell exactly (2026-09-19, Matt's ask: "the league news [story] popup should look like the same style as the league news container") -- same border color/weight and radius as every other card on the page, not the slightly-brighter one-off border this used to have. */ .rcl-modal-dialog { position: relative; background: var(--rcl-bg-raised); border: 1px solid var(--rcl-line); border-radius: 8px; max-width: 820px; width: 100%; /* Capped to fit inside the overlay's own top/bottom padding (86px + 24px = 110px, kept in sync with .rcl-modal-overlay above), so the dialog always sits fully inside the page -- clear of the fixed navbar at the top -- and scrolls its own content internally once it hits this ceiling, instead of pushing the overlay taller than the viewport. */ max-height: calc(100vh - 110px); overflow-y: auto; padding: 0 28px 24px; /* Vertical centering (2026-09-19, Matt's call: "the popup also populates very high on the website... make it vertically centered" -- applies to every popup on this page, they all share this class). Auto top/bottom margins on a flex item (the overlay above is display:flex) compute equal space above/below when the dialog is shorter than the viewport -- true centering -- and collapse to 0 once it's taller than the viewport, so it still starts flush at the top and scrolls normally in that case. That's the same "Load More News" growth case the overlay's own align-items:flex-start comment above is about; auto-margin centering here gets both behaviors at once without the flexbox align-items:center-plus-overflow clipping bug some browsers have when a centered flex item overflows its scrollable container (that clipping bug is exactly why the overlay itself stays flex-start rather than switching to align-items: center). */ margin: auto 0; } /* Wider dialog, Drivers popup only (2026-09-21, Matt's ask: "increase the width of the drivers list popup") -- a scoped modifier added alongside .rcl-modal-dialog (see _rclOpenDriversModal, league.js) rather than raising the shared class's own max-width, since News/ Points Table/Season Details all use that same base class and don't need the extra room the driver roster's wider identity/car/team columns benefit from. Also reused, unmodified, by the "All Results" popup (2026-09-23) -- a full per-class results table plus the penalties list is the same "widest content on the page" case. */ .rcl-modal-dialog-wide { max-width: 1080px; } /* Narrower dialog (2026-09-21, added for the Feedback and Edit Profile/ Change Avatar popups) -- matches Account.html's own plain (non -wide) .rc-modal exactly (460px), so those popups are the same width whether they're opened from Account.html (light) or league.html (dark). See _rcOpenFeedbackModal (js/header.js) and _rcEPShowModal (js/edit-profile.js). */ .rcl-modal-dialog-narrow { max-width: 460px; } /* Same raised-2 background + red underline as .rcl-panel-head, so the popup's own header reads as the exact same header treatment as every panel on the page, not a slightly different one-off. */ .rcl-modal-head { position: sticky; top: 0; /* z-index (2026-09-27, Matt's report: "in all of the popups, the headers and tops of the table with labels appear above the popup container header and not underneath" -- e.g. the ALL RESULTS standings' brushed- nickel class header/column labels painting over this bar once scrolled up under it) -- exact same bug and exact same fix as .rc-modal-head's own z-index in css/style.css: a sticky element with no z-index has no stacking priority over later-in-DOM body content once it's pinned mid-scroll, so table headers/labels scrolling up underneath this bar could paint on top of it instead of staying behind it. This one shared class backs every popup on league.html (News, Points Table, Drivers, Season Details, All Results, Qualifying, Feedback, Edit Profile), so fixing it here fixes every one of them at once. */ z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -28px 20px; padding: 20px 28px 16px; background: var(--rcl-bg-raised-2); border-bottom: 2px solid var(--rc-red); } /* Same angled red tab + type treatment as .rcl-panel-title (2026-09-19) -- display:flex/gap added so the ::before tab renders inline before the text, exactly like a panel header's own title. */ .rcl-modal-title { /* Matches .rcl-panel-title's own bump (2026-09-19, task 6). */ font-family: var(--rc-font-heading); font-size: 20px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rcl-ink); display: flex; align-items: center; gap: 10px; } /* Same single-forward-slash treatment as .rcl-panel-title::before above (2026-09-19, Matt's call -- "in each container", popups included), including the same slightly-larger size, glyph-centering nudge (follow-ups), and 1000-weight/single-slash final call. */ .rcl-modal-title::before { content: "/"; color: var(--rc-red); font-weight: 1000; font-size: 24px; line-height: 1; position: relative; top: -2px; } .rcl-modal-close { flex: none; background: none; border: none; color: var(--rcl-ink-faint); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; } .rcl-modal-close:hover { color: var(--rcl-ink); } .rcl-modal-body .rcl-news-item + .rcl-news-item { margin-top: 24px; padding-top: 24px; } .rcl-modal-loadmore-wrap { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rcl-line); text-align: center; } .rcl-modal-loadmore-btn { font-family: var(--rc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rc-white); background: var(--rc-red); border: none; padding: 10px 22px; cursor: pointer; } .rcl-modal-loadmore-btn:hover { background: var(--rc-red-dark); } /* Dark-theme override for the site's global (unscoped) label/input/select/ textarea rules in css/style.css (2026-09-21, added for the new Feedback popup, _rcOpenFeedbackModal in js/header.js -- that global rule renders with a white background/light text, which would otherwise leak straight through into any form built inside a .rcl-modal-dialog on this page). Scoped broadly to the dialog, not just the Feedback form, so any future form dropped into a league.html popup gets the same dark styling for free. */ .rcl-modal-dialog label { color: var(--rcl-ink-dim); } .rcl-modal-dialog input, .rcl-modal-dialog select, .rcl-modal-dialog textarea { background: var(--rcl-bg); border-color: var(--rcl-line-bright); color: var(--rcl-ink); } .rcl-modal-dialog input:focus, .rcl-modal-dialog select:focus, .rcl-modal-dialog textarea:focus { border-color: var(--rc-red); } /* The avatar-URL "https://" prefix label (style.css .rc-avatar-url-prefix) is a , not an , so the generic input override above doesn't touch it -- give it its own dark-theme colors (2026-09-27). */ .rcl-modal-dialog .rc-avatar-url-prefix { background: var(--rcl-bg); border-color: var(--rcl-line-bright); color: var(--rcl-ink-dim); } /* Same dark-theme override, extended for the Edit Profile popup (js/edit-profile.js, added 2026-09-21 alongside this popup's own in-place-on-league.html support): .rc-panel (the Change Password box) is a plain white card everywhere else on the site -- it needs a scoped dark version here or it'd render light-on-dark inside this shell. (The .rc-check-row dark-theme override that used to sit here, for the email-notifications checkbox, was removed 2026-09-24 alongside that checkbox -- Matt's call: eliminate the in-app notification system entirely, moving to an external Discord bot.) */ .rcl-modal-dialog .rc-panel { background: var(--rcl-bg-raised-2); border-color: var(--rcl-line-bright); } .rcl-modal-dialog .rc-panel h3 { color: var(--rcl-ink); } /* Same dark-theme override for the "Loading your profile..." state (2026-09-21, Matt's ask: first "should have a dark background, not white, to blend in with the popup", then immediately "make the background color of the loading on the edit profile within the league page TRANSPARENT" -- so the card now shows the modal's own .rcl-modal-dialog background through it instead of a second, separate panel color) -- .rc-inline-spinner-wrap (style.css) is a solid white card by default, built for popups on the light shell (the Season Wizard, Data Management), so it needs a scoped dark version here too, same pattern as .rc-panel above. Border/shadow already dropped inside any .rc-modal-body via style.css's own .rc-modal-body .rc-inline-spinner-wrap rule -- that selector doesn't match this dark shell's .rcl-modal-body class, so both are repeated here. .rc-startlights and .rc-loading-text get the same treatment .rcl-page-loader already gives them above, so the loading state matches whether it's the full page loader or this in-modal one. */ .rcl-modal-dialog .rc-inline-spinner-wrap { background: transparent; border: none; box-shadow: none; } .rcl-modal-dialog .rc-startlights { background: var(--rcl-line-bright); border-color: var(--rcl-line); } .rcl-modal-dialog .rc-loading-text { color: var(--rcl-ink-dim); } /* Full-width red submit button, dark theme -- same solid-red/uppercase treatment as .rcl-modal-loadmore-btn above, just full width so it reads as a form's primary action the same way .rc-btn-primary does on the light shell. */ .rcl-feedback-submit-btn { display: block; width: 100%; font-family: var(--rc-font-heading); font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rc-white); background: var(--rc-red); border: none; border-radius: 4px; padding: 12px 22px; cursor: pointer; } .rcl-feedback-submit-btn:hover { background: var(--rc-red-dark); } .rcl-feedback-submit-btn:disabled { opacity: 0.6; cursor: default; } /* -------------------------------------------------------------------- */ /* Empty state -- same large circle-slash icon the rest of the site */ /* uses for "no data," just recolored for the dark ground. */ /* -------------------------------------------------------------------- */ .rcl-empty-state { text-align: center; padding: 40px 12px; } .rcl-empty-state-icon { color: var(--rcl-line-bright); margin: 0 auto 18px; } .rcl-empty-state-icon svg { width: 72px; height: 72px; } .rcl-empty-state-title { font-family: var(--rc-font-heading); font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--rcl-ink-dim); } .rcl-empty-state-subtitle { margin-top: 6px; font-size: 13.5px; color: var(--rcl-ink-faint); } /* -------------------------------------------------------------------- */ /* MOBILE (<=640px) -- matches the site's own phone/tablet split */ /* (css/style.css, 2026-09-27: "max-width: 640px" phone / "641px-1024px" */ /* tablet), rather than this page's earlier one-off 560px cutoff. First */ /* real mobile pass for league.html (2026-09-27, Matt's ask -- ticker/ */ /* hero band, then the All Results popup, then Current Standings/ */ /* Calendar below). Recent Results, League News, the Points Table/ */ /* Drivers/Season Details popups are all explicitly UNCHANGED per */ /* Matt's own call-out -- nothing in this block touches them. */ /* -------------------------------------------------------------------- */ @media (max-width: 640px) { .rcl-main { padding: 26px 16px 60px; } .rcl-panel-body { padding: 14px; } /* Horizontal scrollbar fix, All Results popup (2026-09-28, Matt's report: "something on the popup is causing a horizontal scroll bar to appear. It's just slightly larger than the popup... I want it to just have a vertical scroll bar"). Two real causes, both from content that doesn't shrink below a fixed minimum width in the dialog's normal 28px-padding layout: the round/session select row's own min-widths (220px/140px, .rcl-allresults-select/-session-select above) can run a few px past what's left of a phone-width dialog even after they wrap onto separate lines, and the dialog's own 28px side padding just makes that margin tighter than it needs to be on a small screen. Trimming the dialog's padding and letting both selects go full-width (instead of a fixed min-width) fixes the real cause; overflow-x:hidden on the dialog is also added as a hard guarantee -- ANY future element that ends up a few px too wide clips instead of ever reopening a horizontal scrollbar, matching Matt's ask literally ("just have a vertical scroll bar"). .rcl-modal-head's own negative bleed margin is brought down to match the dialog's new 16px padding (was -28px/28px, canceling out the desktop padding) so its red-underlined bar still bleeds exactly to the dialog's edges instead of overshooting past them. */ .rcl-modal-dialog { padding: 0 16px 20px; overflow-x: hidden; } .rcl-modal-head { margin: 0 -16px 20px; padding: 20px 16px 16px; } .rcl-allresults-select, .rcl-allresults-session-select { min-width: 0; width: 100%; } /* Ticker label (2026-09-27, Matt's ask: "Remove HIGHLIGHTS text and reduce the red slanted container so that the bottom of the slant is approximately 10 pixels off the left edge of the screen") -- the label's shape comes from its clip-path, unchanged: a rectangle with the trailing (right) edge cut diagonally in by 14px (.rcl-ticker-label above). Fixing the box's own width at 24px means that cut lands its bottom point at 24 - 14 = 10px from the left edge exactly. font-size:0 collapses "Highlights" to zero visible space without touching the markup (league.html) or JS -- the label stays a real element, just an empty-looking slanted tab. */ .rcl-ticker-label { width: 24px; padding: 0; font-size: 0; } /* Hero's big diagonal red accent (2026-09-27, Matt's ask: "moved to the right so that the top edge of the slant sits inside the right edge 10 pixels") -- narrowed and pushed further right/off-screen than the desktop -6%/220px version so only a slim sliver shows on a phone-width hero instead of the bar dominating the whole banner. This is a best-effort estimate (the rotated geometry makes the exact pixel math hard to pin down without seeing it rendered) -- flag for Matt to nudge `right`/`width` further once he's looked at it on a phone. Nudged closer to the true right edge (2026-09-29, Matt's ask: "move the red semi opaque angled border on the right of the header banner a little closer to the right side of the page") -- right: -56px left a small dark triangular gap between the bar's lower edge and the viewport's actual right edge; -42px shifts the whole rotated bar left just enough to close most of that gap without it swallowing the eyebrow/title text. Still too far left (2026-09-29, Matt's follow-up: "move the red slanted border over the banner to the right 20 pixels. It's still too far left from the right edge of the webpage") -- right is an inward offset, so a MORE negative value pushes the bar further right/off- canvas; -42px -> -62px moves it exactly 20px right on screen (verified: right:-62 renders 20px right of right:-42 at any width, since `right` doesn't scale with viewport). */ .rcl-hero::after { width: 120px; right: -62px; } /* RACE CLUB eyebrow + SEASON N / SEASON NAME pulled tighter around LEAGUE HUB, and both shrunk a touch further (2026-09-29, Matt's ask: "reduce the size of RACE CLUB in the header and move it slightly closer to LEAGUE HUB... slightly reduce the size of SEASON N / SEASON NAME below LEAGUE HUB and move it slightly closer to LEAGUE HUB... keep these three titles a little closer together in the banner"). LEAGUE HUB's own .rcl-hero-title is deliberately untouched -- only the two lines around it move. Base .rcl-hero-eyebrow is 13px/10px margin-bottom; base .rcl-hero-season was already stepped down to 15px here on 2026-09-27. */ .rcl-hero-eyebrow { font-size: 11px; margin-bottom: 4px; } .rcl-hero-season { font-size: 13px; margin-top: 4px; } /* Vertically center the whole LEAGUE HUB text block within the banner (2026-09-27, Matt's ask) -- was relying on padding-top/padding-bottom happening to roughly balance around the text's own height, which drifts off-center as soon as that height changes (e.g. a long season name wrapping to two lines). A flex box with a real min-height centers the block regardless of exactly how tall its content is. Padding becomes symmetric (was 34px top / 42px bottom above) now that centering is flex-driven, not padding-driven. */ /* Height reduced (2026-09-28, Matt's ask: "reduce the height of the image banner on the league header so that the aspect is more like the aspect on the original pc browser which is 2936 x 494ish aspect... THIS IS MOBILE edit only") -- the desktop banner image is a wide panoramic strip (~5.94:1 width:height); at a 240px min-height on a ~375px-wide phone the mobile hero was only ~1.56:1, so background-cover was cropping deep into a heavily zoomed vertical slice of the image. Dropping to 120px/16px padding roughly doubles the ratio to ~3.1:1 -- meaningfully more panoramic and much closer to the source image -- while still comfortably fitting the eyebrow + title + season line (~88px of real content); min-height is a floor, not a fixed height, so nothing clips if a season name wraps to two lines. */ /* Nudged back up slightly (2026-09-29, Matt's ask: "increase the height of the banner slightly") -- 120px/16px above read a little too tight after the previous pass; 150px/20px gives the hero a bit more room while staying far more panoramic than the original 240px/28px. */ .rcl-hero { display: flex; align-items: center; min-height: 150px; padding: 20px 20px; } /* Left-aligned, not centered (2026-09-28 follow-up, Matt's ask: "move it to the left like it is on every other platform with just a small padding on the left") -- .rcl-hero-inner's own margin:0 auto (base rule) is what was centering it horizontally: a flex item's auto margins still soak up free main-axis space in a flex row, the same trick that centers a block element outside of flex. Zeroing it here lets the item fall back to flex-start (this row's initial main-axis alignment), so the text block hugs .rcl-hero's own left padding (20px, just above) the same way index.html/Account.html's headers do, while align-items:center above keeps it vertically centered exactly as before -- that's the OTHER axis, untouched by this change. */ .rcl-hero-inner { margin: 0; } /* ALL RESULTS popup standings tables (2026-09-27, Matt's ask: "need to be reduced to only POS, DRIVER and PTS columns") -- .rcl-race-grid- allresults is used only by this popup's Race-view standings (both the column-label row and every data row share it), and its 9 children are always in this exact order: Pos, Driver, Laps, Total Time, Pen, Gap, Avg, Best Lap, Pts. Hiding children 3-8 by position and collapsing the grid to 3 tracks leaves exactly Pos/Driver/Pts. */ .rcl-race-grid-allresults { grid-template-columns: 32px 1fr 44px; } .rcl-race-grid-allresults > div:nth-child(3), .rcl-race-grid-allresults > div:nth-child(4), .rcl-race-grid-allresults > div:nth-child(5), .rcl-race-grid-allresults > div:nth-child(6), .rcl-race-grid-allresults > div:nth-child(7), .rcl-race-grid-allresults > div:nth-child(8) { display: none; } /* Team names hidden in the driver column (2026-09-27, Matt's ask: "so only manufacturer logo/driver name/driver number visible") -- .rcl-standings-team is _rclBuildDriverIdentity_'s shared team-name span, reused by Recent Results/Drivers/Points Tables too, so this is deliberately scoped to just the containers Matt actually asked for: the All Results popup (.rcl-modal-dialog-allresults, its own scoping class added in js/league.js), the Current Standings panel (#rcl-standings-body), and -- added 2026-09-29, Matt's ask: "Remove team names from listed drivers in recent results on league.html" -- the Recent Results panel (#rcl-results-body). The Drivers roster and Points Tables still keep showing team names, unchanged, per Matt's earlier explicit "looks good, don't change" on those. */ .rcl-modal-dialog-allresults .rcl-standings-team, #rcl-standings-body .rcl-standings-team, #rcl-results-body .rcl-standings-team { display: none; } /* "**FOR FULL RESULTS, VIEW ON PC BROWSER" (2026-09-27) -- shown back in only here; see .rcl-standings-status-mobile-note's base display:none above and the comment on where it's built (_rclBuildAllResultsBody_, js/league.js). margin-top trimmed 18px -> 4px (2026-09-28, Matt's ask: "move it closer to the notification above it") -- .rcl-standings- status-note's base 18px top margin is sized for sitting below a STANDINGS TABLE, which is a lot more visual weight than the short *PRELIMINARY/*OFFICIAL notice directly above this one, so the two notes were reading as two separate paragraphs instead of a pair. */ .rcl-standings-status-mobile-note { display: block; margin-top: 4px; } /* Race Report / Penalties Assessed (2026-09-27, Matt's ask: "move the events from the right of the lap catagory to underneath each lap catagory. Add a slight indention to the event lines. Do the same format with the penalties assessed") -- .rcl-report-lap is the one shared row layout both sections build from (Penalties Assessed reuses it directly, see _rclBuildAllResultsBody_'s own comment on that), so one change covers both. Stacks the lap/pre-post label above its text instead of beside it, with a small left indent on the text to read as nested under the label rather than a second top-level line. */ .rcl-report-lap { flex-direction: column; gap: 4px; } .rcl-report-lap-num { width: auto; padding-top: 0; } .rcl-report-lap-text { padding-left: 14px; } /* Current Standings driver list -- team name hidden above (shared rule with the All Results popup); no other change needed here, the class column layout (.rcl-standings-columns) already stacks to one column under 900px (see that rule earlier in this file). Calendar (2026-09-27, Matt's ask: "remove the UP NEXT and COMPLETED / status text. Instead of the round container/number being on the left side of the race/event entries, have it placed on top of the containers and have it say ROUND 1, ROUND 2, etc instead of R1, R2") -- .rcl-cal-status covers all three states (UP NEXT/UPCOMING/ COMPLETED, see rcl-cal-status-up/-upcoming/-complete) so hiding the base class removes the notification text in one rule. .rcl-cal-row switches from a side-by-side row (round bar left, event body right) to stacked, and the round bar itself swaps from a small fixed-width square to a full-width bar sized for its now-longer "ROUND N" text (.rcl-cal-round-short/-long above swap which span is visible). */ .rcl-cal-status { display: none; } .rcl-cal-row { flex-direction: column; } /* Round bar follow-up (2026-09-28, Matt's ask): keep the small top-left curve the desktop bar already has (border-top-left-radius:8px, base rule above) -- no border-radius override here any more, so it just carries over. Bigger text now that the bar has a full row's width to itself (was 15px), left-justified with a little padding instead of centered, and a thin border on the three edges that don't already have one from the row's own layout (left/right/bottom -- top is the dialog/panel's own edge for the first row, and every other row's bottom border above already separates it from the one before). */ .rcl-cal-round { width: 100%; height: auto; justify-content: flex-start; padding: 8px 14px 8px 14px; font-size: 19px; border-left: 1px solid var(--rcl-line-bright); border-right: 1px solid var(--rcl-line-bright); /* Keep the steel-silver bottom accent at this width too (2026-09-30, Matt's ask: "make mobile pc and tablet versions respect this change") -- was a plain 1px var(--rcl-line-bright) line, which would have quietly erased the brushed-nickel bar's silver bottom border the moment the layout switched to full-width on phone. Same 2px #c9cbce as the base rule above; left/right stay the plain thin line since those two edges aren't part of the "silver border" ask. */ border-bottom: 2px solid #c9cbce; } .rcl-cal-round-short { display: none; } .rcl-cal-round-long { display: inline; } /* UPCOMING / VIEW RESULTS, right side of the round bar (2026-10-02, Matt's ask: "let UPCOMING live inside the calendar round headers on the right side, and when a race is completed, swap it with the VIEW RESULTS link"). This is the mobile-only copy from _rclBuildCalStatusNode_ -- the desktop copy stays hidden via .rcl-cal-status above. margin-left:auto pushes it to the far right of the bar's own flex row without needing to touch that row's justify-content (still flex-start, for the ROUND N text). Smaller than its desktop size (11px -> 10px) and the round bar's own ink color (not red/steel) so it reads as part of the bar, not a competing accent -- except the VIEW RESULTS link, which keeps its red link color so it's still obviously clickable. */ .rcl-cal-round-status { display: inline-block; margin-left: auto; font-size: 10px; } .rcl-cal-round-status.rcl-cal-status-up, .rcl-cal-round-status.rcl-cal-status-upcoming, .rcl-cal-round-status.rcl-cal-status-complete:not(.rcl-cal-status-link) { color: inherit; } .rcl-cal-row-body { padding: 10px 14px; } }