html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ scroll-behavior: smooth; } body { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } a { background-color: transparent; } abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } button, input { /* 1 */ overflow: visible; } button, select { /* 1 */ text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } *, *::before, *::after{box-sizing:border-box;} a{text-decoration:none; color:inherit; cursor:pointer;} button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;} figure{margin:0;} input::-moz-focus-inner {border:0; padding:0; margin:0;} input:focus {outline: none; border: 0; } ul, ol, dd{margin:0; padding:0; list-style:none;} h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;} p{margin:0;} cite {font-style:normal;} fieldset{border-width:0; padding:0; margin:0;} img {display: block;} nav ul, nav li, nav ul li { margin:0; padding: 0; text-indent: 0; list-style-type: none; } nav ul li { display: inline-block; } input { font-size: 0.75rem; padding: 0.75em; border: 0; line-height: 0.75rem; } @media only screen and (max-resolution: 199dpi) { .imgx2 { display: none; } } @media only screen and (max-resolution: 199dpi) and only screen and (min-resolution: 200dpi) { .imgx1 { display: none; } .imgx2 { display: block; } } :root { --primary-colour: #ff873c; --secondary-colour: #69d7e1; --tertiary-colour: #a5fa64; --quaternary-colour: #bd94ff; --purple-colour: #9D6EE9; --primary-dark: #0E0E0E; --laila-colour: #dfd0fa; --primary-accent: #fbd1bb; --primary-accent-dark: #3b1f11; --secondary-accent: #c2e9ed; --secondary-accent-dark: #173032; --tertiary-accent: #e3f7d2; --tertiary-accent-dark: #253418; --quaternary-accent: #dfd0fa; --quaternary-accent-dark: #281e37; --grayscale-dark: #262626; --grayscale-mid: #818181; --grayscale-light: #f3f3f3; --grayscale-text: #a3a3a3; --footer-text: #b2adad; --text-colour-light: #707070; --grayscale-mid-light: #dedede; --table-header-colour: #2c2c2c; --primary-gray: #262626; --secondary-gray: #818181; --tertiary-gray: #f0f0f0; --primary-text-colour: #ffffff; --dark-line: #1e1e1e; --continental-blue: #293847; --past-events-blue: #69D7E1; --link-active-colour: var(--primary-colour); --font-contrast-colour: var(--primary-text-colour); --link-active-contrast-colour: var(--primary-text-colour); --navigation-background-colour: var(--grayscale-dark); --navigation-text-colour: var(--primary-text-colour); --calendar-header-background-colour: var(--secondary-colour); --calendar-subhead-background-colour: var(--primary-gray); --calendar-subhead-title-colour: var(--primary-text-colour); --calendar-table-background-colour: var(--primary-gray); --calendar-row-highlight-colour: var(--tertiary-accent); --calendar-row-highlight-contrast-colour: var(--primary-gray); --quick-links-background-colour: var(--secondary-accent-dark); --quick-links-active-link-colour: var(--secondary-colour); --quick-links-contrast-colour: var(--secondary-colour); --latest-images-background-colour: var(--secondary-colour); --page-title-background-colour: var(--secondary-accent); --page-table-header-background: var(--secondary-colour); --page-table-background-colour: var(--primary-colour); --page-subheader-title-colour: var(--tertiary-accent); --page-subheader-background-colour: var(--primary-colour); --link-active-contrast-colour: var(--primary-colour); --timetable-tab-day-title: var(--primary-text-colour); --timetable-tab-day-title-active: var(--quaternary-colour); --timetable-day-title: var(--quaternary-colour); --timetable-table-header: var(--quaternary-colour); --timetable-table-subheader: var(--primary-gray); --timetable-table-subheader-text: var(--primary-text-colour); --timetable-table-background: rgba(38, 38, 38, 0.9); --timetable-table-item-text: var(--primary-text-colour); --timetable-table-item-highlight: var(--primary-colour); --timetable-table-item-text-highlight: var(--primary-text-colour); --country-index-table-item-highlight: var(--secondary-colour); --country-detail-table-name: var(--secondary-colour); --country-detail-table-header: var(--secondary-colour); --country-detail-table-header-text: var(-primary-gray); --country-detail-table-subheader: #1e1e1e; --country-detail-table-subheader-text: var(--primary-text-colour); --country-detail-item-background: #1e1e1e; --country-detail-item-text: var(--primary-text-colour); --country-detail-item-background-highlight: #1e1e1e; --country-detail-item-text-highlight: var(--primary-text-colour); /* FIXME: a lots of duplicated code. Consider to refactor and reuse 1 table */ --athlete-search-table-header: var(--secondary-colour); --athlete-search-table-header-text: var(--primary-gray); --athlete-search-table-subheader: #1e1e1e; --athlete-search-table-subheader-text: var(--primary-text-colour); --athlete-search-item-background: #1e1e1e; --athlete-search-item-text: var(--primary-text-colour); --athlete-search-item-background-highlight: var(--secondary-colour); --athlete-search-item-text-highlight: var(--primary-gray); --register-link-colour: var(--primary-colour); --register-link-background: var(--primary-gray); /* Glasgow24*/ --glasgow-theme-green: #ADF375; --glasgow-theme-pink: #FC7DEB; --black: #1E1E1E; /* Competitions */ --ecal-default-colour: #A5FA64; --diamond-league-colour: #00FFFF; --wct-colour: #FF873C; --xcp-colour: #00A082; --ipm-colour: #C8F977; /* Competition mode */ --competition-mode-nav-active-color: #077079; --competition-mode-nav-default-color-black: #1E1E1E; --competition-mode-nav-background: #FFFFFF; --competition-mode-nav-background-gray: #EEF1F4; --competition-mode-accent-color-blue: #077079; --competition-mode-Grey-text-secondary: #52575D; --competition-mode-dark-blue: #303046; --primary-white: #FFF; --qualifier-colour: #A79EB7; --secondary-live-text-colour: #ed1c24; --guangzhou-purple: #5E318F; --guangzhou-purple-hover: #DFD0FA; --guangzhou-red: #E94653; --ultimate-black: #000000; --ultimate-light-grey: #D4D2D3; --ultimate-mid-grey: #A6A6A6; --ultimate-dark-grey: #4C4C4C; --ultimate-magenta: #F65CF3; --ultimate-yellow: #E9EA6B; --tokyo25-purple-dark: #513582; --tokyo25-purple-light: #BC94FF; --tokyo25-purple-light2: #F5F0FF; --tokyo-secondary-lighter-purple : #6F5797; --tokyo25-darker-gold: #98806D; --tokyo25-light-gold: #D3C0AF; --tokyo25-secondary-grey: #B2ADAD; --tokyo-grey-400: #DEE4EA; --world-athletics-plus-primary-green: #A5FA64; --world-athletics-plus-primary-black: #1E1E1E; --world-athletics-plus-primary-white: #FFFFFF; --world-athletics-plus-primary-violet: #11103A; --world-athletics-plus-error-primary-color: #660000; --world-athletics-plus-error-secondary-color: #F5BCBC; --world-athletics-plus-error-border-color: red; --world-athletics-plus-tertiary-violet: #a4b3f9; --world-athletics-plus-secondary-violet: #322961; --world-athletics-plus-secondary-grey: #F0F0F0; --live-red: #E60013; --currentEvent-color2-light: #D5EDD0; --currentEvent-color2: #ACCB7E; --currentEvent-color1: #EF7D4A; --currentEvent-color1-light: #FADFD2; --currentEvent-color2-transparent: #ACCB7E4D; --currentEvent-color2-transparent-dark: #41853333; --currentEvent-color2-transparent-medium: #ACCB7E80; --currentEvent-color2-dark: #418533; --currentEvent-color3: #CAD9F2; --currentEvent-color4: #323131; } /* ============================================================== COMPETITION MODE THEME Client-facing values for Competition Mode pages and the LiveNowCarousel. Edit ONLY this file to retheme. HOW TO USE - To restyle everything, change the base palette in section 1. - To tweak a single component, override its variables in the matching "Components" section (section 8). - To adjust dark-on-dark or light-on-dark areas, change sections 5 (Dark variant) or 6 (Light variant). Internal wiring lives in competitionModeWiring.css (do not edit that file to retheme). SECTIONS: 1. Base palette (colors) 2. Backgrounds (images, illustrations) 3. Typography (text colors, font sizes) 4. Buttons (primary + secondary, all states) 5. Dark variant 6. Light variant 7. Mobile / Desktop responsive overrides 8. Components 8.1 LiveNowCarousel 8.2 NextEvents (light + dark cases) 8.3 Medals page / table 8.4 Results page / latest results 8.5 Time table 8.6 Live view / session pages 8.7 News 8.8 Records & highlights 8.9 Navigation & tabs 8.10 Utilities (countdown, docs, where-to-watch, carousel) ============================================================== */ /* ============================================================== 1. BASE PALETTE Change these to retheme the entire competition mode. All component --cm-* variables cascade from these values. ============================================================== */ :root { /* * Client dark preset palette * Blue #2EA1E9, Magenta #F65CF3, Yellow #E9EA6B, * Turquoise #00F9E1. */ /* Accent — buttons, CTAs, links, active states, borders */ --cm-accent: #F65CF3; --cm-accent-light: #00F9E1; /* Brand — headers, badges, section backgrounds */ --cm-brand: #000000; --cm-brand-dark: #000000; --cm-brand-light: #000000; --cm-brand-transparent: #000000; --cm-brand-transparent-medium: #000000; --cm-brand-transparent-dark: #000000; /* Utility */ --cm-info: #F5F6F6; --cm-charcoal: #323131; /* Brand aliases for event themes with multiple accent roles */ --cm-brand-primary: #F65CF3; --cm-brand-secondary: #E9EA6B; --cm-brand-tertiary: #00F9E1; /* The red of every "live" dot in Competition Mode, sampled from the timetable reference. Distinct from the site-wide --live-red (#E60013). Defined here in the base palette because sections 8.4 (results) and 8.5 (timetable) both consume it, and postcss-custom-properties resolves var() at build time -- a token defined below its first use resolves to nothing. */ --cm-live-dot-color: #EA3458; /* The magenta-to-yellow sweep the design uses to mark "live": the WATCH LIVE button's border and the live event card's ring. Left to right, brand-primary into brand-secondary. */ --cm-live-gradient: linear-gradient(90deg, var(--cm-brand-primary) 0%, var(--cm-brand-secondary) 100%); /* Fifth hue, not in the four-colour list above but used as the opening stop of the Meet Them card gradients and the live-result outline button. */ --cm-brand-periwinkle: #8989F9; } /* ============================================================== 2. BACKGROUNDS ============================================================== */ :root { --cm-bg-primary: #000000; --cm-bg-secondary: #FFFFFF; --cm-bg-tertiary: #4C4C4C; --cm-bg-dark: #323131; --cm-card-gradient-1: var(--cm-brand-primary); --cm-card-gradient-2: var(--cm-brand-secondary); --cm-card-gradient-3: var(--cm-brand-tertiary); /* --- Main section backgrounds --- */ --cm-bg-image-main: url("https://assets.aws.worldathletics.org/68987318b869ed9d640a3569.jpeg"); --cm-bg-image-news: url(""); --cm-bg-image-secondary: url("/static/competitionMode/orange-background.jpg"); /* --- Live page artwork --- Split out of --cm-bg-image-main, which still drives ten other surfaces. These two carry the client's neon blur artwork and are positioned differently from each other, so they need their own knobs. */ --cm-bg-image-live-pattern: url("https://iaafmedia.s3.amazonaws.com/ultimate/blue-blur3.png"); --cm-bg-image-live-pattern-position: top center; /* The artwork is 2300x800 with its starburst on the right. Scaled to 200% and anchored right, the burst fills the upper band at the soft, enlarged scale the design uses; fitting it to the container made it too small and `cover` + centre landed on the image's dark left half. */ --cm-bg-image-live-pattern-position-x: right; --cm-bg-image-live-pattern-size: 130% auto; --cm-bg-image-live-pattern-bg: var(--cm-bg-primary); --cm-bg-image-live-panel: url("https://iaafmedia.s3.amazonaws.com/ultimate/blur2.png"); /* --- Results section decoration --- */ --cm-bg-image-results-pattern: url("https://iaafmedia.s3.amazonaws.com/ultimate/blur-results-v2.png"); /* --- Live home page section artwork --------------------------------- Each section owns its own background; there is no alternating rhythm. top live panel -> --cm-bg-image-live-pattern (blue-blur3), always latest results -> blur-results-v2 latest videos -> blur2 meet them band -> never artwork, see --cm-meet-them-section-bg latest news -> never artwork, see --cm-bg-image-news ------------------------------------------------------------------ */ --cm-latest-results-section-bg-image: var(--cm-bg-image-results-pattern); --cm-latest-results-section-bg-size: cover; /* Latest Videos to Watch on the live/home view. It ran blur2 centred and covering, which washed the whole band pink. */ --cm-live-videos-section-bg: var(--cm-bg-primary); /* --- Latest Videos to Watch: the corner star ------------------------ Straight from the Figma spec. The star is not a background sized off the band -- it is a fixed 699x515 box pinned to the bottom right, with the artwork drawn at 200.103% x 188.977% of that box and anchored at its top left, so only the star's top-left quadrant shows (50% across, 52.9% down). The 164deg gradient over it is what takes the burst down into the page colour, which is why the reference has no hard edge where the band meets the sections above and below it. Every Latest Videos band draws this through a ::after overlay. */ --cm-videos-band-star-image: url("/static/ultimate/relive_star.png"); --cm-videos-band-star-width: 699px; --cm-videos-band-star-height: 515px; --cm-videos-band-star-size: 200.103% 188.977%; --cm-videos-band-star-fade: linear-gradient(164deg, rgba(0, 0, 0, 0) 72.75%, rgba(0, 0, 0, 0.9) 90.68%); /* Figma's CSS export carries the fills but not the layer's opacity, and that gradient only takes 8% off the box on average -- it softens the bottom-right corner, it does not dim the artwork. Left at full strength the star peaks at luminance 236 against the reference's 112, so the layer is running at roughly this. Turn it here, not in the asset. */ --cm-videos-band-star-opacity: 0.45; /* The 164deg gradient runs corner to corner, so it leaves the star's rays climbing from 16 to 85 luminance within 80px of the band's bottom -- a knee sharp enough to read as an edge. This lays a straight vertical wash under it so the artwork dies out over the bottom 45% instead, which is long enough to look progressive and short enough to leave the burst's peak untouched. Painted above the Figma gradient, below nothing else; the band behind is already this colour, so it just goes to black. */ --cm-videos-band-star-base-fade: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 45%); /* The end-of-event header band -- "that's a wrap", key numbers and the records carousel. It ran --cm-bg-image-main, whose warm photograph is opaque to its own edge, so the band stopped against the black page in a hard horizontal line. blur2 is the same artwork the videos section uses and falls away to black, so the two blocks meet without a seam. Split from --cm-bg-image-main, which still drives ten other surfaces. */ /* Space between the results panel and the "See full results" pill under it on mobile. Desktop puts that link up in the heading instead. */ --cm-end-of-event-see-full-gap-mobile: 20px; --cm-end-of-event-header-bg: var(--cm-bg-primary); --cm-end-of-event-header-bg-image: var(--cm-bg-image-live-panel); --cm-end-of-event-header-bg-position: center center; --cm-end-of-event-header-bg-size: cover; --cm-bg-image-results-splatter-left: url(""); --cm-bg-image-results-splatter-right: url(""); /* --- Results page: Relive Past Highlights band ----------------------- Base colour only; the artwork comes from the shared corner-star tokens above. Desktop only -- the .green modifier that reads this is applied behind !isMobile, so mobile keeps the plain background. */ --cm-results-relive-section-bg: var(--cm-bg-primary); /* --- News tab: Latest Videos to Watch band -------------------------- The third copy of the same section. It ran --cm-bg-image-main centred and slightly overscaled, which put the orange photograph across the whole band instead of the reference's black-with-a-corner-burst. */ --cm-news-videos-section-bg: var(--cm-bg-primary); /* --- Illustrations --- */ --cm-image-runner: url("/static/competitionMode/green-runner.png"); --cm-image-records-runner: url("/static/competitionMode/records/runner.svg"); /* --- Discipline icons (used in timetable/results/records) --- */ --cm-discipline-icon-runner: url("/static/competitionMode/disciplines/runner.png"); /* Results empty-state icon, shown with "Official results coming soon". */ --cm-results-placeholder-icon: url("/static/competitionMode/no-official-results.png"); --cm-discipline-icon-throws: url("/static/competitionMode/disciplines/throws.png"); --cm-discipline-icon-jump: url("/static/competitionMode/disciplines/jump.png"); --cm-discipline-icon-road: url("/static/competitionMode/disciplines/road.svg"); --cm-discipline-icon-combined: url("/static/competitionMode/disciplines/combined.png"); --cm-discipline-icon-calendar: url("/static/competitionMode/disciplines/calendar.svg"); /* --- Records image assets --- */ --cm-records-no-athlete-photo: url("/static/competitionMode/records/no-athlete-photo.png"); --cm-records-no-athlete-relay-photo: url("/static/competitionMode/records/no-athlete-relay-photo.png"); --cm-records-world-record-icon: url("/static/competitionMode/records/world-record.svg"); --cm-records-national-record-icon: url("/static/competitionMode/records/national-record.svg"); --cm-records-championship-record-icon: url("/static/competitionMode/records/championship-record.svg"); /* --- Medals empty states --- */ --cm-medals-no-athlete-image: url("/static/competitionMode/no-medals-athlete.svg"); --cm-medals-no-federation-image: url("/static/competitionMode/no-medals-federation.svg"); /* --- Shared icon/fallback assets --- */ --cm-favourite-icon-image: url("/static/athletesIcons/followHeart.svg"); --cm-where-to-watch-icon-image: url("/static/video_icon.svg"); /* --- Live view pattern assets --- */ --cm-live-view-pattern-image: url("/static/competitionMode/guangzhou25-background.svg"); --cm-live-view-alert-pattern-image: url("/static/competitionMode/guangzhou25-background-red.svg"); --cm-live-view-alert-pattern-mobile-image: url("/static/competitionMode/guangzhou25-background-red-blended.svg"); /* --- Records and breaking-news decoration --- */ --cm-records-breaking-banner-image: url("/static/tealRibbon.png"); --cm-records-breaking-ribbon-image: url("/static/redHue.jpg"); /* --- Meet Them promotional/fallback assets --- */ --cm-meet-them-default-profile-image: url("/static/default-competitor-profile.svg"); --cm-meet-them-banner-bg-image: url("/static/dont_miss_banner_bg.png"); --cm-meet-them-banner-vector-primary-image: url("/static/dont_miss_module_vector_1.svg"); --cm-meet-them-banner-vector-secondary-image: url("/static/dont_miss_module_vector_2.svg"); /* --- News fallback and decoration assets --- */ --cm-news-fallback-image: url("/static/world-athletics-700.png"); /* The two grey brush splashes behind the phone Videos tab are legacy artwork that clashes with the Ultimate look; `none` keeps the variables as the theming hook without painting anything. */ --cm-news-decoration-component-3-image: none; --cm-news-decoration-component-4-image: none; } /* ============================================================== 3. TYPOGRAPHY Title and content text colors and font sizes. ============================================================== */ :root { --cm-title-color: #FFFFFF; --cm-title-color-alt: #ffffff; --cm-content-color: #ffffff; --cm-link-color: var(--cm-accent); --cm-link-underline-color: var(--cm-brand-secondary); --cm-text-on-accent: black; --cm-text-on-brand: var(--black, #000000); --cm-text-on-dark: #ffffff; --cm-font-body: var(--ultimate-font-family); --cm-font-bold: 'PP Formula Bold', var(--ultimate-font-family); --cm-font-headline: 'PP Formula Bold', var(--ultimate-font-family); /* Font weights. 'PP Formula' ships three faces only -- Narrow Regular at 400, Narrow Semibold at 600 and Condensed Black at 900 (BaseLayout.js). CSS font matching resolves any request above 600 upwards, so every 700 / 800 / `bold` in Competition Mode was rendering as Condensed Black. The client wants the Semibold cut, so 600 is the ceiling: every bold routes through --cm-font-weight-bold rather than carrying its own number. */ --cm-font-weight-regular: 400; --cm-font-weight-medium: 500; --cm-font-weight-bold: 600; --cm-icon-color: var(--cm-title-color); --cm-icon-color-on-dark: var(--cm-text-on-dark); --cm-favourite-icon-color: var(--cm-brand-primary); --cm-title-font-size: 21px; --cm-content-font-size: 14px; --cm-small-font-size: 12px; --cm-button-font-size: 16px; --cm-live-view-title-size: 24px; --cm-live-view-content-size: 18px; } /* ============================================================== 4. BUTTONS Two shared button variants. Every button across Competition Mode and the LiveNowCarousel should map to one of these via the wiring file. Each variant covers the full state matrix: - idle : default - hover : pointer hover - pressed : active / mouse-down - focus : keyboard focus / tab - disabled : non-interactive ============================================================== */ :root { /* --- 4.a PRIMARY (solid call-to-action) ------------------- */ --cm-primary-button-bg: var(--cm-accent); --cm-primary-button-color: var(--cm-text-on-accent); --cm-primary-button-border-color: var(--cm-accent); --cm-primary-button-bg-hover: transparent; --cm-primary-button-color-hover: var(--cm-accent); --cm-primary-button-border-hover: var(--cm-accent); --cm-primary-button-bg-pressed: var(--cm-accent); --cm-primary-button-color-pressed: var(--cm-text-on-accent); --cm-primary-button-border-pressed: var(--cm-accent); --cm-primary-button-bg-focus: var(--cm-accent); --cm-primary-button-color-focus: var(--cm-text-on-accent); --cm-primary-button-border-focus: var(--cm-accent); --cm-primary-button-bg-disabled: var(--cm-accent-light); --cm-primary-button-color-disabled: var(--cm-content-color); --cm-primary-button-border-disabled: var(--cm-accent-light); /* --- 4.b SECONDARY (outline / ghost) ---------------------- */ --cm-secondary-button-bg: transparent; --cm-secondary-button-color: var(--cm-title-color); --cm-secondary-button-border-color: var(--cm-accent); --cm-secondary-button-bg-hover: var(--cm-accent); --cm-secondary-button-color-hover: var(--cm-text-on-accent); --cm-secondary-button-border-hover: var(--cm-accent); --cm-secondary-button-bg-pressed: var(--cm-accent); --cm-secondary-button-color-pressed: var(--cm-text-on-accent); --cm-secondary-button-border-pressed: var(--cm-accent); --cm-secondary-button-bg-focus: var(--cm-accent); --cm-secondary-button-color-focus: var(--cm-text-on-accent); --cm-secondary-button-border-focus: var(--cm-accent); --cm-secondary-button-bg-disabled: transparent; --cm-secondary-button-color-disabled: var(--cm-content-color); --cm-secondary-button-border-disabled: var(--cm-content-color); } /* ============================================================== 5. DARK VARIANT Defaults for components rendered on a dark background (e.g. NextEvents on Results/Medals pages, LiveView CTAs, LatestResultsSection .dark). ============================================================== */ :root { --cm-dark-title-color: #ffffff; --cm-dark-content-color: rgba(255, 255, 255, 0.85); --cm-dark-bg: var(--cm-charcoal); --cm-dark-button-bg: var(--cm-accent); --cm-dark-button-color: var(--cm-text-on-accent); /* Dedicated token for the "see full results" CTA on dark panels */ --cm-seeFullResults-dark-button-bg: var(--cm-accent); --cm-seeFullResults-dark-button-color: var(--cm-text-on-accent); } /* ============================================================== 6. LIGHT VARIANT Defaults for components rendered on a light background (LatestResults, LiveResults, LatestMedals, NewsTab). ============================================================== */ :root { --cm-light-title-color: var(--black, #000000); --cm-light-content-color: white; } /* ============================================================== 7. RESPONSIVE OVERRIDES ============================================================== */ @media screen and (max-width: 767px) { :root { --cm-title-font-size: 18px; --cm-button-font-size: 14px; --cm-live-view-title-size: 21px; --cm-live-view-content-size: 16px; } } @media screen and (min-width: 1025px) { :root { --cm-title-font-size: 21px; --cm-live-view-title-size: 24px; } } /* ============================================================== 8. COMPONENTS Per-component knobs. Each group controls one Competition Mode component. Everything here cascades from the base palette; override a single variable to restyle only that component. ============================================================== */ /* --- 8.1 LiveNowCarousel -------------------------------------- Homepage banner carousel: title, live badge, schedule card, tabbed video/news content. Also drives NewLiveSchedule. -------------------------------------------------------------- */ :root { /* The site-wide live banner. Both of these existed already but reached nothing -- the component hardcoded --cm-bg-image-main, the bright orange jpeg, stretched to cover. screen_screen_global_live_carousel_desktop is black with the Ultimate starburst bleeding in from the two bottom corners, so the artwork is drawn twice, once per corner, and the mobile screen has no artwork at all. */ --cm-live-carousel-banner-bg-image: url("/static/competitionMode/live-carousel-star.png"); --cm-live-carousel-banner-bg-color: var(--cm-bg-primary); /* Sized and pushed past both bottom corners so only the blade reads, the way the reference crops it. The reference is a much closer crop than the asset's full extent -- broad soft shapes, not thin spikes -- so the artwork is drawn far larger than the band and anchored outside both corners. Trialled against the live banner at 620/900/1200/1500/1800px: below this the blades read as thin spikes, above it the burst washes across the middle of the band, which the reference keeps black. */ --cm-live-carousel-banner-bg-size: 1500px auto; --cm-live-carousel-banner-bg-position-left: left -880px bottom -500px; --cm-live-carousel-banner-bg-position-right: right -880px bottom -500px; --cm-live-carousel-banner-bg-image-mobile: none; /* The reference paints the same artwork at about half strength: its magenta blade measures #80006C and its gold edge #757744, where the asset itself is #FF00E0 and #EEFDA3. A flat scrim drawn over both image layers, so one value dims the whole burst without a second, darker copy of the asset. */ --cm-live-carousel-banner-bg-scrim: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); --cm-live-carousel-splash-fill: var(--cm-accent); /* The rule between the two columns. Was --cm-accent, which drew a full magenta line; the reference measures #45365E, a muted violet. */ --cm-live-carousel-spacer-color: #45365E; --cm-live-carousel-title-color: var(--cm-title-color); --cm-live-carousel-title-size: var(--cm-title-font-size); --cm-live-carousel-content-color: var(--cm-title-color); --cm-live-carousel-content-size: var(--cm-content-font-size); /* Desktop keeps the schedule on the black band; the mobile reference wraps the whole panel -- title, My time pill, Watch live button and rows -- in one white card. Was black at both widths. */ --cm-live-carousel-card-bg: var(--cm-bg-primary); --cm-live-carousel-card-bg-mobile: var(--cm-bg-secondary); --cm-live-carousel-live-badge-bg: var(--cm-brand); --cm-live-carousel-live-badge-color:#ffffff; --cm-live-carousel-final-badge-bg: var(--cm-accent-light); --cm-live-carousel-final-badge-color: var(--cm-accent); --cm-live-carousel-schedule-border: #EEE; /* Buttons (map to primary unless overridden per-component) */ --cm-live-carousel-button-bg: var(--cm-primary-button-bg); --cm-live-carousel-button-color: var(--cm-primary-button-color); --cm-live-carousel-button-border: var(--cm-primary-button-border-color); --cm-live-carousel-button-bg-hover: var(--cm-primary-button-bg-hover); --cm-live-carousel-button-color-hover: var(--cm-primary-button-color-hover); --cm-live-carousel-button-bg-pressed: var(--cm-primary-button-bg-pressed); --cm-live-carousel-button-color-pressed: var(--cm-primary-button-color-pressed); --cm-live-carousel-button-bg-focus: var(--cm-primary-button-bg-focus); --cm-live-carousel-button-color-focus: var(--cm-primary-button-color-focus); /* Every button in the band is a full pill in both references -- WATCH NOW, PLAY, LIVE RESULTS, TIMETABLE on desktop, TIMETABLE & RESULTS, NEWS and PLAY on mobile -- and every label is set in caps. The 8px radius and sentence case came from the generic button, not from these screens. */ --cm-live-carousel-button-radius: 9999px; --cm-live-carousel-button-text-transform: uppercase; /* Live-now status pill. Was the legacy var(--live-red), which is invisible from this file. Desktop draws it red with a white label and dot; mobile inverts it -- white pill, dark label, red dot -- so the three parts each carry a mobile counterpart. */ --cm-live-carousel-status-live-bg: var(--live-red, #E60013); --cm-live-carousel-status-live-color: var(--cm-live-carousel-live-badge-color); --cm-live-carousel-status-live-bg-mobile: var(--cm-bg-secondary); --cm-live-carousel-status-live-color-mobile: var(--cm-light-title-color); /* Caps on desktop -- "LIVE NOW" -- but sentence case on mobile, where the reference reads "Live now". */ --cm-live-carousel-status-live-text-transform: uppercase; --cm-live-carousel-status-live-text-transform-mobile: none; --cm-live-carousel-live-dot-bg: var(--cm-live-carousel-live-badge-color); /* Same red as the live dot on the live result card. */ --cm-live-carousel-live-dot-bg-mobile: #FF0554; /* Ghost "Where to watch" / "Play" variant of the watch button. The reference draws it as an unfilled pill with a periwinkle-to-magenta gradient border and a white label. It used to be a black label (--cm-light-title-color) on a 10%-white tint over black artwork, which rendered as black on black. Same gradient the live result card's outline button already uses. */ --cm-live-carousel-watch-button-color: var(--cm-text-on-dark); --cm-live-carousel-watch-button-color-hover: var(--cm-text-on-accent); /* The fill has to be opaque: it is clipped to padding-box and is what keeps the border gradient from showing through the middle of the pill. The reference draws these buttons over the black part of the band. */ --cm-live-carousel-watch-button-tint: var(--cm-live-carousel-banner-bg-color); --cm-live-carousel-watch-button-border-image: linear-gradient(90deg, var(--cm-brand-periwinkle) 0%, var(--cm-accent) 100%); /* The mobile footer's NEWS and PLAY buttons, the same outline pill. Was black on desktop and white below it; both references show white. */ --cm-live-carousel-schedule-button-color: var(--cm-text-on-dark); --cm-live-carousel-schedule-button-color-mobile: var(--cm-text-on-dark); --cm-live-carousel-schedule-button-hover-color: var(--cm-text-on-accent); --cm-live-carousel-schedule-button-focus-color: var(--cm-text-on-accent); --cm-live-carousel-shimmer-card-bg: #FFFFFF; /* --- NewLiveSchedule, the schedule panel inside the carousel --- Its title and My Time label previously used the legacy var(--black) and rendered at 1.26:1 and 1.09:1 on the banner artwork. They now follow the carousel title colour. */ --cm-live-schedule-title-color: var(--cm-live-carousel-title-color); /* Below desktop the panel is a white card, so "Live events" and "Coming up" invert with it. */ --cm-live-schedule-title-color-mobile: var(--cm-light-title-color); --cm-live-schedule-my-time-color: var(--cm-live-carousel-title-color); --cm-live-schedule-my-time-color-mobile: var(--cm-light-title-color); /* The pill behind that label, mobile only. Took the legacy --competition-mode-nav-background-gray, which resolves white and disappeared once the panel behind it turned white; the reference measures #EEF1F4. */ --cm-live-schedule-my-time-bg-mobile: #EEF1F4; /* Both references set these headings in sentence case -- "Live events", "Coming up". The uppercase came from the component, not the design; the translation keys themselves are lower case, hence capitalize. */ --cm-live-schedule-title-text-transform: capitalize; --cm-live-schedule-chevron-color: var(--cm-live-carousel-content-color); /* Sits on the magenta pill, so it takes the on-accent colour, not the band's white. */ --cm-live-schedule-watch-button-color: var(--cm-text-on-accent); --cm-live-schedule-timetable-button-color: var(--cm-light-title-color); --cm-live-schedule-timetable-button-color-hover: var(--cm-live-carousel-content-color); --cm-live-schedule-timetable-chevron-color: black; } /* --- 8.2 NextEvents (light + dark) ---------------------------- NextEvents appears in two contexts: - LIGHT : on a white page (Home live view, Between sessions) - DARK : embedded in a dark wrapper (Results, Medals pages) Each context has its own background, text and button tokens so dark and light can be tuned independently. -------------------------------------------------------------- */ :root { /* 8.2.a LIGHT context ------------------------------------- */ --cm-next-events-light-bg: transparent; --cm-next-events-light-title-color: var(--cm-title-color); --cm-next-events-light-text-color: var(--cm-title-color); --cm-next-events-light-label-color: var(--cm-title-color); --cm-next-events-light-button-bg: var(--cm-primary-button-bg); --cm-next-events-light-button-color: var(--cm-primary-button-color); /* 8.2.b DARK context -------------------------------------- */ /* Black, not --cm-bg-dark (#323131): both references that show this band -- screen_results_desktop_last_component_nextevent and screen_home_live_nextevents_and_ad_slot_dekstop -- put the white event rows straight on #000000. The band renders identically on the results, medals and news pages, so it moves as one. */ --cm-next-events-dark-bg: var(--cm-bg-primary); --cm-next-events-dark-title-color: var(--cm-text-on-dark); --cm-next-events-dark-text-color: var(--cm-text-on-dark); --cm-next-events-dark-label-color: var(--cm-text-on-dark); --cm-next-events-dark-button-bg: var(--cm-primary-button-bg); --cm-next-events-dark-button-color: var(--cm-text-on-dark); /* 8.2.c NEXT-EVENT CARD ------------------------------------ The rows inside the NextEvents band, rendered by components/competitionMode/newEvent. This is a SEPARATE component from the timetable's Event card: this one is a light card on a dark band, the timetable one is a dark card driven by the --cm-event-* family. Do not merge the two; --cm-event-card-bg resolves to #000000 and would flip this card black. Also consumed by NewLiveSchedule and liveSessions, which paint the same card in the live state. ---------------------------------------------------------- */ --cm-next-event-card-bg: #FFFFFF; --cm-next-event-card-hover-bg: #F4F4F5; /* The live-now carousel's card below desktop. Its only consumer is that carousel. Was the timetable's event card, which resolves black; the mobile reference puts these rows inside a white panel and measures #F5F6F6 -- --cm-info -- for the row itself. */ --cm-next-event-card-tint-bg: var(--cm-info); --cm-next-event-card-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; /* .eventName declared no colour at all and inherited whatever the host page supplied: white on Home and Results (invisible on the white card), black on News. This token stops that inheritance at the card. */ --cm-next-event-title-color: var(--cm-light-title-color); --cm-next-event-text-color: var(--cm-light-title-color); /* Text on the solid white card. Same values as above; kept as their own knobs so the white card and the tinted card can move independently. */ --cm-next-event-card-title-color: var(--cm-light-title-color); --cm-next-event-card-text-color: var(--cm-light-title-color); /* The live-now schedule's rows below desktop. The mobile reference puts them inside the white panel as light grey rows -- measured #F5F6F6, which is --cm-info -- with dark text. They were white text on a card that resolves white, so the event name and time were invisible. */ --cm-next-event-tint-title-color: var(--cm-light-title-color); --cm-next-event-tint-text-color: var(--cm-light-title-color); /* Action link on the card. Split from the time so the carousel can use the timetable's magenta link treatment without recolouring the time next to it. Defaults to the text colour, so NextEvents elsewhere is unchanged. */ --cm-next-event-link-color: var(--cm-next-event-text-color); /* Was the timetable's magenta link. The mobile reference sets the label in the row's dark text and leaves only the chevron magenta. */ --cm-next-event-tint-link-color: var(--cm-next-event-tint-text-color); /* Both carousel references draw "Startlist" / "Live results" in the card's dark text with a magenta chevron beside it. The arrow followed the label colour, so the two could not differ. Defaults to the label, so every other NextEvents surface is unchanged. */ --cm-next-event-link-arrow-color: var(--cm-next-event-link-color); /* Shape only -- the chevron is painted with the link colour via a mask, so the fill inside this SVG is irrelevant. */ --cm-next-event-link-arrow-image: url("/static/blackRightArrow.svg"); --cm-next-event-no-startlist-color: #333333; --cm-next-event-selected-bg: var(--secondary-colour, #E9EA6B); --cm-next-event-disabled-color: #737272FF; --cm-next-event-followed-athletes-bg: linear-gradient(91.56deg, rgba(255, 255, 255, 0.7) -3.5%, color-mix(in srgb, var(--cm-event-link-color) 70%, transparent) 136.26%), var(--cm-event-link-color); --cm-next-event-athlete-card-bg: #FFFFFF; --cm-next-event-athlete-card-color: #000000; --cm-next-event-font: var(--cm-font-body); --cm-next-event-title-font: var(--cm-font-headline); } /* --- 8.3 Medals page / table ---------------------------------- MedalsTable, MedalsListByAthlete, MedalsListByFederation, LatestMedals -------------------------------------------------------------- */ :root { --cm-medals-title-color: var(--cm-title-color); --cm-medals-title-size: var(--cm-title-font-size); --cm-medals-text-color: #1E1E1E; --cm-medals-muted-text-color: #303046; --cm-medals-subtle-text-color: #666666; --cm-medals-toggle-color: var(--cm-accent); --cm-medals-filter-border: var(--cm-accent); --cm-medals-filter-active-bg: var(--cm-accent-light); --cm-medals-switch-bg: var(--cm-bg-primary); --cm-medals-switch-color: var(--cm-title-color); --cm-medals-switch-active-bg: var(--cm-accent); --cm-medals-switch-active-color:var(--cm-text-on-dark); --cm-medals-card-bg: var(--cm-accent-light); --cm-medals-surface-bg: var(--cm-bg-primary); --cm-medals-button-bg: var(--cm-accent); --cm-medals-placing-border: var(--cm-accent); --cm-medals-row-bg: var(--cm-bg-primary); --cm-medals-row-alt-bg: var(--cm-bg-secondary); /* Medal rows alternate between a dark and a light surface, so each needs its own text colour. A single value cannot serve both. */ --cm-medals-row-color: var(--cm-text-on-dark); --cm-medals-row-alt-color: var(--cm-medals-text-color); --cm-medals-row-hover-bg: #DCE1E6; --cm-medals-row-border: var(--cm-results-row-border); --cm-medals-header-bg: var(--cm-charcoal); --cm-medals-header-text: var(--cm-text-on-dark); --cm-medals-empty-bg: var(--cm-results-empty-bg); --cm-medals-empty-border: var(--table-header-colour, #2c2c2c); --cm-medals-rank-default-bg: var(--cm-results-medal-badge-bg); --cm-medals-rank-default-color: var(--cm-results-medal-badge-color); --cm-medals-rank-text-color: var(--cm-results-rank-text-color); --cm-medals-rank-label-color: var(--black, #000000); /* The medal table always shows all three places, so these hold their own values. They used to follow --cm-results-rank-*-gradient, but the results tables show a medal for the winner only and blank places 2 and 3. */ --cm-medals-rank-gold-gradient: var(--cm-results-rank-1-gradient); --cm-medals-rank-silver-gradient: linear-gradient(276.02deg, #BCBABA -72.11%, #FFFFFF 156.09%); --cm-medals-rank-bronze-gradient: linear-gradient(273.43deg, #DA8B53 -45.1%, #FFC9A2 126.35%); --cm-medals-modal-surface-bg: var(--cm-bg-primary); --cm-medals-modal-filter-border: var(--cm-brand-light); --cm-medals-modal-filter-active-bg: var(--cm-event-phase-default-bg); --cm-medals-modal-filter-active-border: var(--cm-event-phase-default-bg); --cm-medals-close-bg: #FFFFFF99; --cm-medals-close-color: var(--cm-medals-text-color); --cm-medals-athlete-card-color-1: var(--cm-meet-them-card-color-1); --cm-medals-athlete-card-color-2: var(--cm-meet-them-card-color-2); --cm-medals-athlete-card-color-3: var(--cm-meet-them-card-color-3); --cm-medals-athlete-image-overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); --cm-medals-athlete-honour-bg: var(--cm-bg-secondary); --cm-medals-athlete-honour-count-bg: var(--cm-brand-secondary); --cm-medals-athlete-profile-button-color: #11103A; --cm-medals-athlete-profile-button-border: #11103A; --cm-medals-favourite-icon-color: var(--cm-meet-them-favourite-icon-color); --cm-medals-favourite-icon-stroke: var(--cm-text-on-dark); --cm-medals-spinner-color: var(--black, #000000); --cm-medals-spinner-muted-color: rgba(0, 0, 0, 0.3); --cm-medals-skeleton-bg: #e6e6e6; --cm-medals-skeleton-soft-bg: #f0f0f0; --cm-medals-skeleton-strong-bg: #dddddd; --cm-medals-skeleton-pulse-bg: #e5e5e5; --cm-medals-skeleton-shimmer-gradient: linear-gradient(90deg, #e6e6e6 0%, #f5f5f5 50%, #e6e6e6 100%); } /* --- 8.4 Results page / latest results ------------------------ LatestResults, LatestResultsSection, LiveResults, ResultListModal, EventSelectionModal, StartListModalContent, GenderSelector, CombinedEventPoints, SummaryTable, ResultList, OfficialResultsPlaceHolder, ResultsView -------------------------------------------------------------- */ :root { --cm-results-title-color: var(--cm-title-color); --cm-results-day-title-color: var(--cm-title-color); --cm-results-modal-title-color: var(--cm-results-content-color); /* "select event", "Gender" and "Event" in the mobile filter modal. They are an

and an

, so theme.css's site-wide heading rule beat the family the modal container passes down by inheritance. */ --cm-results-modal-title-font: var(--cm-font-bold); /* "Return" and "See timetable" at the foot of the startlist / result modals. Both were pinned to the light-panel text colour (ResultListModal's Return used --cm-brand-dark, black, for its underline too) while the modal footer is #4C4C4C, so they measured about 1.3:1. They are underlined text links on the dark footer below tablet; at tablet and up "See timetable" becomes a filled magenta pill, where the dark label is correct. */ --cm-results-modal-footer-link-color: var(--cm-text-on-dark); --cm-results-modal-footer-button-color: var(--cm-results-strong-text-color); /* 8.7.d THE EVENT SELECTION MODAL IS A DARK SURFACE -------------- ResultsView opens it on --cm-results-modal-bg, which is black, but its own type and buttons were still set for the light panel the component was written against: the title and the Gender/Event labels were --cm-results-strong-text-color (#1E1E1E) on black at 1.06:1, Reset was --cm-results-muted-text-color on a white fill at 2.0:1, and a disabled Apply was white on #CCCCCC at 1.6:1. Every one of those is a light- surface token on a dark surface. The title and labels move onto the modal's own --cm-results-modal-title-color; the two actions get their own knobs so the pair reads as an outlined secondary next to the accent primary, the way Competition Mode's other dark surfaces do. ---------------------------------------------------------------- */ --cm-results-modal-reset-bg: transparent; --cm-results-modal-reset-color: var(--cm-results-content-color); --cm-results-modal-reset-border-color: var(--cm-results-muted-text-color); --cm-results-modal-apply-bg: var(--cm-results-link-color); --cm-results-modal-apply-color: var(--cm-text-on-dark); --cm-results-modal-apply-disabled-bg: var(--cm-bg-tertiary); --cm-results-modal-apply-disabled-color: var(--cm-results-muted-text-color); /* Live result card: the Day 1 / session panel on the live home page. */ --cm-live-result-panel-bg: var(--cm-bg-secondary); --cm-live-result-panel-radius: 12px; --cm-live-result-panel-padding: 16px; /* The inner card sits inside the panel, so it paints nothing itself. */ --cm-live-result-card-bg: transparent; --cm-live-result-card-radius: 0; --cm-live-result-card-footer-bg: transparent; --cm-live-result-card-shadow: none; /* LIVE marker. The reference shows no pill: a coloured dot followed by text that takes the surrounding surface colour. The dot used to borrow --cm-live-result-live-badge-color (the text colour), so the two could never be set independently — hence the separate dot token. */ --cm-live-result-live-badge-bg: transparent; --cm-live-result-time-color: #4F4F4F; /* Matches the time it sits beside: the reference reads "Started 15 minutes ago * LIVE" as one continuous grey run. */ --cm-live-result-live-badge-color: var(--cm-live-result-time-color); --cm-live-result-live-dot-bg: #FF0554; --cm-live-result-button-color: var(--cm-light-title-color); --cm-live-result-button-alt-bg: var(--cm-bg-secondary); --cm-live-result-button-text-transform: uppercase; /* Outline button border. A gradient, so it is a border-image rather than a colour; --cm-live-result-button-alt-border-color is the flat fallback. */ --cm-live-result-button-alt-border-color: var(--cm-accent); --cm-live-result-button-alt-border-image: linear-gradient(90deg, var(--cm-brand-periwinkle) 0%, var(--cm-accent) 100%); --cm-live-result-row-bg: #FFFFFF; --cm-live-result-row-alt-bg: var(--cm-info); --cm-live-result-row-border: #D9D9D9; --cm-live-result-row-color: var(--cm-light-title-color); --cm-live-result-row-next-bg: var(--cm-info); --cm-live-result-row-last-bg: var(--cm-info); --cm-live-result-country-color: var(--cm-light-title-color); /* Results filter dropdowns. Previously hard-wired to --cm-accent in dropdown.jsx, so they could not be changed without repainting every accent surface on the site. */ --cm-results-dropdown-bg: var(--cm-brand-secondary); --cm-results-dropdown-border: var(--cm-brand-secondary); --cm-results-dropdown-color: var(--cm-light-title-color); --cm-results-dropdown-option-bg: var(--cm-bg-secondary); --cm-results-dropdown-option-color: var(--cm-light-title-color); /* The chevron in the results filter dropdowns. dropdown.jsx picked it from three literals by style variant -- 'white' for the secondaryStyle the results sidebar uses, which put a white arrow on the yellow pill. The reference draws it dark, the same as the label beside it. */ --cm-results-dropdown-icon-color: var(--cm-results-dropdown-color); --cm-results-dropdown-icon-color-third: #5E318F; --cm-results-dropdown-icon-color-default: var(--cm-light-title-color); /* react-select renders its own markup, so the font is passed from dropdown.jsx rather than a stylesheet. */ --cm-results-dropdown-font: var(--cm-font-body); /* react-select composes its styles in JS, so the two fades that dim a disabled control and its placeholder were literals in dropdown.jsx. They are what turns the yellow Event control olive on the black event selection modal while it waits for a gender. */ --cm-results-dropdown-disabled-opacity: 0.6; --cm-results-dropdown-placeholder-opacity: 0.7; /* Phase and heat tabs in the phase chooser. The selected tab keeps its own bold font, so these are separate knobs on purpose. */ --cm-results-phase-tab-font: var(--cm-font-body); --cm-results-unit-tab-font: var(--cm-font-body); /* Heat tabs inside the startlist/results modal. Separate from the phase chooser's tabs: those sit on the light results panel, these on the dark modal surface, so the two must not share a colour token. */ --cm-results-modal-unit-tab-color: var(--cm-results-content-color); --cm-results-title-size: var(--cm-title-font-size); --cm-results-content-color: var(--cm-content-color); --cm-results-content-size: var(--cm-content-font-size); --cm-results-link-color: var(--cm-accent); --cm-results-see-full-bg: var(--cm-accent); --cm-results-see-full-color: var(--cm-text-on-accent); /* "See full results" above the Latest Results carousel. The reference draws it as a white text link with a yellow underline, not the magenta pill -- so it is split from --cm-results-see-full-bg, which still fills the FULL LIVE RESULTS button on the live card. */ --cm-latest-results-see-full-bg: transparent; --cm-latest-results-see-full-color: var(--cm-text-on-dark); --cm-latest-results-see-full-underline: 2px solid var(--cm-link-underline-color); --cm-latest-results-see-full-padding: 0 0 2px; --cm-latest-results-see-full-radius: 0; --cm-results-active-tab-border: var(--cm-accent); /* The Results/Startlist tabs above the results panel. They sit on the grey --cm-results-page-bg band, not on the white panel, so they need light labels; screen_results_desktop_top_component draws the selected one white with a yellow rule and the other a soft grey. Split from --cm-results-active-tab-border, which is the same magenta rule inside the startlist/results modals -- a dark surface with no reference of its own -- and from the hardcoded #1E1E1E the tabs shipped with. */ --cm-results-panel-tab-color: #C9C9C9; /* The inactive Results / Series / Startlist tabs. They declared no family at all and fell back to the site's legacy font beside the active tab. */ --cm-results-panel-tab-font: var(--cm-font-body); /* "Results" / "Startlist" / "Series" / "Documents" above each collapsible panel. Bare

s, so below desktop they fell to theme.css's site-wide `h4, strong` rule and the legacy font. */ --cm-results-panel-title-font: var(--cm-font-bold); /* "Startlist not available yet" / "Official Results not available yet". Their container paints a near-white panel (--cm-results-empty-bg) but set no colour, so the text inherited its surroundings: dark inside the results accordion, but white inside the startlist popup -- 1.02:1 on its own panel. It is a light surface wherever it renders, so it names the colour now instead of inheriting one. */ --cm-results-empty-color: var(--cm-results-strong-text-color); /* The start-time block in the startlist / result modal header row. It carried a 4px bottom margin, and the row centres its children, so half of that lifted the time 2px above the "live" mark beside it. */ --cm-results-modal-time-margin-bottom: 0; /* The "Next " teaser at the foot of the startlist / result modals. It is a WHITE panel inside the dark modal, and three things were tuned for the dark surface around it instead: the accordion title took .title's white (1.00:1 on its own panel), the start time took the #E9E9E9 the wiring gives every liveResultCard time inside this modal (1.21:1), and the date sat 12px left of the block below it, which carries the inset the date is outside of. */ --cm-results-next-session-title-color: var(--cm-results-strong-text-color); --cm-results-next-session-time-color: var(--cm-results-strong-text-color); --cm-results-next-session-date-inset: 12px; /* The "Final" medal beside the tag in that teaser. The modal redefines --cm-event-phase-medal-filter to tint the glyph white for its dark body, which on this white panel made it invisible -- an 11px icon plus its 9px gap still holding 20px, so the tag read as indented against the time under it. The teaser restores the untinted artwork. */ --cm-event-phase-medal-filter-on-light: none; --cm-results-panel-tab-active-color: var(--cm-text-on-dark); --cm-results-panel-tab-active-border: var(--cm-brand-secondary); --cm-results-modal-border: var(--cm-accent); --cm-results-active-phase-bg: var(--cm-accent); --cm-results-inactive-phase-bg: var(--cm-accent-light); /* 8.7.a THE RESULTS SIDEBAR IS A DARK CARD ----------------------- screen_results_desktop_top_component draws "Select an event" as a #4C4C4C card on the grey results band, holding white labels, the yellow dropdowns and a yellow/near-black phase+session button pair. The card used to take --cm-results-surface-bg and its labels --cm-results-table-text-color, both of which belong to the WHITE results/startlist panels next to it, so the card came out white with dark labels. Split rather than flipped: those two tokens still paint the panels, the summary table and latestMedals. The buttons get their own knobs too, because --cm-results-active-phase-bg is not a button fill -- it is the results accent, and also draws tab underlines, chevrons, borders and the mobile "Select an event" gradient in results-view/styles.module.css. ---------------------------------------------------------------- */ --cm-results-filters-bg: var(--cm-bg-tertiary); --cm-results-filters-color: var(--cm-text-on-dark); --cm-results-phase-btn-bg: #2A2A2A; --cm-results-phase-btn-color: var(--cm-text-on-dark); /* The "Select event" buttons in the results sidebar. Only their hover and selected states declared a family, so an unselected button sat in the site's legacy font and snapped to the competition one under the cursor. */ --cm-results-phase-btn-font: var(--cm-font-body); --cm-results-phase-btn-active-bg: var(--cm-brand-secondary); --cm-results-phase-btn-active-color: var(--cm-text-on-accent); --cm-results-phase-btn-active-border: none; /* The mobile "SELECT AN EVENT" bar above Latest Results. Solid yellow with dark uppercase text in screen_results_event_not_selected_mobile, matching the Results pill; it shipped as a magenta-to-teal gradient built out of the two phase-accent tokens. */ --cm-results-select-event-bg: var(--cm-brand-secondary); --cm-results-select-event-color: var(--cm-text-on-accent); --cm-results-select-event-transform: uppercase; --cm-results-show-more-color: var(--cm-text-on-dark); /* "Select event" beside the chosen event name on mobile. Grey label with a yellow chevron in screen_results_event_selected_mobile; it took --cm-results-active-phase-bg for both, which is the magenta accent. */ --cm-results-select-event-label-color: #C9C9C9; --cm-results-select-event-label-font: var(--cm-font-body); --cm-results-select-event-chevron-color: var(--cm-brand-secondary); /* Heat/Summary tabs above the mobile results panel. They sit on the grey band, so the #1E1E1E they shipped with went dark-on-dark; the reference draws the unselected ones light grey and the selected one white over a yellow rule, not the magenta --cm-nav-phase-active-border. On desktop these same buttons are restyled as blocks by results-view's .unitsTab rules, which match at (0,2,0) and still win. */ --cm-results-unit-tab-color: #C9C9C9; --cm-results-unit-tab-active-color: var(--cm-text-on-dark); --cm-results-unit-tab-active-border: var(--cm-brand-secondary); /* The +/- that collapses the Results and Startlist panels. Magenta on the white panel in screen_results_event_selected_mobile. */ --cm-results-panel-expand-color: var(--cm-accent); --cm-relive-title-transform: uppercase; /* 8.7.b THE SIGNED-OUT VIDEO CARDS ------------------------------ FeaturedVideoItem and unAuthenticatedVideoItem both hardcode a white card and set no colour on it, so inside Competition Mode their text inherited the page's white and the card rendered blank -- title, stand-first and the "Enjoy exclusive content with your membership" line all invisible. This is the state a signed-out visitor gets, and screen_results_event_not_selected_mobile draws it as #1E1E1E on the white card with the supporting lines a softer grey. Both components also render on the main site, so they are painted through layout:competition-mode in competitionModeWiring.css rather than at the component. ---------------------------------------------------------------- */ --cm-featured-video-card-bg: var(--cm-bg-secondary); --cm-featured-video-card-color: var(--cm-results-strong-text-color); --cm-featured-video-card-muted-color: #484848; /* FeaturedVideoItem's outer wrapper drew a 1px #F0F0F0 square-cornered box around the card, which has a 12px radius -- so on the dark page it read as a stray white outline standing off the card's rounded corners. It renders only for a signed-out visitor, which is why it was never noticed against the main site's white page. Off by default; set a border here to bring it back. */ --cm-featured-video-card-border: none; /* The locked "Access even more videos" stack under the signed-out carousel. Its scrim fades to rgba(250,250,250,0.9) -- near white -- and the caption under the sign-up button declared no colour, so it inherited the page's white and vanished into the scrim. The button keeps the World Athletics+ green it shares with the + watermarks on those cards; it is tokenised here only so it is a knob. */ --cm-locked-video-auth-text-color: var(--cm-featured-video-card-muted-color); --cm-locked-video-signup-bg: #A5FA64; --cm-locked-video-signup-color: var(--cm-text-on-accent); --cm-results-gender-active-bg: var(--cm-accent); --cm-results-gender-hover-bg: var(--cm-accent-light); --cm-results-live-badge-bg: var(--cm-brand); --cm-results-live-badge-count-color: var(--cm-text-on-dark); /* The zebra pair for every results table -- LiveResults, SummaryTable, SeriesList, CombinedEventPoints and latestMedals all use -alt-bg as the banded row and nothing else. It was white, the same as the panel it bands, so no table striped at all. screen_results_desktop_top_component samples #FFFFFF / #F5F6F6 alternating, which is also what the live home cards show. -row-bg was --cm-bg-primary (black), pairing a black base with a white band; it reaches only latestMedals' own grid, which the results page does not currently render, but a black row on a light card is not what any reference draws either, so the pair moves together. */ --cm-results-row-bg: var(--cm-bg-secondary); --cm-results-row-alt-bg: #F5F6F6; /* Text on those rows. The tables set their tr colour from --cm-results-content-color (white, for a dark surface) and then flipped only the banded odd rows to a dark colour, so on the now-white panels every even row was white on white -- the "empty" rows in the results and startlist tables that showed nothing but a flag icon. Both bands are light, so both take the same dark text. */ --cm-results-row-color: var(--cm-results-strong-text-color); --cm-results-row-hover-bg: #dde2e7; --cm-results-row-border: #d9d9d9; /* Pure black, not --cm-charcoal: the Ultimate reference paints every results table header #000000. Also reaches the Q badges, the Meet Them "My Time" popup and Sync button, and the Latest Results header row. */ --cm-results-header-bg: #000000; --cm-results-header-color: var(--cm-text-on-dark); /* The Latest Results bar reads DISCIPLINE / 1ST / 2ND / 3RD in caps in screen_results_desktop_1; the component ships sentence case. */ --cm-results-header-transform: uppercase; /* Athlete name, country and mark in the end-of-event results card and in Latest Results of the Day -- its only two consumers. Both sit on --cm-results-row-bg, which is white, but this took --cm-title-color and rendered white on white. Same dark text the other light results tables use. It was invisible rather than obviously wrong because the card it sits in had collapsed to zero height on this event. */ --cm-results-cell-color: var(--cm-results-strong-text-color); /* The discipline name above those rows. Shared --cm-results-title-color with six other headings that sit on the black page and must stay white, so the one inside the white card is split off here. */ --cm-results-card-title-color: var(--cm-results-strong-text-color); --cm-results-cell-font-size: 13px; /* Applied to the shared TableBasic component, scoped to Competition Mode in competitionModeWiring.css. Also the Latest Medals row cells. */ --cm-table-cell-font: var(--cm-font-body); /* POS / ATHLETE / MARK bar. is `bold` in the browser's own stylesheet and TableBasic names no weight of its own. */ --cm-table-header-weight: var(--cm-font-weight-bold); /* The country label beside a flag icon. The shared Flags module sets layout only and never named a family, so inside Competition Mode the code read in the site's legacy font. Scoped in competitionModeWiring.css, because Flags renders all over the main site too. */ --cm-flag-name-font: var(--cm-font-body); /* Bare inside Competition Mode, notably the results marks. Scoped in competitionModeWiring.css. */ --cm-strong-font: var(--cm-font-bold); --cm-strong-weight: var(--cm-font-weight-bold); /* The "x" on every popup. store/Popup.module.css is a site-wide component and names the legacy var(--font-family), so it is scoped in competitionModeWiring.css like the other shared pieces. */ --cm-popup-close-font: var(--cm-font-body); /* Optical centring for that glyph. The button centres its line box, not the ink, and PP Formula draws a smaller multiplication sign than the site face (10.8px tall against 12.8px) sitting higher in the em box -- so switching the family above left the x 3.6px above the circle's centre. Padding, not a transform, so only the glyph moves and the 40px button stays put; the site's global border-box keeps the button its own size. */ --cm-popup-close-glyph-offset: 7px; /* The italic split label ("300 m") under a rank in the live track panel, and the attempt cells in the field-event series tables. Neither named a family, so both read in the site's legacy font; the split label also inherited the dark panel's white onto a light chip. */ --cm-results-split-label-font: var(--cm-font-body); --cm-results-split-label-color: var(--cm-results-strong-text-color); --cm-results-strong-text-color: #1E1E1E; /* Text inside the results/summary tables and the filters panel, which sit on --cm-results-surface-bg (black under the Ultimate preset). */ --cm-results-muted-text-color: #B2ADAD; /* Live status pill/dot inside result modals. Kept red rather than following --cm-results-live-badge-bg, which is a brand-toned badge. */ --cm-results-live-status-bg: var(--live-red, #E60013); /* Results and Startlist panels. screen_results_desktop_2 draws these as white cards with white/#F5F6F6 banding on the dark page, so the panel and its table text both flip. The modals keep --cm-results-modal-bg. */ --cm-results-surface-bg: var(--cm-bg-secondary); /* The results content band, full-bleed from under the Timetable/Results sub-nav down to the end of the tables. All three results references sample #2A2A2A here -- the same grey the timetable band already uses -- and it is what makes the #000000 Latest Results header bar read as a bar at all. The sub-nav strip above it stays black. Painted through results:page in competitionModeWiring.css. */ --cm-results-page-bg: #2A2A2A; /* "Full results" at the end of each Latest Results row. The reference draws the words near-black on the white row with only the chevron in magenta, so the text is split from --cm-results-link-color, which still paints the modal links, "show more" and the see-full pill. */ --cm-results-row-link-color: #2A2A2A; /* ...but the chevron beside it stays magenta in every reference that shows the link. accentArrows paints itself with currentColor, so once the words went dark the arrow followed; it is pushed back to the accent through layout:competition-mode in competitionModeWiring.css rather than by repainting the shared icon. */ --cm-results-row-link-arrow-color: var(--cm-accent); /* 8.4.a THE STARTLIST PANEL IS A DARK CARD ----------------------- screen_timetable_desktop draws the timetable's right-hand startlist as a dark grey card holding a white table, the inverse of the results-page panel above. The two used to share --cm-results-surface-bg, which is why the panel came out white while its heading kept --cm-results-content-color white -- the title, the "official startlist" label, the team name and two table cells were all white-on-white and simply did not paint. Split rather than flipped, because --cm-results-surface-bg is also the results page, LiveResults, SummaryTable, CombinedEventPoints, EventSelectionModal and latestMedals, all of which stay white. Wired onto results:startlist-modal in competitionModeWiring.css. ---------------------------------------------------------------- */ --cm-results-startlist-panel-bg: var(--cm-bg-tertiary); --cm-results-startlist-panel-color: var(--cm-text-on-dark); /* Table body inside that dark card. The reference keeps it a solid white block with #F5F6F6 banding and dark text, so the rows state their own surface instead of letting the card show through. Banding starts on the first row: odd rows are the tint, even rows white. */ --cm-results-startlist-row-bg: var(--cm-info); --cm-results-startlist-row-alt-bg: var(--cm-bg-secondary); /* Start time under the panel heading. It borrows liveResultCard's .time, whose --cm-live-result-time-color is #4F4F4F because its other two consumers put it on a light card; on this dark card that was 1.39:1. Wired by theme part rather than retuned, so the live panel and liveFullResults keep the dark grey they need. */ --cm-results-startlist-muted-color: #E9E9E9; /* The panel's live mark is a bare red dot and a white label, not the red pill the component draws by default. */ --cm-results-startlist-live-bg: transparent; --cm-results-startlist-live-color: var(--cm-text-on-dark); --cm-results-startlist-live-dot: var(--cm-live-dot-color); /* ResultListModal draws a 1px --cm-results-modal-border (magenta) ring at desktop, which it needs as a floating modal but which the startlist panel beside it does not have. */ --cm-results-startlist-panel-border: transparent; /* The "Final" medal glyph is white on this dark card, dark on the white event card. Applied by redefining --cm-event-phase-medal-filter on the panel in competitionModeWiring.css. */ --cm-results-startlist-medal-filter: brightness(0) invert(1); /* Shell of the shared site popup when the timetable opens the startlist into it -- mobile, and desktop By discipline. store/Popup.module.css hardcodes `background: white` and adds 20px of padding at desktop, so the dark startlist card sat inside a white frame. PopupProvider takes a classes.modal override, so this is scoped to the popups the timetable opens; every other popup on the site keeps its white shell. */ --cm-popup-modal-bg: var(--cm-results-startlist-panel-bg); /* "FULL LIVE RESULTS". The reference sets it in the heavy headline face, uppercase, in pure black on a fully rounded magenta pill; it was --cm-font-bold sentence case at #1E1E1E with an 8px radius. */ --cm-results-full-live-font: var(--cm-font-headline); --cm-results-full-live-color: var(--cm-light-title-color); --cm-results-full-live-transform: uppercase; --cm-results-full-live-radius: 9999px; --cm-results-table-text-color: var(--cm-light-title-color); --cm-results-modal-bg: var(--cm-bg-primary); --cm-results-empty-bg: #fbfdfd; --cm-results-panel-bg: var(--cm-bg-secondary); --cm-results-divider-color: #E5E8EB; --cm-results-soft-divider-color: #e5e7eb; --cm-results-subtle-border-color: #e9ecef; --cm-results-control-border-color: #cccccc; --cm-results-disabled-bg: #f5f5f5; --cm-results-disabled-color: #999999; --cm-results-overlay-bg: rgba(0, 0, 0, 0.5); --cm-results-modal-shadow: rgba(0, 0, 0, 0.15); --cm-results-close-bg: rgba(0, 0, 0, 0.1); --cm-results-close-hover-bg: rgba(0, 0, 0, 0.15); --cm-results-scrollbar-track: #e5e7eb; --cm-results-scrollbar-thumb: var(--cm-bg-primary); --cm-results-scrollbar-thumb-hover:#f9f9f9; --cm-results-scrollbar-thumb-border:#d1d5db; --cm-results-rank-text-color: #281E37EF; --cm-results-rank-1-bg: #FFC441; /* Places 2 and 3 are deliberately blank: this competition marks one winner only. The reference screens draw silver and bronze discs -- the desktop screens flat (#E0E0E0 / #FFB547), the mobile ones as the medal gradients -- but the client confirmed the Ultimate has a single winner per event, so the screens are not followed here. The knobs stay live: give either one a colour or a gradient and the discs come straight back. The medal table always shows three and is unaffected. */ --cm-results-rank-2-bg: transparent; --cm-results-rank-3-bg: transparent; --cm-results-rank-1-gradient: linear-gradient(279.16deg, #FFC441 -44.31%, #FFE2A2 188.44%); --cm-results-rank-2-gradient: none; --cm-results-rank-3-gradient: none; --cm-results-next-field-bg: #c2e9ed; --cm-results-next-track-bg: #DFD0FA; --cm-results-previous-bg: #a7a6a6; --cm-results-best-attempt-bg: #f8caad; --cm-results-current-attempt-bg: #ffe5ef; --cm-results-current-attempt-alt-bg:#ffeaf2; --cm-results-sort-hover-bg: #00b1bc4f; --cm-results-sort-active-bg: #00b1bc; --cm-results-position-up-color: #7fcdbb; --cm-results-position-down-color: #ed1c24; --cm-results-qualification-bg: #dfdfdf; /* "First 4 of each heat (Q) qualify to Final" under the results and startlist tables. QualificationRules declares no colour, so inside Competition Mode it inherited the page's white and vanished on the white panel. The references set it a soft grey. The component also renders on the dark startlist card and the live panel, so this is applied through results:table-area in competitionModeWiring.css rather than at the component, where it would follow it onto those dark surfaces too. */ --cm-results-qualification-color: #4C4D4D; --cm-results-badge-shadow: #0000004d; --cm-results-medal-badge-bg: #cccccc; --cm-results-medal-badge-color: #ffffff; --cm-results-record-wr-bg: #feb24c; --cm-results-record-cr-bg: #fed976; --cm-results-record-sb-bg: #c7e9b4; --cm-results-record-pb-bg: #7fcdbb; --cm-results-record-wl-bg: #7fcdbb; /* Record badges always sit on the light pastel backgrounds above, so their label needs a light-surface text colour rather than an inherited one. */ --cm-results-record-badge-color: var(--cm-light-title-color); --cm-results-play-icon-image: var(--cm-event-play-icon-image); /* The reference draws these cards as white panels on the black page. Split from --cm-results-surface-bg, which is still the black surface behind the results modals and result lists. */ --cm-latest-results-card-bg: var(--cm-bg-secondary); --cm-latest-results-card-title-color: var(--cm-light-title-color); --cm-latest-results-card-text-color: var(--cm-light-title-color); /* Was --cm-bg-secondary (white), which is now also the card it sits on. */ --cm-latest-results-time-bg: var(--cm-info); /* Zebra rows inside the light card. The shared table paints odd rows with --cm-results-row-alt-bg and leaves even rows transparent, so this fills the other half. It was --cm-info, the same tint the odd rows now carry, which flattened the card to one grey; white is the band the references alternate against. */ --cm-latest-results-row-alt-bg: var(--cm-bg-secondary); --cm-latest-results-row-color: var(--cm-light-title-color); /* 8.4.c THE END-OF-EVENT RESULTS PANEL (ULTIMATE ONLY) ----------- END_OF_EVENT_RESULTS.png redraws EndOfEventResults as one narrow centred panel of tall rows -- athlete cut-out, big name over the flag, discipline stacked over the mark, chevron -- with a magenta-to-yellow rule under each row, and no per-discipline heading or G/POS/ATHLETE/MARK bar. It is a different composition from the table every other event gets, so the whole group is scoped to isUltimate({ event }) in EndOfEventResults.jsx and reaches nothing else. Set --cm-end-of-event-* to retune it; the legacy table below is untouched by any of these. ---------------------------------------------------------------- */ --cm-end-of-event-max-width: 900px; /* Photo | name | discipline+mark | chevron. The client's own devtools values; the photo column is sized from the first track. */ --cm-end-of-event-row-columns: 0.2fr 1.2fr 0.8fr 0.1fr; /* The photo track is a fixed width on 375 rather than a fraction, and the discipline/mark stack takes only the width its longest line needs, so the name keeps whatever is left. */ /* The photo track is trimmed and the type dropped a step against the desktop ratio purely to keep the name on one line at 375: a name that wraps makes its stack taller than the discipline beside it, and two stacks of different heights cannot both be centred AND keep their first lines level. Widening the name column is what buys the centring. */ --cm-end-of-event-row-columns-mobile: 48px 1fr auto auto; /* Two insets, not one. The divider is drawn on the row's own bottom edge, so this outer padding is how far short of the sheet's edge the gradient stops -- the reference runs it almost the full width, 8px shy at each end. The row padding below then holds the content in off that line; the two together are the content's inset from the sheet edge. */ --cm-end-of-event-panel-padding: 0 8px; --cm-end-of-event-panel-padding-mobile: 0 6px; --cm-end-of-event-row-padding: 16px 16px; --cm-end-of-event-row-padding-mobile: 10px 6px; --cm-end-of-event-row-gap: 16px; --cm-end-of-event-row-gap-mobile: 8px; /* The rule under each row. Same magenta-to-yellow sweep the live states use -- aliased rather than restated so the two stay in step; give it its own linear-gradient() here to split them. */ --cm-end-of-event-row-divider: var(--cm-live-gradient); --cm-end-of-event-row-divider-width: 3px; /* border-image-slice for that rule. The gradient runs left to right, so any horizontal strip of it carries the full sweep. */ --cm-end-of-event-row-divider-slice: 3; /* Cut-out athlete photo in the first column. Shares the records carousel's placeholder, which is the only no-photo artwork in the theme. */ /* Every row is this tall inside its padding, whatever it holds. The figure lives on the photo cell, which every row has even when it is empty, so a relay with no cut-out and a discipline with no result stand as tall as an athlete with one. The photo is drawn to the same token, so the two can never drift apart. Raising it makes every row taller. */ --cm-end-of-event-row-content-height: 100px; --cm-end-of-event-row-content-height-mobile: 79px; --cm-end-of-event-photo-fallback: var(--cm-records-no-athlete-photo); /* The cut-outs are full-body and much narrower than the column, so `contain` left a thin sliver where the reference shows a head-and-torso crop. `cover` from the top fills the column and keeps the head. */ --cm-end-of-event-photo-fit: cover; --cm-end-of-event-photo-position: top center; /* The placeholders are drawn to their own frame, so cropping them from the top just shows empty background -- they are fitted whole instead. */ --cm-end-of-event-photo-fallback-fit: contain; /* Athlete name and discipline are the two things the reference makes big; they are deliberately the same size as each other. */ --cm-end-of-event-name-size: 32px; --cm-end-of-event-name-size-mobile: 18px; --cm-end-of-event-discipline-size: 32px; --cm-end-of-event-discipline-size-mobile: 18px; /* The reference sets the discipline in caps ("200M"). The label is built from disciplineCode in getShortDisciplineLabel.js and reads "100mH", "4x100m", "3000mSC" in its natural case, so set this to `none` if the lower-case metre marker should survive. */ --cm-end-of-event-discipline-transform: uppercase; --cm-end-of-event-mark-size: 18px; --cm-end-of-event-mark-size-mobile: 14px; --cm-end-of-event-country-size: 13px; /* Between a relay row's flag and its country name, which sit on one line rather than stacked like an athlete's name over their flag. */ --cm-end-of-event-team-flag-gap: 10px; /* The relay's four runners, listed under the country on the line an athlete gives to their flag. Sized with the country code by default; the line height leaves room for the list to wrap on a narrow column. */ --cm-end-of-event-team-members-size: var(--cm-end-of-event-country-size); --cm-end-of-event-team-members-line-height: 1.35; /* The list is the one thing in a row that grows without limit, so it is capped: past this many lines it ellipses rather than making its row taller than the rest. Keep it inside what --cm-end-of-event-row-content-height leaves under the country name. */ --cm-end-of-event-team-members-max-lines: 2; --cm-end-of-event-team-members-max-lines-mobile: 3; --cm-end-of-event-chevron-size: 16px; --cm-end-of-event-chevron-size-mobile: 12px; /* The chevron is the row's only link, so it is padded out to a usable tap target and given a hover state of its own. */ --cm-end-of-event-chevron-hit-padding: 10px; --cm-end-of-event-chevron-hover-color: var(--cm-accent); /* Aligning the discipline to the name is the fiddly part. The two stacks have different natural heights -- a 13px flag line against an 18px mark plus its record chip -- so centring each on its own content put the discipline a few pixels above the name. Instead both are given the same minimum height and centred: while neither stack's own content exceeds it the two boxes are identical, so their big first lines share a top edge AND the pair sits centred in the row. Keep this at or just under the taller stack's natural height (~60px at the sizes above): larger and the content floats above centre inside an oversized box; smaller and the two boxes stop matching. The photo still hangs from the bottom. */ --cm-end-of-event-stack-line-height: 1; --cm-end-of-event-stack-gap: 8px; --cm-end-of-event-stack-min-height: 60px; /* Same rule at the smaller type: at or just under the taller stack's natural height on 375. Left at the desktop value it padded every row out with dead space, most of it visible on the rows with no result. */ --cm-end-of-event-stack-min-height-mobile: 44px; /* How far the discipline/mark block is pulled in from the right edge of its column. The reference sets it well clear of the chevron rather than hard against it. Every row's discipline and mark right-align to that one edge, so raising this moves the whole right-hand column left as a block -- but it also narrows it, and a long label (4X400M over 14:12.19) will wrap once the remaining width is under about 150px. */ --cm-end-of-event-stack-inset: 130px; /* Only enough to hold the mark off the chevron on 375; there is no width to spare for the desktop gap. */ --cm-end-of-event-stack-inset-mobile: 6px; } /* --- 8.5 Time table ------------------------------------------- DisciplineList, MyTimeControl, CompetitionModeTimeTable -------------------------------------------------------------- */ :root { --cm-timetable-title-color: var(--cm-title-color); --cm-timetable-title-size: var(--cm-title-font-size); /* 8.5.b BY-DISCIPLINE SELECTION IS YELLOW, NOT MAGENTA ------------ By day selects with --cm-brand-secondary yellow (the Timetable pill, the TODAY pill) and keeps magenta for links and live state. By discipline used magenta for selection too, which made the two tabs read as different products. These follow the By-day system. ---------------------------------------------------------------- */ /* Category pill ("All" / "Track" / "Throws"). Unselected pills mirror the inactive Results pill, selected mirrors the active Timetable pill. --cm-timetable-category-active-bg previously reached nothing: the active rule painted itself with the border token, so the pill came out --cm-info near-white with white text on it. */ --cm-timetable-category-border: #1E1E1E; --cm-timetable-category-active-bg: var(--cm-brand-secondary); --cm-timetable-category-active-color: var(--cm-light-title-color); --cm-timetable-time-control-bg: var(--cm-accent); --cm-timetable-time-control-inactive-bg: #cccccc; --cm-timetable-time-control-knob-bg: var(--cm-bg-primary); /* Gender M/W buttons and the selected-discipline underline. Was --cm-accent magenta. */ --cm-timetable-accent: var(--cm-brand-secondary); /* Text on a filled (selected) gender button — the yellow above is a light surface, so its label cannot stay the panel's white. */ --cm-timetable-accent-color: var(--cm-light-title-color); /* Outer frame of the By-discipline side panel. Was --cm-brand-transparent-medium, which resolves to black and drew a dark border around the panel's own lighter fill; it now matches --cm-event-other-days-bg so the panel is one surface. */ --cm-timetable-discipline-bg: var(--cm-bg-tertiary); --cm-timetable-discipline-title-color: var(--cm-title-color); /* Discipline rows are the By-discipline equivalent of the By-day event card, so they take the same light card surface. Was --cm-bg-primary, i.e. the page black, which left the rows with no card at all. */ --cm-timetable-discipline-row-bg: var(--cm-event-card-bg); --cm-timetable-discipline-row-color: var(--cm-event-text-color); --cm-timetable-discipline-row-hover-bg: var(--cm-event-card-hover-bg); --cm-timetable-panel-bg: var(--cm-bg-primary); --cm-timetable-panel-text-color: var(--cm-title-color); /* The whole tab body, Latest News and Meet Them included. Black: in screen_timetable_desktop the grey stops with the timetable and everything below it is #000000. */ --cm-timetable-content-bg: var(--cm-bg-primary); /* The timetable band itself -- the day strip and the two columns, or the category pills and the discipline list. Sampled #2A2A2A from screen_timetable_byday_desktop. It is full-bleed while its content is capped at 1400px, so it is painted through the timetable:section theme part in competitionModeWiring.css rather than by this element's own box. Do NOT move this onto .tabContent: that wrapper also holds Meet Them and Latest News, which the reference puts on black. */ --cm-timetable-section-bg: #2A2A2A; --cm-timetable-section-dark-bg: #262626; /* 8.5.d DISCIPLINE ICON TINTS ------------------------------------- The discipline and calendar icons are assets with their artwork baked in -- runner.png is a bitmap and calendar.svg carries its own fills -- so they cannot be recoloured by a colour token. They are tinted with a filter instead: brightness(0) crushes the glyph to black, the added invert(1) takes it to white. Set either to `none` to show the asset's own artwork. The icons sit on three different surfaces, hence three knobs: the black tab band, the dark category pill, and the white discipline row. Before this they were the raw dark artwork on all three, which left the runner invisible on both dark surfaces. */ --cm-timetable-tab-icon-filter: brightness(0) invert(1); --cm-timetable-category-icon-filter: brightness(0) invert(1); --cm-timetable-discipline-icon-filter: brightness(0); --cm-timetable-focus-outline: #7c3aed; --cm-timetable-row-border: #f0f0f0; /* The reference runs a light thumb in a dark track beside the session list; these were the other way round (a near-white track with a black thumb), left over from the light-panel era. */ --cm-timetable-scrollbar-track: #292929; --cm-timetable-scrollbar-thumb: #D4D2D3; --cm-timetable-scrollbar-thumb-hover:#FFFFFF; --cm-timetable-scrollbar-thumb-border:#292929; /* Scroll fade at the foot of the discipline list. Was a #EEF1F4 light grey fading in over a black page, which drew a white smear across the bottom of the list at both widths. It has to end on the page colour. */ --cm-timetable-fade-bg-transparent: rgba(0, 0, 0, 0); --cm-timetable-fade-bg: var(--cm-bg-primary); --cm-timetable-event-card-bg: var(--cm-bg-primary); --cm-timetable-event-card-hover-bg: #f8f9fa; --cm-timetable-event-day-color: var(--cm-content-color); --cm-timetable-event-time-color: var(--cm-content-color); --cm-timetable-gender-header-bg: var(--cm-brand); --cm-timetable-gender-header-color: var(--cm-text-on-dark); --cm-day-selected-bg: var(--cm-brand-secondary); /* Selected day pill sits on a light brand colour, so its label needs a light-surface text colour rather than the alt title colour. */ --cm-day-selected-color: var(--cm-light-title-color); --cm-day-today-border: var(--cm-accent); /* "Today" / "Day 2" label above the date. The date below it keeps --cm-font-bold, so the two are separate knobs on purpose. */ --cm-day-label-font: var(--cm-font-body); --cm-event-accordion-bg: var(--cm-brand); --cm-event-finished-session-bg: var(--cm-brand-dark); /* The "FINISHED" pill beside a session title. The live pill it shares a class with sits on white and so takes a dark label, but this variant overrode the background to black and left the label behind -- #1E1E1E on #000000, about 1.3:1, which is what made it read as an empty dark smudge. Split off here rather than restyling the shared pill, which is correct on its own surface. */ --cm-event-finished-session-color: var(--cm-text-on-dark); --cm-event-link-color: var(--cm-brand-primary); /* The timetable reference draws the live session bar the same black as a non-live one; the red moved to the small "LIVE" pill beside the title, which is --cm-event-live-badge-bg. Was var(--live-red), which painted the whole bar red. */ --cm-event-live-accordion-bg: var(--cm-brand); /* 8.5.c LIVE INDICATORS ------------------------------------------ The reference draws three different live marks, and none of them is a red pill with white text: session bar -> WHITE pill, red dot, black label event card -> no pill at all, red dot, dark label startlist -> no pill at all, red dot, white label The red belongs to the dot only. Its value, --cm-live-dot-color, lives in the base palette because section 8.4 consumes it too and postcss-custom-properties resolves these at build time -- a token defined after its first use silently drops out. ---------------------------------------------------------------- */ /* The session bar's own "LIVE (n)" pill in EventList. Was a bare var(--live-red) in that file, invisible from here. */ --cm-event-live-pill-bg: var(--cm-bg-secondary); --cm-event-live-pill-color: var(--cm-light-title-color); /* The Ultimate face sits high in its em box, so the symmetrical 0 8px this pill shipped with pushed "LIVE" against the top edge. Client-supplied value: 1px of optical lead at the top, none at the bottom. */ --cm-event-live-pill-padding: 3px 10px 0; --cm-event-live-dot-bg: var(--cm-live-dot-color); /* "Live" mark on the timetable event row. The reference has no pill here -- a red dot and a dark label straight on the white card -- so the badge surface is transparent and the red moved to the dot. */ --cm-event-live-badge-bg: transparent; --cm-event-live-badge-color: var(--cm-light-title-color); --cm-live-view-live-badge-bg: var(--live-red, #E60013); /* Inner surface of the By-discipline side panel. It is the structural twin of By day's startlist panel, so it takes the same #4C4C4C the reference gives that panel rather than the page grey -- otherwise the panel reads only as a border. */ --cm-event-other-days-bg: var(--cm-bg-tertiary); --cm-event-play-bg: var(--cm-brand-dark); --cm-event-play-icon-image: url("/static/play-icon-white.svg"); /* 8.5.e WATCH LIVE ------------------------------------------------ The session bar's live-stream button. The reference draws it as a fully rounded pill with a transparent centre, a magenta-to-yellow border and a solid white play triangle to the LEFT of the label. The markup emits a ChevronRight after the label instead, so the triangle is drawn as a ::before from the existing play-icon mask and the chevron is switched off -- set the two display knobs the other way to get the original arrangement back. The centre is not literally transparent: a gradient border needs a padding-box fill, so it repeats the session bar's own colour. ---------------------------------------------------------------- */ --cm-event-watch-live-fill: var(--cm-event-accordion-bg); --cm-event-watch-live-border: var(--cm-live-gradient); --cm-event-watch-live-color: var(--cm-text-on-dark); --cm-event-watch-live-font: var(--cm-font-headline); --cm-event-watch-live-transform: uppercase; --cm-event-watch-live-radius: 9999px; --cm-event-watch-live-icon-display: inline-block; --cm-event-watch-live-chevron-display: none; --cm-event-selected-border: var(--cm-brand-primary); /* 8.5.a THE EVENT CARD IS A LIGHT SURFACE ------------------------ The timetable reference draws white event cards on a dark grey panel; this used to be the inverse (a #1E1E1E card on a #F0F0F0 panel). Everything painted ON the card therefore takes a light-surface colour, and everything painted on the black session bar around it takes --cm-event-on-dark-color instead. If you flip the card back to a dark fill you must flip all four of these with it, or the card text goes invisible. ---------------------------------------------------------------- */ --cm-event-card-bg: #FFFFFF; --cm-event-text-color: var(--cm-light-title-color); --cm-event-muted-text-color: #4C4C4C; /* "Startlist ›" / "Result ›" label. The chevron beside it stays --cm-event-link-color magenta, per the reference; only the word is dark. Split from --cm-event-link-color, which still paints the chevron and the live-results button. */ --cm-event-status-link-color: var(--cm-light-title-color); --cm-event-disabled-text-color: #737272FF; --cm-event-on-dark-color: var(--cm-text-on-dark); --cm-event-card-hover-bg: #F4F4F5; /* The surface the cards sit on. Was #F0F0F0, the light half of the old inverted pairing. The reference shows no distinct panel here -- the cards sit straight on the timetable band grey -- so this follows it rather than introducing a third tone. */ --cm-event-grid-bg: var(--cm-timetable-section-bg); --cm-event-divider-color: #e5e7eb; --cm-event-soft-divider-color: #B2ADAD; --cm-event-upcoming-border-color: #69D7E1; /* Disc behind the session bar's collapse control. The reference has a bare white minus stroke with no disc at all; this was a 19%-white circle, which mobile already switched off. */ --cm-event-icon-bg-on-color: transparent; --cm-event-followed-border: var(--cm-event-selected-border); --cm-event-followed-athletes-bg: linear-gradient(90deg, var(--cm-brand-primary) 0%, var(--cm-brand-secondary) 100%); /* The favourited-athlete pill on the timetable's highlight row. It pointed at --cm-bg-primary, the page's black, while its own label is #000000 -- so the name rendered black on black and the pill read as an empty dark lozenge on the magenta/yellow gradient. The same pill in Next Events is white with a black name (--cm-next-event-athlete-card-*), and one component must look the same in both places, so this pair now matches it. */ /* Optical centring for the name inside that pill. The card is a flex row centring its line box, but PP Formula's ink sits high in it -- 3.67px of space above the letters against 6.67px below -- so the name read as sitting near the top of the lozenge. Applied as a top-weighted padding that keeps the pill's 20px height, with the flag pulled back by the same amount because it is a box and was already centred exactly. */ --cm-event-athlete-card-label-offset: 1px; --cm-event-athlete-card-bg: #FFFFFF; --cm-event-athlete-card-color: #000000; --cm-event-no-startlist-color: #333333; /* The medal glyph beside a "Final" tag. static/medal.svg carries its own fills, so it is tinted rather than coloured. Default `none` keeps the dark artwork it needs on the white event card -- and on the twenty-odd other places EventPhase renders, main-site pages included. The dark startlist / result panels override it through --cm-results-startlist-medal-filter in competitionModeWiring.css. */ --cm-event-phase-medal-filter: none; /* EventPhase's wrapper carries a 4px margin-top for the event card, where the tag sits under the event name. The Results and Series panels put it in a flex row beside the start time instead, and align-items: center turns half that margin into a 2px drop against the time. Zeroed for those two headers in competitionModeWiring.css. */ --cm-event-phase-header-margin-top: 0; --cm-event-phase-color: var(--cm-light-title-color); --cm-event-phase-default-bg: #dfd0fa; --cm-event-phase-heats-bg: #c2e9ed; --cm-event-phase-final-bg: var(--cm-brand-tertiary); /* Final turquoise, Semi-final yellow -- the distinction the client asked for. The timetable and Meet Them reference screens draw both tags turquoise, so this is a deliberate departure from those images. */ --cm-event-phase-semi-final-bg: var(--cm-brand-secondary); } /* --- 8.6 Live view & session pages ---------------------------- LiveView, LiveViewHeader, LivePageBeforeEventStart, LivePageBetweenSessions, LivePageEndOfEvent -------------------------------------------------------------- */ :root { --cm-live-view-bg: var(--cm-brand); --cm-live-view-title-color: var(--cm-title-color); --cm-live-view-content-color: var(--cm-title-color); --cm-live-view-header-bg: var(--cm-brand); /* CMS copy under the live/end-of-event header title. It shipped in a bare
with no class, so it read in the site's legacy font. */ --cm-live-view-description-font: var(--cm-font-body); /* "DAY 1 / Evening session" line above the live stream. The day label was already wired to --cm-font-bold, but the session name carried no font-family at all and fell through to the site's legacy face, so the two halves of the same line rendered in different fonts. */ --cm-live-view-session-label-font: var(--cm-font-body); /* "n LIVE EVENTS" pill. Its border used to be --cm-live-view-header-bg, the same colour as its own fill, so it was invisible. The reference draws a magenta-to-yellow gradient, which needs a border-image. */ --cm-live-events-pill-bg: var(--cm-brand); --cm-live-events-pill-border-width: 2px; --cm-live-events-pill-border-image: linear-gradient(90deg, var(--cm-accent) 0%, var(--cm-brand-secondary) 100%); --cm-live-events-pill-text-transform: uppercase; --cm-live-view-button-bg: var(--cm-primary-button-bg); --cm-live-view-button-color: var(--cm-primary-button-color); --cm-live-view-records-bg: var(--cm-accent); --cm-live-view-message-bg: var(--cm-brand); --cm-live-view-gradient-dark: var(--cm-brand-dark); --cm-live-view-page-bg: var(--cm-bg-primary); /* Band under the news section on the live page. Was --cm-bg-secondary, which the Ultimate preset left white, so it read as a white strip. */ --cm-live-view-section-bg: var(--cm-bg-primary); --cm-live-view-dark-section-bg: var(--black, #000000); --cm-live-view-muted-section-bg: var(--primary-gray, #262626); --cm-live-view-overlay-bg: rgba(0, 0, 0, 0); /* Decorative background for the unauthenticated next-events panel in its "today's sessions are over" state. Off by default. Accepts any background-image value: a url(), a gradient, or several comma-separated layers. The -size/-position/-repeat knobs below default to values that suit a single image; set all four to restore the original split treatment: image: linear-gradient(to right, var(--cm-live-view-dark-section-bg) 0%, var(--cm-live-view-dark-section-bg) 50%, transparent 50%, transparent 100%), var(--cm-bg-image-secondary) size: 100% 100%, 50% 100% position: 0 0, 100% 0 repeat: no-repeat, no-repeat */ --cm-live-view-next-events-over-image: none; --cm-live-view-next-events-over-image-size: cover; --cm-live-view-next-events-over-image-position: center; --cm-live-view-next-events-over-image-repeat: no-repeat; --cm-live-view-empty-border: var(--table-header-colour, #2c2c2c); --cm-live-view-title-link-border: var(--guangzhou-purple, #5E318F); --cm-live-view-all-results-bg: #69D7E1; --cm-live-view-all-results-color:#1E1E1E; --cm-live-view-link-border: var(--guangzhou-purple, #5E318F); --cm-live-view-secondary-button-bg: var(--guangzhou-purple, #5E318F); --cm-live-view-accent-link-color: var(--competition-mode-accent-color-blue, #077079); --cm-live-view-alert-bg: var(--guangzhou-red, #E94653); --cm-live-view-light-split-bg: #FFFFFF; /* Left half of the live view. Was solid #FFFFFF, which put a white slab behind the live results panel and out to the page edge. The Ultimate design has the panel as a light card floating on the black page. */ --cm-live-view-auth-split-bg: linear-gradient(to right, var(--cm-bg-primary) 0%, var(--cm-bg-primary) 50%, transparent 50%, transparent 100%); /* Right-half overlay on the no-video live view. Off so the top section shows the same blue blur in both variants. */ --cm-live-view-split-image: none; --cm-live-view-next-events-bg: linear-gradient(0deg, #11103A, #11103A), linear-gradient(91.56deg, rgba(188, 148, 255, 0.7) -96.3%, rgba(17, 16, 58, 0.7) 136.26%); --cm-live-view-alt-button-bg: var(--quaternary-accent, #dfd0fa); --cm-live-view-alt-button-color: var(--black, #000000); } /* --- 8.7 News ------------------------------------------------- CompModeNews, CompModeNewsGridCard, CompModeNewsVideoCardDesktop, FeaturedNewsDesktop, NewsTab -------------------------------------------------------------- */ :root { --cm-news-title-color: var(--cm-title-color); --cm-news-title-size: var(--cm-title-font-size); --cm-news-content-color: var(--cm-content-color); --cm-news-content-size: var(--cm-content-font-size); --cm-news-page-bg: var(--cm-bg-primary); --cm-news-section-bg: var(--cm-bg-primary); --cm-news-tab-bg: var(--cm-accent-light); --cm-news-tab-active-bg: var(--cm-accent); /* Both tab pills sit on a bright accent (cyan inactive, magenta active), so their labels read as dark, not as the page's white-on-black text. */ --cm-news-tab-color: var(--cm-text-on-accent); --cm-news-tab-active-color: var(--cm-text-on-accent); --cm-news-tab-font: var(--cm-font-body); --cm-news-tab-active-font: var(--cm-font-bold); --cm-news-card-bg: #1E1E1E; --cm-news-card-color: var(--cm-text-on-dark); --cm-news-card-border-color: #1E1E1E; --cm-news-card-hover-bg: #333333; --cm-news-card-hover-color: var(--cm-text-on-dark); --cm-news-article-type-color: var(--cm-accent); --cm-news-featured-accent: var(--cm-accent); --cm-news-view-all-bg: var(--cm-accent); --cm-news-play-icon-color: var(--cm-accent); --cm-news-play-icon-image: var(--cm-event-play-icon-image); --cm-news-video-text-color: var(--cm-text-on-dark); --cm-news-video-overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 37.61%, #000000 100%); --cm-news-video-auth-overlay-gradient: linear-gradient(90.13deg, rgba(0, 0, 0, 0) -52.2%, rgba(0, 0, 0, 0.72) 50.03%); --cm-news-video-play-button-color: var(--cm-text-on-dark); --cm-news-video-play-button-bg: rgba(255, 255, 255, 0.4); --cm-news-video-play-button-hover-bg: rgba(255, 255, 255, 0.9); --cm-news-video-play-button-shadow: rgba(0, 0, 0, 0.2); --cm-news-video-play-button-hover-shadow: rgba(0, 0, 0, 0.25); /* Phone Videos tab. The section heading, the card titles and the "View all" link all inherited the main site's legacy family and near-black text, so they sat invisible on the black news surface. */ --cm-news-videos-title-color: var(--cm-dark-title-color); --cm-news-videos-title-font: var(--cm-font-bold); --cm-news-videos-text-color: var(--cm-text-on-dark); --cm-news-videos-card-title-color: var(--cm-text-on-dark); --cm-news-videos-view-all-color: var(--cm-text-on-dark); --cm-news-videos-view-all-font: var(--cm-font-body); --cm-news-videos-view-all-line-bg: var(--cm-accent); --cm-news-video-grid-play-bg: rgba(255, 255, 255, 0.2); --cm-news-video-grid-play-color: var(--cm-text-on-dark); --cm-news-video-wa-plus-bg: var(--cm-bg-primary); --cm-news-video-wa-plus-color: var(--black, #000000); /* Two labels on the video card declared no font at all: the hover label ("Watch" / "Sign in to watch"), which inherited the site's legacy family from the page, and the "Access for free" button, which is a